@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    scrollbar-width: thin;
    scrollbar-color: var(--placeholder) var(--gray-first);
  }
  
  /* Chrome, Edge and Safari */
  *::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }
  *::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: var(--gray-first);
  }
  
  *::-webkit-scrollbar-track:hover {
    background-color: var(--gray-first);
  }
  
  *::-webkit-scrollbar-track:active {
    background-color: var(--gray-first);
  }
  
  *::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--placeholder);
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--placeholder);
  }
  
  *::-webkit-scrollbar-thumb:active {
    background-color: var(--placeholder);
  }
:root {

      /* Typography */   
     --base-fonts: "Poppins", sans-serif;
    --text-14: 14px;
    --base-text: 16px;       
    --text-17: 17px; 
    --text-18: 18px;    
    --text-20: 20px;
    --text-22: 22px;
    --text-24: 24px;
    --text-26: 26px;
    --text-30: 30px;
    --text-32: 32px;
    --text-35: 35px;
    --text-40: 40px;
    --text-50: 50px;


    /* Colors */
     --base-color: #000000; 
    --primary: #D12027;
    --primary-dark: #aa1f23;
    --card-hover: #DF6368;
    --yellow: #EFC01A;
    --primary-light: #FBE9EA;    
    --primary-selected-check:#FFFAF9;
    --white: #ffffff;
    --placeholder:#444558;
    --gray-field:#E2E6EB;
    --gray-booking-bg:#fafafa;
    --gray-progress:#D9D9D9;
    --gray-header-border:#DEE5EA;
    --gray-first:#EEEEF0;
    --gray-second:#AAA1A0;
    --gray-third:#FAF8F8;
    --gray-fourth:#F5F5F5;
    --gray-fifth:#F6F6F6;
    --gray-sixth:#D3D7D8;
    --gray-seventh:#BDBDBD;
    --gray-eighth:#D0CFCF;
    --gray-nav:#848484;
    --gray-border:#E8DADA;
    --gray-box-border:#E4E2E2;
    --gray-card:#212838;
    --gray-card-service:#E8E8E8;
    --gray-section-bg:#F5F7F9;
    --primary-selected:#FFECE9;
    --primary-sidebar:#FAE9E9;
    --cart-bg:#F6F8F9;
    --cart-border:#D0E2EA;
    --new-black:#151515;


    /* Car colors */
    --car-black:#000000;
    --car-white:#ffffff;
    --car-gray-dark:#9C9292;
    --car-silver:#D7D3D3;


    /* Border Rounded */  
    --border-r-6: 6px;
    --border-r-8: 8px;
    --border-r-10: 10px;
    --border-r-12: 12px;
    --border-r-15: 15px;
    --border-r-20: 20px;
    --border-r-30: 30px;
    --border-r-100: 100px;
 
    


}

/*--------------General CSS---------*/




body {
    margin: 0;
    padding: 0;
    color: var(--base-color);
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-text-stroke: 1px transparent;
    font-size: var(--base-text);
    font-family:var(--base-fonts);
    font-weight: 400;
    width: 100%;
    background-color: var(--body-bg);
    overflow: auto;
}



img {
    border: 0 none;
    max-width: 100%;
}

a {
    outline: none;
    cursor: pointer;
    color: var(--primary);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--primary-dark);
    text-decoration: none;
}

a,
button,
.btn {
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}



/*-----------------------main styles starts here-----------------------------------------------*/

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
h1, h2, h3, h4, h5 { font-weight: 400;}
main {margin-top: 78px;}



/*=====================================	PLACE HOLDER CSSS START HERE 		====================================*/
.form-control::-moz-placeholder {
    color:var(--placeholder);
    opacity:1
  }
  .form-control::placeholder {
    color:var(--placeholder);
    opacity:1
  }
  .form-control:-ms-input-placeholder {
    color: var(--placeholder);
    opacity: 1;
  }
