*{outline:none;}
html{scroll-behavior: smooth;}
body{font-family:'Outfit', sans-serif !important; background:rgba(var(--bs-light-rgb))}
a{text-decoration:none; transition:300ms}
a:hover{text-decoration:underline;}

.font-teko{font-family: "Teko", sans-serif;}

.btn{padding:8px 30px}

.btn,
.form-control,
.form-select,
.form-check-input{box-shadow:none !important; }

.card, .card-img{border-radius:0; border:none;}

.fs-12{font-size:12px;}
.fs-14{font-size:14px;}
.fw-semibold{font-weight:500 !important;}

#header .nav li a{color:rgba(var(--bs-dark-rgb));}
#header .nav li:before{content:"•"; margin-right: 0.5rem}
#header .nav li:first-child:before{content:unset; margin-right:unset}

.navbar-toggler .icon-bar{background-color:rgba(var(--bs-dark-rgb)); transform:rotate(0deg) translate(0px, 0px); transition:300ms;}
.navbar-toggler .icon-bar{display:block; width:22px; height:2px; border-radius:1px;}
.navbar-toggler .icon-bar+.icon-bar{margin-top:4px;}
.navbar-toggler .icon-bar:nth-child(2){width:16px; transition:300ms;}
.navbar-toggler:hover>.icon-bar:nth-child(2){width:22px; transition:300ms;}
.navbar-toggler:active>.icon-bar:nth-child(2){width:22px; transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1){transform:rotate(45deg) translate(5px, 4px); transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2){opacity:0; transition:ease all .2s;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3){transform:rotate(-45deg) translate(4px, -4px); transition:300ms;}

#search .dropdown-toggle::after{content:unset !important;}

.dropdown-menu{border-radius:0; border:0; border-top:2px solid rgba(var(--bs-primary-rgb));  padding:5px; font-size:14px}

#mainMenu{padding:0}
#mainMenu .nav-link{color:#fff }
#mainMenu img{filter: brightness(0) invert(1);}
@media (min-width:768px){

    #mainMenu{padding:0.5rem 0}
    #mainMenu .nav-link{ color:rgba(var(--bs-dark-rgb));}
    .dark #mainMenu #navbarNav{background: transparent !important; }
    #mainMenu .navbar-nav > li{margin-right:10px}
    #mainMenu .navbar-nav > li:last-child{margin:0}
}

#welcomeArea #image{position:relative;}
#welcomeArea #image #right{position: absolute; bottom:5%; right:5%; }
#welcomeArea #image #left{position: absolute; top:10%; left:10%; }
#welcomeArea #circle {position: relative; width: 140px; height: 140px; border-radius: 100vmax; display: flex; align-items: center; justify-content: center; background: #fff; }
#welcomeArea #circle h2{position: absolute;}
#welcomeArea #circle .text{position:absolute; width:100%; height:100%; animation:textRotation 8s linear infinite;}
#welcomeArea #circle .text span{position:absolute; left:50%; font-size:11px; transform-origin:0 70px; }

@keyframes textRotation {
    to {
        transform: rotate(360deg);
    }
}

#categoryThumbnailArea .card-body{position:relative}
#categoryThumbnailArea .card-body .overlayImage{position: absolute; top: 30px; bottom: 30px; right:30px; width: 50%; transition:1000ms  }
#categoryThumbnailArea .card:hover .overlayImage{right:25%; }

#certificateArea a{opacity: 0.5}
#certificateArea a:hover{opacity:1}

#shortLinkArea{margin-top: 1px;}

.custom-hover-row{display: flex; flex-wrap: nowrap; gap:1px; }
.custom-hover-row .hover-col{flex: 0 0 20%; max-width: 20%; height: 600px; transition:300ms; overflow: hidden;}
.custom-hover-row:hover .hover-col{flex: 0 0 10%; max-width: 10%;}
.custom-hover-row .hover-col:hover {flex: 0 0 60%; max-width: 60%;}
.custom-hover-row .card img{opacity: 0.2; transition: 300ms}
.custom-hover-row .hover-col:hover .card img{opacity:0.75}
.custom-hover-row .card .card-img-overlay{writing-mode: sideways-lr; /*transform: rotate(-90deg);*/ }

