/* Theme Name: Butterfly Truck Theme URI: # Author: Sk Version: 1.0 */ *{margin:0px; padding:0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html{ width:100%; height:100%; margin:0px; padding:0px;scroll-behavior: smooth; overflow-x:hidden; } body{ margin:0px; padding:0px;background:#ffffff; font-family:var(--bodyfont);} p{ margin:0px; padding:0px; } address, blockquote, dd, div, dl, dt, fieldset, form, frame, frameset{ margin:0; padding:0; border: 0px; outline: none; } label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0px; padding:0; outline:none; border:0;} a{ text-decoration:none; border: 0px; outline: none; transition:all .5s} a:hover, a:focus, a:active{ } a img{ border:none; outline: none;} a:focus {outline:none; } border{ border-collapse:collapse;} hr{ height:1px; background:#333333; border:none;} img { max-width: 100%; height: auto;} strong{font-weight:bold;} button,input,select,option,textarea {outline: 0 !important;pointer-events:all;font-family:inherit;font-size:100%;} ::-moz-selection { color: #fff; background:var(--main-clr);} ::selection { color: #fff; background: var(--main-clr);} /*variables--*/ :root{ --bodyfont: "Inter", sans-serif; --accent-font: "Inter", sans-serif; --headfont:"Figtree", sans-serif; --fs-53:53px; --fs-38:38px; --fs-35:35px; --fs-29:29px; --fs-23:23px; --fs-21:21px; --fs-20:20px; --fs-19:19px; --fs-18:18px; --fs-17:17px; --fs-16:16px; --fs-15:15px; --fs-14:14px; --pdg:110px; --topbar-color:#0254A3; --menu-color:#006acf; --main-clr:#0254A3; --seconday-color:#343C44; --dark-bg:#343C44; --hover-color:#207fd9; --body-font-color:#343C44; --head-font-color:#343C44; --black-clr:#000; --light-font-color:#fff; --light-bg:#F0F1F2; } body{ font-family:var(--bodyfont); color:var(--body-font-color); background:#fff;font-weight:400;font-size:var(--fs-16); line-height:1.55;position:relative;} h1{font-size:var(--fs-53);font-weight:400;margin:0;font-family:var(--headfont);color:var(--head-font-color);padding:0 0 18px 0;line-height: 1.3} h2{font-size:var(--fs-35);font-weight:500;margin:0;font-family:var(--headfont);color:var(--head-font-color);padding: 0 0 18px 0;line-height: 1.3} h3{font-size:var(--fs-20);font-weight:500;margin:0;font-family:var(--headfont);color:var(--head-font-color);padding:0 0 18px 0;line-height: 1.3} h4{font-size:var(--fs-18);font-weight:500;margin:0;font-family:var(--bodyfont);color:var(--head-font-color);padding:0 0 15px 0;line-height: 1.3} h5{font-size:var(--fs-16);font-weight:500;margin:0;font-family:var(--bodyfont);color:var(--head-font-color);padding:0 0 18px 0;line-height: 1.3} h6{font-size:var(--fs-14);font-weight:400;margin:0;font-family:var(--bodyfont);color:var(--head-font-color);padding:0 0 10px 0;text-transform:uppercase;letter-spacing:0.1em;line-height: 1.3} p{text-align: justify; padding:0 0 20px 0;} .btncn{ position:relative; display: inline-block; padding:12px 25px 12px; font-size: var(--fs-16);font-weight: 600; box-shadow: 0 2px 2px rgb(0 0 0 / 28%);letter-spacing:0.03em;border-radius:40px;border-width:1px;border-style:solid; text-align: center; margin:15px 0; font-family:var(--accent-font);transition:0.3s; text-transform:uppercase; line-height: 1.3} .btncn i{ margin:0 10px 0 0;transition:0.3s } .btncn-default{background: var(--main-clr); color:#fff;border-color:var(--main-clr);} .btncn-default:hover{background:var(--hover-color);border-color:var(--hover-color);color:#fff} .btncn-secondary{background:var(--seconday-color); color: var(--main-clr); border-color:var(--seconday-color);font-weight:600} .btncn-secondary:hover{background:var(--hover-color);border-color:var(--hover-color);color:#fff} .btncn-tertiary{background:var(--dark-bg); color: #fff;border-color:var(--dark-bg)} .btncn-tertiary:hover{background:var(--hover-color);border-color:var(--hover-color);color:#fff} .btncn-line{ border-color:#fff;color:#fff;background:transparent;font-weight:400} .btncn-line:hover{ background:var(--hover-color); color:#fff;border-color:var(--hover-color); } .buttonGroup{ display:flex; gap:15px } .buttonGroup .btncn{margin-bottom:0} .section{ padding-top:var(--pdg); } .sectionPaddingBtm{ padding-bottom:var(--pdg) } .section .container{ position:relative; } .section-light{ background:var(--light-blue-color); } .light-section{ background:var(--light-bg); } .no-padding-top{ padding-top:0 } .hoverImage{ overflow:hidden; position:relative; } .hoverImage:after{ content:''; position:absolute; width:100%; height:100%; top:0; left:0; background: linear-gradient(-45deg,var(--main-clr) 0%, transparent 100%); opacity:0; transition:all .5s;pointer-events:none;} .hoverImage:hover:after{ opacity:0.7; transition:all .5s } .hoverImage img{ width:100%; transition:all .5s } .hoverImage:hover img{ transform:scale(1.1); transition:all .5s } .g-5, .gx-5 { --bs-gutter-x: 5rem;} .g-4, .gx-4 { --bs-gutter-x: 3rem;} .section-heading{ margin:0 0 20px 0;padding-right: 200px;} .section-heading h6{ padding-bottom:15px; } .text-center p{ text-align:center; } .btn-position-absolute { position: absolute; right: 15px; top: 0px;} .btn-position-absolute .btncn{margin:0} .light-bg{background:var(--light-bg) } .dark-bg{background:var(--dark-bg); } .main-clr-bg{background: var(--main-clr);} .mobile{display:none; } .btn-group{ display:flex; margin:30px 0 0 0; gap:15px; } .full-image img{ width:auto; max-width:inherit; } .full-right{ display:flex; justify-content:flex-end; } .text-white p, .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5,.text-white h6{ color:#fff } .gform-footer,#field_submit{position:relative!important} .gform-loader {position:absolute!important;right:0!important;top:0!important} @media (min-width: 1600px) { .container{ max-width:1524px } } @media (min-width: 1700px) { .container{ max-width:1624px } } @media only screen and (max-width:1599px){ :root{ --fs-53:50px; --fs-38:38px; --fs-35:34px; --fs-29:28px; --fs-23:23px; --fs-21:18px; --fs-20:18px; --fs-19:16px; --fs-18:16px; --fs-17:16px; --fs-16:15px; } } @media only screen and (max-width:1399px){ :root{ --fs-53:45px; --fs-38:34px; --fs-35:30px; --fs-29:26px; --fs-23:22px; --fs-21:18px; --fs-20:17px; } } @media only screen and (max-width:1199px){ :root{ --fs-53:42px; --fs-38:32px; --fs-35:24px; --fs-29:23px; --fs-23:20px; --pdg: 50px; } a{ text-decoration:none; border: 0px; outline: none; transition:none;} a:hover, a:focus, a:active{ transition:none; } } @media only screen and (max-width:991px){ :root{ --fs-53:34px; --fs-38:30px; --pdg :50px; } p{padding-bottom:20px} .full-image img{ max-width:100% } .btn-position-absolute { position: static;margin-top:30px} .section-heading{ padding-right:0px;text-align:center;margin-bottom:0} } @media only screen and (max-width:767px){ .container{ padding:0 30px; } .btncn{ width:100%; text-align:center; } .buttonGroup{gap:8px;margin-left: -10px;margin-right: -10px} .buttonGroup .btncn{width: auto;flex-grow: 1;padding: 10px 10px;font-size:14px } .buttonGroup .btncn i{margin: 0 5px 0 0 } .desktop{ display:none; } .mobile{display:block;} .lineHd h5::before{width:25px;margin-right:5px} } @media only screen and (max-width:380px){ } /*Header Start*/ body{--headerHeight:94px;} .header{position: sticky; top: 0; z-index: 99999; width: 100%; transition: 0.3s;} .headerTop{ background:var(--topbar-color); padding:10px 0; position:relative; z-index:99 } .headerTop p{ color:#fff; font-weight:300; padding:0; font-size:var(--fs-18); } .headerTop p a{color:#fff;text-decoration:underline; } .headerTop p a:hover{ color:#a5e2fe; } .headerTop ul{ margin:0; padding:0; list-style:none;display:flex;flex-wrap:wrap;justify-content:center; } .headerTop ul li{display:block;vertical-align:top;padding:0 10px;position:relative;color:#fff;font-size:var(--fs-16);font-family:var(--accent-font);font-weight: 300;} .headerTop ul li a{ color:#fff } .headerTop ul li a:hover{ color:var(--hover-color); } .headerTop ul li:before{ content:''; position:absolute; left:0; top:4px; width:1px; height:19px; background:#fff; } .headerTop ul li:first-child:before{ display:none; } body:has( .halfBanner) .header{position:sticky;} body:has( .blogDetailsBanner) .header{position:sticky;} .headerMian{width: 100%;background: var(--topbar-color);} .logo{ width:276px; transition:all .5s; flex-shrink: 0; margin-top: 0;} .logo a{display:block;} .logo img{width:100%} .headerHolder{display:flex;align-items:center;justify-content:space-between;gap: 45px;height: var(--headerHeight);transition: 0.5s;padding: 16px 0;} .navigation{margin: 0 auto 0 10px;} .navigation nav ul{ display:flex; align-items:center; margin:0; padding:0; list-style:none; } .navigation nav ul li a{font-weight: 300;font-size: var(--fs-18);position: relative;color: #fff ;z-index: 10;font-family: var(--accent-font);} .navigation nav>ul>li>a { line-height: var(--headerHeight);padding-left: 22px;padding-right: 22px; } .navigation nav ul li a:hover{ color:#0dcaf0; } .navigation nav ul ul li a{ color:var(--hover-color); } .navigation nav ul ul li a:hover{ color:var(--main-clr); } ul.dropdown-menu-holder{ flex-wrap:wrap; gap: 0 !important; row-gap: 30px !important; width: 100%; border: none; justify-content: space-between;align-items:flex-start!important; } ul.dropdown-menu-holder li { width:23%; } ul.dropdown-menu-holder li ul{ display:block; } .section-parent-menu{ width:100% } .section-parent-menu{ margin:0 -10px; padding:0 0 0 350px; transition: all .5s} .fixed .section-parent-menu{ margin:0 -10px; padding:0 0 0 287px; transition: all .5s} .navigation nav, .navigation nav > ul,.navigation nav > ul > li,.navigation nav > ul > li > a {height: auto;} .navigation nav > ul > li > a {display: flex;flex-direction: column;justify-content: center;} .headerWinnerLogo {margin-right: 18px; } .headerRight{display:flex;align-items:center;gap: 35px;align-self: stretch;} .phoneNumber a{font-family:var(--headfont);color: #fff;font-size: var(--fs-18);} .phoneNumber a i{color: var(--main-clr);margin-right: 10px} .phoneNumber a:hover{ color:var(--seconday-color); } .whatsapp a{ color:#fff; font-size:24px; display:block; width:40px; height:40px; border-radius:50%; background:#25d366; text-align:center; line-height:40px;} .whatsapp a:hover{opacity: 0.7} .headerIcon a{font-size:var(--fs-23);color: #fff;transition: all .5s;} .headerIcon a i{display:block;} .headerIcon a:hover{color: var(--hover-color);} .bookAppointment{height: 100%} .bookAppointment a{padding: 0px 56px 0px;display:block;background: var(--seconday-color);color:var(--main-clr);position:relative;font-size: var(--fs-23);font-weight: 600;transition:all .5s;font-family: var(--accent-font);text-transform: uppercase; margin-left: 10px;height: 100%;line-height: var(--headerHeight);box-shadow:0 5px 15px rgba(0,0,0,0.1) } .bookAppointment a i{ margin:0 10px 0 0;display:none; } .bookAppointment a:hover{background:var(--hover-color);color:#fff} .headerSocial a{ font-size:22px; color:#000; position:relative; top:2px; } .headerSocial a:hover{ color:var(--seconday-color); } .fixed{position:sticky;top:0;left:0;width:100%;background:rgba(0,0,0,0.6);box-shadow:0 5px 15px rgba(255,255,255,0.1); z-index: 999;--headerHeight:94px;} .fixed .headerMian .logo{ margin:0;} .mean-container .mean-nav ul li li li a{ padding: 0.5em 15% !important; } a.meanmenu-reveal{display:none}.mean-container .mean-bar{float: none;width:100%;position: static;background: transparent;padding:4px 0;z-index:999999}.mean-container a.meanmenu-reveal{width: 35px;height:22px;padding:13px 13px 11px;position: static;top:0;right:0;cursor:pointer;color:#fff;text-decoration:none;font-size:18px;text-indent:0;line-height:22px;display:block;font-family:Arial,Helvetica,sans-serif;font-weight:700}.mean-container a.meanmenu-reveal span{display:block;background:#fff;height: 3px;margin-top: 7px;border-radius: 5px;}.mean-container a.meanmenu-reveal span:first-child{margin-top:0px}.mean-container .mean-nav{float:left;width:100%;background:#0c1923;margin-top:44px}.mean-container .mean-nav ul{padding:0;margin:0;width:100%;list-style-type:none}.mean-container .mean-nav ul li{position:relative;float:left;width:100%}.mean-container .mean-nav ul li a{display:block;float:left;width:90%;padding:1em 5%;margin:0;text-align:left;color:#fff;border-top:1px solid #383838;border-top:1px solid rgba(255,255,255,.5);text-decoration:none;}.mean-container .mean-nav ul li li a{width:80%;padding:1em 10%;border-top:1px solid #f1f1f1;border-top:1px solid rgba(255,255,255,.25);opacity:.75;filter:alpha(opacity=75);text-shadow:none!important;visibility:visible}.mean-container .mean-nav ul li.mean-last a{border-bottom:0;margin-bottom:0}.mean-container .mean-nav ul li li li a{width:70%;padding:1em 15%}.mean-container .mean-nav ul li li li li a{width:60%;padding:1em 20%}.mean-container .mean-nav ul li li li li li a{width:50%;padding:1em 25%}.mean-container .mean-nav ul li a:hover{background:#252525;background:rgba(255,255,255,.1)}.mean-container .mean-nav ul li a.mean-expand{margin-top:1px;width:26px;height:32px;padding:12px!important;text-align:center;position:absolute;right:0;top:0;z-index:2;font-weight:700;background:rgba(255,255,255,.1);border:0!important;border-left:1px solid rgba(255,255,255,.4)!important;border-bottom:1px solid rgba(255,255,255,.2)!important}.mean-container .mean-nav ul li a.mean-expand:hover{background:rgba(0,0,0,.9)}.mean-container .mean-push{float:left;width:100%;padding:0;margin:0;clear:both}.mean-nav .wrapper{width:100%;padding:0;margin:0}.mean-container .mean-bar,.mean-container .mean-bar *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.mean-remove{display:none!important} .mobileMenu{width: 35px;height: 31px} .mobileMenu li a{font-size: var(--fs-18);} .mega-menu-wrapper{ background:transparent; position:relative; width:100%; padding:0} .header .mega-menu-container.container-fluid{ width:100%; padding:0;margin: 0!important} .mean-container .mean-nav ul li a.mean-expand{ border:none !important;background:transparent; } .mean-container .mean-nav ul li a.mean-expand:hover{ background:transparent; } .section-parent-menu,.fixed .section-parent-menu{ padding:0 0 0 0px;margin:0 } ul.dropdown-menu-holder{ padding:0 !important } .mean-container .mean-nav {position: absolute;right: 0;width: 100%;float: none;z-index: 99;top: 22px;background:transparent;pointer-events: none;} .mean-container .mean-bar a{pointer-events: all;} .mean-container a.meanmenu-reveal{border: 0px solid transparent;padding: 0;margin-top:0px;color:#fff;border-radius:0;height: auto;} .mean-container .mean-nav{margin-top: 0;} .mean-container .mean-nav ul li a{ font-family:var(--bodyfont); } .mean-container .mean-nav ul > li:first-child > a{ border:none; } .mean-container a.meanmenu-reveal span:nth-child(2){width:24px} .mean-container a.meanmenu-reveal span:nth-child(3){width:28px} .mean-container a.meanmenu-reveal{ z-index:9999 } a.mean-expand i {font-size: 14px; } .navigation{ visibility:hidden; display:none; } .mean-container .mean-nav > ul {height: calc(100dvh - var(--headerHeight))!important;display: block!important;padding: 40px 0!important;position: fixed;bottom: 0;right: 0;max-width: 360px;box-sizing: border-box;background: var(--menu-color);transform: scaleX(0);width:0;opacity:0;pointer-events:none;transform-origin: right top;transition:all 0.3s!important} .mean-container .meanclose + .mean-nav > ul{transform:none;width:100%;opacity:1;pointer-events:all;transition:all 0.3s!important;box-shadow:-100vw 100vw 0 100vw #000000a8;overflow: auto;} a.meanclose::after {position: fixed; content: ''; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; cursor: default; } body:has( .meanclose) {max-height:100vh;position:fixed;width:100%; } /*@media only screen and (min-width:1200px){ .headerMian a{position:relative;z-index: 15;} .headerMian:hover a{pointer-events:all;} .mega-menu-wrapper{ position: absolute; z-index: 9; inset: 0 0 auto; width: 100vw; max-width: 100vw; background:var(--menu-color); padding:30px 0 4rem; box-shadow: 0 10px 10px 4px rgba(0, 0, 0, .05); padding-top:calc(var(--headerHeight) + 100px); transform: translateY(-20px); visibility: hidden; opacity: 0; transition: all 0.3s ease; transform-origin: top; z-index: -1; pointer-events: none;} .navigation nav ul li:hover .mega-menu-wrapper{ transform: translateY(0); transition: all 0.3s ease; visibility: visible; opacity: 1; z-index: 1; pointer-events: auto } ul.dropdown-menu-holder li a{ font-size:var(--fs-23) !important; font-weight:400!important; margin:0 0 15px 0; display:block; } ul.dropdown-menu-holder li ul li a{ font-size: var(--fs-18)!important; padding:5px 0; display:table; font-weight:300 !important; margin:0;max-width:100%; } ul.dropdown-menu-holder li ul li a:hover{color:var(--seconday-color);text-decoration: underline; text-underline-offset: 3px} ul.dropdown-menu-holder li ul li{ width:100% } .mega-menu-wrapper a:hover{ color:var(--seconday-color); } li.normal-menu {position: relative;} li.normal-menu ul {position: absolute;top: 100%;left: 0px;flex-direction: column;min-width: 260px;background: var(--menu-color);gap: 0;padding:10px 0; transform: translateY(-20px); visibility: hidden; opacity: 0; transition: all 0.3s ease; transform-origin: top; z-index: -1; pointer-events: none; } li.normal-menu:hover ul{ transform: translateY(0); transition: all 0.3s ease; visibility: visible; opacity: 1; z-index: 1; pointer-events: auto } li.normal-menu ul a {padding: 10px 25px;display: block;} .normal-menu ul li {width: 100%; } .navigation .normal-menu ul li a {color: #fff; } .navigation .normal-menu ul li a:hover {color:#83d6ff} .headerMian .container-fluid{ padding:0 0 0 15px } .mobileMenu{display:none;} }*/ .headerSearch{flex-grow:1} .headerSearch form{width:100%} .headerSearchFrom {display: flex;width:100%; position:relative; } .headerSearchInput{;flex-grow:1;} .headerSearchInput input[type=search] {font-size: var(--fs-16);padding: 20px 22px;border-radius: 4px 0 0 4px;border: 0;outline: 0;background: #fff;line-height: 1;width:100%;height: 60px} .headerSearchButton{flex-shrink:0} .headerSearchButton input[type=submit] {width: 67px;border-radius: 0 4px 4px 0;outline: 0;border: 0;height: 60px;background: #fff url('assets/images/search.svg') center / 27px no-repeat;transition: 0.3s} .headerSearchButton input[type=submit]:hover{background-color: #c9ddff;} @media only screen and (max-width: 1700px) { .headerTop ul li{ font-size:16px } .headerMian .btncn{ padding:13px 20px } ul.dropdown-menu-holder li a{ font-size:var(--fs-18)!important } .navigation nav > ul > li> a{padding:0 20px} .navigation nav ul li a{font-size: var(--fs-18)} .navigation{margin: 0 auto 0 25px;} } @media only screen and (max-width: 1500px) { .headerRight{gap:25px} .bookAppointment a{padding-left:20px;padding-right:20px} body{ --headerHeight: 94px; } .section-parent-menu{ padding:0 0 0 256px;} .fixed .section-parent-menu{padding:0 0 0 215px; } .bookAppointment a{ font-size:var(--fs-16); } } @media only screen and (max-width: 1399px) { .header .container { width:98%; max-width:100% } .bookAppointment a{ margin:0 ; } .section-parent-menu{ padding:0 0 0 185px } .navigation{margin:0 auto 0 0} .phoneNumber a span{display:none;} .phoneNumber a i{margin: 0} .phoneNumber a{font-size: 18px; display: block; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--main-clr); text-align: center; line-height: 40px; color: var(--main-clr);} .phoneNumber a:hover{color: #fff;background: var(--main-clr);} .phoneNumber a:hover i{color: #fff;} .navigation nav > ul > li> a{padding:0 15px} .headerIcon span{ display:none; } } @media only screen and (max-width: 1199px) { .bookAppointment a,.fixed .bookAppointment a{ margin:0 } .headerHolder{ position:relative;gap:15px } .bookAppointment a:after{ display:none; } .logo,.fixed .logo {position:relative; z-index:9999; left:inherit; } .header{top:0!important;position:relative;} body{--headerHeight:94px} .fixed.header{--headerHeight:94px;background: transparent;box-shadow:none;top: 0!important;position:relative;} body:has( .halfBanner) .header{position:relative;} body:has( .blogDetailsBanner) .header{position:relative;} .headerRight {margin-left: auto; } } @media only screen and (max-width: 991px) { .phoneNumber span{ display:none; } .phoneNumber a i{ display:inline; } .headerTop ul li {font-size: 14px; padding: 0 10px; } .headerSearchInput input[type=search]{height: 40px;padding: 10px 0 10px 10px;font-size: 13px;} .headerSearchButton input[type=submit]{height:40px;width:40px;background-size:18px} .logo, .fixed .logo{width:250px} } @media only screen and (max-width: 767px) { .phoneNumber a span{ display:none; } .bookAppointment a span{ display:none; } .headerRight {gap: 15px; } .phoneNumber a{width: 35px; height: 35px; line-height: 35px;font-size:14px } .whatsapp a{width: 35px; height: 35px; line-height: 35px;font-size:20px } .whatsapp a:hover{opacity:1} .headerHolder {padding: 12px 0;flex-wrap: wrap;gap: 8px;} .logo,.fixed .headerMian .logo{width: 190px;} body{--headerHeight: 105px;} .fixed.header{--headerHeight:105px} .bookAppointment a,.fixed .bookAppointment a{ padding:0;background:transparent;color:#fff;padding: 0;margin-right: 0px; margin-left: 5px;font-size: var(--fs-23);} .bookAppointment{height:auto; margin: 0 0 0} .bookAppointment a i{ margin:0;display:block; } .headerTop p{ font-size:14px } .header .container{ padding:0px 10px; } .mean-container .mean-nav{ margin-top:50px } .mean-container a.meanmenu-reveal{padding: 0;} .mean-container .mean-bar{top: 15px} .headerSearch{order:1;width:100%} .headerSearchInput input[type=search]{height: 40px;padding: 10px 0 10px 10px;font-size: 13px;} .headerSearchButton input[type=submit]{height:40px;width:40px;background-size:18px} } @media only screen and (max-width: 432px) { .headerMian{ top:50px } } /*Header End*/ /*Banner Start =========================*/ .banner{position:relative;} .bannerSliderItem {position: relative; z-index: 2;display:block!important; } .bannerImage {background: #000;position:absolute;top: 0;left:0;width:100%;height:100%;z-index: -1; } .bannerImage::after {content:''; background: #000000; opacity: 0.54;position: absolute;left: 0;top: 0;width: 100%;height: 100%;} .bannerImage img {display: block;width:100%;object-fit:cover;height: 100% } .bannerContent {width: 100%;padding:124px 0;color: #fff;font-size:var(--fs-18);} .bannerContentHd{text-align:center;} .bannerContentHd p{text-align:center;max-width:730px;margin:0 auto;} .bannerContent h1{color:var(--light-font-color);line-height: 1.2;font-weight:400;letter-spacing:0.06em;text-transform:uppercase; } .bannerContent h1 strong{font-weight:700} .bannerContentInr > .btncn:last-child{margin-bottom: 0} .bannerSlider {position: relative;} .bannerSearch {display: flex; margin-top: 50px; gap: 25px; border-radius: 10px; background: var(--dark-bg); overflow: hidden; } .bannerSearchHd {padding: 30px 40px 30px 20px; display: flex; flex-direction: column; justify-content: center; background: #000; clip-path: polygon(calc(100% - 45px) 0, 100% 50%, calc(100% - 45px) 100%, 0 100%, 0 0); flex-shrink: 0; width: 18.5%; } .bannerSearchHd p {padding-bottom: 0; font-size: var(--fs-20); font-weight: 600; text-align: left; } .bannerSearchFormHolder {padding: 20px 22px 20px 0; flex-grow: 1;align-self: center; } .bannerSearchForm {display: flex; gap: 15px; } .bannerSearchFormItem {width: 40%; } .bannerSearchFormItem input,.bannerSearchFormItem select {padding: 14px 19px; appearance: none; border-radius: 6px; font-size: var(--fs-19); font-weight: 500; box-shadow: 0 2px 2px rgb(0 0 0 / 28%); border: 0; color: var(--head-font-color); line-height: 29px; width: 100%; background-color:#fff } .bannerSearchFormItem select{padding-right: 36px;background-image:url(assets/images/downArrow.svg);background-repeat: no-repeat;background-size:13px;background-position:center right 16px} .bannerSearchFormSubmit {flex-shrink: 0; } .bannerSearchFormSubmit input {padding: 14px 45px; appearance: none; border-radius: 6px; font-size: var(--fs-21); font-weight: 600; box-shadow: 0 2px 2px rgb(0 0 0 / 28%); border: 0; background:var(--main-clr); color: #fff; text-transform:uppercase; letter-spacing:0.03em; line-height: 29px;transition:0.3s } .bannerSearchFormSubmit input:hover{background:var(--hover-color)} @media only screen and (max-width:1399px){ .bannerSearchHd {width: 20%; padding: 10px 20px 10px 15px; } .bannerSearchFormSubmit input {padding: 14px 20px; } .bannerSearch {gap: 15px;margin-top:10px } .bannerContent {padding: 90px 0; } } @media only screen and (max-width:1199px){ .bannerSearchFormItem,.bannerSearchFormSubmit {width: calc(50% - 6px); } .bannerSearchForm {flex-wrap: wrap; gap: 12px; } .bannerSearchFormSubmit input{width: 100%; } .bannerSearchHd {width: 22%; } .bannerSearchFormHolder {padding: 15px 15px 15px 0; } } @media only screen and (max-width:991px){ /*.bannerImage::after {opacity: 1; background: #00000099; backdrop-filter: blur(3px); }*/ } @media only screen and (max-width:767px){ .bannerContent {padding: 50px 0; } .bannerSearch {flex-direction: column; margin: 0; } .bannerSearchFormHolder {padding: 0 15px 15px; } .bannerSearchFormItem {width: 100%; } .bannerSearchFormSubmit {width: 100%; } .bannerSearchHd {width: 100%; padding: 15px 15px 24px 15px; clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 20px), 50% 100%, 0% calc(100% - 20px)); } .bannerSearchHd p {text-align: center; } .bannerSearchFormItem input, .bannerSearchFormItem select {padding-top: 8px; padding-bottom: 8px; } .bannerSearchFormSubmit input {padding: 8px; } } /*Banner End =========================*/ /*Product*/ .productListHd {margin-bottom: 60px; color: #525252; } .productCount {text-align: right; font-weight: 500; font-size: var(--fs-18); margin-bottom: 20px; } .productCount span {color: var(--main-clr); } .productListBd {display: flex; gap: 24px;align-items: } .productSidebarCol{flex-shrink:0;width:20%} .productListCol{flex-grow: 1} .productSidebarItem {border-radius: 20px; overflow: hidden; background: var(--light-bg); } .productSidebarHd {font-size: var(--fs-23); font-family: var(--head-font-color); font-weight: 500; padding: 13px 23px; background: #D9D9DA;pointer-events:none } .productSidebarHd p {padding-bottom: 0 !important;text-align:left !important; } .productSidebarBdInr {padding: 23px 23px 44px !important; display: flex !important; flex-direction: column !important; gap: 25px !important; } .productFilter .productSidebarBdInr{gap:20px} .productSidebarItem:not(:last-child){margin-bottom:25px !important;} .productFormItem > label {font-size: var(--fs-18) !important; font-weight: 600 !important; font-family: var(--head-font-color) !important; margin-bottom: 10px !important;display:block !important; } .productFormItem select, .productFormItem input:not([type=checkbox]):not([type=radio]), .productFormItem textarea {padding: 14px 19px !important; appearance: none !important; border-radius: 40px !important; font-size: var(--fs-15) !important; font-weight: 500 !important; font-family: var(--headfont) !important; box-shadow: 0 4px 10px rgb(0 0 0 / 8%) !important; border: 0 !important; color: var(--head-font-color); line-height: 1.2 !important; width: 100% !important; background-color: #fff; display: block !important; } .productFormItem select {padding-right: 36px !important; background-image: url(assets/images/downArrow.svg) !important; background-repeat: no-repeat !important; background-size: 12px !important; background-position: center right 16px !im`;} .productFormItem textarea {border-radius: 20px !important; height:142px !important; resize:none !important;} .productFormItem ::placeholder{opacity:1 !important;color:var(--head-font-color) !important;} .productFormSubmit input {position: relative !important; display: inline-block !important; padding:12px 25px 12px !important; font-size: var(--fs-16) !important; font-weight: 600 !important; box-shadow: 0 2px 2px rgb(0 0 0 / 28%) !important; letter-spacing:0.03em !important; border-radius:40px !important; border-width:1px !important; border-style:solid in !important; text-align: center !important; font-family:var(--accent-font) !important; transition:0.3s !important; text-transform:uppercase !important; line-height: 1.3 !important; border-color: var(--main-clr) !important; background: var(--main-clr) !important; color: #fff !important; width: 100% !important; } .productFormSubmit input:hover {background:var(--hover-color);border-color:var(--hover-color); } .productCheckboxes {display: flex; flex-direction: column; gap: 10px; } .productCheckboxes input {appearance: none; width: 17px; aspect-ratio: 1; box-shadow: inset 0 0 0 1px #7B7B7B; border-radius: 50%; vertical-align: middle; display: block; margin: 3px 10px 0 0; flex-shrink: 0; transition: 0.3s; cursor: pointer; } .productCheckboxesItem {display: flex;align-items: flex-start;} .productCheckboxes input:checked {box-shadow: inset 0 0 0 15px #419B41; } .productListHolder .row {row-gap: 25px; } .productItem{display:flex;flex-direction:column;height: 100%;} .productItemImg img {border-radius: 10px 10px 0 0; display: block;width:100% } .productItemContent h3 {font-family: var(--bodyfont); line-height: 1.45; } .productItemContent ul {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; line-height: 1.3; } .productItemContent {box-shadow: 0 4px 10px rgb(0 0 0 / 8%);border-radius: 0 0 10px 10px;flex-grow: 1;display: flex;flex-direction: column;} .productItemInfo{padding:34px 38px;} .productItemBtnGroup .btncn {margin: 0; border-radius: 0; width: 50%; } .productItemBtnGroup {display: flex;border-radius: 0 0 10px 10px;margin-top: auto;} .productItemBtnGroup .btncn {background: var(--dark-bg); color: #fff; font-size: var(--fs-14); padding: 16px; border: 0; } .productItemBtnGroup .btncn:nth-child(even) {background: #fff; color: var(--head-font-color); box-shadow: -1px -3px 11px rgb(0 0 0 / 8%); } .productItemBtnGroup .btncn:first-child {border-radius: 0 0 0 10px; } .productItemBtnGroup .btncn:last-child {border-radius: 0 0 10px 0; } .productItemBtnGroup .btncn:hover{background:var(--hover-color);color:#fff} .productListLoadMore {font-size: var(--fs-17);transition: 0.3s;display:flex;justify-content:center;gap:4px} .productListLoadMore button{background: transparent;border: 0;display: inline-flex;gap: 8px;align-items: center;transition: 0.3s} .productListLoadMore select{border: 0;background:transparent;padding:0 20px 0 0;margin:0;background-image: url(assets/images/downArrow.svg); background-repeat: no-repeat; background-size: 12px; background-position: center right 0;appearance:none;cursor:pointer;} .productListLoadMore button:hover{color:var(--hover-color);} /*.productListLoadMore span {margin: 0; } .productListLoadMore i {color: #969696; } .productListLoadMore .fa-chevron-down {font-size: 12px; padding-bottom: 1px; } .productListLoadMore button:hover,.productListLoadMore button:hover i {color:var(--hover-color)} .loadmoredropdownul a{color:var(--head-font-color);padding:5px 10px;display:block; } .loadmoredropdownul a:hover{color:var(--hover-color) }*/ .relatedProductSliderHolder {position: relative; } .relatedProductSlider .slick-slide {padding: 11px 11px 14px 11px; height: auto; } .relatedProductSec .section-heading {margin: 0; } .relatedProductSec {overflow: hidden; } .relatedProductSlider .slick-list {margin: 0 -11px -14px; } .relatedProductSlider .slick-track {display: flex; } .relatedProductSlider .slick-slide > div {height: 100%; } .relatedProductSlider .productItem {display:flex!important} .relatedProductSliderNav {display: flex; gap: 10px; position: absolute; top: -22px; right: 0; transform: translateY(-100%); } .relatedProductSliderNav button {width: 46px; background: #F0F1F2; aspect-ratio: 1; border-radius: 5px; border: 0; transition: 0.3s; } .relatedProductSliderNav button:hover {background: var(--main-clr); color: #fff; } .productDtlsHd {max-width: 800px; } .productDtlsHd h1 {font-size: var(--fs-38); font-weight: 600; letter-spacing: -0.015em; } .productDtlsHd h2 {font-size: var(--fs-29); font-weight: 700; color: var(--main-clr); } .productDtlsBd {display: flex; gap: 18px;margin-top:50px } .productDtlsSidebarCol {width: 26.5%; flex-shrink: 0;min-width:320px } .productDtlsCol {width: 50%; flex-grow: 1; } .productDtlsImgHolder {display: flex; gap: 18px;; } .productImgThumbSliderWrap {width: 13.8%; } .productImgMainSliderWrap {width: 50%; flex-grow: 1; } .productDtlsImgHolder .slick-slide > div{line-height: 0} .productDtlsImgHolder .slick-arrow {border: 0; padding: 0; margin: 0 auto; display: block; text-align: center; background: transparent; font-size: 21px; transition: 0.3s;line-height:1 } .productDtlsImgHolder .slick-arrow:hover{color:var(--main-clr)} .productImgThumbSlider .slick-list{margin:12px 0} .productImgThumbSlider .slick-slide{padding:7px 0} .productImgThumbItem{background:#fff;border-radius: 10px;cursor:pointer;} .productImgThumbItem img {border-radius: 10px; aspect-ratio: 159/148; object-fit: cover; transition: 0.3s;display:block; } .slick-current .productImgThumbItem img {opacity: 0.4; } .productImgMainItem img{width:100%;display:block;border-radius: 10px} .productDescription { margin-top: 95px; } .productDescription h3 {font-size: var(--fs-21);font-weight: 600; font-family: var(--headfont); } .productDescription ul {font-weight: 500; font-size: var(--fs-17); padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 16px; } .productDescription ul li::marker {font-size: 24px; line-height: 0; } .productDescription > *:last-child:not(a){margin-bottom:0;padding-bottom:0} .productDescription > a:last-child{margin-bottom:0} .productDtlsSidebar {padding: 30px 30px 40px 30px; background: var(--light-bg); border-radius: 10px; display: flex; flex-direction: column; gap: 30px; } .productDtlsSidebarHd p {font-size: var(--fs-18) !important; font-weight: 600 !important;padding-bottom:6px !important; } .productDtlsSidebarHd h3{font-size:var(--fs-23) !important;font-weight:bold !important;font-family:var(--bodyfont) !important;color:var(--main-clr) !important;padding-bottom:0 !important;} .productDtlsSidebar .productSidebarBdInr{padding:0 !important;gap:20px !important;} .productDtlsSidebarItem {border-radius: 20px !important; background: #fff !important; padding: 30px 30px 40px 30px !important; } .productDtlsSidebarItemHd h4 {font-size: var(--fs-21) !important; font-weight: 600 !important; font-family: var(--bodyfont) !important; padding-bottom: 22px !important; } .productSidebarCta {text-align:center !important} .productSidebarCta .btncn{margin:0 !important;width: 100% !important;background: #419B41 !important;color: #fff !important;border: 0 !important;} .productSidebarCta .btncn:hover{background: var(--hover-color);} @media only screen and (max-width:1599px){ .productSidebarCol {width: 22%; } .productItemInfo {padding: 20px 20px 25px 20px; } .productSidebarBdInr,.productFilter .productSidebarBdInr{padding: 20px 20px 30px; gap: 15px; } .productDtlsSidebar {padding: 20px; gap: 15px; } .productDtlsSidebarItem{padding: 20px 20px 30px;} .productDtlsSidebar .productSidebarBdInr{gap:15px} .productSidebarItem {border-radius: 10px; } .productFormSubmit {margin-top: 6px; } } @media only screen and (max-width:1399px){ .productSidebarCol {width: 27%; } .productListHd {margin-bottom: 25px; } .productDtlsSidebarItem{border-radius: 10px} .productDtlsSidebar{padding:15px} .productDtlsBd {margin-top: 25px; } .productDescription {margin-top: 30px; } } @media only screen and (max-width:991px){ .productSidebarHd{pointer-events: all;position:relative;display:flex;justify-content: space-between;gap:10px} .productSidebarHd:after{ content:''; content: "\f061"; font-family: 'FontAwesome'; transform: rotate(90deg);transition: all .5s;flex-shrink:0;display:block; } .productSidebarHd.active:after{ transform: rotate(-90deg); transition: all .5s} .productListBd {flex-direction: column; } .productSidebarCol {width: 100%;} .productSidebarBd {display: none; } .productSidebarItem:not(:last-child) {margin-bottom:10px } .productListHd {margin-bottom: 0; } .productCount {text-align: center; } .relatedProductSliderNav {top: 50%; transform: translate(50%, -50%); right: 50%; width: 100%; justify-content: space-between; } .relatedProductSliderHolder {padding: 0 60px; } .productDtlsBd {flex-direction: column; gap: 40px; margin-top: 10px; } .productDtlsCol {width: 100%; } .productDtlsImgHolder {align-items: center; } .productDtlsSidebarCol {width: 100%; } } @media only screen and (max-width:767px){ .relatedProductSliderHolder {margin: 0 -20px; padding: 0 46px; } .relatedProductSliderNav button {width: 36px; } .productItemBtnGroup .btncn {font-size: 12px; padding: 14px 10px; } .productItemInfo {padding: 15px; } .productItemContent h3 {padding: 0 0 12px 0; } .productItemContent ul {gap: 5px; } .productImgThumbSlider .slick-slide {padding: 4px 0; } .productImgThumbItem img,.productImgThumbItem {border-radius: 5px; } .productDtlsImgHolder {gap: 10px; } .productImgThumbSlider .slick-list {margin: 4px 0; } .productDtlsSidebarHd,.productDtlsSidebarHd p,.productDtlsSidebarItemHd {text-align: center; } } /*Product end*/ /*breadcumb start*/ .breadcumb{ padding:44px 0 0;color:var(--dark-bg); } .breadcumb ul{ display:flex; flex-wrap: wrap; margin:0; padding:0; list-style:none;font-weight:600} .breadcumb ul li{ font-family:var(--bodyfont); font-size:var(--fs-16);position:relative;font-weight:400;} .breadcumb ul li:after{ content:'\f101'; display:inline-block;margin:0 8px;font-weight:900;font-family: 'FontAwesome';font-size: 13px} .breadcumb ul li:last-child:after{ display:none; } .breadcumb ul li a{ color:var(--body-font-color)} .breadcumb ul li a:hover{ color:var(--hover-color);opacity:1 } .breadcumb ul li > span:after{ content:'\f101'; display:inline-block;margin:0 8px;font-weight:900;font-family: 'FontAwesome';font-size: 13px} .breadcumb ul li > span:last-child:after{ display:none; } @media only screen and (max-width:767px){ .breadcumb{padding:30px 0 0} .breadcumb ul li{font-size:13px} } /*breadcumb end*/ /*FOOTER start*/ .footer{color:#fff;background:var(--dark-bg);} .footerTop{ padding:90px 0 70px 0; } .footerTopContent{display:flex;justify-content:space-between;gap: 30px;} .footerwidget_1{width:22%;min-width: 314px;} .footerwidget_2,.footerwidget_3,.footerwidget_4,.footerwidget_5{max-width:18%} .footer-logo{max-width: 277px;margin-bottom: 17px} .footer-logo img{width:100%} .footerTopContent h4{color:#fff;font-size: var(--fs-18);text-transform:uppercase;padding: 0 0 20px 0;} .footerTopContent p{ color:#fff; font-size:var(--fs-18); font-family:var(--bodyfont);text-align: left;} .footerTopContent p strong{ font-weight:700 } .footerTopContent p a:hover{ color:var(--main-clr); } .footer-nav ul{ margin:0; padding:0; list-style:none; display: grid;grid-template-columns: 1fr;column-gap:10px;row-gap:10px;justify-content: space-between;} .footer-nav ul li{ display:block; } .footer-nav ul li a{ display:inline-block;font-size:var(--fs-17); color:#fff;font-weight:300} .footer-nav ul li a:hover{ color:#fff;box-shadow:0 1px 0 0 #fff } .ftbtm{ justify-content:space-between; align-items:center; display: flex;border-top:1px solid #41474C; padding:30px 0; } .copyright{ font-weight: 300} .ftbtmUl{max-width:60%;} .ftbtmUl ul{margin:0; padding:0; list-style:none; display: flex;flex-wrap:wrap;margin-top: 0px;line-height:1.2;row-gap:10px;justify-content: flex-end;} .ftbtmUl ul li{ display:inline-block; } .ftbtmUl ul li:not(:last-child){border-right: 1px solid #ffffff;padding-right:12px;margin-right: 8px} .ftbtmUl ul li a{ display:inline-block;color:#fff;font-weight:300} .ftbtmUl ul li a:hover{box-shadow:0 1px 0 0 #fff;color:#fff;} .social ul{ margin:0; padding:0; list-style:none; display: flex; gap: 11px;flex-wrap:wrap;margin-top: 40px} .social ul li a{ display:flex ; color:#fff; font-size:25px;width:59px;aspect-ratio:1;border-radius:50%;background:#24292F;align-items:center;justify-content:center;transition:0.3s} .social ul li a i{ display:block ;} .social ul li a:hover{background: var(--hover-color);} .footer-heading-block{pointer-events: none;} @media only screen and (max-width:1399px){ .social ul {margin-top: 20px; } } @media only screen and (max-width:1199px){ .footerTop{ padding:45px 0 } .footerTopContent{flex-direction:column;gap:35px} .footerwidget_1{ width:100%;} .footerwidget_2{ width:100%;max-width: 100%} .footerwidget_3{ width:100%;max-width: 100% } .footerwidget_4{ width:100%;max-width: 100% } .footerwidget_5{ width:100%;max-width: 100% } .footer-logo{max-width: 250px} .footer-nav ul {justify-content: flex-start; column-gap: 40px; } .footer-heading-block{position:relative;pointer-events:all ;padding-right: 20px;} .footer-content-block{ display:none;} .footer-heading-block h4{padding-bottom:0} .footer-content-block > *:first-child{margin-top: 20px} .footer-heading-block:after{ content:''; position:absolute; right:0; top:-3px; content: "\f061"; font-family: 'FontAwesome'; color:#fff; transform: rotate(90deg);transition: all .5s } .footer-heading-block.active:after{ transform: rotate(-90deg); transition: all .5s} } @media only screen and (max-width:991px){ .footer-logo{max-width:210px;margin-bottom:25px;margin-left: auto; margin-right: auto;} .social ul{justify-content:center;margin:0} .footerwidget_1 p{text-align:center;} } @media only screen and (max-width:767px){ .ftbtm {flex-direction: column; align-items: center;text-align:center;row-gap:14px;padding:25px 0 } .ftbtmUl{max-width:100%;} .ftbtmUl ul{justify-content:center;text-align:center;} .social ul li a {width: 40px; font-size: 18px; padding: 9px; } } /*FOOTER end*/ /* Search Fliter CSS */ #truck-search-results { position: absolute; background: #fff; border: 1px solid #ddd; width: 100%; z-index: 999; display: none; } .truck-suggestions { list-style: none; margin: 0; padding: 0; } .truck-suggestions li { padding: 8px 12px; } .truck-suggestions li a { text-decoration: none; color: #000; display: block; } .truck-suggestions li:hover { background: #f2f2f2; } .gform-theme--foundation .gfield .ginput_password.large, .gform-theme--foundation .gfield input.large, .gform-theme--foundation .gfield select.large{height:45px;} .productFormItem input[type=submit]{border-color: var(--main-clr) !important; background: var(--main-clr) !important;} .productFormItem input[type=submit]:hover {background: var(--hover-color) !important;border-color: var(--hover-color) !important;} /* End Search Fliter CSS */