/* ===========================
LAPTOP
=========================== */

@media(max-width:1200px){

.hero-content h1{

font-size:58px;

}

.hero-content h2{

font-size:28px;

white-space:nowrap;

}

.hero{

padding-left:5%;

}

.hero-content{

max-width:600px;

}

.logo-text h1{

font-size:18px;

}

.logo-text p{

font-size:9px;

}

.hero-divider{
    max-width:500px;
    gap:3px;
    transform:translateX(-20px);
}

.hero-divider-icon img{
    width:58px;
}


.hero-tagline{

font-size: 48px;

}

.hero-content p{

font-size:48px;

}

.about{
padding-top:60px;
padding-bottom:60px;
}

.premium-divider{
width:430px;
}

.premium-heading h2{
font-size:46px;
}

.premium-heading h3{
font-size:27px;
}

.about-text h2{
font-size:34px;
}

.about-desc{
font-size:16px;
}

.about-grid{
gap:40px;
}

.section-script{
font-size:38px;
}

.premium-desc{
font-size:17px;
}

.services{
padding-top:60px;
padding-bottom:60px;
}

.why-us{
padding-top:60px;
padding-bottom:60px;
}

.service-image{
height:220px;
}

.stats{

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

}

.leadership{
padding-top:60px;
padding-bottom:60px;
}

.leadership-grid{

grid-template-columns:1fr !important;

gap:32px;

}

.leader-card{

flex-direction:column !important;

align-items:center !important;

text-align:center !important;

gap:16px;

padding:26px 22px;

}

.leader-image{
width:170px !important;
max-width:170px !important;
height:auto !important;
aspect-ratio:4/5 !important;
min-height:0 !important;
margin:0 auto !important;
align-self:center !important;
flex-shrink:0;
}

.leader-content{

width:100% !important;

align-items:center !important;

}

.leader-content h3{

color:#ffffff !important;

text-align:center;

width:100%;

order:1;

}

.leader-content h4{

color:var(--gold) !important;

text-transform:none !important;

text-align:center;

width:100%;

font-size:16px;

line-height:1.45;

letter-spacing:.2px;

order:2;

}

.leader-content p{

text-align:center;

max-width:290px;

margin-left:auto;

margin-right:auto;

order:3;

}

.leader-contact{

order:4;

justify-content:center;

width:100%;

margin-top:2px;

margin-bottom:16px;

}

.leader-contact a{

border-radius:50%;

}

.leader-points{

order:5;

width:100%;

gap:12px;

}

.leader-points li{

justify-content:center;

border-top:1px solid rgba(169,120,32,.45) !important;

border-bottom:1px solid rgba(169,120,32,.45) !important;

border-left:1px solid rgba(169,120,32,.45);

border-right:1px solid rgba(169,120,32,.45);

border-radius:14px;

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

padding:13px 18px;

gap:14px;

}

.leader-points li:hover{

transform:none;

}

.leader-points li i{

display:flex;

width:32px;

height:32px;

font-size:13px;

flex-shrink:0;

}

.leader-points li span{

flex:1;

text-align:center;

font-weight:600;

color:#ffffff;

}

.reviews{
padding-top:60px;
padding-bottom:60px;
}

.contact{
padding-top:60px;
padding-bottom:60px;
}

.footer-top{

grid-template-columns:1.2fr 1fr 1fr 1fr;

gap:30px;

}

.nav-btn{
    padding:10px 22px;
    font-size:14px;
}

.nav-btn i{
    font-size:13px;
}
.contact-link, .footer-link{
     word-break:break-word; 
     overflow-wrap:anywhere; 
    }

}


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

