/* google fonts link */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;1,9..40,100&family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'poppins',sans-serif;
    scroll-behavior: smooth;
}
p{
    font-family: 'Josefin Sans', sans-serif;
}
body{
    background-color: black;
    scroll-behavior: smooth;
}
.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5%;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.384);
    position: fixed;
    z-index: 9999;
}
.bgnav{
    background-color: black;
}
.menu{
    display: flex;
    align-items: center;
    gap: 20px;
}
.menu li a{
    color: white;
    font-size: 20px;
}
.menu li a:hover{
    color: orangered;
}
.logo{
    width: 50px;
}
.logo img{
    width: 100%;
    border-radius: 50%;
}
.bars{
    color: white;
    display: none;
    background-color: orangered;
    padding: 5px 10px;
}
.navbar i{
    color: white;
}
.hero{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 7%;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);

}
.hero-content{
    color: white;
    width: 65%;
}
.hero-content h1{
    font-size: 100px;
    margin-bottom: 30px;
}
.hero-content h2{
    font-size: 80px;
    margin-bottom: 30px;
}
.hero-content p{
    color: rgba(255, 255, 255, 0.543);
    display: inline;
    position: relative;
}
.hero-content p:after{
    content: "";
    position: absolute;
    height: 1px;
    width: 200px;
    background-color: rgba(255, 255, 255, 0.3);
    left: 110%;
    top: 48%;
}
.about_info button{
    margin-top: 50px;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 10px 20px;
    color: white;
    transition: all 0.5s ease-in-out;
}
.about_info button a{
    color: white;
    padding-bottom: 30px;
}
.hero-content button{
    margin-top: 50px;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 10px 20px;
    color: white;
    transition: all 0.5s ease-in-out;
}
.hero-content button:hover{
    background-color: orangered;
}
.hero-img{
    width: 400px;

}
.hero-img img{
    width: 400px;
    height: 600px;
    filter: brightness(20%);
    transition: all .5s ease-in-out;
}
.hero-img img:hover{
    width: 100%;
    filter: brightness(50%);
}
.bgtext{
    position: absolute;
    font-size: 190px;
    color: rgba(255, 255, 255, 0.05);
    top: 0%;
    z-index: -1;
}
.iconbox {
    position: absolute;
    color: white;
    display: flex;
    gap: 50px;
    rotate: -90deg;
    left: -70px;
    top: 50%;

}
.iconbox p a{
    color: white;
}

.iconbox p{
    position: relative;
}

.iconbox{
    padding-bottom: 3%;
}

.iconbox p:after{
    content: "";
    position: absolute;
    height: 1px;
    width: 30px;
    left: 120%;
    top: 48%;
    background-color: orangered;
}
.iconbox p:last-child:after{
    display: none;
}

/* about */

