/*==================================================
RESPONSIVE
1024px
==================================================*/

@media (max-width:1024px){

:root{

--container:95%;

}

section{

padding:90px 0;

}

/* Header */

header{

/* padding:18px 0; */

}

.logo img{

height:60px;

}

nav ul{

gap:24px;

}

nav ul li a{

font-size:15px;

}

.header-btn{

padding:14px 24px;

font-size:14px;

}


/* Hero */

.hero{

padding-top:150px;

}

.hero-grid{

grid-template-columns:1fr;

gap:60px;

}

.hero-left{

text-align:center;

}

.hero-left h1{

font-size:58px;

margin:auto auto 25px;

}

.hero-left p{

margin:auto auto 35px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.hero-right{

max-width:700px;

margin:auto;

}

.floating-box{

left:20px;

bottom:20px;

}


/* Story */

.story-content{

max-width:800px;

}


/* Philosophy */

.philosophy-grid{

grid-template-columns:1fr;

gap:60px;

}

.philosophy-image{

max-width:650px;

margin:auto;

}

.philosophy-content{

text-align:center;

}

.philosophy-content .line{

margin:25px auto;

}


/* Learning */

.learning-grid{

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

}


/* Why */

.why-grid{

grid-template-columns:1fr;

}


/* About */

.about-grid{

grid-template-columns:1fr;

gap:60px;

}

.about-image{

max-width:700px;

margin:auto;

}

.about-content{

text-align:center;

}

.about-content .line{

margin:25px auto;

}

.about-features{

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

}


/* Founder */

.founder-grid{

grid-template-columns:1fr;

}

.founder-image{

max-width:650px;

margin:auto;

}

.founder-content{

text-align:center;

}

.founder-content .line{

margin:25px auto;

}


/* Vision */

.vision-grid{

grid-template-columns:1fr;

}


/* Timeline */

.timeline{

padding-left:25px;

}


/* Gallery */

.gallery-grid{

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

}

.gallery-item.large{

grid-column:span 2;

}


/* Testimonials */

.testimonial-grid{

grid-template-columns:1fr 1fr;

}


/* Admission */

.admission-grid{

grid-template-columns:1fr;

}

.admission-image{

max-width:700px;

margin:auto;

}

.admission-content{

text-align:center;

}


/* CTA */

.cta-box{

padding:60px;

}

.cta-box h2{

font-size:46px;

}


/* Contact */

.contact-grid{

grid-template-columns:1fr;

}


/* Newsletter */

.newsletter-box{

flex-direction:column;

text-align:center;

}

.newsletter-box form{

width:100%;

max-width:650px;

}


/* Footer */

.footer-grid{

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

gap:45px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

}
/*==================================================
RESPONSIVE
768px
==================================================*/

@media (max-width:768px){

section{

padding:70px 0;

}

.container{

width:92%;

}


/*==============================
TYPOGRAPHY
==============================*/

h1{

font-size:42px;

}

h2{

font-size:34px;

}

h3{

font-size:26px;

}

p{

font-size:15px;

line-height:1.8;

}


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

header{

/* padding:15px 0; */

}

.logo img{

/* height:55px; */
height:75px;

}

nav{

display:none;

}

.header-btn{

display:none;

}

.mobile-toggle{

display:flex;

}


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

.hero{

padding-top:120px;

padding-bottom:70px;

}

.hero-grid{

grid-template-columns:1fr;

gap:45px;

}

.hero-left{

text-align:center;

}

.hero-left h1{

font-size:42px;

line-height:1.15;

}

.hero-left p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

gap:15px;

}

.primary-btn,
.secondary-btn{

width:100%;
max-width:280px;
margin:0;

}

.hero-stats{

justify-content:space-between;

gap:20px;

text-align:center;

}

.hero-stats div{

flex:1;

}

.hero-stats div::after{

display:none;

}

.hero-right{

max-width:100%;

}

.hero-right img{

border-radius:20px;

}

.floating-box{

position:relative;

left:auto;

bottom:auto;

margin:20px auto 0;

width:100%;

max-width:320px;

}


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

.section-heading{

margin-bottom:50px;

}

.section-heading h2{

font-size:34px;

}

.section-heading p{

font-size:15px;

}


/*==============================
STORY
==============================*/

.story-content{

text-align:left;

}


/*==============================
PHILOSOPHY
==============================*/

.philosophy-grid{

grid-template-columns:1fr;

}

.philosophy blockquote{

font-size:28px;

}


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

.learning-grid{

grid-template-columns:1fr;

gap:25px;

}

.learning-card{

padding:35px 28px;

}


/*==============================
WHY SWA
==============================*/

.why-grid{

grid-template-columns:1fr;

}

.why-box{

padding:30px;

}


/*==============================
ABOUT
==============================*/

.about-grid{

grid-template-columns:1fr;

}

.about-features{

grid-template-columns:1fr;

}

.experience-box{

position:relative;

right:auto;

bottom:auto;

margin:25px auto 0;

}


/*==============================
FOUNDER
==============================*/

.founder-grid{

grid-template-columns:1fr;

}

.founder-image{

order:-1;

}


/*==============================
VISION
==============================*/

.vision-grid{

grid-template-columns:1fr;

gap:25px;

}


/*==============================
TIMELINE
==============================*/

.timeline{

padding-left:18px;

}

.timeline-item{

padding-left:35px;

}

.timeline-item h4{

font-size:24px;

}


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

.gallery-grid{

grid-template-columns:1fr;

grid-auto-rows:250px;

}

.gallery-item.large{

grid-column:span 1;

grid-row:span 1;

}


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

.testimonial-grid{

grid-template-columns:1fr;

}

.testimonial-card{

padding:30px;

}


/*==============================
ADMISSION
==============================*/

.admission-grid{

grid-template-columns:1fr;

}

.admission-content{

text-align:left;

}

.admission-content ul li{

font-size:15px;

}


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

.cta{

padding:80px 0;

}

.cta-box{

padding:40px 25px;

}

.cta-box h2{

font-size:34px;

}

.cta-buttons{

flex-direction:column;

align-items:center;

}

.cta-buttons a{

width:100%;
max-width:280px;

}


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

.faq-question{

padding:22px;

}

.faq-question h4{

font-size:20px;

}

.faq-answer{

padding:0 22px 22px;

}


/*==============================
CONTACT
==============================*/

.contact-grid{

grid-template-columns:1fr;

gap:45px;

}

.contact-form{

padding:30px;

}


/*==============================
MAP
==============================*/

.map iframe{

height:350px;

}


/*==============================
NEWSLETTER
==============================*/

.newsletter{

padding:60px 0;

}

.newsletter-box{

flex-direction:column;

text-align:center;

}

.newsletter-box form{

flex-direction:column;

gap:15px;

}

.newsletter-box input{

border-radius:50px;

}

.newsletter-box button{

border-radius:50px;

}


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

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-contact li{

justify-content:center;

}

.social-links{

justify-content:center;

}

.footer-bottom{

flex-direction:column;

gap:15px;

}

.footer-bottom-links{

justify-content:center;

}

}
/*==================================================
RESPONSIVE
480px
==================================================*/

@media (max-width:480px){

:root{

--radius:14px;

}

section{

padding:60px 0;

}

.container{

width:94%;

}


/*==============================
TYPOGRAPHY
==============================*/

h1{

font-size:34px;

line-height:1.15;

}

h2{

font-size:28px;

line-height:1.2;

}

h3{

font-size:22px;

}

h4{

font-size:18px;

}

p{

font-size:15px;

line-height:1.8;

}

.section-heading{

margin-bottom:40px;

}

.section-heading span,
.section-tag{

font-size:12px;

padding:8px 18px;

}


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

.logo img{

/* height:46px; */
height:76px;
}

.mobile-toggle{

width:40px;
height:40px;

}

.mobile-menu{

width:100%;

padding:80px 30px;

}


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

.primary-btn,
.secondary-btn{

/* padding:15px 28px;

font-size:15px;

width:100%; */
        padding: 10px 2px;
        font-size: 12px;
        width: 50%;
}


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

.hero{

padding-top:110px;

padding-bottom:60px;

}

.hero-left h1{

font-size:34px;

}

.hero-left p{

font-size:15px;

}

.hero-stats{

flex-direction:column;

gap:18px;

}

.hero-stats h3{

font-size:32px;

}

.hero-right img{

border-radius:18px;

}

.floating-box{

padding:22px;

}


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

.learning-card,
.vision-card,
.why-box,
.testimonial-card{

padding:28px 24px;

}

.card{

padding:25px;

}


/*==============================
ABOUT
==============================*/

.about-features{

gap:18px;

}

.feature{

padding:18px;

gap:14px;

}

.feature .icon{

width:40px;
height:40px;

font-size:16px;

}

.experience-box{

width:180px;

padding:22px;

}

.experience-box h2{

font-size:42px;

}


/*==============================
TIMELINE
==============================*/

.timeline{

padding-left:12px;

}

.timeline::before{

left:10px;

}

.timeline-item{

padding-left:28px;

padding-bottom:35px;

}

.timeline-item::before{

width:22px;
height:22px;

left:0;

}

.timeline-item h4{

font-size:20px;

}


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

.gallery-grid{

gap:18px;

grid-auto-rows:220px;

}


/*==============================
CONTACT
==============================*/

.contact-box{

padding:20px;

}

.contact-form{

padding:24px;

}

.contact-form input,
.contact-form textarea{

padding:15px 18px;

}


/*==============================
NEWSLETTER
==============================*/

.newsletter-box h2{

font-size:28px;

}

.newsletter-box form{

width:100%;

}

.newsletter-box button{

width:100%;

}


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

footer{

padding-top:70px;

}

.footer-about img{

height:55px;

}

.footer-grid{

gap:35px;

}

.footer-bottom{

padding-bottom:20px;

}

.footer-bottom-links{

flex-direction:column;

gap:10px;

}


/*==============================
BACK TO TOP
==============================*/

.back-to-top{

right:18px;

bottom:18px;

width:48px;

height:48px;

font-size:18px;

}

}


/*==================================================
LANDSCAPE PHONE
==================================================*/

@media (max-height:500px) and (orientation:landscape){

.hero{

padding-top:100px;

}

.mobile-menu{

overflow-y:auto;

}

}


/*==================================================
REDUCE MOTION
==================================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}


/*==================================================
LARGE DESKTOP
==================================================*/

@media (min-width:1600px){

.container{

max-width:1400px;

}

.hero-left h1{

font-size:82px;

}

section{

padding:130px 0;

}

}