/* ==========================================================
   SPEAKING HERO
========================================================== */

.speaking-hero{

    background:#ffffff;

    padding:140px 0;

}

.speaking-container{

    width:min(1100px,92%);
    margin:auto;
    text-align:center;

}

/* Heading */

.speaking-title{

    font-family:'Outfit',sans-serif;

    font-size:64px;

    font-weight:900;

    color:#111;

    line-height:1.1;

    margin-bottom:40px;

}

/* Rainbow Inspiration */

.speaking-title span{

    font-family:'Permanent Marker',cursive;

    font-size:74px;

    font-weight:400;

    text-transform:none;

    background:linear-gradient(
        90deg,
        #ff4d8d,
        #ff9f43,
        #ffd93d,
        #6bcf63,
        #4d9dff,
        #9b5cff
    );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
    -webkit-text-fill-color:transparent;

}

/* Text */

.speaking-text{

    max-width:850px;

    margin:0 auto 24px;

    font-family:'Outfit',sans-serif;

    font-size:24px;

    line-height:1.7;

    color:#333;

}

/* Video */

.video-wrapper{

    margin-top:70px;

    display:flex;

    justify-content:center;

}

.video-wrapper iframe{

    width:100%;

    max-width:900px;

    aspect-ratio:16/9;

    border:none;

    border-radius:20px;

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}
.v-divider-white{
    width:100%;
    line-height:0;
    overflow:hidden;
    background:#fff;
    margin-top: -70px;
}

.v-divider-white svg{
    display:block;
    width:100%;
    height:120px;
    fill:#111;
}
/* ==========================================================
   SPEAKING COLLAGE
========================================================== */

.speaking-collage{

    background:#111;
    padding:150px 0;

    overflow:hidden;
}
.collage-container{

    width:min(1250px,95%);
    margin:auto;

    display:grid;

    grid-template-columns:1fr 560px 1fr;
    grid-template-rows:360px 360px;

    align-items:center;
    justify-items:center;

    position:relative;

    min-height:900px;   /* Important */
}

/* ---------------- Images ---------------- */

.collage-photo{

    width:320px;
    height:260px;

    border:8px solid #fff;

    overflow:hidden;

    box-shadow:0 25px 50px rgba(0,0,0,.45);

    transition:.4s;

}

.collage-photo img{

    width:100%;
    height:100%;
    object-fit:cover;

    display:block;

}

.collage-photo:hover{

    transform:scale(1.04) rotate(0deg);

}

/* Rotations */

.photo1{

    grid-column:1;
    grid-row:1;

    transform:rotate(-8deg);

    justify-self:end;

}

.photo2{

    grid-column:3;
    grid-row:1;

    transform:rotate(8deg);

    justify-self:start;

}

.photo3{

    grid-column:1;
    grid-row:2;

    transform:rotate(7deg);

    justify-self:end;

}

.photo4{

    grid-column:3;
    grid-row:2;

    transform:rotate(-8deg);

    justify-self:start;

}

/* ---------------- Center Card ---------------- */

.collage-content{

    grid-column:2;
    grid-row:1 / span 2;

    width:420px;              /* was 500px+ */
    max-width:100%;

    background:#2f2f2f;

    color:#fff;

    padding:40px 35px;        /* smaller padding */

    text-align:center;

    z-index:20;

    position:relative;

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

}

.collage-content .number{

    display:block;

    font-size:54px;
    font-weight:800;

    margin-bottom:20px;

}

.collage-content h2{

    font-size:30px;

    font-weight:800;

    letter-spacing:3px;

    margin-bottom:30px;

}

.collage-content p{

    font-size:18px;
    line-height:1.8;
    color:#d9d9d9;
    margin-bottom:18px;

}

.collage-content p:last-child{

    margin-bottom:0;

}

/* ---------------- Responsive ---------------- */

@media (max-width:1100px){

.collage-container{

    grid-template-columns:1fr;
    grid-template-rows:auto;

    gap:35px;

}

.collage-content{

    grid-column:1;
    grid-row:auto;

    max-width:600px;

}

.photo1,
.photo2,
.photo3,
.photo4{

    grid-column:1;
    grid-row:auto;

    justify-self:center;

    transform:rotate(0deg);

}

}

@media (max-width:600px){

.collage-photo{

    width:90%;
    height:230px;

}

.collage-content{

    padding:40px 25px;

}

.collage-content h2{

    font-size:24px;

}

.collage-content p{

    font-size:17px;

}

}
/* Alternate Layout */

.collage-container.reverse .photo1{

    justify-self:start;
    transform:rotate(8deg);

}

.collage-container.reverse .photo2{

    justify-self:end;
    transform:rotate(-8deg);

}

.collage-container.reverse .photo3{

    justify-self:start;
    transform:rotate(-8deg);

}

.collage-container.reverse .photo4{

    justify-self:end;
    transform:rotate(8deg);

}
.highlight{

    margin-top:25px;

    font-size:22px;

    font-weight:600;

    color:#ffffff;

    line-height:1.6;

}

.highlight strong{

    font-size:26px;

    color:#fff;

}
/* ==========================================================
   BLACK → WHITE DIVIDER
========================================================== */

