@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face{
    src: url(../font/vonique_43/Vonique\ 43_D.otf);
    font-family: "Vonique";
}

*{
    font-family: "Montserrat", sans-serif;
    margin: 0;padding: 0;
}
:root{
    --thm-font: 'Montserrat', sans-serif;
     --thm-font2: 'Vonique', sans-serif;
    --thm-gray: #808080;
    --thm-black: #252628;
    --thm-color: #fff;
    --thm-base: #E42237;
    --thm-base-light: #E4223730; 
    --thm-light: #04304920;
    --thm-footer: #e2e2e2;
    --thm-base-rgb: 237, 32, 43;
    --thm-primary: #0b2142;
    --thm-primary-light: #0b214230;
    --thm-primary-rgb: 231, 189, 26; 
    --thm-test-light: #F8F5EE;
}
h1,
h2,
h3,
h4,
h5,
h6,
p{ margin: 0; }
ul{ margin: 0; padding: 0; }
li{ list-style: none; }
a{ color: var(--thm-black); text-decoration: none; font-weight: 500; transition: 0.5s;}

h2{ font-size: 32px; font-weight: 600;} 
h3{ font-size: 24px; font-weight: 600;} 
h4{ font-size: 22px; font-weight: 600;} 
h5{ font-size: 20px; font-weight: 500;} 
h6{ font-size: 18px;}

