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

*{
    font-family: "Montserrat", sans-serif;
    margin: 0;padding: 0;
}
:root{
    --thm-font:  "Montserrat", sans-serif;
    --thm-base: #F58733;
    --thm-base-light: #F5873330;
    --thm-base2: #2F3071;
    --thm-base2-light: #2F307130;
    --thm-base3: #0098DB;
    --thm-base3-light: #0098DB30;
    --thm-black: #000000;
    --thm-black-ligth: #00000040;
    --thm-gray: #999999;
    --thm-line: #8b8b8b30;
    --thm-white: #ffffff;
    --thm-section-bg: #f7f7f7;
    --thm-light: #c7c7c7;
    --thm-footer: #e2e2e2;
    --thm-primary: #666666;
}
h1,
h2,
h3,
h4,
h5,
h6,
p{ margin: 0;}
ul{ margin: 0; padding: 0;}
li{ list-style: none;}
h1{ font-size: 50px; font-weight: 500;}
h2{ font-size: 32px; font-weight: 600; font-family: "Montserrat", sans-serif;}
h3{ font-size: 24px;}
h4{ font-size: 18px; font-weight: 500;}
h5{ font-size: 20px; font-weight: 500;}
h6{ font-size: 18px;}
a{ color: var(--thm-base); text-decoration: none; font-weight: 600; transition: 0.5s;}
a:hover {color: var(--thm-base2);}

.text-align-justify{ text-align: justify;}

.mb-80{ margin-bottom: 100px;}
.mt-80{ margin-top: 100px;}
.container{ max-width: 1440px;}
b{ color: var(--thm-base);}
.b-black{ color: var(--thm-black); font-weight: 500;}
.section-container{ position: relative;}

.heading-tag{ display: inline-block; font-size: 15px; color: var(--thm-base); margin-bottom: 10px; font-weight: 600; padding: 4px 10px; background-color: var(--thm-base-light);}
.heading{ font-weight: 800; color: var(--thm-black); margin-bottom: 15px;}
.description{ font-size: 15px; margin-bottom: 15px; font-weight: 500; color: var(--thm-primary);}

