:root {
    --blue: #067bc2;
  }
body{
    box-sizing:border-box;
   
}
   @font-face {
    font-family: 'Asap';
    font-style: normal;
    font-weight: 400; 
    font-display: swap;
    src: local("Asap Regular"), url("dit/fonts1/Asap-Regular.woff2") format("woff2");
}

@font-face {
    font-family: 'Asap';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local("Asap Medium"), url("dit/fonts1/Asap-Medium.woff2") format("woff2");
}

@font-face {
    font-family: 'Asap';
    font-style: normal;
    font-weight: 600; 
    font-display: swap;
    src: local("Asap SemiBold"), url("dit/fonts1/Asap-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: 'Asap';
    font-style: normal;
    font-weight: 700; 
    font-display: swap;
    src: local("Asap Bold"), url("dit/fonts1/Asap-Bold.woff2") format("woff2");
}

body {
    font-family: 'Asap', sans-serif !important;
}
.navbar a{
    font-weight:500 
}
.navbar-light .navbar-nav .nav-link{
    color:var(--blue);
    font-weight: 600;
}
.navbar-light .navbar-nav .nav-link:hover{
    color: #e05a06;
}
.dropdown-item:active{background-color: #e9ecef;}
.dropdown-menu a{color: var(--blue)}
.dropdown-menu a:hover{color: #e05a06}
.dropdown-menu .dropend{padding: 3px 0;}
.dropend:not(:nth-last-of-type(1)){border-bottom: 1px solid #aee0ff;}
.dropend2:not(:nth-last-of-type(1)){border-bottom: 1px solid #aee0ff;}
.header-button{
    background-color:  var(--blue);
    color: white;
    animation-name: example;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes example {
    from {background-color: #0066a5;}
    to {background-color: #b84600;}
}
.header-button:hover{
    background-color: #e05a06;
}
a{
    text-decoration:none;
}
.breadcrumb{border-bottom:1px solid #92c6eb;}
.breadcrumb li a{
    color:  var(--blue);
    font-size: 15px;
}
.breadcrumb-item+.breadcrumb-item::before{
    color:  var(--blue);
}
#sc2rhR a img{
    display: none;
}
.sub-head2{
    font-size: 35px;
    color:  var(--blue);
}
.bg-img{
    min-height:600px 
}
.f0{
    font-size:26px;
    font-weight:400 
}
.f1{
    font-size:32px;
    font-weight:400 
}
.f2{
    font-size:40px;
    font-weight:500 
}
.f3{
    font-size:23px 
}
.f4{
    font-size:16px;
    font-weight:300 
}
.f5{
    font-size:30px;
    font-weight:600;
    color: var(--blue) 
}
.f6{
    font-size:25px;
    font-weight:600;
    color: var(--blue)
}
.f7{
    font-size:45px;
    font-weight:600;
    color: var(--blue)
}
.f8{
    font-size:18px 
}
.fc1{
    color: var(--blue);
    font-weight:500 
}
.fc2{
    color:#9a3e04 
}
.border-b{border-bottom: 2px solid  var(--blue);}
.btn-outline-2{
    color: var(--blue);
    border-color: var(--blue) 
}
.btn-outline-2:hover{
    background-color: var(--blue);
    color: white;
}
.button{
    color: #0064a1;
    border-color: var(--blue);
    background-color: #eef8ff;
    text-align:center;
    font-size:20px;
    padding:10px 20px;
    transition:all .5s;
    cursor:pointer 
}
.button span{
    cursor:pointer;
    display:inline-block;
    position:relative;
    transition:.5s 
}
.button span:after{
    content:'\00bb';
    position:absolute;
    opacity:0;
    top:0;
    right:-40px 
}
.button:hover span{
    padding-right:25px;
    color:#fff 
}
.button:hover{
    background-color: var(--blue);
    border-color: var(--blue)
}
.button:hover span:after{
    opacity:1;
    right:0 
}
#myBtn{
    display:none;
    position:fixed;
    bottom:90px;
    right:23px;
    z-index:99;
    border:none;
    outline:0;
    background-color:  var(--blue);
    color:#fff;
    cursor:pointer;
    padding:15px 22px;
    border-radius:50%;
    font-size:18px 
}
#myBtn:hover{
    background-color: #e05a06; 
}
.btn:focus{
    box-shadow:none 
}
.btn:hover{
    color:#fff 
}
.btn-2{
    background-color: var(--blue);
    color:#fff;
    transition: .9s;
}
.btn-2:hover{
    background-color:#fff;
    color: var(--blue);
    border:1px solid  var(--blue) 
}
.button a{
    color:#000 
}
.products .card{
    background-color:#eef8ff;
    border: 1px solid #77c2ff;
    transition: .9s;
}
.products .card:hover{
    transform: translateY(-10px);
}
.product_section .card-body h3{
    font-size: 22px;
    font-weight: bold;
    color:  var(--blue);
}
.product_section .products .card-text{
    padding: 0 15px;
    text-align: center;
}
.customer_review{
    background-size: cover;
    background-color: rgb(218, 218, 218);
    min-height:600px;
    box-sizing:border-box 
}
.banner .review1{
    background-color: transparent;
    border:none;
}
.review1{
    background-color:#fff;
    border: 1px solid #0e68a0;
    border-radius: 10px;
}
.owl-theme .owl-dots .owl-dot span{
    background-color: #3d3d3d;
}
.review2{
    min-height: 274px;
}
.number_section{
    border-top: 1px solid  var(--blue);
    background-color: #ececec;
}
.star{
    color: var(--blue) 
}
.footer{
    border-top: 2px solid #004f80;
    background-color: #012a4a;
}
.footer-bottom{
    background-color: #00497e;
}
.footer-bottom p{
    color:#dfdfdf;
}
.footer .footer-menu {
    color:#eeeeee;
    padding-bottom: 5px;
    font-size: 19px;
}
.footer ul li a{
    color: #bfbfbf;
    transition: ease .5s;
    font-size: 15px;
    padding: 5px;
}
.footer ul li a:hover{
    color:#ffffff;
    transition: ease .5s;
    border-radius: 5px;
    background-color: rgba(255, 234, 224, 0.192);
}
.footer .border-l{
    border-left:1px solid #003e64;
}
.footer .border-r{
    border-right:1px solid #003e64;
}
.list-unstyled{
    list-style-type:none 
}
.bg-2{
    background-color:#004f80 
}
.product-intro ul{
    list-style-type:none 
}
.footer-bottom a{
    color: #ffceaf;
    text-decoration: underline;
}
.footer-bottom a:hover{
    text-decoration: underline;
    color: #ffffff;
}
.bg-3{
    background-color:#f5f5f5 
}
.blogs a:hover{
    color: var(--blue) 
}
.bg-footer{
    background-color: var(--blue);
}
/*cookie-bar css*/
#cookie-bar {
    display: block;
    direction: ltr;
    color: #fff;
    min-height: 30px;
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 6px 20px 4px;
    background-color:  var(--blue);
    text-align: center;
    bottom: 0 
}
button#Cookie {
    margin: 0 20px;
    line-height: 20px;
    background: #fff;
    border: 1px solid #fff;
    color: #283a44;
    padding: 4px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: .2s 
}
button#Cookie:hover {
    background: var(--blue);
    color:#fff;
}
/*cookie-bar css end*/
.owl-theme button.owl-next span{
    position: absolute;
    right: -20px;
    top: 13px;
    font-size: 25px;
    color:  var(--blue);
}
.owl-theme button.owl-prev span{
    position: absolute;
    left: -15px;
    top: 13px;
    font-size: 25px;
    color:  var(--blue);
}
.owl-theme button span:hover{
    color: white;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background-color:  var(--blue);
}
.blog-card .info .date{font-size:18px; font-weight:500;}
.blog-card .info .blog-read{font-size:18px; font-weight:500}
.blog-card .card-title{font-weight:600; font-size: 20px;line-height:1.5}
.blog-card:hover{background-color:#fff!important; transition:.5s}
figure {
    overflow: hidden;
}
.zoomIn img{
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
border-radius: 5px;
}
.zoomIn:hover img {
    -webkit-transform: rotate(2deg) scale(0.9);
    transform: rotate(2deg) scale(0.9);
}
/* text-flip */
.sentence{
    color: #222;
    font-size: 57px;
    font-weight:600;
    text-align: center;
}
/*Vertical Flip*/
.verticalFlip{
    display: inline;
}
.verticalFlip span{
    animation: vertical 10s linear infinite 0s;
    -ms-animation: vertical 10s linear infinite 0s;
    -webkit-animation: vertical 10s linear infinite 0s;
    color:  var(--blue);
    opacity: 0;
    overflow: hidden;
    position: absolute;
}
.verticalFlip span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
    color: #9a3e04;
}
.verticalFlip span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.verticalFlip span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
    color: #9a3e04;
}
/*Vertical Flip Animation*/
@-moz-keyframes vertical{
    0% {
        opacity: 0;
   }
    5% {
        opacity: 0;
        -moz-transform: rotateX(180deg);
   }
    10% {
        opacity: 1;
        -moz-transform: translateY(0px);
   }
    25% {
        opacity: 1;
        -moz-transform: translateY(0px);
   }
    30% {
        opacity: 0;
        -moz-transform: translateY(0px);
   }
    80% {
        opacity: 0;
   }
    100% {
        opacity: 0;
   }
}
@-webkit-keyframes vertical{
    0% {
        opacity: 0;
   }
    5% {
        opacity: 0;
        -webkit-transform: rotateX(180deg);
   }
    10% {
        opacity: 1;
        -webkit-transform: translateY(0px);
   }
    25% {
        opacity: 1;
        -webkit-transform: translateY(0px);
   }
    30% {
        opacity: 0;
        -webkit-transform: translateY(0px);
   }
    80% {
        opacity: 0;
   }
    100% {
        opacity: 0;
   }
}
@-ms-keyframes vertical{
    0% {
        opacity: 0;
   }
    5% {
        opacity: 0;
        -ms-transform: rotateX(180deg);
   }
    10% {
        opacity: 1;
        -ms-transform: translateY(0px);
   }
    25% {
        opacity: 1;
        -ms-transform: translateY(0px);
   }
    30% {
        opacity: 0;
        -ms-transform: translateY(0px);
   }
    80% {
        opacity: 0;
   }
    100% {
        opacity: 0;
   }
}
.text1{
    display: inline-block;
    text-indent: 120px;
}
.banner{
    background-image: linear-gradient(to bottom, #ffffff , #8fd4ff);
}
/* SEARCH */
.search-box {
    background: #e8f6ff;
    height: 40px;
    border-radius: 5px;
    padding: 10px;
}
.search-box:hover > .search-text{
    width: 130px;
    padding: 0 6px;
}
.search-box:hover > .search-btn{
    background: transparent;
    color:#e05a06 
}
.search-box:focus-within > .search-text{
    width: 130px;
    padding: 0 6px;
}
.search-btn {
    float: right;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
    cursor: pointer;
    text-decoration: none;
    border: none;
}
.search-btn > i {
    font-size: 30px;
}
.fa-magnifying-glass:before, .fa-search:before {
    content: "\f002";
    animation-name: example1;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes example1 {
    from {color:  var(--blue);}
    to {color: #e05a06;}
}
.search-text {
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    font-size: 16px;
    font-weight: normal;
    transition: 0.4s;
    line-height: 40px;
    width: 0;
}
.count-area i {
    font-size: 45px;
}
/* Custom search */
.gsc-adBlock{
    display: none !important;
}
.gsc-results .gsc-cursor-box{
    text-align: center;
    background-color: aliceblue !important;
}
.gsc-results .gsc-cursor{
    font-size: 22px;
    display: inline-block !important;
    margin: 35px;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page{
    padding: 0 15px;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page:hover {
    text-decoration: none !important;
}
.gs-result .gs-title *, .gsc-cursor-page, .gs-spelling a {
    font-weight: 600 !important;
}
.gsc-search-button{
    background-color:  var(--blue) !important;
    border-color:  var(--blue) !important;
}
input#gsc-i-id1.gsc-input{
    background: none !important;
}
/* media query */
@media (min-width: 992px) {
    .navbar .nav-item .hello{ display: none; left: 15%;}
    .navbar .nav-item:hover .hello{ display: block !important;border: none;}
    .navbar .nav-item .hello{ margin-top:0; }

    .navbar .nav-item .hello1{ display: none;left:100%;top: 0%;}
    .navbar .nav-item .dropend:hover .hello1{ display: block !important;border: none;}
    
    .navbar .nav-item .hello2{ display: none;left:100%;top: 0%;}
    .navbar .nav-item .dropend:hover .hello2{ display: block !important;border: none;}

    .navbar .nav-item .hello3{ display: none;right:-100%;top: 0%;}
    .navbar .nav-item .dropend:hover .hello3{ display: block !important;border: none;}
}
@media only screen and (max-width:600px){
    .client-p{
        padding:40px 0 0 0!important 
   }
    .banner{
        margin-bottom:-20px 
   }
   .text1{
       text-indent: 80px;
   }
   .banner-image{
       margin: 50px auto;
   }
    .brand-contact{
        padding-bottom:30px 
   }
    .num{
        padding-top:30px 
   }
    .f2,.number_section span{
        font-size:35px 
   }
    p{
        text-align: justify;
   }
   .search-btn{
    position: absolute;
    left: 40%;
    padding: 0px;
   }
   #footer{
    text-align: center;
   }
}
@media only screen and (max-width:900px){
    .brand-contact{
        text-align:center;
        padding-bottom:30px 
   }
    .brand-contact1{
        text-align:left 
   }
    .num{
        padding-top:30px 
   }
    .count-area i {
        font-size: 48px;
   }
}
@media only screen and (min-width:992px) and (max-width:1068px){
    .blog-res{
        box-sizing:border-box;
        padding:0;
        margin:0 
   }
}
@media only screen and (min-width:601px) and (max-width:991px){
   .banner-image{
    margin: 50px auto;
}
}
@media only screen and (max-width:1199px){
    .owl-theme button.owl-next span{
        top:6px;
   }
    .owl-theme button.owl-prev span{
        top:6px;
   }
}
@media only screen and (max-width:992px){
    .owl-nav{
        display:none;
   }
}
@media only screen and (max-width:768px){
    .product-intro{
        text-align: left;
   }
}
footer .social-links a{
    color: white;
    font-size: 25px;
    padding: 10px;
}
footer p{color: #cecece;}
.chat-button-2rhR img {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
.number_section img{
    width:35px;
    height:38px;
}

#discount-popup {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Popup box */
.popup-box {
      background: #fff;
      max-width: 500px;
      width: 90%;
      padding: 30px 20px;
      border-radius: 20px;
      text-align: center;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      position: relative;
      animation: fadeIn 0.3s ease-in-out;
      border-top: 4px solid red;
    }

    /* Close button */
    .close-popup {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 24px;
      color: #333;
      cursor: pointer;
    }

    /* Coupon box */
    .coupon-box {
      margin: 15px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }

    #coupon-code {
      background: #f4f4f4;
      padding: 10px 15px;
      border-radius: 5px;
      font-weight: bold;
    }

    .copy-btn {
      background: #007BFF;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 5px;
      cursor: pointer;
    }

    .visit-btn {
      display: inline-block;
      margin-top: 15px;
      background: #28a745;
      color: #fff;
      padding: 10px 20px;
      text-decoration: none;
      border-radius: 5px;
    }

    .note {
      font-size: 13px;
      color: #555;
      margin-top: 10px;
    }

    #copy-message {
      display: none;
      color: green;
      font-weight: 500;
      margin-top: 10px;
    }

    /* Optional animation */
    @keyframes fadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
#navbarNavDropdown .nav-link {
  color: #1e7cdd;
  font-weight: 500;
}

#navbarNavDropdown .nav-link:hover,
#navbarNavDropdown .nav-link:focus {
  color: var(--fc2);
}
#megamenu-tab {
  border: none;
  background-color: rgb(209, 234, 255);
  border-radius: 25px !important;
}

#mega-content .nav-link.active,
#mega-content .nav-link:hover,
#mega-content .show>.nav-link {
  color: #fff;
  background-color: #1e7cdd;
  border: none;
  border-radius: 25px !important;
}

#mega-content .nav-link {
  border: none;
  color: black;
  border-radius: 25px !important;
  padding: 15px 5px;
  font-size: 14px;
}

