/*====================================================

        RESPONSIVE CSS - PART 1

        Desktop & Laptop

====================================================*/


/*============================

Large Desktop

============================*/

@media (max-width:1400px){

.container{

    width:92%;

}

.hero-title{

    font-size:4rem;

}

.section-title{

    font-size:2.8rem;

}

}



/*============================

Laptop

============================*/

@media (max-width:1200px){

section{

    padding:90px 0;

}

.navbar{

    width:95%;

}

.nav-links{

    gap:25px;

}

.hero{

    padding-top:150px;

}

.hero-container{

    gap:60px;

}

.hero-title{

    font-size:3.6rem;

}

.hero-description{

    max-width:500px;

}

.about-container,

.leadership-container,

.project-container,

.location-container,

.technology-container,

.product-container,

.sustainability-container,

.contact-container{

    gap:60px;

}

.section-title{

    font-size:2.5rem;

}

.gallery-grid{

    gap:16px;

}

.gallery-grid img{

    height:280px;

}

.highlight-grid{

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

}

.why-grid{

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

}

.process-wrapper{

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

}

.process-arrow{

    display:none;

}

.technology-grid{

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

}

.product-features{

    grid-template-columns:1fr;

}

.sustainability-grid{

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

}

.footer-container{

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

}

}



/*============================

Small Laptop

============================*/

@media (max-width:992px){

section{

    padding:80px 0;

}

.navbar{

    height:80px;

}

.logo img{

    width:160px;

}

.nav-links{

    display:none;

}

.nav-btn{

    display:none;

}

.menu-toggle{

    display:block;

}

.hero{

    padding-top:130px;

}

.hero-container{

    grid-template-columns:1fr;

    gap:60px;

}

.hero-content{

    text-align:center;

}

.hero-description{

    margin:auto;

    margin-bottom:35px;

}

.hero-buttons{

    justify-content:center;

}

.hero-image{

    max-width:650px;

    margin:auto;

}

.about-container,

.leadership-container,

.project-container,

.location-container,

.technology-container,

.product-container,

.sustainability-container,

.contact-container{

    grid-template-columns:1fr;

}

.about-image,

.project-image,

.location-image,

.technology-image,

.product-image,

.sustainability-image,

.leadership-image{

    max-width:700px;

    margin:auto;

}

.about-header,
.about-text,
.leadership-header,
.leadership-body,
.technology-header,
.technology-body,
.about-content,

.project-content,

.location-content,

.technology-content,

.product-content,

.sustainability-content,

.leadership-content{

    text-align:center;

}

.about-header .section-title,
.leadership-header .section-title,
.technology-header .section-title,
.about-content .section-title,

.project-content .section-title,

.location-content .section-title,

.technology-content .section-title,

.product-content .section-title,

.sustainability-content .section-title,

.leadership-content .section-title{

    text-align:center;

}

.about-grid{

    grid-template-columns:1fr 1fr;

}

.why-grid{

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

}

.highlight-grid{

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

}

.gallery-grid{

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

}

.gallery-grid img{

    height:260px;

}

.process-wrapper{

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

    gap:25px;

}

.technology-grid{

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

}

.sustainability-grid{

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

}

.footer-container{

    grid-template-columns:1fr 1fr;

    gap:40px;

}

.cta h2{

    font-size:2.5rem;

}

.section-title{

    font-size:2.3rem;

}

.hero-title{

    font-size:3.2rem;

}

}
/*====================================================

        RESPONSIVE CSS - PART 2

                TABLET

====================================================*/

