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


*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;

}


html{

    scroll-behavior:smooth;

}



body{

    background:#f8fafc;
    color:#0f172a;
    overflow-x:hidden;

}



img{

    width:100%;
    display:block;

}



a{

    text-decoration:none;
    color:inherit;

}




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


.header{

    position:sticky;
    top:0;
    z-index:999;

}



.navbar{


    height:75px;

    padding:0 7%;

    display:flex;

    justify-content:space-between;

    align-items:center;


    background:#071936;

    color:white;


}



.logo{


    display:flex;

    align-items:center;

    gap:12px;


}



.logo-icon{


    width:45px;

    height:45px;


    background:#2563eb;


    border-radius:12px;


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:22px;


}



.logo h3{


    font-size:17px;

    font-weight:700;


}



.logo span{


    display:block;

    color:#fbbf24;

    font-size:11px;

    letter-spacing:2px;

    font-weight:700;


}




.menu{


    display:flex;

    gap:35px;

    list-style:none;


}



.menu a{


    color:#e5e7eb;

    font-size:14px;

    transition:.3s;

    cursor:pointer;


}



.menu a:hover,
.menu .active{


    color:#fbbf24;


}



.hamburger{

display:none;

font-size:28px;

cursor:pointer;

}





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


.hero{


    min-height:450px;


    padding:60px 7%;


    display:flex;


    align-items:center;


    justify-content:space-between;



    background:

    linear-gradient(
        90deg,
        rgba(7,25,54,.95),
        rgba(7,25,54,.65)
    ),

    url("assets/images/hero.jpg");



    background-size:cover;

    background-position:center;



    color:white;


}



.hero-content{


    max-width:600px;


}



.hero-content > p:first-child{


    color:#fbbf24;

    font-weight:700;

    letter-spacing:1px;


}



.hero h1{


    margin:15px 0;


    font-size:55px;


    line-height:1.15;


    font-weight:800;


}



.hero h1 span{


    color:#fbbf24;


}



.desc{


    color:#dbeafe;

    line-height:1.8;


}



.hero-image{


    width:42%;


}



.hero-image img{


    border-radius:25px;


    box-shadow:

    0 25px 60px rgba(0,0,0,.4);


}





/* =====================================================
   STATISTIC
===================================================== */


.stats{


    width:86%;


    margin:-45px auto 60px;


    padding:35px 40px;


    background:white;


    border-radius:25px;


    display:grid;


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


    gap:30px;


    position:relative;


    z-index:10;


    box-shadow:


    0 20px 50px rgba(0,0,0,.08);


}



.stats div{


    text-align:center;


    padding:20px;


    position:relative;


    transition:.3s;


}



.stats div:hover{


    transform:translateY(-8px);


}



.stats div:not(:last-child)::after{


    content:"";


    position:absolute;


    right:-15px;


    top:20%;


    height:60%;


    width:1px;


    background:#e2e8f0;


}




.stats i{


    width:70px;

    height:70px;


    margin:auto;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:20px;



    color:white;


    font-size:30px;


    background:

    linear-gradient(
        135deg,
        #2563eb,
        #1e40af
    );



    box-shadow:


    0 10px 25px rgba(37,99,235,.35);


}



.stats h2{


    margin-top:18px;


    font-size:36px;


    font-weight:800;


}



.stats p{


    color:#64748b;


}







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


.section{


    padding:50px 7%;


}



.title{


    display:flex;

    justify-content:space-between;

    align-items:center;


    margin-bottom:30px;


}



.title h2{


    font-size:30px;


}



.title a{


    color:#2563eb;


}




.project-grid{


    display:grid;


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


    gap:25px;


}



.project-card{


    background:white;


    border-radius:20px;


    overflow:hidden;


    box-shadow:


    0 10px 30px rgba(0,0,0,.08);


    transition:.3s;


}



.project-card:hover{


    transform:translateY(-10px);


}



.project-card img{


    height:190px;


    object-fit:cover;


}



.project-card div{


    padding:20px;


}



.tag{


    padding:6px 14px;


    border-radius:20px;


    font-size:12px;


    color:white;


}



.blue{
background:#2563eb;
}


.green{
background:#16a34a;
}


.purple{
background:#9333ea;
}


.orange{
background:#f97316;
}



.project-card h3{


    margin-top:15px;

    font-size:18px;


}



.project-card p{


    color:#64748b;

    margin:10px 0;


}

.btn-project {

    display:inline-block;

    margin-top:15px;

    padding:10px 20px;

    background:#2563eb;

    color:white;

    text-decoration:none;

    border-radius:8px;

    transition:.3s;

}


.btn-project:hover {

    background:#1d4ed8;

    transform:translateY(-2px);

}






/* =====================================================
 CATEGORY
===================================================== */


