/* DETAILS
==================================================
	Theme Name: Temo
==================================================
*/

@charset "utf-8";

/*..............embedded fonts..............*/
/*  */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/*..............embedded fonts..............*/
/*..............custom fonts..............*/
/*..............custom fonts..............*/


:root {
    /* General Transitions */
    --transition-common: all 0.4s ease;

    /* Colors */
    --color-accent: #9ECB6B;
    --color-primary: #46433A;
    --color-secondary: #010203;
    --color-tertiary: #03B8E0; /* 3rd */
    --color-quaternary: #F8F7F2; /* 4th */
    --color-quinary: #E8E6E3; /* 5th */
    --color-white: #ffffff;
    --color-black: #000;

    /* Font Settings */
    --ff-base: "Montserrat", sans-serif;
    --ff-title:"IBM Plex Serif", serif;
    --ff-awesome: "Font Awesome 6 Free";
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;

    /* Font Sizes */
    --f-size-XXL: clamp(2.25rem, 1.2196rem + 2.8379vw, 4.625rem); /* 74px-32px */
    --f-size-XL: clamp(1.75rem, 1.3784rem + 1.3514vw, 3rem); /* 48px-28px */
    --f-size-L: clamp(1.625rem, 1.3649rem + 0.9459vw, 2.5rem);/* 40px-26px */
    --f-size-M: clamp(1.25rem, 1.1385rem + 0.4054vw, 1.625rem); /* 26px-20px */
    --f-size-S: clamp(1.1rem, 1.0135rem + 0.4054vw, 1.5rem);/*24px-30px*/
    --f-size-Body: clamp(1.125rem, 0.9257rem + 0.2703vw, 1.25rem);/*20px-18px*/
    --f-size-ES: clamp(0.938rem, 0.8378rem + 0.1358vw, 1rem);/*16px-14px*/
    --f-size-EES: clamp(0.8125rem, 0.7128rem + 0.136vw, 0.875rem);/*14px-12px*/

    /* Layout Adjustments */
    --margin-title: 0 0 25px 0;
    --margin-paragraph: 0 0 20px 0;
    --gap-60:60px;
    --gap-50:50px;
    --gap-40:40px;

    --border-radius-image: 10px;
    --padding-height: clamp(60px, 6.563vw, 120px);

    /* Form Styling */
    --form-height: 44px;
    --form-font-color: var(--color-primary);
    --form-placeholder-color: var(--color-primary);
    --form-border-radious: 4px;
    --form-holder-bg: var(--color-white);
}
  