@media(max-width:992px){

.nav-links{

display:none;

}

.menu-btn{

display:block;

}

.logo-text p{

display:none;

}

.logo-text h1{

font-size:16px;

}

.nav-btn{
    padding:9px 18px;
    font-size:13px;
}

.nav-btn i{
    font-size:12px;
}

.hero-content h1{

font-size:48px;

}

.hero-content h2{

font-size:22px;

white-space:nowrap;

}

.hero{

padding-left:4%;

}

.hero-content{

max-width:560px;

}

.hero-content p{

font-size:42px;

}

.hero-divider{
    max-width:420px;
    gap:2px;
    transform:translateX(-6px);
}

.hero-divider-icon img{
    width:48px;
}
.hero-divider-icon{

min-width:36px;

font-size:28px;

}


.hero-tagline{

font-size:42px;
text-align:left;

}

.about{
padding-top:50px;
padding-bottom:50px;
}

.premium-divider{
width:320px;
}

.premium-heading{
margin-bottom:50px;
}

.premium-heading h2{
font-size:40px;
}

.premium-heading h3{
font-size:24px;
}

.about-text h2{
font-size:30px;
}

.about-desc{
font-size:16px;
margin-bottom:30px;
}

.about-grid{
grid-template-columns:1fr;
grid-template-rows:auto;
gap:40px;
}

.about-media,
.about-text,
.value-cards{
grid-column:auto;
grid-row:auto;
}

.about-media{
max-width:600px;
margin:0 auto;
}

.value-cards{
grid-template-columns:repeat(2,1fr);
}

.premium-desc{
font-size:16px;
margin-bottom:50px;
}

.services{
padding-top:50px;
padding-bottom:50px;
}

.services-grid{
grid-template-columns:repeat(2,1fr);
}

.service-card{
grid-column:auto !important;
}

.service-image{
height:210px;
}

.section-bottom{
margin-top:60px;
}

.section-script{
font-size:34px;
}

.why-us{
padding-top:50px;
padding-bottom:50px;
}

.why-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.why-card{
    width:100%;
}

.reviews{
padding-top:50px;
padding-bottom:50px;
}

.reviews-wrapper{

grid-template-columns:1fr;

gap:30px;

}

.contact{
padding-top:50px;
padding-bottom:50px;
}

.contact-wrapper{
    grid-template-columns:1fr;
    gap:25px;
}
.contact-card,
.contact-form{
    width:100%;
}

.footer-top{

grid-template-columns:1fr 1fr;

gap:35px;

row-gap:40px;

}

.footer-logo{
grid-column:1 / -1;
}

.leadership{
padding-top:50px;
padding-bottom:50px;
}

.leadership-grid{

grid-template-columns:1fr;

gap:35px;

}

.leader-card{

flex-direction:column !important;

align-items:center;

text-align:center;

}

.leader-content{

width:100% !important;

}

.leader-image{

width:180px !important;

max-width:180px !important;

height:auto !important;

aspect-ratio:4/5 !important;

margin:0 auto !important;

align-self:center !important;

flex-shrink:1;

}

.leader-points{

width:100%;

}

.leader-points li{

justify-content:center;

}

.leader-contact{

justify-content:center;

}
.contact-link, .footer-link{
     word-break:break-word; 
     overflow-wrap:anywhere; 
    }

}