.category{


    padding:60px 7%;


}



.category-grid{


    margin-top:30px;


    display:grid;


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


    gap:20px;


}



.category-grid div{


    background:white;


    padding:30px 10px;


    text-align:center;


    border-radius:18px;


    box-shadow:


    0 10px 25px rgba(0,0,0,.05);


    transition:.3s;


}



.category-grid div:hover{


    transform:translateY(-8px);


}



.category-grid i{


    display:block;


    font-size:35px;


    color:#2563eb;


    margin-bottom:15px;


}





/* =====================================================
 WHY SECTION
===================================================== */


.why{


    padding:80px 7%;


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:50px;


    align-items:center;


}



.why img{


    border-radius:25px;


}



.features{


    margin-top:30px;


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:20px;


}



.features div{


    display:flex;


    gap:15px;


}



.features i{


    color:#2563eb;


}





/* ===============================
   TESTIMONIAL SECTION
================================ */


.testimonial{

padding:100px 8%;

background:
linear-gradient(
135deg,
#f8fafc,
#eaf2ff
);

text-align:center;

overflow:hidden;

}




.testimonial-heading span{

font-size:14px;

font-weight:700;

letter-spacing:3px;

color:#2563eb;

}



.testimonial-heading h2{

font-size:40px;

margin:15px 0;

color:#071936;

}



.testimonial-heading p{

color:#64748b;

max-width:600px;

margin:auto;

margin-bottom:50px;

}






/* SLIDER */


.testimonial-slider{

width:100%;

max-width:750px;

margin:auto;

overflow:hidden;

}



.testimonial-wrapper{

display:flex;

transition:
transform .7s cubic-bezier(.4,0,.2,1);

}




.testimonial-card{


min-width:100%;


background:white;


padding:55px 50px;


border-radius:30px;


position:relative;


box-shadow:

0 20px 50px rgba(0,0,0,.08);


}





.quote-icon{

position:absolute;

top:30px;

left:40px;

font-size:45px;

color:#dbeafe;

}





.testimonial-card img,
.testimonial-avatar{


width:90px;

height:90px;


border-radius:50%;


margin:auto;


margin-bottom:25px;


object-fit:cover;


}



.testimonial-avatar{

display:flex;

align-items:center;

justify-content:center;


background:#2563eb;


color:white;


font-size:35px;

}





.testimonial-card p{


font-size:18px;


line-height:1.8;


color:#475569;


font-style:italic;


margin-bottom:25px;


}




.testimonial-card h3{


font-size:22px;


color:#071936;


margin-bottom:8px;


}



.testimonial-card span{


font-size:14px;


font-weight:600;


color:#2563eb;


}




/* DOT */


.testimonial-dots{


margin-top:35px;


display:flex;


justify-content:center;


gap:10px;


}



.testimonial-dot{


width:10px;


height:10px;


border-radius:20px;


background:#cbd5e1;


cursor:pointer;


transition:.3s;


}



.testimonial-dot.active{


width:35px;


background:#2563eb;


}




@media(max-width:768px){


.testimonial-card{


padding:45px 25px;


}



.testimonial-heading h2{

font-size:30px;

}


}







/* =====================================================
 NEWSLETTER
===================================================== */


.newsletter{


    margin:50px 7%;


    padding:45px;


    border-radius:25px;


    color:white;



    background:


    linear-gradient(
        120deg,
        #2563eb,
        #071936
    );


}






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


footer{


    background:#071936;


    color:white;


    padding:60px 7%;


    display:grid;


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


    gap:40px;


}



footer p{


    margin-top:10px;


    color:#cbd5e1;


}







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


@media(max-width:992px){


.navbar{

position:relative;

}



.hamburger{

display:block;

}



.menu{


position:absolute;


top:75px;


left:0;


width:100%;


background:#071936;


display:none;


flex-direction:column;


align-items:center;


padding:30px 0;


gap:25px;


}



.menu.show{


display:flex;


}



.hero{


flex-direction:column;

text-align:center;


}



.hero-content{


max-width:100%;


}



.hero h1{


font-size:42px;


}



.hero-image{


width:80%;

margin-top:40px;


}



.project-grid{


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


}



.category-grid{


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


}



.why{


grid-template-columns:1fr;


}



.test-grid{


grid-template-columns:1fr;


}



footer{


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


}


}





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


@media(max-width:600px){


.logo h3{

font-size:14px;

}


.hero h1{


font-size:34px;


}



.stats{


width:90%;


grid-template-columns:1fr;


}



.stats div:not(:last-child)::after{


display:none;


}



.project-grid{


grid-template-columns:1fr;


}



.category-grid{


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


}



.features{


grid-template-columns:1fr;


}



footer{


grid-template-columns:1fr;


}


}