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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#0b0b0b;
    color:#ffffff;
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

section{
    padding:40px 8%;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    color:#ffffff;
    font-size:42px;
    font-weight:700;
    position:relative;
    display:inline-block;
}

.section-title h2::after{
    content:'';
    width:70px;
    height:4px;
    background:#fff;
    display:block;
    margin:15px auto 0;
    border-radius:20px;
}

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

.navbar{
      display:flex;
    justify-content:center;
    align-items:center;
	background:#000;
 
}

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

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

.hero{

    height:70vh;

    background:url("../images/hero.png");

    background-size:cover;
    background-position:center;

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

    position:relative;

}

.overlay{
    position:absolute;
    inset:0;
}

.hero-content{

    position:relative;
    z-index:2;

    text-align:left;
    max-width:850px;

}

.hero-content h1{

    font-size:60px;
    font-weight:800;
    line-height:1.15;
    text-transform: uppercase;
    margin-bottom:25px;
    color:#ffffff;

}

.hero-content p{

    font-size:22px;

    color:#dddddd;

    margin-bottom:40px;

}

.hero-btn{

    display:inline-block;

    background:#fff;

    color:#000;

    padding:16px 38px;

    border-radius: 8px;

    font-weight:600;

    transition:.35s;

}

.hero-btn:hover{

    background:#ffffff;

    transform:translateY(-5px);
 

}

/* ============================
   SIMPLE FADE-UP ANIMATION
============================ */

.service-box,
.why-box,
.about-content,
.contact-wrapper{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}


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

.services{
    background:#000;
}

.service-container{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;

}

.service-box{

    background:#0b0b0b;

    border:1px solid #2b2b2b;

    border-radius:15px;

    padding:40px 30px;

    text-align:center;

    transition:all .35s ease;

    cursor:pointer;

}

.service-box:hover{

    transform:translateY(-10px);

    border-color:#fff;

    /*box-shadow:0 15px 35px rgba(212,175,55,.18);*/

}

.service-box i{

    font-size:52px;

    color:#fff;

    margin-bottom:25px;

}

.service-box h3{

    color:#ffffff;

    font-size:24px;

    margin-bottom:15px;

    font-weight:600;

}

.service-box p{

    color:#bbbbbb;

    font-size:16px;

    line-height:1.8;

}


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

.about{

    background:#0d0d0d;

}

.about-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.about-content p{

    color:#cccccc;

    font-size:18px;

    line-height:2;

}


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

.why{

    background:#111111;

}

.why-container{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:30px;

}

.why-box{

    background:#0b0b0b;

    border:1px solid #2c2c2c;

    border-radius:15px;

    padding:35px 25px;

    text-align:center;

    transition:.35s;

}

.why-box:hover{

    transform:translateY(-8px);

    border-color:#fff;

    /*box-shadow:0 15px 30px rgba(212,175,55,.18);*/

}

.why-box i{

    font-size:48px;

    color:#fff;

    margin-bottom:20px;

}

.why-box h3{

    color:#ffffff;

    margin-bottom:15px;

    font-size:22px;

}

.why-box p{

    color:#bbbbbb;

    line-height:1.8;

}


/*=========================================
    PREMIUM CARD EFFECT
=========================================*/

.service-box::before,
.why-box::before{

    content:"";

    display:block;

    width:70px;

    height:4px;

    margin:0 auto 25px;

    background:#fff;

    border-radius:30px;

}


/*=========================================
    HOVER ICON ANIMATION
=========================================*/

.service-box:hover i,
.why-box:hover i{

    transform:scale(1.15) rotate(5deg);

    transition:.35s;

}


/*=========================================
    OPTIONAL DARK DIVIDER
=========================================*/
/*
.about::before,
.services::before,
.why::before{

    content:"";

    display:block;

    width:100px;

    height:2px;

    background:#fff;

    margin:0 auto 70px;

    opacity:.25;

}

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

.contact{
    background:#000;
}

.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:50px;
    align-items:start;
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:25px;
}



.contact-info div{
    /*display:flex;*/
	 display:inline-block;
    align-items:center;
    gap:20px;
    padding:10px;
    background:#0b0b0b;
    border-radius:12px;
    transition:.3s;
	text-align: center;
}

