/*==============================================================
 SMARTKID LEARNING ACADEMY
 Alumni Page CSS
 Part 1 - Global + Header + Navigation
==============================================================*/

/*==========================
 GOOGLE FONTS
==========================*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Poppins:wght@500;600;700;800&display=swap');

/*==========================
 RESET
==========================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Nunito',sans-serif;
    font-size:16px;
    color:#24324a;
    background:#ffffff;
    overflow-x:hidden;
    line-height:1.7;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    font-family:inherit;
    cursor:pointer;
    border:none;
    background:none;
}

ul{
    list-style:none;
}

/*==========================
 ROOT VARIABLES
==========================*/

:root{

    --primary:#083b87;
    --primary-dark:#062b63;

    --secondary:#0f6ec9;

    --accent:#ffbf1b;

    --text:#24324a;

    --muted:#6b7a90;

    --light:#f5f9ff;

    --border:#e6edf5;

    --white:#ffffff;

    --shadow:0 20px 45px rgba(5,35,80,.08);

    --radius:22px;

    --transition:.35s ease;

}

/*==========================
 CONTAINER
==========================*/

.container{

    width:min(1200px,92%);

    margin:auto;

}

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

.section{

    padding:90px 0;

}

.heading{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.heading h2{

    font-family:Poppins,sans-serif;

    font-size:clamp(34px,4vw,50px);

    color:var(--primary-dark);

    margin:12px 0 18px;

    line-height:1.2;

}

.heading h2 span{

    color:var(--secondary);

}

.heading p{

    color:var(--muted);

    font-size:18px;

}

.label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 18px;

    border-radius:999px;

    background:#e9f3ff;

    color:var(--secondary);

    font-size:13px;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

}

.label.yellow{

    background:#fff5d7;

    color:#c37b00;

}

.kicker{

    color:#8dd0ff;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:20px;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:180px;

    padding:15px 28px;

    border-radius:999px;

    font-weight:800;

    transition:var(--transition);

}

.btn.gold{

    background:var(--accent);

    color:#1d2a44;

    box-shadow:0 12px 25px rgba(255,191,27,.35);

}

.btn.gold:hover{

    transform:translateY(-4px);

}

.btn.ghost{

    border:2px solid rgba(255,255,255,.4);

    color:#fff;

}

.btn.ghost:hover{

    background:#fff;

    color:var(--primary);

}

/*==========================
 TOP BAR
==========================*/

.topbar{

    background:var(--primary-dark);

    color:#d9ebff;

    font-size:14px;

}

.top-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    gap:20px;

}

.top-inner a{

    color:#fff;

    font-weight:700;

}

/*==========================
 HEADER
==========================*/

header{

    position:sticky;

    top:0;

    z-index:1000;

    background:#fff;

    box-shadow:0 8px 30px rgba(0,0,0,.05);

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:88px;

}

/*==========================
 BRAND
==========================*/

.brand{

    display:flex;

    align-items:center;

    gap:16px;

}

.brand img{

    width:70px;

}

.brand b{

    display:block;

    font-family:Poppins,sans-serif;

    color:var(--primary);

    font-size:22px;

    line-height:1;

}

.brand span{

    display:block;

    color:#4c607d;

    font-size:14px;

}

.brand small{

    display:block;

    color:#7a889e;

    margin-top:3px;

}

/*==========================
 NAVIGATION
==========================*/

.navbox{

    display:flex;

    align-items:center;

}

.links{

    display:flex;

    align-items:center;

    gap:30px;

}

.links a{

    position:relative;

    font-weight:800;

    color:#294264;

    transition:.3s;

}

.links a:hover{

    color:var(--secondary);

}

.links a.active{

    color:var(--secondary);

}

.links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:3px;

    border-radius:10px;

    background:var(--accent);

    transition:.3s;

}

.links a:hover::after,

.links a.active::after{

    width:100%;

}

/*==========================
 MOBILE MENU BUTTON
==========================*/

.menu{

    display:none;

    width:48px;

    height:48px;

    border-radius:12px;

    border:1px solid var(--border);

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

}

