/*==============================================================
KALENOOR ENERGY
RESPONSIVE CSS
==============================================================*/


/*==============================================================
EXTRA LARGE DEVICES
1600px+
==============================================================*/

@media(min-width:1600px){


.container{

    max-width:1500px;

}


.hero-title{

    font-size:5rem;

}


.section-padding{

    padding:130px 0;

}


}



/*==============================================================
LARGE LAPTOPS
1200px - 1599px
==============================================================*/

@media(max-width:1400px){


.hero-title{

    font-size:3.8rem;

}


.team-grid{

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

}


.industry-grid{

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

}


}


/*==============================================================
TABLETS & SMALL LAPTOPS
992px - 1199px
==============================================================*/


@media(max-width:1199px){


.section-padding{

    padding:90px 0;

}


/* Header */

.nav-link{

    padding-left:12px!important;

    padding-right:12px!important;

}


/* Hero */

.hero-content{

    padding-top:130px;

}


.hero-title{

    font-size:3.2rem;

}


/* About */

.about-content{

    padding-left:0;

}


/* Services */

.service-grid{

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

}


/* Projects */

.project-grid{

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

}


}



/*==============================================================
TABLETS
768px - 991px
==============================================================*/


@media(max-width:991px){


body{

    overflow-x:hidden;

}


/* Container */

.container{

    padding-left:20px;

    padding-right:20px;

}


/* Sections */

.section-padding{

    padding:75px 0;

}


/* Typography */

.section-title h2{

    font-size:2.2rem;

}



/* Hero */

.hero{

    min-height:90vh;

}


.hero-title{

    font-size:2.8rem;

}


.hero-text{

    font-size:1rem;

}



/* Hero Buttons */

.hero-buttons{

    margin-bottom:40px;

}



/* Stats */

.hero-stats{

    gap:15px;

}


.hero-stat{

    min-width:150px;

}



/* About */

.about-grid{

    grid-template-columns:1fr;

}



/* Leadership */

.team-grid{

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

}



/* Contact */

.contact-info{

    padding-right:0;

}



}



/*==============================================================
MOBILE DEVICES
576px - 767px
==============================================================*/


@media(max-width:767px){


.section-padding{

    padding:60px 0;

}


/* Header */

.logo{

    height:45px;

}


/* Hero */

.hero-content{

    text-align:center;

}


.hero-title{

    font-size:2.25rem;

    line-height:1.25;

}


.hero-subtitle{

    font-size:.75rem;

}


.hero-text{

    line-height:1.7;

}



/* Buttons */

.btn{

    width:100%;

}


.hero-buttons{

    flex-direction:column;

}



/* Statistics */

.hero-stats{

    flex-direction:column;

}


.hero-stat{

    width:100%;

}



/* Services */

.service-grid{

    grid-template-columns:1fr;

}



/* Projects */

.project-grid{

    grid-template-columns:1fr;

}



/* ESG */

.esg-grid{

    grid-template-columns:1fr;

}



/* Leadership */

.team-grid{

    grid-template-columns:1fr;

}


.team-image img{

    height:380px;

}



/* Footer */

.footer{

    padding-top:60px;

}


}



/*==============================================================
SMALL MOBILE
Below 576px
==============================================================*/


@media(max-width:575px){


html{

    font-size:15px;

}


/* Typography */

h1{

    font-size:2rem;

}


h2{

    font-size:1.8rem;

}


h3{

    font-size:1.35rem;

}



/* Hero */

.hero{

    min-height:100vh;

}


.hero-title{

    font-size:2rem;

}


.hero-buttons .btn{

    min-width:100%;

}



/* Cards */

.service-item,

.about-card,

.board-card,

.pillar-card{

    padding:25px;

}


/* Forms */

.contact-form{

    padding:25px 18px;

}



/* Images */

.project-card{

    height:350px;

}



}



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

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


.hero{

    min-height:650px;

}


.hero-content{

    padding-top:100px;

}



}



/*==============================================================
PRINT STYLES
==============================================================*/

@media print{


.site-header,

.hero-social,

.scroll-indicator,

.footer{

    display:none!important;

}


body{

    color:#000;

    background:#fff;

}



}



/*==============================================================
END RESPONSIVE CSS
==============================================================*/

/*==============================================================
KALENOOR ENERGY RESPONSIVE DESIGN
==============================================================*/


/*==============================================================
LARGE DEVICES
==============================================================*/

@media(max-width:1200px){


.page-hero-content h1{
    font-size:45px;
}


.team-grid{
    grid-template-columns:repeat(3,1fr);
}


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


}





/*==============================================================
TABLETS
==============================================================*/

@media(max-width:992px){



.section-title h2{
    font-size:34px;
}



/* Hero */

.page-hero{
    height:350px;
}


.page-hero-content h1{
    font-size:38px;
}


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




/* About */

.about-image{
    margin-bottom:40px;
}





/* Services */

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





/* Leadership */

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




/* News */

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





/* Contact */

.contact-form-wrapper{
    margin-top:30px;
}



}





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

@media(max-width:768px){



body{
    overflow-x:hidden;
}



/* Typography */


.section-title h2{
    font-size:28px;
}


.section-title span{
    font-size:14px;
}





/* Hero */

.page-hero{
    height:300px;
}


.page-hero-content h1{
    font-size:32px;
}


.page-hero-content p{
    font-size:16px;
    padding:0 20px;
}





/* Buttons */


.btn{
    padding:12px 25px;
}





/* Service Grid */

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




/* Team */

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


.team-image img{
    height:300px;
}




/* Board */

.board-card{
    margin-bottom:20px;
}





/* Projects */


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




/* News */

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


.news-image img{
    height:220px;
}





/* Contact */


.contact-item{
    align-items:flex-start;
}


.contact-form-wrapper{
    padding:25px;
}





/* HSE */


.hse-feature{
    flex-direction:column;
}




/* Footer */


.footer-widget{
    margin-bottom:35px;
}




}





/*==============================================================
SMALL PHONES
==============================================================*/

@media(max-width:480px){



.page-hero-content h1{

    font-size:27px;

}



.hero-title{

    font-size:34px;

}



.about-content p,
.service-item p,
.news-content p{

    font-size:15px;

}



.team-image img{

    height:260px;

}



.contact-form-wrapper{

    padding:20px;

}



}