/*
Theme Name: J. F. Joinery Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Template: twentytwentyone
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Tags: one-column,accessibility-ready,custom-colors,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,blog,portfolio
Version: 2.4.1742201044
Updated: 2025-03-17 08:44:04

*/


/*==Common==*/

.site-main > * {
    margin-top: 0;
    margin-bottom: 0;
}
* {
        font-family: "arial";
}
body {
    font-family: "arial";
}
body.custom-background {
        font-family: "arial";
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    text-align: left;
}
a,
li,
div,
span,
ul {
        font-family: "arial";
}
.site-header,
.site-main,
.widget-area,
.site-footer {
    padding: 0 !important;
}
.wpb_single_image .vc_figure,
.wpb_single_image .vc_single_image-wrapper {
    width: 100%;
}
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    background: transparent;
}
.primary-navigation .current-menu-item > a:first-child:hover,
.primary-navigation .current_page_item > a:first-child:hover,
.primary-navigation .current-menu-item > a:first-child,
.primary-navigation .current_page_item > a:first-child {
    text-decoration: none;
}
img {
    max-width: 100% !important;
    margin: 0;
    padding: 0;
    display: block;
    box-shadow: none;
    border-radius: 0;
}
a {
    font-family: "arial";
    color: #26472C;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}
a:hover,
a:focus,
a:active {
    color: #d1775c;
     text-decoration: none !important;
}
.nopadd {
    padding: 0;
}
.padd_tb {
    padding: 90px 0;
}
.padd_tb_small {
    padding: 40px 0;
}
.padd_t {
    padding-top: 90px;
}
.padd_b {
    padding-bottom: 90px;
}
.padd_l {
    padding-left: 90px !important;
}
.padd_r {
    padding-right: 90px !important;
}
.nopadd_left {
    padding-left: 0 !important;
}
.nopadd_right {
    padding-right: 0 !important;
}
.nopadd_top {
    padding-top: 0;
}
.nopadd_bottom {
    padding-bottom: 0;
}
.container {
    max-width: 1230px !important;
}
.fluid_padd {
    padding: 0 7%;
}
.space_area {
}
.bg-shape {
    background-position: 127% center;
    background-repeat: no-repeat;

}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ol {
    padding-left: 17px;
}
li {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    color: #000;
    margin-bottom: 10px;
        font-family: "arial";
}
h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    color: #456665;
        font-family: "arial";
    font-weight: 400 !important;
    margin-bottom: 20px;
}
h1,
.h1 {
    font-size: 64px;
    color: #456665;
    line-height: 1.3;
}
h2,
.h2 {
    font-size: 50px;
    font-weight: 400;
    line-height: 55px;
    color: #456665;
}
h3,
.h3 {
    color: #00833e;
    font-size: 48px;
    font-weight: 400;
    line-height: 52px;
}
h4,
.h4 {
    color: #00833e;
    font-size: 36px;
    font-weight: 400;
    line-height: 42px;
}
h5,
.h5 {
    color: #00833e;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}


.secpanel {
    display: block;
    overflow: hidden;
    width: 100%;
    position: relative;
}
.secpanel p,
p {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    color: #343434;
    margin-bottom: 13px;
    font-family: Arial;
}
.entry-content p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 26px;
    color: #343434;
}
.secpanel p:last-child,
p:last-child,
.entry-content p:last-child {
    margin-bottom: 0;
}
.sub_content {
    margin: 10px auto 50px;
    width: 52%;
}
.sub_content p {
    display: block;
    text-align: center;
    font-size: 18px;
    line-height: 28px;
    color: #000;
}
.sticky {
    background: #fff;
    position: fixed;
    top: 0;
    z-index: 9;
    left: 0;
    right: 0;
    box-shadow: 1px 1px 18px rgba(0, 0, 0, 0.12);
}
.white-text p,
.white-text li,
.white-text h1,
.white-text h2,
.white-text h3,
.white-text h4,
.white-text h5,
.white-text h6 {
    color: #eee;
}
.white-text a {
    color: #F9B248;
}
.white-text a:hover {
    color: #fff;
}
.center-text p,
.center-text li,
.center-text h1,
.center-text h2,
.center-text h3,
.center-text h4,
.center-text h5,
.center-text h6 {
    text-align: center;
}
.content-wrap ul {
    list-style: disc;
    padding-left: 16px;
}
.content-wrap ul.slick-dots {
    padding-left: 0;
    left: 0;
}
.bg-white {
    background: #fff;
}
.bg-grey {
    background: #EEEEEE;
}
.bg-green {
    background: #26472C;
}