.menu span{

    width:22px;

    height:2px;

    background:var(--primary);

    border-radius:10px;

}

/*==========================
 PAGE HERO BASE
==========================*/

.page-hero{

    position:relative;

    overflow:hidden;

}

/*==========================
 UTILITIES
==========================*/

.reveal{

    opacity:1;

    transform:none;

}

.wave{

    position:absolute;

    left:0;

    bottom:-2px;

    width:100%;

    height:80px;

    background:#fff;

    border-radius:100% 100% 0 0;

}
/*==============================================================
 PART 2
 HERO + WELCOME + JOURNEY
==============================================================*/


/*==========================
ALUMNI HERO
==========================*/

.alumni-hero{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(135deg,#062b63 0%,#0c4ca3 45%,#1783d8 100%);

    color:#fff;

    padding:90px 0 140px;

}

.alumni-hero::before{

    content:"";

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

    right:-220px;

    top:-220px;

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

}

.alumni-hero::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    left:-120px;

    bottom:-120px;

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

}

.hero-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:70px;

    align-items:center;

    position:relative;

    z-index:2;

    min-height:560px;

}

.hero-content h1{

    font-family:Poppins,sans-serif;

    font-size:clamp(42px,5vw,66px);

    line-height:1.12;

    margin-bottom:24px;

}

.hero-content h1 span{

    color:var(--accent);

}

.hero-content p{

    font-size:18px;

    line-height:1.9;

    color:#d8e8fb;

    max-width:620px;

}

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:36px;

}

.hero-image{

    text-align:center;

}

.hero-image img{

    width:100%;

    max-width:520px;

    margin:auto;

    border-radius:28px;

    box-shadow:0 35px 70px rgba(0,0,0,.25);

}


/*==========================
WELCOME
==========================*/

.welcome{

    background:#fff;

}

.split{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.welcome-image img{

    width:100%;

    border-radius:26px;

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

}

.welcome-content h2{

    font-family:Poppins,sans-serif;

    font-size:clamp(34px,4vw,50px);

    line-height:1.2;

    color:var(--primary-dark);

    margin:18px 0 24px;

}

.welcome-content h2 span{

    color:var(--secondary);

}

.welcome-content p{

    color:var(--muted);

    line-height:1.9;

    margin-bottom:18px;

}

.welcome-highlights{

    display:grid;

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

    gap:20px;

    margin-top:40px;

}

.welcome-highlights div{

    background:#fff;

    border:1px solid var(--border);

    border-radius:22px;

    padding:28px 22px;

    text-align:center;

    transition:var(--transition);

    box-shadow:0 12px 30px rgba(0,0,0,.04);

}

.welcome-highlights div:hover{

    transform:translateY(-10px);

    border-color:#b8d8ff;

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

}

.welcome-highlights h3{

    color:var(--primary);

    font-size:22px;

    margin-bottom:10px;

}

.welcome-highlights p{

    margin:0;

    font-size:15px;

}


/*==========================
ALUMNI JOURNEY
==========================*/

.alumni-journey{

    background:var(--light);

}

.journey-line{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:18px;

    flex-wrap:wrap;

    margin-top:60px;

}

.journey-item{

    flex:1;

    min-width:170px;

    text-align:center;

}

.circle{

    width:78px;

    height:78px;

    border-radius:50%;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

    font-weight:900;

    font-size:24px;

    box-shadow:0 15px 35px rgba(8,59,135,.25);

}

.journey-item h3{

    color:var(--primary);

    margin-bottom:10px;

    font-size:24px;

}

.journey-item p{

    color:var(--muted);

    font-size:15px;

    line-height:1.8;

}

.arrow{

    font-size:38px;

    color:var(--accent);

    font-weight:900;

    align-self:center;

    margin-top:18px;

}


/*==========================
TABLET
==========================*/

@media (max-width:992px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-image{

order:-1;

}

.hero-content p{

margin:auto;

}

.split{

grid-template-columns:1fr;

}

.welcome-content{

text-align:center;

}

.welcome-highlights{

grid-template-columns:1fr;

}

.arrow{

display:none;

}

.journey-line{

justify-content:center;

}

}


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

@media (max-width:768px){

.alumni-hero{

padding:70px 0 100px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.hero-image img{

max-width:380px;

}

}

/*==============================================================
PART 3
SUCCESS + GALLERY + VIDEOS
==============================================================*/


/*==========================
ALUMNI SUCCESS
==========================*/

.alumni-success{

    background:#f8fbff;

}

.success-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.success-card{

    background:#fff;

    border-radius:24px;

    padding:38px 32px;

    text-align:center;

    border:1px solid var(--border);

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

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.success-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(180deg,transparent,rgba(23,131,216,.04));

    opacity:0;

    transition:.35s;

}

.success-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 60px rgba(0,0,0,.10);

}

.success-card:hover::before{

    opacity:1;

}

.success-card .icon{

    width:84px;

    height:84px;

    margin:0 auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

    font-size:40px;

    box-shadow:0 15px 35px rgba(8,59,135,.25);

}

.success-card h3{

    color:var(--primary);

    margin-bottom:15px;

    font-size:24px;

}

.success-card p{

    color:var(--muted);

    line-height:1.9;

}


/*==========================
PHOTO GALLERY
==========================*/

.alumni-gallery{

    background:#ffffff;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:28px;

    margin-top:60px;

}

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

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

}

