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

html {
overflow-x: clip;
scroll-behavior: smooth;
}

body {
background: #000 !important;
overflow-x: clip;
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesqueRegular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesque-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesqueDEMO-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}

:root {
--brand-navy: #02253D;
--deep-navy: #001B2D;
--black: #000;
--white: #fff;
--muted-white: rgba(255, 255, 255, 0.58);
--platinum-gray: #EFEFEF;
--brand-gradient: linear-gradient(90deg, #02bcdd 0%, #06d1e5 30%, #64eda8 68%, #d0f88d 100%);
--brand-gradient-angle: linear-gradient(45deg, #02BCDD 0%, #06D1E5 22.09%, #64EDA8 51.94%, #D0F88D 100%);
}

.doitership-page {
color: var(--white);
font-family: 'Galano', Arial, sans-serif;
font-weight: 500;
}

.doitership-main {
background: #000;
}

.gradient-text {
background: var(--brand-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* =========================================================
Section 1 HERO SECTION
========================================================= */

.doitership-hero-section {
min-height: 90vh;
background: #000;
padding: 0 0 95px;
}

.doitership-hero-panel {
position: relative;
width: 100vw;
min-height: 90vh;
padding: 0 24px 28px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background-image: url("/college-students/doitership/images/i-smokestack-doitership-page-hands-on-experience-dark-panel.webp");
/* background-size: cover;
background-position: center center; */
background-size: 100% 100%;   
background-position: center; 
background-repeat: no-repeat;
text-align: center;
}

.doitership-hero-logo {
width: min(345px, 34vw);
margin-top: 2px;
}

.doitership-hero-title {
margin-top: clamp(90px, 18vh, 165px);
width: min(90vw, 700px);
height: auto;
}

.doitership-hero-subtext {
margin-top: 140px;
margin-bottom: 45px;
color: #eaf1f8;
font-family: 'Galano';
font-weight: 400;
font-size: 30px;
}

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

    .doitership-hero-section {
        min-height: 10vh;
        padding-bottom: 40px;
    }
    .doitership-hero-panel {
    position: relative;
    width: 100vw;
    min-height: 70vh;
    padding: 0 24px 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background-image: url(/college-students/doitership/images/i-smokestack-doitership-page-hands-on-experience-dark-panel.webp);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}


    .doitership-hero-title {
        width: min(88vw, 340px);
        height: auto;
        margin-top: 80px;
    }

    .doitership-hero-subtext {
        margin-top: 80px;
        margin-bottom: 20px;
        max-width: 320px;
        font-size: clamp(18px, 5vw, 24px);
        line-height: 1.3;
    }
    
}

/* Large Mobile */
@media (min-width: 480px) and (max-width: 767px) {

    .doitership-hero-panel {
        min-height: 100vh;

        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .doitership-hero-title {
        width: min(82vw, 420px);
        height: auto;
        margin-top: 90px;
    }

    .doitership-hero-subtext {
        margin-top: 25px;
        margin-bottom: 0;
        max-width: 500px;
        font-size: clamp(18px, 3.5vw, 24px);
        line-height: 1.25;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1040px) {

    .doitership-hero-section,
    .doitership-hero-panel {
        min-height: 70vh;
    }
    
    .doitership-hero-panel {
    padding: 0 30px;
    justify-content: center;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    }


    .doitership-hero-title {
        width: min(75vw, 620px);
        height: auto;
        margin-top: 120px;
    }

    .doitership-hero-subtext {
        margin-top: 35px;
        margin-bottom: 0;
        max-width: 700px;
        font-size: clamp(22px, 2.8vw, 28px);
        line-height: 1.3;
    }
}

/* =========================================================
Section 2 YOU ARE NOT ALONE SECTION
========================================================= */

.doitership-alone-section {
min-height: 95vh;
display: flex;
align-items: center;
justify-content: center;
padding: 120px 20px;
}

.doitership-alone-visual {
position: relative;
width: min(920px, 90vw);
display: grid;
place-items: center;
}

.doitership-alone-visual > img {
width: 100%;
opacity: 0.95;
}

.doitership-alone-content {
position: absolute;
inset: 0;
display: grid;
place-items: center;
align-content: center;
text-align: center;
}

.doitership-alone-content h2 {
font-family: 'Galano';
font-weight: 700;
font-size: 74px;
line-height: 1.18;
text-transform: uppercase;
}

.doitership-alone-content p {
margin-top: 48px;
font-family: 'Galano', Arial, sans-serif;
font-weight: 500;
font-size: 26px;
}

.doitership-alone-content .gradient-text {
    font-size:  120px; 
    font-weight: 800;
    line-height: 1;
}

/* =========================================================
Section 3 RELATABLE SITUATIONS INTRO SECTION
========================================================= */

.doitership-relate-section {
min-height: 95vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 70px;
padding: 110px 20px;
text-align: center;
margin: 0 auto;
}

.heading-group {
display: flex;
flex-direction: column;
gap: 10px;
}

.doitership-relate-section img {
width: min(680px, 72vw);
}

.doitership-relate-section h2 {
font-family: 'Galano';
font-weight: 700;
font-size: 72px;
line-height: 1.15;
text-transform: uppercase;
color: var(--platinum-gray);
}

/* =========================================================
Section 4 SCROLL STORYTELLING CARDS SECTION
========================================================= */

.doitership-slide-section {
position: relative;
width: 100%;
height: 720vh;
}

.story-pin {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: clip;
}

.scroll-container {
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
}

.sections-wrapper {
position: relative;
width: min(1420px, 75vw);
height: min(66vh, 640px);
}

.section {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(70px) scale(0.96);
filter: brightness(0.78);
transition: opacity 0.75s ease, transform 0.75s ease, filter 0.75s ease;
pointer-events: none;
}

.section.is-active {
opacity: 1;
transform: translateY(0) scale(1);
filter: brightness(1);
pointer-events: auto;
}

.section.is-before {
transform: translateY(-70px) scale(0.96);
}

.doitership-story-card {
height: 100%;
display: grid;
grid-template-columns: 38% 62%;
align-items: center;
border: double 1px transparent;
border-radius: 58px;
background-image:
linear-gradient(#02253D, #02253D),
var(--brand-gradient);
background-origin: border-box;
background-clip: content-box, border-box;
box-shadow: 0 0 35px rgba(2, 188, 221, 0.14);
overflow: hidden;
}

.story-card-media {
display: grid;
place-items: center;
}

.story-card-media img {
width: min(300px, 55%);
object-fit: contain;
}

.story-card-content {
padding-right: clamp(40px, 5vw, 120px);
}

.story-card-kicker {
font-family: 'Galano';
font-weight: 500;
font-size: 30px;
color: #fff;
}

.story-card-translation {
margin-top: -5px;
margin-bottom: 0;
font-family: 'Galano', Arial, sans-serif;
font-weight: 500;
font-size: 25px;
color: rgba(255, 255, 255, 0.25);
margin-bottom: 20px;
}

.story-card-content h3 {
font-family: 'Galano';
font-weight: 600;
font-size: 40px;
line-height: 1.35;
color: #fff;
}

.doitership-story-card h2 {
    
    background: -webkit-linear-gradient(45deg, #02BCDD 0%, #06D1E5 22.09%, #64EDA8 51.94%, #D0F88D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  /*background: linear-gradient(90deg, #02bcdd 0%, #06d1e5 30%, #64eda8 68%, #d0f88d 100%);*/
  /*-webkit-background-clip: text;*/
  /*-webkit-text-fill-color: transparent;*/
  /*background-clip: text;*/
  font-size: 60px
}

.progress-container {
position: absolute;
left: 0;
bottom: 0;
z-index: 999;
width: 100vw;
height: 28px;
opacity: 0;
visibility: hidden;
pointer-events: none;
}

.doitership-slide-section.is-story-active .progress-container {
position: fixed;
opacity: 1;
visibility: visible;
}

.doitership-slide-section.is-story-complete .progress-container {
position: absolute;
opacity: 1;
visibility: visible;
}

.progress-bar {
width: 100%;
height: 100%;
background: rgba(2, 37, 61, 0.95);
position: relative;
}

.progress-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0%;
background: var(--brand-gradient);
transition: width 0.18s linear;
}

.progress-percentage {
position: absolute;
top: 50%;
right: -36px;
transform: translateY(-50%);
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 72px;
height: 30px;
padding: 0 13px;
border: 2px solid #d0f88d;
border-radius: 999px;
background: #000;
color: #fff !important;
font-family: Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 700;
line-height: 1 !important;
white-space: nowrap;
letter-spacing: 0;
text-align: center;
}

@media (min-width: 768px) and (max-width: 1040px) {

    .doitership-slide-section {
        height: 650vh;
    }

    .sections-wrapper {
        width: min(92vw, 900px);
        height: min(60vh, 520px);
    }

    .doitership-story-card {
        grid-template-columns: 40% 60%;
        border-radius: 42px;
    }

    .story-card-media img {
        width: min(240px, 75%);
    }

    .story-card-content {
        padding-right: 40px;
    }

    .story-card-kicker {
        font-size: clamp(20px, 2vw, 28px);
    }

    .story-card-translation {
        font-size: clamp(16px, 1.6vw, 22px);
        margin-top: 0;
    }

    .story-card-content h3 {
        font-size: clamp(34px, 4vw, 54px);
        line-height: 1.2;
    }

    .progress-container {
        height: 24px;
    }

    .progress-percentage {
        min-width: 64px;
        height: 28px;
        font-size: 13px !important;
        right: -32px;
    }
}

/* =========================================================
Section 5 DREAM STAYED SAME SECTION
========================================================= */

.doitership-dream-section {
min-height: 95vh;
display: grid;
place-items: center;
padding: 120px 20px;
text-align: center;
}

.doitership-dream-section h2 {
font-family: 'Galano';
font-weight: 600;
font-size: 62px;
line-height: 1.24;
text-transform: uppercase;
}

.doitership-dream-section p {
margin-top: 56px;
font-family: 'Galano';
font-weight: 500;
font-size: 26px;
}

/* =========================================================
Section 6 HIRED SECTION
========================================================= */

.doitership-hired-section {
min-height: 95vh;
display: grid;
place-items: center;
padding: 120px 20px;
text-align: center;
}

.hired-animation {
position: relative;
display: grid;
justify-items: center;
}

.hired-animation > img {
width: min(320px, 36vw);
position: relative;
z-index: 1;
}

.hired-dots {
position: absolute;
width: 120px;
height: 90px;
bottom: 38%;
right: calc(50% - min(160px, 18vw));
margin: 0;
z-index: 2;
}

.hired-dots span {
position: absolute;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
opacity: 0;
animation: hiredDotLoop 3.8s ease-in-out infinite;
}

.hired-dots span:nth-child(1) {
left: 0;
top: 0;
animation-delay: 0s;
}

.hired-dots span:nth-child(2) {
left: 40px;
top: 28px;
animation-delay: 0.22s;
}

.hired-dots span:nth-child(3) {
left: 80px;
top: 56px;
animation-delay: 0.44s;
}

.hired-text {
margin-top: 20px;
opacity: 0;
transform: translateY(14px);
animation: hiredTextLoop 3.8s ease-in-out infinite;
animation-delay: 0.9s;
}

.hired-text h3 {
font-family: 'Galano';
font-weight: 600;
font-size: 62px;
line-height: 1.45;
text-transform: uppercase;
}

.hired-text h3:first-child {
text-transform: none;
}

@keyframes hiredDotLoop {
0%, 12% {
opacity: 0;
transform: scale(0.6);
}

24%, 58% {
opacity: 1;
transform: scale(1);
}

76%, 100% {
opacity: 0;
transform: scale(0.7);
}
}

@keyframes hiredTextLoop {
0%, 26% {
opacity: 0;
transform: translateY(14px);
}

42%, 78% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 0;
transform: translateY(10px);
}
}

/* =========================================================
Section 7 PAUSE BREATHE SECTION
========================================================= */

.doitership-pause-section {
min-height: 95vh;
display: grid;
place-items: center;
padding: 250px 20px;
text-align: center;
}

.doitership-pause-section h2 {
font-family: 'Galano';
font-weight: 600;
font-size: 62px;
text-transform: uppercase;
}

.doitership-pause-section p {
margin-top: 24px;
color: #fff;
font-family: 'Galano';
font-weight: 500;
font-size: 26px;
line-height: 1.34;
}

/* =========================================================
Section 8 GROOM CORPORATE WORLD SECTION
========================================================= */

.doitership-groom-section {
min-height: 95vh;
display: grid;
place-items: center;
padding: 60px 20px;
}

.groom-layout {
display: grid;
grid-template-columns: 1fr auto 1fr;
  /* grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr); */
align-items: center;
column-gap: 20px;
width: 100%;
max-width: 1400px;
justify-content: center;
}

.groom-left {
display: flex;
/* flex-direction: column; */
justify-content: centre;
align-items: flex-end;
justify-self:end;
/* just
ify-content: center; */
}
.gr-block,
.om-block{
    width:max-content;
    grid-template-rows: auto auto;
}
.groom-word-left,
.groom-word-right{
    align-self:center;
    margin:0;
}

.groom-letus {
font-family: 'Galano', Arial, sans-serif;
font-weight: 500;
color: #fff;
font-size: clamp(28px, 2.5vw, 50px);
/* margin: 0 160px 0 0px; */
text-align: left;
align-self: flex-start;
line-height: 1.2;
margin: 0 0 0 0 ;
}


.groom-clock-wrap {
width: min(420px, 30vw);
aspect-ratio: 1;
border: double 1px transparent;
border-radius: 50%;
background-image:
linear-gradient(90deg, #000000 -50%, #02253D 50%, #000000 150%),
linear-gradient(360deg, #01758a, #000, #01758a);
background-origin: border-box;
background-clip: content-box, border-box;
padding: 1px;
display: grid;
place-items: center;
}

.groom-clock-wrap img {
width: 90%;
height: 90%;
object-fit: contain;
}

.groom-right {
/* display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center; */
  display: flex;
    justify-content: center;
    align-items: flex-start;
    justify-self:start;
}


.groom-tagline {
font-family: 'Galano';
font-weight: 500;
color: #fff;
font-size: 26px;
line-height: 1.15;
text-align: right;
margin: 45px 0 0 0;
}
.om-block{
    width:max-content;
    display:flex;
    flex-direction:column;
}

.groom-word {
display: flex;
gap: 0;
margin: 20px 0px;
align-items: center;
}

.groom-word-left{
    margin: 0;
}
.gr-block{
    width:max-content;
    display:flex;
    flex-direction:column;
}



.groom-word-right{
    margin: 0;
     position:relative;
    top:65px;
}

.groom-word span {
font-family: 'Galano', Arial, sans-serif;
font-weight: 700;
font-size: clamp(130px, 12vw, 220px);
line-height: 1;
background: var(--brand-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (min-width:1201px){

    .groom-layout{
        max-width:1000px;
    }
}
/* =========================================================
Section 9 NOT REPEATING OTHERS SECTION
========================================================= */

.doitership-nooo-section {
min-height: 100vh;
display: grid;
place-items: center;
padding: 70px 20px;
}

.nooo-composition {
position: relative;
width: min(900px, 86vw);
min-height: 820px;
display: grid;
justify-items: center;
}

.nooo-bubble {
width: min(850px, 86vw);
}

.nooo-text {
position: absolute;
top: 62px;
width: 100%;
text-align: center;
}

.nooo-text h2 {
font-family: 'Galano';
font-weight: 500;
font-size: 62px;
text-transform: uppercase;
}

.nooo-text p {
font-family: 'Galano';
font-weight: 500;
font-size: 42px;
line-height: 1.22;
}

.nooo-bot {
position: absolute;
bottom: 0;
width: min(610px, 70vw);
}

@media (max-width: 479px) {

    .nooo-composition {
        width: 95vw;
        min-height: 500px;
    }

    .nooo-bubble {
        width: 80%;
        display: block;
        margin: 0 auto;
        transform: translateX(-10px);
    }

    .nooo-text {
        top: 7%;
        left: 47%;
        transform: translateX(-50%);
        width: 80%;
    }

    .nooo-text h2 {
        font-size: clamp(28px, 8vw, 42px);
        line-height: 1;
    }

    .nooo-text p {
        font-size: clamp(16px, 4vw, 22px);
        line-height: 1.2;
    }

    .nooo-bot {
        left: 50%;
        transform: translateX(-50%);
        width: min(280px, 65vw);
        bottom: 0;
    }
    .nooo-text .gradient-text{
        padding: 0 0 2px 0;
    }
}
@media (min-width: 480px) and (max-width: 767px) {

    .doitership-nooo-section {
        min-height: auto;
        padding: 60px 20px;
    }

    .nooo-composition {
        width: 90vw;
        min-height: 650px;
    }

    .nooo-bubble {
        width: 80%;
        display: block;
    }

    .nooo-text {
        top: 8%;
        left: 50%;
        transform: translateX(-50%);
        width: 78%;
    }

    .nooo-text h2 {
        font-size: clamp(42px, 7vw, 60px);
        line-height: 1;
        
    }

    .nooo-text p {
        font-size: clamp(22px, 3.8vw, 32px);
        line-height: 1.2;
        margin: 2px auto;
    }

    .nooo-bot {
        left: 50%;
        transform: translateX(-50%);
        width: min(420px, 70vw);
        bottom: 0;
    }
    .nooo-text .gradient-text{
        padding: 0 0 12px 0;
    }
    

}
/* =========================================================
Section 10 DOITER ROADMAP SECTION
========================================================= */

.doitership-roadmap-section {
min-height: 100vh;
padding: 130px 20px 120px;
text-align: center;
}

.roadmap-header h2 {
font-family: 'Galano';
font-weight: 500;
font-size: 62px;
}

.roadmap-header p {
margin-top: 35px;
font-family: 'Galano';
font-weight: 500;
font-size: 26px;
}

.roadmap-grid {
width: min(1440px, 76vw);
margin: 110px auto 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
align-items: stretch;
}

.roadmap-card {
position: relative;
padding: 2px;
display: flex;
flex-direction: column;
align-items: stretch;
border: 0;
border-radius: 12px;
background: linear-gradient(135deg, #02BCDD 0%, #06D1E5 22%, #64EDA8 52%, #D0F88D 100%);
box-shadow: 0 0 12px 2px rgba(2, 188, 221, 0.3);
overflow: hidden;
transition: all 0.5s ease;
color: rgba(255, 255, 255, 0.45);
}

.roadmap-card::before {
content: "";
position: absolute;
inset: 2px;
z-index: 0;
border-radius: 10px;
background: radial-gradient(99.4% 99.4% at 50% 14.07%, #033658 1.42%, #02253D 33.27%, #000 100%);
}

.roadmap-card > * {
position: relative;
z-index: 1;
}

.roadmap-icon {
margin-top: 40px;
display: flex;
justify-content: center;
color: rgba(255, 255, 255, 0.45);
}

.roadmap-icon svg {
width: 80px;
height: 80px;
fill: currentColor;
}

.roadmap-card:hover .roadmap-icon,
.roadmap-card:focus-within .roadmap-icon {
color: #36e4b5;
}

.roadmap-card h3 {
/*padding: 0 36px;*/
margin-top: auto;
padding-top: 40px;
font-family: 'Galano';
font-weight: 500;
font-size: 24px;
text-transform: uppercase;
text-align: center;
color: rgba(255, 255, 255, 0.45);
}

.roadmap-card p {
max-width: 235px;
margin: 24px auto 40px;
font-family: 'Galano', Arial, sans-serif;
font-weight: 400;
font-size: clamp(16px, 1.1vw, 22px);
line-height: 1.2;
text-align: center;
color: rgba(255, 255, 255, 0.45);
}

.roadmap-card:hover,
.roadmap-card:focus-within {
transform: scale(1.04);
box-shadow: 0 0 22px 5px rgba(2, 188, 221, 0.55);
color: #fff;
}

.roadmap-card:hover h3,
.roadmap-card:focus-within h3,
.roadmap-card:hover p,
.roadmap-card:focus-within p {
color: #fff;
}

/* =========================================================
Section 11 VIDEO TESTIMONIAL SECTION
========================================================= */

.doitership-video-section {
min-height: auto;
display: grid;
place-items: center;
padding: 70px 20px;
}

.video-panel {
width: min(1425px, 75vw);
padding: 60px 24px 66px;
text-align: center;
 border: 1px solid rgba(1, 184, 212, 0.35);
border-radius: 50px;
background: linear-gradient(135deg, #000000 0%, #02253D 50%, #011a2e 100%);
box-shadow: 0 0 18px 2px rgba(1, 116, 138, 0.25); 
}

.video-panel h2 {
font-family: 'Galano';
font-weight: 500;
font-size: 62px;
}

.video-panel p {
margin-top: 35px;
font-family: 'Galano';
font-weight: 500;
font-size: 24px;
}

.video-thumbnail {
position: relative;
display: block;
width: min(700px, 58%);
margin: 36px auto 0;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(2, 188, 221, 0.4);
}

.video-thumbnail img {
display: block;
width: 100%;
}

.video-thumbnail::after {
content: "";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z' fill='%23f00'/%3E%3Cpath d='M45 24 27 14v20' fill='%23fff'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 68px 48px;
transition: opacity 0.2s ease;
}

.video-thumbnail:hover::after {
opacity: 0.85;
}

/* =========================================================
Section 12 BELIEF SECTION
========================================================= */

.doitership-belief-section {
min-height: 90vh;
display: grid;
align-content: start;
justify-items: center;
padding: 150px 20px 120px;
text-align: center;
}

.belief-intro h2 {
font-family: 'Galano';
font-weight: 500;
font-size: 62px;
}

.belief-intro p {
margin-top: 35px;
font-family: 'Galano';
font-weight: 500;
font-size: clamp(32px, 2.8vw, 50px);
line-height: 1.35;
}

.belief-statement {
margin-top: 48vh;
}

.belief-statement img {
width: 150px;
margin-bottom: 44px;
}

.belief-statement h3 {
font-family: 'Galano';
font-weight: 500;
font-size: 52px;
line-height: 1.2;
}

@media (max-width: 479px) {

    .doitership-belief-section {
        min-height: auto;
        padding: 70px 16px 80px;
    }

    /* H2 */
    .belief-intro h2 {
        font-size: clamp(32px, 8vw, 40px);
        line-height: 1.15;
    }

    /* Body Text */
    .belief-intro p {
        margin-top: 14px;
        font-size: clamp(18px, 4.8vw, 22px);
        line-height: 1.4;
    }

    .belief-statement {
        margin-top: 50px;
    }

    .belief-statement img {
        width: 80px;
        margin-bottom: 20px;
    }

    /* H3 */
    .belief-statement h3 {
        font-size: clamp(20px, 5vw, 26px) !important;
        line-height: 1.35;
        max-width: 330px;
        margin: 0 auto;
    }

    .belief-statement h3 .gradient-text {
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }
}

/* =========================================================
Section 13 PLACEMENT JOURNEY SECTION
========================================================= */

.doitership-start-section {
min-height: 50vh;
display: grid;
place-items: center;
padding: 120px 20px;
text-align: center;
}

.doitership-start-section p {
font-family: 'Galano';
font-weight: 500;
font-size: clamp(34px, 3vw, 52px);
line-height: 1.35;
}

.doitership-start-section h2 {
margin-top: 45px;
font-family: 'Galano';
font-weight: 500;
font-size: 62px;
line-height: 1.24;
}
@media (max-width: 479px) {

    .doitership-start-section {
        min-height: auto;
        padding: 70px 16px;
    }

    .doitership-start-section p {
        font-size: 20px;
        line-height: 1.4;
    }

    .doitership-start-section h2 {
        margin-top: 24px;
        font-size: 36px;
        line-height: 1.15;
    }
    doitership-start-section h2.gradient-text {
        font-size: 36px !important;
    }


}

/* =========================================================
Section 14 FINAL CTA SECTION
========================================================= */

.doitership-final-cta-section {
min-height: auto;
display: grid;
place-items: center;
padding: 70px 20px 90px;
}

.final-cta-card {
width: min(1425px, 75vw);
min-height: auto;
padding: 65px 40px 60px;
display: grid;
place-items: center;
text-align: center;
border: 1px solid rgba(1, 184, 212, 0.35);
border-radius: 50px;
background: linear-gradient(160deg, #01253d 0%, #001828 55%, #000 100%);
box-shadow: 0 0 18px 2px rgba(1, 116, 138, 0.22);
gap: 0;
}

.final-cta-title,
.final-cta-title h2,
.final-cta-title img {
display: none;
}

.final-cta-title-image {
width: min(680px, 52vw);
display: block;
}

.final-cta-card p {
margin-top: 25px;
margin-bottom: 30px;
font-family: 'Galano';
font-weight: 500;
font-size: 26px;
line-height: 1.3;
}

.final-cta-button {
min-width: 340px;
margin-top: 28px;
padding: 10px 10px 20px;
border-radius: 999px;
background: var(--brand-gradient);
color: var(--brand-navy);
font-family: 'Galano';
font-weight: 500;
font-size: 32px;
text-decoration: none;
box-shadow: 0 8px 0 rgba(0, 0, 0, 0.22);
}

@media (max-width: 479px) {

    .doitership-final-cta-section {
        padding: 50px 16px 70px;
    }

    .final-cta-card {
        width: 92vw;
        /*padding: 32px 20px 40px;*/
        padding: 32px 20px 40px 13px;
        border-radius: 28px;
    }

    .final-cta-title-image {
        width: min(300px, 85vw);
    }

    .final-cta-card p {
        margin-top: 12px;
        font-size: clamp(18px, 4.8vw, 22px);
        line-height: 1.35;
    }

    .final-cta-button {
        width: 100%;
        max-width: 280px;
        min-width: unset;
        margin-top: 22px;
        padding: 14px 24px 16px;
        font-size: clamp(20px, 5vw, 28px);
    }

}

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

@media (max-width: 1024px) {
.doitership-hero-panel {
background-image: url("/college-students/doitership/images/i-smokestack-doitership-page-dark-navy-header-background.webp");
}

.doitership-alone-content h2{
    font-size: clamp(20px, 9vw, 52px);
}
.sections-wrapper,
.video-panel,
.final-cta-card,
.roadmap-grid {
width: 90vw;
}

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

.roadmap-card,
.roadmap-card:hover {
min-height: 300px;
transform: none;
}

.roadmap-card::before {
inset: 2px;
}

.roadmap-card h3 {
margin-top: 0;
padding-top: 40px;
}
}

@media (max-width: 767px) {
.doitership-slide-section {
height: auto !important;
padding: 70px 0;
}

.doitership-alone-section {
min-height: 50vh;
}

.doitership-relate-section {
    min-height: 50vh;
}

.doitership-dream-section {
    min-height: 50vh;
}

.doitership-pause-section {
    min-height: 50vh;
    display: grid;
    place-items: center;
    padding: 130px 20px;
    text-align: center;
}

.doitership-nooo-section {
    min-height: auto;
    display: grid;
    padding: 85px 20px;
}

.nooo-composition {
    width: 95vw;
    min-height: 60vh;
}
    
.doitership-start-section {
min-height: auto;
padding: 150px 16px;
}

.story-pin,
.scroll-container,
.sections-wrapper,
.section {
position: static;
height: auto;
display: block;
opacity: 1;
transform: none;
filter: none;
pointer-events: auto;
}

.sections-wrapper {
display: grid;
gap: 250px;
}

.doitership-story-card {
grid-template-columns: 1fr;
min-height: auto;
padding: 36px 20px;
border-radius: 28px;
border: 1px solid rgba(2, 188, 221, 0.45);
background-image: linear-gradient(#02253D, #02253D);
background-origin: border-box;
background-clip: padding-box;
box-shadow: 0 0 10px rgba(2, 188, 221, 0.12);
text-align: center;
}

.story-card-content {
padding: 0;
}

.story-card-translation {
margin-bottom: 28px;
}

.progress-container {
display: none;
}

.doitership-alone-content h2,
.doitership-relate-section h2,
.doitership-dream-section h2,
.hired-text h3,
.doitership-pause-section h2,
.belief-statement h3 {
font-size: 40px;
}

.hired-animation > img {
width: min(240px, 60vw);
}

.hired-dots {
width: 80px;
height: 60px;
bottom: 36%;
right: calc(50% - min(120px, 30vw));
}

.hired-dots span {
width: 16px;
height: 16px;
}

.hired-dots span:nth-child(2) {
left: 28px;
top: 20px;
}

.hired-dots span:nth-child(3) {
left: 56px;
top: 40px;
}

.video-thumbnail {
width: 90%;
}

.final-cta-button {
min-width: 0;
width: min(340px, 82vw);
}

.final-cta-title-image {
width: min(520px, 82vw);
}
}


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

.groom-layout {
grid-template-columns: 1fr;
justify-items: center;
gap: 22px;
}

.groom-clock-wrap {
width: min(260px, 52vw);
}

.groom-left,
.groom-right {
display: grid;
justify-items: center;
justify-self: center;
}

.groom-word {
display: grid;
gap: 18px;
}

.groom-word span {
font-size: clamp(72px, 16vw, 120px);
}

.groom-right p {
margin-top: 70px;
font-size: clamp(22px, 4vw, 34px);
text-align: center;
}

}


@media (min-width: 768px) and (max-width: 1040px) {

    .doitership-alone-section,
    .doitership-relate-section,
    .doitership-dream-section,
    .doitership-hired-section,
    .doitership-groom-section,
    .doitership-start-section {
        min-height: auto;
    }
    
    .doitership-pause-section {
    text-align: center;
    padding: 150px 20px;
    min-height: auto;
}

.belief-statement {
    margin-top: 8vh;
}

}

@media (min-width:768px) and (max-width:1200px){

   .groom-layout{
        grid-template-columns: 1fr auto 1fr;
        gap: 20px;
    }

    .groom-clock-wrap{
        width:min(320px,30vw);
    }

    .groom-word span{
        font-size:clamp(80px,10vw,130px);
    }

    .groom-word-left,
    .groom-word-right{
    transform:none;
    margin:0;
}

    .groom-letus,
    .groom-tagline{
        font-size:clamp(18px,2vw,34px);
    }
    .groom-tagline{
        font-size: clamp(14px, 1.6vw, 22px);
        margin-top: 60px;
        line-height: 1.1;
    }
}


@media (max-width: 479px) {

    .sections-wrapper {
        width: 92vw;
        height: auto;
        min-height: 72vh;
    }

    .doitership-story-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        border-radius: 28px;
        padding: 24px 18px 28px;
        text-align: center;
    }

    .story-card-media {
        margin-bottom: 20px;
    }

    .story-card-media img {
        width: min(180px, 55vw);
    }

    .story-card-content {
        padding-right: 0;
    }

    .story-card-kicker {
        font-size: 18px;
        line-height: 1.3;
    }

    .story-card-translation {
        font-size: 14px;
        margin-top: 4px;
        margin-bottom: 22px;
        line-height: 1.3;
    }

    .story-card-content h3 {
        font-size: clamp(26px, 7vw, 36px);
        line-height: 1.15;
        margin: 0;
    }

    .story-card-content .gradient-text {
        font-size: clamp(30px, 8vw, 40px);
    }

    .progress-container {
        height: 20px;
    }

    .progress-percentage {
        min-width: 56px;
        height: 24px;
        font-size: 12px !important;
        right: -28px;
        padding: 0 8px;
    }
}

@media (max-width: 768px) {
   .doitership-alone-content .gradient-text {
    font-size: 70px;
    font-weight: 800;
    line-height: 1;
}

.doitership-alone-content p {
    margin-top: 48px;
    font-family: 'Galano', Arial, sans-serif;
    font-weight: 400;
    font-size: 24px;
}
}


/* MOBILE */
@media (max-width: 768px) {
  .story-card-header-mobile {
    display: block !important;
    text-align: center !important;
    margin-bottom: 12.5rem !important;
  }

  .story-card-header-mobile .header-icon {
    width: 30%;
    height: 30%;
    margin-bottom: 0.5rem;
    object-fit: contain;
  }

  .story-card-header-mobile .story-card-kicker {
    /*font-size: 1rem !important;*/
    /*font-weight: 400 !important;*/
    color: white !important;
    margin: 0 !important;
  }

  .story-card-header-mobile .story-card-translation {
    /*font-size: 0.75rem !important;*/
    /*color: #999 !important;*/
    margin: 0.25rem 0 0 0 !important;
  }

  /* Hide desktop versions */
  .story-card-kicker-desktop,
  .story-card-translation-desktop {
    display: none !important;
  }
  
    
      .doitership-story-card {
    /* display: flex !important; */
    flex-direction: column;
    min-height: 550px;
    height: 500px;
    gap: 2.5rem;
  }

  .story-card-content {
    order: 1 !important;
  }

  .story-card-media {
    order: 2 !important;
  }
}

/* DESKTOP */
@media (min-width: 769px) {
  .story-card-header-mobile {
    display: none !important;
  }

  .story-card-kicker-desktop,
  .story-card-translation-desktop {
    display: block !important;
  }
}