@media (max-width:768px){

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

section{
    padding:70px 0;
}

.container{
    width:92%;
}

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

.section-title{
    font-size:2rem;
    line-height:1.3;
}

.section-description{
    font-size:.95rem;
}

.section-tag{
    font-size:.8rem;
    letter-spacing:2px;
}

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

.navbar{
    height:75px;
}

.logo img{
    width:150px;
}

.menu-toggle i{
    width:28px;
    height:28px;
}

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

.hero{
    min-height:auto;
    padding-top:120px;
    padding-bottom:70px;
}

.hero-container{
    grid-template-columns:1fr;
    gap:50px;
}

.hero-content{
    text-align:center;
}

.hero-title{
    font-size:2.8rem;
}

.hero-description{
    max-width:100%;
    font-size:1rem;
    margin:20px auto 35px;
}

.hero-buttons{
    justify-content:center;
    gap:15px;
}

.btn-primary,
.btn-secondary{
    padding:15px 30px;
}

.hero-image{
    max-width:550px;
    margin:auto;
}

.hero-image img{
    border-radius:22px;
}

.scroll-down{
    display:none;
}

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

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

.about-header{
    order: 1;
    text-align: center;
}

.about-header .section-title{
    text-align: center;
}

.about-image{
    order: 2;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.about-text{
    order: 3;
    text-align: center;
}

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

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

.leadership-container{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.leadership-header{
    order: 1;
    text-align: center;
}

.leadership-header .section-title{
    text-align: center;
}

.leadership-image{
    order: 2;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.leadership-body{
    order: 3;
    text-align: center;
}

.leadership-body blockquote{
    text-align: left;
    font-size: 1.1rem;
}

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

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

.why-card{
    padding:35px 25px;
}

/*========== PROJECT ==========*/

.project-container{
    grid-template-columns:1fr;
    gap:50px;
}

.project-content{
    text-align:center;
}

.project-content .section-title{
    text-align:center;
}

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

/*========== LOCATION ==========*/

.location-container{
    grid-template-columns:1fr;
    gap:50px;
}

.location-content{
    text-align:center;
}

.location-content .section-title{
    text-align:center;
}

.location-content li{
    justify-content:flex-start;
}

/*========== MANUFACTURING ==========*/

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

.process-arrow{
    display:none;
}

/*========== TECHNOLOGY ==========*/

.technology-container{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.technology-header{
    order: 1;
    text-align: center;
}

.technology-header .section-title{
    text-align: center;
}

.technology-image{
    order: 2;
    width: 100%;
    max-width: 100%;
    min-height: 380px;
    height: 380px;
    margin: 0 auto;
}

.technology-body{
    order: 3;
    text-align: center;
}

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

/*========== PRODUCT ==========*/

.product-container{
    grid-template-columns:1fr;
    gap:50px;
}

.product-content{
    text-align:center;
}

.product-content .section-title{
    text-align:center;
}

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

/*========== SUSTAINABILITY ==========*/

.sustainability-container{
    grid-template-columns:1fr;
    gap:50px;
}

.sustainability-content{
    text-align:center;
}

.sustainability-content .section-title{
    text-align:center;
}

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

/*========== HIGHLIGHTS ==========*/

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

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

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

.gallery-grid img{
    height:220px;
}

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

.faq-item{
    padding:22px;
}

.faq-item h3{
    font-size:1rem;
}

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

.contact-container{
    grid-template-columns:1fr;
    gap:50px;
}

.contact-content{
    text-align:center;
}

.contact-content .section-title{
    text-align:center;
}

.contact-form{
    padding:30px;
}

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

.cta{
    padding:80px 20px;
}

.cta h2{
    font-size:2rem;
}

.cta p{
    font-size:.95rem;
}

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

.footer{
    text-align:center;
}

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

.footer-logo{
    margin:auto;
    margin-bottom:20px;
}

.footer ul{
    align-items:center;
}

.footer-bottom{
    margin-top:40px;
}

}


/*====================================================

        RESPONSIVE CSS - PART 3

                MOBILE

====================================================*/

@media (max-width:576px){

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

section{
    padding:60px 0;
}

.container{
    width:94%;
}

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

.section-title{
    font-size:1.75rem;
    line-height:1.3;
}

.section-description{
    font-size:.92rem;
}

.section-tag{
    font-size:.75rem;
    letter-spacing:1.5px;
}


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

.header{
    backdrop-filter:blur(12px);
}

.navbar{
    height:70px;
}

.logo img{
    width:135px;
}

.menu-toggle i{
    width:26px;
    height:26px;
}


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

.hero{
    padding-top:100px;
    padding-bottom:50px;
}

.hero-title{
    font-size:2.2rem;
}

.hero-description{
    font-size:.95rem;
}

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

.btn-primary,
.btn-secondary{
    width:100%;
    max-width:260px;
    justify-content:center;
}

.hero-image img{
    border-radius:18px;
}

.hero::before,
.hero::after{
    display:none;
}

.hero-image::before,
.hero-image::after{
    display:none;
}


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

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

.about-card{
    padding:25px;
}


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

.leadership-content blockquote{
    font-size:1rem;
}

.signature{
    text-align:center;
}


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

.why-grid{
    gap:20px;
}

.why-card{
    padding:28px 22px;
}

.why-card i{
    width:45px;
    height:45px;
}


/*========== PROJECT ==========*/

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

.timeline-item{
    padding:24px;
}


/*========== LOCATION ==========*/

.location-content ul{
    gap:15px;
}

.location-content li{
    padding:16px;
    font-size:.92rem;
}


/*========== MANUFACTURING ==========*/

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

.process-step{
    padding:28px 20px;
}


/*========== TECHNOLOGY ==========*/

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

.technology-card{
    padding:25px;
}


/*========== PRODUCT ==========*/

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

.feature{
    padding:16px;
}


/*========== SUSTAINABILITY ==========*/

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

.sustainability-card{
    padding:25px;
}


/*========== HIGHLIGHTS ==========*/

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

.highlight-card{
    padding:28px;
}


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

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

.gallery-grid img{
    height:250px;
}


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

.faq-item{
    padding:20px;
}

.faq-item h3{
    font-size:.95rem;
}

.faq-item p{
    font-size:.9rem;
}


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

.contact-form{
    padding:22px;
}

.contact-form input,
.contact-form textarea{
    padding:15px;
}

.contact-info div{
    justify-content:center;
}


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

.cta{
    padding:70px 20px;
}

.cta h2{
    font-size:1.7rem;
}

.cta p{
    font-size:.9rem;
}


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

.footer{
    padding:60px 0 20px;
}

.footer-container{
    gap:30px;
}

.footer h3{
    margin-bottom:15px;
}

.footer ul{
    gap:10px;
}

.footer-bottom{
    margin-top:30px;
    font-size:.9rem;
}


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

.back-to-top{
    width:48px;
    height:48px;
    right:20px;
    bottom:20px;
}

}

/*====================================================

        RESPONSIVE CSS - PART 4

        SMALL MOBILE & UTILITIES

====================================================*/

@media (max-width:400px){

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

section{
    padding:50px 0;
}

.container{
    width:95%;
}

.section-tag{
    font-size:.72rem;
    letter-spacing:1px;
}

.section-title{
    font-size:1.55rem;
    line-height:1.35;
}

.section-description{
    font-size:.88rem;
}


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

.navbar{
    height:65px;
}

.logo img{
    width:120px;
}

.menu-toggle i{
    width:24px;
    height:24px;
}


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

.hero{
    padding-top:90px;
    padding-bottom:45px;
}

.hero-title{
    font-size:1.8rem;
}

.hero-description{
    font-size:.88rem;
}

.hero-buttons{
    gap:12px;
}

.btn-primary,
.btn-secondary{
    width:100%;
    padding:14px 20px;
    font-size:.9rem;
}


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

.about-card,
.why-card,
.timeline-item,
.technology-card,
.sustainability-card,
.highlight-card,
.process-step{
    padding:22px;
}


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

.gallery-grid{
    gap:12px;
}

.gallery-grid img{
    height:210px;
}


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

.contact-form{
    padding:18px;
}

.contact-form input,
.contact-form textarea{
    padding:14px;
    font-size:.9rem;
}

.contact-info span{
    font-size:.88rem;
}


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

.cta{
    padding:60px 15px;
}

.cta h2{
    font-size:1.5rem;
}

.cta p{
    font-size:.88rem;
}


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

.footer{
    padding:50px 0 20px;
}

.footer-logo{
    width:140px;
}

.footer h3{
    font-size:1rem;
}

.footer a,
.footer p{
    font-size:.88rem;
}

.footer-bottom{
    font-size:.8rem;
}


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

.back-to-top{
    width:42px;
    height:42px;
    right:15px;
    bottom:15px;
}

}



/*====================================================

        LANDSCAPE PHONES

====================================================*/

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

.hero{

    min-height:auto;

    padding:120px 0 70px;

}

.scroll-down{

    display:none;

}

}



/*====================================================

        GLOBAL RESPONSIVE UTILITIES

====================================================*/

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

iframe{
    max-width:100%;
}

table{
    width:100%;
    display:block;
    overflow-x:auto;
}

button{
    cursor:pointer;
}

textarea{
    resize:vertical;
}

html{
    scroll-padding-top:90px;
}



/*====================================================

        OPTIONAL SCROLLBAR

====================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F5F7FA;

}

::-webkit-scrollbar-thumb{

    background:#163A63;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#F57C00;

}