/* ==========================================
   SP ENTERPRISES
   RESPONSIVE CSS
========================================== */


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

@media (max-width:992px){

.container{
    width:90%;
}

.about-grid,
.contact-wrapper,
.footer-container{
    grid-template-columns:1fr;
    gap:40px;
}

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

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

.hero-content{
    max-width:100%;
}

.hero h1{
    font-size:58px;
}

}


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

@media (max-width:768px){

html,
body{
    overflow-x:hidden;
}

*{
    box-sizing:border-box;
}

.container{
    width:100%;
    max-width:100%;
    padding:0 20px;
}

/* ================= NAVBAR ================= */

.navbar{
    padding:14px 0;
}

.navbar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:65px;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo img{
    height:38px;
    width:auto;
}

.logo-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    line-height:1;
    margin-left:6px;
}

.logo-sp{
    color:#ffffff;
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
}

.logo-enterprises{
    color:#D4AF37;
    font-size:11px;
    font-weight:700;
    letter-spacing:0.5px;
}

.nav-menu{
    display:none !important;
}

.btn-nav{
    display:none !important;
}

.menu-toggle{
    display:flex;
    flex-direction:column;
    gap:6px;
    cursor:pointer;
}

.menu-toggle span{
    width:28px;
    height:3px;
    background:#fff;
    border-radius:20px;
}

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

.hero{
    min-height:100vh;
    height:auto;
    padding:120px 0 80px;
    text-align:center;
}

.hero-content{
    max-width:100%;
    margin:auto;
}

.hero-subtitle{
    font-size:12px;
    letter-spacing:2px;
}

.hero h1{
    font-size:42px;
    line-height:1.15;
}

.hero-text{
    font-size:17px;
    line-height:1.8;
}

.hero-buttons{
    display:flex;
    flex-direction:column;
    gap:16px;
    width:100%;
}

.hero-buttons a{
    width:100%;
    padding:16px;
    font-size:18px;
    text-align:center;
}

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

.about{
    padding:80px 0;
}

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

.about h2{
    font-size:42px;
    line-height:1.2;
}

.about-features{
    grid-template-columns:1fr;
}

.about-right{
    grid-template-columns:1fr;
    gap:20px;
}

.stat-card{
    padding:30px 20px;
}

.stat-card h3{
    font-size:48px;
}

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

.services-grid{
    grid-template-columns:1fr;
    gap:20px;
}

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

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

/* ================= INDUSTRIES ================= */

.industries-grid{
    grid-template-columns:1fr;
    gap:20px;
}

/* ================= PROCESS ================= */

.process-grid{
    grid-template-columns:1fr;
    gap:20px;
}

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

.contact-wrapper{
    grid-template-columns:1fr;
}

.info-box{
    padding:25px;
}

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

.footer-container{
    grid-template-columns:1fr;
    gap:30px;
}

/* ================= COMMON ================= */

.section-title{
    font-size:38px;
    line-height:1.2;
}

.section-description{
    font-size:17px;
    line-height:1.8;
}

img,
video{
    max-width:100%;
    height:auto;
}

/* ================= CERTIFICATIONS ================= */

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

.certificate-card{
    padding:15px;
}

.certificate-card h3{
    font-size:20px;
}

.certificate-card p{
    font-size:14px;
}

}