#footer img{filter: brightness(0) invert(1);}
#footer a:hover{opacity:0.9}


#pageBanner img{height: 300px !important;}
#pageBanner .card-img-overlay{
    background: linear-gradient(0deg,rgb(244, 244, 246) 1%, rgba(255, 255, 255, 0) 100%);
}

#listingArea .flex-column .row:nth-child(2n){flex-direction: row-reverse;}
#listingArea ul li{padding-right:0.5rem; border-right: 1px solid rgba(var(--bs-dark-rgb)); width:9ch; opacity: 0.7;transition: 300ms;}
#listingArea ul li:hover{opacity:1;}
#listingArea ul li:last-child{padding-right:0; border-right:none; }


body.dark{background:#000 !important; color:#fff;}
.dark #header img{filter: brightness(0) invert(1);}
.dark .text-dark,
.dark #header a{color:#fff !important;}
.dark #navbarNav,
.dark #navbarNav .dropdown-menu{background:#242424 !important;}
.dark #navbarNav .dropdown-menu .dropdown-item:hover{background: rgba(255,255,255,0.1) !important}
.dark .navbar-toggler .icon-bar{background-color:#fff;}
.dark #mainMenu a{color: #fff !important; }

.dark #welcomeArea .col-lg-6:last-child{border-color:rgba(255,255,255,0.2);}
.dark #welcomeArea #circle span{color: #000}

.dark #categoryThumbnailArea .bg-white{background: #242424 !important}
.dark #categoryThumbnailArea .card{color:#fff !important}

.dark #certificateArea a{filter: brightness(0) invert(1);}

.dark #oemCta .text-bg-primary,
.dark #shortLinkArea .text-bg-primary{background: #242424 !important}

.dark #processArea{background: rgba(255,255,255,0.1) !important;}

.dark #footer{background: #242424 !important}

.dark #contentArea .card{background: #242424 !important; color: #fff;}

.dark #compliances .card.rounded-4.h-100 img{filter: brightness(0) invert(1);}

.dark #pageBanner .card-img-overlay {
    background: linear-gradient(0deg,rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
}


.dark #listingArea ul li img{filter: brightness(0) invert(1);}

@media (min-width:1400px){
    .container-fluid{padding-left:8% !important; padding-right:8% !important;}
}

@media (min-width:992px) {
    #welcomeArea .col-lg-6:last-child{border-left:1px solid #000; padding:40px 0 40px 40px;}
}

@media (min-width:768px){
    .container-fluid{padding-left:60px; padding-right:60px;}
    #pageBanner img{height: 400px !important;}
}



@media (min-width:1200px) and (max-width:1400px){}
@media (min-width:992px) and (max-width:1199px){}
@media (min-width:768px) and (max-width:991px){}
@media (min-width:576px) and (max-width:767px){}

@media (min-width:0px) and (max-width:767px){
    .custom-hover-row{display: flex; flex-direction: column; flex-wrap:wrap; gap:1px; }
    .custom-hover-row .hover-col{flex:unset; max-width:100%; height: 100px; transition:300ms; overflow: hidden;}
    .custom-hover-row:hover .hover-col{flex:unset; max-width:unset;}
    .custom-hover-row .hover-col:hover {flex:unset; max-width:unset;}
    .custom-hover-row .card img{opacity: 0.50;}
    .custom-hover-row .card .card-img-overlay{ transform:unset; writing-mode: unset; }
    
}

@media (min-width:0px) and (max-width:575px){

    #welcomeArea #image #right{bottom:0%; right:0%;}
    #welcomeArea #image #right h4{font-size:18px;}

    #welcomeArea #image #left{position: absolute; top:0%; left:0%; }
    #welcomeArea #circle {position: relative; width: 120px; height: 120px; }
    #welcomeArea #circle h2{position: absolute; font-size:40px !important;}
    #welcomeArea #circle .text span{font-size:10px; transform-origin:0 60px; }

}