.gallery-card img{

    width:100%;

    height:390px;

    object-fit:cover;

    transition:.5s;

}

.gallery-card::after{

    content:"SmartKid Memories";

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(6,43,99,.70);

    color:#fff;

    font-size:22px;

    font-weight:800;

    opacity:0;

    transition:.35s;

}

.gallery-card:hover img{

    transform:scale(1.08);

}

.gallery-card:hover::after{

    opacity:1;

}


/*==========================
VIDEOS
==========================*/

.alumni-videos{

    background:#f8fbff;

}

.video-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(270px,1fr));

    gap:30px;

    margin-top:60px;

}

.video-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid var(--border);

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

    transition:var(--transition);

}

.video-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.10);

}

.video-card img{

    width:100%;

    height:260px;

    object-fit:cover;

}

.video-content{

    padding:28px;

}

.video-content h3{

    color:var(--primary);

    font-size:24px;

    margin-bottom:12px;

}

.video-content p{

    color:var(--muted);

    line-height:1.9;

    margin-bottom:22px;

}

.video-content .btn{

    width:100%;

    justify-content:center;

}


/*==========================
TABLET
==========================*/

@media(max-width:992px){

.success-grid{

grid-template-columns:1fr;

}

.gallery-grid{

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

}

.video-grid{

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

}

}


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

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

}

.video-grid{

grid-template-columns:1fr;

}

.gallery-card img{

height:280px;

}

.video-card img{

height:220px;

}

}
/*==============================================================
PART 4
QUOTE + CTA + FOOTER + RESPONSIVE
==============================================================*/


/*==========================
QUOTE
==========================*/

.quote-banner{

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    padding:90px 0;

    color:#fff;

    text-align:center;

}

.quote-banner blockquote{

    max-width:920px;

    margin:auto;

    font-family:Poppins,sans-serif;

    font-size:clamp(26px,3vw,42px);

    line-height:1.7;

    font-weight:700;

}


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

.cta{

    background:#ffffff;

    padding:90px 0;

}

.cta-box{

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    border-radius:30px;

    padding:60px;

    color:#fff;

    display:grid;

    grid-template-columns:1fr auto;

    gap:40px;

    align-items:center;

    box-shadow:0 25px 60px rgba(6,43,99,.18);

}

.cta-box h2{

    font-family:Poppins,sans-serif;

    font-size:clamp(34px,4vw,48px);

    margin:18px 0;

    line-height:1.2;

}

.cta-box p{

    color:#dce9fb;

    max-width:650px;

    line-height:1.9;

}

.cta-box .btn{

    margin:8px;

}

.cta-box .btn.ghost{

    border-color:rgba(255,255,255,.45);

}


/*==========================
FOOTER
==========================*/

footer{

    background:#061f46;

    color:#d6e5ff;

    padding-top:70px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr 1.4fr;

    gap:45px;

    padding-bottom:45px;

}

