/*==========================================================
    AMBICQ ACADEMY
    PREMIUM COURSE STYLES v2.0
==========================================================*/

:root{

--primary:#e6005c;
--secondary:#073b87;
--dark:#071b3a;
--white:#ffffff;
--text:#555;
--bg:#f7f9fc;
--border:#edf2f7;
--radius:22px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:Inter,Arial,sans-serif;
background:#fff;
color:#222;
overflow-x:hidden;

}

img{

max-width:100%;
display:block;
height:auto;

}

a{

text-decoration:none;
transition:.35s;

}

.aa-container{

max-width:1320px;
margin:auto;
padding:0 25px;

}

/*==================================================
 HERO SECTION
==================================================*/

.course-hero{

position:relative;

height:720px;

background-size:cover;

background-position:center center;

background-repeat:no-repeat;

overflow:hidden;

display:flex;

align-items:center;

}

/* Dark Overlay */

.course-hero::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

rgba(7,27,58,.93) 0%,

rgba(7,27,58,.82) 35%,

rgba(7,27,58,.45) 70%,

rgba(7,27,58,.10) 100%

);

z-index:1;

}

/* floating gradient */

.course-hero::after{

content:"";

position:absolute;

left:-200px;

bottom:-200px;

width:500px;

height:500px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(230,0,92,.28),

transparent 70%

);

z-index:1;

}

/*==================================================
 HERO CONTENT
==================================================*/

.course-overlay{

position:relative;

z-index:5;

width:100%;

}

.course-overlay .aa-container{

display:flex;

align-items:center;

height:720px;

}

.hero-content{

width:640px;

padding-top:60px;

padding-left:10px;

color:#fff;

}

/*==================================================
 BADGE
==================================================*/

.course-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

background:rgba(255,255,255,.12);

border:1px solid rgba(255,255,255,.10);

border-radius:60px;

backdrop-filter:blur(14px);

-webkit-backdrop-filter:blur(14px);

font-size:15px;

font-weight:700;

color:#fff;

margin-bottom:35px;

}

/*==================================================
 TITLE
==================================================*/

.hero-content h1{

font-size:72px;

font-weight:800;

line-height:1.05;

letter-spacing:-2px;

color:#fff;

margin-bottom:28px;

}

/*==================================================
 DESCRIPTION
==================================================*/

.hero-content p{

font-size:23px;

line-height:1.9;

color:rgba(255,255,255,.94);

margin-bottom:45px;

}

/*==================================================
 BUTTONS
==================================================*/

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.hero-btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

background:linear-gradient(135deg,#ff0066,#d90058);

border-radius:14px;

color:#fff;

font-size:17px;

font-weight:700;

box-shadow:0 20px 50px rgba(230,0,92,.30);

}

.hero-btn-primary:hover{

transform:translateY(-6px);

box-shadow:0 28px 60px rgba(230,0,92,.40);

}

.hero-btn-light{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

background:#fff;

color:#073b87;

font-size:17px;

font-weight:700;

border-radius:14px;

}

.hero-btn-light:hover{

transform:translateY(-6px);

}

/*==================================================
 SECTION TITLES
==================================================*/

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:48px;

font-weight:800;

color:#073b87;

margin-bottom:18px;

}

.section-title p{

max-width:760px;

margin:auto;

font-size:19px;

line-height:1.9;

color:#666;

}

/*==================================================
 MOBILE HERO
==================================================*/

@media(max-width:991px){

.course-hero{

height:560px;

}

.course-overlay .aa-container{

height:560px;

justify-content:center;

}

.hero-content{

width:100%;

padding:120px 20px 0;

text-align:center;

}

.course-tag{

font-size:13px;

padding:10px 18px;

margin-bottom:22px;

}

.hero-content h1{

font-size:46px;

letter-spacing:-1px;

}

.hero-content p{

font-size:18px;

line-height:1.8;

}

.hero-buttons{

justify-content:center;

}

}

@media(max-width:576px){

.course-hero{

height:500px;

}

.course-overlay .aa-container{

height:500px;

}

.hero-content{

padding-top:100px;

}

.hero-content h1{

font-size:38px;

}

.hero-content p{

font-size:16px;

}

.hero-btn-primary,

.hero-btn-light{

width:100%;

}

}