input.form-control,
textarea.form-control,
select.form-control {
    background-color: var(--white);
    border: 1px solid var(--gray-field);
    border-radius: var(--border-r-10);
    box-shadow: none;
    font-size: var(--base-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 50px;
    color: var(--base-color);
    padding: 10px 20px;
    font-weight: 400;
}
select.form-control {background-image: url(../images-nct/select-arrow.svg); background-position: 97% center; background-repeat: no-repeat; background-size: 24px 24px;}
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus
{box-shadow: none; border: 1px solid var(--base-color);}
textarea.form-control {
    height: auto;
    overflow: auto;
    white-space: normal;
    resize: none;
}
.form-label .option-note {font-size: var(--text-14); color: var(--gray-text);}
.form-group {
    margin-bottom:20px;
}
.form-check {display: flex; padding: 0; gap: 14px; align-items: self-start;}
.form-check .form-check-input {box-shadow: none; outline: none; width: 24px; height: 24px; min-width: 24px; min-height: 24px;  border-color: var(--gray-field); margin: 0px;}
.form-check-input:checked[type="checkbox"] {background-image: url(../images-nct/check.svg); background-repeat: no-repeat; background-position: center center; background-color: var(--white); background-size: 12px auto; border-color: var(--primary); box-shadow: none; outline: none;}
/*===================================== Commen Butons ===================================*/

.lg-btn {
    border-radius: var(--border-r-10);
    border: 1px solid var(--primary);
    background-color: var(--primary);
    text-align: center;
    color: var(--white);
    padding: 16px 36px;
    font-size: var(--text-22);
    font-weight: 600;
    line-height: 1.40022222;
    
}

.lg-btn:hover,
.lg-btn:focus {
    border: 1px solid var(--primary-dark);
    background-color: var(--primary-dark);
    color: var(--white);
}
.lg-btn-border {
    border-radius: var(--border-r-6);
    border: 1px solid var(--primary);
    background-color: transparent;
    text-align: center;
    color: var(--primary);
    padding: 16px 36px;
    font-size: var(--text-22);
    font-weight: 600;
    line-height: 1.40022222;
    
}

.lg-btn-border:hover,
.lg-btn-border:focus {
    border: 1px solid var(--primary);
    background-color: var(--primary);
    color: var(--white);
}


.medium-btn {
    border-radius: var(--border-r-6);
    border: 1px solid var(--primary);
    background-color: var(--primary);
    text-align: center;
    color: var(--white);
    padding: 9px 15px;
    font-size: var(--text-18);
    font-weight: 700;
    line-height: 1.40022222;
    
}

.medium-btn:hover,
.medium-btn:focus {
    border: 1px solid var(--primary-dark);
    background-color: var(--primary-dark);
    color: var(--white);
}
.sm-btn {
    border-radius: var(--border-r-6);
    border: 1px solid var(--primary);
    background-color: var(--primary);
    text-align: center;
    color: var(--white);
    padding: 7px 15px;
    font-size: var(--base-text);
    font-weight: 700;
    line-height: 1.40022222;
    
}

.sm-btn:hover,
.sm-btn:focus {
    border: 1px solid var(--primary-dark);
    background-color: var(--primary-dark);
    color: var(--white);
}
.medium-border-btn {
    border-radius: var(--border-r-6);
    border: 1px solid var(--primary);
    background-color: var(--white);
    text-align: center;
    color: var(--primary);
    padding: 9px 15px;
    font-size: var(--text-18);
    font-weight: 700;
    line-height: 1.40022222;
    
}

.medium-border-btn:hover,
.medium-border-btn:focus {
    border: 1px solid var(--primary);
    background-color: var(--primary-light);
    color: var(--primary);
}
.second-btn {
    border-radius: var(--border-r-6);
    border: 1px solid var(--primary);
    background-color: var(--primary);
    text-align: center;
    color: var(--white);
    padding: 10px 15px;
    font-size: var(--text-18);
    font-weight: 500;
    line-height: 1.40022222;
    
}

.second-btn:hover,
.second-btn:focus {
    border: 1px solid var(--primary-dark);
    background-color: var(--primary-dark);
    color: var(--white);
}
.close-btn {color: #898989; font-weight: 600;}
.close-btn:hover, .close-btn:focus {color: var(--black);}

.header-right {margin-left:auto;}






.btn-block .btn {margin-right: 15px;}
.btn-block .btn:last-child {margin: 0;}

.navbar-brand {
    height: auto;
    padding-top: 0px;
    padding-bottom: 0px;
    position: relative;
    z-index: 5;
}
.navbar-brand img {max-width: 75px;}
.custom-space {padding: 0 38px;}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid var(--gray-header-border);
    background-color: var(--white);
    z-index: 100;
    padding: 0;
}
header.first-header {background-color:var(--new-black); border-bottom:none;}
header.first-header .navbar-brand {position: absolute; left: 0; top: 5px;}
  header.first-header .navbar-brand img {max-width:inherit; width:120px;}
 header.first-header .manin-nav-link {color:var(--white);}
/* Booking Steps */
.booking-header {background-color: var(--gray-booking-bg);}
.booking-main {margin-top: 88px;}
.booking-section {padding: 40px 0; position: relative;}
.booking-section .container {max-width: 850px;}
.booking-section::after {position: fixed; left: 0; top: 0; width: 100%; height: 100%;background-color: var(--gray-booking-bg); content: ""; z-index: -1;}
.booking-progress {height: 10px;}
.booking-top {text-align: center; position: relative; padding: 0 50px;}
.close-booking {width: 40px; height: 40px; border-radius: 50%; background-color: var(--gray-first); display: flex; align-items: center; justify-content: center; position: absolute; right: 38px; top: 45px; border: 1px solid var(--gray-first);}
.close-booking:hover, .close-booking:focus {background-color: var(--white);}
.booking-top h1 {font-size: var(--text-35); margin: 0;}
.booking-top p {font-size: var(--text-18); margin: 10px auto 0; max-width: 620px; width: 100%; line-height: 28px;}
.booking-progress {margin-top: 30px; background-color: var(--gray-progress);}
.booking-progress .progress-bar {border-radius: var(--border-r-10); background-color: var(--primary);}
.booking-box {background-color: var(--white); border-radius: var(--border-r-30); border: 1px solid var(--gray-header-border); padding: 40px; margin-top: 30px;}
.step-container-lg {width: 100%; max-width: 690px; margin: 0 auto;}
.step-container-md {width: 100%; max-width: 650px; margin: 0 auto;}
.step-container-sm {width: 100%; max-width: 420px; margin: 0 auto;}
.icon-check {position: relative;} 
.icon-check [type="radio"] {position: absolute; width: 100%; height: 100%; opacity: 0;}
.icon-check .form-radio:checked + .radio-label {
  background-color:  var(--primary-selected);
  color: var(--primary);
}
.icon-check .form-radio:checked + .radio-label .icon img  {filter: none; }
.icon-check .radio-label {
  border: 1px solid var(--gray-field);
  display: block;
  border-radius: var(--border-r-12);
  position: relative;
  color: var(--base-color);
  padding: 7px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}
.icon-check .radio-label > .icon {
  border-radius: var(--border-r-12);
  background-color: var(--primary-selected-check);
  width: 70px;
  height: 70px;
  min-width: 70px;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center; 
  
}
.icon-check .radio-label > .icon img {filter: grayscale(100); }
.icon-check .radio-label > .r-label {
  font-size:var(--text-18);
  font-weight: 600;
  display: block;
}
/* Box radio */
.box-radio {position: relative;} 
.box-radio [type="radio"] {position: absolute; width: 100%; height: 100%; opacity: 0;}
.box-radio .form-radio:checked + .radio-label {
  color: var(--primary);
}
.box-radio .form-radio:checked + .radio-label .icon  {border-color: var(--primary); }
.box-radio .form-radio:checked + .radio-label .icon-color  {border-color: var(--primary); }
.box-radio .form-radio:checked + .radio-label .icon:before  {width: 20px; height: 20px; border-radius: 50%;content: ""; background-color: var(--primary); }
.box-radio .radio-label {
  border: 1px solid var(--gray-field);
  display: block;
  border-radius: var(--border-r-12);
  position: relative;
  color: var(--base-color);
  padding: 20px 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.box-radio .radio-label  .icon {
  border-radius: 50%;
  border: 1px solid var(--gray-second);
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center; 
  position: relative;  
}
.box-radio .radio-label .icon-color {
  border-radius: 50%;
  border: 1px solid transparent;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;

}
.box-radio .radio-label  .r-label {
  font-size:var(--text-18);
  font-weight: 600;
  display: block;
}
.box-radio .radio-label .icon-color.car-black {background-color: var(--car-black);}
.box-radio .radio-label .icon-color.car-white {background-color: var(--car-white); border-color: var(--gray-second);}
.box-radio .radio-label .icon-color.car-gray {background-color: var(--car-gray-dark);}
.box-radio .radio-label .icon-color.car-silver {background-color: var(--car-silver);}


.radio-flex {display: flex; justify-content: space-between; gap: 5px; width: 100%;}

/* Box check */
.box-check {position: relative;} 
.box-check [type="checkbox"] {position: absolute; width: 100%; height: 100%; opacity: 0;}
.box-check .form-check:checked + .check-label {
  color: var(--primary);
}
.box-check .form-check:checked + .check-label .icon  {border-color: var(--primary); }
.box-check .form-check:checked + .check-label .icon-color  {border-color: var(--primary); }
.box-check .form-check:checked + .check-label .icon:before  {width: 15px; height: 11px; background-image: url(../images-nct/check.svg); background-position: center center; background-repeat: no-repeat; display: block; content: "";}
.box-check .check-label {
  border: 1px solid var(--gray-field);
  display: block;
  border-radius: var(--border-r-12);
  position: relative;
  color: var(--base-color);
  padding: 20px 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;

}
.box-check .check-label  .icon {
  border: 1px solid var(--gray-second);
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center; 
  position: relative;  
    border-radius: 5px;
}

.box-check .check-label  .r-label {
  font-size:var(--text-18);
  font-weight: 600;
  display: block;
}



.booking-section .btn-block {display: flex; justify-content: space-between; align-items: center; margin-top: 50px;}
.booking-section .btn-block .medium-btn, .booking-section .btn-block .medium-border-btn {min-width: 136px;}
.booking-spacer {margin-bottom: 50px;}
.label-lg {font-size: var(--text-22); font-weight: 600; margin: 0 0 15px;}
.form-link {font-size: var(--base-text); font-weight: 500; margin: 24px 0 0;}
.phone-field .input-group-text { background-color: transparent;}
.phone-field .country-code.form-control {border: none; height: 53px; background-color: var(--primary-selected); border-radius: 0px; background-image: none; min-width: 96px; max-width: 96px;}
input.form-control-lg {background-color: var(--gray-third); height: 65px; font-size: var(--text-20); font-weight: 500; padding-left: 20px;}
.booking-total {background-color: var(--gray-third);color: var(--primary); font-size: var(--text-20); font-weight: 700; border-left: none; padding-right: 20px;}
.input-group input.form-control-lg {border-right: none;}
.days-check .radio-label {min-height: 123px; padding: 15px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.days-check .radio-label  .dn {font-size: var(--text-18); display: block; margin-bottom: 15px;}
.days-check .radio-label  .dd {font-size: var(--text-32); font-weight: 700;display: block;}
.dd-row {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 30px;}
.dd-cell {width: 100%;}
.time-check .form-radio:checked + .radio-label { border-color: var(--primary); background-color: var(--white);}
.time-check .radio-label > .r-label {display: block;text-align: center; width: 100%;}
.time-check .radio-label {padding: 13px 7px;}
.dp-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px;}
.dp-month {margin: 0; font-size: var(--text-24); font-weight: 600;}
.dp-btn {outline: none; box-shadow: none; border: 1px solid var(--gray-field); background-color: var(--white); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--border-r-6); padding: 0;}
.dp-btn:hover, .dp-btn:focus {background-color: var(--gray-first);}


/* Booking Steps */
.profile-main {margin-top: 88px; }
.profile-header {background-color: var(--white);}
.nav-icon-btn {width: 40px; height: 40px; min-width: 40px; min-height: 40px; background-color: var(--gray-fourth); display: flex; align-items: center; justify-content: center; border-radius: var(--border-r-10); border: 1px solid var(--gray-fourth); margin-left: 20px;}
.nav-icon-btn .profile-pic {width: 100%; height: 100%;border-radius: var(--border-r-10);}
.nav-icon-btn:hover, .nav-icon-btn:focus {background-color: var(--white);}
.menu.btn12 {margin-left: 20px;}
.profile-menu .dropdown-toggle::after {display: none;}
.header-search {display: flex; gap: 20px;}
.header-search input.form-control {height: 50px; background-color: var(--gray-fifth); border: 1px solid var(--gray-sixth); min-width: 360px;}

.header-search .nav-search-btn {width: 50px; height: 50px; min-width: 50px; min-height: 50px; background-color: var(--primary); display: flex; align-items: center; justify-content: center; border-radius: var(--border-r-10); border: none;  outline: none; padding: 0;}
.header-search .nav-search-btn:hover, .header-search .nav-search-btn:focus {background-color: var(--primary-dark);} 
footer {background-color: var(--base-color); padding: 60px 0; color: var(--white);} 
.footer-nav li {color: var(--gray-seventh); margin-bottom: 20px; font-size: var(--text-17);}
.footer-nav li a {color: var(--gray-seventh);}
.footer-nav li a:hover, .footer-nav li a:focus {color: var(--white);}
.footer-nav h3 {font-family: var(--base-text); font-weight: 500; margin-bottom: 5px; font-size: var(--text-26); color: var(--white);} 
.footer-nav h2 {font-family: var(--base-text); font-weight: 500; margin-bottom: 5px; font-size: var(--text-35);color: var(--white);} 
.copyright {text-align: center; margin: 70px 0 0;}
.sidebar {height: calc(100vh - 88px);
  background-color: var(--primary-sidebar);
  min-width: 323px;
  overflow: auto;
  padding: 10px 0;
  position: sticky;
  top: 88px;
  left: 0;}
.sidebar-item {border-bottom: 1px solid var(--gray-eighth); text-transform: uppercase; position: relative;}
.sidebar-item:last-child {border-bottom: none;}
.sidebar-item .sidebar-link {font-size: var(--text-18); font-weight: 600; color: var(--base-color); display: block; padding: 16px 30px;}
.sidebar-item .sidebar-link.active {color: var(--primary);}
.sidebar-item .sidebar-link.active:before {content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 5px; background-color: var(--primary);}

.sub-nav {padding-left: 0; margin-bottom: 10px;}
.sub-nav .sub-nav-link {color: var(--gray-nav); display: block; padding: 10px 15px 10px 40px; font-weight: 600; position: relative;}
.sub-nav .sub-nav-link.active {color: var(--primary);}
.sub-nav .sub-nav-link.active:before {content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 5px; background-color: var(--primary);}
.profile-container {padding: 50px; width: 100%;}
.profile-box {background-color: var(--white); border-radius: var(--border-r-12); padding: 30px; box-shadow: 0 0 10px rgba(0,0,0,0.10); border: 1px solid var(--gray-box-border);}
.profile-wrapper {display: flex; align-items: start;}
.profile-title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; gap: 10px;}
.profile-title h1 {font-family: var(--base-fonts); font-size: var(--text-26); font-weight: 700; margin: 0;}
.profile-title h1 span {font-weight: 400;}
.profile-title .medium-btn img {margin-right: 5px; align-items: center;}
.user-info {border: 1px solid var(--gray-border); display: flex; align-items: start; border-radius: var(--border-r-8); min-height: 80px; margin-bottom: 10px;}
.user-label{
	position: relative;
	background: var(--gray-fourth);
  padding: 15px 30px;
  font-size: var(--text-18); font-weight: 600;
  border-radius: var(--border-r-8) 0 0 var(--border-r-8);
  width:25%;
  min-height: 80px;
  display: flex;
  align-items: center;
}
.user-label:after {
	right:-5px;
	top: 0;
	width: 28px;
  height: 80px;
	content: "";
	position: absolute;
background-image: url(../images-nct/arrow-lg.svg); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%;
}
.user-value {
  padding: 15px 30px 15px 50px;
  font-size: var(--text-18); font-weight: 400;
  min-height: 80px;
  display: flex;
  align-items: center;
}