@media (max-width:768px){

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

header{
    height:75px;
}

.navbar{
    height:70px;
    padding:0 15px;
    background:rgba(2,17,40,.45);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.logo img{
    width:44px;
    height:auto;
    max-height:44px;
    object-fit:contain;
}

.logo-text h1{
    font-size:13px;
}

.logo-text p{
    display:none;
}

.nav-btn{
    padding:8px 14px;
    font-size:12px;
    gap:5px;
}

.nav-btn i{
    font-size:11px;
}

.hero{
    margin-top:70px;
    height:calc(100vh - 70px);
}

.hero-video{
    top:0;
    height:100%;
    object-fit:cover;
    object-position:72% center;
}

.hero-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:92%;
    text-align:center;
    padding:0 10px;
    z-index:2;
}
.hero-content h4{
    font-size:14px;
    letter-spacing:3px;
    margin-bottom:6px;
}

.hero-content h1{
    font-size:32px;
    line-height:1.05;
    margin:4px 0 6px;
    white-space:nowrap;
}

.hero-content h2{
    font-size:15px;
    line-height:1.15;
    margin:0 0 12px;
    white-space:nowrap;
}

.hero-divider{
    max-width:260px;
    margin:12px auto;
    gap:2px;
    transform:translateX(-6px);
}

.hero-divider-icon img{
    width:40px;
}

.hero-tagline{
    text-align:center;
    font-size:34px;
    margin-bottom:18px;
}

.hero-overlay{
    background:
    linear-gradient(
    180deg,
    rgba(6,14,30,.6) 0%,
    rgba(20,28,42,.3) 45%,
    rgba(130,72,26,.42) 100%
    ),
    linear-gradient(
    to right,
    rgba(4,10,24,.35), rgba(4,10,24,.35)
    );
}

.hero-content p{
    text-align:center;
    max-width:100%;
    margin:0 auto 25px;
    font-size:30px;
    line-height:1.6;
}

.hero-buttons{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:15px;
}

.primary-btn,
.secondary-btn{
    width:220px;
    height:52px;
    font-size:15px;
}

/* ================= MOBILE REVIEW PAGE ================= */

.reviews-page{
    min-height:100vh;
    padding:90px 15px 40px;
}

.reviews-video{
    top:70px;
    height:calc(100% + 20px);
    object-fit:cover;
    object-position:75% center;
}

.reviews-content{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
}

.reviews-grid{
    grid-template-columns:1fr;
    justify-items:center;
    gap:20px;
}

.review-card{
    width:100%;
    max-width:330px;
    margin:0 auto;
    padding:22px;
    box-sizing:border-box;
}

.review-card h3{
    font-size:22px;
}

.review-card p,
.review-message{
    font-size:15px;
    line-height:1.7;
}

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

.about{
    padding-top:35px;
    padding-bottom:35px;
}

.premium-divider{
    width:220px;
    margin-bottom:30px;
}

.premium-divider-icon img{
    width:40px;
}

.premium-heading{
    margin-bottom:40px;
}

.premium-heading h2{
    font-size:32px;
    letter-spacing:1px;
}

.premium-heading h3{
    font-size:20px;
}

.about-eyebrow span{
    font-size:13px;
}

.about-text h2{
    font-size:26px;
    letter-spacing:0;
}

.about-grid{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.about-desc{
    font-size:15px;
    margin-bottom:22px;
}

.outline-btn{
    padding:12px 28px;
    font-size:14px;
}

.value-cards{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.value-card{
    width:100%;
    padding:16px 10px;
}

.about-image{
    width:100%;
    height:260px;
    max-width:100%;
}

.about-image img{
    height:100%;
    object-fit:cover;
}

.section-bottom{
    margin-top:45px;
}

.section-script{
    font-size:28px;
}

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

.services{
    padding-top:35px;
    padding-bottom:35px;
}

.service-image{
    height:200px;
}

.service-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.service-card{
    width:100%;
    max-width:360px;
    margin:0 auto;
    grid-column:auto !important;
}
.service-content{
    padding:20px 4px 4px;
}

.service-content h3{
    font-size:18px;
}

.service-content p{
    font-size:14px;
    line-height:1.7;
}

.service-icon{
    font-size:28px;
}

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

.services-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:25px;
}

.service-card{
    width:100%;
    max-width:360px;
    margin:0 auto;
    grid-column:auto !important;
}

/* ===== WHY CHOOSE US ===== */

.why-us{
    padding-top:35px;
    padding-bottom:35px;
}

.why-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px;
}

.why-card{
    width:100%;
    max-width:360px;
    margin:0 auto;
}

/* ===== LEADERSHIP ===== */

.leadership{
    padding-top:35px;
    padding-bottom:35px;
}

.leader-card{
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    padding:20px;
    gap:16px;
}

.leader-image{
    width:150px !important;
    max-width:150px !important;
    height:auto !important;
    aspect-ratio:4/5 !important;
    margin:0 auto !important;
    align-self:center !important;
}

.leader-content h3{
    font-size:22px;
}

/* ===== REVIEWS ===== */

.reviews{
    padding-top:35px;
    padding-bottom:35px;
}

.reviews-list{
    gap:18px;
}

.reviews-wrapper{
    grid-template-columns:1fr;
    gap:25px;
}

.review-form{
    padding:26px;
}

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

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

.contact{
    padding-top:35px;
    padding-bottom:35px;
    min-height:0;
    overflow-x:hidden;
    box-sizing:border-box;
}

/* Keep everything inside mobile screen */
.contact .container{
    width:100%;
    max-width:100%;
    padding:0 15px;
    margin:0 auto;
    box-sizing:border-box;
}

/* Contact layout */
.contact-wrapper{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:25px;
    width:100%;
    max-width:100%;
    margin:0 auto;
    box-sizing:border-box;
}

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

.contact-card{
    width:100%;
    max-width:360px;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
}

.contact-card .info-card{
    width:100%;
    max-width:360px;
    margin:0 auto;
    padding:20px;
    box-sizing:border-box;
    min-width:0;
}

/* Text stays inside the card */
.info-card p,
.info-card a{
    max-width:100%;
    word-break:break-word;
    overflow-wrap:anywhere;
}

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

.contact-form{
    width:100%;
    max-width:360px;
    margin:0 auto;
    padding:22px;
    box-sizing:border-box;
    min-width:0;
}

.contact-form form{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

.contact-form button{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

/* Email / address */
.contact-link,
.footer-link{
    word-break:break-word;
    overflow-wrap:anywhere;
}

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

.footer{
    padding:50px 0 35px;
    text-align:center;
}

.footer-top{
    grid-template-columns:1fr;
    gap:35px;
    text-align:center;
}

.footer-logo{
    grid-column:auto;
}

.footer-logo p{
    margin:0 auto;
}

.footer-links a{
    margin:0 auto 12px;
}

.footer-services span{
    justify-content:center;
}

.footer-contact p{
    justify-content:center;
    text-align:left;
    max-width:280px;
    margin-left:auto;
    margin-right:auto;
}

.footer-social{
    justify-content:center;
}
.contact-link, .footer-link{
     word-break:break-word; 
     overflow-wrap:anywhere; 
    }
}

@media (max-width:480px){

.hero{
    padding:80px 20px 30px;
    min-height:100vh;
    justify-content:center;
}

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

.hero-content h1{
    font-size:34px;
    line-height:1.05;
}

.hero-content h2{
    font-size:15px;
    white-space:normal;   /* Allow wrapping */
    line-height:1.5;
}



.hero-divider{
    max-width:220px;
    margin:10px auto;
    gap:2px;
    transform:translateX(-4px);
}

.hero-divider-icon img{
    width:30px;
}

.hero-tagline{
    font-size:28px;
    text-align:center;
}

.hero-buttons{
    flex-direction:column;
    gap:12px;
    align-items:center;
}

.primary-btn,
.secondary-btn{
    width:220px;
      min-width:220px;
    height:46px;
    font-size:13px;
}

.logo img{
    width:36px;
}

.logo-text h1{
    font-size:11px;
}

.nav-btn{
    padding:6px 10px;
    font-size:11px;
}

.leader-image{
    width:130px !important;
    max-width:130px !important;
    height:auto !important;
    aspect-ratio:4/5 !important;
    margin:0 auto !important;
    align-self:center !important;
}

.leader-content h3{
    font-size:20px;
}

.leader-content h4{
    font-size:13px;
}

.leader-content p{
    font-size:14px;
}

.leader-points li{
    font-size:13px;
    gap:10px;
    padding:12px 14px;
}

.leader-points li i{
    width:28px;
    height:28px;
    font-size:12px;
}

.leader-card{
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    padding:16px;
    gap:14px;
}
.contact-link, .footer-link{
     word-break:break-word; 
     overflow-wrap:anywhere; 
    }
}