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

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

:root {
  /* Background-color  */

  --primary-color:#4458dc;
  --secondary-color:#854fee;
  --bg-white:#fff;
  --bg-light:#faf8ff;
  --bg-black:#000;
  --bg-gray:#eee;
  --gradient:linear-gradient(to right, #4458dc 0%, #854fee 100%), radial-gradient(circle at top left, #4458dc, #854fee);

  /* Text-color  */
    
  --primary-text:#4458dc;
  --secondary-text:#854fee;
  --text-white:#fff;
  --text-black:#000;
  --text-gray:#777;

  /* Font Family  */
  
  --primary-font:  'Jost', sans-serif;
  --secondary-font:  'Jost', sans-serif; 

}


body {
  font-family: 'Jost', sans-serif;
  width: 100%;
  background-image: url(./img/images/body-bg.png.webp);
  background-repeat: no-repeat;
}

a {
  text-decoration: none;
}

 /* Custom CSS  */

  
 
 ::-webkit-scrollbar {
  width: 0.25rem;
 }

::-webkit-scrollbar-track {
  background: var(--bg-gray);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
}

section {
  padding: 5rem 0;
}

.main-btn {
  display: inline-block;
  font-family: var(--primary-font);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 2.875rem;
  text-align: center;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 0.3125rem;
  box-shadow: 0 0.625rem 1.875rem rgb(118 85 225 / 30%);
  border: double 0.125rem transparent;
  padding: 0 2.625rem;
  transition: all .3s ease-in-out;
  --webkit-transition:all .3s ease-in-out;
}

  .primary-btn {
    background-image: var(--gradient);
    color: var(--text-white);
  }

  .primary-btn:hover {
    border-color: var(--secondary-color);
    background: var(--bg-white);
    color: var(--secondary-text);
    box-shadow: none;
  }

  .secondary-btn {
    background-image: var(--bg-white);
    color: var(--secondary-text);
    border-color: var(--secondary-color);
  }

  .secondary-btn:hover {
    background: var(--gradient);
    color: var(--text-white);
    box-shadow: none;
  }


  h1 {
    font-size: 4.375rem;
    line-height: 3.75rem;
    font-weight: 700;
    color: var(--text-black);
    margin-bottom: 1.25rem;
    font-family: var(--primary-font);
  }

  h2 {
    font-size: 2.5rem;
    line-height: 3.4375rem;
    font-weight: 700;
    color: var(--text-black);
    margin-bottom: 1.5625rem;
    font-family: var(--primary-font);
  }

    h3 {
    font-size: 2.25rem;
    line-height: 3.125rem;
    font-weight: 700;
    color: var(--text-black);
    margin-bottom:0.9375rem;
    font-family: var(--primary-font);
    text-transform: uppercase;
  }

     h5 {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-black);
    margin-bottom:2.1875rem;
  }


  p {
    color: var(--text-gray);
    font-size: 0.9375rem;
    line-height: 1.625rem;
    font-weight: 400;
  }


  .header_wrapper .navbar {
    padding: 0.9375rem 0;
    -o-transition: all .2s linear;
    --webkit-transition:all .2s linear;
    transition: all .2s linear;
  }

  .header_wrapper .navbar-brand img {
    max-width: 10rem;
    height: auto;
  }

  .logo {
    width: 80px;
  }

  .header_wrapper .navbar-toggler:focus {
    box-shadow: none;
  }

  .header_wrapper .nav-item {
    margin: 0 0.625rem;
  }

  .header_wrapper .nav-item .nav-link {
    font-family: var(--primary-font);
    font-size: 0.9375rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--text-black);
    display: inline-block;
  }

   
    .header_wrapper .nav-item .nav-link:active,
  .header_wrapper .nav-item .nav-link:hover {
    color: var(--primary-text);
  }

  
  .header-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-white);
    -wekit-box-shadow:0 0.25rem 0.375rem rgb(12, 0, 46, .05);
    box-shadow: 0 0.25rem 0.375rem rgb(12, 0, 46, .05);
  }


   .banner_wrapper {
  padding-top: 6.875rem;
  z-index: 1;
  background-image: url(./img/images/home-banner.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
   }

   .banner_wrapper .banner-content {
    vertical-align: middle;
    align-self: center;
   }


/* About  */

.about_wrapper .single-logo-item {
    width: 100%;
    height: 6.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0.0625rem solid var(--bg-gray);
    box-shadow: none;
    transition: all .4s ease 0s;
}
 
.about_wrapper .single-logo-item:hover {
  border: 0.0625rem solid transparent;
  box-shadow: 0 0.5rem 1.875rem rgb(118 85 225 / 15%);
}


 .about_wrapper .client-info {
  padding: 1.5625rem 1.875rem;
  background: var(--bg-light);
  position: relative;
  margin-top: 1.5625rem;
 }


 .about_wrapper .client-info::before {
  content: "";
  position: absolute;
  top: -1.5625rem;
  left: -3.4375rem;
  background:url(./img/images/client-info.webp);
  background-repeat: no-repeat;
  height: 10.9375rem;
  width: 10.9375rem;
 }


 .about_wrapper .client-info .large {
  color: var(--secondary-text);
  font-family: var(--primary-font);
  font-size: 6.25rem;
  position: relative;
  z-index: 9;
  font-weight: 700;
 }

 .about_wrapper .client-info .smll {
  text-align: left;
  color: var(--text-black);
  font-family: var(--primary-font);
  font-size: 1.25rem;
  margin-left: 3rem;
  font-weight: 500;
 }

 .about_wrapper .client-info .call-now span {
    font-size: 3.75rem;
    font-weight: 700;
    color: var(--text-black);
 }

  .about_wrapper .client-info .call-now p {
    color: var(--secondary-text);
    text-transform: uppercase;
    margin-bottom: 0.3125rem;
  }

     /* Services  */

     .service_wrapper .card {
        background-color: var(--bg-light);
        cursor: pointer;
        transition: all .4s ease 0s;
     }

    .service_wrapper .card:hover {
      box-shadow: 0 0.9375rem 1.875rem rgb(77 87 222 / 30%);
      background: var(--bg-white);
    }

   /* Portfolio  */

   .portfolio_wrapper .nav-link {
         font-size: 0.9375rem;
         font-weight: 500;
         margin-right: 0.25rem;
         color: var(--text-black);
         text-transform: uppercase;
   }

    .portfolio_wrapper .nav-link.active {
      color: var(--secondary-text);
      background-color: transparent;
    }

 .portfolio_wrapper .portfolio-img {
  position: relative;
  cursor: pointer;

 }

 .portfolio_wrapper .portfolio-img .overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transition: all .4s ease 0s;
 }

  .portfolio_wrapper .portfolio-img:hover .overlay {
       background: rgba(77,87,222,.5);
  }