.contact-info div:hover{
    border-color:#fff;
    transform:translateX(8px);
}

.contact-info i{
    width:55px;
    height:55px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
    color:#000;
    border-radius:50%;
    font-size:22px;
}

.contact-info span{
    color:#ffffff;
    font-size:16px;
}

.contact-form{
    background:#0b0b0b;
    padding:40px;
    border-radius:15px;
    border:1px solid #2b2b2b;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:16px 20px;
    margin-bottom:20px;
    background:#111;
    border:1px solid #333;
    border-radius:8px;
    color:#fff;
    font-size:16px;
    outline:none;
    transition:.3s;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:#fff;
}

.contact-form textarea{
    resize:none;
    min-height:170px;
}

.contact-form button{
    width:100%;
    padding:16px;
    background:#fff;
    color:#000;
    border:none;
    border-radius:8px;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.contact-form button:hover{
    background:#fff;
    transform:translateY(-3px);
}

.contact-form button i{
    margin-right:10px;
}


.contact-item {    border:1px solid #2b2b2b;}

.contact-item2 {    display:block!important;}

.contact-item2 a{    color:#fff;}
.contact-item2 a:hover{    color:#ccc;}

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

footer{
    background:#000;
    text-align:center;
    padding:20px 20px;
    border-top:1px solid #222;
}

.social{
    margin-bottom:25px;
}

.social a{
    width:48px;
    height:48px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    margin:0 8px;
    border-radius:50%;
    background:#0b0b0b;
    color:#fff;
    border:1px solid #333;
    font-size:18px;
    transition:.3s;
}

.social a:hover{
    background:#fff;
    color:#000;
    transform:translateY(-5px);
}

footer p{
    color:#888;
    font-size:15px;
}


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

.scrollTop{
    position:fixed;
    right:25px;
    bottom:25px;
    width:50px;
    height:50px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#fff;
    color:#000;
    border-radius:50%;
    font-size:20px;
    box-shadow:0 5px 20px rgba(0,0,0,.4);
    transition:.3s;
    z-index:999;
}

.scrollTop:hover{
    transform:translateY(-5px);
    background:#fff;
}


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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#111;
}

::-webkit-scrollbar-thumb{
    background:#fff;
    border-radius:20px;
}


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

@media(max-width:992px){
	
	.hero{

height: 50vh;
    background: linear-gradient(
    rgba(0,0,0,.72),
    rgba(0,0,0,.72)
    ),
    url("../images/hero-phone.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
 

}


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

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

    .nav-links{
        display:none;
    }

    .quote-btn{
        display:none;
    }

    .menu-btn{
        display:block;
        color:#fff;
    }

}

@media(max-width:768px){

    section{
        padding:40px 25px;
    }

.hero-content{
 
    text-align:left;
 
}
    .hero-content h1{
        font-size:38px;
    }

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

    .section-title h2{
        font-size:30px;
		line-height: 1.15;
    }

    .contact-form{
        padding:25px;
    }

    .logo img{
        height:70px;
    }

}

@media(max-width:480px){

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

    .hero-btn{
        padding:10px 15px;
    }

    .service-box,
    .why-box{
        padding:30px 20px;
    }

}

.whatsapp-icon {
    position: fixed;
    display: block;
    bottom:75px;
    border-radius: 50%;
    left: 25px;
    z-index: 12;
    box-shadow: 0px 2px 10px rgb(0 0 0 / 70%);
    animation: zoomIn 2.5s infinite;
}


@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}


.contact-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
}

.contact-form .error-message {
    display: none;
    color: #fff;
    background: #4CAF50;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}

.contact-form .sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    font-weight: 600;
}