#mega-content .nav-link:hover {
  border: none
}

#mega-content .tools-listing a {
  text-decoration: none;
  display: inline-block;
  padding: 5px;
  font-size: 15px;
  color: #4d4d4d;
  font-weight: 600;
  /* color: #1e7cdd; */
  transition: all .3s;
}
#mega-content .tools-listing-right a{
  text-decoration: none;
  display: inline-block;
  padding: 5px;
  font-size: 15px;
  color: #f5f5f5;
  font-weight: 600;
  transition: all .3s;
}

#mega-content .tools-listing li:hover a {
  padding-left: 10px;
  /* color: #00478f; */
  color: #1e7cdd;
  font-weight: 600;
}
#mega-content .tools-listing-right li:hover a {
  padding-left: 10px;
  font-weight: 500;
}

.mega-border-r {
  border-right: 1px solid #9acdff;
}

#mega-content .tools-listing li a::before {
  font: var(--fa-font-solid);
  content: "\f08e";
  font-size: 12px;
  padding-right: 10px;
}

#mega-content .tools-listing-right li a::before {
  font: var(--fa-font-solid);
  content: "\f08e";
  font-size: 12px;
  padding-right: 10px;
}

.megamenu-sub-heading {
  color: #1e7cdd;
  font-weight: 500;
  background-color: #f0f0f0;
  text-align: center;
  font-size: 18px;
  border-bottom: 2px solid #1e7cdd;
}
#mega-content .nav-link.active,
#mega-content .nav-link:hover,
#mega-content .show>.nav-link {
  color: #fff;
  background-color: #1e7cdd;
  border: none;
  border-radius: 25px !important;
}

#mega-content .nav-link {
  border: none;
  color: black;
  border-radius: 0px;
  padding: 15px 5px;
  font-size: 14px;
}

#mega-content .nav-link:hover {
  border: none
}
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute !important;
    }
    .dropdown-mega:hover .dropdown-menu {
    display: none;
}
}
.dropdown-menu.show {
    display: block !important;
}
.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: 0;
    margin-top: var(--bs-dropdown-spacer);
}
.bg-dw-cl{
    background: #f7fbff;
}