.portfolio_wrapper .portfolio-img .overlay i {
  font-size: 6.25rem;
  color: var(--text-white);
  position: absolute;
  top: 25%;
  left: 25%;
  transform: translate(-50%,-50%);
  opacity: 0;
  visibility: hidden;
  transition: all .4s ease 0s;
}

.portfolio_wrapper .portfolio-img .overlay i{
  opacity: 1;
  visibility: visible;
  top: 50%;
  left: 50%;
}


  /* blog  */

  .blog_wrapper .card {
    position: relative;
    cursor: pointer;
  }

  .blog_wrapper .blog_details {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    background: rgba(34, 34, 34, .8);
    color: var(--text-white);
    transition: all .3s linear;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  
  .blog_wrapper .card:hover .blog_details {
    background: rgba(68, 88, 220, .85);
  }

  .blog_wrapper .blog_details .border_line {
    margin: 0.625rem 0;
    background: var(--bg-white);
    width: 100%;
    height: 0.125rem;
  }
 


  /* Contact  */

  .footer_wrapper .newsletter {
    width: 100%;
    height: 100%;
    background-image: url(./img/images/subscribe-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 9.375rem 0;
  }

  .footer_wrapper input {
    line-height: 3rem;
    padding: 0 1.5625rem;
    border: 0.125rem solid var(--bg-white);
    background: transparent;
    font-weight: 400;
    border-radius: 0.3125rem;
    color:var(--text-white);
  }
  
  .footer_wrapper .form-control:focus {
    color: var(--text-white);
    background-color:transparent;
    border-color: var(--bg-white);
    outline: 0;
    box-shadow: none;
  }

    .footer_wrapper .form-control::placeholder {
      color: var(--text-white);
    }
  


     /* footer  */

   .footer_wrapper .footer-logo img {
    max-width: 12.5rem;
    height: auto;
   }

   .footer_wrapper .social-icons li {
    margin: 0.375rem;
   }

   
   .footer_wrapper .social-icons li a {
    line-height: 1.875rem;
    font-size: 1.5625rem;
    display: inline-block;
    color: var(--text-black);
    margin: 0 0.625rem;
   }

      
   .footer_wrapper .social-icons li a:hover {
    color: var(--primary-color);
   }

    .footer_wrapper .footer-text {
      font-size: 0.6875rem;
      line-height: 1.25rem;
      font-weight: 600;
    }

    .footer_wrapper .footer-text a {
      color: var(--primary-color);
    }