@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face{
    src: url(../fonts/Palatino-Linotype/palatinolinotype_roman.ttf);
    font-family: "Palatino Linotype";
}

*{
    font-family: "Poppins", sans-serif;
    margin: 0;padding: 0;
}
:root{
    --thm-font: "Poppins", sans-serif;
    --thm-font2: "Palatino Linotype", sans-serif;
    --thm-base: #702013;
    --thm-base-light: #70201330;
    --thm-base2: #461215;
    --thm-base2-light: #46121520;
    --thm-black: #000000;
    --thm-black-ligth: #00000040;
    --thm-gray: #999999;
    --thm-line: #ffffff30;
    --thm-white: #ffffff;
    --thm-section-bg: #2b2b2b;
    --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: 40px; font-weight: 500;} 
h2{ font-size: 30px; font-weight: 400;} 
h3{ font-size: 20px;} 
h4{ font-size: 20px; font-weight: 600;} 
h5{ font-size: 18px; font-weight: 600;} 
h6{ font-size: 14px;}
a{ color: var(--thm-black); text-decoration: none; font-weight: 400; transition: 0.5s;}
a:hover {color: var(--thm-base); }
.mb-80{ margin-bottom: 80px;}
.mt-80{ margin-top: 80px;}
.container{ max-width: 1250px;}
.heading-tag{ display: inline-flex; gap: 5px; align-items: center; text-transform: uppercase; font-size: 16px; color: var(--thm-base); margin-bottom: 12px; font-weight: 600;}
.heading-tag img{ max-width: 80px; margin-top: -10px;}
.heading-content{ text-align: center; margin-bottom: 30px;}
.heading{ color: var(--thm-black); margin-bottom: 10px; font-family: var(--thm-font2);}
.description{ font-size: 15px; margin-bottom: 15px; color: var(--thm-primary);}
.description.dcolor{ color: #dddddd99;}

.owl-dots { text-align: center !important;}
.owl-dot { width: 10px; height: 10px; margin: auto; background-color: var(--thm-base2-light) !important; margin: 0 3px; margin-top: 40px !important;}
.owl-dots .active { background-color: var(--thm-base2) !important;}

.btn-box{ color: var(--thm-white); background: var(--thm-base) none repeat scroll 0 0; border: none; padding: 14px 24px; cursor: pointer; display: inline-block; letter-spacing: 0; line-height: 1; margin-bottom: 0; overflow: hidden; position: relative; text-align: center; text-transform: none; touch-action: manipulation; transition: all .3s ease 0s; -webkit-user-select: none; user-select: none; -moz-user-select: none; vertical-align: middle; white-space: nowrap; z-index: 1; font-size: 14px; font-weight: 600; text-transform: uppercase;}
.btn-box:before { background: var(--thm-base2); border-radius: 50%; content: ""; height: 300%; width: 250%; left: -210%; position: absolute; top: -100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); transition-duration: .8s; z-index: -1;}
.btn-box:hover{ color: var(--thm-white);}
.btn-box:hover::before{ left: 0%;}

.btn-box.style1{ color: var(--thm-base); background: transparent none repeat scroll 0 0; border: 1px solid var(--thm-base);}
.btn-box.style1:hover{ color: var(--thm-white); background: var(--thm-base) none repeat scroll 0 0; border: 1px solid var(--thm-base);}
.btn-box.style2{ color: var(--thm-white); background: transparent none repeat scroll 0 0; border: 1px solid var(--thm-white);}
.btn-box.style2:hover{ color: var(--thm-white); background: transparent none repeat scroll 0 0; border: 1px solid var(--thm-base);}
.btn-box.style3{ color: var(--thm-white); background: var(--thm-base2) none repeat scroll 0 0;}
.btn-box.style3:hover{ color: var(--thm-white); background: transparent none repeat scroll 0 0;}
.btn-box.style4{ color: var(--thm-white); background: transparent; border: 1px solid var(--thm-white);}
.btn-box.style4:before{ background: var(--thm-white);}
.btn-box.style4:hover{ color: var(--thm-black);}

