/*====================================================
KNX BASRA
Professional Corporate Website
Version 2.0
====================================================*/


/*====================================================
GOOGLE FONT
====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/*====================================================
CSS VARIABLES
====================================================*/

:root{

--primary:#0078ff;
--primary-dark:#005ec7;
--secondary:#0c1c2c;
--light:#f6f9fc;
--white:#ffffff;
--text:#555;
--title:#1d2b36;
--border:#e5e5e5;
--shadow:0 10px 35px rgba(0,0,0,.08);
--radius:14px;
--transition:.35s ease;

}


/*====================================================
RESET
====================================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
font-size:16px;
line-height:1.8;
color:var(--text);
background:#fff;
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1200px;
margin:auto;

}


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

.btn{

display:inline-block;
padding:15px 34px;
border-radius:40px;
font-weight:600;
transition:var(--transition);

}

.btn-primary{

background:var(--primary);
color:#fff;

}

.btn-primary:hover{

background:var(--primary-dark);
transform:translateY(-3px);

}


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

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:9999;
background:#ffffff;
transition:var(--transition);

}

header.sticky{

box-shadow:0 8px 30px rgba(0,0,0,.12);

}

header .container{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:70px;
transition:.3s;

}

header.sticky .logo img{

height:58px;

}


/*====================================================
NAVIGATION
====================================================*/

nav ul{

display:flex;
align-items:center;
gap:35px;

}

nav a{

color:var(--title);
font-weight:500;
position:relative;
transition:.3s;

}

nav a:hover,
nav a.active{

color:var(--primary);

}

nav a::after{

content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:2px;
background:var(--primary);
transition:.3s;

}

nav a:hover::after,
nav a.active::after{

width:100%;

}


/*====================================================
MOBILE MENU BUTTON
====================================================*/

.menu-btn{

display:none;
font-size:30px;
cursor:pointer;
color:var(--primary);

}


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

.hero{

height:100vh;

background:
linear-gradient(rgba(10,20,35,.60),rgba(10,20,35,.60)),
url("../images/hero.jpg") center center/cover;

display:flex;

align-items:center;

color:#fff;

margin-top:90px;

}

.hero-content{

max-width:700px;

}

.hero h1{

font-size:60px;
font-weight:700;
line-height:1.2;
margin-bottom:25px;

}

.hero p{

font-size:20px;
margin-bottom:40px;

}


/*====================================================
SECTION TITLE
====================================================*/

section{

padding:100px 0;

}

.section-title{

text-align:center;
margin-bottom:60px;

}

.section-title h5{

color:var(--primary);
font-weight:600;
letter-spacing:2px;
margin-bottom:10px;
text-transform:uppercase;

}

.section-title h2{

font-size:42px;
color:var(--title);
margin-bottom:20px;

}

.section-title p{

max-width:750px;
margin:auto;

}
/*====================================================
RESPONSIVE NAVIGATION
====================================================*/

@media (max-width:768px){

    .menu-btn{
        display:block;
        z-index:10001;
    }

    nav{
        position:absolute;
        top:90px;
        left:0;
        width:100%;
        background:#fff;
        display:none;
        box-shadow:0 15px 35px rgba(0,0,0,.12);
        animation:menuDown .3s ease;
    }

    nav.show{
        display:block;
    }

    nav ul{
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        padding:20px;
    }

    nav li{
        width:100%;
        border-bottom:1px solid #ececec;
    }

    nav li:last-child{
        border-bottom:none;
    }

    nav a{
        display:block;
        width:100%;
        padding:16px 10px;
    }

    nav a::after{
        display:none;
    }

}