.about{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 7%;
    padding: 80px 20px;
    gap: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
}
.about_img{
    position: relative;
}
.img_card{
    background-color: black;
    color: white;
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.img_card h1{
    font-size: 100px;
}
.img_card h4{
    font-weight: 400;
}
.about_img img{
   -webkit-filter: grayscale(100%);
}
.about_img img:hover{
    -webkit-filter: grayscale(0%);
}
.about_info{
    width: 650px;
    color: white;
}
.about_info span{
    font-size: 16px;
    color: orangered;
    position: relative;
    z-index: 1;
    background-color: black;
    
}
.about_info span:after{
    content: "";
    position: absolute;
    height: 40px;
    width: 30px;
    border: 1px solid orangered;
    left: -10px;
    top: -10px;
    z-index: -1;
    
}
.about_info h1{
    font-size: 55px;
    font-weight: 500;
    line-height: 50px;
    margin-top: 20px;
}
.about_info h3{
    font-size: 27px;
    font-weight: 500;
    margin: 30px 0;
    line-height: 30px;
    color: rgba(255, 255, 255, 0.507);
}
.about_info p{
     font-size: 24px;
     font-weight: 100;
     line-height: 27px;
     text-align: justify;
     margin-bottom: 20px;
}
.counts{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.counts h2{
    font-size: 40px;
    color: orangered;
    font-weight: 400;
}
.counts p{
    font-weight: 200;
}


/* services */

.services{
    color: white;
    padding: 80px 20px;
    margin: 0 7%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.heading{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.heading_span{
    font-size: 16px;
    color: orangered;
    position: relative;
    z-index: 1;
    background-color: rgb(0, 0, 0);
    text-align: center;
    
}
.heading_span:after{
    content: "";
    position: absolute;
    height: 40px;
    width: 30px;
    border: 1px solid orangered;
    left: -10px;
    top: -10px;
    z-index: -3 !important;
    
}
.heading_main{
    text-align: center;
    font-size: 55px;
    font-weight: 500;
    line-height: 45px;
    margin-top: 20px;
}

.services_cards {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 30px;
    border-bottom: 1px solid #ab542925;
    margin-top: 100px;
}

.services_card {
    width: 24%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: auto;
    padding: 40px;
    background-color: rgba(77, 77, 77, 0.251);
}
.services_card:hover {
    background-color: rgba(77, 77, 77, 0.626);}

.services_card i {
    font-size: 50px;
    color: orangered;
}
.services_card:hover i{
    color: white;
}

.services_card h3 {
    font-size: 15px;
    margin-top: 20px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    margin-bottom: 20px;
}


.services_card p {
    font-size: 20px;
    line-height: 25px;
     font-weight: 200;
     text-align: justify;
     color: rgba(255, 255, 255, 0.441);
}
.services_card:hover p{
    color: white;
}

.services_card .btn{
    margin-top: 20px;
    width: 50px;
    height: 50px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.26);
    cursor: pointer;
}

.btn .lnr-arrow-right{
    transform: rotate(30deg) !important;
    font-size: 20px;
    transition: all .3s ease-in-out;
    color: orangered;
}
.services_card:hover .btn i{
    color: orangered;
}
.btn:hover .lnr-arrow-right{
    transform: rotate(0deg) !important;
}


/* project */

.project{
    color: white;
    padding: 80px 20px;
    margin: 0 7%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.project_cards{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 100px;
}
.project_card{
    width: 30%;
   
    border: 1px solid rgba(255, 255, 255, 0.171);
}
.project_card_img{
    width: 100%;
    overflow: hidden;
} 
.project_card_img img{
    width: 100%;
    transition: all .5s ease-in-out;
}
.project_card_info{
    padding: 20px;
}
.project_card_info h4{
    font-size: 14px;
    color: rgb(189, 188, 188);
}
.project_card_info h2{
    font-size: 20px;
    font-weight: 500;
}
.project_card:hover img{
    transform: scale(1.1);
}


/* testimonials */

.testimonials{
    color: white;
    padding: 80px 20px;
    margin: 0 7%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.testimonial_main{
    width: 90%;
    color: white;
    margin-top: 50px;
}


.testimonial_slider{
    width: 66%;
    display: flex;
    gap: 2%;
}
.swiper {
    width: 100%;
    overflow-x: hidden;
}

.swiper-slide {
    display: flex;
}
.testimonial_sec{
    background: rgba(244, 244, 244, 0.119);
    padding: 10px 20px;
}
.testimonial_sec p{
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    width: 100%;
    line-height: 40px;
}
.swiper {
    margin-left: auto;
    margin-right: auto;
}
.testimonial_user{
    margin-top: 30px;
    display: flex;
    gap: 20px;
}
.testimonial_user img{
    border-radius: 50%;
}
.testimonial_user h4{
    font-size: 20px;
    color: orangered;
}

/* contact */

.contact{
    color: white;
    padding: 80px 20px;
    margin: 0 7%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.contact_main{
    width: 80%;
    background-color: rgba(255, 255, 255, 0.143);
    padding: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.contact_main h1{
    text-align: center;
}
.contact_main p{
    text-align: center;
    margin-top: 10px;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.532);
    margin-bottom: 50px;
}
.contact_main div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
   
}
.contact_main textarea,.contact_main input{
    width: 100%;
    height: 50px;
    background-color: transparent;
    outline: none;
    padding: 10px;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.273);
}
.contact_main textarea{
    height: 150px;
}
.contact_main button{
    margin-top: 30px;
    width: 150px;
    height: 50px;
    font-size: 18px;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.161);
    background-color: rgba(0, 0, 0, 0.525);
    transition: all .5s ease-in-out;

}
.contact_main button:hover{
    background-color: orangered;
}

/* footer */

footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    padding: 80px 0;
    background-color: rgba(36, 36, 36, 0.69);
    gap: 20px;
}
footer img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.footer_icons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.footer_icons a{
    color: white;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items:center ;
    border: 1px solid rgba(255, 255, 255, 0.19);
}
.footer_icons a:hover i{
    color: orangered;
}
.footer_icons i{
    font-size: 20px;
}
footer h4{
    font-weight: 500;
}
@media (max-width:1400px) {
    .iconbox{
        left: -100px;
    }
    .about_img{
        width: 50%;
    }
    .about_img img{
        width: 100%;
    }
    .heading_main{
        font-size: 43px;
    }
    .about_info h3{
        font-size: 25px;
    }

}
@media (max-width:1200px) {
    .bgtext{
        font-size: 150px;
    }
    .hero-content h1{
        font-size: 50px;
    }
    .iconbox{
        left: -120px;
    }
    .about{
        flex-direction: column;
    }
    .about_img{
        width: 350px;
    }
    .about_info{
        width: 100%;
    }
    .services_cards{
        flex-wrap: wrap;
        gap: 20px;
    }
    .services_card{
       width: 48%;
    }
    .project_card{
        width: 40%;
    }
}
@media (max-width:850px) {
    .hero{
        flex-direction: column;
        height: auto;
        gap: 50px;
    }
    .hero-content{
        text-align: center;
        padding-top:40px ;
        width: 90%;
    }
    .hero-content p:after{
        display: none;
    }
    .bgtext{
        font-size: 120px;
    }
    .project_card{
        width: 55%;
    }
}
@media (max-width:650px) {
    .hero,.about,.services,.project,.testimonials,.contact{
        margin: 0;
        border: none;
    }
    .hero-img{
        width: 300px;
    }
    .bgtext{
        rotate: -90deg;
        top: 35%;
        left: -250px;
    }
    .bars{
        display: block;
    }
    .menu{
        position: absolute;
        width: 100%;
        top: 55px;
        left: 0;
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.183);
        backdrop-filter: blur(10px);
        z-index: 999;
        height: 0;
        overflow: hidden;
        transition: all 0.5s ease-in-out;
    }
    .mobilemenu{
        height: 270px;
        padding: 20px 10%;
    }
    .menu li a{
        color: rgb(255, 255, 255);
    }
    .about_info button{
        margin-top: 20px;
    }
    .hero-content button{
        margin-top: 20px;
    }
    .hero-content h1{
        margin-bottom: 10px;
        font-size: 40px;
        width: 100%;
    }
    .heading_main,.about_info h1{
        font-size: 35px;
    }
    .about_info h3{
        font-size: 20px;
    }
    .about_info p{
        font-size: 20px;
    }
    .services_card{
        width: 100%;
    }
    .project_card{
        width: 100%;
    }
    .contact_main{
        width: 100%;
    }
}