.mb-80{ margin-bottom: 80px;  }
.mt-80{ margin-top: 80px;}
a:hover { color: var(--thm-base);}
.theme-color-black{ background-color: #1F2021;}
.container{ max-width: 1350px;}
.description{ font-size: 16px; font-weight: 500; margin-bottom: 20px; color: var(--thm-gray);}

.content-box h6{ font-family: var(--thm-font2); color: var(--thm-base); font-weight: 600; margin-bottom: 6px;}
.content-box h2{ color: var(--thm-black); font-size: 30px; font-weight: 600; margin-bottom: 8px;}
.content-box.content-box2{ /* width: 80%; margin: auto; */ margin-bottom: 40px;}
.btn-one{ display: inline-block; padding: 5px 20px;background-color: var(--thm-base); color: var(--thm-color); font-weight: 500; border-radius: 6px; border: 2px solid var(--thm-base); transition: 0.5s;}
.btn-one:hover{ background-color: transparent; color: var(--thm-base); }
.btn-one.style2{ background-color: var(--thm-color); border: 2px solid var(--thm-color); color: var(--thm-black);}
.btn-one.style2:hover{ background-color: transparent; border: 2px solid var(--thm-black); color: var(--thm-black);}
.btn-one.style3:hover{ background-color: transparent; border: 2px solid var(--thm-color); color: var(--thm-color);}
.btn-one.style4{ background-color: var(--thm-color); border: 2px solid var(--thm-color); color: var(--thm-black);}
.btn-one.style4:hover{ background-color: transparent; color: var(--thm-color);}

header .top-header{ display: flex; gap: 20px; justify-content: end; align-items: center; color: var(--thm-color); padding: 8px 150px; background: linear-gradient( to right, #FFFFFF 30%, var(--thm-base) 40%, var(--thm-base) 100%);}
header .top-header a{ display: flex; gap: 5px; align-items: center; color: var( --thm-color); font-weight: 500; font-size: 14px; border-right: 1px solid #e2e2e250; padding-right: 15px;}
header .top-header a i{ font-size: 18px; font-weight: 300;}
header .top-header a:hover{ color: var(--thm-primary);}
header .top-header .social-media{ display: flex; gap: 15px; align-items: center}
header .top-header .social-media a i{  font-size: 16px; transition: 0.5s;}
header .top-header .social-media a:hover i{ color: var(--thm-primary);}

header .nav-bar{ display: flex; justify-content: space-between; padding: 6px 150px; align-items: center;}
header .nav-bar .logo-section a .logo-img{ max-width: 150px; margin-top: -40px;}
header .nav-bar .nav-menu{ display: flex; gap: 30px; align-items: center; }
header .nav-bar .nav-menu .menu{ display: flex; gap: 30px;}
header .nav-bar .nav-menu .menu li{ display: flex; gap: 4px; align-items: center;}
header .nav-bar .nav-menu .menu li a{ display: flex; gap: 5px; font-weight: 600; align-items: center; font-size: 15px; text-transform: uppercase;}
header .nav-bar .nav-menu .menu li:hover{ color: var(--thm-base);}
header .nav-bar .nav-menu .menu .active{ color: var(--thm-base);}
header .nav-bar .nav-menu .nav-toggle{ display: flex; gap: 10px; align-items: center;}

/* ==================== toogle bar ===================================== */
.ham { width: 60px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; display: none; margin: -10px;}
.hamRotate.active { transform: rotate(45deg);}
.hamRotate180.active { transform: rotate(180deg);}
.line { fill: none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke: #000; stroke-width: 5.0; stroke-linecap: round; }
.ham1 .top { stroke-dasharray: 40 139;}
.ham1 .bottom { stroke-dasharray: 40 180;}
.ham1.active .top { stroke-dashoffset: -98px;}
.ham1.active .bottom { stroke-dashoffset: -138px;}

.nav-bar .menu .drop-down{ position: relative; transition: 0.5s;}
.drop-down-menu{ position: absolute; width: 345px; top: 45px; padding: 0px 10px; border-radius: 8px; background-color: var(--thm-base); box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px; opacity: 0; z-index: -1; visibility: hidden; transition: 0.5s; overflow: hidden;}
.drop-down-menu li{ border-bottom: 1px solid #f3f3f330;}
.drop-down-menu li a{ padding: 10px; font-weight: 500 !important; color: var(--thm-color); display: block; width: 100%;}
.drop-down-menu li a i{ font-size: 12px; margin-left: -15px; visibility: hidden; transition: 0.4s;}
.drop-down-menu li a:hover i{ margin-left: 0px; visibility: visible;}
.nav-bar .menu .drop-down:hover .drop-down-menu{ opacity: 1; z-index: 8; top: 65px; visibility: visible;}
.drop-down-icon{ font-size: 14px;}

.sticky { position: fixed; top: 0; width: 100%; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; z-index: 9; background-color: var(--thm-color);}

.banner-section{ background-image: url(../imgs/banner2.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}
.banner-section .banner-container{ padding: 100px 0px;}
.banner-section .banner-container .content h5{ color: var(--thm-base); font-weight: 600; margin-bottom: 12px; border-bottom: 1px solid #FFFFFF40; padding-bottom: 4px; display: inline-block;}
.banner-section .banner-container .content h1{ font-size: 45px; font-weight: 500; font-family: var(--thm-font2); margin-bottom: 10px;}
.banner-section .banner-container .banner-silder img{ padding: 40px;} 
.banner-section .banner-container .content .description{ font-weight: 400;}
.banner-section .banner-container .content .btns-box{ display: flex; gap: 10px;}
.banner-section .banner-container .banner-prod{ position: relative;}
.banner-section .banner-container .banner-prod .banner-prod-img{ max-width: 90%;}
.banner-section .banner-container .banner-prod .line-shapes{ position: absolute; left: -14px; top: -10px; max-width: 95%; animation: rotate-shape 30s linear infinite;}
@keyframes rotate-shape{ to{ transform: rotate(360deg);}}

.hero-banner-section .banner {  position: relative;  border-bottom: 10px solid var(--thm-base);}
.hero-banner-section .banner::before{ position: absolute; content: ""; width: 100%; height: 100%; z-index: 1; background: linear-gradient(180deg, #00000070 30%, #00000070 100%);}
.hero-banner-section .banner .banner-video { width: 100%; height: 80vh; object-fit: cover; margin-bottom: -8px;}
.hero-banner-section .banner .content { display: inline-block; text-align: center; position: absolute; z-index: 5; bottom:-2px; left: 50%; transform: translateX(-50%); background-color: #ffffff20; padding: 20px 30px 30px; backdrop-filter: blur(10px); border-radius: 30px 30px 0px 0px;}
.hero-banner-section .banner .content h5{ color: var(--thm-color); font-weight: 600; margin-bottom: 20px; border-bottom: 1px solid #FFFFFF40; padding-bottom: 4px; display: inline-block;}
.hero-banner-section .banner .content h1{ font-size: 28px; font-weight: 500; font-family: var(--thm-font2); margin-bottom: 10px;}
.hero-banner-section .banner .content .description{ font-weight: 400;}
.hero-banner-section .banner .content .btns-box{ display: flex; gap: 10px; justify-content: center;}

.about-section{ background: linear-gradient(180deg, #FFFFFF 30%, #F8F5EE 100%); padding: 80px 0px;}
.about-section .content-box .highlight{ color: #000000; font-weight: 600; border-left: 5px solid var(--thm-base); padding-left: 15px; border-radius: 5px; margin-top: 8px;}
.about-section .content-box .points-ul li{ margin-bottom: 7px; list-style: inside;}
.about-section .content-box .points-ul ul h5{ font-weight: 600; margin-bottom: 5px;}
.about-section .content-box .points-ul ul li{ margin-left: 20px;}
.about-section .img-box{ position: relative; z-index: 2;}

/* .about-animationbolb {transition: 0.3s;}
.animation-bolb {position: absolute; width: 500px; height: 500px; z-index: -1; border-radius: 79% 41% 96% 30%/87% 53% 67% 31%;left: 10px;top: 0px;opacity: 1;}
.bolb-rotation {animation: AnimatedBlob 5s linear infinite;}
.animation-bolb.bolb-2{  border-radius: 79% 41% 96% 30%/87% 53% 67% 31%; } 
.bolb-1 {background: linear-gradient(136.79deg, var(--thm-base) 15.23%, var(--thm-base) 133.98%);}
.bolb-2 {background: linear-gradient(255.54deg, var(--thm-primary) -5.25%, var(--thm-primary) 80.35%);}
@keyframes AnimatedBlob {
  0% {border-radius: 16% 95% 45% 47%/23% 76% 41% 48%;}
  50% {border-radius: 70% 30% 30% 70%/60% 40% 60% 40%;}
  100% {border-radius: 16% 95% 45% 47%/23% 76% 41% 48%;}
} */
.about-section.about-page .iso{ max-width: 450px; float: left; margin-right: 25px; margin-bottom: 15px;}

.main-cta{ background-image: url(../imgs/page-header-bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 40px 0px;}
.main-cta .main-cta-container h2{ font-size: 22px;}
.main-cta .main-cta-container .description{ font-weight: 400;}

.funfact{ background: var(--thm-base); padding: 40px 0px;}
.funfact .funfact-content{ display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr);}
.funfact .funfact-content .funfact-items{ border: 1px solid #FFFFFF50; border-radius: 10px; padding: 12px; transition: 0.5s; display: flex; gap: 14px; align-items: center;}
.funfact .funfact-content .funfact-items .funfact-icon{ transition: all .3s ease;}
.funfact .funfact-content .funfact-items .funfact-icon i{ font-size: 28px; padding: 10px; border-radius: 6px; background-color: #FFFFFF40; transition: 0.5s; color: var(--thm-color); font-weight: 300;}
.funfact .funfact-content .funfact-items h2{ font-size: 30px; font-weight: 700; line-height: 0.9; color: var(--thm-color);}
.funfact .funfact-content .funfact-items:hover .funfact-icon i{ background-color: var(--thm-color); color: var(--thm-base);}
.funfact .funfact-content .funfact-items:hover .funfact-icon{ animation: rotate-icon 0.3s linear;}
@keyframes rotate-icon{ to{ transform: scaleX(-1);}}

.service-section .inner-container{ padding: 30px; border-radius: 20px; background-color: #e2e2e260;}
.service-section .find-solution{ position: relative; overflow: hidden; border-radius: 20px;}
.service-section .find-solution a .img-hight{ width: 100%; object-fit: cover; height: 300px; transition: 0.5s;}
.service-section .find-solution .down-flow{ position: absolute; bottom: -38px; left: 20px; transition: 0.5s; z-index: 2;}
.service-section .find-solution .down-flow a h4{ display: block; color: var(--thm-color); font-size: 18px; font-weight: 600; margin-bottom: 15px; margin-left: 0px;}
.service-section .find-solution:hover a img{ transform: scale(1.1);}
.service-section .find-solution:hover .down-flow{ bottom: 20px;}
.service-section .find-solution::before{ content: ""; height: 100%; width: 100%; position: absolute; bottom: 0; background: linear-gradient( rgba(0, 0, 0, 0) 0%, black 100%); opacity: 0.6; z-index: 1;}
.points-ul li{ margin-bottom: 7px; list-style: disc; margin-left: 20px;}

.why-choose-us-section .why-choose-us-cantent{ position: relative;}
.why-choose-us-section .why-choose-us-cantent .wcu-points{ display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr);}
.why-choose-us-section .why-choose-us-cantent .wcu-points .wcu-items{ border-radius: 10px; overflow: hidden;}
.why-choose-us-section .why-choose-us-cantent .wcu-points .wcu-items h5{ display: flex; gap: 10px; align-items: center; font-weight: 700; padding: 12px 20px 9px; font-size: 18px; background-color: var(--thm-light);}
.why-choose-us-section .why-choose-us-cantent .wcu-points .wcu-items h5 i{ color: var(--thm-base); font-size: 30px;}
.why-choose-us-section .why-choose-us-cantent .wcu-points .wcu-items .wcu-item-desc{ background-color: #f3f3f3; padding: 15px; border-radius: 0px 0px 10px 10px; transition: 0.5s;}
.why-choose-us-section .why-choose-us-cantent .wcu-points .wcu-items .wcu-item-desc .description{ color: #00000099; margin-bottom: 0px;}
.why-choose-us-section .wcu-img-item{ position: relative; overflow: hidden;}
.why-choose-us-section .wcu-img-item .wcu-prod-img{ max-width: 90%;}
.why-choose-us-section .wcu-img-item .line-shapes{ position: absolute; left: 8px; top: -10px; max-width: 95%; animation: rotate-shape 30s linear infinite;}
@keyframes rotate-shape{ to{ transform: rotate(360deg);}}

.why-choose-us-section.why-choose-us-page .why-choose-us-cantent .wcu-points{ display: grid; gap: 30px; grid-template-columns: repeat(3, 1fr);}

.industries-serve-section .industries-we-serve-container{ background-color: var(--thm-primary); padding: 40px; border-radius: 20px;}
.industries-serve-section .industries-we-serve-container .rSolution-content { display: grid; gap: 15px; grid-template-columns: repeat(5,1fr);}
.industries-serve-section .industries-we-serve-container .rSolution-content .rSolution-items{ border: 1px solid #ffffff20; padding: 10px; border-radius: 15px; text-align: center; transition: 0.5s;}
.industries-serve-section .industries-we-serve-container .rSolution-content .rSolution-items p{ margin: 0px; font-size: 16px; font-weight: 600; color: var(--thm-color);}
.industries-serve-section .industries-we-serve-container .rSolution-content .rSolution-items:hover{ border: 1px solid var(--thm-base-light); background-color: var(--thm-base);}

.medik-section .medik-item{ box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px; border-radius: 20px; background-color: var(--thm-white); height: 96%;}
.medik-section .medik-item img{ border-radius: 20px 20px 0px 0px;}
.medik-section .medik-item div{ padding: 20px;}
.medik-section .medik-item h5{ font-weight: 600; font-size: 20px; margin-bottom: 12px;}

.brands-section{ background-color: #e2e2e250; padding: 40px 0px;}
.brands-section .brands-silder .brands-logo{ border: 1px solid var(--thm-base-light); border-radius: 8px; padding: 5px 40px; background-color: var(--thm-color);  margin: 4px;}

.testimonial-section{ padding: 100px 0px; background-color: #e2e2e230;}
.testimonials-silder-div{ padding: 20px 10px 15px 20px; background-color: var(--thm-color); position: relative; border: 1px solid #0b214220; border-radius: 10px;}
.testimonials-silder-div .person-info{ display: flex; gap: 10px; align-items: center;}
.testimonials-silder-div .person-info div h5{ font-weight: 700; font-size: 16px;}
.testimonials-silder-div .person-info div p{ font-size: 14px; font-weight: 500; color: var(--thm-gray);}
.testimonials-silder-div .person-info div img{ max-width: 90px;}
.testimonials-silder-div .person-info .reating{ font-size: 10px; position: absolute; right: 0; bottom: 50px; padding: 8px 10px; background-color: var(--thm-color); color: var(--thm-base); transition: 0.5s; box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 8px; border-radius: 5px 0px 0px 5px;  }
.testimonials-silder-div::before { content: ""; position: absolute; top: -1px; bottom: -1px; left: -1px; width: 7px; background-color: var(--thm-base); border-top-left-radius: var(--thm-base); border-bottom-left-radius: var(--thm-base); border-radius: 15px 0px 0px 15px; transform: scaleY(0); -webkit-transition: all 500ms ease; transition: all 500ms ease;}
.testimonials-silder-div:hover::before{ transform: scaleY(1);}
.testimonials-silder-div:hover .person-info .reating{ background-color: var(--thm-base); color: var(--thm-color);}

.owl-dots { text-align: center !important;}
.owl-dot { width: 15px; height: 4px; margin: auto; background-color: var(--thm-base) !important; margin: 0 5px; opacity: 0.5; margin-top: 25px !important; border-radius: 30px !important;}
.owl-dots .active { background-color: var(--thm-base) !important; opacity: 1;}

.footer-section{ background-color: var(--thm-primary);}
.footer-section .footer-bg-img{ padding: 80px 0px 60px 0px;}
.footer-section .footer-bg-img .footer-logo-conatiner{ display: flex; gap: 20px; align-items: center; border: 1px solid #ffffff20; padding: 15px 25px; border-radius: 20px;}
.footer-section .footer-logo a img{ max-width: 160px;}
.footer-section .description{ color:var(--thm-footer); font-weight: 400;}
.footer-section .social-media{ display: flex; gap: 20px; margin-top: 5px;}
.footer-section .social-media i{ font-size: 20px; color: var(--thm-footer); transition: 0.5s;}
.footer-section .social-media a i:hover{ color: var(--thm-base);}

.footer-section .sub-heading{ font-size: 18px; display: inline-block; color: var(--thm-footer); padding-bottom: 4px; border-bottom: 1px solid #ffffff20;}
.footer-section .footer-services li{ margin-bottom: 7px; overflow: hidden;}
.footer-section .footer-services li a{ display: flex; gap: 10px; align-items: center; color: var(--thm-footer); transition: 0.5s; font-size: 15px;}
.footer-section .footer-services li a i{ font-size: 12px; margin-left: -15px; visibility: hidden; transition: 0.4s;}
.footer-section .footer-services li a:hover i{ margin-left: 0px; visibility: visible; transition: 0.4s; color: var(--thm-base);}
.footer-section .footer-services li a:hover{ color: var(--thm-base); }
.footer-section .footer-contact > a{ display: flex; gap: 10px; align-items: center; margin-bottom: 10px; color: var(--thm-footer); padding-bottom: 10px; border-bottom: 1px solid #ffffff20;}
.footer-section .footer-contact p{ display: inline-flex; gap: 10px; margin-right: 20px; align-items: center; margin-bottom: 10px; color: var(--thm-footer); padding-bottom: 10px; border-bottom: 1px solid #ffffff20;}
.footer-section .footer-contact p a{ color: var(--thm-footer);}
.footer-section .footer-contact a:hover{ color: var(--thm-base);}
.footer-section .footer-bottom-section{ padding: 20px 0px; background-color: var(--thm-base);}
.footer-section .footer-bottom-section p a{ color: var(--thm-color); transition: 0.5s;}
.footer-section .footer-bottom-section p a:hover{ color: var(--thm-primary);}

.breadcrumb-section { background-image: url(../imgs/banner.jpg); background-position: center; padding: 50px 0px; box-sizing: border-box;}
.breadcrumb-section .breadcrumb-heading { color: var(--thm-color); font-size: 28px; font-weight: 500; font-family: var(--thm-font2); text-transform: uppercase;}
.breadcrumb-section .breadcrumb { display: flex; margin-bottom: 0; list-style: none; align-items: center;}
.breadcrumb-section .breadcrumb .breadcrumb-item a { font-weight: 500; color: var(--thm-color);}
.breadcrumb-section .breadcrumb .breadcrumb-item { font-size: 16px; font-weight: 500;}
.breadcrumb-section .breadcrumb .symbol-breadcrumb { font-weight: 500; font-size: 12px; color: var(--thm-color); padding: 0px 8px; margin-top: 2px;} 
.breadcrumb-section .breadcrumb .breadcrumb-item.active { color: var(--thm-base);}

/* tabs */
.horizontal:after {content: "";display: flex;clear: both;}
.vertical {float: left;width: 25%;padding: 5px;}
.vertical img {margin-top: 12px;width: 100%;cursor: pointer; border-radius: 5px;}

.custom-container .tabs__buttons--container { display: flex; flex-wrap: wrap; margin-bottom: 30px; justify-content: center; padding: 10px; background-color: var(--thm-primary) !important;border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 8px;}
.custom-container .tabs__buttons--container .description{ padding: 5px 0px 10px 0px; border-bottom: 1px solid #86868630; color: var(--thm-black); font-weight: 700;}
.tabs__tab-btn { border: none; padding: 10px 30px; cursor: pointer; font-size: 17px; font-weight: 600; background-color: var(--thm-base); color: var(--thm-color); border-radius: 5px; margin: 5px; border-right: 1px solid #ffffff20;}
.tabs__tab-btn:last-child{ border: none;}
.tabs__tab-btn--not-selected { background-color: var(--thm-section-bg); color: var(--thm-color);}
.tabs__tab-btn--not-selected:hover{ background-color: var(--thm-base);}
.tabs__tab-btn:hover { transition: 0.3s;}
.tabs__tab--hide { display: none;}
.tabs__tab--show { display: block;}
.tabs__tab { animation: tabApear 0.6s;}
@keyframes tabApear { from { opacity: 0; } to { opacity: 1; }}
@media(max-width: 720px) { .vertical {width: 50%;}}
.custom-container .tabs__tab .description{ margin-bottom: 5px; list-style: inside;}

/* our work page gallery css */
.main-gallery {display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; justify-content: center;align-items: center;}
.main-gallery .card {color: #252a32; overflow: hidden; border-radius: 12px;}
.main-gallery .card-image {position: relative; display: block;width: 100%;padding-top: 70%;}
.main-gallery .card-image img,
.main-gallery .card-image video {display: block; position: absolute; top: 0; left: 0; width: 100%;height: 100%;object-fit: cover; border-radius: 3px;}

@media only screen and (max-width:1250px){ .main-gallery {grid-template-columns: repeat(4, 1fr); grid-gap: 25px;}}
@media only screen and (max-width:991px){ .main-gallery {grid-template-columns: repeat(3, 1fr); grid-gap: 25px;}}
@media only screen and (max-width:768px){ 
.tabs__tab-btn{ padding: 5px 10px;} 
.main-gallery {grid-template-columns: repeat(2, 1fr); grid-gap: 15px;}}
@media only screen and (max-width:500px){ 
.custom-container .tabs__buttons--container{ padding: 6px 0px; margin-bottom: 30px;} 
.tabs__tab-btn{ margin: 5px 0px; font-size: 14px;} 
.main-gallery h4{ font-size: 16px; margin-bottom: 20px;}}

.our-product-page .our-product-item{ box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px; border-radius: 10px; margin-bottom: 40px; overflow: hidden;}
.our-product-page .our-product-item .product-img{ overflow: hidden;}
.our-product-page .our-product-item .product-img img{ transition: 0.5s; width: 100%;}
.our-product-page .our-product-item .our-product-content{ padding: 0px 15px 15px;}
.our-product-page .our-product-item .our-product-content a{ display: block; text-align: center;}
.our-product-page .our-product-item .our-product-content a h3{ display: inline-block; font-weight: 500; font-size: 17px; padding: 4px 25px 5px; color: var(--thm-color); border-radius: 0px 0px 8px 8px; background-color: var(--thm-base); margin-bottom: 15px; transition: 0.5s; }
.our-product-page .our-product-item .our-product-btn { display: block; padding: 10px 15px; border: unset; color: var(--thm-black); z-index: 1; position: relative; transition: 0.5s; overflow: hidden; border-radius: 0px 0px 5px 5px; font-weight: 600; font-size: 15px; text-align: center; text-transform: uppercase; border-top: 1px solid #00000010;}
.our-product-page .our-product-item .our-product-btn::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0; background-color: var(--thm-base); z-index: -1; transition: 0.5s;}

.our-product-page .our-product-item:hover .our-product-btn { color: var(--thm-color);}
.our-product-page .our-product-item:hover .our-product-btn::before { width: 100%;}
.our-product-page .our-product-item:hover .our-product-content h4{ color: var(--thm-base);}
.our-product-page .our-product-item:hover .product-img img{ transform: scale(1.09);}

.call-to-action-section{ padding: 40px 0px; background-color: var(--thm-test-light);}
.call-to-action{ width: 100%; margin: auto; border: 2px solid var(--thm-base); padding: 8px 10px 8px 30px; display: flex; gap: 10px 80px; flex-wrap: wrap; justify-content: space-between; align-items: center; border-radius: 20px;}
.call-to-action p{ font-size: 16px; font-weight: 500; color: var(--thm-gray);}
.call-to-action > p > a{ font-size: 17px; font-weight: 600; color: var(--thm-base); transition: 0.5s;}
.call-to-action > p > a:hover{ text-decoration: underline;}
.calltoAction-btn{ border-radius: 3px 16px 16px 3px; background-color: var(--thm-base); padding: 5px 40px; transition: 0.5s;}
.calltoAction-btn a:last-child{ color: var(--thm-color);  font-size: 18px;  font-weight: 700;}
.calltoAction-btn a i{ font-size: 20px; padding: 15px; border-radius: 50%; color: var(--thm-base); background-color: var(--thm-color); box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px; margin-left: -66px; margin-right: 5px;}
.calltoAction-btn:hover{ background-color: var(--thm-black);}
.calltoAction-btn:hover a:first-child{ animation: rotate-icon 0.3s linear;}
@keyframes rotate-icon{ to{ transform: scaleX(-1);}}

.quality-control-page .points-ul li b{ color: var(--thm-primary);}
.facilities{ background-color: #0b214210; padding: 80px 0px;}
.facilities .facilities-item{ border: 1px solid var(--thm-base); padding: 20px; border-radius: 16px; min-height: 150px;}
.facilities .facilities-item h4{ font-size: 22px; font-weight: 700; color: var(--thm-base); margin-bottom: 10px;}
.facilities .facilities-item .points-ul li{ list-style: inside; font-weight: 600;}

.contact-page-info .contact-info-data{ display: grid; gap: 25px; grid-template-columns: repeat(3, 1fr);}
.contact-page-info .contact-info-data .contact-item{ overflow: hidden; padding: 14px 15px 20px 0px; border-radius: 15px; background-color: #0b214210; border: 1px solid #3b3b3b10; box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 8px;}
.contact-page-info .contact-info-data .contact-item div{ display: flex; gap: 10px; align-items: center; margin-bottom: 15px;}
.contact-page-info .contact-info-data .contact-item i{ font-size: 26px; font-weight: 300; padding: 10px 10px 10px 10px; color: var(--thm-color); background-color: var(--thm-base); border-radius: 0px 50% 50% 0px; }
.contact-page-info .contact-info-data .contact-item h4{ font-size: 20px; font-weight: 600;}
.contact-page-info .contact-info-data .contact-item a{ display: block; font-size: 16px; font-weight: 500; margin-top: 2px; margin-left: 15px; color: var(--thm-gray);}
.contact-page-info .contact-info-data .contact-item a:hover{ color: var(--thm-base);}

.form-section { width: 100%; margin: auto; padding: 30px; border-radius: 20px; border: 1px solid #3b3b3b10; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px; background-color: #0b214210;}
.form-heading { font-size: 20px; margin-bottom: 6px; color: var(--thm-base); font-weight: 600;}
.form-control { display: block; margin-top: 3px; padding: 10px 20px; font-size: 16px; font-weight: 500; color: var(--thm-black); background-color: var(--thm-color); background-clip: padding-box; border: 1px solid var(--thm-footer); -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 30px; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
.form-select { border-radius: 0px; margin-top: 3px; padding: 10px 15px;  font-weight: 500; border-radius: 30px; border: 1px solid var(--thm-footer);}
.form-select:focus { border: 1px solid var(--thm-color);  font-weight: 500; box-shadow: rgba(252, 148, 148, 0.25) 0px 0px 0px 0.25rem;}
.form-control:focus { color: var(--thm-black); background-color: var(--thm-color); border: 1px solid var(--thm-color); outline: 0px; box-shadow: rgba(253, 143, 143, 0.25) 0px 0px 0px 0.25rem;}

.contact-form iframe{ min-height: 560px; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px; padding: 8px; background-color: #0b214210; border: 1px solid #3b3b3b10;}

.scroll-page{ position: sticky; top: 150px;}
.service-detail-page .side-bar h5{ font-size: 16px; font-weight: 500; text-align: center; background-color: var(--thm-base); padding: 8px; border-radius: 8px 8px 0px 0px; margin-bottom: 10px; color: var(--thm-color); text-transform: uppercase;}

.service-detail-page .side-bar{ margin-bottom: 30px; border: 1px solid var(--thm-base-light); padding: 10px; border-radius: 10px;}
.service-detail-page .side-bar li a{ display: block; background-color: #0b214210; padding: 12px 20px; margin-bottom: 10px; font-weight: 600; position: relative; border: unset; z-index: 1; transition: 0.5s; overflow: hidden;}
.service-detail-page .side-bar li a.last-child{ border-radius: 0px 0px 8px 8px; margin-bottom: 0px;}
.service-detail-page .side-bar li a::before{ font-family: "Font Awesome 5 Free"; content:  "\f054"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 14px;}
.service-detail-page .side-bar li a::after{ content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 0; background-color: var(--thm-base); z-index: -1; transition: 0.5s;}
.service-detail-page .side-bar li a:hover::after{ width: 100%;} 
.service-detail-page .side-bar li a:hover{ color: var(--thm-color);}
.service-detail-page .side-bar li .active-service{ background-color: var(--thm-base); color: var(--thm-color);}
.service-detail-page .form-section{ padding: 20px 15px; border: 0px; border: 0px; background-color: #0b214210; box-shadow: none; border-radius: 8px;}

.service-detail-page .service-detail-content h2{ font-size: 30px; font-weight: 600; margin-bottom: 10px; color: var(--thm-base);}
.service-detail-page .service-detail-content img{ border-radius: 8px;}
.service-detail-page .service-detail-content h5{ font-size: 22px; font-weight: 600; margin-bottom: 10px; margin-top: 30px;}

.service-detail-page .service-detail-content .services-items{ display: flex; gap: 20px; align-items: center; padding: 20px; border-radius: 12px; border: 3px solid var(--thm-base-light);}
.service-detail-page .service-detail-content .services-items div i{ font-size: 35px; padding: 15px 20px; border-radius: 50%; color: var(--thm-base); border: 3px solid var(--thm-base);}
.service-detail-page .service-detail-content .services-items p{ font-weight: 600;}

#back-to-top-button { display: inline-block; background-color: var(--thm-base); width: 50px; height: 50px; text-align: center; border-radius: 40px 40px 0px 40px; position: fixed; bottom: 30px; right: 30px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000;}
#back-to-top-button::after { content: "\f077"; font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 18px; line-height: 50px; color: var(--thm-color);}
#back-to-top-button:hover { cursor: pointer; background-color: var(--thm-gray);}
#back-to-top-button:active { background-color: var(--thm-light);}
#back-to-top-button.show { opacity: 1; visibility: visible;}

.thank-you-item{ box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px; padding: 40px; text-align: center; border-radius: 15px; background-color: var(--thm-test-light);}
.thank-you-item i{ font-size: 32px; padding: 20px 24px; color: var(--thm-primary); background-color: var(--thm-primary-light); border-radius: 10px; margin-bottom: 15px;}
.thank-you-item h4{ font-weight: 600; margin-bottom: 10px;}
.thank-you-item a:hover{ color: var(--thm-base);}

.btn-whatsapp-pulse { background: #25d366; color: white; position: fixed; bottom: 30px; left: 30px; /* right: 20px; */ font-size: 36px; display: flex; justify-content: center; align-items: center; width: 0; height: 0; padding: 25px; text-decoration: none; /* border-radius: 50%; */ border-radius: 30px 30px 30px 0px; animation-name: whp-pulse; animation-duration: 1.5s; animation-timing-function: ease-out; animation-iteration-count: infinite; z-index: 10000; }
@keyframes whp-pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);}
    80% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);}
}