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

:root {
    --blackColor: #000;
    --colorDark: #0A0F2B;
    --whiteColor: #fff;
    --primaryColor: #31449E;
    --secondayColor: #43319E;
}

body {
    font-family: 'Poppins', sans-serif !important;
    background-color: var(--blackColor) !important;
    color: var(--whiteColor) !important;
    scroll-behavior: smooth;
}


.primay_bg {background-color: var(--primaryColor) !important; }

.text_dark {
    color: var(--colorDark);
}

.fs-22 {
    font-size: 22px;
}

.fs-30 {
    font-size: 30px;
}


.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.btn {
    font-weight: 600;
    font-size: 20px;
}

.btn-white {
    background-color: var(--whiteColor);
    color: var(--colorDark);
    padding:0.8rem 1.5rem;
}

.btn-white:hover {
    background-color: #ffffffe3;
    color: var(--colorDark);
}

.w-18 {width: 18%;}

.space-200 {
    height: 262px;
}

.lh-48 {
    line-height: 48px;
}

.ls-04 {
    letter-spacing: -0.04em;
}

/* navbar css start */
nav {
    font-family: 'Montserrat Alternates', sans-serif;
}

.navbar-nav .nav-link.active,
.navbar-nav .show>.nav-link {
    color: var(--primaryColor);
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 2rem;
    padding-right: 2rem;
}

.fs-18 {
    font-size: 18px !important;
}
.fs-60{
    font-size: 60px;
}

.h-58 {
    height: 58px;
}

/* banner section css start */
.banner_sec_main {
    height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 6rem ;
}

.banner_sec_main:after {
    background: url(../images/header_bg_effect.png) no-repeat center right;
    position: absolute;
    content: "";
    right: 0;
    top: -100px;
    width: 100%;
    height: 1230px;
    z-index: -1;
}

.banner_sec_main h4 {
    letter-spacing: -0.04em;
    line-height: 49px;
}

.bannerImg {
    right: 0;
    bottom: 0;
    position: absolute;
}
.bannerImg img{
    width: 100%;
}

/* About Section */
#about-us  , #collaborator ,#screenshots, #Benefit_boxes , #Schedule_appointment ,#Price  #Send_message {
    padding-top: 100px;
    padding-bottom: 130px;
}





#about-us p {
    margin-bottom: 74px;
}



/* benifit section */





/* benifit Boxes  */



