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

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

html{
    scroll-behavior:smooth;
}

body{
    /*font-family:'Poppins',sans-serif;*/
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, 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 bottom;
    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: 5px 22px;

    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;
	transition:.4s;


}

.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;
}

@media(max-width:768px){

   .contact-info i{
    width:40px;
    height:40px;
    font-size:20px;
}
   }

.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-radius:8px;
    color:#fff;
    font-size:15px;
    outline:none;
    transition:.3s;
	border-width: 2px;
    border-style: inset;
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
}

.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: 70vh;
    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:75px;
    }

}

@media(max-width:480px){
    
	.hero{height: 50vh;}
	
    .hero-content h1{
        font-size:30px;
    }

    .hero-btn{
        padding:5px 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;
}

 #message{          
		font-weight:bold;
		color: #fff;
		margin-bottom: 15px;
		font-size: 15px;
		animation: messagePop 0.6s ease forwards;
}


@keyframes messagePop {

    0% {
        opacity: 0;
        transform: translateY(-25px) scale(0.9);
    }

    50% {
        opacity: 1;
        transform: translateY(5px) scale(1.03);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

/*
.service-box{

    opacity:0;
    animation: serviceShow 0.8s ease forwards;

}


 

.service-box:nth-child(1){
    animation-delay:.2s;
}

.service-box:nth-child(2){
    animation-delay:.4s;
}

.service-box:nth-child(3){
    animation-delay:.7s;
}

.service-box:nth-child(4){
    animation-delay:.9s;
}

.service-box:nth-child(5){
    animation-delay:1.1s;
}


@keyframes serviceShow{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
*/
 .service-box{
    opacity: 0;
    transform: translateY(50px);
    transition: opacity .8s ease, transform .8s ease;
}

.service-box.show{
    opacity: 1;
    transform: translateY(0);
}

.service-box:nth-child(1).show{
    transition-delay: 0.08s;
}

.service-box:nth-child(2).show{
    transition-delay: 0.15s;
}

.service-box:nth-child(3).show{
    transition-delay: 0.30s;
}

.service-box:nth-child(4).show{
    transition-delay: 0.45s;
}

.service-box:nth-child(5).show{
    transition-delay: 0.60s;
}



.logo img {
    animation: logoReveal 1.5s ease forwards;
}


@keyframes logoReveal {

    from {
        opacity:0;
        transform:scale(.5) rotateY(90deg);
    }

    to {
        opacity:1;
        transform:scale(1) rotateY(0);
    }

}


.hero-title span{

    display:inline-block;

    opacity:0;

    filter:blur(10px);

    transform:translateY(40px);

    animation: titleReveal 1s cubic-bezier(.2,.8,.2,1) forwards;
 
}


/* stagger timing */

.hero-title span:nth-child(1){
    animation-delay:.2s;
}

.hero-title span:nth-child(2){
    animation-delay:.4s;
}

.hero-title span:nth-child(3){
    animation-delay:.7s;
}

.hero-title span:nth-child(4){
    animation-delay:.9s;
}



@keyframes titleReveal{

    to{

        opacity:1;

        filter:blur(0);

        transform:
        translateY(0);

    }

}
 


@keyframes iconFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}