.row {
    margin: 0;
}
.widget a:link, .widget a:visited, .widget a:active {
     color: #F9B248;
}
button.sub-menu-toggle {
    display: none !important;
}
.hd-title{
    margin-bottom: 20px !important;
}
/**-------------------------*/
.overlay-bg{
    position: relative;
}
.overlay-bg:before {
    background: rgba(0, 0, 0, 0.5);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block !important;
}
/*----------------------*/
.caw-button-wrapper{margin-top: 30px;}
.caw-btn,.hm-pro-box .caw-infobanner-content-section a,
.blog-btn a, .vc_pageable-load-more-btn a, input.wpcf7-submit {
   background-image: url(images/btn-brd-y.png) !important;
    background-color: transparent !important;
    padding: 0 70px 15px 0 !important;
    background-repeat: no-repeat !important;
    background-position: bottom right !important;
    min-width: 250px;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 18px !important;
        border: 0 !important;
    color: #26472C !important;
}
.caw-btn:hover, .caw-btn:focus, .caw-btn:active{
    background-image: url(images/btn-brd-y.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom right !important;
        color: #F9B248 !important;
}
.hm-pro-box .caw-infobanner-content-section a:hover,.blog-btn a:hover,
.vc_pageable-load-more-btn a:hover, input.wpcf7-submit:hover,
.hm-pro-box .caw-infobanner-content-section a:focus,.blog-btn a:focus,
.vc_pageable-load-more-btn a:focus, input.wpcf7-submit:focus,
.hm-pro-box .caw-infobanner-content-section a:active,.blog-btn a:active,
.vc_pageable-load-more-btn a:active, input.wpcf7-submit:active,
.btn-white .caw-btn:hover, .btn-white .caw-btn:focus, .btn-white .caw-btn:active{
    background-image: url(images/btn-brd-w.png) !important;
     background-repeat: no-repeat !important;
    background-position: bottom right !important;
        color: #F9B248 !important;
}

.caw-button-wrapper .hvr-underline-from-left:before {
   display: none !important;
}
.bg-shape .caw-button-wrapper {
    margin-top: 0;
}
.btn-white .caw-btn{
     color: #fff !important;
}

.long-img img {
    height: 654px !important;
    object-fit: cover;
}

/*----------------------------*/
.heading {
}

.heading h2 {
    font-size: 42px;
    color: #456665;
    line-height: 56px;
    text-align: center;
}

/*====================
  * Top header
  * =======================*/

.top-hd-left {}

.top-hd-left ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 70px;
    padding: 0;
    margin: 0;
}

.top-hd-left ul li {
    margin: 0;
    padding: 22px 0;
}

.top-hd-left ul li a {
    color: #F9B248;
    text-decoration: none;
    font-weight: 700;
}
.top-hd-left ul li a:hover{
     color: #ffffff;
}
/*-----------------------*/
.top-hd-right {
}
.top-hd-right ul {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 70px;
    padding: 0;
    margin: 0;
}

.top-hd-right ul li {
    margin: 0;
    padding: 22px 0;
}

.top-hd-right ul li a {
    color: #F9B248;
    text-decoration: none;
    font-weight: 700;
}
.top-hd-right ul li a:hover{
     color: #ffffff;
}


/*==================
 * Header
 * =================*/
.hrd-wrap {
    /*position: fixed;*/
    z-index: 999;
    width: 100%;
    /* top: 0; */
}
.main-header {
    padding: 25px 0;
    transition: 0.3s all ease-in-out;
}
.hdr-site-logo {
    width: 100%;
    max-width: 245px;
}
.hdr-site-logo a {
    display: block;
    width: 90%;
    max-width: 330px;
}
.headersticky {
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    padding: 0;
    box-shadow: 0 3px 11px -2px rgb(0 0 0 / 10%);
    /* opacity: 0; */
    z-index: 99999999;
    transition: 0.3s all ease-in-out;
}
.headersticky .main-header {
    padding: 15px 0;
}
/*---------------------*/
.mainmenu {
}

.mainmenu {
}

.mainmenu .primary-menu-container {
}

.mainmenu .primary-menu-container > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
}

.mainmenu .primary-menu-container ul li {
    position: relative;
    margin: 0;
}
.mainmenu .primary-menu-container ul li a {
    color: #000;
    padding: 10px 18px !important;
    display: inline-block;
    font-size: 18px;
    width: 100%;
}
.mainmenu .primary-menu-container ul li:last-child a{
    padding-right: 0 !important;
}
.mainmenu .primary-menu-container ul li a:hover,
.mainmenu .primary-menu-container ul li a:focus,
.mainmenu .primary-menu-container ul li a:active{
    color: #F9B248 !important;
    outline: none;
    text-decoration: none !important;
}
.primary-navigation > div > .menu-wrapper > li > .sub-menu:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu:after{
    display: none;
}


