/* Communication Coaching Page Styles */
/* Hero Section */
.coaching-hero {
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, 0.17), rgba(0, 0, 0, 0.36)),
url("../images/hero_bg.jpg");
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--text-white);
position: relative;
overflow: hidden;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.4) 100%
);
z-index: 1;
}
.coaching-hero-content {
max-width: 900px;
padding: 0 20px;
position: relative;
z-index: 2;
margin-top: 9rem;
}
.hero-badge {
margin-bottom: 30px;
animation: float 3s ease-in-out infinite;
}
.hero-badge img {
width: 120px;
height: 120px;
}
.coaching-hero-content h1 {
font-size: 56px;
margin-bottom: 20px;
color: var(--text-white);
animation: fadeInUp 0.8s forwards;
animation-delay: 0.3s;
opacity: 0;
transform: translateY(20px);
line-height: 1.2;
}
.coaching-hero-content h1 span {
color: var(--primary-color);
display: block;
}
.coaching-hero-content p {
font-size: 22px;
margin-bottom: 30px;
animation: fadeInUp 0.8s forwards;
animation-delay: 0.6s;
opacity: 0;
transform: translateY(20px);
}
.hero-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
animation: fadeInUp 0.8s forwards;
animation-delay: 0.9s;
opacity: 0;
transform: translateY(20px);
}
.btn-outline {
background-color: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.btn-outline:hover {
background-color: var(--primary-color);
color: var(--text-white);
}
.hero-features {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 30px;
animation: fadeInUp 0.8s forwards;
animation-delay: 1.2s;
opacity: 0;
transform: translateY(20px);
}
.hero-feature {
display: flex;
align-items: center;
gap: 10px;
}
.hero-feature i {
color: var(--primary-color);
}
.hero-scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
animation: bounce 2s infinite;
}
.hero-scroll-indicator a {
display: flex;
flex-direction: column;
align-items: center;
color: var(--text-white);
font-size: 14px;
opacity: 0.8;
transition: var(--transition);
}
.hero-scroll-indicator a:hover {
opacity: 1;
}
.hero-scroll-indicator i {
margin-top: 8px;
font-size: 18px;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* Introduction Section */
.coaching-intro {
padding: 100px 0;
background-color: var(--bg-light);
}
.coaching-intro-content {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 40px;
}
.coaching-intro-text {
flex: 1;
min-width: 300px;
}
.intro-highlight {
background-color: var(--primary-color);
color: var(--text-white);
padding: 30px;
border-radius: var(--border-radius);
margin-bottom: 30px;
position: relative;
}
.intro-highlight:before {
content: '"';
position: absolute;
top: 10px;
left: 10px;
font-size: 60px;
opacity: 0.3;
}
.highlight-text {
font-size: 18px;
font-style: italic;
line-height: 1.6;
margin-bottom: 10px;
}
.highlight-author {
text-align: right;
font-weight: 600;
}
.coaching-intro-text p {
margin-bottom: 20px;
font-size: 16px;
line-height: 1.8;
}
.intro-features {
margin: 30px 0;
}
.intro-feature {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.feature-icon {
width: 50px;
height: 50px;
background-color: var(--primary-color);
color: var(--text-white);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
flex-shrink: 0;
}
.feature-text h4 {
font-size: 18px;
margin-bottom: 5px;
}
.feature-text p {
margin-bottom: 0;
color: var(--text-light);
}
.coaching-intro-image {
flex: 1;
min-width: 300px;
}
.intro-image-container {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.intro-image-container img {
width: 100%;
display: block;
}
.intro-image-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0) 100%
);
padding: 30px 20px 20px;
}
.intro-stats {
display: flex;
justify-content: space-around;
color: var(--text-white);
text-align: center;
}
.intro-stat {
display: flex;
flex-direction: column;
}
.stat-number {
font-size: 36px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 5px;
}
.stat-text {
font-size: 14px;
}
/* Benefits Section */
.coaching-benefits {
background-color: var(--bg-light);
padding: 80px 0;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.benefit-card {
background-color: var(--text-white);
border-radius: var(--border-radius);
padding: 30px;
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
}
.benefit-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.benefit-icon {
width: 70px;
height: 70px;
background-color: var(--primary-color);
color: var(--text-white);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 20px;
font-size: 28px;
}
.benefit-card h3 {
font-size: 22px;
margin-bottom: 15px;
}
.benefit-card p {
color: var(--text-light);
}
/* Coaching Programs Section */
.coaching-programs {
padding: 80px 0;
}
.programs-container {
max-width: 1000px;
margin: 0 auto;
}
.program-tab-container {
background-color: var(--text-white);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.program-tabs {
display: flex;
flex-wrap: wrap;
background-color: var(--bg-light);
border-bottom: 1px solid #eee;
}
.program-tab {
padding: 15px 25px;
background: none;
border: none;
cursor: pointer;
font-weight: 600;
font-size: 16px;
transition: var(--transition);
position: relative;
color: var(--text-color);
}
.program-tab:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background-color: var(--primary-color);
transition: var(--transition);
}
.program-tab.active,
.program-tab:hover {
color: var(--primary-color);
}
.program-tab.active:after,
.program-tab:hover:after {
width: 100%;
}
.program-panel {
display: none;
padding: 30px;
}
.program-panel.active {
display: flex;
flex-wrap: wrap;
animation: fadeIn 0.5s ease;
}
.program-image {
flex: 1;
min-width: 300px;
padding-right: 30px;
}
.program-image img {
width: 100%;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
.program-details {
flex: 1;
min-width: 300px;
padding-left: 30px;
}
.program-details h3 {
font-size: 24px;
color: var(--primary-color);
margin-bottom: 15px;
}
.program-details p {
margin-bottom: 20px;
line-height: 1.8;
}
.program-features {
margin-bottom: 20px;
}
.program-features li {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.program-features li i {
color: var(--primary-color);
margin-right: 10px;
}
.program-duration {
font-weight: 600;
color: var(--text-light);
}
.program-duration i {
margin-right: 5px;
}
/* Coach Profile Section */
.coaching-team {
padding: 100px 0;
background-color: var(--bg-light);
}
.coach-profile {
max-width: 1000px;
margin: 0 auto;
}
.coach-profile-inner {
display: flex;
flex-wrap: wrap;
background-color: var(--text-white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.coach-image {
flex: 1;
min-width: 300px;
max-width: 400px;
}
.coach-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.coach-info {
flex: 2;
padding: 40px;
min-width: 300px;
}
.coach-info h3 {
font-size: 32px;
margin-bottom: 5px;
color: var(--primary-color);
}
.coach-title {
font-size: 18px;
color: var(--text-light);
margin-bottom: 20px;
}
.coach-stats {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
background-color: var(--bg-light);
border-radius: var(--border-radius);
padding: 15px;
}
.coach-stat {
flex: 1;
text-align: center;
padding: 10px;
min-width: 100px;
}
.coach-stat .stat-number {
font-size: 28px;
}
.coach-stat .stat-label {
font-size: 12px;
color: var(--text-light);
}
.coach-bio {
margin-bottom: 20px;
line-height: 1.8;
}
.coach-specialties {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.coach-specialties span {
background-color: var(--bg-light);
padding: 8px 15px;
border-radius: 30px;
font-size: 14px;
margin-right: 10px;
margin-bottom: 10px;
color: var(--text-color);
transition: var(--transition);
}
.coach-specialties span:hover {
background-color: var(--primary-color);
color: var(--text-white);
}
.coach-credentials {
margin-bottom: 30px;
}
.coach-credentials h4 {
font-size: 18px;
margin-bottom: 15px;
color: var(--secondary-color);
}
.coach-credentials ul {
list-style: none;
}
.coach-credentials li {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.coach-credentials li i {
color: var(--primary-color);
margin-right: 10px;
}
/* Testimonials Section */
.coaching-testimonials {
padding: 100px 0;
}
.video-testimonials-container {
max-width: 1200px;
margin: 0 auto;
}
.video-testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.video-testimonial {
/* background-color: var(--text-white); */
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.video-testimonial:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.video-wrapper {
position: relative;
}
.video-thumbnail {
position: relative;
cursor: pointer;
}
.video-thumbnail img {
width: 100%;
display: block;
object-fit: cover;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background-color: rgba(212, 175, 55, 0.8);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: var(--text-white);
font-size: 24px;
transition: var(--transition);
display: none;
}
.video-thumbnail:hover .play-button {
background-color: var(--primary-color);
transform: translate(-50%, -50%) scale(1.1);
}
.video-player {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.video-player.active {
display: flex;
}
.video-player video {
max-width: 90%;
max-height: 80vh;
}
.close-video {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
color: var(--text-white);
font-size: 24px;
cursor: pointer;
}
.video-info {
padding: 25px;
}
.video-info h3 {
font-size: 22px;
margin-bottom: 5px;
color: var(--secondary-color);
}
.video-role {
color: var(--primary-color);
font-weight: 600;
margin-bottom: 15px;
}
.video-quote {
font-style: italic;
color: var(--text-light);
line-height: 1.6;
position: relative;
padding-left: 20px;
}
.video-quote:before {
content: '"';
position: absolute;
left: 0;
top: 0;
font-size: 30px;
color: var(--primary-color);
line-height: 1;
}
.testimonial-cta {
text-align: center;
}
.testimonial-cta p {
margin-bottom: 15px;
font-size: 18px;
}
/* CTA Section */
.coaching-cta {
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url("https://placehold.co/1920x1080/d4af37/333333?text=Transform+Your+Skills");
background-size: cover;
background-position: center;
background-attachment: fixed;
color: var(--text-white);
text-align: center;
padding: 100px 0;
}
/* Contact Section */
.coaching-contact {
padding: 80px 0;
}
/* FAQ Section */
.coaching-faq {
background-color: var(--bg-light);
padding: 80px 0;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background-color: var(--text-white);
border-radius: var(--border-radius);
margin-bottom: 15px;
box-shadow: var(--shadow);
overflow: hidden;
}
.faq-question {
padding: 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-question h3 {
font-size: 18px;
margin-bottom: 0;
flex: 1;
}
.faq-toggle {
color: var(--primary-color);
font-size: 18px;
transition: var(--transition);
}
.faq-answer {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-item.active .faq-answer {
padding: 0 20px 20px;
max-height: 1000px;
}
.faq-item.active .faq-toggle i {
transform: rotate(45deg);
}
/* Responsive Styles */
@media screen and (max-width: 992px) {
.coaching-hero-content h1 {
font-size: 42px;
}
.coaching-hero-content p {
font-size: 18px;
}
.hero-features {
flex-direction: column;
gap: 15px;
}
.coach-profile-inner {
flex-direction: column;
}
.coach-image {
max-width: 100%;
}
.video-testimonials-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.coaching-intro-content,
.program-panel.active {
flex-direction: column;
}
.coaching-intro-text,
.coaching-intro-image,
.program-image,
.program-details {
padding: 0;
margin-bottom: 30px;
min-width: 100%;
}
.program-tabs {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
}
@media screen and (max-width: 768px) {
.coaching-hero {
height: auto;
min-height: 100vh;
padding: 120px 0 80px;
}
.coaching-hero-content h1 {
font-size: 36px;
}
.hero-buttons {
flex-direction: column;
gap: 15px;
}
.hero-badge img {
width: 100px;
height: 100px;
}
.intro-stats {
flex-direction: column;
gap: 20px;
}
.coaching-hero-content h1 {
font-size: 36px;
}
.coaching-hero-content p {
font-size: 18px;
}
.program-tab {
padding: 12px 15px;
font-size: 14px;
}
.program-panel {
padding: 20px;
}
.faq-question h3 {
font-size: 16px;
}
.foundation-img {
height: auto;
object-fit: contain;
}
}
@media screen and (max-width: 576px) {
.coaching-hero-content h1 {
font-size: 28px;
}
.coaching-hero-content p {
font-size: 16px;
}
.coach-stats {
flex-direction: column;
}
.coach-stat {
padding: 15px 0;
}
.video-testimonials-grid {
grid-template-columns: 1fr;
}
.coaching-hero {
height: 50vh;
}
.coaching-hero-content h1 {
font-size: 28px;
}
.coaching-hero-content p {
font-size: 16px;
}
.coaches-grid {
grid-template-columns: 1fr;
}
.foundation-img {
height: auto;
object-fit: contain;
}
}
.foundation-img {
/*height: 450px;*/
object-fit: contain;
}
.ix-wmm {
background-color: #d4af37 !important;
}
.ix-wmm i {
color: white !important;
}
.background_primary {
background-color: #d4af37 !important;
}