/*..............common styles..............*/
html { overflow-x: hidden; }
body { margin: 0; padding: 0; font-family: var(--ff-base); font-size:var(--f-size-Body); font-weight: var(--fw-regular); color:var(--color-primary);overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { margin: var(--margin-title); padding:0; font-family: var(--ff-base); font-weight: var(--fw-bold); color: var(--color-secondary); line-height: 1.2; }
h1, h2, h3{ font-weight: var(--fw-semi-bold); letter-spacing: -1.5px;}
h1{ font-size: var(--f-size-XXL); /* 74px-32px */ } 
h2{ font-size: var(--f-size-XL); /* 48px-28px */} 
h3{ font-size: var(--f-size-L);/* 40px-26px */}
h4{ font-size: var(--f-size-M);/* 26px-20px */}
h5{ font-size: var(--f-size-S);/*24px-18px*/}
h6{ font-size: var(--f-size-Body);/*20px-16px*/}

p { margin: var(--margin-paragraph); line-height: 1.4; }
p:last-child { margin-bottom: 0; }
:is(h1, h2, h3, h4, h5, h6):last-child { margin-bottom: 0; }
p strong { font-weight: var(--fw-bold); }

img{ max-width: 100%; user-select: none; -webkit-user-drag: none; }
figure { margin: 0; }
a, img{ border:0; text-decoration: none; outline: none;}
a, a:link, a:visited, a:focus, a:hover { color: var(--color-accent); outline: none; text-decoration: none; transition:var(--transition-common);}
a:hover{ text-decoration:none;}
ul{ padding: 0; margin: 0; list-style: none;}
em{ font-weight: var(--fw-medium); font-family: var(--ff-title);}
em p{ font-family: var(--ff-base);}

form .row{ --bs-gutter-x: 20px;}
.form-row{ margin-bottom: 16px;}
form .button-row{ margin-top: 10px;}
.form-control { border: 1px solid #C0B289 !important; outline: none; background-color: var(--form-holder-bg) !important; box-shadow: none !important; color: var(--form-font-color) !important; font-weight: var(--fw-regular); height: var(--form-height); min-height: auto; border-radius: var(--form-border-radious); font-size: var(--f-size-ES) !important; padding: 2px 16px !important;}

select.form-control { appearance: none; -webkit-appearance: none; height: var(--form-height) !important; padding-right: 40px !important; background-image: url(../images/btm-arrow.svg); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px;  }
textarea.form-control{ height: 100px !important; padding-top: 10px !important; resize: none;}
input[type="checkbox"] { width: 18px; height: 18px !important; border: 1px solid #B0ABA1 !important; border-radius: 3px !important; }
.form-check{ padding: 0;}
.form-check .form-check-input{ box-shadow: none !important; margin: 0; float: none;}
label.form-check-label { margin-bottom: 0 !important; }
.form-check-input:checked[type=checkbox] { background-color: var(--color-accent) !important; }

::placeholder { color: var(--form-placeholder-color) !important; opacity: 1; display: none; }
::-ms-input-placeholder { color: var(--form-placeholder-color) !important; display: none; }
textarea.form-control::placeholder { color: var(--form-placeholder-color) !important; display: none; }

form label { transition: all 0.4s; }

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; -webkit-text-fill-color: var(--color-black) !important; transition: background-color 9999s ease-out, color 9999s ease-out; transition-delay: 9999s; }


/*CF7*/
form .labelanime label{background-color: #fffaf1;transform: translateY(-8px) translateX(14px);height: auto;line-height: 1;font-size: 16px;color: #999999;}
span.wpcf7-spinner.spinner-border.spinner-border-sm.ajax-loader {position: absolute; /*top: 23px;*/ left: unset; right: 15px; bottom: 37%; width: 15px; min-width: 15px; height: 15px; z-index: 2; max-height: 20px; max-width: 20px; border: 1px solid var(--color-white); opacity: 1 !important; background-color: transparent !important;border-right-color: #00000000 !important;     display: unset;
    transform: unset;}
span.wpcf7-spinner.spinner-border.spinner-border-sm.ajax-loader::before{display: none;}


/* --- only use for wordpress (Image alignment) --- */
.alignleft , .alignnone{float:left; margin:0 15px 10px 0;}
.alignright{float:right; margin:0 0 10px 15px;}
.aligncenter{margin:10px auto; display:block;}
.grecaptcha-badge { visibility: hidden; }
/* --- only use for wordpress (Image alignment) --- */


/* Utility Classes */
.padding-common { padding: var(--padding-height) 0; }
.background-cover { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.overlay-content { position: relative; z-index: 3; }
.responsive-image-wrapper { position: relative; overflow: hidden; }
.responsive-image-wrapper img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.subtitle{ display: inline-block; font-size: var(--f-size-EES); text-transform: uppercase; color: var(--color-black); padding-bottom: 2px; border-bottom: 2px solid var(--color-accent); margin-bottom: 15px; }
.max-width-715{ max-width: 715px;}
.row-gap-24{ row-gap: 24px;}
.padding-24{ padding: 24px;}
.rounded-8 { border-radius: 8px;}
.gap-48{ --bs-gutter-x: 48px; row-gap: 48px;}

.mt-60{ margin-top: var(--gap-60);}
.mb-60{ margin-bottom: var(--gap-60);}
.mb-50{ margin-bottom: var(--gap-50);}
.fade-bg{ background: var(--color-quaternary);}
.deep-bg{ background: #E5E0CE;}
.light-bg { background-color: var(--color-quaternary); }
.light-grey-bg { background-color: var(--color-quinary); }
.dark-bg { background-color: #7C7668; color: var(--color-white); }
.dark-bg h2, .dark-bg .subtitle { color: var(--color-white); }



/* --- Button Styles --- */
.btn, a.btn{ display: inline-block; background: var(--color-accent); border: 0 !important; border-radius: 50px; padding: 12px 32px; font-size: var(--f-size-EES); font-weight: var(--fw-medium); color: var(--color-secondary); text-align: center; text-transform: uppercase; cursor: pointer; overflow: hidden; position: relative; z-index: 1; transition: var(--transition-common); -webkit-transition: var(--transition-common); -moz-transition: var(--transition-common); -ms-transition: var(--transition-common); -o-transition: var(--transition-common); isolation: isolate; }
.btn::before, a.btn::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0;border-radius: 50px; background: var(--color-tertiary); width: 0; height: 100%; transition: var(--transition-common);}
.btn:hover, a.btn:hover{ background: var(--color-accent); color: var(--color-secondary);}
.btn:hover::before, a.btn:hover::before{ width: 100%;}

.btn.btn-secondary, a.btn.btn-secondary{ background: var(--color-tertiary);}
.btn.btn-secondary::before, a.btn.btn-secondary::before{ background: var(--color-accent);}

a.btn.btn-border, .btn.btn-border{ background: transparent; border: 1px solid var(--color-secondary) !important; color: var(--color-secondary);}
a.btn.btn-border::before, .btn.btn-border::before{ background: var(--color-secondary);}
.btn.btn-border:hover, a.btn.btn-border:hover{ border-color: transparent !important; color: var(--color-white);}

.btn.btn-border.border-white, a.btn.btn-border.border-white{ border-color: var(--color-white) !important; color: var(--color-white);}
.btn.btn-border.border-white::before, a.btn.btn-border.border-white::before{ background: var(--color-white);}
.btn.btn-border.border-white:hover, a.btn.btn-border.border-white:hover{ border-color: transparent !important; color: var(--color-secondary);}


.submit-btn.btn .wpcf7-submit { position: absolute; inset: 0; opacity: 0; border: 0; background: transparent; padding: 0; font-size: 0; }
.wpcf7-spinner { position: absolute; z-index: 1; pointer-events: none; top: 11px; right: 5px; margin: 0; width: 20px; height: 20px; }
.wpcf7-not-valid{ border-color: #dc3232 !important;}
.wpcf7-not-valid-tip{ font-size: var(--f-size-EES);}
/* --- Button Styles --- */

/* --- checkbox and radio button Styles --- */
.builder_radiobox ul li label{ font-weight: normal;}
.builder_radiobox ul li input[type="radio"]{ opacity: 0;}
.builder_radiobox ul li input[type="radio"]:empty ~ label{ position:relative; float:left; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; padding: 0 0 0 22px;}
.builder_radiobox ul li input[type="radio"]:empty ~ label:before{ position:absolute; display:block; top:2px; bottom:0; left:0; content:""; width:16px; height:16px; background:url('../images/radiobutton.png') left top no-repeat;}
.builder_radiobox ul li input[type="radio"]:checked ~ label:before{ background:url('../images/radiobutton.png') left bottom no-repeat;}
/* --- checkbox and radio button Styles --- */



/*-----scroll-bar-design----------*/
/* width */
::-webkit-scrollbar {width: 8px; height: 4px; }

/* Track */
::-webkit-scrollbar-track {box-shadow: inset 0 0 2px var(--color-accent); }
 
/* Handle */
::-webkit-scrollbar-thumb {background: var(--color-accent); border-radius: 50px; }
/*-----scroll-bar-design----------*/
 

/*-----Header design----------*/
.main-header { position: relative; z-index: 999; top: 0; width: 100%; left: 0; background: var(--color-white); -webkit-transition: var(--transition-common); -moz-transition: var(--transition-common); -ms-transition: var(--transition-common); -o-transition: var(--transition-common); transition: var(--transition-common); top: 0; }
.main-header .main-menu { margin-right: 25px; }
.main-header .header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; -webkit-transition: var(--transition-common); -moz-transition: var(--transition-common); -ms-transition: var(--transition-common); -o-transition: var(--transition-common); transition: var(--transition-common);}
.main-header .header-btn a:not(:last-child){ margin-right: 16px;}

.main-menu ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center;} 
.main-menu ul li { position: static;}
.main-menu ul > li:not(:last-child) { padding-right: 21px; }
.main-menu ul > li > a { display: block; color: var(--color-secondary); font-size: var(--f-size-ES); font-weight: var(--fw-medium); position: relative; -webkit-transition: var(--transition-common); -moz-transition: var(--transition-common); -ms-transition: var(--transition-common); -o-transition: var(--transition-common); transition: var(--transition-common); } 
.main-menu ul > li.menu-item-has-children > a { padding-right: 25px; }
.main-menu > ul > li > a { padding:30px 0;}
.main-menu > ul > li > a:before { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 4px; background: var(--color-accent); transition: var(--transition-common); }
.main-menu > ul > li:hover > a:before { width: 100%;}
.main-menu ul > li.menu-item-has-children > a:after { content: ""; position: absolute; top: 45%; right: 5px; box-sizing: border-box; height: 8px; width: 8px; border-style: solid; border-color: var(--color-secondary); border-width: 0px 1.5px 1.5px 0px; transform: rotate(45deg) translate(0, -50%); transition: border-width 150ms ease-in-out; margin: 0 auto; }

.main-menu ul li.menu-item.current-menu-item > a { color: var(--color-accent); font-weight: var(--fw-medium);}


body:before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: var(--transition-common); } /* Submenu open an overlay added*/
body.submenu-open:before { opacity: 1; visibility: visible;  transition: var(--transition-common); }
.submenu-open main { position: relative; z-index: -1; transition: var(--transition-common); }



/* =========================================
   MEGA MENU
========================================= */
.main-menu ul li .mega-menu { position: absolute; left: 0; right: 0; top: 100%; width: 100%; min-height: 400px; margin: 0 auto; overflow: hidden; background: var(--bs-white);  z-index: 999; opacity: 0; visibility: hidden; border-top: 1px solid #ccc; transition: var(--transition-common); }
.main-menu ul li:hover .mega-menu { opacity: 1; visibility: visible;}
.mega-menu-inner { max-width: 960px; margin: 0 auto;/* display: flex; justify-content: center; gap: 38px; */padding: 20px 10px; }
@media only screen and (min-width: 1200px) {
    .mega-menu-inner {
        max-width: 1140px;
    }
}
@media only screen and (min-width: 1400px) {
    .mega-menu-inner {
        max-width: 1320px;
    }
}
@media only screen and (min-width: 1600px) {
    .mega-menu-inner {
        max-width: 1496px;
    }
}


/* .mega-menu-products { width: calc(70% - 38px); display: flex; flex-wrap: wrap; gap: 35px; justify-content: center; }
.mega-product { width: calc(33.33% - 25px); } */
/* Product image */
.mega-product a.mega-product-image { padding-bottom: 65%; position: relative; border-radius: 15px; overflow: hidden; display: block; }
.mega-product a.mega-product-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.mega-product a.mega-product-image:hover img { transform: scale(1.04); }
.mega-product h3, .mega-link-item h3 { margin: 14px 0 7px; font-size: 14px; font-weight: bold; letter-spacing: -0.5px;}
.mega-product a, .mega-link-item h3 a { color: var(--color-black); }
.mega-product h3 span, .mega-link-item h3 span { transition: transform 0.2s ease; border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin-bottom: 1px; margin-left: 1px; transition: var(--transition-common); }
.mega-product h3 a:hover span, .mega-link-item h3 a:hover span { transform: rotate(-45deg) translate(3px, 2px);  -webkit-transform: rotate(-45deg) translate(3px, 2px);}
.mega-product p, .mega-link-item p { margin: 0 0 10px; color: #344054; font-size: 14px; line-height: 1.4; }
.mega-product ul, .mega-link-item ul { margin: 0; padding: 0; display: block; }
.mega-product li, .mega-link-item li { margin: 0 0 5px; padding: 0 10px; }
.mega-product li a, .mega-link-item li a { font-size: 14px !important; color: var(--color-secondary); font-weight: 600; text-decoration: underline; padding-left: 15px; position: relative; }
.mega-product li a:before, .mega-link-item li a:before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; background: #000; border-radius: 50%; }

/* =========================================
   RIGHT SIDE
========================================= */
/* .mega-menu-links {width: calc(30% - 38px); display: flex; flex-wrap: wrap;gap: 35px; justify-content: center; }
.mega-menu-links-inner { width: calc(33.33% - 25px); } */

.mega-link-item {
    padding: 0 0 14px;
    margin-bottom: 14px;

    border-bottom: 1px solid #e5e5e5;
}

.mega-link-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}




/*------css for new dropdown sub-menu end--------*/ 
body{ height: 100vh;}
.main-header .logo {transform: scale(1); transform-origin: left center; width: 20%; -webkit-transition: var(--transition-common); -moz-transition: var(--transition-common); -ms-transition: var(--transition-common); -o-transition: var(--transition-common); transition: var(--transition-common); }
.main-header .logo a{ display: inline-block; height: 32px;}
.main-header .logo a img{ width: auto; height: 100%; transition: var(--transition-common);}

.main-header .manu-part { width: 80%; }

.nav_btn { color: var(--color-white); font-size: 22px; text-align: right; display: none; }
.nav_close { display: none; color: var(--color-white); }

.main-header .contact-details-row{ font-size: var(--f-size-ES); font-weight: var(--fw-medium);color: var(--color-secondary);}
.main-header .contact-details-row:hover{ color: var(--color-accent);}
                                                                                                                                                    
/*==========mobile menu=========*/        
.main-header .hdr-rt { display: flex; align-items: center; justify-content: space-between; }
.main-header .hdr-rt.hdr-lt { gap: 50px; justify-content: flex-end; }
.main-header .user-sec {margin-left: 100px;display: flex;align-items: center; }
.menu-has-children.menu-has-children-open span img {transform: rotate(180deg);-webkit-transition: var(--transition-common); -moz-transition: var(--transition-common); -ms-transition: var(--transition-common); -o-transition: var(--transition-common); transition: var(--transition-common);}
.menu-has-children span img {transform: rotate(0deg); -webkit-transition: var(--transition-common); -moz-transition: var(--transition-common); -ms-transition: var(--transition-common); -o-transition: var(--transition-common); transition: var(--transition-common);}


.main-header.fixed { background: var(--color-white); position: fixed; width: 100%; box-shadow: 0 0 12px rgb(0 0 0 / 12%); transition: all 0.4s; -ms-transition: all 0.4s; -webkit-transition: all 0.4s; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(10px); }
.main-header.fixed .container.header-row { padding: 10px 0; } 
.main-header.fixed .logo { -webkit-transition: var(--transition-common); -moz-transition: var(--transition-common); -ms-transition: var(--transition-common); -o-transition: var(--transition-common); transition: var(--transition-common); }
.main-header.fixed .logo a{ height: 70px;}
/* HEADER FIX DESIGN END*/

 
/* ~~~~~~~~~~ mobile menu styling ~~~~~~~~~~ */

.mobile-menu-container{ position: fixed; z-index: 1; top: -100vh; left: -6%; right: -6%; background: var(--color-white); height: calc(100vh + 40px); opacity: 0;  -webkit-transition: all .35s ease-in-out; -moz-transition: all .35s ease-in-out; -o-transition: all .35s ease-in-out; transition: all .35s ease-in-out; display: none; z-index: -1;}
.mobile-menu-container ul.sub-menu {position: relative; max-height: 0; overflow: hidden; transition: max-height 0.6s ease-out;}
.mobile-menu-container ul.sub-menu.sub-menu-open {transform: scaleY(1); max-height: 300px;}
.mobile-menu-open .mobile-menu-container{ top: 0; transform: translateY(0); opacity: 1;}
.mobile-menu-open .mobile-menu-container { top: -40px; transform: translateY(0); opacity: 1; }


.mobile-menu-container .inner-container{ padding-top: 160px; height: 100vh; overflow-y: auto; position: relative;}
.mobile-menu {  max-width: 100%; padding-left: 25px; padding-right: 25px; padding-top: 80px; padding-bottom: 50px; margin: 0 auto; text-align: center;}
.mobile-menu ul{ margin: 0; padding: 0; list-style: none;}
.mobile-menu ul li{ display: block; margin: 10px 0;}
.mobile-menu ul li a { display: block; font-size: 30px; color: #273B7A ; padding: 4px 0; }
.mobile-menu > ul > li > a { border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.mobile-menu ul li.menu-item-has-children > a{padding-right: 15px;}

/* ===== mobile menu animation ===== */
.mobile-menu ul li{opacity: 0;-webkit-transform: translateX(-150px);transform: translateX(-150px);-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;transition: transform 0.4s, opacity 0.4s;}
.mobile-menu-open .mobile-menu ul li {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}
.mobile-menu-open .mobile-menu ul li:nth-child(1) {-webkit-transition-delay: 0.16s;transition-delay: 0.16s;}
.mobile-menu-open .mobile-menu ul li:nth-child(2) {-webkit-transition-delay: 0.24s;transition-delay: 0.24s;}
.mobile-menu-open .mobile-menu ul li:nth-child(3) {-webkit-transition-delay: 0.32s;transition-delay: 0.32s;}
.mobile-menu-open .mobile-menu ul li:nth-child(4) {-webkit-transition-delay: 0.40s;transition-delay: 0.40s;}
.mobile-menu-open .mobile-menu ul li:nth-child(5) {-webkit-transition-delay: 0.48s;transition-delay: 0.48s;}
.mobile-menu-open .mobile-menu ul li:nth-child(6) {-webkit-transition-delay: 0.54s;transition-delay: 0.54s;}
/* ===== mobile menu animation ===== */

.mobile-menu-open .mobile-menu ul li.btn { margin: 0 auto;  padding: 5px 5px;  max-width: 150px;}
.mobile-menu-open .mobile-menu ul li.btn a{color: var(--color-white);}
/*=========mobile menu===========*/

/*for header css*/
 
/* ~~~~~~~~~~ hamburger menu styling ~~~~~~~~~~ */
.hamburger-nav{ display: none; }

/*when turns close icon*/
.ham { 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; }
.hamRotate.active { transform: rotate(45deg); }
.hamRotate180.active { transform: rotate(180deg); }
.line { fill:none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke:var(--color-secondary); stroke-width:3.5; stroke-linecap:round; } 
/* .main-header.fixed .line { stroke: #3C5180; } */
.ham6 .top { stroke-dasharray: 41 172; }
.ham6 .middle { stroke-dasharray: 41 111; transform: translateX(1px); }
.ham6 .bottom { stroke-dasharray: 41 172; transform: translateX(1px);}
.ham6.active .top { stroke-dashoffset: -132px; }
.ham6.active .middle { stroke-dashoffset: -71px; }
.ham6.active .bottom { stroke-dashoffset: -132px; } 
/*when turns close icon*/

/* ~~~~~~~~~~ hamburger menu styling ~~~~~~~~~~ */
  

/* HOME PAGE START HERE ==========================*/
/* HOME PAGE START HERE ==========================*/
.hero-banner-section{ padding: 50px 0;}
.hero-banner-section .image-row-outer{ padding-left: 2%;}
/* .hero-banner-section .image-row { display: flex; gap: 16px; } */
/* .hero-banner-section .image-col{ width: 33.33%; flex: 1; transition: var(--transition-common);}
.hero-banner-section .img-box { height: 810px; border-radius: 8px; } */

/* .hero-banner-section .image-box-outer .image-info { max-width: 420px; position: absolute; z-index: 5; bottom: 0; left: 0; padding: 15px; opacity: 0; transition: var(--transition-common);}
.hero-banner-section .image-box-outer .image-info h4, .hero-banner-section .image-box-outer .image-info p{ color: var(--color-white);}
.hero-banner-section .image-box-outer .image-info .btn{ padding: 8px 25px; border-color: var(--color-white) !important; color: var(--color-white);}
.hero-banner-section .image-col:hover{width: 70%; flex: 0 0 auto;}
.hero-banner-section .image-col:hover .image-info{opacity: 1;} */

.logo-slider .logo-box { height: 130px; text-align: center; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.logo-slider .logo-box img{ width: auto; max-height: 100%;}

.hero-banner-section .image-row { display: flex; gap: 16px; }
.hero-banner-section .image-col { flex: 1 1 0; min-width: 0; transition: flex 0.4s ease; }
.hero-banner-section .image-col:hover { flex: 4 1 0; }
.hero-banner-section .img-box { position: relative; height: 810px; border-radius: 8px; overflow: hidden; }
.hero-banner-section .img-box::before{content: ""; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40.38%, #000000 100%);  position: absolute; z-index: 1; inset: 0;}
.hero-banner-section .img-box img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-banner-section .image-info { max-width: 450px; position: absolute; z-index: 5; bottom: 0; left: 0; padding: 25px; opacity: 0; visibility: hidden; transition: var(--transition-common); display: flex; flex-direction: column; gap: 30px; }
.hero-banner-section .image-info *{ transition: var(--transition-common);}
.hero-banner-section .image-info h4, .hero-banner-section .image-info p { color: var(--color-white); }
.hero-banner-section .image-info p{ font-size: var(--f-size-ES);}
.hero-banner-section .image-info .btn { padding: 8px 25px; border-color: var(--color-white) !important; color: var(--color-white); }
.hero-banner-section .image-col:hover .image-info { visibility: visible; opacity: 1; gap: 20px;}

.artical-card{ background: var(--color-quaternary); border-radius: 8px; height: 100%; transition: var(--transition-common);}
.artical-card .artical-card-image { padding-bottom: 72%; border-radius: 8px; margin-bottom: 24px; }
.artical-card .artical-card-image img{ transition: var(--transition-common);}
.artical-card .artical-card-info h6{ margin-bottom: 15px;}
.artical-card .artical-card-info p{ font-size: var(--f-size-ES); margin-bottom: 15px;}
.artical-card .artical-card-info p:last-child{ margin-bottom: 0;}
.artical-card-info ul { margin-bottom: 16px; }
.artical-card-info ul li { font-size: var(--f-size-ES); position: relative; padding-left: 12px;}
.artical-card-info ul li:not(:last-child) { margin-bottom: 5px;}
.artical-card-info ul li::before {content: ""; position: absolute; top: 10px; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: var(--color-primary);}
.artical-card:hover .artical-card-image img{ transform: scale(1.05);}

/* GET A QUOTE FORM SECTION ================== */
.quote-form-card { background-color: #7C7668; border-radius: 8px; padding: 65px; }
.quote-form-header{ max-width: 850px;}
.quote-form-header h3{ color: var(--color-white);}
.quote-form-row { row-gap: 20px; margin-bottom: 30px; }
.quote-form-input.form-control::placeholder { display: inline-block !important; color: rgba(255, 255, 255, 0.65) !important; opacity: 1 !important; }
.quote-form-input.form-control, .quote-form-select.form-control { background-color: #434137 !important; color: var(--color-white) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; height: 48px !important; border-radius: 4px !important; font-size: var(--f-size-ES) !important; padding: 0 16px !important; width: 100%; transition: var(--transition-common); }
.quote-form-select.form-control { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 12px !important; appearance: none !important; -webkit-appearance: none !important; }
.quote-form-input.form-control:focus, .quote-form-select.form-control:focus { background-color: #3e3b33 !important; border-color: var(--color-accent) !important; box-shadow: 0 0 0 0.25rem rgba(158, 203, 107, 0.25) !important; outline: 0; }
.quote-form-consent-wrap { margin-bottom: 30px; }
.quote-form-checkbox { width: 18px !important; height: 18px !important; border: 1px solid #B0ABA1 !important; border-radius: 3px !important; background-color: #434137 !important; margin-top: 3px !important; cursor: pointer; transition: var(--transition-common); }
.quote-form-checkbox:checked[type=checkbox] { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.quote-form-consent-label { cursor: pointer; }
.quote-form-consent-text { font-size: var(--f-size-EES); line-height: 1.5 !important; color: var(--color-white) !important; font-weight: var(--fw-regular); }

.form-check .wpcf7-list-item { margin: 0; }
.form-check .wpcf7-list-item label{ display: flex; gap: 1rem !important;}
.form-check .wpcf7-list-item .wpcf7-list-item-label{ font-size: var(--f-size-EES); line-height: 1.5; font-weight: var(--fw-regular); }
.quote-form-card .form-check .wpcf7-list-item .wpcf7-list-item-label{ color: var(--color-white);}

.premium-features-section .slider-arrow { gap: 16px; }
.premium-features-section .slider-holder{ padding-right: 20%; clip-path: inset( -100vw -100vw -100vw 0 );}
.premium-features-section .swiper { overflow: visible;}

.swiper-nav-btn { width: 64px; height: 64px; border-radius: 50%; background-color: #EAE6DC; color: var(--color-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-common); font-size: 16px; position: relative; isolation: isolate; overflow: hidden;}
.swiper-nav-btn::before{ content: ""; position: absolute; z-index: -1; inset: 0; margin: auto; border-radius: 50%; background-color: var(--color-accent); width: 0; height: 0; opacity: 0; transition: var(--transition-common);}
.swiper-nav-btn:hover { color: var(--color-secondary); }
.swiper-nav-btn:hover::before{ width: 100%; height: 100%; opacity: 1;}

.testimonial-section .wprev-slick-slider .wprevgoslick { padding: 0 65px; }
.testimonial-section .wprev-slick-slider .slickwprev-arrow { width: 48px !important; height: 48px !important; background: var(--color-accent) !important; border-radius: 50%; }
.testimonial-section .wprev-slick-slider .slickwprev-arrow::before{ content: ""; background: var(--color-primary) !important; width: 0; height: 0; border-radius: 50%; position: absolute; z-index: 1; inset: 0; margin: auto; transition: var(--transition-common);}
.testimonial-section .wprev-slick-slider .slickwprev-arrow::after { content: ""; position: absolute; z-index: 3; inset: 0; background: url(../images/arrow-testimonial.svg); background-position: center !important; background-size: 10px !important; background-repeat: no-repeat !important; transition: var(--transition-common);}
.testimonial-section .wprev-slick-slider .slickwprev-arrow.slickwprev-prev::after{ transform: scaleX(-1);}
.testimonial-section .wprev-slick-slider .slickwprev-arrow:hover::before{ width: 100%; height: 100%; opacity: 1;}
.testimonial-section .wprev-slick-slider .slickwprev-arrow:hover::after{ filter: brightness(0) invert(1);}


.premium-features-slider { padding-bottom: 5px; }

.feature-card { background-color: var(--color-white); border-radius: 8px; overflow: hidden; height: 100%; }
.feature-card a:not(.btn){ display: block;}
.feature-card-image { border-radius: 8px; padding-bottom: 60%; }
.feature-card-image::after{ content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 32.81%); }
.feature-card-image img { transition: var(--transition-common); }
.feature-card-label { position: absolute; z-index: 3; left: 0; bottom: 0; padding: 0 16px 16px; color: var(--color-white); font-size: var(--f-size-M); font-weight: var(--fw-bold);  max-width: 90%;}
.feature-card-info { padding: 16px 0 0 0; }
.feature-card-info p { font-size: var(--f-size-ES); color: var(--color-primary);}
.feature-card:hover .feature-card-image img { transform: scale(1.05); }

.premium-features-section .button-wrap { margin-top: var(--gap-40); }

/* .promotion-section{ background: url(../images/promotion-bg.jpg);} */
.promotion-section::after{ content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%); }
.promotion-section h2, .promotion-section p{ color: var(--color-white);}

.testimonial-section .slider-holder{ padding: 0 65px;}
.testimonial-card { background-color: var(--color-white); border-radius: 8px; padding: 30px; height: 100%; display: flex; flex-direction: column; align-items: center; }
.testimonial-section .slickwprev-list { padding-top: 35px; }
.testimonial-section .slickwprev-track { display: flex; flex-wrap: nowrap; }
.testimonial-section .slickwprev-slide{ height: auto;}
.testimonial-section .slickwprev-slide>div, .testimonial-section .slickwprev-slide .outerrevdiv, .testimonial-section .slickwprev-slide .indrevdiv { height: 100%; }
.testimonial-section .swiper-slide { height: auto; }
.testimonial-section .slickwprev-slide .outerrevdiv, .testimonial-section .slickwprev-slide .indrevdiv{ margin-bottom: 0 !important;}
.testimonial-section .slickwprev-slide .indrevdiv { background-color: var(--color-white) !important; border: 0; border-radius: 8px !important; padding: 30px; height: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 0; }
.testimonial-section .wpproslider_t15_H3_3 { font-size: var(--f-size-ES); font-weight: var(--fw-bold); color: var(--color-primary) !important; margin-bottom: 4px;}
.testimonial-section .wprev_showdate_T15{ font-size: var(--f-size-EES); color: #7C7668 !important; display: block;}
.testimonial-section .indrevtxt{ font-size: var(--f-size-ES); color: var(--color-primary) !important;}
.testimonial-section  .slickwprev-dots{ display: none !important;}

.testimonial-stars { color: #C1BCB0; margin-bottom: 20px; font-size: var(--f-size-ES); display: flex; gap: 4px; justify-content: center; }


.testimonial-user { margin-bottom: 20px; position: relative; }
.testimonial-avatar { width: 48px; height: 48px; margin: 0 auto 12px auto; position: relative; }
.testimonial-avatar img { border-radius: 50%; width: 100%; height: 100%; object-fit: cover; }

.testimonial-avatar-letter { border-radius: 50%; background-color: #EAE6DC; color: var(--color-primary); font-size: 24px; font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; line-height: 1; }

.avatar-badge { position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; border-radius: 50%; background-color: #ED6C02; color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 10px; border: 2px solid var(--color-white); }
.testimonial-name { font-size: var(--f-size-ES); font-weight: var(--fw-bold); color: var(--color-primary); margin-bottom: 4px; }
.testimonial-date { font-size: var(--f-size-EES); color: #7C7668; display: block; }
.testimonial-text { font-size: var(--f-size-ES); color: var(--color-primary); margin-bottom: 16px;}
.testimonial-thumbs { flex-wrap: wrap; gap: 8px;}
.testimonial-thumb-img { width: 65px; height: 45px; border-radius: 8px; overflow: hidden; }
.testimonial-thumb-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-common); }

.testimonial-section .swiper-nav-btn { width: 48px; height: 48px; background-color: var(--color-accent) !important; color: var(--color-secondary) !important; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; }
.testimonial-section .swiper-nav-btn::before{ background-color: var(--color-primary);}
.testimonial-section .swiper-nav-btn:hover { color: var(--color-white) !important; }
.testimonial-section .testimonial-prev { left: -10px; }
.testimonial-section .testimonial-next { right: -10px; }

.gallery-section .slider-holder{ padding-right: 5%; clip-path: inset(-100vw -100vw -100vw 0);}
.gallery-section .swiper { overflow: visible; }
.gallery-card a{ display: block; position: relative; padding-bottom: 95%; border-radius: 8px; overflow: hidden;}
.gallery-card a img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--transition-common);}
.gallery-card a:hover img{ transform: scale(1.05);}

/* FOOTER PART START HERE */
.main-footer{ background: var(--color-secondary); color: var(--color-white); }
.top-footer{ padding: 65px 0; }

.brand-widget{ display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 15px;}
.footer-logo { margin-bottom: 24px; }
.footer-logo a{ display: inline-block; height: 32px; width: auto; }
.footer-logo a img{ width: auto; height: 100%;}

.footer-btn-wrap { margin-bottom: 30px; }

.footer-widget-title h5{ font-size: var(--f-size-EES); font-weight: var(--fw-medium); color: var(--color-white); margin-bottom: 10px; letter-spacing: 0.5px; }

.footer-widget li a{ display: inline-block; font-size: var(--f-size-EES); color: var(--color-white);}
.footer-widget li a:hover{ color: var(--color-accent);  padding-left: 5px;}

.footer-contact-info li { margin-bottom: 20px; color: #A29E95; font-size: var(--f-size-ES); line-height: 1.5; }
.footer-contact-info li:last-child{ margin-bottom: 0;}
.footer-contact-info li a { color: #A29E95; transition: var(--transition-common); }
.footer-contact-info .contact-icon { color: var(--color-tertiary); font-size: 16px; margin-top: 3px; }
.social-icons ul { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.social-icons li a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #46433A; color: var(--color-white); display: flex !important; align-items: center; justify-content: center; transition: var(--transition-common); font-size: 14px; }

.social-icons li a:hover { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-secondary); transform: translateY(-3px); padding: 0;}

.bottom-footer { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 30px 0; }
.footer-copyright { display: flex; align-items: center; gap: 15px; }
.footer-copyright p { color: #7C7668; font-size: var(--f-size-EES); margin: 0; }
.footer-copyright p a { color: #7C7668; margin-left: 15px; transition: var(--transition-common); }
.footer-copyright p a:hover { color: var(--color-accent); }
.footer-copyright ul.footer-bottom-menu { display: flex; align-items: center; gap: 16px; margin-left: 10px; }
.footer-copyright ul.footer-bottom-menu li { display: flex; align-items: center; }
.footer-copyright ul.footer-bottom-menu li a { font-size: var(--f-size-EES); color: #7C7668; }

/* FOOTER PART END HERE */

/* INNER BANNER START HERE ==========================*/
.inner-banner-section { min-height: 750px; display: flex; align-items: center; justify-content: center; padding-block: var(--padding-height); }
.inner-banner-section .banner-img:after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(176, 171, 161, 0) 0%, rgba(1, 2, 3, 0.6) 70%); }
.inner-banner-section .banner-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inner-banner-section .banner-content { position: relative; z-index: 2; }
.inner-banner-section .banner-content h1 { color: var(--color-white);font-weight: var(--fw-medium);}
.inner-banner-section .banner-content h1 em { font-family: var(--ff-title); }
.inner-banner-section .banner-content p { color: var(--color-white); font-weight: var(--fw-semi-bold); max-width: 600px; letter-spacing: -2%; }
.inner-banner-section .breadcrumb li { color: #E5E0CE; text-transform: uppercase; font-size: var(--f-size-ES); }
.inner-banner-section .breadcrumb li a { font-weight: var(--fw-bold); color: var(--color-white);}
.inner-banner-section .breadcrumb-item+.breadcrumb-item::before { color: var(--color-white);}

/* ABOUT PAGE START HERE ==========================*/
.alternative-section .video-block { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; cursor: pointer; background: #000; }
.alternative-section .video-block img, .alternative-section .video-block video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.alternative-section .video-block video { display: none; }
.alternative-section .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; background: var(--color-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.35); transition: transform 0.25s ease, background 0.25s ease; z-index: 2; }
.alternative-section .play-btn::after { content: ""; border-left: 16px solid var(--color-white); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 6px }
.alternative-section .video-block:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); }
.alternative-section .video-block.is-playing .play-btn { display: none; }
.alternative-section .video-block.has-started img { display: none; }
.alternative-section .video-block.has-started video { display: block; }
.alternative-section .altern-content { padding-inline: 20px 0; }
.alternative-section .flex-row-reverse .altern-content { padding-inline: 0 20px; }
.altern-img-box { height: 100%; overflow: hidden; border-radius: 8px; }
.altern-img-box img { width: 100%; height: 100%; object-fit: cover;}
.alternative-section .altern-content ul { margin-bottom: 24px; }
.alternative-section .altern-content ul li { padding: 24px 32px; background-color: var(--color-white); border-radius: 8px; font-size: var(--f-size-ES); }
.alternative-section .altern-content ul li:not(:last-child) { margin-bottom: 8px;}
.alternative-section .altern-content .ul-style-2 ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.alternative-section .altern-content .ul-style-2 ul li { background-color:var(--color-quinary);  margin: 0; }
.alternative-section .altern-content ul:last-child{ margin-bottom: 0;}

.legacy-slider-wrap { position: relative; padding: 0 70px; margin-top: var(--gap-40);}
.legacy-slider { width: 100%; overflow: hidden; position: relative; }
.legacy-slide-card { background-color: #767061; border-radius: 12px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center;}
.legacy-slide-img { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; }
.legacy-slide-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.legacy-slide-content { color: var(--color-white); padding-right: 20px; }
.legacy-slide-content h3 { color: var(--color-white); font-size: 28px; font-weight: var(--fw-semi-bold); margin-bottom: 15px; line-height: 1.3; }
.legacy-slide-content p { color: rgba(255, 255, 255, 0.9); font-size: 16px; line-height: 1.6; margin-bottom: 0; }
.legacy-button-prev, .legacy-button-next { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; background-color: #EAE6DD; color: #231F20; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: var(--transition-common); font-size: 18px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); isolation: isolate; overflow: hidden;}
.legacy-button-prev::before, .legacy-button-next::before{ content: ""; position: absolute; z-index: -1; inset: 0; margin: auto; border-radius: 50%; background-color: var(--color-accent); width: 0; height: 0; opacity: 0; transition: var(--transition-common);}
.legacy-button-prev:hover::before, .legacy-button-next:hover::before { width: 100%; height: 100%; opacity: 1; }
.legacy-button-prev:hover, .legacy-button-next:hover { color: var(--color-secondary); }
.legacy-button-prev { left: 0; }
.legacy-button-next { right: 0; }
.why-temo-section { min-height: 590px; display: flex; align-items: center; }
.why-temo-section::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(176, 171, 161, 0) 0%, rgba(1, 2, 3, 0.7) 80%); z-index: 1; }
.why-temo-section .subtitle { color: var(--color-white) !important; }
.why-temo-section h2 { color: var(--color-white); font-size: var(--f-size-XL); font-weight: var(--fw-semi-bold); margin-bottom: 25px; }
.why-temo-section p { color: var(--color-white); font-size: var(--f-size-Body); }
.contact-form-wrap { padding-right: 30px; }
.contact-form .form-row { margin-bottom: 20px; }
.contact-form .form-control::placeholder { display: inline-block !important; color: var(--color-primary) !important; opacity: 1 !important; }

.contact-form .form-check-wrap { margin-top: 15px; margin-bottom: 30px; }
.contact-form .form-check { padding-left: 0; }
.contact-form .form-check-input { width: 20px !important; height: 20px !important; border: 1px solid var(--color-white) !important; border-radius: 4px !important; background-color: var(--color-white) !important; margin-top: 3px !important; cursor: pointer; flex-shrink: 0; float: none; margin-left: 0; }
.contact-form .form-check-input:checked { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.contact-form .form-check-input:checked[type=checkbox] { background-color: var(--color-accent) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23010203' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e") !important; }
.contact-form .form-check-label { font-size: var(--f-size-EES) !important; line-height: 1.6; color: #555146 !important; font-weight: 500; margin-bottom: 0 !important; cursor: pointer; }

.contact-image-wrap { height: 100%; overflow: hidden; border-radius: 8px; }
.contact-image-wrap img.contact-img { position: relative; width: 100%; height: 100%; object-fit: cover; }
/* ABOUT PAGE END HERE ==========================*/

/* SUNROOM PAGE START HERE */
.inner-banner-section.product-banner-section { min-height: 600px; }
.consultation-bar-section { background-color: var(--color-primary); padding: 60px 0; }
.consultation-bar-header{ margin-bottom: 24px;}
.consultation-bar-header h4 { color: var(--color-white); font-weight: var(--fw-semi-bold); letter-spacing: -0.5px; }


.consultation-bar-row { margin-bottom: 24px; }
.consultation-bar-card .form-control::placeholder { display: inline-block !important; color: var(--color-white) !important; opacity: 1 !important; }
.consultation-bar-card .form-control { background-color: rgba(0, 0, 0, 0.15) !important; color: var(--color-white) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; height: 46px !important; border-radius: 4px !important; font-size: var(--f-size-ES) !important; padding: 0 16px !important; width: 100%; transition: var(--transition-common); }
.consultation-bar-card select.form-control { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 12px !important; appearance: none !important; -webkit-appearance: none !important; }
.consultation-bar-card select.form-control option{ color: var(--color-black);}
.consultation-bar-consent-wrap { margin: 0 auto 30px auto; }
.consultation-bar-checkbox { width: 18px !important; height: 18px !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 3px !important; background-color: rgba(0, 0, 0, 0.15) !important; margin-top: 3px !important; cursor: pointer; transition: var(--transition-common); }
.consultation-bar-checkbox:checked[type=checkbox] { background-color: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.consultation-bar-consent-text { font-size: var(--f-size-EES) !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.7) !important; font-weight: var(--fw-regular); }

.feature-card.feature-card-2 .feature-card-image { padding-bottom: 72.29%; }
.feature-card.feature-card-2 .feature-card-label{ padding-right: 20px;}
.feature-card.feature-card-2 .feature-card-label::after { content: ""; border: solid var(--color-white); border-width: 0 2px 2px 0; display: inline-block; padding: 4px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position: absolute; z-index: 1; right: 0; top: 16px; }

.artical-card.artical-card-white{ background: var(--color-white);}
/* SUNROOM PAGE END HERE */

/* Career opportunities PAGE START HERE ==========================*/
.job-count { font-size: 16px; }
.job-list { display: flex; flex-direction: column; gap: 18px; }
.job-item { background: var(--color-quaternary); border-radius: 8px; padding: 32px; display: flex; justify-content: space-between; align-items: flex-start; gap: 25px; }
.job-content h4 { font-weight: var(--fw-medium); margin-bottom: 10px; }
.job-content p {  margin-bottom: 18px; }
.job-item .btn{ flex: 0 0 auto;}
/* Career opportunities PAGE END HERE ==========================*/

/* FEATURES PAGE START HERE ==========================*/
.wall-system-row .row { margin-top: var(--gap-50); }
.wall-system-section .image-wrapper { height: 100%; }
.wall-system-section .image-wrapper img { height: 100%; width: 100%; display: block; object-fit: cover; }
.wall-system-section .content-wrapper { background: var(--color-quaternary); border-radius: 8px; padding: 40px; height: 100%; }
/* FEATURES PAGE END HERE ==========================*/



/* Installation PAGE START HERE ==========================*/
.installation-process-section .artical-card { background: var(--color-primary); padding: 32px; color: var(--color-white); }
/* Installation PAGE END HERE ==========================*/

/* FAQ PAGE START HERE ==========================*/
.faq-accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: rgba(70, 67, 58, 0.15); --bs-accordion-border-width: 1px; }
.faq-accordion .accordion-item { border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid #C0B289; border-radius: 0 !important; background-color: transparent; }
.faq-accordion .accordion-button { background-color: transparent !important; color: var(--color-black) !important; font-family: var(--ff-base); font-size: var(--f-size-M); font-weight: var(--fw-semi-bold); box-shadow: none !important; padding: 24px 0 35px; text-align: left; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--color-black) !important; border-bottom: 0; }
.faq-accordion .accordion-button::after { width: 14px; height: 14px; background-size: 14px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23010203'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; transition: transform 0.25s ease; }
.faq-accordion .accordion-body { padding: 0 0 24px 0; font-family: var(--ff-base); font-size: var(--f-size-Body); line-height: 1.6; color: var(--color-primary); }
/* FAQ PAGE END HERE ==========================*/

/* PATIO COVER PAGE START HERE */
.slider-button-holder { position: relative; display: flex; align-items: center; gap: 15px; }
.slider-button-holder .legacy-button-prev, .slider-button-holder .legacy-button-next { position: relative; top: inherit; transform: inherit; }
.alternative-dark-bg .altern-content .ul-style-2 ul li { background-color: var(--color-primary); color: var(--color-white);}
.quality-card { background-color: #e7e5e0; border-radius: 10px; height: 100%; }
.quality-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.quality-card h6 { margin-bottom: 16px;}
.quality-card p { font-size: var(--f-size-ES);}
.card-row { margin-bottom: 24px; }
/* PATIO COVER PAGE END HERE */

/*COMMERCIAL APPLICATION PAGE START HERE */
.commercial-block-box { background-color: #7C7668; border-radius: 8px; height: 100%; }
.commercial-block-box h6 { color: var(--color-white); margin-bottom: 16px; }
.commercial-block-box p { color: var(--color-white); font-size: var(--f-size-ES); }
.alternative-section.temo-advantage-section .altern-content ul li{ background: var(--color-quinary);}
/*COMMERCIAL APPLICATION PAGE END HERE */

/* WARRANTY PAGE START HERE */
.alternative-section .altern-content .ul-style-3 ul li { background-color: var(--color-quinary);}
/* WARRANTY PAGE END HERE */

.benefit-card { background: var(--color-primary); padding: 32px; height: 100%;}
.benefit-card *{ color: var(--color-white);}
.benefit-card h6{ margin-bottom: 20px;}
.benefit-card p{ font-size: var(--f-size-ES);}
.benefit-card p a{ color: var(--color-white); text-decoration: underline;}
.benefit-card p a:hover{ color: var(--color-accent);}

.artical-card.artical-card-row .artical-card-image { padding-bottom: 77%; }

/* BLOG PAGE START HERE ==========================*/
.blog-card .post-date p{ color: #7C7668; font-size: var(--f-size-EES);}
.artical-card:has(.post-date) h6{ margin-bottom: 10px;}
.artical-card .post-date{ margin-bottom: 16px;}
/* BLOG PAGE END HERE ==========================*/

/* BLOG DETAILS PAGE START HERE ==========================*/
.toc-sidebar-wrapper { position: relative; margin-right: 5%;}
@media (min-width: 992px) {
    .toc-sidebar-wrapper {
        position: sticky;
        top: 20px; /* Accounts for the sticky header */
        z-index: 10;
    }
}
.toc-card { background-color: var(--color-quaternary); padding: 30px 24px; border-radius: 8px; }
.toc-title { text-transform: capitalize; }
.toc-list { padding: 0; margin: 0; list-style: none; }
.toc-list li { margin-bottom: 16px; }
.toc-list li:last-child { margin-bottom: 0; }
.toc-card li .toc-link { display: block; color: var(--color-primary); padding-left: 24px; margin-left: -24px; position: relative; }
.toc-card li .toc-link:hover { color: var(--color-secondary); padding-left: 28px; }
.toc-link::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background-color: #7C7668; opacity: 0; transition: all 0.3s ease; }
.toc-link.active { font-weight: var(--fw-bold) !important; color: var(--color-secondary) !important; }
.toc-link.active::before { opacity: 1; }

.blog-details .blog-main-image{ padding-bottom: 55%; }
.blog-details .blog-main-image img { width: 100%; height: auto; object-fit: cover; border-radius: var(--border-radius-image); }
.blog-details .blog-details-content .blog-detail-section:not(:last-child){ margin-bottom: 24px;}
.blog-intro-text p { color: var(--color-primary); margin-bottom: 20px; }
.blog-detail-section { transition: var(--transition-common); scroll-margin-top: 100px; }
.blog-detail-section h3 { font-size: var(--f-size-M); font-weight: var(--fw-bold); color: var(--color-secondary); margin-bottom: 15px; letter-spacing: -0.5px; }
.blog-detail-section p { color: var(--color-primary); margin-bottom: 15px; }
.blog-content-wrap p{ line-height: 1.5;}
.blog-detail-section p:last-child { margin-bottom: 0; }
.blog-post-tags-row { gap: 10px; border-top: 1px solid var(--color-quinary); padding-top: 32px; margin-top: 32px; border-top: 1px solid #B0ABA1;}
.blog-post-tags-row .icon { width: 15px; height: 15px; flex: 0 0 auto; transform: translateY(2px);}
.blog-post-tags-row .icon img{ display: block; width: 100%;}
.blog-post-tags-row .list{ flex: 1;}

.blog-post-tags-row ul { display: flex; flex-wrap: wrap; gap: 5px 10px; list-style: none; padding: 0; margin: 0; }
.blog-post-tags-row li{ display: flex; align-items: center; gap: 10px;}
.blog-post-tags-row li:not(:first-child)::before{ content: ""; display: block; width: 4px; height: 4px; background: #7C7668; border-radius: 50%;}
.blog-post-tags-row li a{ display: block; font-size: var(--f-size-EES); color: #7C7668;}
.blog-post-tags-row li a:hover{ color: var(--color-accent);}
/* BLOG DETAILS PAGE END HERE ==========================*/

/* AREAS WE SERVE PAGE START HERE ==========================*/
.areas-we-serve-section { background-color: var(--color-white); }
.state-accordion-item { border-bottom: 1px solid #E5E0CE; padding-bottom: 18px;}
.state-accordion-header { width: 100%; background: none; border: none; padding: 0; margin: 0; display: flex; justify-content: space-between; align-items: center; text-align: left; cursor: pointer; font-family: var(--ff-base); font-size: var(--f-size-M); font-weight: 500; color: var(--color-primary); transition: var(--transition-common); }
.state-accordion-header:hover { color: var(--color-accent); }
.state-accordion-header .state-icon { font-size: 0.875rem; color: #B0ABA1; transition: transform 0.3s ease; }
.state-accordion-header[aria-expanded="true"] .state-icon { transform: rotate(180deg); }
.state-accordion-body .city-list { display: flex; flex-wrap: wrap; gap: 10px 15px; padding-left: 0; list-style: none; margin: 0; padding-top: 15px; padding-bottom: 10px; }
.state-accordion-body .city-list li { width: calc(50% - 8px); line-height: 1;}
.state-accordion-body .city-list a { color: var(--color-primary); font-size: var(--f-size-ES); font-weight: 400;}
.state-accordion-body .city-list a:hover { color: var(--color-accent); }
@media (min-width: 768px) {
    .state-accordion-body .city-list li { width: calc(33.333% - 10px); }
}
/* AREAS WE SERVE PAGE END HERE ==========================*/

/* FIND A DEALER PAGE START HERE ==========================*/
.dealer-search-box { position: relative; max-width: 480px; margin-top: 30px; }
.dealer-search-box .form-control { width: 100%; background-color: var(--color-white) !important; border: 1px solid #B0ABA1 !important; border-radius: 4px; height: 50px; padding: 10px 45px 10px 20px !important; font-size: 15px !important; color: var(--color-secondary) !important; }
.dealer-search-box .form-control::placeholder { color: #8C867A !important; opacity: 1 !important; display: block !important; }
.dealer-search-box .search-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--color-accent); font-size: 18px; pointer-events: none; }
.dealer-map-container { position: relative; padding-bottom: 65%; overflow: hidden;}
.dealer-map-container iframe{ position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.border-top-line { border-top: 1px solid #C0B289; }
.dealers-count-text { font-family: var(--ff-base); font-size: 1.125rem; color: var(--color-primary); font-weight: 500; }
.find-dealer-box-outer { margin-top: 30px; }
.find-dealer-box { background-color: var(--color-white); border-radius: 8px; padding: 30px 24px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); }
.find-dealer-box .dealer-title { font-size: 1.125rem; font-weight: 700; color: var(--color-secondary); margin-bottom: 20px; }
.find-dealer-box .dealer-info-list { padding: 0; margin: 0; list-style: none; }
.find-dealer-box .dealer-info-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-size: var(--f-size-ES);  }
.find-dealer-box .dealer-info-list li:last-child { margin-bottom: 0; }
.find-dealer-box .dealer-info-list .info-icon { color: #8C867A; font-size: 14px; width: 18px; text-align: center; margin-top: 1px; flex-shrink: 0; }
.find-dealer-box .dealer-info-list .info-text { font-family: var(--ff-base); color: var(--color-primary); }
.find-dealer-box .dealer-info-list .info-text a { color: var(--color-primary); transition: color 0.2s ease; }
.find-dealer-box .dealer-info-list .info-text a:hover { color: var(--color-accent); }
.find-dealer-box .dealer-buttons-wrap { margin-top: 24px; }
.find-dealer-box .btn { font-size: var(--f-size-ES); padding: 5px 15px; }
/* FIND A DEALER PAGE END HERE ==========================*/

/* BOOK A FREE CONSULTATION PAGE START HERE ==========================*/
.book-free-consultation-section .form-holder{ padding-right: 2%;}
.book-free-consultation-section .section-title{ margin-bottom: 30px;}
.book-free-consultation-section .consent-text { font-size: var(--f-size-ES); line-height: 1.4; }
.book-free-consultation-section .image-box { padding-bottom: 95%; }
.book-free-consultation-section .image-box img{ width: 100%;}
/* BOOK A FREE CONSULTATION PAGE END HERE ==========================*/

/* 404 PAGE START HERE ==========================*/
.error-section{ min-height: calc(100dvh - 250px);}
/* 404 PAGE END HERE ==========================*/

/* LEGAL PAGE START HERE ==========================*/
.legal-details-section .details-info{ max-width: 900px;}
.legal-details-section .details-box:not(:last-child){ margin-bottom: var(--gap-50);}

/* Blog Category Post Listing START HERE ==========================*/
.blog-breadcrumb { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 16px; line-height: 1; font-weight: 500; text-transform: uppercase; letter-spacing: 0; }
.blog-breadcrumb__label { font-weight: 700; }
.blog-breadcrumb__label a, .blog-breadcrumb__label a:hover, .blog-breadcrumb__label a:focus { color: #fff !important; text-decoration: none; }
.blog-breadcrumb__separator { font-size: 20px; font-weight: 400; line-height: 0.8; }
.blog-breadcrumb__category { font-weight: 400; }


/*Media Query css*/
@media only screen and (min-width: 1600px) {
  .container{ max-width: 1496px;}
}
@media only screen and ( max-width:1599px ) {

  /* HEADER PART RESPONSIVE START HERE */
  .main-header .logo{ width: 18%;}
  .main-header .manu-part { width: 82%; }
  .main-header .main-menu { margin-right: 15px; }
  .main-menu ul li:not(:last-child) { padding-right: 15px; }
  /* HEADER PART RESPONSIVE START HERE */
  

}
 
@media only screen and ( max-width:1399px ) { 

  /* GLOBAL CSS RESPONSIVE START HERE */
  :root {
     /* Layout Adjustments */
    --margin-title: 0 0 20px 0;
    --margin-paragraph: 0 0 16px 0;
    --gap-60:40px;
    --gap-50:35px;
    --gap-40:30px;
}
  .gap-48 { --bs-gutter-x: 24px; row-gap: 24px; }
  /* GLOBAL CSS RESPONSIVE END HERE */
  /* HEADER PART RESPONSIVE START HERE */
  .main-header{ padding: 20px 0;}
  .main-header .logo { width: 15%; }
  .main-header .logo a { height: 28px; }
  .main-header .manu-part { width: 85%; }
  .main-header .main-menu { margin-right: 5px; }
  .main-menu ul li:not(:last-child) { padding-right: 10px; }
  .main-menu ul li a, .main-header .contact-details-row{ font-size: 15px;}
  .main-header .header-btn a:not(:last-child) { margin-right: 10px; }
  .main-header .btn, .main-header a.btn{ padding: 10px 20px; font-size: 12px;}
  /* HEADER PART RESPONSIVE START HERE */

  /* HOME PAGE RESPONSIVE START HERE */
  .hero-banner-section{ padding-top: 10px;}
  .logo-slider .logo-box { height: 110px; }

  .quote-form-card { padding: 50px 30px; }
  .premium-features-section .slider-arrow { gap: 10px; }
  .swiper-nav-btn { width: 55px; height: 55px; }

  .testimonial-section .slider-holder, .testimonial-section .wprev-slick-slider .wprevgoslick  { padding: 0 50px; }
  .testimonial-card, .testimonial-section .slickwprev-slide .indrevdiv{ padding: 25px;}
  /* HOME PAGE RESPONSIVE END HERE */

  /* ABOUT PAGE RESPONSIVE START HERE */
  .inner-banner-section { min-height: 570px; }
  .inner-banner-section .col-lg-6{ width: 55%;}
  /* ABOUT PAGE RESPONSIVE END HERE */

  /* CAREER OPPORTUNITIES PAGE RESPONSIVE START HERE */
  .career-section .row.gx-5 { --bs-gutter-x: 1.5rem; }
  .job-item { padding: 20px; gap: 20px; }
  /* CAREER OPPORTUNITIES PAGE RESPONSIVE START HERE */

  /* SUNROOMS FEATURES PAGE RESPONSIVE START HERE */
  .alternative-section .altern-content ul li { padding: 20px; }
  .wall-system-section .content-wrapper { padding: 30px 20px; }
  /* SUNROOMS FEATURES PAGE RESPONSIVE END HERE */

  /* SUNROOMS INSTALLATION PAGE RESPONSIVE START HERE */
  .installation-process-section .artical-card { padding: 25px 20px; }
  /* SUNROOMS INSTALLATION PAGE RESPONSIVE END HERE */

  /* PRODUCT EXAMPLE PAGE RESPONSIVE START HERE */
  .benefit-card{ padding: 25px 20px;}
  /* PRODUCT EXAMPLE PAGE RESPONSIVE END HERE */

}

@media only screen and ( max-width: 1199px ) {
  :root {
    /* Layout Adjustments */
    --gap-50:28px;
    --gap-40:25px;
}
  /* GLOBAL CSS RESPONSIVE START HERE */
  .padding-24 { padding: 20px; }
  /* GLOBAL CSS RESPONSIVE END HERE */


  .main-header .hdr-rt{ justify-content: end;}
  /*  ===========mobile nav==========  */  
  .hamburger-nav { display: inline-block; }
  .ham {width: 60px;}
  .mobile-menu ul li a.btn { display: inline-block; padding: 15px 20px;}
  .mobile-menu-container{display: block;}     
  .header-section .right-panel{ -ms-flex-pack: end!important; justify-content: flex-end!important; }
  .mobile-menu-logo{max-width: 50px; margin: 0 auto; text-align: center; display: none;}
  .mobile-menu ul li { padding: 0; }
  .mobile-menu ul li a,
  .mobile-menu ul li a, .mobile-menu ul li { font-size: 20px; color: var(--color-black) ; text-align: left; text-transform: uppercase; }
  .mobile-menu ul li a:hover{color: var(--color-accent);}

  .mobile-menu ul li ul.sub-menu li {margin: 11px 0;padding: 0 20px;}  
  .mobile_menu_btn{margin-top: 30px;}
  .mobile_menu_btn a.btn.plbig{padding-left: 50px;}
  .contact_icon { width: 41px; height: 41px; top: 5px; left: 4px; font-size: 20px; }
  .mobile_menu_btn a.plbig{margin-right: 15px;}
  .common-padd-xl-top { padding-top: 140px; padding-bottom: 60px; }
  .mobile-menu ul li span {margin-left: 10px; }
  .main-menu, .main-header .hdr-rt.mob-hide { display: none; }
  .mobile-menu ul li.menu-item-has-children.menu-open:after {transform: rotate(225deg); transition: border-width 150ms ease-in-out; -webkit-transition: var(--transition-common); -moz-transition: var(--transition-common); -ms-transition: var(--transition-common); -o-transition: var(--transition-common); transition: var(--transition-common); top: 15px; }
  .mobile-menu ul li a { padding: 5px 0;  }
  header.main-header.mobile-menu-open .line { stroke: var(--color-secondary); }
  header.main-header.mobile-menu-open .btn::before, header.main-header.mobile-menu-open  a.btn::before { background: var(--color-white); }
  header.main-header.mobile-menu-open .btn, header.main-header.mobile-menu-open  a.btn{ color: var(--color-black);}
    
  header .mobile-menu ul {max-width: 300px;margin: 0 auto;}
  header span.dropdown-icon-menu.active::before { transform: rotate(227deg); top: 17px } 
  header span.dropdown-icon-menu::before { content: ""; position: absolute; top: 12px; right: calc(50% - 6px); box-sizing: border-box; height: 12px; width: 12px; border-style: solid; border-color: var(--color-white); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: border-width 150ms ease-in-out; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; margin: 0 auto; }
  header span.dropdown-icon-menu { margin-left: 10px; content: ""; position: absolute; top: -2px; box-sizing: border-box; height: 40px; width: 40px; transform: rotate(0deg); transition: border-width 150ms ease-in-out; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; left: unset; right: 0px; margin: 0 auto; z-index: 9999; display: flex; justify-content: center; align-items: center }

  .mobile-menu-container ul.sub-menu { position: relative; max-height: 0; overflow: hidden; transition: max-height .6s ease-out; box-shadow: 0 0 15px #1e346629; border-radius: 10px; margin-top: 20px; /* padding-bottom: 20px; */ /* background-color: #192c64;  */ background: linear-gradient(90deg, #AF5CFD 0.53%, #349CD7 100%); }
  .mobile-menu-container ul.sub-menu.sub-menu-open { transform: scaleY(1); max-height: 300px;}
    
  .mobile-menu ul li.menu-item-has-children > a{padding-right: 0;} 
  /*  ===========mobile nav==========  */

  /* HOME PAGE RESPONSIVE START HERE */
  .alternative-section .altern-content{ padding: 0;}
  .logo-slider .logo-box { height: 95px; }

  .contact-form-wrap { padding-right: 0; }
  /* HOME PAGE RESPONSIVE END HERE */

  /* FOOTER PART RESPONSIVE START HERE */
  .main-footer .btn, .main-footer a.btn{ padding: 10px 20px;}
  .social-icons ul { gap: 6px; }
  .social-icons li a { width: 38px; height: 38px; }
  /* FOOTER PART RESPONSIVE END HERE */

  /* ABOUT PAGE RESPONSIVE START HERE */
  .alternative-section .flex-row-reverse .altern-content { padding-inline: 0; }
  .legacy-slide-card {gap: 24px;}
  /* ABOUT PAGE RESPONSIVE END HERE */

  .promotion-section{ min-height: 350px;}
  .promotion-section::after{ background: rgba(0, 0, 0, 0.6);}

   /* SUNROOMS FEATURES PAGE RESPONSIVE START HERE */
  .alternative-section .altern-content ul li { padding: 15px; }
  .wall-system-section .content-wrapper { padding: 20px 15px; }
  /* SUNROOMS FEATURES PAGE RESPONSIVE END HERE */

  /* FAQ PAGE RESPONSIVE START HERE */
   .faq-accordion .accordion-button { padding: 20px 0 25px; }
   /* FAQ PAGE RESPONSIVE END HERE */

  /* PATIO COVER PAGE RESPONSIVE START HERE */
   .quality-card{ padding: 20px;}
  /* PATIO COVER PAGE RESPONSIVE END HERE */

  /* BLOG DETAILS PAGE RESPONSIVE START HERE */
  .toc-sidebar-wrapper{ margin-right: 0;}
  .toc-card { padding: 25px 15px 25px 20px; }
  .toc-card li .toc-link { padding-left: 20px; margin-left: -20px; }
  /* BLOG DETAILS PAGE RESPONSIVE END HERE */
}

@media only screen and ( max-width: 991px ) {
  /* GLOBAL CSS RESPONSIVE START HERE */
  :root {
    --gap-60:28px;
    --gap-50:25px;
    --gap-40:22px;
} 
  .padding-24 { padding: 15px; }
  .btn, a.btn { padding: 10px 22px; }
  /* GLOBAL CSS RESPONSIVE START HERE */

  /* HEADER PART RESPONSIVE HERE */
  .main-header { padding: 15px 0; }
  .main-header .logo{ width: auto;}
  .main-header .logo a { height: 35px; }
  .main-header .manu-part{ width: auto;}
  .header-btn { display: none !important;}

  /* HOME PAGE RESPONSIVE START HERE */
  .hero-banner-section{ padding: 50px 0; border-top: 1px solid var(--color-quinary);}
  .hero-banner-section .banner-info{ text-align: center; margin-bottom: 30px;} 
  .mobile-hero-image-holder .image-wraper { padding-bottom: 35%; }
  .mobile-hero-image-holder .image-wraper:not(:last-child){ margin-bottom: 16px;}
  .hero-banner-section .image-row{ flex-wrap: wrap;}
  .hero-banner-section .image-col{ width: 100%; flex: 0 0 auto !important;}
  .hero-banner-section .img-box{ height: auto; padding-bottom: 40%;}
  .hero-banner-section .image-info { padding: 0 15px 20px; }
  .hero-banner-section .image-col:hover .image-info { gap: 15px; }

  .altern-video-box, .altern-img-box{ height: auto; margin-bottom: 25px;}
  .alternative-section .video-block { aspect-ratio: 16 / 12; }
  .alternative-section .play-btn { width: 60px; height: 60px; }

  .quote-form-card { padding: 40px 20px; }
  .form-check .wpcf7-list-item label{ gap: 10px !important;}

  .premium-features-section .slider-holder { padding-right: 2%; }

  .promotion-section .info-wraper{ text-align: center; margin-bottom: 25px;}
  .promotion-section .image-wraper{ text-align: center !important;}

  .testimonial-section .slider-holder, .testimonial-section .wprev-slick-slider .wprevgoslick  { padding: 0 30px; }
  .testimonial-card, .testimonial-section .slickwprev-slide .indrevdiv { padding: 20px 15px; }
  .testimonial-thumbs { gap: 6px; }
  .testimonial-thumb-img { width: 55px; height: 42px; border-radius: 6px; }
  .testimonial-section .swiper-nav-btn { width: 45px; height: 45px; }
  .testimonial-section .testimonial-prev { left: -20px; }
  .testimonial-section .testimonial-next { right: -20px; }

  .gallery-section .max-width-715 { max-width: 500px; }

  .contact-form-wrap{ margin-bottom: 30px;}
  .contact-form .form-check-wrap{ margin-top: 0; margin-bottom: 20px;}
  /* HOME PAGE RESPONSIVE END HERE */
  /* FOOTER PART RESPONSIVE START HERE */
  .top-footer{ padding: 50px 0;}
  .top-footer .row{ row-gap: 25px;}
  .footer-btn-wrap{ margin-bottom: 10px;}
  .footer-contact-info li{ gap: 12px !important; margin-bottom: 15px;}
  .bottom-footer{ padding: 16px 0;}
  .footer-copyright p a { margin-left: 5px; }
  /* FOOTER PART RESPONSIVE END HERE */

  /* ABOUT PAGE RESPONSIVE START HERE */
  .inner-banner-section { min-height: 480px; }
  .inner-banner-section .banner-img:after{ background: rgba(0, 0, 0, 0.6);}
  .inner-banner-section .col-lg-6 { width: 100%; }
  .inner-banner-section .banner-content h1 br{ display: none;}

  .legacy-slide-card{ gap: 20px; grid-template-columns: 1fr ;}
  .legacy-slide-content{ padding-right: 0;}
  .why-temo-section { min-height: 460px; }
  /* ABOUT PAGE RESPONSIVE END HERE */

  /* CAREER OPPORTUNITIES PAGE RESPONSIVE START HERE */
  .career-filter{ margin-bottom: 25px;}
   /* CAREER OPPORTUNITIES PAGE RESPONSIVE END HERE */

  /* SUNROOMS FEATURES PAGE RESPONSIVE START HERE */
  .wall-system-section .image-wrapper{ height: auto; }
  .wall-system-section .image-wrapper img{ border-radius: 8px 8px 0 0;}
  .wall-system-section .content-wrapper{ border-radius: 0 0 8px 8px;}
  .why-temo-section .why-temo-content{ text-align: center; margin-bottom: 25px;}
  .why-temo-section .image-wraper{ text-align: center !important;}
   /* SUNROOMS FEATURES PAGE RESPONSIVE END HERE */

  /* PRODUCT EXAMPLE PAGE RESPONSIVE START HERE */
  .benefit-card{ padding: 20px 15px;}
  /* PRODUCT EXAMPLE PAGE RESPONSIVE END HERE */

  /* PERGOLAS FEATURES PAGE RESPONSIVE START HERE */
  .artical-card-row .artical-card-image{ margin-bottom: 25px !important;}
  /* PERGOLAS FEATURES PAGE RESPONSIVE START HERE */

  /* PATIO COVER PAGE RESPONSIVE START HERE */
   .quality-card{ padding: 15px;}
  /* PATIO COVER PAGE RESPONSIVE END HERE */

   /* BLOG DETAILS PAGE RESPONSIVE START HERE */
   .toc-sidebar-wrapper{ margin-bottom: 25px;}
   .blog-post-tags-row { padding-top: 20px; margin-top: 20px; }
   .toc-list li { margin-bottom: 14px; }
  /* BLOG DETAILS PAGE RESPONSIVE END HERE */

   /* FIND A DEALER PAGE RESPONSIVE START HERE */
   .find-a-dealer-section .find-a-dealer-content{ margin-bottom: 25px;}
   .find-dealer-box{ padding: 25px 15px;}
   /* FIND A DEALER PAGE RESPONSIVE END HERE */
  
   /* BOOK FREE CONSULTATION PAGE RESPONSIVE START HERE */
   .book-free-consultation-section .image-box{ margin-bottom: 25px;}
   .book-free-consultation-section .form-holder{ padding-right: 0;}
   .book-free-consultation-section .section-title{ margin-bottom: 25px;}

   

}
@media only screen and ( max-width: 767px ) {

  /* HEADER PART RESPONSIVE START HERE */
  .main-header .logo a { height: 32px; }
  .ham { width: 50px; margin: -5px 0; }
  /* HEADER PART RESPONSIVE END HERE */

  /* HOME PAGE RESPONSIVE START HERE */
  .hero-banner-section .img-box { padding-bottom: 45%; }
  .hero-banner-section .img-box::before{ background: var(--color-black); opacity: 0.5;}
  .hero-banner-section .image-info{ padding: 0 15px 15px;}
  .logo-slider .logo-box { height: 55px; }
  .premium-features-section .top-section-row{ flex-wrap: wrap;}
  .premium-features-section .section-title{ width: 100%;  margin-bottom: 20px;}
  .premium-features-section .slider-holder { padding-right: 15%; }

  .gallery-section .top-section-row{ flex-wrap: wrap;}
  .gallery-section .section-title{ width: 100%; margin-bottom: 20px;}
  /* HOME PAGE RESPONSIVE END HERE */

  /* ABOUT PAGE RESPONSIVE START HERE */
  .legacy-slider-wrap { padding: 0 55px; }
  .legacy-button-prev { left: -10px; }
  .legacy-button-next { right: -10px; }
  /* ABOUT PAGE RESPONSIVE END HERE */

  /* SUNROOMS INSTALLATION PAGE RESPONSIVE START HERE */
  .installation-process-section .artical-card { padding: 20px 15px; }
  /* SUNROOMS INSTALLATION PAGE RESPONSIVE END HERE */

  /* PATIO COVER PAGE RESPONSIVE START HERE */
  .quality-card .row{ row-gap: 24px;}
   /* PATIO COVER PAGE RESPONSIVE END HERE */

  /* AREAS WE SERVE PAGE RESPONSIVE START HERE */
  .areas-we-serve-section .row-gap-24 { row-gap: 15px; }
  .state-accordion-item { padding-bottom: 15px; }
  .state-accordion-header .state-icon{ font-size: 12px;}
  /* AREAS WE SERVE PAGE RESPONSIVE END HERE */

  /* FIND A DEALER PAGE RESPONSIVE START HERE */
  .dealer-buttons-wrap .btn { font-size: 13px; }
}


@media only screen and ( max-width: 575px ) {
  .container{ max-width: 97%;}
  /* HOME PAGE RESPONSIVE START HERE */
  .swiper-nav-btn { width: 48px; height: 48px; }
  .quote-form-card { padding: 35px 15px; }
  .testimonial-section .slider-holder, .testimonial-section .wprev-slick-slider .wprevgoslick  { padding: 0 28px; }
  .testimonial-section .swiper-nav-btn { width: 40px; height: 40px; }
  .testimonial-section .testimonial-prev { left: -10px; }
  .testimonial-section .testimonial-next { right: -10px; }
  /* HOME PAGE RESPONSIVE END HERE */

  /* ABOUT PAGE RESPONSIVE START HERE */
  .inner-banner-section { min-height: 430px; }

  .legacy-slider-wrap{ padding: 80px 0 0;}
  .legacy-button-prev, .legacy-button-next{ top: 0; left: 50%; right: auto; transform: translateX(-50%);}
  .legacy-button-next{ left: calc(50% + 35px);}
  .legacy-button-prev{ left: calc(50% - 35px);}

   /* CAREER OPPORTUNITIES PAGE RESPONSIVE START HERE */
   .job-item { flex-wrap: wrap; padding: 20px 15px; }
   .job-item .job-content{ width: 100%;}
   .job-content p { margin-bottom: 10px; }

   .promotion-section .button-row{ flex-wrap: wrap;}

   .alternative-section .altern-content .ul-style-2 ul{ grid-template-columns: 1fr;}

   /* FAQ PAGE RESPONSIVE START HERE */
   .faq-accordion .accordion-button { font-size: var(--f-size-S); padding: 20px 0 25px; }
   .faq-accordion .accordion-body { padding: 0 0 20px 0; }
   /* FAQ PAGE RESPONSIVE END HERE */

   /* BLOG DETAILS PAGE RESPONSIVE START HERE */
   .blog-post-tags-row { gap: 8px; }
   .blog-post-tags-row .icon { width: 12px; height: 12px; }
   .blog-post-tags-row ul { gap: 5px; }
   .blog-post-tags-row li{ gap: 5px}
   .blog-post-tags-row li a{ font-size: 12px;}
}
@media only screen and ( max-width: 479px ) {
  .hero-banner-section .img-box { padding-bottom: 60%; }
  .hero-banner-section .image-info { padding: 0 12px 12px; gap: 12px; }
  .hero-banner-section .image-info p{ font-size: 14px;}
  .hero-banner-section .image-info .btn { padding: 7px 22px; font-size: 12px; }
}
@media only screen and ( max-width: 389px ){
  :root {
    --f-size-Body: 16px;
}
  

}