.mainmenu .primary-menu-container .sub-menu {
    margin: 0;
    position: absolute;
    top: 90%;
    z-index: 88888;
    border: 0;
    padding: 25px 0 10px 0 !important;
    width: 230px;
    min-width: inherit !important;
    left: -20px !important;
    background: #fff;
    list-style: none;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
.mainmenu .primary-menu-container  .sub-menu  li a {
    padding: 12px 34px !important;
}
.mainmenu .primary-menu-container ul li:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    top: 100%;
}

  .hamburger-menu-container {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: flex-end;
}

.hamburger-menu {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hamburger-menu div {
  width: 1.6rem;
  height: 3px;
  border-radius: 3px;
  background-color: #343434;
  position: relative;
  z-index: 1001;
  transition: .5s;
}

.hamburger-menu div:before,
.hamburger-menu div:after {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  background-color:#343434;
  border-radius: 3px;
  transition: .5s;
}

.hamburger-menu div:before {
  transform: translateY(-7px);
}

.hamburger-menu div:after {
  transform: translateY(7px);
}

#check {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  z-index: 90000;
  cursor: pointer;
  opacity: 0;
  display: none;
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div {
  background-color: transparent;
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div:before {
  transform: translateY(0) rotate(-45deg);
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div:after {
  transform: translateY(0) rotate(45deg);
}
.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button),
.site a:focus{
    outline: 0 !important;
    text-decoration: none !important;

}

/*----------------------*/
.hd-with-style {
}
.hd-with-style:before,
.hd-with-style:after {
    content: "";
    width: 112px;
    height: 23px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100%;
}
.hd-with-style:before {
    background-image: url(images/Vector-10-left.png);
    margin-right: 20px;
}
.hd-with-style:after {
    background-image: url(images/Vector-10-right.png);
    margin-left: 20px;
}
/*==================
 * Banner
 * =================*/

.banner-video {
    padding: 0 !important;
}
.banner-video .video-player-for-wpbakery-container {
    position: relative;
}

.banner-video .video-player-for-wpbakery-container:before {
    background: rgba(0, 0, 0, 0.5);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.banner-video-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-absolute {
    padding-top: 14%;
    padding-bottom: 14%;
}

.banner-absolute .bnr-contentbox>.vc_column-inner {
    padding: 120px 140px;
}

.bnr-contentbox .vc_column-inner p {
    color: #fff;
    width: 86%;
}

.bnr-contentbox h1 {
    margin-bottom: 40px;
}
/*===========================
 * inner banner
 * ================================*/
.inr-top-bnr {
    background-position: center;
    background-size: cover;
    position: relative;
}
.inr-top-bnr:before {
    background: rgba(0, 0, 0, 0.4);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: block !important;
}
.inr-top-bnr .inr-bnr-content {
    /* padding-top: 15%; */
    /* padding-bottom: 15%; */
    min-height: 500px;
    display: flex
;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
/*====================
  * Footer
  * =======================*/
.main-footer {
    background: #26472C;
    padding: 80px 0 40px;
}

.footer-left {
}

.footer-left .ftr-logo {
    width: 80%;
    max-width: 270px;
    height: 40px;
    margin-bottom: 25px;
}

.footer-left .ftr-logo img {
    width: 85px !important;
}
.ftr-cont-area {}

.ftr-cont-area h4.widget-title {
    color: #eee;
    font-weight: bold !important;
    margin: 0 !important;
    font-size: 18px;
    line-height: 22px;
}

.ftr-cont-area .textwidget.custom-html-widget {
    margin: 6px 0 0 0;
    color: #eee;
}

.ftr-cont-area .textwidget.custom-html-widget p {
    color: #fff;
    font-weight: 300 !important;
    line-height: 24px;
}
.footer-right {
    gap: 80px;
}


.foot-col {
}

.foot-col ul {
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 80%;
}

.foot-col ul li {color: #ffffff;line-height: 21px;width: 50%;}

.foot-col ul li a {
    color: #eee !important;
    font-size: 18px;
    text-decoration: none;
}
.foot-col ul li a:hover{
    color: #F9B248;
}
.copyright {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

.fterms-menu {}

.fterms-menu ul.menu {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.fterms-menu ul.menu li {
    margin: 0;
}

.fterms-menu ul.menu li a {
    font-size: 14px;
    line-height: 100%;
    color: #f7f7f7;
    text-decoration: underline !important;
}
.fterms-menu ul.menu li a:hover, .fterms-menu ul.menu li a:focus, .fterms-menu ul.menu li a:active {
    color: #F9B248;
    outline: none;
}
.footer-btm {
    margin-top: 30px;
}
/*====================
  * hm sec-1
  * =======================*/

.hm-tim-wrap p {
    width: 87%;
}


/*====================
  * Footer
  * =======================*/
.trans-bg-wrap {
    float: none !important;
    margin: 0 auto;
        width: 67% !important;
}
.trans-bg-wrap .vc_column-inner {
    padding: 88px 110px !important;
}

/*====================
  * Hm testimnial
  * =======================*/

.testimo-wrap {
    width: 85%;
    margin: 0 auto;
}
.testimo-item {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    background: rgb(38 71 44 / 70%);
    border-radius: 10px;
    overflow: hidden;
}

.testimo_image {
    width: 36%;
}

.right-cont {
    width: 64%;
    text-align: center;
    padding: 20px 60px;
}

.testimo_image img {
    width: 100%;
    height: 244px;
    object-fit: cover;
    object-position: center;
}
.testimo-wrap ul.slick-dots {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 45px;
}

.testimo-wrap ul.slick-dots li {
    margin: 0 4px;
}

.testimo-wrap ul.slick-dots li button {
    background: rgb(52 52 52 / 52%) !important;
    padding: 0;
    width: 10px;
    height: 10px;
    text-indent: -1000px;
    overflow: hidden;
    border-radius: 50%;
}

.testimo-wrap ul.slick-dots li.slick-active button {
    background: #343434 !important;
}

.testimo_content {
    width: 93%;
    color: #eee;
    margin-bottom: 12px;
}

.testmo-subtext {}

.testmo-subtext h4 {
    font-size: 20px;
    line-height: 25px;
    font-weight: 700 !important;
    color: #eee;
}



/*====================
  * Footer
  * =======================*/
.hm-high-wrap h3.caw-info-box-title {
    font-weight: 600 !important;
}




/*====================
  * hm- product
  * =======================*/
.hm-pro-list{
    margin-top: 30px;
}
.hm-pro-box{}
.hm-pro-box .caw-infobanner-img-section {}

.hm-pro-box .caw-infobanner-img-section img {
    height: 511px !important;
    object-fit: cover;
    width: 100%;
}

.hm-pro-box .caw-infobanner-content-section {
    text-align: left !important;
    padding-top: 40px;
}
.hm-pro-box .caw-infobanner-content-section .caw-infobanner-content{
    margin-bottom: 30px;
}
.hm-pro-box .caw-infobanner-content-section .caw-infobanner-content h3{
    margin: 0 0 0 0 !important;
    margin-bottom: 8px !important;
    font-size: 18px;
    font-weight: 600 !important;
    color: #343434;
}
.hm-pro-box .caw-infobanner-content-section .caw-infobanner-content p{
    margin: 0;
}
.hm-pro-box .caw-infobanner-content-section a{
    margin: 0 !important;
}



/*====================
  * hm blog
  * =======================*/
.blog-date {
    text-align: right;
}

.blog-date div {
    background: #fff;
    display: inline-block;
    padding: 10px 23px;
}
.blog-contentbox {
    padding: 30px 20px  20px;
}
.blog-btn{
    /*margin-top: 30px;*/
}
.blog-btn a {
    min-width: auto;
}
.blog-title div {
    font-weight: 600;
    color: #343434;
}
.blog-des p{
    color: #343434;
}
.blog-imgbox {
    height: 221px;
}
/*====================
  * Footer
  * =======================*/
.ftr-cont-secwrap{}
.ftr-cont-secwrap .white-text a{
    color: #fff;
}
.ftr-cont-secwrap .caw-btn{
    color: #fff !important;
}




/*====================
  * Working section
  * =======================*/

.work-box-wrap p {
    width: 97%;
}




/*====================
  * Footer
  * =======================*/
.wpb_image_grid .wpb_image_grid_ul .isotope-item {
    margin: 0 20px 20px 0 !important;
}



/*====================
  * Footer
  * =======================*/

.blog-contentbox.main-blog-cont {
    padding: 25px 0 0 0 !important;
}
/*====================
  * Footer
  * =======================*/

.pro-inr-box .caw-infobanner-img-section {}

.pro-inr-box .caw-infobanner-img-section img {
      height: 360px !important;
    object-fit: cover;
    width: 100%;
}

.pro-inr-box .caw-infobanner-content-section {
    text-align: left !important;
    padding-top: 40px;
}
.pro-inr-box.caw-infobanner-content-section .caw-infobanner-content{
    margin-bottom: 30px;
}
.pro-inr-box .caw-infobanner-content-section .caw-infobanner-content h3{
    margin: 0 0 0 0 !important;
    margin-bottom: 8px !important;
    font-size: 18px;
    font-weight: 600 !important;
    color: #343434;
}
.pro-inr-box .caw-infobanner-content-section .caw-infobanner-content p{
    margin: 0;
}
.pro-inr-box .caw-infobanner-content-section a {
    margin: 10px 0 0 0 !important;
    min-width: initial;
}

/*====================
  * Footer
  * =======================*/

.count-box .caw-countup-wrapper {}

.count-box .caw-countup-box {
    display: inline-block;
    border: 5px solid #eee;
    border-radius: 15px;
    padding: 12px 16px 9px;
    max-width: 108px;
}

.count-box .caw-countup-box span.caw-time-counter {
    display: inline-block;
    line-height: 55px;
    font-weight: 700;
}

.colour_items_wrap { display: none; }
.colour_items_wrap.active { display: block; }
/*===========*/
.s-blog-content h3 {
    margin: 30px 0 20px;
    font-size: 36px;
    line-height: 40px;
}

.s-blog-content h4 {
    font-size: 18px;
    line-height: 25px;
    font-weight: 700 !important;!i;!;
    margin: 30px 0 20px !important;!i;!;
}

.s-blog-content img {
    margin: 30px 0;
}

.s-blog-content ul {
    padding: 0;
    margin:0 0 46px 9px !important;
}

.s-blog-content ul li {
    list-style: disc;
}

.s-blog-content h4 {}
.bg-blend{
    background-blend-mode: overlay;
}
.wpb_gmaps_widget .wpb_wrapper {
    background-color: #f7f7f7 !important;
    padding: 0 !important;
}
.txt-inp, textarea.txt-area {
    border: 2px solid #EBEBEB !important;
    width: 100% !important;
    padding: 10px 20px !important;
}
.contact-wrap label {
    width: 100%;
}
textarea.txt-area {
    height: 220px;
    resize:none;
}




/*====================
  * Footer
  * =======================*/

.colours_tab_main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.colours_tab {
    border: 1px solid #000000;
    margin: 0 10px;
    padding: 10px 24px;
    font-weight: 600;
    cursor: pointer;
}

.colours_tab.active {
    background: #26472C;
    color: #fff;
    border: #26472C;
}


.colour_items_wrap {
    position: relative;
    margin-top: 40px;
}
.colour_box {padding: 0px 10px;}

.colour_image {}

.colour_image img {
    /* width: 100%; */
}

.colour_name {
    color: #343434;
    font-weight: 600;
    margin: 8px 0 0 0;
    font-size: 18px;
    line-height: 22px;
}
/*===========================*/
a.slick-arrow {
    background: #D9D9D9B2;
    width: 42px;
    height: 42px;
    display: inline-block;
    text-align: center;
    line-height: 42px;
    font-size: 21px;
    color: #26472C;
    border-radius: 50%;
    position: absolute;
    margin: auto !important;
    top: 0;
    bottom: 0;
    z-index: 1000;
}
.colour_items_wrap a.slick-arrow.next.slick-next,
.hardware_options a.slick-arrow.next.slick-next{
    right: -60px;
}

.colour_items_wrap a.slick-arrow.prev.slick-prev ,
.hardware_options a.slick-arrow.prev.slick-prev {
    left: -60px;
}

.product_image_wrap a.slick-arrow.next.slick-next {
    right: 10%;
}

.product_image_wrap a.slick-arrow.prev.slick-prev {
    left: 10%;
}
.product_image {
    padding: 0 15px;
}
/*------------------*/
.available_items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 17px;
}

.available_item {
        text-align: center;
    border: 1px solid #dddd;
    padding: 7px;
}

.available_item img {
    width: 41px;
    height: 41px;
    object-fit: cover;
    object-position: center;
    margin: auto;
}
.available_item_txt {
    font-size: 12px;
    text-align: center;
    line-height: 1;
    margin-top: 5px;
}

.available_title {
    font-size: 16px;
    color: #343434;
    text-align: center;
    margin: 30px 0 15px 0;
}

.hardware_item {
    text-align: center;
}

.hardware_name {
    font-family: Arial;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 40px;
}

.hardware_wrap {
    margin-top: 70px;
}

/*----------------------*/
.faq-box .vc_toggle_title {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 30px 35px;
    padding-left: 0;
}

i.vc_toggle_icon {
    color: #F9B248;
}

.faq-box {
    border-bottom: 1px solid #26472C;
}

.faq-box .vc_toggle_title h4 {
    margin: 0;
}








/*============= custom responsive ===============*/
@media screen and (max-width: 1920px) and (min-width: 1601px) {      }
@media screen and (max-width: 1536px) {      }
@media screen and (max-width: 1440px) {      }
@media screen and (max-width: 1398px) {      }
@media screen and (max-width: 1280px) {      }
@media screen and (max-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px !important;
    }


}
@media screen and (max-width: 1199px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 980px !important;
    }
.mainmenu .primary-menu-container ul li a {
    padding: 10px 14px !important;
    font-size: 16px;
}
    .bg-shape {
    background-position: 200% center;
}
  .padd_tb {
    padding: 70px 0;
}
.padd_t {
    padding-top: 70px;
}
.padd_b {
    padding-bottom: 70px;
}
.padd_l {
    padding-left: 40px !important;
}
.padd_r {
    padding-right:40px !important;
}
.long-img img {
    height: 554px !important;
}
.hm-pro-box .caw-infobanner-img-section img {
    height: 411px !important;
    }

}
@media screen and (max-width: 1080px) {      }
@media screen and (max-width: 1024px) {      }
@media screen and (max-width: 991px) {
    .container, .container-md, .container-sm {
        max-width: 720px !important;
    }
    .bnr-contentbox h1, .inr-hd-title {
    font-size: 40px !important;
        line-height: 1.2 !important;
        margin-bottom: 30px !important;
}
    .bnr-contentbox .vc_column-inner p {
    width: 100%;
}
    .bg-shape {
        background-position: 0 center;
        background-size: 120%;
    }
    .banner-absolute .bnr-contentbox>.vc_column-inner {
    padding: 60px 40px;
}
    .timer-wrap .padd_r {
    padding: 0 !important;
    margin-bottom: 40px;
}
    .hd-title {
    font-size: 36px !important;
    line-height: 1.2 !important;
}
    .yproject-wrap .padd_l {
    padding: 0 !important;
    margin-bottom: 40px !important;
}

.yproject-wrap .vc_row.vc_inner.vc_row-flex {
    flex-direction: column-reverse;
}
    .trans-bg-wrap {
    width: 96% !important;
}
    .caw-btn, .hm-pro-box .caw-infobanner-content-section a, .blog-btn a, .vc_pageable-load-more-btn a {
    padding: 0 37px 15px 0 !important;
    min-width: 161px;
    font-size: 16px !important;
}
        .bg-shape.padd_tb_small {
        background-position: left bottom !important;
            background-size: 139% !important;
    }
    .wwu-btn .caw-button-wrapper {
    text-align: left !important;
}
    .blog-contentbox {
    padding: 20px 15px 10px;
}
    .secpanel p, p {
    font-size: 15px;
    line-height: 22px;
}
    .testimo_content {
    font-size: 15px;
    line-height: 22px;
}
    .footer-left .ftr-logo {
    height: 121px;
}
    .footer-left .ftr-logo img {
    width: auto !important;
    height: 121px !important;
    display: block;
}
    .foot-col ul {
    width: 100%;
}
    .foot-col ul li a {
    font-size: 16px;
}
    .count-box .caw-countup-box span.caw-time-counter {
    font-size: 50px !important;
}
    .count-box .vc_custom_heading {
    font-size: 15px !important;
    text-align: center !important;
        line-height: 22px !important;
}
    .padd_l {
    padding-left: 20px !important;
}
.padd_r {
    padding-right: 20px !important;
}
    .hm-tim-wrap {
    /*margin-top: 30px;*/
}
    .tab-reverse {
        flex-direction: column-reverse;
    }
    .hm-tim-wrap p {
    width: 100%;
}
    .wpb_image_grid .wpb_image_grid_ul .isotope-item img {
    width: 210px;
    height: 210px;
}
    .inr-top-bnr .inr-bnr-content.inr-small-bnr {
    min-height: 350px;
}
    .blog-imgbox {
    height: 151px;
}
    .s-blog-content h3 {
    font-size: 30px;
    line-height: 35px;
}
    /*---------------------------*/
    .navbar-collapse {
        position: absolute;
        top: 100%;
        width: 100%;
        /* height: 100%; */
        background: #fff;
        z-index: 999;
        left: 0;
        right: 0;
        padding-bottom: 30px;
    }
button.navbar-toggler.m-btn-icon {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
nav.navbar.navbar-expand-lg.bg-white.navbar-light {
    position: unset;
}
.ms-auto.mainmenu {
    margin: auto !important;
    text-align: center;
}
.mainmenu .primary-menu-container > ul {
    display: flex
;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}
 .mainmenu .primary-menu-container ul li {
    position: relative;
    margin: 0;
    width: 100%;
}
    .mainmenu .primary-menu-container .sub-menu li a {
    padding: 12px 0 !important;
}
      .mainmenu .primary-menu-container ul li a {
        padding: 16px 14px !important;
    }

.mainmenu .primary-menu-container .sub-menu {
    position: relative;
    text-align: center;
    width: 100%;
    padding: 0 !important;
    background: #f1f1f1;
    left: 0 !important;
    opacity: 1;
    visibility: visible;
}
 .hamburger-menu-container {
    display: flex;
  }

  #check {
    display: block;
  }
.collapse:not(.show) {
   display: block !important;
}
.main-header {
    padding: 5px 0;
    transition: 0.3s all ease-in-out;
    position: relative;
}
    .navbar-collapse {
        transform: translateY(-2%);
        transition: .65s;
        opacity: 0;
    }
     #check:checked ~ .navbar-collapse {
    transform: translateY(0);
         opacity: 1;
  }
        .long-img img {
        height: 410px !important;
    }
    .faq-box .vc_toggle_title h4 {
    margin: 0;
    width: 90%;
    font-size: 18px !important;
    line-height: 1.3;
}
 .faq-box .vc_toggle_title {
    padding: 15px 0;
    padding-left: 0;
}
.colour_items_wrap a.slick-arrow.next.slick-next,
.hardware_options a.slick-arrow.next.slick-next{
    right: -35px;
}

.colour_items_wrap a.slick-arrow.prev.slick-prev ,
.hardware_options a.slick-arrow.prev.slick-prev {
    left: -35px;
}
        .footer-btm .d-flex {
            flex-direction: column;
        gap: 20px;
}
    .footer-btm {
    margin-top: 0;
}
    
}
@media screen and (max-width: 960px) {      }
@media screen and (max-width: 920px) {      }
@media screen and (max-width: 812px) {      }
@media screen and (max-width: 800px) {      }
@media screen and (max-width: 768px) {      }
@media screen and (max-width: 767px) {

.container, .container-md, .container-sm {
        width: 90% !important;
    }
    .top-hd-right {
    display: none;
}
    .top-hd-left ul {
    justify-content: space-between;
}
    li {
    font-size: 15px;
    }
    .top-hd-left ul li {
    padding: 12px 0;
}
    .bnr-contentbox h1, .inr-hd-title {
        margin-bottom: 30px;
        font-size: 30px !important;
        line-height: 1.3 !important;
    }
    .inr-hd-title {margin-bottom: 20px !important;}
    .banner-absolute .bnr-contentbox>.vc_column-inner {
        padding: 30px 25px;
    }
    .padd_tb {
    padding: 60px 0;
}

.padd_t {
    padding-top: 60px;
}
.padd_b {
    padding-bottom: 60px;
}
        .padd_l {
    padding-left: 0 !important;
}
.padd_r {
    padding-right: 0 !important;
}
    .hd-title {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }
    .sub-hd-title{
        font-size: 20px !important;
        line-height: 1.2 !important;
    }
    .hm-tim-wrap p {
    width: 100%;
}
    .banner-video video {
    height: 105vh;
    display: block;
    }
    h4, .h4 {
    font-size: 24px !important;
}
   .mobile-left .caw-button-wrapper {text-align: left !important;}
    .mobile-left .vc_column-inner {
    padding-top: 20px !important;
}
        .caw-btn, .hm-pro-box .caw-infobanner-content-section a, .blog-btn a, .vc_pageable-load-more-btn a {
        padding: 0 30px 10px 0 !important;
        min-width: 186px;
        font-size: 15px !important;
    }
    .trans-bg-wrap .vc_column-inner {
    padding: 58px 30px !important;
}


.hm-pro-list .vc_column_container.vc_col-sm-4 {
    margin-bottom: 20px;
}
        .hm-pro-list .vc_column_container.vc_col-sm-4:last-child {
    margin: 0;
}
    .testimo-wrap {
    width: 100%;
}
    .testimo_image {
    width: 100%;
}
    .right-cont {
    width: 100%;
    text-align: center;
    padding: 40px 20px 60px;
}
    p br {
    display: none;
}
    .testimo-item {
    border-radius: 0;
}
    .testmo-subtext h4 {
    font-size: 15px !important;
    color: #ffffff;
}
    .testimo-wrap ul.slick-dots {
    bottom: 25px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
    .testimo-wrap ul.slick-dots li button {
    background: #EEEEEE !important;
    width: 6px;
    height: 6px;
        opacity: 0.6;
}
    .testimo-wrap ul.slick-dots li.slick-active button {
    background: #ffffff !important;
        opacity: 1;
}
    .overlay-bg:before {
    background: rgb(0 0 0 / 64%);
    }
    .ftr-contact {
    margin: 20px 0 30px;
}
    .foot-col ul li {
    width: 100%;
}
    .ftr-cont-area h4.widget-title {
    font-size: 15px !important;
}
     .bg-shape.vc_inner {
        background: url(images/mobile-bgshap.png) !important;
        background-size: 69% !important;
        background-repeat: no-repeat !important;
        background-position: 120% top !important;
    }
    .bg-shape.padd_tb_small.vc_inner {
        background-size: 99% !important;
                background-position: 1920% top !important;
    }
    .main-footer {
    border-top: 7px solid #ffffff;
}
    .ftr-cont-area p br {
    display: block !important;
}
    .mobile-full-width .padd_r {
    padding: 0 !important;
    margin-bottom: 40px;
}
    .mobile-full-width .padd_l {
    padding: 0 !important;
    margin-bottom: 40px;
}

.mobile-reverse {
    flex-direction: column-reverse;
}
    .pro-inr-box .caw-infobanner-content-section {
    padding-top: 20px;
}
    .count-box {
    margin: 0 0 20px;
}

.count-box:last-child {
    margin: 0;
}
        .count-box .caw-countup-box span.caw-time-counter {
        font-size: 43px !important;
    }
    .wpb_image_grid .wpb_image_grid_ul .isotope-item {
            max-width: 46% !important;
    }
    .wpb_image_grid .wpb_image_grid_ul .isotope-item:nth-child(2n) {
        margin-right: 0 !important;
    }
    .wpb_image_grid .wpb_image_grid_ul .isotope-item img {
        width: 100%;
        height: 100%;
    }
    .inr-top-bnr .inr-bnr-content.inr-small-bnr {
    min-height: 300px;
}
    .main-blog-cont .vc_gitem-post-data {
    margin-bottom: 10px;
}
    .s-blog-content h3 {
        font-size: 24px;
        line-height: 35px;
        margin: 20px 0 10px;
    }
    .s-blog-content h4 {
    font-size: 18px !important;
    margin: 20px 0 10px !important;
}
    .s-blog-content img {
    margin: 10px 0;
}
    .long-img img {
    height: 300px !important;
    object-fit: cover;
}
    .caw-infobanner-wrapper .caw-infobanner-img-section img {
        height: 300px !important;
    }
    .blog-imgbox {
        height: 200px;
    }
   .inr-bnr-content br {
    display: none;
}
   .hm-pro-list {
    margin-top: 0;
}


.extra-pg-wrap .trans-bg-wrap .vc_icon_element.vc_icon_element-outer .vc_icon_element-inner.vc_icon_element-size-xl.vc_icon_element-have-style-inner {
    width: 5.15em !important;
    height: 5.15em !important;
}

.extra-pg-wrap .trans-bg-wrap .vc_icon_element.vc_icon_element-outer .vc_icon_element-inner.vc_icon_element-size-xl .vc_icon_element-icon {
    font-size: 3em !important;
}

.extra-pg-wrap .trans-bg-wrap .vc_icon_element.vc_icon_element-outer.vc_icon_element-align-center {
    text-align: center;
    margin-bottom: 20px !important;
}

.extra-pg-wrap .hd-title {
    font-size: 40px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
}

    .left-imgcontent-wrap .padd_r {
        padding-right: 0 !important;
        padding-bottom: 30px;
    }
 .left-imgcontent-wrap .hm-tim-wrap .vc_column-inner {
    padding: 0 15px !important;
}
    .right-imgcontent-wrap .padd_l {
        padding-top: 30px;
    }

.media-grid-box .vc_grid-item {
    width: 45%;
    padding: 0 !important;
}

.media-grid-box .vc_pageable-slide-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-around;
}

.colour_items_wrap a.slick-arrow.next.slick-next,
.hardware_options a.slick-arrow.next.slick-next{
    right: -22px;
}

.colour_items_wrap a.slick-arrow.prev.slick-prev ,
.hardware_options a.slick-arrow.prev.slick-prev {
    left: -22px;
}

.fterms-menu {
    width: 100%;
    margin-bottom: 20px;
}
    .fterms-menu ul.menu {
    display: block;
    }
.available_items {
    gap: 9px;
}












}
@media screen and (max-width: 736px) {      }
@media screen and (max-width: 667px) {      }
@media screen and (max-width: 640px) {      }
@media screen and (max-width: 575px) {  }
@media screen and (max-width: 568px) {      }
@media screen and (max-width: 533px) {      }
@media screen and (max-width: 480px) {      }
@media screen and (max-width: 414px) {      }
@media screen and (max-width: 375px) {      }
@media screen and (max-width: 360px) {   
.hdr-site-logo {
    width: 100%;
    max-width: 220px;
}
}
@media screen and (max-width: 320px) {      }