/*==========================================================
    COURSE DETAILS
==========================================================*/

.course-details{

padding:100px 0;

background:#ffffff;

}

.course-grid{

display:grid;

grid-template-columns:2fr 380px;

gap:60px;

align-items:start;

}

/*==================================================
 LEFT CONTENT
==================================================*/

.course-grid h2{

font-size:42px;

font-weight:800;

color:#073b87;

margin-bottom:25px;

margin-top:50px;

position:relative;

padding-bottom:12px;

}

.course-grid h2:first-child{

margin-top:0;

}

.course-grid h2::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:90px;

height:5px;

border-radius:20px;

background:linear-gradient(135deg,#073b87,#e6005c);

}

.course-grid p{

font-size:18px;

line-height:2;

color:#555;

margin-bottom:25px;

}

/*==================================================
 CURRICULUM LIST
==================================================*/

.course-list{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:16px 40px;

list-style:none;

padding:0;

margin:35px 0;

}

.course-list li{

background:#f8fbff;

padding:16px 18px;

border-radius:14px;

border-left:5px solid #e6005c;

font-size:17px;

font-weight:600;

color:#073b87;

transition:.35s;

box-shadow:0 8px 20px rgba(0,0,0,.04);

}

.course-list li:hover{

transform:translateX(8px);

background:#ffffff;

box-shadow:0 15px 35px rgba(0,0,0,.10);

}

/*==================================================
 SIDEBAR
==================================================*/

.course-sidebar{

position:sticky;

top:150px;

}

.sidebar-box{

background:#ffffff;

border-radius:24px;

padding:35px;

box-shadow:0 20px 60px rgba(0,0,0,.08);

border-top:6px solid #e6005c;

}

.sidebar-box h3{

font-size:30px;

font-weight:800;

color:#073b87;

margin-bottom:30px;

}

/*==================================================
 COURSE INFO
==================================================*/

.sidebar-box p{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 0;

border-bottom:1px solid #edf2f7;

font-size:17px;

margin:0;

}

.sidebar-box p strong{

color:#073b87;

font-weight:700;

}

.sidebar-box p span{

font-weight:600;

color:#555;

}

/*==================================================
 PRICE
==================================================*/

.sidebar-box h2{

margin-top:35px;

font-size:22px;

color:#555;

font-weight:700;

}

.sidebar-box h1{

font-size:52px;

color:#e6005c;

font-weight:800;

margin:12px 0 30px;

}

/*==================================================
 APPLY BUTTON
==================================================*/

.sidebar-box .apply-btn{

display:block;

text-align:center;

padding:18px;

border-radius:14px;

background:linear-gradient(135deg,#073b87,#e6005c);

color:#fff;

font-size:18px;

font-weight:700;

box-shadow:0 18px 40px rgba(230,0,92,.22);

}

.sidebar-box .apply-btn:hover{

transform:translateY(-4px);

}

/*==================================================
 PREMIUM CARDS
==================================================*/

.benefit-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:40px;

}

.benefit-card{

background:#ffffff;

padding:35px;

border-radius:22px;

box-shadow:0 15px 45px rgba(0,0,0,.08);

transition:.35s;

border-top:5px solid transparent;

}

.benefit-card:hover{

transform:translateY(-10px);

border-top:5px solid #e6005c;

box-shadow:0 25px 55px rgba(0,0,0,.12);

}

.benefit-card h3{

font-size:24px;

font-weight:700;

color:#073b87;

margin-bottom:18px;

}

.benefit-card p{

font-size:17px;

line-height:1.9;

margin:0;

color:#666;

}

/*==================================================
 MOBILE
==================================================*/

@media(max-width:991px){

.course-grid{

grid-template-columns:1fr;

gap:40px;

}

.course-sidebar{

position:relative;

top:auto;

}

.course-list{

grid-template-columns:1fr;

}

.benefit-grid{

grid-template-columns:1fr;

}

.sidebar-box{

padding:28px;

}

.sidebar-box h1{

font-size:42px;

}

}

/*==========================================================
    LEARNING ROADMAP
==========================================================*/

