:root {
  --primary-red: #772217;
  --primary-black: #151515;
  --light-grey: #EEEEEE;
--font-1: "Inter", sans-serif;
  --font-2: "Raleway", sans-serif;
  --item-text-shadow: 0px 0px 0px transparent;
  --item-text-outline:1px 0px transparent, -1px 0px transparent, 0px 1px transparent, 0px -1px transparent;
  --fs-1:14px;
  --fs-2:16px;
  --fs-3:18px;
  --fs-4:30px;
  --fs-5:35px;
}


*{margin: 0;padding: 0;    box-sizing: border-box;}
html {scroll-behavior: smooth;}
body{font-family: var(--font-1);   font-size:var(--fs-3);  color:var(--primary-black);    font-weight:400;  letter-spacing:.03em;     }
button,  .btn {font-family: var(--font-1); }
h1,h2,h3,h4,h5,h6 {font-family: var(--font-2);}
ul,li {margin: 0; padding: 0;list-style: none;}
a {font-family: var(--font-1); font-weight: 600; color:var(--primary-black);  text-decoration:none;box-shadow:inherit!important; outline: 0!important;}
a:hover{text-decoration: none;color:var(--primary-red);}
button {text-decoration:none;box-shadow:inherit!important; outline: 0!important;}
input {text-decoration:none;box-shadow:inherit!important; outline: 0!important;}

@media (max-width:1100px) {.container {max-width:100%;padding: 0 20px;}}
@media (min-width:1101px) {.container {max-width:95%;}} 
@media (min-width:1400px) {.container {max-width:90%;}} 

.headerTop {background-color: var(--light-grey); padding:6px 0;    }
.headerTop .phoneIcon{display:flex;align-items:center;font-size: 12px;gap:6px}
.headerTop  .phoneIcon img {width:18px;}
.headerTop .headerLogin{display:flex;justify-content:flex-end;gap:20px}
.headerTop .headerLogin li a {font-size: 14px; text-transform:uppercase; font-weight: 600;}
.headerTop .headerLogin li:first-child a {text-decoration: underline;}
header {position: static;  transition:transform 1s ease,background-color .5s ease,box-shadow .5s ease; }
header.homeHeader{position:absolute;top:0;width:100%;z-index:1;transition:transform 1s ease,background-color .5s ease,box-shadow .5s ease}

 header.homeHeader .headerTop {
  background-color:#f2f2f2;
}


header.navFixed .headerTop {display: none;}
header.navFixed{position:fixed !important;left:0;top:0;width:100%;background:#fff;z-index:99;transform:translateY(0);animation:headerSlideDown .5s ease forwards}

@keyframes headerSlideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}