.common-table th {background-color: var(--gray-fourth); border-bottom: none; box-shadow: none; font-size: var(--text-18); font-weight: 500;}
.common-table th:first-child {border-radius: var(--border-r-10) 0 0;}
.common-table th:last-child {border-radius: 0 var(--border-r-10) 0 0;}
.common-table th, .common-table td {padding: 15px 20px;}
.common-table td {border-bottom-color: var(--gray-eighth); font-size: var(--base-text); color: var(--base-color); align-items: center;}
.status {min-width:96px; text-align: center; padding: 4px 5px; font-size: var(--text-14); font-weight: 500; display: inline-block; border-radius: var(--border-r-30);color: var(--white);}
.booked {background-color: #0B5CB7; }
.ongoing {background-color: #FF70E5;}
.completed {background-color: #00C269;}
.refunded {background-color: #c29500;}
.cancelled {background-color: #c20000;}
.op-btnts {display: flex; align-items: center; justify-content: center; gap: 10px;}
.op-btn {width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--primary-light); border: 1px solid var(--primary-light);}
.op-btn:hover, .op-btn:focus {background-color: var(--white);}
.breadcrumb-item + .breadcrumb-item::before {content: ">";}
.breadcrumb-item.active {color: var(--base-color);}
.pd-left {border-bottom: 1px solid var(--gray-eighth); padding-bottom: 24px; margin-bottom: 24px;}
.pd-left-row {display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 10px;}
.pd-left-row:last-child {margin-bottom: 0;}
.pd-left-row p {font-size: var(--text-22); font-weight: 600; color: var(--gray-nav); margin: 0;}
.pd-left-row .cat-value {color: var(--primary);}
.pd-left-row .date-time {color: var(--base-color); font-weight: 400;}
.profile-card {background-color: var(--white);
  border-radius: var(--border-r-12);
  box-shadow: 0 0 10px rgba(0,0,0,0.10);
  border: 1px solid var(--gray-box-border); color: var(--base-color);} 

.profile-card .card-title {font-size: var(--text-24); font-family: var(--base-fonts); font-weight: 600; margin-bottom: 15px;}  
.card-box-row {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;}
.card-box-row .box-label {font-size: var(--text-20);color: var(--gray-nav); font-weight: 600; margin: 0;}
.card-box-row .box-value {font-size: var(--text-20); font-weight: 400; margin: 0; min-width: 30%;}
.profile-card .service-list li {position: relative; font-size: var(--text-20); font-weight: 600; color: var(--gray-nav); margin-bottom: 15px; display: flex;
  align-items: first baseline; gap: 20px;}
.profile-card .service-list li:before {content: "";
  border-radius: 50%;
  min-width: 10px;
  min-height: 10px;
  background-color: var(--primary);
  display: block;}
.profile-total-box {border-radius: var(--border-r-20); background-color: var(--primary-light); padding: 20px;}
.total-top {border-bottom: 1px solid var(--white); padding-bottom: 15px; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.total-top p {font-size: var(--text-24); margin: 0; font-weight: 600; }

.total-box-row {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px;}
.total-box-row .total-label {font-size: var(--text-20); font-weight:600; margin: 0;}
.total-box-row .total-value {font-size: var(--text-20); font-weight: 400; margin: 0; min-width: 30%;}
.download-link {font-size: var(--text-22); font-weight: 600; }
.profile-bottom-cards {margin-top: 24px;}
.remark-disc {font-size: var(--text-22); color: var(--gray-nav); font-weight: 500;}
.order-detail-top .profile-title {justify-content: flex-start;}
.order-detail-top .total-box-row:last-child {margin-bottom: 0;} 
.od-img {display: block;max-width: 135px; max-height: 135px;border-radius: var(--border-r-8); overflow: hidden;}
.od-img img {max-width: 135px; max-height: 135px; border-radius: var(--border-r-8);}
.od-details p {font-size: var(--text-18); font-weight: 600; line-height: 24px; max-width: 352px; min-width: 352px;}
.od-info {display: flex; align-items: center; gap: 35px; flex-wrap: wrap; font-size: var(--base-text);}
.od-info .od-label {font-weight: 600;}
.review-cell {padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid var(--gray-eighth);}
.review-cell:last-child {border-bottom: none; margin-bottom: 0; padding-bottom: 0;} 
.review-top {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px;}
.review-top h3 {font-size: var(--text-32); margin: 0;}
.r-top-left {display: flex; gap: 25px; align-items: center; flex-wrap: wrap;}
.review-star {display: flex; gap: 4px; font-size: var(--text-20); color: var(--yellow); cursor: pointer; align-items: center;}
.review-star p {margin: 0 0 0 10px; color: var(--gray-nav); font-size: var(--base-text);}
.review-date {margin: 0; font-size: var(--text-20); font-style: italic;}
.review-disc p {font-size: var(--text-24);}
.review-disc p:last-child {margin-bottom: 0;} 
.menu.btn12 {display: none;}
.mobile-search-btn {display: none; border-radius: 0px;}

/* -------Front Pages----- */
.second-nav {padding: 10px 12px 15px; margin:0 auto;}
.main-nav {display: flex; align-items: center; justify-content: center; gap: 70px;}
.manin-nav-link {font-size: var(--text-20); font-weight: 500; text-transform: uppercase; color: var(--base-color);}
.manin-nav-link:hover, .manin-nav-link:focus {color: var(--primary);}  
.inner-main {margin-top: 70px;}
.banner {position: relative; overflow: hidden; min-height: 650px; padding: 55px 0; display: flex; align-items: center;}
.banner::before {position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background-color: rgba(0,0,0,0.70); z-index: 2;}
.banner .banner-img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.banner .container-fluid {position: relative; z-index: 3;}
.banner-box { padding: 50px 60px; width: 100%; max-width: 956px; margin:0 auto; text-align:center; color: var(--white);}
.banner-box h1 {color: var(--primary); font-size: var(--text-50); margin: 0; text-transform: uppercase; font-weight:700;} 
.banner-box h1 span {color: var(--white);}
.banner-box h3 {font-size: var(--text-30); margin: 25px 0 0; text-transform: uppercase; font-weight: 600; font-family: var(--base-fonts); line-height: 40px;} 
.banner-box p {font-size: var(--text-24); text-transform: uppercase; margin: 25px auto 0; line-height: 30px; letter-spacing: 0.8px; font-weight:500; max-width:732px;} 
.banner-box .lg-btn { margin: 40px 0 0;} 
.common-section {padding: 50px 0;}
.section-title {margin: 0 0 40px;}
.section-title .title {font-size: var(--text-50); margin: 0; text-transform: uppercase; font-weight:700; color:var(--white);}
.section-title .title span {color: var(--primary);}
.section-title p {font-size: var(--text-20); margin: 0; font-weight: 600;}
.custom-container {max-width: 1590px; margin: 0 auto;}
.service-card {border-radius: var(--border-r-15); border: none;}
.service-card:hover .card-body {background-color: var(--card-hover);}
.service-card .card-img-top img { width: 100%; border-radius: var(--border-r-15) var(--border-r-15) 0 0;}
.service-card .card-body {background-color:var(--gray-card); color: var(--white); border-radius: 0 0 var(--border-r-15) var(--border-r-15); padding-top: 20px; padding-bottom: 20px;}
.service-card .card-title {font-size: var(--text-32); font-family: var(--base-fonts); font-weight: 600; display: block; margin-bottom: 15px;}
.service-card .card-title:hover, .service-card .card-title:focus {color: var(--primary-light);}
.service-card .sm-btn {min-width: 180px;}
.shop-section {background-color: var(--new-black);}

.shop-banner {position: relative; overflow: hidden; min-height: 696px; padding: 55px 0; display: flex; align-items: center; color: var(--white); border-radius: var(--border-r-20);}
.shop-banner::before {position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background-color: rgba(0,0,0,0.60); z-index: 2;}
.shop-banner .shop-banner-img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.shop-banner .container {position: relative; z-index: 3;}
.review-bg {position: relative; overflow: hidden;}
.review-bg .customer-review-section {position: relative;
  z-index: 6;background-color: transparent;}
.review-bg .shop-banner-img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
.review-bg .container {position: relative; z-index: 3;}

.shop-card {display: block; text-align: center;}
.shop-card .shop-img {display: inline-block; width: 100px; border-radius: 50%; overflow: hidden; height: 100px; margin: 0 0 30px; border: 5px solid var(--white);}
.shop-card .shop-img img {width: 100%; height: 100%; border-radius:50%;}
.shop-card p {font-size: var(--text-20); font-weight: 600; margin: 0; color: var(--white);}
.shop-banner .container {position: relative; z-index: 3;}
.shop-card:hover p {text-decoration: underline;}
.sc-main {margin-bottom: 35px; margin-top: 30px;}
.hiw-card {border: none; box-shadow: 0 0 20px rgba(0,0,0,0.10); border-radius: var(--border-r-30); color: var(--base-color); min-height: 310px; max-width: 277px; width: 100%; margin: 0 auto;}
.hiw-card .card-body {align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;}
.hiw-card .card-img-top {width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-r-10);  margin: 0 auto 0;}
.hiw-card .card-title {font-size: var(--text-26); font-weight:700; margin: 15px 0;}
.hiw-card .card-text {font-size: var(--base-text); color: var(--gray-nav); max-width: 215px; margin: 0 auto;}
.craft-video {border-radius: var(--border-r-20); overflow: hidden; display: inline-block;}
.craft-video img, .craft-video iframe {border-radius: var(--border-r-20);}
.craft-right p {font-size: var(--text-20); line-height: 28px; margin: 0 0 30px;}
.craft-section {background-color: #281617; color:var(--white);}
.why-choose-card {border-radius: var(--border-r-15); position: relative; color: var(--white); overflow: hidden; border: none;}
.choose-card-content {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: end; flex-direction: column; border-radius: var(--border-r-15); padding: 20px;
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.60) 56%,rgba(0,0,0,0.95) 100%);
}
.why-choose-card:hover, .why-choose-card:focus {color: var(--white); box-shadow: 0 0 20px rgba(0,0,0,0.10);}  
.choose-card-content h3 {font-size: var(--text-18); margin: 0 0 5px;}
.choose-card-content p {font-size: var(--base-text); margin: 0; }
.choose-card-info {min-height: 100px;}
.customer-review-section {background-color: var(--primary-light);}
.cr-card {position: relative; padding:90px 40px 35px; color: var(--base-color); border-radius: var(--border-r-10); min-height: 420px; display: flex; align-items: center; justify-content: center; flex-direction: row; margin: 0 15px;}
.cr-card::before {content: ""; position: absolute; left: 25px; top: 16px; width: 100px; height: 100px; background-image: url(../images-nct/qt-left.svg); background-position: center left; background-repeat: no-repeat; }
.cr-card::after {content: ""; position: absolute; right: 25px; bottom: 16px; width: 100px; height: 100px; background-image: url(../images-nct/qt-left.svg); background-position: center right; background-repeat: no-repeat; }
.cr-card .card-title {font-size: var(--text-32); font-weight:700; margin: 0;line-height: 32px;
  font-style: italic;}
.cr-card .card-text {font-size: var(--text-22); margin: 30px auto 0;  line-height: 32px;line-height: 32px;
  font-style: italic;}
.review-slider .slick-next::before {content: "";width: 25px; height: 50px; background-image: url(../images-nct/slider-arrow-right.svg); background-position: center center; background-repeat: no-repeat; display: block;}
.review-slider .slick-next {right: -18px; width: 25px; height: 50px; z-index: 2; overflow: hidden;}
.review-slider .slick-prev::before {content: "";width: 40px; height:50px; background-image: url(../images-nct/slider-arrow-left.svg); background-position: center center; background-repeat: no-repeat; display: block; }
.review-slider .slick-prev {left: -18px; width:40px; height: 50px; z-index: 2; overflow: hidden;}
.review-slider {padding: 0 30px;}
.inner-breadcrumb {background-color: var(--primary-light); padding: 15px 0;}
.inner-breadcrumb .breadcrumb {margin: 0;}
.sd-section {background-color: var(--gray-section-bg);}
.pd-section {background-color: var(--gray-section-bg);}
.service-tabs {margin: 0 0 40px; display: flex; align-items: center; justify-content: center; gap: 30px;}
.service-tabs .service-link {display: block; font-size: var(--text-20); font-weight: 600; border: 1px solid var(--gray-nav); color: var(--base-color); padding: 9px 15px; min-width: 210px; border-radius: var(--border-r-100); text-align: center;}
.service-tabs .service-link:hover, .service-tabs .service-link:focus {color: var(--primary);}
.service-tabs .service-link.active {color: var(--primary); border-color: var(--primary);} 
.sd-card {border-radius: var(--border-r-15); color: var(--base-color); overflow: hidden; border: none;background-color: var(--gray-card-service); }
.sd-card .card-img-top {border-radius: var(--border-r-15); }
.sd-card .card-img-top img {width: 100%;border-radius: var(--border-r-15);}
.sd-card .card-body, .sd-card .card-footer {padding-left: 20px; padding-right: 20px; background-color: var(--gray-card-service);border: none;}
.sd-card .card-footer {padding-bottom: 20px; padding-top: 0;}
.sd-card .card-text {font-size: var(--base-text);}
.sd-card .price {font-size: var(--text-24); font-weight: 600; display: flex; gap: 24px; align-items: center; }
.sd-card .price .old-price {text-decoration: line-through;}
.sd-card .price .current-price {color: var(--primary);}
.infinite-btn {margin-top: 40px; text-align: center;}
.slider-item-lg img {width: 100%; border-radius: var(--border-r-20);}
.slider-thumb .slick-slide  { display:block; margin: 0 20px;}
.slider-thumb .slick-slide img {border:1px solid transparent; display:block; border-radius: var(--border-r-10);}
.slider-thumb .slick-active.slick-current img {border-color: var(--primary);}
.slider-thumb {padding:30px 65px 0;}
.pd-section .section-title .title {font-size: var(--text-40);}
.pd-section .section-title {margin-bottom: 15px;}
.pd-right .review-star {margin-bottom: 20px;}
.detail-info-block {margin: 0 0 30px;}
.detail-info-block .product-price {font-size: var(--text-30); font-weight: 700; color: var(--primary);}
.detail-info-block .product-old-price {font-size: var(--text-30); font-weight: 700; text-decoration: line-through;}
.detail-radio {display: flex; align-items: center; gap: 20px;}
.detail-radio .icon-check .radio-label > .r-label {font-size: var(--text-20); font-weight: 400;}
.detail-radio .icon-check .radio-label {border-color: var(--base-color); padding: 6px 10px;}
.detail-radio .time-check .form-radio:checked + .radio-label {background-color: transparent;}
.info-label {font-size: var(--text-20); text-transform: uppercase;}
.number-block {position: relative; max-width: 320px;}
.number-block .form-control {text-align: center; font-size: var(--text-20);}
.number-block .number-btn {position: absolute; top: 7px; width: 38px; height: 38px; background-color: var(--secondry); display: flex; align-items: center; justify-content: center; color: var(--base-color); font-size: var(--text-20); border: none; outline: none; box-shadow: none; padding: 0; margin: 0; background-color: var(--primary-light); border-radius: var(--border-r-10); font-weight: 400;}
.number-block .minus-btn {left: 7px;}
.number-block .plus-btn {right: 7px;}
.detail-social-block {display: flex; align-items: center; gap: 20px;}
.social-label {font-size: var(--text-20); font-weight: 600;}
.pm-info p {margin-bottom: 0; font-size: var(--text-18);}
.pm-info {max-width: 1094px; margin-bottom: 15px;}
.pd-discription {margin-bottom: 35px;}
.pd-discription p {font-size: var(--text-18); margin-bottom: 0 0 25px;}
.pd-discription p:last-child { margin-bottom:0;}
.sub-title {font-size: var(--text-30); margin: 0 0 15px;}
.pd-review-top {background-color: var(--primary-light); padding: 20px 30px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px;}
.pd-review-top p {font-size: var(--text-20); margin: 0; color: var(--gray-card);}
.pd-review-section .r-top-left { display: block;}
.pd-review-section .r-top-left .review-star {margin: 10px 0 0;}
.pd-review-section .review-top {margin-bottom: 8px;}
.title-link {font-size: var(--text-22); font-weight: 600; text-decoration: underline;}
.pd-similar .section-title {display: flex; align-items: center; justify-content: space-between;}
.inner-banner-img {width: 100%;}
.category-card .card-title {margin-bottom: 0;}
.back-btn {border-bottom: 1px solid var(--gray-eighth); padding-bottom: 20px; margin-bottom: 20px;}
.back-link {display: flex; align-items: center; gap: 10px;}
.back-link p {font-size: var(--text-18); color: var(--base-color); margin: 0;}
.cart-title {margin-bottom: 20px;}
.cart-title p {font-size: var(--text-18); font-weight: 600; margin: 0 0 5px;}
/*.cart-title span {font-size: var(--text-14); display: block; color: var(--gray-card);}*/
.cart-row {border-radius: var(--border-r-15); background-color: var(--cart-bg); border: 1px solid var(--cart-border); padding: 20px; display: flex; align-items: start; gap: 20px; margin-bottom: 20px;}
.cart-thumb {display: block; width: 130px; height: 96px; min-width: 130px; min-height: 96px; overflow: hidden; border-radius: var(--border-r-8);} 
.cart-thumb img {width: 100%; height: 100%;border-radius: var(--border-r-8);}
.cart-name {font-size: var(--text-18); font-weight: 600; min-height: 40px; padding-bottom: 10px; margin: 0;}
.cart-details {
  width: 100%;
}
.cart-bottom {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.cart-product-info {display: flex; align-items: center; gap: 25px;}
.cart-product-info .number-block {max-width: 165px;}
.cart-product-info {display: flex; align-items: center; gap: 25px;}
.cart-product-info .cart-price {font-size: var(--text-26); margin: 0;}
.cart-product-info .cart-delete {font-size: var(--text-24);}
.cart-total-box {border-radius: var(--border-r-20); background-color: var(--primary-selected); padding: 20px; position: sticky; right: 0; top:175px;}
.title-total {border-bottom: 1px solid var(--white); padding-bottom: 15px; margin-bottom: 15px;}
.title-total p {margin: 0; font-size: var(--text-22); font-weight: 600;}
.cart-total-block {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.cart-total-block .total-label {font-size: var(--text-20); font-weight: 600; margin: 0;}
.cart-total-block .total-value {font-size: var(--text-20); margin: 0;}
.cart-total-block .final-total-label {font-size: var(--text-24); font-weight:700; margin: 0;}
.cart-total-block .final-total-value {font-size: var(--text-24); font-weight: 700; margin: 0;}

.password-field {position:relative;}
.password-field .field-icon {position:absolute; right:20px; top:13px; font-size: var(--text-20); color: var(--placeholder); cursor:pointer;}

.auth-pages.booking-box {max-width:550px; margin-left:auto; margin-right:auto;}
.before-login-header .navbar-nav {gap:10px}

.deactivate-outer p {text-align:center;}
.deactivate-outer .d-md-flex {text-align:center;}
.jconfirm-box-container {margin:0 auto;}
.account-box {background-color: var(--white); border-radius: var(--border-r-30); border: 1px solid var(--gray-header-border); padding: 40px;  max-width:450px; margin:0 auto;}

.pagination-main { margin-top: 30px; display: flex; justify-content: center; align-items: center;}
.pagination-main .pagination {display: flex;justify-content: end;}
.pagination-main .pagination a {margin: 0 3px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border:1px solid var(--gray-second); background-color: var(--white); color: var(--secondry);}
.pagination-main .pagination .disabled a {color: var(--gray-text);}
.pagination-main .pagination .page.active a {background-color: var(--base-color); color: var(--white);}

.no-data-box {max-width:400px; margin:0 auto; width:100%; text-align:center;}
.no-data-box i {font-size:40px; color:var(--gray-first);}
.no-data-box p {font-size:18px; color:#888;}

/* New Design class */
.new-booking-section h1, .new-booking-section h2, .new-booking-section h3, .new-booking-section h4, .new-booking-section h5 {font-family: var(--base-fonts);}
header .close-booking {position: static;}
.new-booking-section .container {max-width: 1200px;}
.new-booking-section .booking-top {text-align: left; padding: 0;margin-bottom: 20px;}
.new-booking-section .booking-top p {max-width: inherit; margin: 10px 0 0;}
.new-booking-section h1 {font-weight: 700; font-size: var(--text-30);}
.new-booking-container {margin-bottom: 40px;}
.time-check-new .radio-label {
  padding: 10px 7px;background-color: var(--white);
}
.time-check-new .radio-label > .r-label {text-align: center; font-size: 18px; font-weight: 500; width: 100%; color: var(--primary);}
.booking-label {font-size: var(--text-18); font-weight: 500; display: inline-block; margin-bottom: 10px;}
.cost-box {background-color: var(--primary-selected); border-radius: var(--border-r-30); padding: 20px; width: 100%; max-width: 450px; margin: 0 0 0 auto;}
.cost-box h3 {font-size: var(--text-22); font-weight: 700; margin: 0 0 16px; text-align: center;}
.cost-box .codt-row {display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
.cost-box .codt-row:last-child {margin-bottom: 0;}
.cost-box .codt-row h4 {font-size: var(--text-18); font-weight: 700; color: var(--primary); margin: 0;}
.cost-box .codt-row h5 {font-size: var(--text-18); font-weight: 500;  margin: 0;}
.new-calender .cd-btn {display: flex; align-items: center; gap: 10px;}
.new-calender .dp-btn {border: none; background-color: transparent; font-size: var(--text-24);}
.calender-table tr, .calender-table td, .calender-table th  {border: none; background-color: transparent; text-align: center; padding: 3px;}

.new-calender .dp-header {margin-bottom: 15px;}

.calender-check {position: relative;} 
.calender-check [type="radio"] {position: absolute; width: 100%; height: 100%; opacity: 0;}
.calender-check .form-radio:checked + .radio-label {
  color: var(--primary);
  border-radius: var(--border-r-20);
  border: 2px solid rgba(0,0,0,0.60);
  color: inherit;
}

.calender-check .radio-label {
  border: 1px solid var(--gray-field);
  display: block;
  border-radius: var(--border-r-12);
  position: relative;
  color: var(--base-color);
  padding: 7px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  width: 70px; height: 70px; border-radius: 0px;
  text-align: center;
  justify-content: center;
  margin: 0 auto;
}

.calender-check .radio-label.available {background-color: #9ae2c1;} 
.calender-check .radio-label.booked {background-color: #eeb9bb;} 
.calender-check .radio-label.available-few {background-color: #f4bd9c;} 
.calender-check .radio-label.not-available {background-color: var(--gray-header-border);} 

.calender-check .radio-label > .r-label {
  font-size:var(--base-text);
  font-weight: 600;
  display: block;
}
.time-block {max-width: 450px; margin: 0 0 0 auto;}
.slot-block {display: flex; gap: 10px; flex-wrap: wrap;}
.slot-block .slot {display: flex; gap: 10px; align-items: center; gap: 6px; font-size:12px;}
.slot-block .slot span {width: 20px; height: 20px; display: block;}

.slot-block .slot.available span {background-color: #9ae2c1;} 
.slot-block .slot.booked-slot span {background-color: #eeb9bb;} 
.slot-block .slot.available-few span {background-color: #f4bd9c;} 
.slot-block .slot.not-available span {background-color: var(--gray-header-border);} 
.payment-box {background-color: var(--primary-selected); border-radius: var(--border-r-30); padding:35px 20px; width: 100%; max-width: 800px; margin: 0 auto;}
.payment-box  h2 {font-size: var(--text-26); font-weight: 600; margin: 0 0 35px;}
.payment-box  h2:last-child {margin-bottom: 0;} 
.payment-box  h2 span {color: var(--primary); display: inline-block;}
.terms-check {display: flex; justify-content: center; margin: 40px auto;}
.service-section {background-color: var(--new-black); }
.op-section {color:var(--white); background-color:var(--new-black);}
.partner-block h3 {font-size:var(--text-30); font-weight:700;text-transform: uppercase; margin:30px 0 0;}



 @media(max-width:1450px) {
.sidebar {min-width: 242px;}
.sidebar-item .sidebar-link {padding: 12px 20px;}
.sub-nav .sub-nav-link {padding: 8px 12px 8px 30px;}
.sidebar-item .sidebar-link {font-size: var(--base-text);}
.profile-container {padding: 30px;}
.header-search input.form-control {min-width: 290px;}
.header-search {gap: 15px;}
.pd-left-row p {font-size: var(--text-18);}
.profile-card .card-title, .total-top p {font-size: var(--text-20);}
.total-top p {font-size: var(--text-22);}
.card-box-row .box-label, .card-box-row .box-value, .total-box-row .total-label, .total-box-row .total-value, .download-link, .profile-card .service-list li, .remark-disc {font-size: var(--text-17);}
.pd-left-row .date-time {display: inline-block;}
.review-top h3 {font-size: var(--text-26);}
.review-disc p {font-size: var(--text-20);}
.review-star {font-size: var(--text-18);}
.review-date {font-size: var(--base-text);}
.od-info {gap: 20px;}
.cart-product-info {gap: 15px; margin-top: 10px;}
.cart-row {padding: 15px;}
.cart-product-info .cart-price {font-size: var(--text-20);}
.cart-product-info .cart-delete {font-size: var(--text-18);}
.slider-thumb {padding: 30px 25px 0;}
.pd-section .section-title .title {font-size: var(--text-30);}
  }
 @media(max-width:1200px) {
.navbar-nav {flex-direction: row;}
    .menu.btn12 {display: inline-block;}
    .btn12 {
      position: relative;
      width: 30px;
      height: 30px;
      background-color: transparent;
      padding: 0;
      border: none;
      outline: none;
      box-shadow: none;
      transition-duration: 0.5s;
    }
    .btn12 .icon {
      transition-duration: 0.5s;
      position: absolute;
      height: 2px;
      width: 24px;
      top: 15px;
      background-color: var(--white);
    }
    .btn12 .icon:before {
      transition-duration: 0.5s;
      position: absolute;
      width: 24px;
      height: 2px;
      background-color: var(--white);
      content: "";
      top: -10px;
      left: 0;
    }
    .btn12 .icon:after {
      transition-duration: 0.5s;
      position: absolute;
      width: 24px;
      height: 2px;
      background-color: var(--white);
      content: "";
      top: 10px;
      left: 0;
    }
    .btn12.open .icon {
      transition-duration: 0.5s;
      background: transparent;
    }
    .btn12.open .icon:before {
      transform: rotateZ(45deg) scaleX(1.25) translate(6.5px, 6.5px);
    }
    .btn12.open .icon:after {
      transform: rotateZ(-45deg) scaleX(1.25) translate(6px, -6px);
    }
    .btn12:hover {
      cursor: pointer}
      .nav-icon-btn { width: 30px; height: 30px; min-width: 30px; min-height: 30px;}
      .nav-icon-btn img {max-width: 28px;}
      .sidebar {opacity: 0; visibility: hidden; position: fixed; left: -270px; top: 0; height: 100%; overflow: auto; -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;}
      .toggle-sidebar .sidebar {opacity:1; visibility:visible; left: 0; top: 0; z-index: 102;}
      .menu.open:after {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 101; background-color: rgba(0,0,0,0.60); content: "";}
      .user-label {width: 40%;}
      .common-table th {white-space: nowrap;font-size: var(--base-text); padding: 10px 15px;}
      .common-table td {padding: 10px 15px; font-size: var(--text-14);}
      .profile-box {padding: 20px;}
      .profile-total-box {margin-bottom: 25px;}
      .total-box-row .total-value {min-width: inherit;}
      .custom-space {padding: 0;}
      .od-info {gap: 10px;}
      .title-total p {font-size: var(--text-18);}
      .cart-total-block .total-label {font-size: var(--base-text);}
      .cart-total-block .final-total-label, .cart-total-block .final-total-value {font-size: var(--text-17);}
      .cart-total-block {margin-bottom: 10px;}
      .cart-thumb {width: 100px; min-width: 100px; height: 70px; min-height: 70px;}
       .first-header .menu.open::after {display: none;}
       .second-nav {position: absolute; right: 12px; top:82px;background-color: var(--white); border-radius: var(--border-r-10); padding: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.10); min-width: 200px;}
       .manin-nav-link {display: block; font-size: var(--text-17); }
       .main-nav-item {margin-bottom: 10px;}
       .main-nav-item:last-child {margin-bottom:0;}
       .main-nav {display: block;}
       .second-nav {display: none;}
       .toggle-sidebar .second-nav {display: block;}
       .inner-main {margin-top: 106px;}
       .cart-name {min-height: inherit;}
       .cart-bottom {display: block;}
       .section-title .title {font-size: var(--text-35);}
       .service-card .card-title {font-size: var(--text-24);}
       .common-section {padding: 30px 0;}
       .slider-thumb {padding-bottom: 30px;}
       
 }

  @media(max-width:992px) {
.cart-total-box {position: static;}
.booking-top h1 {font-size: var(--text-32);}
.booking-top p {font-size: var(--base-text);}
.box-radio .radio-label .r-label, .icon-check .radio-label > .r-label {font-size: var(--text-18);}
.label-lg {font-size: var(--text-24);}
.craft-video {margin: 0 auto 15px; display: block; text-align: center;}
.section-title {margin-bottom: 18px;}
.banner-box {padding: 30px 40px; }
.banner-box h1 {font-size: var(--text-40);}
.banner-box h3 {font-size: var(--text-24); line-height: normal; margin-top: 15px;}
.banner-box p {font-size: var(--text-18); margin-top: 15px;}
.banner-box .lg-btn {margin-top: 20px;}
.banner {min-height: inherit;}
.service-card .card-title {font-size: var(--text-22);}
.review-slider .slick-prev {left: 0;}
.review-slider .slick-next {right: 10px;}

  }
@media(max-width:768px) {
  input.form-control-lg, .booking-total {font-size: var(--base-text);}
 .mobile-search-btn {width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; border:none; outline: none; box-shadow: none;}  
  .mobile-search-btn .close-src-toggle {display: none;}
  .mobile-search-btn .src-toggle {filter: brightness(10%);}
   .close-search .src-toggle {display: none;}
   .close-search .close-src-toggle {display: block; width: 22px;}
     .header-search.show-search {
    display: flex;
    background-color: var(--white); padding: 12px;
    width: 100%;
    position: fixed;
    left: 0;
    top: 77px;
    border-bottom: 1px solid var(--gray-eighth);
    border-top: 1px solid var(--gray-eighth);
  }
  .header-search {
    display: none;
  }
     
.navbar-brand img { max-width: 65px;}
.custom-space {padding: 0;}
.booking-main, .profile-main {margin-top: 78px;}
.booking-top {padding: 0;}
.booking-section {padding: 30px 0;}
.booking-top h1 {font-size: var(--text-20); margin-top: 10px;}
.booking-top p {font-size: var(--text-14); margin-top: 5px; line-height: 18px;}
.booking-progress {margin-top: 20px;}
.booking-box, .account-box {margin-top: 20px; padding: 20px;}
.icon-check .radio-label {gap: 10px;}
.icon-check .radio-label > .icon {width: 60px; height: 60px; min-width: 60px; min-height: 60px;}
.box-radio .radio-label .r-label, .icon-check .radio-label > .r-label, .box-check .check-label .r-label {font-size: var(--base-text);}
.booking-section .btn-block {margin-top: 30px;}
.icon-check .form-radio:checked + .radio-label .icon img {max-width: 50px; max-height: 50px;}
.close-booking {top:20px; width: 28px; height: 28px;}
.close-booking img {max-width: 13px;}
.booking-spacer {margin-bottom:30px;}
.box-radio .radio-label, .box-check .check-label {padding: 10px 15px;}
.label-lg {font-size: var(--text-18); margin-bottom: 10px;}
.box-radio .radio-label {gap: 10px;}
.form-link {font-size: var(--base-text);}
.booking-section .btn-block .medium-btn, .booking-section .btn-block .medium-border-btn {min-width: 85px;}
.box-radio .radio-label .icon, .box-radio .radio-label .icon-color {width: 30px; height: 30px; min-width: 30px; min-height: 30px;}
.box-radio .form-radio:checked + .radio-label .icon::before {width: 20px; height: 20px;}
.days-check .radio-label .dn {margin-bottom: 2px; font-size: var(--text-14);}
.days-check .radio-label .dd {font-size: var(--text-17);}
.days-check .radio-label {min-height: 80px;}
.dd-row {gap: 4px;}
.profile-container {padding: 20px 15px;}
.profile-box {padding: 15px;}
.user-label, .user-value {width: 100%; padding: 7px 15px; min-height: inherit; font-size: var(--base-fonts);}
.user-info {display: block;min-height: inherit;}
.user-label::after {display: none;}
.user-label {border-radius: var(--border-r-8) var(--border-r-8) 0 0;}
.profile-title h1 {font-size: var(--text-20);}
.profile-title {margin-bottom: 15px;}
.medium-btn {font-size: var(--base-text); padding: 7px 12px}
.profile-title .medium-btn img {max-width: 18px;}
footer {padding: 25px 0;}
.footer-logo {max-width: 70px;}
.footer-block {border-bottom:1px solid var(--gray-nav); padding-bottom: 10px; margin-bottom: 20px;}
.footer-nav h3 {font-size: var(--text-18);}
.footer-nav li {margin-bottom: 10px; font-size: var(--text-14);}
.footer-nav h2 {font-size: var(--text-20);}
.copyright {margin-top:10px; font-size: var(--text-14);}
.header-search input.form-control {height: 40px;}
.header-search {gap: 10px;}
.header-search .nav-search-btn {width: 40px; height: 40px; min-width: 40px; min-height: 40px;}
.header-search .nav-search-btn img {max-width: 24px;}
.total-top {padding-bottom: 10px; margin-bottom: 10px;}
.profile-total-box {padding: 15px;}
.profile-card .card-title {margin-bottom: 10px;}
.profile-card .card-title, .total-top p {font-size: var(--text-17);}
.total-top p {font-size: var(--text-17);}
.card-box-row .box-label, .card-box-row .box-value, .total-box-row .total-label, .total-box-row .total-value, .download-link, .profile-card .service-list li, .remark-disc {font-size: var(--base-text);}
.profile-total-box {margin-bottom: 15px;}
.total-box-row {margin-bottom: 10px;}
.pd-left-row p {font-size: var(--base-text);}
.service-time {display: block;}
.service-time .status {margin-top: 10px;}
.order-detail-top .profile-total-box {margin: 15px 0 0;}
.od-img img {width: 80px; height: 80px;}
.od-details p {font-size: var(--base-text);}
.od-info {gap: 10px; flex-wrap: nowrap;}
.review-top h3 {font-size: var(--text-18);}
.review-disc p {font-size: var(--base-text);}
.review-star {font-size: var(--base-text); gap: 2px;}
.review-date {font-size: var(--text-14);}
.review-cell {padding-bottom: 15px; margin-bottom: 15px;}
.review-top {display: block; margin-bottom: 7px;}
.r-top-left {display: block;}
.inner-main {margin-top: 79px;}
.common-section {padding: 25px 0;}
.back-link p {font-size: var(--text-14);}
.back-btn {padding-bottom: 10px; margin-bottom: 10px;}
.cart-title p {font-size: var(--base-text);}
.cart-title {margin-bottom: 10px;}
.cart-row {padding: 10px; display: block;}
  .cart-thumb {
   margin-bottom: 10px;
   
  }
  .header-search input.form-control {min-width: inherit;}

  .cart-name {font-size: var(--base-text);}
    .cart-bottom .od-info {flex-wrap: wrap; gap: 5px;}
  .cart-bottom .od-info .od-label {font-size: var(--text-14);}
  .cart-bottom .od-info li {min-width: 48%;}
  .cart-product-info .cart-price {font-size: var(--text-18);}
  .lg-btn, .lg-btn-border {padding: 10px 20px; font-size: var(--base-text);}
  .inner-breadcrumb {padding: 10px 0;}
  .section-title .title {font-size: var(--text-22);}
  .section-title {margin-bottom: 15px;}
.service-card .card-title {font-size: var(--text-17);}
.service-card .card-body {padding-top: 10px; padding-bottom: 10px;}
.slider-thumb {padding: 10px;}
.slider-thumb .slick-slide {margin: 0 5px;}
.pd-section .section-title .title {font-size: var(--text-20);}
.detail-info-block .product-price, .detail-info-block .product-old-price {font-size: var(--text-18);}
.pd-right .review-star, .pd-section .section-title {margin-bottom: 10px;}
.detail-info-block {margin-bottom: 15px;}
.info-label {font-size: var(--base-text); display: block;}
.detail-radio {gap: 5px; flex-wrap: wrap;}
.detail-radio .icon-check .radio-label > .r-label {font-size: var(--base-text);}
.detail-social-block {gap: 10px; flex-wrap: wrap;}
.social-label {font-size: var(--base-text); width: 100%;}
.sub-title {font-size: var(--text-20); margin-bottom: 10px;}
.pd-discription p, .pm-info p {font-size: var(--base-text);}
.pd-discription {margin-bottom: 20px;}
.pd-middle-section, .pd-review-section {padding-bottom: 0;}
.pd-review-top {padding: 10px; margin-bottom: 10px;}
.pd-review-top p {font-size: var(--base-text);}
.title-link {font-size: var(--text-17);}
.sd-card .card-body, .sd-card .card-footer {padding:10px;}
.sd-card .price, .sd-card .price .old-price {font-size: var(--text-20);}
.detail-social-block a img {max-width: 30px;}
.craft-right p {font-size: var(--base-text); line-height: 20px; margin-bottom: 10px;}
.service-tabs .service-link {min-width: inherit; font-size: var(--text-18); padding: 7px 18px;}
.service-tabs {gap: 15px; margin-bottom: 20px;}
.infinite-btn {margin-top: 20px;}
.banner {padding: 25px 0;}
.banner-box {padding: 15px 15px;border-radius: var(--border-r-10);}
.banner-box h1 {font-size: var(--text-26);}
.banner-box h3 {font-size: var(--text-17); line-height: normal; margin-top: 15px;}
.banner-box p {font-size: var(--base-text); margin-top: 15px; line-height: normal; letter-spacing: normal;}
.banner-box .lg-btn {margin-top: 20px;}
.shop-banner {padding: 25px 15px; border-radius: var(--border-r-10); min-height: inherit;}
.section-title p {font-size: var(--base-text);}
.shop-card .shop-img {margin-bottom: 5px;}
.shop-card p {font-size: var(--base-text);}
.shop-card {margin-bottom: 15px;}
.sc-main {margin-top: 10px; margin-bottom: 15px;}
.hiw-card .card-img-top {margin-top: 0;}
.hiw-card .card-title {font-size: var(--text-17); margin: 10px 0;}
.h-100.hiw-card {height: auto !important; min-height: inherit;}
.choose-card-content {padding: 10px;}
.choose-card-content p {font-size: var(--text-14);}
.choose-card-info {min-height: inherit;}
.review-slider {padding: 0;}
.cr-card::after, .cr-card::before {width: 40px; height: 40px; background-size: 100% 100%;}
.cr-card {padding: 33px 15px 30px; min-height: inherit;}
.cr-card .card-title {font-size: var(--text-20);}
.cr-card .card-text {font-size: var(--base-text); line-height: 20px; margin-top: 10px;}
.review-slider .slick-next, .review-slider .slick-prev {display: none !important;}
.security-lft p {font-size: var(--text-14);}
.cost-box {max-width:100%; margin:15px 0 0;}
.cost-box h3 {font-size:18px;}
.cost-box .codt-row h5, .cost-box .codt-row h4 {font-size:16px;}
.cost-box .codt-row {margin-bottom:15px;}
}