.learning-roadmap{

padding:100px 0;

background:#f8fbff;

}

.timeline{

position:relative;

max-width:1100px;

margin:60px auto 0;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

bottom:0;

width:4px;

background:linear-gradient(#073b87,#e6005c);

transform:translateX(-50%);

border-radius:20px;

}

.timeline-item{

position:relative;

width:50%;

padding:0 50px 60px;

}

.timeline-item:nth-child(odd){

left:0;

text-align:right;

}

.timeline-item:nth-child(even){

left:50%;

}

.timeline-dot{

position:absolute;

top:15px;

right:-12px;

width:24px;

height:24px;

background:#e6005c;

border:5px solid #fff;

border-radius:50%;

box-shadow:0 0 0 5px rgba(230,0,92,.15);

}

.timeline-item:nth-child(even) .timeline-dot{

left:-12px;

}

.timeline-card{

background:#fff;

padding:30px;

border-radius:22px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.timeline-card h3{

font-size:24px;

color:#073b87;

margin-bottom:15px;

font-weight:800;

}

.timeline-card p{

margin:0;

font-size:17px;

line-height:1.8;

color:#666;

}

/*==========================================================
    CERTIFICATE
==========================================================*/

.certificate-box{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:60px;

align-items:center;

background:#fff;

padding:50px;

border-radius:30px;

box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.certificate-box img{

width:100%;

border-radius:18px;

box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.certificate-box h2{

font-size:42px;

color:#073b87;

margin-bottom:20px;

font-weight:800;

}

.certificate-box p{

font-size:18px;

line-height:2;

color:#666;

margin-bottom:25px;

}

/*==========================================================
    TESTIMONIALS
==========================================================*/

.testimonial-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:50px;

}

.testimonial-card{

background:#fff;

padding:35px;

border-radius:22px;

box-shadow:0 15px 45px rgba(0,0,0,.08);

transition:.35s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.testimonial-stars{

font-size:22px;

margin-bottom:18px;

}

.testimonial-card p{

font-size:17px;

line-height:1.9;

color:#666;

margin-bottom:20px;

}

.testimonial-card h4{

font-size:20px;

color:#073b87;

}

/*==========================================================
    FAQ
==========================================================*/

.faq-section{

padding:100px 0;

background:#f8fbff;

}

.faq-item{

background:#fff;

border-radius:18px;

padding:28px;

margin-bottom:20px;

box-shadow:0 12px 35px rgba(0,0,0,.06);

}

.faq-question{

font-size:21px;

font-weight:700;

color:#073b87;

margin-bottom:15px;

}

.faq-answer{

font-size:17px;

line-height:1.9;

color:#666;

}

/*==========================================================
    CTA
==========================================================*/

.course-cta{

padding:110px 0;

background:linear-gradient(135deg,#073b87,#e6005c);

text-align:center;

color:#fff;

}

.course-cta h2{

font-size:54px;

font-weight:800;

margin-bottom:25px;

color:#ffffff !important;

line-height:1.2;

position:relative;

z-index:5;

}
.course-cta p{

font-size:22px;

line-height:1.9;

max-width:900px;

margin:0 auto 45px;

color:#ffffff !important;

position:relative;

z-index:5;

}

.course-cta .hero-buttons{

justify-content:center;

}

/*==========================================================
    ANIMATION
==========================================================*/

.benefit-card,
.timeline-card,
.sidebar-box,
.testimonial-card{

transition:all .35s ease;

}

.benefit-card:hover,
.timeline-card:hover,
.sidebar-box:hover,
.testimonial-card:hover{

transform:translateY(-8px);

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:991px){

.timeline::before{

left:18px;

}

.timeline-item{

width:100%;

left:0!important;

padding-left:60px;

padding-right:0;

text-align:left!important;

}

.timeline-dot{

left:6px!important;

right:auto;

}

.certificate-box{

grid-template-columns:1fr;

padding:30px;

}

.testimonial-grid{

grid-template-columns:1fr;

}

.course-cta h2{

font-size:38px;

}

.course-cta p{

font-size:18px;

}

}

/*==========================================================
    COURSE STATISTICS
==========================================================*/

.course-stats{

padding:100px 0;

background:#071b3a;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.stat-card{

background:rgba(255,255,255,.08);

border-radius:24px;

padding:45px 30px;

text-align:center;

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.08);

transition:.35s;

}

.stat-card:hover{

transform:translateY(-10px);

background:rgba(255,255,255,.12);

}

.stat-card h2{

font-size:56px;

color:#fff;

font-weight:800;

margin-bottom:12px;

}

.stat-card p{

font-size:18px;

color:rgba(255,255,255,.90);

margin:0;

}

/*==========================================================
    COMPANY GRID
==========================================================*/

.company-grid{

display:grid;

grid-template-columns:repeat(5,1fr);

gap:30px;

margin-top:50px;

}

.company-card{

background:#fff;

height:120px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.35s;

padding:20px;

}

.company-card:hover{

transform:translateY(-8px);

box-shadow:0 25px 55px rgba(0,0,0,.12);

}

.company-card img{

max-width:150px;

max-height:70px;

object-fit:contain;

filter:grayscale(100%);

transition:.35s;

}

.company-card:hover img{

filter:none;

}

/*==========================================================
    ICON BOX
==========================================================*/

.icon-circle{

width:70px;

height:70px;

border-radius:50%;

background:linear-gradient(135deg,#073b87,#e6005c);

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:#fff;

margin-bottom:22px;

}

/*==========================================================
    SPACING
==========================================================*/

section{

position:relative;

overflow:hidden;

}

.course-details:nth-child(even){

background:#f8fbff;

}

.course-benefits:nth-child(even){

background:#ffffff;

}

/*==========================================================
    IMAGE EFFECTS
==========================================================*/

.course-hero img,
.certificate-box img,
.company-card img{

user-select:none;

-webkit-user-drag:none;

}

/*==========================================================
    PERFORMANCE
==========================================================*/

.course-hero{

will-change:transform;

}

.benefit-card,
.timeline-card,
.sidebar-box,
.company-card{

will-change:transform;

}

/*==========================================================
    SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#073b87;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#f3f6fb;

}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px){

.company-grid{

grid-template-columns:repeat(3,1fr);

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:991px){

.company-grid{

grid-template-columns:repeat(2,1fr);

}

.stats-grid{

grid-template-columns:1fr;

}

.course-grid{

grid-template-columns:1fr;

}

.sidebar-box{

position:relative;

top:0;

}

}

@media(max-width:576px){

.company-grid{

grid-template-columns:1fr;

}

.stat-card{

padding:35px 20px;

}

.company-card{

height:95px;

}

.course-tag{

font-size:12px;

padding:9px 16px;

}

.hero-content h1{

font-size:34px;

}

.hero-content p{

font-size:16px;

line-height:1.8;

}

.hero-btn-primary,
.hero-btn-light,
.apply-btn{

width:100%;

justify-content:center;

}

}

/*==========================================================
    END OF FILE
==========================================================*/

/* ===== FINAL HERO BADGE / HEADER GAP FIX ===== */
.course-hero{
    margin-top:0 !important;
}
.course-overlay .aa-container{
    height:100% !important;
}
.hero-content{
    padding-top:0 !important;
}
.course-tag{
    max-width:100%;
    white-space:normal;
    line-height:1.35;
    position:relative;
    z-index:10;
}
@media(max-width:991px){
    .course-hero{
        min-height:560px;
        height:auto !important;
        align-items:center;
        padding:55px 0 55px;
    }
    .course-overlay .aa-container{
        min-height:450px;
        height:auto !important;
        align-items:center;
        justify-content:center;
    }
    .hero-content{
        padding:0 18px !important;
        text-align:center;
    }
    .course-tag{
        display:inline-flex !important;
        visibility:visible !important;
        opacity:1 !important;
        font-size:13px !important;
        padding:10px 16px !important;
        margin:0 0 22px !important;
    }
}
@media(max-width:576px){
    .course-hero{
        min-height:520px;
        padding:45px 0 45px;
        background-position:center center;
    }
    .course-overlay .aa-container{
        min-height:430px;
    }
    .hero-content{
        padding:0 14px !important;
    }
    .course-tag{
        font-size:12px !important;
        padding:9px 14px !important;
        width:auto;
    }
    .hero-content h1{
        margin-top:0 !important;
    }
}

/* ==========================================================
   COURSE LAYOUT FIX v3.0
   Safe overrides - append at END of style-course.css
========================================================== */

/* Hero */
.course-hero{
    min-height:720px;
    height:auto;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.course-overlay{
    width:100%;
}

.course-overlay .aa-container{
    min-height:720px;
    display:flex;
    align-items:center;
}

.hero-content{
    max-width:720px;
    width:100%;
    padding:0;
    position:relative;
    z-index:10;
}

.hero-content h1{
    color:#fff;
    font-size:64px;
    line-height:1.1;
    margin-bottom:24px;
}

.hero-content p{
    max-width:650px;
}

/* Main content */
.course-details{
    padding:90px 0;
    position:relative;
    z-index:20;
    background:#fff;
}

.course-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:50px;
    align-items:start;
}

/* Sidebar */
.course-sidebar{
    position:sticky;
    top:120px;
    align-self:start;
}

.sidebar-box{
    width:100%;
    margin:0;
}

/* Prevent overlap */
.course-grid > div:first-child{
    min-width:0;
}

/* Mobile */
@media (max-width:991px){

    .course-hero{
        min-height:560px;
    }

    .course-overlay .aa-container{
        min-height:560px;
        justify-content:center;
    }

    .hero-content{
        text-align:center;
        max-width:100%;
    }

    .hero-content h1{
        font-size:42px;
    }

    .course-grid{
        grid-template-columns:1fr;
    }

    .course-sidebar{
        position:relative;
        top:0;
    }

}

/* ===== CTA FIX ===== */

.course-cta{

position:relative;

z-index:50;

overflow:visible;

}

.course-cta .aa-container{

position:relative;

z-index:60;

}

.course-cta .hero-buttons{

position:relative;

z-index:100;

display:flex;

justify-content:center;

gap:20px;

}

.course-cta .hero-btn-primary,
.course-cta .hero-btn-light{

position:relative;

z-index:200;

pointer-events:auto;

cursor:pointer;

}

.course-hero{

position:relative;

z-index:1;

}

.course-overlay{

position:relative;

z-index:20;

}

.hero-buttons{

position:relative;

z-index:100;

}

.hero-btn-primary,
.hero-btn-light{

cursor:pointer;

pointer-events:auto;

}

/*=====================================================
 PREMIUM ADMISSION FORM FIX
=====================================================*/

.premium-form{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    font-size:15px;
    font-weight:700;
    color:#073b87;
    margin-bottom:10px;
}

.form-group input,
.form-group select,
.form-group textarea{

width:100%;
height:56px;

padding:0 18px;

border:1px solid #d9e3f2;

border-radius:12px;

background:#fff;

font-size:16px;

transition:.3s;

}

.form-group textarea{

height:170px;

padding:18px;

resize:vertical;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

border-color:#e6005c;

box-shadow:0 0 0 4px rgba(230,0,92,.08);

outline:none;

}

/*==========================================================
CONTACT PAGE - FINAL FIX
==========================================================*/

.page-template-page-contact .course-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 340px !important;
    gap:40px;
    align-items:start;
}

.page-template-page-contact .course-grid > div:first-child{
    min-width:0;
}

.page-template-page-contact .course-sidebar{
    position:sticky;
    top:120px;
    width:100%;
    margin:0;
    align-self:start;
}

.page-template-page-contact .sidebar-box{
    width:100%;
    margin:0;
}

.page-template-page-contact .premium-form{
    width:100%;
}

.page-template-page-contact .contact-features{
    display:grid;
    grid-template-columns:1fr;
    gap:15px;
}

.page-template-page-contact .contact-features div{
    background:#f8fbff;
    padding:18px;
    border-left:4px solid #e6005c;
    border-radius:12px;
    font-weight:600;
}

@media (max-width:991px){

.page-template-page-contact .course-grid{

grid-template-columns:1fr !important;

}

.page-template-page-contact .course-sidebar{

position:relative;

top:0;

margin-top:40px;

}

}