@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --primary: #673de6;
  --dark: rgb(17, 12, 41);
  --default:#18181a;
  --offwhite:#f5f5f6;
  --light:#f4f8fb;
  --pink:#ce3de6;
  --border:#eaeef2;
}
body {
  color: var(--default);
  margin: 0; font-family: 'Roboto', sans-serif;
  padding: 0;
  background:#fff; font-size: 16px; line-height: 1.7;
}
a{
  text-decoration: none;
  color: var(--default);
}
b,strong{font-weight: 600;}
ul{list-style: none; margin: 0; padding: 0;}
.title,.sub-title {
  font-size: 24px;
  margin-top: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--dark);
}

.sub-title{font-size: 18px; line-height: 26px;}

.bg-body-tertiary{
    background-color: fff !important;
    padding-right:0px; padding-left:0px;
    box-shadow:0 1px 2px rgba(17, 12, 41,.1);
}

.navbar + main {
  margin-top: 56px;
}

.navbar-brand{ display: flex; align-items: end;}
.navbar-brand .logo{margin-right: 3px; max-width:70px;}
.navbar-brand span{font-size: 20px; margin-bottom: -6px; color: var(--default); font-weight: 700;}
.navbar .contact-nav .icon{width: 40px; height: 40px; background:#673de61f;}
.navbar .contact-nav .icon img{width: 20px;}
.navbar .contact-nav b{font-size: 16px; font-family: 'Poppins', sans-serif;}
.navbar .contact-nav .book-app{font-size: 12px; border-radius: 24px; padding: 8px 20px;}
.navbar .serv-dropdown{min-width: 360px; background: #fff; box-shadow: 0 0px 12px rgba(65, 62, 74, 0.2);}
.dropdown-toggle::after {

    border-top: 1px solid var(--dark);
    border-right:  1px solid var(--dark);
    border-bottom: 0;
    border-left:0;
    width: 8px;
    height: 8px;
    background: transparent;
    transform: rotate(136deg);
}
.hero-section{
             position: relative;  display: flex; 
             justify-content: center; align-items: center;
             /* background-color: #f2f6ff; */
             background-color:#f2f6ff78; 
            
             z-index: 1; overflow: hidden;
            }

.hero-section img{max-width:674px; width:100%; max-height: 455px;}  

.services-sec{position: relative; z-index: 2; top:-300px}    

.service{padding:16px; 
  background:#fff;
  /* box-shadow: 0 0 8px rgb(134 159 214 / 10%)!important; */
  box-shadow: 0px 10px 70px 0px rgba(0, 0, 0, 0.07)!important;
   border: 0!important;}
.service img{max-width: 64px;}
.service:hover{box-shadow: 0px 0px 0px 2px var(--primary)!important;}

.why-us{padding: 20px 16px 20px 16px; border-radius: 8px;}
.why-us img{max-width: 60px;}

.quote-form{padding:32px;}
.form-group{margin-bottom: 20px;}
.quote-form label{ font-size:13px; margin-bottom: 5px;}
.quote-form .form-control{border-radius: 0; height: 44px; color:#fff; border: 0; box-shadow: none; background:#b1b1b11a;}
.quote-form .text-area{height: 80px;}
.quote-form .text-danger{font-size:12px; display:none}

.count-bar{background: url(../icons/counter.svg); border-radius: 30px;
       padding-top:60px; padding-bottom: 60px; margin-bottom: -120px; 
       position: relative; z-index: 1;}
.counter{gap: 20px; font-family: 'Poppins', sans-serif; margin-bottom: 30px;  padding-left: 30px;} 
.counter.last{margin-bottom: 0;}
.counter .icons{width: 70px; height: 70px; position: relative; background-color: rgba(255, 255, 255, 0.1);}  
.counter .icons::after{
   position: absolute; 
   left:-6px; top:-6px;
   bottom: -6px; right: -6px; 
   border: 1px dashed rgba(255, 255, 255, 0.9);
   content: '';
   border-radius: 100%;}
.counter .icons img{width: 40px;}   

.testimonials{ padding-top: 160px;}
.testimonial{padding: 20px; border-radius:20px; background:#fff;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.07)!important; }
.testimonial .icons{width: 50px; height: 50px; border-radius: 50%; background-color: var(--offwhite);}   
.testimonial .icons img{max-width: 20px;}
.testimonial .client{max-width: 50px;}

section{padding-top:20px; padding-bottom: 20px;}
.icon{display: inline-block; width: 40px;}

.text-primary{color: var(--primary)!important;}
.text-pink{color: var(--pink);}
.text-dark{color: var(--dark)!important;}

.primary-bg{background-color: var(--primary)!important;
   color:#fff!important;}
.back-bg{background:#0b1113}
.pink-bg{background: var(--pink)!important;}

.offwhite-bg{background: var(--offwhite)!important;}
.light-bg{background: var(--light)!important;}

.btn{  font-family: 'Poppins', sans-serif;}
.btn-primary,
.btn-pink{background-color: var(--primary)!important; border-color: var(--primary)!important; color:#fff!important; border-radius: 3px; min-width:140px; 
  padding: 10px 20px; font-size: 16px; letter-spacing: .3px; font-weight: 600; text-transform: uppercase;
}
.btn-pink{background: var(--pink)!important; border-color: var(--pink)!important;}


footer{background: var(--dark); font-size: 15px; letter-spacing: .6px; color: #fff; padding-top: 266px; margin-top: 0px;}
.contact-footer{   
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    background: var(--light);
    margin-top: -306px; margin-bottom: 40px;
    color: var(--default); font-weight: 600; 
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 -4px 6px rgba(17, 12, 41,.1);
    padding-bottom: 12px;
  }
.contact-footer .footer-logo-main{background:#fff; padding:15px 30px;} 
.contact-footer .footer-contact{display: flex; align-items:flex-start; gap: 10px; padding-left: 16px;}
.contact-footer .footer-contact img{max-width: 30px;}
.footer-logo-main img{max-width: 80px;}    
.footer .sub-title{font-size:20px;}
.footer p{color: #8e8c97;}
.footer li a{color:#8e8c97;  line-height: 22px; display:inline-block; padding-top:3px; padding-bottom: 3px;}
.footer li a:hover{color: #fff;}
.footer .social-bar{display: grid; 
                    grid-template-columns: repeat(4, 1fr);
                    gap: 20px;}
.footer .social-bar li a{ width: 60px; height: 60px; 
  background-color: rgba(255, 255, 255, 0.1);}
.footer .social-bar li a:hover{color: var(--pink);}  
.footer .social-bar li a img{width: 32px;} 

@media(min-width:768px){
  .navbar + main {margin-top: 60px;}
  .bg-body-tertiary{padding-left: 35px; padding-right: 35px; background-color: rgba(255, 255, 255,0.7) !important;}
  .navbar .contact-nav .book-app{font-size: 14px; border-radius: 24px; padding: 10px 20px;}
 .navbar .serv-dropdown{padding: 20px 10px;}
  section{padding-top: 40px;}
  .hero-section{ background:url(../images/tool-bg.avif) repeat center center / 600px #f2f6ff78;}
  footer{ padding-top: 240px; margin-top: 100px;} 
  .counter{margin-bottom: 0; padding-left: 0px;}
  .counter.justify-content-start{justify-content: center !important;}
  .quote-form{padding: 50px;}
  .contact-footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px; padding-bottom: 0;
  }
  .contact-footer .footer-logo-main{padding: 40px 30px;}
  .contact-footer .footer-contact{padding-left: 0px; justify-content: center!important; 
        align-items: center!important;}
     
  .footer .social-bar{grid-template-columns: repeat(2, 1fr);}
  
}