.footbrand img{

    width:90px;

    margin-bottom:20px;

}

.footbrand h3{

    color:#fff;

    font-size:28px;

    margin-bottom:8px;

}

.footbrand p{

    margin-bottom:6px;

}

.footbrand small{

    color:#9eb9e3;

}

footer h4{

    color:#fff;

    margin-bottom:18px;

    font-size:18px;

}

footer a{

    display:block;

    color:#c7daf8;

    margin-bottom:12px;

    transition:.3s;

}

footer a:hover{

    color:#ffffff;

    padding-left:6px;

}

footer p{

    line-height:1.8;

}

.bottom{

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

    padding:22px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    font-size:15px;

}

.bottom div{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

}


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

@media(max-width:1100px){

.footer-grid{

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

}

}

@media(max-width:992px){

.top-inner{

flex-direction:column;

text-align:center;

}

.menu{

display:flex;

}

.navbox{

position:absolute;

left:0;

top:100%;

width:100%;

background:#fff;

padding:20px;

display:none;

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

}

.navbox.active{

display:block;

}

.links{

flex-direction:column;

gap:18px;

align-items:flex-start;

}

.cta-box{

grid-template-columns:1fr;

text-align:center;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

.bottom{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.section{

padding:70px 0;

}

.navbar{

min-height:75px;

}

.brand img{

width:60px;

}

.brand b{

font-size:19px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footbrand img{

margin:0 auto 20px;

}

.bottom div{

justify-content:center;

}

.cta-box{

padding:35px 25px;

}

}

@media(max-width:480px){

.container{

width:94%;

}

.heading h2{

font-size:32px;

}

.hero-content h1{

font-size:38px;

}

.btn{

width:100%;

}

}
.menu.active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.menu.active span:nth-child(2){
    opacity:0;
}

.menu.active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

.menu span{
    transition:.3s;
}

/*==============================================================
FINAL POLISH PATCH
==============================================================*/

/* Better image rendering */
.hero-image img,
.welcome-image img,
.gallery-card img,
.video-card img{
    display:block;
    width:100%;
}

/* Hero spacing */
.hero-content{
    position:relative;
    z-index:2;
}

.hero-content p{
    margin-bottom:8px;
}

.hero-buttons{
    align-items:center;
}

/* Welcome cards equal height */
.welcome-highlights{
    align-items:stretch;
}

.welcome-highlights div{
    height:100%;
}

/* Journey improvements */
.journey-item{
    padding:10px;
}

.circle{
    transition:.35s;
}

.journey-item:hover .circle{
    transform:scale(1.08) rotate(8deg);
}

/* Success cards */
.success-card{
    height:100%;
}

.success-card h3{
    min-height:58px;
}

/* Gallery */
.gallery-card{
    background:#fff;
}

.gallery-card img{
    aspect-ratio:4/5;
}

/* Videos */
.video-card{
    display:flex;
    flex-direction:column;
}

.video-content{
    display:flex;
    flex-direction:column;
    flex:1;
}

.video-content .btn{
    margin-top:auto;
}

/* CTA buttons */
.cta-box .btn{
    min-width:220px;
}

/* Footer links */
footer a{
    transition:.3s ease;
}

footer a:hover{
    color:#ffd34d;
}

/* Header transition */
header{
    transition:box-shadow .3s ease;
}

/* Navigation hover */
.links a{
    padding:6px 0;
}

/* Buttons */
.btn{
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.btn:hover{
    transform:translateY(-3px);
}

/* Images */
img{
    user-select:none;
    -webkit-user-drag:none;
}

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

    .navbox{
        border-top:1px solid #e8edf4;
    }

    .links{
        width:100%;
    }

    .links a{
        width:100%;
        padding:14px 0;
        border-bottom:1px solid #edf2f8;
    }

}

@media(max-width:768px){

    .heading{
        margin-bottom:40px;
    }

    .hero-grid{
        gap:40px;
    }

    .split{
        gap:40px;
    }

    .journey-item{
        max-width:260px;
        margin:auto;
    }

    .cta-box .btn{
        width:100%;
        margin:8px 0;
    }

    .bottom{
        font-size:14px;
    }

}

@media(max-width:480px){

    .hero-content h1 br{
        display:none;
    }

    .hero-content p{
        font-size:16px;
    }

    .heading p{
        font-size:16px;
    }

    .quote-banner{
        padding:60px 0;
    }

}

/*=====================================================
 SMARTKID THEME MATCH PATCH
 Paste at END of alumni.css
======================================================*/

/*-----------------------
Theme Variables
------------------------*/

:root{
    --primary:#062b61;
    --primary-dark:#031a3d;
    --secondary:#3296d5;
    --accent:#ffc83d;
    --light:#eef8ff;
    --text:#10213d;
    --muted:#66758b;
    --border:#e4edf5;
}

/*-----------------------
Container
------------------------*/

.container{
    width:min(1180px,calc(100% - 40px));
}

/*-----------------------
Hero
------------------------*/

.alumni-hero{

    background:linear-gradient(120deg,#031a3d,#063874 68%,#075b9d);

    padding:0;

}

.hero-grid{

    min-height:430px;

    gap:50px;

}

.hero-content h1{

    font:800 clamp(39px,5vw,59px)/1.12 Poppins,sans-serif;

}

.hero-content h1 span{

    color:var(--accent);

}

.hero-content p{

    max-width:720px;

    font-size:17px;

    color:#dfedff;

    line-height:1.7;

}

/*-----------------------
Section Heading
------------------------*/

.heading{

    max-width:780px;

    margin:0 auto 45px;

}

.heading h2{

    font:800 clamp(32px,4vw,46px)/1.16 Poppins,sans-serif;

    color:var(--primary);

}

.heading h2 span{

    color:var(--accent);

}

.heading p{

    color:var(--muted);

    line-height:1.72;

}

/*-----------------------
Label
------------------------*/

.label{

    color:#2787c7;

    font-size:12px;

    font-weight:900;

    letter-spacing:1.8px;

}

.label.yellow{

    color:#ffd257;

}

/*-----------------------
Buttons
------------------------*/

.btn{

    border-radius:9px;

    padding:12px 19px;

    font-size:14px;

}

.btn.gold{

    background:linear-gradient(135deg,#ffd55b,#ffb31e);

    color:#13233c;

}

.btn.ghost{

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

}

/*-----------------------
Cards
------------------------*/

.success-card,
.gallery-card,
.video-card,
.welcome-highlights div{

    border-radius:20px;

    border:1px solid var(--border);

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

}

.success-card:hover,
.video-card:hover,
.gallery-card:hover{

    transform:translateY(-6px);

}

/*-----------------------
Journey
------------------------*/

.circle{

    background:var(--primary);

    color:var(--accent);

    box-shadow:none;

}

.arrow{

    color:#e5ac1b;

}

/*-----------------------
Quote
------------------------*/

.quote-banner{

    background:linear-gradient(120deg,#05265a,#075496);

}

.quote-banner blockquote{

    font:700 clamp(24px,3vw,36px)/1.65 Poppins,sans-serif;

}

/*-----------------------
CTA
------------------------*/

.cta{

    padding:40px 0 90px;

}

.cta-box{

    background:var(--primary-dark);

    border-radius:25px;

    padding:42px 48px;

}

.cta-box h2{

    font:700 31px Poppins,sans-serif;

}

.cta-box p{

    color:#d9e8f8;

}

/*-----------------------
Footer
------------------------*/

footer{

    background:#031a3d;

}

.footer-grid h4{

    color:#fff;

}

footer a:hover{

    color:#ffd257;

}

/*-----------------------
Hover
------------------------*/

.success-card,
.gallery-card,
.video-card,
.welcome-highlights div{

    transition:.35s;

}

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

@media(max-width:800px){

.hero-grid,
.split,
.cta-box{

grid-template-columns:1fr;

}

.hero-image{

display:none;

}

}

@media(max-width:540px){

.section{

padding:65px 0;

}

.container{

width:calc(100% - 28px);

}

.page-hero h1,
.hero-content h1{

font-size:39px;

}

}