/*!
Theme Name: getsslcert
Theme URI: #
Author: VMC 
Author URI: #
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: getsslcert
*/
:root {
  --primary: #00693B;
  --secondary: #EDB400;
  --light-green: #F0FFF9;
  --body-color: #575757;
}
/* 1.0 General
--------------------------------------------------------------*/
html, body{ margin:0px; padding:0px; overflow-x: hidden;}
ul, ol { margin: 0 0 1.5em 20px; padding: 0}
ul { list-style: outside none disc}
ol { list-style: outside none decimal}
li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em}
li > ul{list-style: circle;}

.nowrap{ white-space: nowrap;}

hr { background-color: #bbbbbb; border: 0 none; height: 1px; margin-bottom: 1.5em}
a { color:var(--primary); text-decoration: underline}
a:hover, a:active { color: #000; text-decoration: none}
fieldset { border: medium none; margin: 15px 0; padding: 0}
legend { color: #101010; font-size: 16px; font-weight: bold; margin: 10px 0}
a:focus , *{ outline:none}
:-moz-placeholder { color: currentcolor; font-family: "Plus Jakarta Sans", sans-serif}
*::-moz-placeholder { color: currentcolor; font-family: "Plus Jakarta Sans", sans-serif; opacity: 0.5}
figcaption, figure, main { display: block}
b, strong { font-weight: 700}
img{ max-width:100%; border:none; vertical-align: top; height: auto}
iframe{ max-width: 100%}

/* 2.0 Clearings
--------------------------------------------------------------*/
.clear:before, .clear:after, .site-header:before, .site-header:after,.site-content:before, .site-content:after , .site-footer:before, .site-footer:after{ content: ""; display: table; table-layout: fixed}
.clear:after, .site-header:after, .site-content:after, .site-footer:after { clear: both}

/* 3.0 Alignments
--------------------------------------------------------------*/
.alignleft { display: inline; float: left; margin-right: 1.5em}
.alignright { display: inline; float: right; margin-left: 1.5em}
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto}
.text-left{ text-align:left !important}
.text-center{ text-align:center !important}
.text-right{ text-align:right !important}
.text-justify{text-align:justify !important}
.uppercase{ text-transform:uppercase !important}
.align-center{ display:flex; align-items:center}
.row-revers{flex-direction:row-reverse; }
/* 4.0 Typography
--------------------------------------------------------------*/
body, button, input, select, textarea { color:var(--body-color); font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; word-spacing: 2px;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 { clear: both; line-height: 1.3; margin: 0 0 15px; padding: 0 0 0; font-family: "Plus Jakarta Sans", sans-serif; color:#29282B;}
h1,.h1{ font-size: 38px; font-weight: bold; color: #fff}
h2,.h2{ font-size: 36px; font-weight: bold; text-align: center; color: #29282B; margin-bottom: 40px;}
h3,.h3{	font-size: 22px; font-weight: bold; color: var(--primary);}
h4{	font-size: 22px; font-weight: 600}
h5{	font-size: 16px; font-weight: 600}
h6 { font-size: 15px}
p { margin: 0 0 15px; padding: 0}
p:empty { display: none}
p:last-child{ margin-bottom: 0}
.table-wrap{ overflow: auto; margin-bottom: 20px; border-right: solid 1px #ddd;}
table{border-collapse: collapse; width: 100%; margin-bottom: 0;}
table td,
table th{ border: solid 1px #e5e5e5; padding: 15px 20px; font-size: 15px; min-width: 180px;}

table.table-width-auto td,
table.table-width-auto th{ min-width: inherit;}

table th{ background: #f3f3f3; color: #000; font-weight: 600}
table td:last-child,
table th:last-child{ border-right: none}
table.header-table th { background:#023860; color:#fff}
table.alt-bg  tr:nth-child(even) { background-color: #f1f1f1;}
.site-content li { padding-top: 5px; padding-bottom: 5px;}

/* 5.0 Form Style
--------------------------------------------------------------*/
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select{
	height: 44px; line-height: 44px; border: solid 1px #e5e5e5; padding:6px 15px; width:100%; margin-bottom:10px; display:block; -webkit-appearance:none; font-family: "Plus Jakarta Sans", sans-serif; border-radius: 5px; font-size: 15px;}

select{ height: 44px; line-height: 44px; border: solid 1px #e5e5e5; border-radius: 5px; color: #000; padding:0 30px 0 10px; background: url("images/select-arrow.svg") center right 10px no-repeat #fff;background-size: 13px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: "Plus Jakarta Sans", sans-serif; font-size: 15px;}

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus{ border-color: #e5e5e5}
textarea{ height:120px; font-size: 15px; line-height: 1.5}

button, html [type="button"], [type="reset"], [type="submit"], .button { -webkit-appearance: button; background:var(--secondary); color:#ffffff !important; border-radius:5px; line-height:42px; font-size:16px; padding:0 20px 0 20px; text-align:center; font-family: 'Plus Jakarta Sans', sans-serif; text-transform:uppercase; cursor:pointer; font-weight:600; display: inline-block; transition: all 0.2s ease; text-decoration: none !important; border: solid 1px transparent; white-space: nowrap; position:relative;}

button:hover, html [type="button"]:hover, [type="reset"]:hover, [type="submit"]:hover, .button:hover{ background:#d6a300; color:#ffffff; border: solid 1px transparent}

.button a{ color: #fff; text-decoration: none;}

.button.button-wrap{white-space: initial; line-height: 1.3; padding-top: 7px; padding-bottom: 7px;}
.button + .button{ margin-left: 5px;}

.button-sm,
.sm-button{padding:0 16px; line-height:32px; font-size:14px}
.button-mid{padding: 0 18px; line-height:38px; font-size:15px}
	
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors { clear: both; float: left; margin: 0 10px; width: calc(100% - 20px); background-color: #fff3cd; border-color: #ffeeba; color: #856404; padding:8px 12px}
.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ng{ clear: both; float: left; margin: 0 10px; width: calc(100% - 20px); background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; padding:8px 12px}
input.wpcf7-not-valid, textarea.wpcf7-not-valid, select.wpcf7-not-valid{ border-color: #dc3545}
.wpcf7-not-valid-tip{ display:none !important}

/* 6.0 Layout
--------------------------------------------------------------*/
body{background:#ffffff;}
*, *::before, *::after {box-sizing: border-box;}
img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img { max-width: 100%; height: auto}
.row{margin-left:-15px;margin-right:-15px; display: flex; flex-wrap: wrap;row-gap: 30px;}
.col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-5-new{min-height:1px;padding-left:15px;padding-right:15px;position:relative; flex: 0 0 auto}
.col-12{width:100%}
.col-11{width:91.6667%}
.col-10{width:83.3333%}
.col-9{width:75%}
.col-8{width:66.6667%}
.col-7{width:58.3333%}
.col-6{width:50%}
.col-5{width:41.6667%}
.col-4{width:33.3333%}
.col-3{width:25%}
.col-2{width:16.6667%}
.col-1{width:8.33333%}
.col-5-new{width:20%}

.font-15{ font-size:15px}
.font-18{ font-size:18px}
.font-20{ font-size:20px}
.font-22{ font-size:22px}
.font-24{ font-size:24px}
.font-s-bold{ font-weight:600}
.font-bold{ font-weight:800}
.font-600{ font-weight: 600}
.font-500{ font-weight: 500}

.pb-0{padding-bottom:0 !important}
.pb-10{padding-bottom:10px !important}
.pb-20{padding-bottom:20px !important}
.pb-30{padding-bottom:30px !important}
.pb-40{padding-bottom:40px !important}
.pb-50{padding-bottom:50px !important}
.pb-60{padding-bottom:60px !important}

.pt-0{ padding-top:0 !important}
.pt-10{ padding-top:10px !important}
.pt-20{ padding-top:20px !important}
.pt-30{ padding-top:30px !important}
.pt-40{ padding-top:40px !important}
.pt-50{ padding-top:50px !important}
.pt-60{ padding-top:60px !important}

.mb-0{margin-bottom:0 !important}
.mb-10{margin-bottom:10px !important}
.mb-20{margin-bottom:20px !important}
.mb-30{margin-bottom:30px !important}
.mb-40{margin-bottom:40px !important}
.mb-50{margin-bottom:50px !important}
.mb-60{margin-bottom:60px !important}

.mt-0{ margin-top:0 !important}
.mt-10{ margin-top:10px !important}
.mt-20{ margin-top:20px !important}
.mt-30{ margin-top:30px !important}
.mt-40{ margin-top:40px !important}
.mt-50{ margin-top:50px !important}
.mt-60{ margin-top:60px !important}

.gx-60{ margin-left: -30px; margin-right: -30px}
.gx-60 [class*="col-"]{ padding-left: 30px; padding-right: 30px;}
.font-13{ font-size: 13px;}
.container{max-width:1350px; width:100%; margin:auto; padding: 0 30px; }
.section{ padding: 60px 0;}
.mw-1024{max-width:1024px;}
.mw-850{max-width:850px;}
.mw-750{max-width:750px;}
.mw-650{max-width:650px;}

.j-center{ justify-content: center; display: flex}
/* 7.0 Header- Footer
--------------------------------------------------------------*/
body{ padding-top: 80px;}
.site-header { position: fixed; top: 0; z-index: 9999; background: #fff; transition: all 0.3s ease; width: 100%; height: 80px; display: flex; align-items: center; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);}  
.site-header.sticky {height: 60px;}
#site-navigation .menu-toggle{ display: none;}
.site-header .inner-header{ display: flex; justify-content: space-between; align-items: center;}
#primary-menu{ margin: 0}
#primary-menu li{ display:inline; padding:0 5px;}
#primary-menu li a{ text-decoration: none;  padding:0 5px; color: #000000; font-weight: 600;}
#primary-menu li a.active{ color: var(--primary);}

#header-cta-menu{ margin: 0}

.custom-logo{height: 40px; width: auto;}

.section.hero{ padding: 40px 0; background: var(--primary); color: #fff; position: relative; overflow: hidden;}
.section.hero:before{ content: ""; border: 64px solid #005D34; width: 530px; height: 530px; position: absolute; left: -265px; top: -300px; border-radius: 100%;}
.section.hero:after{ content: ""; border: 100px solid #005D34; width: 900px; height: 900px; position: absolute; right: -400px; top: -150px; border-radius: 100%; z-index: 0}
.section.hero .container{z-index: 1; position: relative}
.section.hero .container:before{ content: ""; border: 26px solid #005D34; width: 200px; height: 200px; position: absolute; left: 265px; bottom: -130px; border-radius: 100%;}
.hero-text{ margin: 30px 0;}
.hero-down-arrow{ position: relative; margin-top: 30px; width: 54px; cursor: pointer;}
.hero-down-arrow:before{ content: ""; width: 54px; height: 54px; border: solid 2px rgba(255,255,255,0.3); display:block; border-radius: 100%;}
.hero-down-arrow img { position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -7px; -webkit-animation: sdb04 3s infinite; animation: sdb04 3s infinite; box-sizing: border-box;}
@-webkit-keyframes sdb04 {
  0% {
    -webkit-transform:  translate(0, 0);
  }
  20% {
    -webkit-transform: translate(0, 10px);
  }
  40% {
    -webkit-transform:  translate(0, 0);
  }
}
@keyframes sdb04 {
  0% {
    transform:  translate(0, 0);
  }
  20% {
    transform: translate(0, 10px);
  }
  40% {
    transform: translate(0, 0);
  }
}
.hero-arrow{ position: absolute; right: -60px; bottom: 80px;}
.hero-arrow svg{width: 190px; height: 85px;}
.section.hero .line-arrow {stroke-dasharray: 1000; stroke-dashoffset: 1000;animation: dash 5s linear infinite;}
@keyframes dash {
  to {stroke-dashoffset: 0;}
}
.section.hero .arrowhead {opacity: 0; animation: arrow 5s linear infinite;}
@keyframes arrow {
  0%, 22%   { opacity: 0; }  /* hidden while line is drawing */
  25%       { opacity: 1; }  /* fade in */
  98%       { opacity: 1; }  /* hold briefly */
  100%      { opacity: 0; }  /* fade out for clean loop */
}
@media (prefers-reduced-motion: reduce) {
  .line-arrow,
  .arrowhead { animation: none; opacity: 1; }
}


.section.hero .right-side{ position: relative;}
.section.hero .right-side:before{animation: slide-right 5s linear infinite; content: ""; width: 188px; height: 216px; position: absolute; background: url("images/certificate-icon.svg") no-repeat center center; top: -25px; left: -60px;}
.section.hero .right-side:after{animation: slide-left 5s linear infinite;content: ""; width: 155px; height: 180px; position: absolute; background: url("images/ssl-icon.svg") no-repeat center center; bottom: -7px; right: 25px;}



@keyframes slide-right {
  30% {transform: translateX(30px);}
}

@keyframes slide-left {
  30% {transform: translateX(-30px);}
}

/*Product Types*/
.top-title{ text-align: center; margin-bottom: 5px; color:var(--primary); text-transform: uppercase; font-weight: bold; word-spacing: 3px;}
.title-left .top-title,
.title-left h2{ text-align: left}
.product-types-box{background: #FFFFFF; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05); border-radius: 5px 5px 50px 5px; padding: 35px; height: 100%; transition: all 0.2s ease;}
.product-types-box:hover{ background: var(--primary); color: #fff;}
.product-types-box:hover h3{ color: #fff}

/*counter-section*/
.counter-section{ text-align: center}
.counter-title{ font-size: 36px; font-weight: bold; color: #000; margin-bottom: 5px}
.counter-content{ text-transform: uppercase; font-weight: 600}

/*SSL Brands*/
.bg-section{ position: relative}
.bg-section:before{content: ""; background: var(--light-green); width: 94%; position: absolute; left: 3%; top: 0; height: 100%; z-index: -1; border-radius: 30px;}
.brand-list-item{ background: #fff; padding: 35px; height: 100%; border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);}
.brand-list-logo{ margin-bottom: 15px;}

.brand-list-logo img { height: 30px; width: auto;}
.brand-list-content{ margin-bottom: 20px;}
.brand-list-bottom{ margin-top: auto; display: flex; justify-content: space-between; align-items: center;}
.brand-list-bottom .starts-from{ text-transform: uppercase; font-size: 13px;}
.brand-list-bottom .price{ font-size: 36px; color: #000000; line-height: 1; font-weight: bold}
.brand-list-bottom-right a{ position: relative; width: 44px; height: 44px; display: block}
.brand-list-bottom-right a:before{content: ""; width: 44px; height: 44px; border: solid 1px var(--primary); display:block; border-radius: 100%; position: absolute; transition: all 0.2s ease;}
.brand-list-bottom-right a img{ display: block; position: absolute; left: 50%; top: 50%; margin-left: -7px; margin-top: -7px;}

.brand-list-bottom-right a:hover:before{ background: var(--primary);}
.brand-list-bottom-right a:hover img{filter: brightness(0) invert(1); -webkit-animation: arrowleft 3s infinite; animation: arrowleft 3s infinite; }

@-webkit-keyframes arrowleft {
  0% {
    -webkit-transform:  translate(0, 0);
  }
  20% {
    -webkit-transform: translate(10px, 0);
  }
  40% {
    -webkit-transform:  translate(0, 0);
  }
}
@keyframes arrowleft {
  0% {
    transform:  translate(0, 0);
  }
  20% {
    transform: translate(10px, 0);
  }
  40% {
    transform: translate(0, 0);
  }
}
/*why us*/
.why-us-content{ margin-bottom: 25px;}
.accordion-item{ padding-bottom: 20px;}
.accordion-item:last-child{ padding-bottom: 0;}
.accordion-item h3 { margin: 0; cursor: pointer; color: #000; font-size: 16px; font-weight: 600; text-transform: uppercase;  padding-left: 25px; position: relative}
.accordion-item h3.active {}
.accordion-item h3:before,
.accordion-item h3:after{ content: ""; width: 17px; height: 3px; background: var(--primary); position: absolute; left: 0; top: 9px; transition: all 0.2s ease;}
.accordion-item h3:after{ width: 3px; height: 17px; top: 2px; left: 7px;}
.accordion-item h3.active:after{transform: rotate(90deg); top: 2px;}
.accordion-content { display: none; padding-top: 15px; padding-left: 25px;}

/*benefits-item*/
.benefits-item{ height: 100%; background: #fff; padding: 25px; border-radius: 10px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);}
.benefits-icon { margin-bottom: 15px; display: inline-block;  border-radius: 100%;}
.benefits-icon img{ width: 45px; height: auto;}

/*testimonial*/
.testimonial-item{background: #FFFFFF;border: 1px solid #E5EAF4;border-radius: 10px; height: 100%; padding: 25px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);}
.testimonial-header{ margin-bottom: 20px; display: flex; align-items: center; grid-gap: 15px;}
.testimonial-icon{ height: 56px; width: 56px; line-height: 56px; text-align: center; color: var(--primary); border: solid 1px var(--primary); font-weight: bold; text-transform: uppercase; font-size: 22px; border-radius: 100%;}
.testimonial-header h3{ margin: 0; font-size: 18px;}
.testimonial-role{ font-style: italic; font-size: 14px;}
.testimonial .slick-track{display: flex; padding-bottom: 15px; padding-top: 15px;}
.testimonial .slick-initialized .slick-slide{height: auto;}
.testimonial button{ background: #fff; filter: drop-shadow(0px 12px 16px rgba(0, 0, 0, 0.08)); width: 50px; height: 50px; border-radius: 100%; position: absolute; left: -13px; top: 50%; transform: translateY(-50%) rotate(180deg); padding: 0; z-index: 2; text-indent: -999px; overflow: hidden;}
.testimonial button:before{ content: ""; width: 14px; height: 14px; background: url("images/left-arrow.svg") no-repeat center center; background-size: 13px; transform: translate(-50%,-50%); left: 50%; top: 50%; position: absolute}
.testimonial button.slick-next {left: auto; right: -13px; transform: translateY(-50%) rotate(0);}
.testimonial button:hover{ background: var(--primary);}
.testimonial button:hover:before{filter: brightness(0) invert(1);}

/*faqs*/
.faqs-item{background: #FFFFFF;border: 1px solid #E5EAF4;border-radius: 10px; padding: 25px; margin-bottom: 20px; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);}
.faqs-item:last-child{ margin-bottom: 0}
.faqs-item h3{margin-bottom: 0; font-size: 18px; font-weight: 600; color: var(--primary); cursor: pointer; position: relative; padding-right: 35px;}
.faqs-item h3:before,
.faqs-item h3:after{ content: ""; width: 36px; height: 36px; filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.08)); background: #fff; position: absolute; top: 50%; right: -5px; transform: translateY(-50%); border-radius: 100%; transition: all 0.2s ease; }
.faqs-item h3:after{ background: url("images/left-arrow1.svg") no-repeat center center; background-size: 10px;}
.faqs-item h3.active:before{background-color: var(--primary); }
.faqs-item h3.active:after{filter: brightness(0) invert(1); transform:translateY(-50%) rotate(-90deg);  transform-origin: center center;}
.faqs-content{ display: none; padding-top: 15px;}
/*site-footer*/


.site-footer{ padding: 60px 0 0; background: var(--primary); color: #fff; position: relative; overflow: hidden; font-size: 15px;}
.site-footer:before{ content: ""; border: 45px solid #005D34; width: 345px; height: 345px; position: absolute; left: -175px; top: -200px; border-radius: 100%;}
.site-footer:after{ content: ""; border: 55px solid #005D34; width: 500px; height: 500px; position: absolute; right: -250px; top: -100px; border-radius: 100%; z-index: 0}
.site-footer .container{z-index: 1; position: relative}
.site-footer .container:before{ content: ""; border: 24px solid #005D34; width: 200px; height: 200px; position: absolute; left: -100px; bottom: -130px; border-radius: 100%;}
.footer-widget-areas{ display: flex; justify-content: space-between;}
.footer-widget-areas .footer-about{ width: 25%;}
.footer-widget-areas .footer-about img{ margin-bottom: 10px; height: 50px !important; width: auto}
.footer-widget-areas h3{ color: #fff; text-transform: uppercase; margin-bottom: 25px; font-size: 16px; font-weight: 600}
.footer-widget-areas ul{ margin: 0; list-style-type: none;}
.footer-widget-areas a{ color: #fff; text-decoration: none}
.footer-widget-areas a:hover{ text-decoration: underline}
.footer-widget-areas .widget_nav_menu li{ padding-bottom: 7px;}
.footer-widget-areas .widget_nav_menu li:last-child{ padding-bottom: 0}
.footer-widget-areas .widget_nav_menu li a{ padding-left: 15px; background: url("images/footer-arrow.svg") no-repeat left 5px; background-size: 7px;}
.footer-widget-areas .footer-brands{ width: 25%;}
.footer-widget-areas .footer-brands ul.menu{ display: flex; flex-wrap: wrap; justify-content: space-between}
.footer-widget-areas .footer-brands ul.menu li{ width: 50%; flex: 0 0 50%;}

.footer-widget-areas .footer-quick-link{ margin-left: -5%;}
.contact-info-widget li{ display: flex; grid-gap: 20px; align-items: flex-start; padding-bottom: 10px;} 
.contact-info-widget li:last-child{ padding-bottom: 0}
.media-body{display: table-cell;}

.copyright-text{position: relative; text-align: center; padding: 20px 0; border-top:solid 1px #005D34; margin-top: 30px;}

@media only screen and (max-width:1450px) {
    .bg-section::before{left: 0; width: 100%; border-radius: 0;}
}
@media only screen and (max-width:1279px) {
    body, button, input, select, textarea{font-size: 15px;}
    body { padding-top: 70px;}
    .site-header{height: 70px;}
    .site-header.sticky { height: 55px;}
    #primary-menu li{padding: 0; font-size: 15px;}
    .button-mid { padding: 0 12px;  line-height: 33px;  font-size: 14px;}
    .custom-logo{height: 36px; width: auto;}
   
    
    .section.hero{padding: 20px 0;}
     h1{font-size: 32px;}
    .section.hero .right-side::before{left: -40px; top: -10px; background-size: contain; width: 158px; height: 186px;}
    .section.hero .right-side::after{background-size: contain; width: 135px; height: 160px; }
    .section.hero::before{border: 40px solid #005D34; width: 430px; height: 430px;  left: -235px; top: -290px;}
    .section.hero::after{border: 80px solid #005D34; width: 700px; height: 700px; right: -510px; top: -117px;}
    .section.hero .container::before{border: 16px solid #005D34; width: 150px; height: 150px; left: -60px; bottom: -118px;}
    .section.hero .right-side{margin: 0 40px;}
    .hero-arrow{right: -50px; bottom: 90px;}
    .hero-arrow svg{width: 170px; height: 65px;}
    
    .section { padding: 50px 0;}
    h2, .h2{font-size: 30px;margin-bottom: 30px;}
    h3, .h3{font-size: 20px;}
    .product-types-box{padding: 25px;}
    .counter-title{font-size: 30px;}
    .counter-content{font-size: 90%;}
    .brand-list-item{ padding: 25px;}
    .brand-list-logo img{height: 26px;}
    .brand-list-bottom .price{font-size: 30px;}
    .brand-list-bottom-right a{width: 40px; height: 40px;}
    .brand-list-bottom-right a::before{width: 40px; height: 40px;}
    .brand-list-bottom-right a img{margin-left: -6px; margin-top: -6px; width: 12px; height: auto;}
    .accordion-item h3{font-size: 15px;}
    .accordion-item h3::before, .accordion-item h3::after{width: 15px; height: 3px; left: 0; top: 8px;}
    .accordion-item h3::after { width: 3px; height: 15px; top: 2px; left: 6px;}
    .testimonial-icon{height: 46px; width: 46px; line-height: 44px; font-size: 20px;}
    .faqs-item{padding: 20px;}
    .faqs-item h3{font-size: 16px;}
    .faqs-item h3::before, .faqs-item h3::after{width: 32px; height: 32px;}
    .site-footer{padding: 50px 0 0; font-size: 14px;}
    .footer-widget-areas .footer-quick-link{margin-left: -3%;}
}
@media only screen and (max-width:1023px) {
     h1 { font-size: 24px; }
     h2, .h2 { font-size: 24px; }
     h3, .h3 { font-size: 18px; }
    .section { padding: 40px 0; }
    .section.hero .right-side{margin: 0 10px;}
    .hero-down-arrow{ display: none;}
    .section.hero .right-side::before{width: 110px; height: 134px;}
    .section.hero .right-side::after{width: 115px; height: 140px;}
    button, html [type="button"], [type="reset"], [type="submit"], .button{line-height: 38px; font-size: 15px; padding: 0 15px 0 15px;}
    .button-mid{padding: 0 12px; line-height: 33px; font-size: 14px;}
    .hero-arrow svg { width: 150px; height: 45px; }
    .hero-arrow { right: -30px; bottom: 30px;}
    h2, .h2{font-size: 24px;}
    .col-3 { width: 50%;}
    .brand-list .col-4 { width: 50%;}
    .why-us .col-6{width: 100%;}
    .why-us .col-6.text-right{ text-align: center !important}
    .benefits .col-4 { width: 50%;}
    .brand-list-bottom .price { font-size: 28px; }
    .testimonial button{width: 40px; height: 40px; padding: 0; left: -4px;}
    .testimonial button.slick-next{right: -4px;}
    .faqs .row{row-gap: 20px;}
    .faqs .col-6{ width: 100%;}    
    .site-footer{padding: 40px 0 0;}
    .footer-widget-areas .footer-brands{ width: auto;}
    .footer-widget-areas h3{font-size: 15px;}
    .footer-widget-areas .footer-quick-link{ margin-left: 0}
    .contact-info-widget li{grid-gap: 15px;}
    .footer-widget-areas .footer-brands ul.menu{display: block;}
    .copyright-text{margin-top: 20px; padding: 15px 0;}
    .footer-widget-areas .footer-brands ul.menu li{width: auto; flex: 0 0 auto;}
    .site-footer::before{border: 30px solid #005D34; width: 245px; height: 245px; left: -100px; top: -150px;}
    .site-footer::after{width: 500px; height: 500px; right: -380px; top: -50px;}
    .site-header .inner-header{ position: relative}
    .main-navigation .primary-menu-wrapper{ display: none}
    #site-navigation { position: absolute; right: 0}
    #site-navigation .menu-toggle { display: block; padding: 0; width: 35px; overflow: hidden; text-indent: -999px; border: 1px solid var(--primary); background: url("images/menu.svg") no-repeat center center; background-size: 21px;}
    #site-navigation.toggled .menu-toggle{ background: url("images/close.svg") no-repeat center center; background-size: 21px;}
    #site-navigation .menu-toggle:before{ content: "";}
    .header-cta-menu-wrapper{position: absolute; right: 50px;}
    .main-navigation .primary-menu-wrapper{display: block; position: absolute; background: #fff; height: 100vh; overflow: auto; width: 250px; top: 51px; box-shadow: 0px 26px 5px 0 rgba(0, 0, 0, 0.10); right: -340px; transition: right 0.5s;}
    .main-navigation.toggled .primary-menu-wrapper{right: -30px;}
    #primary-menu {border-top: solid 1px #E5EAF4;}
    #primary-menu li{ display: block}
    #primary-menu li a{padding: 10px 20px;display: block; border-bottom: solid 1px #E5EAF4;}
    #primary-menu li a.active,
    #primary-menu li a:hover{ background: var(--primary); color: #fff;}
    .site-header.sticky .main-navigation.toggled .primary-menu-wrapper{top: 45px;}
}
@media only screen and (min-width:768px) {
	footer .widget h3 + div{ display: block !important; height: auto !important}
}
@media only screen and (max-width:767px) {
    body, button, input, select, textarea { font-size: 14px; }
    h1 { font-size: 22px; }
    h2, .h2 { font-size: 22px; }
    .hero-text { margin: 20px 0;}
    .section.hero .right-side::before { width: 90px; height: 104px; left: -10px; top: -10px;}
    .section.hero .right-side::after { width: 95px; height: 120px; bottom: -10px; right: 5px;}
    .hero-arrow { right: -50px; bottom: 20px; }
    .product-types-box { padding: 20px; }
    .counter-title { font-size: 25px; }
    .brand-list-item { padding: 20px; }
    .brand-list-logo img { height: 24px; }
    .brand-list-bottom .price { font-size: 26px; }
    .brand-list-bottom-right a { width: 34px; height: 34px; }
    .brand-list-bottom-right a::before { width: 34px; height: 34px; }
    .benefits-item{padding: 25px;}
    .testimonial-item{padding: 20px;}
    .testimonial-icon { height: 40px; width: 40px; line-height: 38px; font-size: 16px; }
    .testimonial-header{grid-gap: 10px;}
    .testimonial-header h3{font-size: 16px;}
    .footer-widget-areas{flex-direction: column;}
    .footer-widget-areas .footer-widget-col { width: 100%; margin-bottom: 15px;}
    .footer-widget-areas .footer-about{border-bottom: solid 1px #005D34; padding-bottom: 15px;}
    footer .widget{ border-bottom: solid 1px #005D34}
    footer .footer-about .widget{ border: none;}
    footer .widget h3 + div{display: none;}
    
	footer .footer-widget-areas  h3{margin-bottom: 15px; position: relative; cursor: pointer;}
	footer .footer-widget-areas  h3:after,
    footer .footer-widget-areas  h3:before{ content: ""; width: 16px; height: 2px; background: #fff; position: absolute; right: 0; top: 13px;}
	footer .footer-widget-areas  h3:before{width: 2px; height: 16px; right: 7px; top: 6px;}
	footer .widget h3 + div{ margin-bottom: 15px;}
	footer .footer-widget-areas  h3.active:before{ display: none}
    .copyright-text{ border-top: none; margin-top: 0; padding: 0 0 20px;}
    .site-footer::after{ display: none}
    
}
@media only screen and (max-width:639px) {
    .section.hero::after{width: 600px; height: 600px; right: -430px; top: -117px;}
    .section.hero .right-side::before{ left: -10px; top: -40px;}
    .section.hero .right-side::after{bottom: -40px; right: 5px;}
}
@media only screen and (max-width:549px) {
    .container{padding: 0 20px;}
    .section { padding: 30px 0; }
    .section.hero .col-6{ width: 100%;}
    .hero-arrow{ display: none}
    .section.hero::after { width: 500px; height: 500px; right: -400px; top: 50%; margin-top: -250px; border: 50px solid #005D34;}
    .section.hero .right-side{max-width: 270px; margin: 0; margin-top: 20px;}
    .section.hero .right-side::before{width: 110px; height: 124px; left: -50px; top: 0;}
    .section.hero .right-side::after{width: 115px; height: 140px; bottom: 0; right: -25px;}
    h2, .h2{font-size: 18px; margin-bottom: 20px;}
    h3, .h3 { font-size: 16px; }
    .row{row-gap: 20px;}
    .product-types .col-3 { width: 100%; }
    .counter-title { font-size: 22px; }
    .brand-list .col-4 { width: 100%; }
    .benefits .col-4 { width: 100%; }
    .title-left .top-title, .title-left h2 { text-align: center;}
    .benefits h2{ margin-bottom: 0}
    button, html [type="button"], [type="reset"], [type="submit"], .button{line-height: 36px; font-size: 14px;}   
    .button-mid { line-height: 33px; font-size: 14px;  }
    .faqs-item{margin-bottom: 15px;}
    .faqs-item h3 { font-size: 15px; }
    .faqs-item h3::before, .faqs-item h3::after { width: 28px; height: 28px; }
    .faqs-item h3::after{background-size: 8px;}
    .site-footer { padding: 30px 0 0; }
    .testimonial-item { padding: 20px 30px; }
}
@media only screen and (max-width:550px) {
    .button-mid { line-height: 33px; font-size: 13px;  padding: 0 10px;}
    .custom-logo{height: 34px;}
    .header-cta-menu-wrapper{right: 42px;}
    .section.hero .right-side { max-width: 250px;}
    .section.hero .right-side::before{width: 100px; height: 114px;}
    .section.hero .right-side::after{width: 105px; height: 130px;}
}