@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

body,
html {
    margin: 0;
    padding: 0;
}

body {
    font-size: 16px;
    line-height: 23px;
    color: #28282B;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}


.main {
    width: 100%;
    overflow-x: hidden !important;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}

input,
input:focus,
input:hover,
button,
button:hover,
button:focus {
    outline: none;
}

p {
    line-height: 27px;
    text-align: justify;
}

p:last-child {
    margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6, p{
    font-family: 'Montserrat', sans-serif !important;
}

h1, h2, h3, h4{
    font-weight: 600;
}
header{
    background: linear-gradient(45deg, #25aae1, #0e76bc);
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid #25aae1;
    transition: all 300ms linear;
    position: relative;
    font-family: 'Dosis', sans-serif;
}
header::before{
    content: "";
    position: absolute;
    background: linear-gradient(to right, #fcfeff, #24aae1, #0e76bc);
    height: 2px;
    left: 0;
    right: 0;
    top: 0;
    animation: textclip 7s linear infinite;
}
.logo-image {
    width: 250px;
}
.slider-banner .carousel-control-next, .slider-banner .carousel-control-prev{
    background-color: transparent;
    border: none;
}
header.sticky-header {
    position: fixed;
    width: 100%;
    z-index: 2;
    background: #f4fbfe;
}
header.sticky-header .logo-image {
    width: 200px;
}
.main-nav   .navbar-nav .nav-link {
    color: #ffffff;
    padding-left: 12px;
    padding-right: 12px;
    transition: all 300ms linear;
}
.main-nav.sticky-header   .navbar-nav .nav-link{
    color: #176295;
}
.main-nav .navbar-nav .nav-link:hover {
    color: #0ab2f7;
    transform: translateY(3px);
}
.main-nav .navbar-nav .active>.nav-link{
    color: #0098ff;
}

.slider-banner .carousel-item img{
    max-height: 530px;
}
.dblue{
    color: #1b699d;
}
.our-brands img {
    padding: 25px;
    box-shadow: 0px 15px 10px -15px #8a9ea7;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #f3f3f3;
}
.bg-01{
    background-image: url(../images/bg-01.jpg);
    background-size: cover;
    box-shadow: inset 0 0 0 1000px rgb(255 255 255 / 95%);
}
footer {
    background: #0d68a3;
    padding: 20px 0;
    color: rgb(255 255 255 / 85%);
    font-size: 14px;
    letter-spacing: 1px;
}
footer a{
    color: rgb(255 255 255 / 85%);
    transition: all 300ms linear;
}
footer a:hover{
    color: #25aae1;
}
#scroll-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    color: #25aae1;
    z-index: 5;
}
@keyframes textclip {
    from {
        background-position: -500px 0;
    }

    to {
        background-position: 500px 0;
    }
}
.navbar-brand{
    position: relative;
}
.logo-image{
    position: relative;
    z-index: 1;
}

.navbar-brand::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -20px;
    right: -20px;
    bottom: -8px;
    background: #ffffff;
    border-radius: 4px;
    transform: skewX(163deg);
    box-shadow: 0px 15px 10px 15px #1c89c1;
}
 
.main-nav.sticky-header  .navbar-brand::before{
    box-shadow: none;
}

 .slider-banner{
     overflow: hidden;
     position: relative;
 }
 #banner-logos {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
    background: url("../images/logo-slider.png") repeat-x;
    height: 74px;
    width: 5076px;
    animation: slide 60s linear infinite;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(1px);
    background-size: 25%;
    background-position: center;
  }
  
  @keyframes slide{
    0% {
        transform: translate3d(-1692px, 0, 0);
    
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
  }

  .content-block  h3{
      font-size: 1.5rem;
  }
  .custom-list-01 li{
    position: relative;
    list-style: none;
    margin-bottom: 10px;
    display: flex;
    color: #114a70;
    padding: 15px 15px 15px 55px;
    background: #fff;
    border-radius: 50px;
    border: 1px solid #eaf8ff;
    box-shadow: inset 0 -0.6em 1em -0.35em rgb(0 0 0 / 5%), inset 0 0.6em 2em -0.3em rgb(255 255 255 / 3%), inset 0 0 0em 0.05em rgb(255 255 255 / 5%);
  }
  
  .custom-list-01 li::before{
      content: "\f2f8";
      font-family:'Font Awesome 6 Pro';
      position: absolute;
      left: 30px;
      color: #25aae1;
  }
  .inner-banner{
    position: relative;
  }
  .inner-banner::before{
    content: "";
    inset: 0;
    background-color: rgb(27 105 157 / 30%);
    position: absolute;
  }
  .inner-banner #banner-logos{
    height: 60px;
    background-size: 18%;
    background-position: center;
    bottom: 5px;
    top: auto;
    transform: none;
  }
  .text-blue{
    color: #25aae1
  }
  .head-style {
    color: #010101;
    position: relative;
    padding-left: 30px;
}
.head-style::before{
    background: linear-gradient(0deg, #0e76bc, #08ddd4);
    color: #0e76bc;
    position: absolute;
    left: 0;
    content: "\f2f8";
    font-family: 'Font Awesome 6 Pro';
    font-size: 20px;
    font-weight: 400;
    top: 2px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.banner-heading::after{
    content: attr(data-head);
    position: absolute;
    left: 0;
    right: 0;
    color: #fff;
    font-size: 30px;
    text-align: center;
    top: 30%;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
}
.contact-detail ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact-detail li{
    position: relative;
    margin-bottom: 15px;
    letter-spacing: .5px;
}
.contact-detail li a{
    padding-left: 30px;
}
.contact-detail li::before{
    content: "\f64f ";
    position: absolute;
    font-family:'Font Awesome 6 Pro';
}
.contact-detail li:nth-child(2)::before{
    content: "\f095";
}
.contact-detail li:nth-child(3)::before{
    content: "\f0e0";
}
.contact-detail li:nth-child(4)::before{
    content: "\f3c5";
}


.contact-detail {
    background: #fff;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: 0px 10px 30px 0px rgb(232 248 255);
    border: 1px solid #ddf5ff;
}
.contact-detail li a, .contact-detail li::before {
    color: #25aae1;
}
.block-style-01{
    border: 1px solid #f5e0e2;
    border-radius: 12px;
    box-shadow: 0px 10px 30px 0px rgb(37 170 225 / 8%);
    background: linear-gradient(2deg, rgb(238 42 59 / 6%), rgb(255 255 255 / 70%));
}
.box-02 h4{
    margin: 15px 0;
    color: #ee2a3b;
    font-weight: 500;
    font-size: 22px;
}
.text-red{
    color: #ee2a3b;
}
.text-yellow{
    color: #cba521;
}
.text-green{
    color: #0b9444;
}
.bg-02{
    background: url(../images/infab/bg-01.jpg) no-repeat center center;
    background-size: cover;
    box-shadow: inset 0 0 0 1000px rgb(0 0 0 / 65%);
    background-attachment: fixed;
}
.box03 {
    background: #f7f7f7;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0px 15px 10px -15px #1e4862;
    border: 1px solid #ededed;
}
.box03 img{
    border-radius: 12px;
    margin-bottom: 20px;
}
.gallery-01 img{
    height: 125px;
    object-fit: cover;
    object-position: center;
    width: 100%;
    border-radius: 6px;
}
.key-features.custom-list-01{
    display: flex;
    flex-wrap: wrap;
    gap: 0 5px;
}
/* .key-features.custom-list-01 li::before{
    content: "\f336";
    font-weight: 600;
} */
.key-features.custom-list-01 li, .key-features.custom-list-01 li::before{
    color: #0b9444;
}
.key-features.custom-list-01 li{
    border: 1px solid hsl(145deg 32% 85% / 50%);
    padding: 15px 20px 15px 52px;
    min-width: 49%;
    margin: 5px 0;
}
 


.custom-list-02{
    padding: 0;
    list-style: none;
}
.custom-list-02 li{
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    text-align: justify;
}
.custom-list-02 li::before{
    font-weight: 400;
    left: 0;
    position: absolute;
    color: #25aae1;
    content: "\f2f8";
    font-family: 'Font Awesome 6 Pro';
}
.bg-lgrey{
    background: #f7f7f7;
}
.box-04 {
    padding: 25px;
    border-radius: 8px;
    background: #f7f7f7;
    margin-bottom: 20px;
}
footer p{
    line-height: 1.25;
}

/* ------------------- */

.fw-8{
    font-weight: 800;
}