.box_list {
    background: linear-gradient(to right, #FFFFFF0A, #FFFFFF03);
    border-radius: 20px;
    padding: 32px;
    min-height: 278px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 0;
}

  
  .box_list::before {
    width: 100%;
    height: 278px;
    aspect-ratio: 1;
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 1px;
    border-radius: 20px;
    background: linear-gradient(95.36deg, #32449F 0%, rgb(255 255 255 / 3%) 100%);
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
            mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  
  }

.box_list h2 {
    font-size: 60px;
    font-weight: 600;
    line-height: 60px;
    letter-spacing: -0.04em;
    text-align: center;
    
}

.lh2_1 {
    line-height: 2.1;
}

.box_list p {
    font-size: 20px;
    font-weight: 400;
    line-height: 43px;
    letter-spacing: -0.04em;
    text-align: center;
    

}


/* Schedule Appointment  */
.schedule_txt h4{
    font-size: 35px;
    font-weight: 500;
    line-height: 67px;
    letter-spacing: -0.04em;

}


/*  Priceing  */
#Price{
    margin-bottom: 250px;
}
.price_card {
    background: linear-gradient(#060D1A, #060D1A) padding-box,
    linear-gradient(to right, #435CAC, #435CAC00) border-box;
    border: 1px solid transparent;
    border-radius: 18.4901px;
    padding: 40px 36px 100px 36px;
    position: relative;
}

#Price::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -330px;
    height: 1355px;
    width: 100%;
    background-image: url(../images/price_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: -1;
}
.price_card .list-group  {min-height: 320px;}
.price_card h4 {font-size: 40px;}
.price_card .list-group .list-group-item  {
    background: transparent; 
    color:#fff;
    font-size: 18px; 
    border: none; 
    margin-bottom: 10px; 
    padding: 0px;
}

.price_card .t_price span{
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -0.04em;
    text-align: left;
}
.price_card .t_price{
    font-size: 40px;
    font-weight: 400;
    letter-spacing: -0.04em;
    text-align: left;
    position: absolute;
    bottom: 40px;
    left: 73px;
}
.price_card .list-group .list-group-item span {
    background: transparent;
    color: #fff;
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 400;
    line-height: 43px;
    letter-spacing: -0.04em;
    text-align: left;

}

/* Contact Us */

.form_input .user_icon  {
    top: 12px;
    left: 28px;
}

.form_input .form-control {background: rgba(255, 255, 255, 0.83);
    border-radius: 32px;
    color:#0A0F2B;
    font-size: 18px;
    font-weight: 500;
    padding: 12px 48px;
}


.border-gradient-purple {
    background: linear-gradient(#060D1A, #060D1A) padding-box,
    linear-gradient(to right, #435CAC, #435CAC00) border-box;
    border-radius: 10px;
    border: 1px solid transparent;
}
.border-gradient-purple:hover{
    background: linear-gradient(var(--primaryColor), var(--primaryColor)) padding-box,
    linear-gradient(to right, #435CAC, #435CAC00) border-box;
    border-radius: 10px;
    border: 1px solid transparent;
}
.border-gradient-purple:hover svg path, .border-gradient-purple:hover svg rect{
    fill: white;
}
.border-gradient-purple2 {
    background: linear-gradient(#060D1A, #060D1A) padding-box,
    linear-gradient(to top, #43319E, #43319E1C) border-box;
    border-radius: 10px;
    border: 1px solid transparent;
}
.border-gradient-purple2:hover{
    background: linear-gradient(var(--secondayColor), var(--secondayColor)) padding-box,
    linear-gradient(to top, #43319E, #43319E1C) border-box;
    border-radius: 10px;
    border: 1px solid transparent;
}
.border-gradient-purple2:hover svg path, .border-gradient-purple2:hover svg rect{
    fill: white;
}





.border-gradient-purple3 {
    padding: 10px;
    display: inline-block;
    position: relative;
    z-index: 0;
  }
  
  .border-gradient-purple3::before {
    width: 100%;
    height:100%;
    aspect-ratio: 1;
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 1px;
    border-radius: 27px;
    background: linear-gradient(to right, #32449F, #FFFFFF00);
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
            mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  
  }
  .benefit_list .list-group-item {
    padding: 23px;
    margin-bottom: 36px;
    border-radius: 27px;
    color: #fff;
    font-size: 35px;
    font-weight: 400;
}
  .list-group-item{
    background: linear-gradient(to right, #FFFFFF0A, #FFFFFF03);
  }
.para {
    line-height: 43px;
    letter-spacing: -0.04em;
}
.card-padding{
    padding: 62px 26px;
}
.card-padding2{
    padding: 33px 26px;
}
.heading1{
    font-style: normal;
    font-weight: 600;
    font-size: 60px;
    line-height: 92px;
    letter-spacing: -0.04em;
    color: var(--whiteColor);
    padding: 66px 0px;
}
#collaborator, #screenshots, #section-4, #Price{
    position: relative;
}
#collaborator::after{
    position: absolute;
    content: "";
    left: 0;
    top: -508px;
    height: 100%;
    width: 100%;
    background-image: url(../images/collaborator.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: -1;
}
.screenshots_slider {
    margin-left: 220px;
}

#screenshots::after{
    position: absolute;
    content: "";
    left: 0;
    bottom: -1188px;
    height: 3477px;
    width: 100%;
    background-image: url(../images/screenshot-section-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: -1;
}
#section-4{
    padding-bottom: 140px;
}
#section-4::after{
    position: absolute;
    content: "";
    left: 0;
    bottom: -620px;
    height: 2253px;
    width: 100%;
    background-image: url(../images/section-4.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: -2;
}
#Benefit_boxes::before{
    position: absolute;
    content: "";
    left: 0;
    bottom: -180px;
    height: 1142px;
    width: 100%;
    background-image: url(../images/section-5.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    z-index: -1;
}
#Benefit{
    margin-bottom: 100px;
}
#Benefit_boxes{
    margin-bottom: 210px;
}
section#Schedule_appointment{
    margin-bottom: 200px;
    padding-bottom: 0px;
}

#Send_message h1{
    font-size: 60px;
    font-weight: 600;
    line-height: 70px;
    letter-spacing: -0.04em;
    text-align: left;
    margin-bottom: 30px;
}

footer{
    margin-top: 126px;
    padding-bottom: 40px;
}

.slick-slide img{
    max-width: 100%;
}

@media only screen and (max-width: 1399px) {
    .bannerImg {
        right: 0;
        bottom: 0;
        width: 41%;
    }
    .fs-30{
        font-size: 24px;
    }
    .banner_sec_main h4 {
        letter-spacing: -0.04em;
        line-height: 40px;
    }
    .banner_sec_main{
        padding-top: 0;
    }
    .space-200 {
        height: 52px;
    }
    .screenshots_slider {
        margin-left: 0px;
    }
    .box_list p {
        font-size: 18px;
        line-height: 35px;
    }
    .box_list h2 {
        font-size: 40px;
    }
    .schedule_txt h4 {
        font-size: 30px;
        line-height: 48px;
    }
    .benefit_list .list-group-item{
        font-size: 26px;
    }
    #Send_message h1{
        font-size: 40px;
    }
    
}
@media only screen and (max-width: 1199px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .fs-18 {
        font-size: 16px !important;
    }
    .benefit_list .list-group-item {
        font-size: 22px;
    }
    .price_card h4 {
        font-size: 30px;
    }
    .price_card .list-group .list-group-item span {
        font-size: 18px;
        line-height: 36px;
    }
    .price_card .t_price {
        font-size: 30px;
    }
}

@media only screen and (max-width:991px) {
    .bannerImg{
        position: inherit;
        width: 60%;
        margin: 0 auto;
        margin-top: 50px;
    }
    .banner_sec_main{
        display: block;
        height: auto;
        padding-top: 50px;
        text-align: center;
    }
    .heading1{
        padding:30px 0px;
    }
    .schedule_txt {
        text-align: center;
    }
    .schedule_txt h4 {
        font-size: 28px;
        text-align: center;
    }
    .schedule_img{
        text-align: center;
        padding-bottom: 50px;
    }
    .w-18 {
        width: auto;
    }
}
@media only screen and (max-width:767px) {
    .fs-22{
        font-size:18px ;
    }
    #about-us p {
        margin-bottom: 30px;
    }
    .lh-48 {
        line-height: 38px;
    }
    
    .price_card {
        padding: 20px 16px 80px 16px;
    }
    .price_card .t_price{
        left: 53px;
    }
}