@keyframes menuDown{

    from{

        opacity:0;
        transform:translateY(-20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


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

.about-home{

    background:var(--white);

}

.about-home .container{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;

}

.about-home img{

    border-radius:18px;
    box-shadow:var(--shadow);

}

.about-home h5{

    color:var(--primary);
    margin-bottom:12px;
    letter-spacing:2px;

}

.about-home h2{

    font-size:42px;
    color:var(--title);
    margin-bottom:25px;
    line-height:1.3;

}

.about-home p{

    margin-bottom:20px;

}


/*====================================================
STATISTICS
====================================================*/

.stats{

    background:linear-gradient(135deg,#0078ff,#005fc8);
    color:#fff;

}

.stats .container{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

}

.stats .card{

    text-align:center;
    padding:40px 20px;

}

.stats h2{

    font-size:52px;
    font-weight:700;
    margin-bottom:10px;

}

.stats p{

    opacity:.95;

}


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

.service-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.service-card{

    background:#fff;
    padding:40px 30px;
    border-radius:16px;
    box-shadow:var(--shadow);
    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

}

.service-card i{

    font-size:52px;
    color:var(--primary);
    margin-bottom:25px;

}

.service-card h3{

    color:var(--title);
    margin-bottom:18px;

}


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

.why-us{

    background:var(--light);

}

.why-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;

}

.why-card{

    background:#fff;
    border-radius:16px;
    padding:35px 25px;
    text-align:center;
    transition:.35s;
    box-shadow:var(--shadow);

}

.why-card:hover{

    transform:translateY(-10px);

}

.why-card i{

    font-size:52px;
    color:var(--primary);
    margin-bottom:20px;

}

.why-card h3{

    color:var(--title);
    margin-bottom:15px;

}


/*====================================================
ANIMATIONS
====================================================*/

.hidden{

    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;

}

.show{

    opacity:1;
    transform:translateY(0);

}


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

@media (max-width:992px){

.about-home .container{

grid-template-columns:1fr;

}

.service-grid{

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

}

.why-grid{

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

}

.stats .container{

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

}

}


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

@media (max-width:768px){

.hero{

text-align:center;
padding:0 20px;

}

.hero h1{

font-size:40px;

}

.hero p{

font-size:18px;

}

.section-title h2{

font-size:34px;

}

.service-grid,
.why-grid,
.stats .container{

grid-template-columns:1fr;

}

.about-home h2{

font-size:34px;

}

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

.projects-page,
.projects-home{

    background:var(--light);

}

.project-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.project{

    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.35s;

}

.project:hover{

    transform:translateY(-10px);

}

.project img{

    width:100%;
    height:280px;
    object-fit:cover;
    transition:.5s;

}

.project:hover img{

    transform:scale(1.08);

}

.project .caption{

    padding:25px;

}

.project .caption h3{

    color:var(--title);
    margin-bottom:12px;

}

.project .caption p{

    color:#666;

}


/*====================================================
PAGE BANNER
====================================================*/

.page-banner{

    height:420px;

    background:
    linear-gradient(rgba(10,20,35,.65),rgba(10,20,35,.65)),
    url("../images/banner.jpg") center center/cover;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    color:#fff;

    margin-top:90px;

}

.page-banner h1{

    font-size:56px;
    margin-bottom:20px;

}

.page-banner p{

    font-size:20px;
    max-width:700px;
    margin:auto;

}


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

.profile{

    background:linear-gradient(135deg,#0078ff,#005fc8);

    color:#fff;

    text-align:center;

}

.profile h2{

    font-size:42px;
    margin-bottom:20px;

}

.profile p{

    max-width:800px;
    margin:0 auto 35px;

}

.profile .btn{

    background:#fff;
    color:var(--primary);

}

.profile .btn:hover{

    background:#f3f3f3;

}


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

.contact-page{

    background:#fff;

}

.contact-page .container{

    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:60px;

}

.contact-form{

    background:#fff;
    padding:40px;
    border-radius:18px;
    box-shadow:var(--shadow);

}

.contact-form h2{

    margin-bottom:30px;
    color:var(--title);

}

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

    width:100%;
    padding:16px;
    margin-bottom:20px;

    border:1px solid #ddd;
    border-radius:12px;

    font-family:Poppins,sans-serif;
    font-size:15px;

    transition:.3s;

}

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

    outline:none;
    border-color:var(--primary);

}

.contact-form textarea{

    resize:vertical;

}

.contact-details h2{

    margin-bottom:30px;
    color:var(--title);

}

.contact-item{

    display:flex;
    align-items:flex-start;
    gap:20px;
    margin-bottom:30px;

}

.contact-item i{

    width:60px;
    height:60px;

    background:var(--primary);

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:22px;

}

.contact-item h4{

    color:var(--title);
    margin-bottom:6px;

}

.contact-item a{

    color:var(--primary);

}

.map-section iframe{

    width:100%;
    height:500px;
    border:0;

}


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

footer{

    background:#08131f;

    color:#fff;

    padding-top:80px;

}

.footer-grid{

    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;

}

.footer-logo{

    width:170px;
    margin-bottom:20px;

}

footer h3{

    margin-bottom:25px;

}

footer ul li{

    margin-bottom:12px;

}

footer a{

    color:#c8d3dd;
    transition:.3s;

}

footer a:hover{

    color:#fff;

}

.social{

    display:flex;
    gap:15px;
    margin-top:20px;

}

.social a{

    width:45px;
    height:45px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:#12273b;

    color:#fff;

    transition:.35s;

}

.social a:hover{

    background:var(--primary);

}

footer hr{

    border:none;
    border-top:1px solid rgba(255,255,255,.15);

    margin:50px 0 25px;

}

.copyright{

    text-align:center;
    color:#b5b5b5;
    padding-bottom:25px;

}


/*====================================================
RESPONSIVE
====================================================*/

@media(max-width:992px){

.project-grid{

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

}

.footer-grid{

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

}

.contact-page .container{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.project-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.page-banner h1{

font-size:38px;

}

.profile h2{

font-size:34px;

}

}
/*====================================================
WHATSAPP FLOATING BUTTON
====================================================*/

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

box-shadow:0 12px 35px rgba(0,0,0,.25);

z-index:999;

transition:.35s;

animation:float 3s ease-in-out infinite;

}

.whatsapp:hover{

transform:scale(1.1);

background:#1ebe5d;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


/*====================================================
SCROLL TO TOP
====================================================*/

#topBtn{

position:fixed;

left:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:18px;

cursor:pointer;

display:none;

justify-content:center;

align-items:center;

box-shadow:0 10px 30px rgba(0,0,0,.18);

transition:.35s;

z-index:999;

}

#topBtn:hover{

background:var(--primary-dark);

transform:translateY(-5px);

}


/*====================================================
IMAGE EFFECTS
====================================================*/

img{

transition:.4s;

}

.project img:hover,
.about-home img:hover{

transform:scale(1.03);

}


/*====================================================
CARD EFFECTS
====================================================*/

.service-card,
.why-card,
.project,
.contact-form{

transition:all .35s ease;

}

.service-card:hover,
.why-card:hover,
.project:hover,
.contact-form:hover{

box-shadow:0 20px 45px rgba(0,0,0,.14);

}


/*====================================================
LINK EFFECT
====================================================*/

a{

transition:.3s;

}


/*====================================================
FORM BUTTON
====================================================*/

.contact-form button{

width:100%;

border:none;

cursor:pointer;

font-size:16px;

}


/*====================================================
SELECTION COLOR
====================================================*/

::selection{

background:var(--primary);

color:#fff;

}


/*====================================================
SCROLLBAR
====================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#ececec;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

}


/*====================================================
LOADING FADE
====================================================*/

body{

animation:pageFade .5s ease;

}

@keyframes pageFade{

from{

opacity:0;

}

to{

opacity:1;

}

}


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

@media(max-width:992px){

.hero h1{

font-size:48px;

}

.section-title h2{

font-size:36px;

}

.page-banner{

height:340px;

}

}


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

@media(max-width:768px){

.container{

width:92%;

}

header .container{

height:80px;

}

.logo img{

height:58px;

}

.hero{

height:auto;

padding:140px 0 90px;

margin-top:80px;

}

.hero h1{

font-size:34px;

line-height:1.3;

}

.hero p{

font-size:17px;

}

.section-title{

margin-bottom:40px;

}

.section-title h2{

font-size:30px;

}

.about-home h2{

font-size:30px;

}

.profile h2{

font-size:30px;

}

.page-banner{

height:300px;

}

.page-banner h1{

font-size:34px;

}

.page-banner p{

font-size:17px;

padding:0 15px;

}

.contact-form{

padding:30px 20px;

}

.whatsapp{

width:58px;

height:58px;

font-size:28px;

right:15px;

bottom:15px;

}

#topBtn{

left:15px;

bottom:15px;

width:50px;

height:50px;

}

}


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

@media(max-width:480px){

.hero h1{

font-size:28px;

}

.section-title h2{

font-size:26px;

}

.page-banner h1{

font-size:28px;

}

.stats h2{

font-size:40px;

}

.service-card{

padding:30px 22px;

}

.why-card{

padding:30px 20px;

}

}
.contact-page{
    position: relative;
    z-index: 10;
}

.contact-form{
    position: relative;
    z-index: 20;
}

.contact-form input,
.contact-form textarea,
.contact-form button{
    position: relative;
    z-index: 30;
    pointer-events: auto;
}

.page-banner .overlay{
    pointer-events: none;
}