.v-divider-black{

    width:100%;
    line-height:0;
    background:#111;
    margin-top: -170px;
}

.v-divider-black svg{

    display:block;
    width:100%;
    height:120px;
    fill:#fff;

}

/* ==========================================================
   AVAILABLE FOR
========================================================== */

.speaking-services{

    background:#fff;
    padding:140px 0;

}

.services-container{

    width:min(1200px,92%);
    margin:auto;

}

.services-title{

    text-align:center;

    font-family:'Outfit',sans-serif;
    font-size:60px;
    font-weight:900;

    color:#111;

    margin-bottom:70px;
    margin-top: -90px;
}

/* Chips */

/*==========================================
SERVICES GRID
==========================================*/

.services-grid{

    display:flex;
    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

    margin-bottom:120px;

}

/* Individual Box */

.service-chip{

    display:flex;

    align-items:center;
    justify-content:center;

    min-height:72px;

    padding:20px 34px;

    background:#ffffff;

    border:2px solid #111;

    border-radius:8px;      

    font-family:'Outfit',sans-serif;

    font-size:20px;

    font-weight:700;

    color:#111;

    text-align:center;

    transition:all .3s ease;

    cursor:pointer;

    box-shadow:6px 6px 0 #111;   /* premium offset shadow */

}

/* Hover */

.service-chip:hover{

    background:#111;

    color:#fff;

    transform:translate(-3px,-3px);

    box-shadow:10px 10px 0 #d6a646;   /* golden shadow */

}
/* ==========================================================
   TEXT
========================================================== */

.organizer-content{

    max-width:900px;
    margin:0 auto;

    text-align:center;

}

.organizer-content h2{

    font-family:'Outfit',sans-serif;

    font-size:54px;
    font-weight:900;

    color:#111;

    margin-bottom:45px;

}

.organizer-content h2 span{

    display:block;

    color:#f3cf5b;

    font-style:italic;

}

.organizer-content p{

    font-family:'Outfit',sans-serif;

    font-size:22px;

    line-height:1.3;

    color:#000;

    margin-bottom:22px;

}

.closing{

    font-size:28px;

    font-weight:700;

    color:#000;

    margin-top:25px;

}

/* ==========================================================
   ROLES
========================================================== */

.roles-grid{

    display:grid;

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

    gap:28px;

    margin-top:110px;

}

.role-card{

    background:#fff;

    border:2px solid #D4AF37;

    border-radius:22px;

    padding:45px 20px;

    text-align:center;

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

    transition:.35s;

    cursor:pointer;

}

.role-card span{

    font-size:42px;

    display:block;

    margin-bottom:18px;

}

.role-card h3{

    font-family:'Outfit',sans-serif;

    font-size:26px;

    font-weight:800;

    color:#111;

}

.role-card:hover{

    background:#111;

    transform:translateY(-10px);

    border-color:#D4AF37;

}

.role-card:hover h3{

    color:#fff;

}

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

@media (max-width:900px){

    .roles-grid{

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

    }

}

@media (max-width:600px){

    .services-title{

        font-size:42px;

    }

    .organizer-content h2{

        font-size:36px;

    }

    .organizer-content p{

        font-size:18px;

    }

    .roles-grid{

        grid-template-columns:1fr;

    }

    .service-chip{

        width:100%;
        text-align:center;

    }

}

/* ==========================================================
   APPLY SECTION
========================================================== */

.apply-section{

    background:#fff;

    padding:50px 0 140px;

}

.apply-container{

    width:min(850px,90%);

    margin:auto;

}

.apply-title{

    font-family:'Outfit',sans-serif;

    font-size:56px;

    font-weight:900;

    text-align:center;

    color:#111;

    margin-bottom:20px;
    margin-top: -70px;
}

.apply-intro{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

    font-family:'Outfit',sans-serif;

    font-size:22px;

    line-height:1.7;

    color:#555;

}

/* ==========================================================
   FORM
========================================================== */

.coaching-form{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    font-family:'Outfit',sans-serif;

    font-size:18px;

    font-weight:700;

    margin-bottom:10px;

    color:#111;

}

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

    width:100%;

    padding:18px 22px;

    font-family:'Outfit',sans-serif;

    font-size:18px;

    border:2px solid #ddd;

    border-radius:14px;

    outline:none;

    transition:.3s;

    resize:vertical;

}

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

    border-color:#F4C430;

    box-shadow:0 0 0 4px rgba(244,196,48,.15);

}

/* ==========================================================
   PARALLELOGRAM BUTTON
========================================================== */

.apply-btn{

    align-self:center;

    margin-top:30px;

    padding:18px 60px;

    border:none;

    background:#ff3366;

    color:#fff;

    font-family:'Outfit',sans-serif;

    font-size:18px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    cursor:pointer;

    transform:skewX(-18deg);

    transition:.35s ease;

}

.apply-btn span{

    display:inline-block;

    transform:skewX(18deg);

}

.apply-btn:hover{

    transform:skewX(-18deg) translateY(-5px);

    box-shadow:0 20px 45px rgba(255,51,102,.35);

}