header{ background-color: #ffffff; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px;}
.top-header-bg{ background-color: var(--thm-base2);}
.top-header{ display: flex; justify-content: space-between; padding: 10px 180px;}
.top-header div{ display: flex; align-items: center;}
.top-header .header-tag-line{ display: flex; gap: 6px; color: var(--thm-white);}
.top-header a{ font-size: 14px; color: var(--thm-white);}
.top-header a:hover{ color: var(--thm-base);}
.top-header i{ font-size: 18px; color: var(--thm-white);}
.top-header p{ font-size: 14px; color: var(--thm-white);}
.top-header .social-media-container div{ display: flex; gap: 10px; border-right: 1px solid var(--thm-gray); padding: 0px 20px;}
.top-header .social-media-container div:last-child{ border: none; padding-right: 0px;}
.top-header .social-media-container .social-media{ display: flex; gap: 20px;}
.top-header .social-media-container .social-media a{ position: relative; z-index: 2;}
.top-header .social-media-container .social-media a i{ font-size: 14px; margin-bottom: 2px;}
.top-header .social-media-container .social-media a::before{ position: absolute; content: ""; width: 0px; height: 0px; background-color: var(--thm-white); top: 48%; left: 49%; transform: translate(-50%, -49%); z-index: -1; border-radius: 50%; transition: 0.3s;}
.top-header .social-media-container .social-media a:hover i{ color: var(--thm-base);}
.top-header .social-media-container .social-media a:hover::before{ width: 30px; height: 30px;}

.nav-bar{ background-color: transparent; padding: 8px 150px; display: flex; justify-content: space-between; align-items: center;}
.nav-bar .logo img{ max-width: 220px;}
.menu{ display: flex; gap: 10px;}
.menu li{ position: relative; display: flex; gap: 5px; align-items: center; background-color: transparent; padding: 3px 10px; transition: 0.5s; border: 1px solid transparent;}
.menu li a{ font-weight: 600; text-transform: uppercase;}
.menu li i{ margin-top: 0px; font-size: 15px;}
.menu li:hover{ border: 1px solid var(--thm-base); background-color: #f7f7f7;}
.menu li:hover a{ color: var(--thm-base);}
.menu .active{ border: 1px solid var(--thm-base); background-color: #f7f7f7;}
.menu .active a{ color: var(--thm-base);}

.nav-connect{ display: flex; gap: 15px; align-items: center;}
.nav-connect div > a i{ font-size: 20px; padding: 15px; border-radius: 50%; background: linear-gradient(180deg, var(--thm-base) 0%, var(--thm-base) 50%, var(--thm-base2) 100%); color: var(--thm-white);}
.nav-connect .call{ display: flex; gap: 10px; align-items: center;}
.nav-connect .call a{ display: block; line-height: 1.1; font-weight: 600; font-size: 15px;}
.nav-connect .call a:hover{ color: var(--thm-base);}
.nav-connect .call a span{ font-size: 14px; font-weight: 600; opacity: 0.4;}

.drop-down{ position: relative;}
.menu .drop-down{ position: relative;}
.menu .drop-down .drop-down-menu{ width: 350px; position: absolute; z-index: 9999999; top: 80px; left: 0px; background-color: var(--thm-white); padding: 10px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; opacity: 0; z-index: -1; transition: 0.5s; visibility: hidden;}
.menu .drop-down .drop-down-menu .menu-left{ background-color: #f7f7f7;}
.menu .drop-down .drop-down-menu .menu-left li{ border-bottom: 1px solid #00000015; margin-bottom: 2px;}
.menu .drop-down .drop-down-menu .menu-left li:last-child{ border-bottom: none;}
.menu .drop-down .drop-down-menu .menu-left li a{ text-transform: capitalize; padding: 3px 5px; font-size: 15px;   transition: 0.5s; width: 100%; color: var(--thm-black);}
.menu .drop-down .drop-down-menu .menu-left li:hover{ border: 1px solid var(--thm-base);}
.menu .drop-down .drop-down-menu .menu-left li:hover a{ color: var(--thm-base);}
.menu .drop-down .drop-down-menu .arrow-top{ position: absolute; z-index: 100; top: -12px; background-image: url(../images/menu-down-arrow.svg); background-position: center top; background-repeat: no-repeat; height: 12px; width: 27px; text-align: center; left: 15%; transform: translatex(-15%);}
.menu .drop-down:hover .drop-down-menu{ opacity: 1; z-index: 40; visibility: visible;}
.megamenu-open{ display: none;}
.menu .drop-down .drop-down-menu .menu-left .active-service{ background-color: var(--thm-base);}
.menu .drop-down .drop-down-menu .menu-left .active-service a{ color: var(--thm-white);}
.menu .drop-down .drop-down-menu .menu-left li.active-service:hover a{ color: var(--thm-white);}

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

/* ==================== 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;}


.banner-section{ position: relative; min-height: 750px; background-image: url(../images/image-3.jpg); background-repeat: no-repeat; background-size: cover; overflow: hidden;}
.banner-section .shape-1 { position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; animation: slide-right-sm 5s ease 1;}
.banner-section .shape-2 { position: absolute; bottom: -4px; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: bottom left; z-index: 1; animation: slide-right-sm 5s ease 1; opacity: 0.5;}
.banner-section .shape-3 { position: absolute; bottom: -4px; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: bottom left; animation: slide-right-sm 5s ease 1; opacity: 0.2;}
.banner-section .shape-4 { position: absolute; right: 0px; bottom: -2px; width: 100%; height: 100%; background-repeat: no-repeat; background-position: bottom right; animation: slide-left-sm 5s ease 1;}
.banner-section .shape-5 { position: absolute; bottom: -2px; right: 170px; width: 100%; height: 100%; background-repeat: no-repeat; background-position: bottom right; animation: slide-left-sm 5s ease 1; display: none;}
.banner-section .shape-6 { position: absolute; bottom: -3px; right: -5px; width: 100%; height: 100%; background-repeat: no-repeat; background-position: bottom right; animation: slide-left-sm 5s ease 1; opacity: 0.5;}
@keyframes slide-right-sm{
    0% { -webkit-transform: translateX(-100%); transform: translateX(-100%);}
    100% { -webkit-transform: translateX(0px); transform: translateX(0px);}  
}
@keyframes slide-left-sm{
    0% { -webkit-transform: translateX(100%); transform: translateX(100%);}
    100% { -webkit-transform: translateX(0px); transform: translateX(0px);}
}
.banner-section .banner-silder .banner-content{ max-width: 580px; z-index: 20; padding: 200px 0px;}
.banner-content h6{ display: inline-flex; gap: 6px; align-items: center; color: var(--thm-base); margin-bottom: 5px; background-color: #ffffff80; padding: 7px 15px 7px 5px; font-weight: 500;}
.banner-content h6 img{ max-width:70px;}
.banner-content h1{ color: var(--thm-white); margin-bottom: 15px; font-weight: 100; font-family: var(--thm-font2);}
.banner-content p{ color: var(--thm-white); margin-bottom: 20px; font-weight: 300;}
.banner-btn{ display: flex; gap: 15px;}

.roofing-points-section{ background-color: var(--thm-base2); padding: 80px 0px; position: relative;}
.roofing-points-section .bg-shape-1{ position: absolute; background-image: url(../images/shapes-img/shape-27.png); bottom: 0px; width: 100%; height: 100%; background-repeat: no-repeat; background-position: bottom left;}
.roofing-points-section .bg-shape-2{ position: absolute; background-image: url(../images/shapes-img/shape-28.png); bottom: 0px; width: 100%; height: 100%; background-repeat: no-repeat; background-position: bottom right;}
.roofing-points-section .roofing-points{ background-color: var(--thm-white); padding: 20px; position: relative; padding-bottom: 20px; overflow: hidden; transition: 0.5s; z-index: 1;}
.roofing-points-section .roofing-points i{ display: inline-block; font-size: 20px; margin-right: 2px;}
.roofing-points-section .roofing-points h4{ display: inline-block; font-size: 23px; margin-bottom: 8px; padding-bottom: 5px; font-weight: 500; border-bottom: 1px solid var(--thm-base2-light);   font-family: var(--thm-font2);}
.roofing-points-section .roofing-points .shape-box{ position: absolute; background-color: var(--thm-base); padding: 22px; border-radius: 50% 0 0; right: -15px; bottom: -12px; z-index: -1; transition: 0.2s;}
.roofing-points-section .roofing-points:hover .shape-box{ width: 100%; height: 100%; right: 0px; bottom: 0px; border-radius: 0;}
.roofing-points-section .roofing-points:hover h4{ color: var(--thm-white); border-bottom: 1px solid #ffffff20;  }
.roofing-points-section .roofing-points:hover .description,
.roofing-points-section .roofing-points:hover i{ color: var(--thm-white);}

.about-section .about-img{ border: 4px solid #702013; padding: 7px;}

.vismis-section{ background-image: url(../images/page-header-bg.jpg); background-position: right top; box-shadow: rgba(0, 0, 0, 0.07) 0px 3px 8px;}
.vismis-section .vismis-bg{ width: 55%; background-color: var(--thm-base); padding-left: calc((100% - 1270px) / 2);}
.vismis-section .vismis-bg .container{ padding: 80px 0px;}
.vismis-section .vismis-bg .vismis-content{ flex-wrap: wrap; padding-right: 80px;}
.vismis-section .vismis-bg .vismis-content div h4{ font-size: 36px; font-weight: 400; font-family: var(--thm-font2);color: var(--thm-white); margin-bottom: 10px; opacity: 0.7; border-bottom: 1px solid #ffffff20; padding-bottom: 8px;}
.vismis-section .vismis-bg .vismis-content .description{ color: #dddddd99;}
.vismis-section .vismis-bg .vismis-content.vis-content .description{ margin-bottom: 0px; list-style: disc; margin-left: 30px;}
.vismis-section .vismis-bg .vismis-content.vis-content .description b{ font-size: 16px; font-weight: 400; color: var(--thm-white);}

.vismis-section.about-vismis .vismis-bg{ width: 100%; padding-left: calc(0%)}
.vismis-section.about-vismis .vismis-bg .vismis-content{ padding-right: 0px;}

.our-service-section .service-container .service-items{ border: 1px solid var(--thm-footer); margin: 2px; padding: 10px; transition: 0.5s;}
.our-service-section .service-container .service-items .service-img{ margin-bottom: 10px;}
.our-service-section .service-container .service-items .service-content{ background-color: #f7f7f7; padding: 15px 15px 50px; position: relative; overflow: hidden;}
.our-service-section .service-container .service-items .service-content h3{ margin: 0px 0px 10px 0px; padding-bottom: 8px; border-bottom: 1px solid var(--thm-base2-light);}
.our-service-section .service-container .service-items .service-content h3 a{ font-weight: 600; color: var(--thm-base2); transition: 0.5s;}
.our-service-section .service-container  .service-items .service-content .btn-box{ padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; text-align: left; font-size: 14px; width: 93%; position: absolute; bottom: 10px;}
.our-service-section .service-container .service-items:hover{ box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px; }

.our-service-section.service-page .service-container.service-container-items{ display: grid; gap: 30px; grid-template-columns: repeat(1, 1fr);}
.our-service-section.service-page .service-container.service-container-items .service-items{ display: flex; gap: 15px;}
.our-service-section.service-page .service-container.service-container-items .service-items .service-img{ margin-bottom: 0px;}
.our-service-section.service-page .service-container.service-container-items .service-items .service-img img{ max-width: 400px; height: 100%; object-fit: cover;}
.our-service-section.service-page .service-container.service-container-items .service-items .service-content{ padding: 15px; margin: 0px; min-height: auto;}
.our-service-section.service-page .service-container  .service-items .service-content .btn-box{ display: inline-flex; gap: 20px; width:auto; position: static;}

.wcu-section .wcu-container{ display: grid; grid-template-columns: repeat(3, 1fr); align-items: center;}
.wcu-section .wcu-container .wcu-items{ margin-bottom: 20px;}
.wcu-section .wcu-container .wcu-items i{ font-size: 30px; color: var(--thm-base); border-bottom: 1px solid var(--thm-base); padding-bottom: 8px; margin-bottom: 8px;}
.wcu-section .wcu-container .wcu-items h5{ margin-bottom: 6px; color: var(--thm-base);}

.wcu-section .wcu-container .wcu-img img{ max-width: 90%;}
.wcu-section .wcu-container .text-right .wcu-items{ text-align: right;}
.wcu-section .wcu-btn{ text-align: center; margin-top: 40px;}
.wcu-section .wcu-container .wcu-items:hover i{ animation: rotate-icon 0.3s linear;}
@keyframes rotate-icon{
    to{ transform: scaleX(-1);}
}
.wcu-section.wcu-page-section .wcu-container.wcu-page-container{ display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr);}
.wcu-section.wcu-page-section .wcu-container.wcu-page-container .wcu-items{ padding: 15px; border: 1px solid var(--thm-light); margin-bottom: 0px; transition: 0.5s;}
.wcu-section.wcu-page-section .wcu-container.wcu-page-container > .wcu-items:hover{ border: 1px solid transparent; box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 8px;}
.wcu-section.wcu-page-section .wcu-container.wcu-page-container > .wcu-items .description{ margin-bottom: 0px;}

/* .brands-section { padding: 40px 40px; padding-left: 350px; background-color: var(--thm-base2);}
.brands-section .brands-silder img{ padding: 15px 30px; border-radius: 4px; filter: grayscale(100); background-color: var(--thm-footer); transition: 0.5s;}
.brands-section .brands-silder img:hover{ filter: grayscale(0);} */

.testimonials-section{ padding: 80px 0px; background-color: #f7f7f7;}
.testimonials-section .testimonials-silder-div{ padding: 25px; background-color: var(--thm-white); position: relative; margin: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 8px;}
.testimonials-section .testimonials-silder-div .person-info{ display: flex; gap: 10px; align-items: center; margin-bottom: 0px;}
.testimonials-section .testimonials-silder-div .person-info div h5{ font-weight: 600;}
.testimonials-section .testimonials-silder-div .person-info div img{ width: 100% !important;}
.testimonials-section .testimonials-silder-div .person-info .reating{ font-size: 12px; color: var(--thm-base); transition: 0.5s; margin-top: 2px;}
.testimonials-section .testimonials-silder-div .comma-icon .comma-img{ position: absolute; bottom: 20px; right: 40px; width: 12% !important; opacity: 0.2;}

.callToAction-section{ background-color: var(--thm-base2); padding: 50px 0px; position: relative; overflow: hidden;}
.callToAction-section .cta-bg img{ position: absolute; right: 0; bottom: -10px; opacity: 0.1; max-width: 40%;}
.callToAction-section .callToAction-container{ color: var(--thm-white);}
.callToAction-section .callToAction-container p b{ font-weight: 500px; padding: 10px 0px;}
.callToAction-section .callToAction-container .callToAction-btn{ display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 20px;}
.callToAction-section .callToAction-container .callToAction-btn br{ display: none;}
.callToAction-section .callToAction-container .callToAction-btn a{ font-size: 16px;}
.callToAction-section .callToAction-container .callToAction-btn span{ font-size: 24px; font-family: var(--thm-font2);}

.callToAction-section.callToAction2-section{ background-image: url(../images/contact-bg-new.jpg); background-position: center; background-size: cover; padding: 60px 0px;}
.callToAction-section.callToAction2-section .callToAction-container .callToAction-btn{ justify-content: center;}

.footer-section{ background-color: var(--thm-base2);}
.footer-container{ padding: 50px 10px 30px 10px;}
.footer-logo a img{ margin-bottom: 20px; max-width: 210px;}
.footer-container .description{ color: #ffffff99;}
.footer-container .sub-heading{ font-size: 32px; font-weight: 400; display: inline-block; font-family: var(--thm-font2); color: #ffffff99; padding-bottom: 4px; border-bottom: 1px solid #ffffff60; margin-bottom: 25px;}
.footer-services{ display: grid; gap: 0px 10px; grid-template-columns: repeat(2, 1fr);}
.footer-services li{ margin-bottom: 8px; overflow: hidden;}
.footer-services li a{ display: inline-flex; color: #ffffff99; transition: 0.5s; position: relative;  padding-bottom: 4px; font-size: 15px;}
.footer-services li a:hover{ color: var(--thm-white); }
.footer-contact > a{ display: flex; gap: 10px; align-items: center; margin-bottom: 10px; color: var(--thm-footer);}
.footer-contact p{ display: inline-flex; gap: 10px; align-items: center; margin-bottom: 10px; margin-right: 15px; color: var(--thm-footer); padding-bottom: 10px; border-bottom: 1px solid var(--thm-line);}
.footer-contact p:last-child{ display: flex; gap: 10px; align-items: center; margin-bottom: 10px; color: var(--thm-footer); padding-bottom: 0px; border-bottom: none;}
.footer-contact p a{ color: #ffffff99; font-size: 15px;}
.footer-contact a:hover{ color: var(--thm-white);}

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

.breadcrumb-section .breadcrumb-bg { background-image: url(../images/page-header-bg.jpg); padding: 70px 0px; background-size: cover; background-position: center top;}
.breadcrumb-section .breadcrumb-heading { text-transform: uppercase; font-size: 30px; font-weight: 400; line-height: 1.0; font-family: var(--thm-font2); color: var(--thm-white);}
.breadcrumb-section .breadcrumb { display: inline-flex; margin-bottom: 0; list-style: none; align-items: center; margin-top: 7px; padding: 5px 14px; background-color: var(--thm-base2); box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 8px;}
.breadcrumb-section .breadcrumb .breadcrumb-item a { font-weight: 400; color: var(--thm-white);}
.breadcrumb-section .breadcrumb .breadcrumb-item { font-size: 15px;}
.breadcrumb-section .breadcrumb .symbol-breadcrumb { font-weight: 400; font-size: 12px; color: var(--thm-white); padding: 0px 8px; margin-top: 2px;} 
.breadcrumb-section .breadcrumb .breadcrumb-item.active { color: #ffffff99; font-weight: 400;}

.contact-info-section{ padding: 80px 0px; background-color: #f7f7f7;}
.contact-info{ display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr);}
.contact-info-item { display: flex; gap: 20px; align-items: center; padding: 12px; transition: 0.5s; border: 1px solid var(--thm-light);}
.contact-info-item i{ font-size: 26px; padding: 12px; color: var(--thm-white); background-color: var(--thm-base2); transition: 0.5s;}
.contact-info-item p{ color: var(--thm-gray); font-weight: 600; line-height: 1.3;}
.contact-info-item a{ color: var(--thm-primary); font-weight: 600;}
.contact-info-item:hover i{ color: var(--thm-base); background-color: var(--thm-base-light);}
.contact-info-item a:hover{ color: var(--thm-base);}
.contact-info-item:hover{ border: 1px solid var(--thm-base); box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 8px;}

.contact-info-social{ margin-top: 10px;}
.contact-info-social h4{ font-weight: 700;}
.contact-info-social .social-media{ display: inline-flex; gap: 20px; align-items: center; margin-top: 10px; border: 1px solid var(--thm-footer); padding: 10px 20px;}
.contact-info-social .social-media a{ position: relative; color: var(--thm-black); z-index: 2;}
.contact-info-social .social-media a::before{ position: absolute; content: ""; width: 0px; height: 0px; background-color: var(--thm-base); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%; transition: 0.3s;}
.contact-info-social .social-media a:hover{ color: var(--thm-white);}
.contact-info-social .social-media a:hover::before{ width: 40px; height: 40px;}

.form-section { width: 100%; margin: auto; padding: 40px; background-color: var(--thm-white); box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 8px;}
.form-heading { font-size: 22px; margin-bottom: 20px; color: var(--thm-black); font-weight: 600;}
.form-control { display: block; margin-top: 3px; padding: 10px 15px; font-size: 14px; border-radius: 0; 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; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
.form-select { margin-top: 3px; padding: 10px 15px; font-size: 14px; border-radius: 0; border: 1px solid var(--thm-footer); color: var(--thm-black);}
.form-select:focus { border: 1px solid var(--thm-color); box-shadow: var(--thm-base-light) 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: var(--thm-base-light) 0px 0px 0px 0.25rem;}
.form-section button{ width: 100%; border: none;}

.service-detail-page .side-bar{ margin-bottom: 30px; border: 1px solid var(--thm-base2-light); padding: 20px;}
.service-detail-page .side-bar li a{ display: flex; align-items: center; justify-content: space-between; padding: 12px 20px;}
.service-detail-page .side-bar li{ border-bottom: 1px solid #00000015;}
.service-detail-page .side-bar li:last-child{ border-bottom: none;}
.service-detail-page .side-bar li .btn-box{ color: var(--thm-base); background: #f7f7f7 none repeat scroll 0 0; border: 1px solid transparent;}
.service-detail-page .side-bar li .btn-box:hover{ color: var(--thm-white); background: var(--thm-base) none repeat scroll 0 0; border: 1px solid transparent;}
.service-detail-page .side-bar li .active-service{ color: var(--thm-white); background-color: var(--thm-base2);}
.service-detail-page .side-bar .call-container{ display: block; text-align: center; padding: 30px; background-color: var(--thm-base2-light); border-radius: 0px 0px 4px 4px;}
.service-detail-page .side-bar .call-container h4{ display: inline-block; font-size: 20px; font-weight: 600; margin-bottom: 15px; padding-bottom: 3px; border-bottom: 1px solid var(--thm-base-light);}
.service-detail-page .side-bar .call-container .service-call{ display: block; margin-bottom: 15px; font-weight: 600;}

.service-detail-page .service-detail-content h2{ font-size: 24px; font-weight: bold; margin-bottom: 15px; color: var(--thm-base);}
.service-detail-page .service-detail-content strong{ color: var(--thm-base2); font-size: 16px;}
.service-detail-page .service-detail-content h4{ font-size: 20px; font-weight: 600; margin-bottom: 15px; color: var(--thm-base);}
.service-detail-page .service-detail-content h5{ display: inline-flex; gap: 3px; align-items: center; font-size: 18px; font-weight: 600; margin-bottom: 10px; padding-bottom: 2px; border-bottom: 1px solid var(--thm-base-light); color: var(--thm-base2);}
.service-detail-page .service-detail-content h5 i{ font-size: 15px; color: var(--thm-base);}
.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;}