.btn-box { background-color: var(--thm-black); color: #fff; font-size: 14px; padding: 9px 20px; transition: 0.5s; text-transform: uppercase; display: inline-block; position: relative; overflow: hidden; z-index: 2; transition: 0.5s; font-weight: 600;}
.btn-box:hover { color: #fff; background-color: var(--thm-base2);}
.btn-box:hover::before { background-color: var(--thm-base2); transform: rotate(31deg);}
.btn-box::before { content: ""; position: absolute; height: 50px; width: 250px; background-color: #ffffff20; z-index: -1; transform: rotate(45deg); transition: 0.5s;}

.btn-box.style2{ background-color: #ffffff; color: var(--thm-black);}
.btn-box.style2:hover{ background-color: var(--thm-base); color: var(--thm-white);}
.btn-box.style2::before{ background-color: var(--thm-black-ligth);}

.btn-box.style3{ background-color: var(--thm-base);}
.btn-box.style3:hover { color: #fff; background-color: var(--thm-base2);}
.btn-box.style3:hover::before{ background-color: #ffffff20;}

.btn-box.style4{ background-color: var(--thm-base2);}
.btn-box.style4:hover { color: #fff; background-color: var(--thm-base);}
.btn-box.style4:hover::before{ background-color: #ffffff20;}

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

header{ position: absolute; width: 100%; z-index: 20; margin-top: 10px;}
header .top-header { background-color: transparent;}
header .top-header .container{ display: flex; align-items: center; justify-content: space-between;}
header .top-header p{ font-size: 14px; font-weight: 400;}

header .top-header .social-media-container{ display: flex; align-items: center;}
header .top-header .social-media-container div{ display: flex; gap: 10px; align-items: center; border-right: 1px solid var(--thm-line); padding: 10px 20px; color: var(--thm-white);}
header .top-header .social-media-container a{ font-size: 14px; font-weight: 400; color: var(--thm-white);}
header .top-header .social-media-container i{ font-size: 18px; color: var(--thm-base);}
header .top-header .social-media-container a:hover{ color: var(--thm-base);}
header .top-header .social-media-container div:last-child{ border: none; padding-right: 0px;}

header .top-header .social-media-container .social-media{ display: flex; gap: 20px;}
header .top-header .social-media-container .social-media a{ position: relative;}
header .top-header .social-media-container .social-media a i{ font-size: 14px; transition: 0.5s;}
header .top-header .social-media-container .social-media a:hover i{ color: var(--thm-white);}

header .nav-bar .container{ display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; backdrop-filter: blur(15px);}
header .nav-bar .menu-section{ display: flex; gap: 30px; align-items: center;}
header .nav-bar .container .logo{ max-width: 450px; background-color: #f0f0f0; background-color: var(--thm-base2); padding: 12px 100px 12px 10px; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px;  -webkit-clip-path: polygon(0 0, 100% 0%, 80% 100%, 0 100%); clip-path: polygon(0 0, 100% 0%, 80% 80%, 0 100%); margin-bottom: -30px; margin-left: -12px;}
header .nav-bar .menu-section .menu{ display: flex; gap: 25px;}
header .nav-bar .menu-section .menu li{ position: relative;}
header .nav-bar .menu-section .menu li a{ font-weight: 600; color: var(--thm-black); font-size: 15px; text-transform: uppercase;}
header .nav-bar .menu-section .menu li a:hover{ color: var(--thm-base);}
header .nav-bar .menu-section .menu .active > a{ color: var(--thm-base);}
header .nav-bar .nav-connect{ display: flex; gap: 15px; align-items: center;}

.mega-menu{ background-color: #f8f9ff; background-color: #ffffff; padding: 30px 20px 20px 20px; box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 8px;}
.mega-menu h6{ font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--thm-base); border-bottom: 1px solid #2F307140; padding-bottom: 10px;  margin-bottom: 10px;}
.mega-menu .mega-menu-items{ display: flex; gap: 12px; align-items: center; border: 1px solid #00000010; padding: 10px; }
.mega-menu .mega-menu-items p a{ font-weight: 600; font-size: 14px; text-transform: uppercase;}
.mega-menu .mega-menu-items img{ max-width: 80px;}
.mega-menu .mega-menu-items .mega-btn{ display: flex; gap: 6px; align-items: center; color: var(--thm-base2); font-size: 12px; opacity: 0.6; margin-top: 0px; transition: 0.5s;}
.mega-menu .mega-menu-items .mega-btn:hover{ gap: 10px; opacity: 1;}
.mega-menu .mega-menu-items:hover{ border: 1px solid var(--thm-base-light); background-color: #F5873320;}

/* =============== Mega-menu hover-show =========================== */
.dropdown-megamenu { position: relative; display: flex; gap: 5px; align-items: center; }
.dropdown-megamenu .megamenu-open{ color: var(--thm-black); margin-top: -3px; font-size: 14px; cursor: pointer;}
.dropdown-megamenu .mega-menu{ position: fixed; width: 900px; opacity: 0.7; top: 65px; left:  60%; transform: translatex(-60%); z-index: -1; transition: 0.5s; visibility: hidden; }
.dropdown-megamenu:hover .mega-menu{ top: 80px; opacity: 1; z-index: 4; visibility: visible;}
.dropdown-megamenu .megamenu-open:hover{ color: var(--thm-base2);}

.sticky{ position: fixed; top: 10px; width: 100%; left: 50%; transform: translateX(-50%); box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 8px; z-index: 9; background-color: var(--thm-white);}


.banner-three { position: relative;}
.banner-three .content { position: relative; max-width: 700px; z-index: 10; padding: 300px 0 300px;}
.banner-three .content h1 { font-size: 50px; font-weight: 800; color: var(--thm-white); position: relative; margin-bottom: 25px;}
.banner-three .content h1::before { position: absolute; content: ""; width: 120px; height: 3px; left: 0; bottom: -10px;  z-index: -1; background-color: var(--thm-base); border-radius: 0px 20px 20px 0px;}
.banner-three .content p { color: var(--thm-white); font-weight: 400;}

.banner-three .slide-bg:before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(262.49deg, #000000 0%, rgba(0, 0, 0, 0) 100%); z-index: -1; transform: rotate(-180deg);}
.banner-three .slide-bg::after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient( #00000070 10%, #00000000 30%, rgba(0, 0, 0, 0) 100%); z-index: -1;}
.banner-three .slide-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 1; z-index: -2; background-repeat: no-repeat; background-position: center center; background-size: cover; transform: scale(1); -webkit-transition: all 8s ease-out 0s; -moz-transition: all 8s ease-out 0s; -ms-transition: all 8s ease-out 0s; -o-transition: all 8s ease-out 0s;}
.banner-three .swiper-slide-active .slide-bg { -webkit-transform: scale(1.12); -moz-transform: scale(1.12); transform: scale(1.12);}
.banner-three .slider-info { position: absolute; top: 50%; right: 1%; z-index: 2; transform: rotate(90deg);}
.banner-three .banner-btn{ display: flex; gap: 15px; align-items: center;}

.dot.theme .swiper-pagination-bullet { width: 20px; height: 20px; border-radius: 50%; transition: 0.6s; background-color: transparent; opacity: 1; position: relative; border: 1px solid #ababab;}
.dot.theme .swiper-pagination-bullet::before { position: absolute; content: ""; top: 4px; left: 4px; width: 10px; height: 10px; border-radius: 50%; background-color: #ababab; transition: 0.6s;}
.dot.theme .swiper-pagination-bullet.swiper-pagination-bullet-active { border: 1px solid var(--thm-base);}
.dot.theme .swiper-pagination-bullet.swiper-pagination-bullet-active::before { background-color: var(--thm-base);}

.banner-bottom{ background-color: #e0e0e050; padding: 60px 0px;}
.banner-bottom .section-container .heading{ display: inline-block; border-top: 3px solid; border-image: linear-gradient(to right, var(--thm-base), var(--thm-base)) 1; padding-top: 14px;}
.banner-bottom img{ padding: 0px 0px;}

.points-section .points-section-container{ display: grid; gap: 0px; grid-template-columns: repeat(3, 1fr);}
.points-section .points-section-container .points-section-items{ padding: 15px 20px; background-color: #ffffff; box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;}
.points-section .points-section-container .points-section-items:nth-child(even){ background-color: var(--thm-base-light);}
.points-section .points-section-container .points-section-items .step img{ max-width: 45px;}
.points-section .points-section-container .points-section-items .step h4{ display: flex; gap: 7px; align-items: center; margin-bottom: 10px; font-weight: 600;}
.points-section .points-section-container .points-section-items .step .description{ margin-bottom: 0px;}

.over-year .container{ background-color: var(--thm-base2); padding: 50px 40px;}
.over-year .about-imgs{ background: none; padding: 0px;}
.over-year .container .about-call{ border: 1px solid #ffffff40; padding: 5px 20px; display: inline-flex; gap: 5px; align-items: center;}
.over-year .section-container { padding-left: 0px;}

.global-reach{ background-color: #e0e0e060; padding: 50px 0px;}
.global-reach .container{ padding: 20px; border-top: 1px solid #99999940; border-bottom: 1px solid #99999940;}
.global-reach .heading{ color: var(--thm-base);}
/* .global-reach .description{ color: #ffffff99;} */
.global-reach.about-global-reach{ background-color: transparent; padding: 0px;}
.global-reach.about-global-reach .description{ color: var(--thm-primary);}

.access-adv-section .access-adv-container{ background-color: #e0e0e060; padding: 25px;}
.access-adv-section .access-adv-container .row{ padding: 20px 14px; margin: 5px; background-color: transparent; border: 1px solid #99999940; overflow: hidden;}
.access-adv-section .access-adv-container .access-img img{ max-width: 350px; padding: 5px; transition: 0.5s;}
.access-adv-section .access-adv-container .access-img-content{ margin-right: 20px;}
.access-adv-section .access-adv-container .access-img-content h3{ color: var(--thm-black); margin-bottom: 8px; line-height: 1.3; font-size: 18px; font-weight: 700; text-transform: uppercase;}
.access-adv-section .access-adv-container .access-img-content h6{ font-size: 16px; font-weight: 600; margin-bottom: 10px;}
.access-adv-section .access-adv-container .access-img-content .trending{ display: inline-flex; gap: 3px; align-items: center; background-color: var(--thm-base2); color: var(--thm-white); padding: 2px 8px; margin-bottom: 7px; font-size: 14px;}
.access-adv-section .access-adv-container .access-img-content .trending i{ font-size: 12px;}
.access-adv-section .access-adv-container .access-adv-silder .item:hover .access-img img{ transform: scale(1.07);}

.custom-hinges-cta h4{ display: inline-block; border: 1px solid var(--thm-base-light); background-color: var(--thm-base); padding: 3px 15px 0px; padding-top: 4px; margin-top: 30px; font-weight: 700; text-transform: uppercase;}
.custom-sheet-metal{ background-color: #2F307110; padding: 30px; margin-bottom: 30px; border-bottom: 2px solid; border-image: linear-gradient(to right, var(--thm-base), var(--thm-base2)) 1;}

.quality-control{ background-image: url(../images/banner-05.jpg); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; min-height: 500px; overflow: hidden;}
.quality-control::before{ content: ""; position: absolute; width: 700px; min-height: 500px; right: 0px; background-color: #00000040; backdrop-filter: blur(10px); z-index: 1;}
.quality-control-box{ position: relative; z-index: 2; padding: 30px; background-color: var(--thm-base);}
.quality-control-box .heading{ color: var(--thm-base2);}

.hinges-specification{
    background-color: #e0e0e060;
    padding: 50px 0px;
}
.hinges-specification .hinges-specification-items{  height: 100%;}
.hinges-specification .hinges-specification-items img{ background-color: var(--thm-white); margin-bottom: 20px;}


.product-application-section .product-application-container .product-application-items{
    padding-top: 15px;
    text-align: center;
}
.product-application-section .product-application-container .product-application-items .prod-app-img{
    overflow: hidden;
}
.product-application-section .product-application-container .product-application-items img{
    width: 100%;
    transition: 0.5s;
}
.product-application-section .product-application-container .product-application-items:hover img{
    transform: scale(1.05);
}

.product-application-section .product-application-container .product-application-items h4{
    margin-top: 10px;
    font-size: 15px;
    color: var(--thm-primary);
}

.brands-section{ padding: 40px 0px; background: linear-gradient(var(--thm-base2), var(--thm-base2));}
.brands-section .brands-silder img{ padding: 10px 10px; background-color: var(--thm-white); box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;}

.testimonials-section{ background-color: #e0e0e060; padding: 80px 0px;}
.testimonials-section .testimonial-container{ padding: 0px 20px; }
.testimonials-section .testimonial-container .testimonials-silder-div{ padding: 25px; background-color: var(--thm-base2); border-radius: 0px; position: relative; margin: 1px; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px; /* border: 2px solid var(--thm-base-light); */ transition: 0.5s; }
.testimonials-section .testimonial-container .testimonials-silder-div > div{ display: flex; justify-content: space-between; padding-right: 30px; }
.testimonials-section .testimonial-container .testimonials-silder-div .person-info{ display: flex; gap: 10px; align-items: center; margin-bottom: 30px; }
.testimonials-section .testimonial-container .testimonials-silder-div .person-info div h5{ font-size: 20px; font-weight: 600; color: var(--thm-footer);}
.testimonials-section .testimonial-container .testimonials-silder-div .person-info div img{ width: 100% !important; }
.testimonials-section .testimonial-container .testimonials-silder-div .person-info .reating{ display: flex; gap: 4px; align-items: center; font-size: 12px; color: rgb(255, 162, 55); transition: 0.5s; margin-top: 3px; }
.testimonials-section .testimonial-container .testimonials-silder-div .comma-img{ width: 100% !important; }
.google-icon{max-width: 28px; margin-right: 2px; padding-right: 6px; border-right: 1px solid #f7f7f730;}
.testimonials-section .testimonial-container .testimonials-silder-div .description{ color: var(--thm-footer);}

.tagline-section{ padding: 60px 0px;}

.footer-section{ background-color: var(--thm-black);}
.footer-section .footer-container{ padding: 50px 0px; position: relative;}
.footer-section .footer-container .footer-logo a img{ margin-bottom: 5px; max-width: 350px;}
.footer-section .footer-container .description{ color:var(--thm-footer);}

.footer-section .footer-container .sub-heading{ font-size: 16px; display: inline-block; color: var(--thm-footer); padding-bottom: 4px; border-bottom: 1px solid #F5873350; margin-bottom: 15px; font-weight: 500;}
.footer-section .footer-container .footer-services li{ margin-bottom: 8px; overflow: hidden;}
.footer-section .footer-container .footer-services li a{ display: inline-flex; color: var(--thm-footer); transition: 0.5s; position: relative;  font-size: 15px; font-weight: 500;}
.footer-section .footer-container .footer-services li a:hover{ color: var(--thm-base); }

.footer-section .footer-container .border-footer { border: 1px solid #f8f9ff15; padding: 15px 20px; margin-bottom: 30px; height: 87%;}
.footer-section .footer-container .grid-footer-services{ display: grid; gap: 0px 20px; grid-template-columns: repeat(2, 1fr);}
.footer-section .footer-container .footer-quick-links{ position: absolute; top: 0px; right: 0%;}
.footer-section .footer-container .footer-quick-links .footer-services{ display: flex; gap: 30px; background-color: #e2e2e210; padding: 15px 30px 10px 30px; border: 1px solid #e2e2e200; backdrop-filter: blur(5px);}

.footer-section .footer-container .footer-contact p{ display: inline-flex; gap: 10px; align-items: center; margin-right: 20px; margin-bottom: 8px; color: var(--thm-footer); padding-bottom: 10px; border-bottom: 1px solid var(--thm-line); font-size: 15px; font-weight: 400;}
.footer-section .footer-container .footer-contact p i{ color: var(--thm-base);}
.footer-section .footer-container .footer-contact p a{ color: var(--thm-footer); font-size: 14px; font-weight: 500;}
.footer-section .footer-container .footer-contact p:last-child{ display: flex; gap: 10px; align-items: center; margin-bottom: 0px; color: var(--thm-footer); padding-bottom: 0px; border-bottom: none;}
.footer-section .footer-container .footer-contact p a:hover{ color: var(--thm-base);}

.footer-section .footer-bottom-section{ padding: 20px 0px; border-top: 1px solid  var(--thm-line); border-image: linear-gradient(to right, var(--thm-base), var(--thm-base)) 1;}
.footer-section .footer-bottom-section .container{ display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.footer-section .footer-bottom-section p{ font-size: 14px;}
.footer-section .footer-bottom-section p a{transition: 0.5s; color: var(--thm-white);}
.footer-section .footer-bottom-section p a:hover{ color: var(--thm-base);}
.footer-section .footer-bottom-section .social-media{ display: flex; gap: 22px; align-items: center;}
.footer-section .footer-bottom-section .social-media a{ position: relative; z-index: 2;}
.footer-section .footer-bottom-section .social-media i{ font-size: 18px; color: var(--thm-white); background-color: transparent; transition: 0.5s;}
.footer-section .footer-bottom-section .social-media a::before{ position: absolute; content: ""; width: 0px; height: 0px; background-color: var(--thm-base); top: 55%; left: 50%; transform: translate(-50%, -55%); z-index: -1; border-radius: 50%; transition: 0.3s;}
.footer-section .footer-bottom-section .social-media a:hover i{ color: var(--thm-white);}
.footer-section .footer-bottom-section .social-media a:hover::before{ width: 35px; height: 35px;}


.footer-bottom-links{ display: flex; align-items: center; flex-wrap: wrap; gap: 3px 10px; color: var(--thm-primary); border: 1px solid #e2e2e200; padding: 10px 15px; background-color: #f8f9ff10;}
.footer-bottom-links a{ color: var(--thm-footer); font-size: 14px; font-weight: 500;}
.footer-bottom-links a:hover{ color: var(--thm-base);}



.breadcrumb-section .breadcrumb-bg { background-color: var(--thm-section-bg); padding: 200px 0px 30px; text-align: center; background-image: url(../images/banner-05.jpg); background-position: center; border-bottom: 16px solid var(--thm-base-light);}
.breadcrumb-section .breadcrumb-bg nav{ display: block; justify-content: center; align-items: end;}
.breadcrumb-section .breadcrumb-heading { font-size: 25px; font-weight: 800; color: var(--thm-white); text-transform: uppercase;}
.breadcrumb-section .breadcrumb { display: inline-flex; margin-bottom: 0; list-style: none; align-items: center; margin-top: 5px; padding-top: 5px; border-top: 1px solid #ffffff40;}
.breadcrumb-section .breadcrumb .breadcrumb-item a { font-weight: 500; color: var(--thm-white);}
.breadcrumb-section .breadcrumb .breadcrumb-item { font-size: 15px;}
.breadcrumb-section .breadcrumb .symbol-breadcrumb { font-weight: 500; font-size: 12px; color: var(--thm-white); padding: 0px 8px; margin-top: 2px;} 
.breadcrumb-section .breadcrumb .breadcrumb-item.active { color: var(--thm-base); font-weight: 500;}

.about-section{ position: relative;}
.about-section .section-container { padding-left: 64px;}
.about-section .img-bg-about{ position: absolute; left: 40px; max-width: 400px; opacity: 0.4;}
.about-section .about-imgs{ background: linear-gradient( var(--thm-base), var(--thm-base)); padding-left: 10px;}
.about-section .about-imgs img{ width: 100%;}

.about-section .heading { position: relative;}
.about-section .heading img{ position: absolute; top: 120px; left: -140px; z-index: -1; opacity: 0.5; width: 200px; transform: rotate(-90deg);}

.compy-fact-section h6{ font-size: 20px; font-weight: 800; letter-spacing: 0.1px;}
.compy-fact-section .compy-fact-points{ background-color: var(--thm-base2-light); padding: 20px 20px 0px; display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr);}
.compy-fact-section .compy-fact-points .compy-fact-items{ border: none; border: 1px solid transparent; padding: 7px 10px; border-radius: 0px; background-color: var(--thm-white); box-shadow: rgba(149, 157, 165, 0.18) 0px 8px 24px;}
.compy-fact-section .compy-fact-points .compy-fact-items .step{ display: flex; gap: 10px; align-items: center; text-align: left;}
.compy-fact-section .compy-fact-points .compy-fact-items .step img{ margin-bottom: 0px; max-width: 45px;}
.compy-fact-section .compy-fact-points .compy-fact-items .step h4{ margin-bottom: 0px; font-weight: 600; font-size: 15px;}
.compy-fact-section .compy-fact-points .compy-fact-items .step h4 span{ font-size: 14px; color: #666666; font-weight: 500;}

.our-products-section .products-items-container{ display: grid; gap: 40px; grid-template-columns: repeat(3,1fr);}
.our-products-section .products-items-container .products-items .description{ padding: 0px 10px;}
.our-products-section .products-items-container .products-items .product-img{ overflow: hidden; padding: 10px; border-bottom: 20px solid var(--thm-base);}
.our-products-section .products-items-container .products-items .product-img img{ width: 100%; transition: 0.5s; border-radius: 0px;}
.our-products-section .products-items-container .products-items .product-name{ display: flex; align-items: center; justify-content: space-between; font-size: 22px; transition: 0.5s; padding: 12px 0px; overflow: hidden; margin: 0px 10px;}
.our-products-section .products-items-container .products-items .product-name h5 a{ font-size: 18px; font-weight: 600; margin-bottom: 15px; transition: 0.5s; text-transform: capitalize; color: var(--thm-black); text-align: center;}
.our-products-section .products-items-container .products-items .product-name .arrow-icon{ font-size: 12px; font-weight: 700; padding: 5px 8px; border: 1px solid var(--thm-base); border-radius: 50%; opacity: 0; transition: 0.5s; color: var(--thm-base);}
.our-products-section .products-items-container .products-items .product-name .arrow-icon:hover{ border: 1px solid var(--thm-base); background-color: var(--thm-base); color: var(--thm-white);}
.our-products-section .products-items-container .products-items:hover .arrow-icon{ opacity: 1;}
.our-products-section .products-items-container .products-items:hover .product-img img{ transform: scale(1.15);}




.products-section .products-items-container{ display: grid; gap: 25px; grid-template-columns: repeat(4,1fr);}
.products-section .products-items-container .products-items{ background-color: var(--thm-white); box-shadow: rgba(149, 157, 165, 0.0) 0px 8px 24px; border: 1px solid var(--thm-base-light);}
.products-section .products-items-container .products-items .product-img{ overflow: hidden; padding: 5px; background-color: var(--thm-white);}
.products-section .products-items-container .products-items .product-img img{ width: 100%; transition: 0.5s; box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;}
.products-section .products-items-container .products-items .product-name{ display: flex; gap: 2px; align-items: center; justify-content: space-between; font-size: 20px; transition: 0.5s; padding: 6px 15px 10px; background-color: var(--thm-base2);}

.products-section .products-items-container .products-items .product-name h5 a{ font-size: 14px; font-weight: 500; transition: 0.5s; text-transform: uppercase; color: var(--thm-white);}
.products-section .products-items-container .products-items .product-name .arrow-icon{ font-size: 10px; padding: 4px 7px; border: 1px solid var(--thm-white); border-radius: 50%; opacity: 0; transition: 0.5s; color: var(--thm-white);}
.products-section .products-items-container .products-items .product-name .arrow-icon:hover{ border: 1px solid var(--thm-base); background-color: var(--thm-base); color: var(--thm-white);}
.products-section .products-items-container .products-items:hover .product-name .arrow-icon{ opacity: 1;}
.products-section .products-items-container .products-items:hover .product-img img{ transform: scale(1.15);}

.products-section .products-items-container .products-items:last-child { grid-column: span 2; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px 20px; background-image: url(../images/banner-02.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 4;}
.products-section .products-items-container .products-items:last-child:before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background:  #00000099; z-index: -1; transform: rotate(-180deg);}
.products-section .products-items-container .products-items:last-child h5{ font-size: 22px; margin-bottom: 8px; font-weight: 700;}







.our-products-section.our-products-section2{
    background-color: var(--thm-white);
    padding: 0px;
}
.our-products-section .products-items{
    padding: 10px 10px 5px 10px;
    box-shadow: rgba(149, 157, 165, 0.3) 0px 8px 24px;
    border-radius: 0px;
    background-color: var(--thm-white);
    /* border-top: 8px solid var(--thm-base2); */
}

.our-products-section.our-products-section2 .products-items-container{
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(3,1fr);
}










.adv-section .adv-section-container{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}
.adv-section .adv-content{
    padding: 25px;
    background-color: var(--thm-section-bg);
}
.adv-section .adv-content .heading{
    font-size: 28px;
    font-weight: 800;
    color: var(--thm-base);
    margin-bottom: 10px;
    border-bottom: 1px solid var(--thm-base2-light);
    padding-bottom: 5px;
}

.perspective-section{ padding: 0px 0px 80px; background: linear-gradient(#ffffff, #e0e0e060); }
.perspective-section .perspective-items{ padding: 20px 20px 0px; margin-top: 10px; min-height: 100%; border: 1px solid var(--thm-base-light); transition: 0.5s;}
.perspective-section .perspective-items img{ max-width: 60px; margin-bottom: 14px;}
.perspective-section .perspective-items h5{ font-weight: 700; margin-bottom: 10px; font-size: 18px;}
.perspective-section .perspective-items:hover{
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 1px solid var(--thm-white);
    background-color: var(--thm-white);
}






.callToAction-section{
    padding: 50px 0px;
    background-size: cover;
    background-position: center top;
    /* background-color: var(--thm-base3-light); */
    /* background-image: url(../images/003.jpg);
    background-attachment: fixed; */
    background-color: var(--thm-base2-light);
}
.callToAction-section .calltoaction-content{
    text-align: center;
}
.callToAction-section .calltoaction-content h2{
    font-size: 35px;
    margin-bottom: 15px;
}
.callToAction-btn{
    border: none;
}











.form-section-bg{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.form-section {
    padding: 30px;
    background-color: var(--thm-white);
}
.form-heading {
    font-size: 20px;
    margin-bottom: 6px;
    color: var(--thm-base);
}
.form-control {
    display: block;
    margin-top: 3px;
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 500;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #e0e0e0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 3px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-select {
    border-radius: 3px;
    margin-top: 3px;
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid #e0e0e0;
}
.form-select:focus {
    border: 1px solid var(--thm-base-light);
    box-shadow: #F5873330 0px 0px 0px 0.25rem;
}
.form-control:focus {
    color: rgb(33, 37, 41);
    background-color: rgb(255, 255, 255);
    border-color: var(--thm-base-light) !important;
    outline: 0px;
    box-shadow: #F5873330 0px 0px 0px 0.25rem;
}
.form-section .btn-box{
    border: none;
}

/* .contact-info-page{
    background-color: var(--thm-section-bg);
    padding: 80px 0px;
} */
.contact-info-page .form-section{
    padding: 30px;
}

.contact-info-page .form-head-box{
    background-color: #F22D3210;
    padding: 20px 20px 5px 20px;
    margin-top: -5px;
}
.contact-info-page .form-section .form-head-box .form-heading{
    text-align: start;
}

.contact-info-page .contact-info{
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(1, 1fr);
    margin: 20px 0px;
    background-color: var(--thm-section-bg);
    padding: 20px 20px;
}
.contact-info-page .contact-info .contact-info-items{
    border: 1px solid #2F307110;
    padding: 10px 10px;
    display: flex;
    gap: 15px;
    align-items: center;
    transition: 0.5s;
}
.contact-info-page .contact-info .contact-info-items i{
    font-size: 24px;
    color: var(--thm-white);
    font-weight: 600;
    background-color: var(--thm-base);
    padding: 11px;
}
.contact-info-page .contact-info .contact-info-items p{
    font-size: 17px;
    font-weight: 600;
}
.contact-info-page .contact-info .contact-info-items a{
    display: inline-block;
    color: var(--thm-primary);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}
.contact-info-page .contact-info .contact-info-items span{
    color: var(--thm-primary);
    font-weight: 500;
    font-size: 15px;
}
.contact-info-page .contact-info .contact-info-items a:hover{
    color: var(--thm-base);
}
.contact-info-page .contact-info .contact-info-items:hover{
    border: 1px solid #2F307150;
}

.contact-info-page .contact-info-social{
    display: flex;
    gap: 0px 25px; 
    align-items: center;
}
.contact-info-page .contact-info-social h4{
    font-size: 18px;
    font-weight: 800;
}
.contact-info-page .contact-info-social .social-media{
    display: inline-flex;
    align-items: center;;
}
.contact-info-page .contact-info-social .social-media a{
    position: relative;
    color: var(--thm-white);
    z-index: 2;
}
.contact-info-page .contact-info-social .social-media i{
    font-size: 18px;
    color: var(--thm-primary);
    background-color: transparent;
    transition: 0.5s;
    font-weight: 400;
}
.contact-info-page .contact-info-social .social-media a::before{
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    background-color: var(--thm-base);
    top: 48%;
    left: 50%;
    transform: translate(-48%, -50%);
    z-index: -1;
    border-radius: 50%;
    transition: 0.3s;
}
.contact-info-page  .contact-info-social .social-media a:hover i{
    color: var(--thm-white);
}
.contact-info-page  .contact-info-social .social-media a:hover::before{
    width: 35px;
    height: 35px;
}
.iframe-container iframe{
    margin-bottom: -7px;
}


.service-detail-page .service-detail-content h3{
    font-size: 22px;
    font-weight: 700;
    margin: 25px 0px 10px;
    color: var(--thm-base2);
    border-bottom: 1px solid var(--thm-base2-light);
    padding-bottom: 5px;
}
/* .service-detail-page .service-detail-content .description{
    font-size: 14px;
} */
.service-detail-page .service-detail-content h5{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}
/* .service-detail-page .service-detail-content img{
} */
.service-detail-page .service-detail-content .product-d-img{
    width: 100%;
    margin: 4px;
    margin-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px;
    padding: 10px 30px;
}
.service-detail-page .service-detail-content .product-d-img.product-d-img22{
    padding: 0px;
}
.service-detail-page .service-detail-content .product-d-img.product-d-img22.product-d-img33{
    padding: 15px 0px;
}
.service-detail-page .service-detail-content img{
width: 100%;
}

.service-detail-page .side-bar{
    margin-bottom: 30px;
    background-color: #F5873310;
    padding: 10px;
    border: 1px solid var(--thm-base-light);
}

.side-bar-heading{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    color: var(--thm-white);
    background-color: var(--thm-base2);
    padding: 6px 20px;
    text-align: center;
}

.service-detail-page .side-bar li a {
    display: block;
    border: none;
    font-size: 14px;
    padding: 7px 10px;
    font-weight: 600;
    color: var(--thm-black);
    text-transform: uppercase;
    position: relative;
    transition: 0.5s ease;
    cursor: pointer;
    border-bottom: 1px solid var(--thm-footer);
}
  
.service-detail-page .side-bar li a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background-color: var(--thm-base);
    transition: 0.5s ease;
}
  
.service-detail-page .side-bar li a:hover {
    color: var(--thm-base);
    transition-delay: 0.5s;
    background-color: transparent;
}
  
.service-detail-page .side-bar li a:hover::before {
    width: 100%;
}
  
/* .service-detail-page .side-bar li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    background-color: var(--thm-base);
    transition: 0.4s ease;
    z-index: -1;
}
  
.service-detail-page .side-bar li a:hover::after {
    height: 100%;
    transition-delay: 0.4s;
    color: aliceblue;
} */
.service-detail-page .side-bar.side-bar-form{
    padding: 0px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px;
}



.service-detail-page .side-bar li .active-service{
    background-color: var(--thm-base);
    color: var(--thm-white);
}
.service-detail-page .side-bar-form .form-section{
    border: 1px solid var(--thm-footer);
    box-shadow: none;
    padding: 20px;
    padding-bottom: 40px;
}

.scroll-page{
    position: sticky;
    top: 110px;
}


table{ border: 2px solid #252a3210; padding: 10px;}
table, th, td{border-collapse: collapse; border: 2px solid #252a3210; text-align: center;}
tr:nth-child(even){ background-color: #F5F5F500;}
tr:nth-child(odd){ background-color: #2F307110;}
td{ padding: 8px 15px; font-weight: 600; font-size: 15px;}
th{ text-align: center; padding: 8px; font-weight: 600; background-color: var(--thm-base2); color: #FFF;}

/* ==================== drop-down ===================================== */

/* .nav-bar .menu .drop-down{
    position: relative;
    transition: 0.5s;
}
.drop-down-menu{
    position: absolute;
    width: 300px;
    top: 35px;
    background-color: var(--thm-white);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px;
    opacity: 0;
    z-index: -1;
    visibility: hidden;
    transition: 0.5s;
    border-radius: 6px;
    border-top: 3px solid var(--thm-gray);
    padding: 14px;
}
.nav-bar .menu .drop-down-menu li a{
    font-size: 15px;
    padding: 8px 10px;
    color: var(--thm-black);
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--thm-footer);
}
.nav-bar .menu .drop-down-menu li a:hover{
    color: var(--thm-base);
    border-bottom: 1px solid transparent;
}
.nav-bar .menu .drop-down-menu .active-service-page a{
    color: var(--thm-white);
    background-color: var(--thm-base);
    border-bottom: 1px solid var(--thm-base);
}
.nav-bar .menu .drop-down-menu .active-service-page a:hover{
    color: var(--thm-white);
}
.nav-bar .menu .drop-down-menu .active-service-page::before{
    width: 100%;
    transform: rotate(0deg);
}
.nav-bar .menu .drop-down:hover .drop-down-menu{
    opacity: 1;
    z-index: 8;
    top: 45px;
    visibility: visible;
}
.arrow-dropdown{
    display: none;
} */

/* ==================== sticky nav-bar ===================================== */



/* ==================== back-to-top-button ===================================== */
#back-to-top-button {
    display: inline-block;
    background-color: var(--thm-base);
    width: 50px;
    height: 50px;
    text-align: center;
    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: 22px;
    line-height: 50px;
    color: var(--thm-white);
}
#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;
}


.btn-whatsapp-pulse { background: #25d366; color: white; position: fixed; bottom: 30px; left: 30px; /* right: 20px; */ font-size: 30px; display: flex; justify-content: center; align-items: center; width: 0; height: 0; padding: 23px; text-decoration: none; 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);}
}

/* ==================== pop-up ===================================== */
.modal-dialog {
    max-width: 700px;
    margin: 1.75rem auto;
}
.modal-dialog .form-heading {
    font-size: 20px;
    margin-bottom: 0px;
    color: var(--thm-base);
    text-align: center;
}
.btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(253, 13, 13, 0.25);
    opacity: 1;
}

/* ==================== 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: var(--thm-base);
    stroke-width: 5.0;
    stroke-linecap: round; 
}
.ham6 .top {
    stroke-dasharray: 40 172;
}

.ham6 .middle {
    stroke-dasharray: 40 111;
}

.ham6 .bottom {
    stroke-dasharray: 40 172;
}

.ham6.active .top {
    stroke-dashoffset: -132px;
}

.ham6.active .middle {
    stroke-dashoffset: -71px;
}

.ham6.active .bottom {
    stroke-dashoffset: -132px;
}






.main-gallery .container {display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; justify-content: center;align-items: center;}
    .main-gallery .card {color: #252a32; border-radius: 4px;}
    .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;}
    
    @media only screen and (max-width:1250px){
        .main-gallery .container {grid-template-columns: repeat(4, 1fr); grid-gap: 25px;}
    }
    
    @media only screen and (max-width:991px){
        .main-gallery .container {grid-template-columns: repeat(3, 1fr); grid-gap: 25px;}
    }
    @media only screen and (max-width:768px){
        .main-gallery .container {grid-template-columns: repeat(2, 1fr); grid-gap: 15px;}
    }
    
    @media only screen and (max-width:500px){
        .main-gallery h4{
        font-size: 16px;
        margin-bottom: 20px;
        }
    }


.process-step-container{ display: grid; gap: 30px; grid-template-columns: repeat(3,1fr);}
.work-process-section .process-step{ border: 1px solid var(--thm-base2-light); overflow: hidden; position: relative; background-color: var(--thm-section-bg); }
.work-process-section .process-step h5{ font-weight: 700; margin: 10px 0px;}
.work-process-section .process-step .process-icon{ padding: 10px;}
.work-process-section .process-step .process-icon .step-num{ position: absolute; background-color: var(--thm-base2); padding: 8px 10px; color: var(--thm-white); top: -1px; right: 0; z-index: 1; box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 8px; font-weight: 600;}
.work-process-section .process-step .process-icon .description{ margin-bottom: 0px;}
.work-process-section .process-step ul li{
    list-style: inside;
    margin-left: 14px;
}



.customised-hinges-process .grid { display: grid; grid-template-columns: 1fr; gap: 32px;}
@media (min-width: 992px) {
    .customised-hinges-process .grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
.customised-hinges-process .grid .card { background: var(--thm-white); padding: 0px; border: none; /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); border: 1px solid #e2e8f0; */}
.customised-hinges-process .grid .card .process-card { background: #f9fafb; border: 1px solid #e2e8f080; border-left: 4px solid var(--thm-base); border-radius: 4px; padding: 18px; margin-bottom: 30px; transition: all 0.3s ease;}
.customised-hinges-process .grid .card .process-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1);}
.customised-hinges-process .grid .card .process-card .step-number { width: 35px; height: 35px; border-radius: 50%; background: var(--thm-base); color: #fff; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; margin-right: 6px;}
.customised-hinges-process .grid .card .process-card h4 { font-weight: 700; margin-bottom: 0.5rem; display: inline-block;}
.customised-hinges-process .grid .card .process-card .description{ margin-bottom: 0;}


.customised-hinges-process .grid .hinge-box { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--thm-white); border: none; padding: 0px 20px;}
.customised-hinges-process .grid .hinge-box img{ border-radius: 4px; margin-bottom: 30px;}

.customised-hinges-process .grid .hinge-badge{ display: inline-flex; gap: 6px 10px; flex-wrap: wrap; margin-top: 10px;}
.customised-hinges-process .grid .hinge-badge p { display: inline-block; background: var(--thm-base); color: var(--thm-white); padding: 3px 15px; border-radius: 3px; font-size: 13px; font-weight: 500;}


.customised-hinges-cta .customised-hinges-cta-card {
    background: var(--thm-white);
    padding: 30px;
    max-width: 700px;
    margin: 0 auto;
    border: 1px solid #e2e8f0;
}