.subMenuRightSide img{width:100%;height:100%}
footer{margin-top:80px}
.footerTop{background:var(--light-grey);text-align:center;padding:30px 10px}
.footerTop h3{font-size:30px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 15px}
.footerTop ul{display:flex;justify-content:center;gap:18px}
.footerTop ul li a{background-color:var(--primary-black);width:40px;height:40px;display:flex;border-radius:50%;color:#fff;justify-content:center;align-items:center}
.ftLink a{font-weight:400}
.btn-secondary:active,.show>.btn-secondary.dropdown-toggle, .btn-secondary:focus{color:#8e000c!important;}


.text-right{text-align:right}
.headerShowCase{color:#fff;background:#8e000c;padding:7px 10px;font-size:14px;text-transform:uppercase;letter-spacing:1px;text-align:center;font-weight:600}

  .accoutDropdown button,  .purchaseDropdown button {
  background: inherit!important;
  border: none!important;
  color: #000;
  padding: 0;
}

  .accoutDropdown button.btn-secondary:hover, .purchaseDropdown button.btn-secondary:hover {
  color: #8e000c;
  background-color: inherit!important;
  border-color: inherit!important;
}

.headerTop .headerLogin .dropdown-menu{padding:0 0;border-radius:0;width:260px;min-width:inherit;right:0!important;left:auto!important;transform:inherit!important;top:30px!important}
.headerTop .headerLogin .purchaseDropdown .dropdown-menu{width:240px;}
.headerTop .headerLogin  ul li {padding:0 0;}
.headerTop .headerLogin ul li a{display:block;width:100%;text-decoration:none!important;padding:11px 10px 0;font-weight:400;font-size:14px;text-align:right}

  .headerTop .headerLogin ul li:last-child a{
  padding: 8px 10px;
}

.headerTop .headerLogin li .showCaseText{padding:10px;border-bottom:solid 1px #eee;font-size:14px;font-weight:400;text-transform:uppercase;color:var(--primary-black)}
.showCaseText .checkRadio{position:relative;margin-bottom:0}
.showCaseText .checkRadio input[type=checkbox]
.showCaseText .checkRadio input[type=checkbox].switch{height:20px!important;outline:0;display:inline-block;vertical-align:top;position:relative;margin:0;background:#c9c9c9;transition:background .3s;cursor:pointer;outline:0;-webkit-appearance:none;-moz-appearance:none;width:34px;border-radius:10px}
.showCaseText .checkRadio input:checked[type=checkbox].switch{background:#8e000c}
.showCaseText .checkRadio input[type=checkbox].switch::after{left:2px;top:50%;border-radius:50%;width:14px;height:14px;background:#fdfdfd;content:'';position:absolute;transform:translateY(-50%);transition:.3s ease all}
.showCaseText .checkRadio input:checked[type=checkbox].switch::after{background:#fdfdfd;right:2px;left:inherit;top:50%;border-radius:50%;width:14px;height:14px;content:'';position:absolute;transform:translateY(-50%);transition:.3s ease all}

.headerTop .headerLogin li .showCaseText .form-check{display:flex;justify-content:space-between;padding:0;font-size:14px;font-weight:400;width:100%;align-items: center;}
 .headerTop .headerLogin li .showCaseText  .form-check-input:checked {
  background-color: #8e000c;
  border-color: #8e000c;
  height: 19px;
  width: 38px !important;
}


.scrollLogo {display:none;}
 .headerTop .headerLogin .dropdown-menu li a{
  color:#000!important;
}

.showCaseMethod {
  display: flex;
}

.showCaseMethod label {

 
 
  
}

  .showCaseMethod input{
  display: none;
}
.showCaseMethod label span{ cursor: pointer;display: block; text-align: center; width: 160px; padding: 3px 15px;background: #fff;}

.showCaseMethod label input:checked + span {
background: #8e000c;
  color: #fff;
}

.showCaseMethod label span:hover {background: #8e000c;
  color: #fff;}
.searchBox input[type="text"] {border: none;  border-bottom-width: medium;  border-bottom-style: none;  border-bottom-color: currentcolor;background: none;
  outline: none;padding: 5px; width: 100%; font-size: 15px;}  

 .searchMenu .search-btn {position: absolute;font-size: 16px; right: -20px;  padding: 0px 0px; top:4px;  color: #000; background: none; border:none; }
 .homeHeader .searchBox input[type="text"]{border-bottom:1px solid #fff; color: #fff;}
 .homeHeader .search-btn{color: #fff;}
 .homeHeader .searchBox input::placeholder { color: #fff; opacity:1;}
@media only screen and (min-width:1101px)
{
.submenuLink ul li a {padding: 0 20px;}
header.navFixed .nav-top, 
header.navFixed .headerShowCase { 
  display: none;
}

   header.navFixed   nav {
    border-bottom: solid 1px #ece9e9;
  }

}
@media only screen and (min-width:767px){
   .homeHeader .headerTop .headerLogin li a { color: #fff;}
     .searchBox input[type="text"]{border-bottom: 1px solid #000;}
     .homeHeader .searchBox input[type="text"]{border-bottom: 1px solid #fff;}
   }


@media only screen and (min-width:993px)
{
    .text-md-right {text-align: right;}

 header.navFixed .scrollLogo {display:block;}
  .scrollLogo  img {
  width: 90px;
}

}
@media only screen and (min-width:768px)
{

nav {padding:10px 0;        position: relative;}
.logo img {width: 115px;}
.navication {display: flex; justify-content: space-between;flex-wrap: wrap;}

.nav-top  {
  width: 100%;margin:0px 0 18px;
  text-align: center;
}

header.homeHeader {
background: rgba(0,0,0,0.4);
}

.homeHeader   .mainNav li a.mainLink, .homeHeader .headerTop .phoneIcon { 
    color: #fff;
  }

.homeHeader .mainNav li.ddYes a.mainLink::after, .homeHeader .headerTop .phoneIcon img {filter: invert(1);}
.homeHeader .accoutDropdown button, .homeHeader .purchaseDropdown button {
  color: #fff;
  padding: 0;
}

.mainNav {display: flex; align-items: center; gap:25px;width: 100%;    justify-content: center;}
.mainNav li a.mainLink{position:relative;font-size:15px;text-transform:uppercase;text-shadow:var(--item-text-outline),var(--item-text-shadow);display:flex;align-items:center}
.mainNav li.ddYes a.mainLink:after{content:'';background:url(../images/home/down.svg);width:20px;height:20px;display:block;background-repeat:no-repeat;background-size:cover}
 .subMenu{position:absolute;z-index:99;left:0;width:100%;opacity:0;visibility:hidden;transform:translateY(15px);transition:all .3s ease;top:111px}
.mainNav li.ddYes:hover .subMenu{opacity:1;visibility:visible;transform:translateY(0)}
header.navFixed .subMenu {
    top: 44px;
    border-bottom: solid 1px #e5e5e5;
  }


 .subMenuBox{display:flex;flex-wrap:wrap;background:#fffefe;border-bottom:solid 1px #f2f2f2;padding:23px 30px;margin:14px 0 0}
.subMenuLeftSide {width:40%;}
.subMenuRightSide {width:60%;}
.subMenuRightSide ul{display:flex;flex-wrap:wrap;gap:2%}
.subMenuRightSide ul li{width:32%}
.subMenuRightSide ul li a{display:block;position:relative}
.subMenuRightSide ul li span{font-size:15px;position:absolute;bottom:18px;text-align:left;width:100%;left:0;color:#fff;padding-left:13px;text-transform:uppercase;text-decoration:underline}
.subMenuLeftSide h3{text-transform:uppercase;font-size:30px;margin:0 0 12px;letter-spacing:.3em;line-height:1.3em;font-weight:600}
.subMenuLeftSide p{font-size:16px;letter-spacing:0;line-height:1.6}
.subMenuLeftSide .submenuContent a{font-size:13px;font-weight:500;text-decoration:underline;letter-spacing:.13em}
.submenuLink ul{display:flex;flex-wrap:wrap}
.submenuLink ul li{width:50%;margin:0 0 7px}

 .menu_4 .submenuLink ul li{width:100%;margin:0 0 7px}
 .menu_4 .subMenuRightSide ul li:first-child span {color:#000;}
.submenuLink ul li a{font-size:15px;display: block;padding:0 0}
}

@media only screen and (max-width:1200px) 
{
.subMenuRightSide ul li span{padding-left:8px;}
.submenuLink ul li a {font-size: 13px;   }
.subMenuLeftSide {width: 45%; }
.subMenuRightSide {width:55%;}
.submenuContent{padding-right:30px}
.subMenuRightSide ul li span{font-size:12px}
}



@media only screen and (min-width: 768px)  and (max-width:1000px) 
{
.mainNav{gap:16px}.mainNav li a.mainLink{position:relative;font-size:11px}
.mainNav li.ddYes a.mainLink::after{content:'';width:17px;height:17px}
.subMenuLeftSide {width:35%; }
.subMenuRightSide {width:65%;}
.subMenuRightSide ul li {width: 100%; margin-bottom: 15px;}
.subMenuRightSide ul li img{width:100%;height:150px;object-fit:cover;object-position:center}
.submenuLink ul li{width:100%;margin:13px 0 0}
.showCaseMethod label span {
  width: 120px;
  padding: 3px 15px;
  background: #fff;
  font-size: 14px;
}

.headerTop .headerLogin {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}

}


body.scrollNone {
  overflow: hidden;
}
 
#btnClose:hover {
transform: rotate(90deg);
}
@media only screen and (max-width:1024px) {
    .homeHeader .searchBox input[type="text"]{width: 130px;}
}
@media only screen and (max-width:767px) 
{
.logo img {width: 110px;}
.mobile-header ul{display:flex;align-items:center;justify-content:space-between}
.mobile-header #toggleMenu img{width:31px}
.nav-top {display: none;}
#toggleMenu{border:none;background:inherit}
nav{margin:0;padding:0;width:100%;height: 100vh;position:fixed;left:-100%;top:0;bottom:0;right:0;background-color:#fff;overflow:hidden;visibility:hidden;opacity:0;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out;z-index:11}
nav.showMainNav{visibility:visible;opacity:1;left: 0;z-index:99999}
.subMenu{display:none}
 #btnClose{float:right;margin:20px 0 40px;display:inline-block;background:inherit;border:none;box-shadow:inherit!important;transition: all 0.2s ease, visibility 0s;transform: rotate(0deg);}
.mainNav{width:100%;display:inline-block}
 .mainNav li a.mainLink{display:flex;justify-content:end;align-items:center;font-weight:400;font-size: 18px;text-transform: uppercase;margin:0 0 22px}
 .navication{padding: 0 10px;}


.mainNav li.ddYes a.mainLink::after{content:'';background:url(../images/home/down.svg);background-repeat:repeat;background-size:auto;width:20px;height:20px;display:block;background-repeat:no-repeat;background-size:cover}
.subMenu.showDropDown {display: block;}
.subMenuLeftSide .submenuContent{display: none;}
.subMenuRightSide {display: none;}
.subMenuRightSide.builderMenu {display: block;}
.subMenuRightSide img {display: none;}
.subMenuRightSide, .subMenuLeftSide{width:100%}
.subMenuRightSide ul li span{font-size:15px; font-weight: 400;}
.subMenuLeftSide ul li a {    font-size: 13px;    font-weight: 400;    padding: 8px 13px 5px;    display: inline-block;    width: 100%;  }
.subMenuRightSide ul li {margin: 0; }
/* .subMenuRightSide ul li {margin: 0; background: #f5f5f5;    border-bottom: solid 1px #e1e1e1;} */
 .headerTop .headerLogin{gap:8px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.homeHeader .searchBox input::placeholder, .homeHeader .searchBox input[type="text"]{color: #000;}
.homeHeader .searchBox input[type="text"]{width: 100%;}
.homeHeader .search-btn{background: none; border:none; color: #000; position: absolute; right:5px; top:50%; transform: translateY(-50%);}
.searches {margin-top: 7px;}
.searches i{font-size: 14px;}
.headerTop .headerLogin li a{font-size:12px;display: flex;}
.footerTop h3 {font-size: 22px;}
 .mobile-header  {
  padding: 10px 0;border-bottom: solid 1px #f2f2f2;
}
header.homeHeader {
  position: static; 
}
.showCaseMethod {
  justify-content: center;
  width: 100%;
}
.footerBottom  {text-align: center;}
 .subMenu.showDropDown .subMenuRightSide {
    display: block;
    
  }
 
 .subMenuRightSide ul li span {
    padding: 8px 13px 5px;
    display: inline-block;font-size: 13px;
    width: 100%;text-transform: uppercase;
  }

.subMenu.showDropDown .subMenuBox  {
  overflow: auto;
  max-height: 250px;
  margin: 0 0 10px;
}

 .subMenuLeftSide .submenuLink ul {
    margin: 0 0 0px;
  }


  /* .subMenuLeftSide .submenuLink ul li  {
  background: #f5f5f5;
  border-bottom: solid 1px #e1e1e1;
} */
.accoutDropdown button, .purchaseDropdown button{font-size: 13px;}

}



@media only screen and (max-width:600px) 
{
.hrts  {
  font-size: 16px;
  position: relative;
  top:0px;
}

}