body {font-family: 'Roboto', sans-serif;}
.user-panel { margin-bottom:30px; height:32px; overflow:hidden;}
.my-acc, .my-acc-login, .my-acc-register {float:right; background-color:#fdb000; padding:5px 10px; color:#fff; border-radius:0 0 5px 5px;}
.my-acc-login { margin-left: 5px; }
.my-acc:hover, .my-acc-login:hover, .my-acc-register:hover  {color:#fff;}
.user-page .row{ margin-bottom:40px; }
.loginmodal-container {  padding: 30px;  max-width: 350px;  width: 100% !important;  background-color: #F7F7F7;  margin: 0 auto;  border-radius: 2px;  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);  overflow: hidden;  font-family: roboto;}
.loginmodal-container h1 {  text-align: center;  font-size: 1.8em;  font-family: roboto;}
.loginmodal-container input[type=submit] {  width: 100%;  display: block;  margin-bottom: 10px;  position: relative;}
.loginmodal-container input[type=text], input[type=password] {  height: 44px;  font-size: 16px;  width: 100%;  margin-bottom: 10px;  -webkit-appearance: none;  background: #fff;  border: 1px solid #d9d9d9;  border-top: 1px solid #c0c0c0;  /* border-radius: 2px; */  padding: 0 8px;  box-sizing: border-box;  -moz-box-sizing: border-box;}
.loginmodal-container input[type=text]:hover, input[type=password]:hover {  border: 1px solid #b9b9b9;  border-top: 1px solid #a0a0a0;  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);}
.loginmodal-submit {display: block;line-height: 50px;background: #a0c03c;border: medium none;color: #ffffff;font-size: 17px;font-weight: 600;height: 50px;margin: 20px 0 0;padding: 0;text-transform: uppercase;transition: all 0.5s ease 0s;width: 100%;}
.user-page .loginmodal-container {margin: auto;}
.header {padding-top: 30px; margin-bottom: 30px;}
.header .top {border-bottom: 1px solid #ddd; padding-bottom: 10px;}
.header .logo img {max-width: 100%; max-height: 80px;}
.header .phone, .header .dropdown-langs {float: left;}
.header .phone {margin-right: 15px} 
.header .dropdown-langs button {background-color: transparent; border:0;}
.header .search {position: relative; display: inline-block; float: right;}
.header .search .field {background: #ededed none repeat scroll 0 0; border:0; border-radius: 5px; padding: 5px; min-width: 230px;}
.header .search a {color:#000; position: absolute; right:8px; top:5px;}
.header .shop-dropdown {list-style: none; margin: 0; margin-top: 20px; padding: 0;}
.header .shop-dropdown i {font-size: 30px; color:#b3d236;}
.header .shop-dropdown .badge {position: absolute; right: 0; top: -5px;}
.mainmenu nav { margin-left: -15px;}
.mainmenu li {  display: inline-block;  position: relative;}
.mainmenu ul li a {  color:#333;  display: block;    font-size: 17px;    font-weight: bold;    line-height: 20px;    padding: 10px 20px 10px 0;    text-transform: uppercase;}
.mainmenu ul li.active a{color:#fdb000}
.nav li a:focus, .nav li a:hover { background-color: #fff;}
.mainmenu ul li:hover a {color:#fdb000; text-decoration: none;}
.mainmenu ul li a  i{font-size:12px;}
.mainmenu ul li ul li {display: block;}
.mainmenu ul li ul li a{font-weight:400;    text-transform:capitalize;}
.mainmenu ul li ul li a { font-size: 15px;
    font-weight: 400;
    padding: 5px 17px;
    text-transform: capitalize;
    border-bottom: 1px solid;}
.mainmenu ul li .megamenu { background: #fff none repeat scroll 0 0;    box-shadow: 0 0 5px #888;    left: -295px;    opacity: 0;    padding: 30px 30px 40px;    position: absolute;    transform: scaleY(0);    transform-origin: 0 0 0;    transition: all 0.5s ease 0s;    visibility: hidden;    width: 865px;    z-index: 2147483647;}
.mainmenu ul li:hover .megamenu{opacity:1;visibility:visible;	transform:scaleY(1);}
.mainmenu ul li .megamenu span{	width:33.333%;	float:left;padding:0px 10px;}
.mainmenu ul li .megamenu span a {  padding: 4px 0;  background: none;  font-weight: 400;  font-size:12px;}
.mainmenu ul li .megamenu span a.mega-title {  border-bottom: 1px solid #ddd;  color: #393939;  font-weight: 600;  margin-bottom: 5px;}
.mainmenu ul li .megamenu{}
.mainmenu ul li .megamenu.megamenu1 {left: -395px;}
.mainmenu ul li .megamenu.megamenu2{left: -485px;}
nav .navbar-header .menu-text-xs {text-transform: uppercase;float: left;margin-top: 15px;margin-left: 15px;}
#home-slider {height: 600px; margin-bottom: 30px;}
#home-slider .item {background-size: 100%; background-repeat: no-repeat; height: 600px;}
#home-slider .item h3 { font-size:60px; font-family: 'Lobster Two', cursive; margin-top: 200px;}
#home-slider .item h3 a {color:#90815b;}
#home-slider .item h3 a:hover {text-decoration: none;}
#home-slider .item .description {color: #6d604c;font-size: 20px;line-height: 20px;margin-bottom: 20px;}
#home-slider .item .add-to-cart {color:#4c4c4c; border: 2px solid #6d604c;border-radius: 30px;display: inline-block;font-size: 18px;padding: 5px 25px;text-transform: uppercase;}
#home-slider .item .add-to-cart:hover {background-color:#98ab3f; border-color:#fdb000; color:#fff; text-decoration: none;}
.home-carousel .item img {max-height: 200px;margin: 0 auto;}
.carousel-control.left, .carousel-control.right {background-color: none; background-image: none;}
.carousel-control span { color:#fdb000;}
.home-banners .single-banner {width: 50%;overflow: hidden;}
.home-banners .single-banner a {display: block;position: relative;}
.home-banners .single-banner img {transform: scale(1);transition: all .5s; max-width: 100%;height: auto;}
.new-products {background-color: #f6f7fb; padding-top: 70px; padding-bottom: 70px;}
.new-products h3 {text-align: center; font-family: 'Lobster Two', cursive; font-size:32px; color:#4c4c4c; font-weight: bold;text-transform: capitalize;}
.new-products .carousel-inner h1 {font-size:18px; text-align: center; font-weight: bold;}
.new-products .carousel-inner a { color:#4c4c4c; text-decoration: none;}
.new-products .carousel-inner .price {display: block; text-align: center; color:#fdb000; font-weight: bold;}
.new-products .carousel-control i {color:#fdb000;}
.new-products .add-to-cart { display: block; width: 150px; margin: 0 auto; background: rgba(0, 0, 0, 0) none repeat scroll 0 0;border: 1px solid #e2dfdb;border-radius: 30px;color: #6d604c;font-size: 14px;font-weight: 700;padding: 11px 25px;text-transform: uppercase;transition: all .5s;}
.new-products .add-to-cart:hover {background-color:#fdb000; color:#fff;}
.blog-posts { padding-top: 70px; padding-bottom: 70px;}
.blog-posts h3 {text-align: center; font-family: 'Lobster Two', cursive; font-size:32px; color:#4c4c4c; font-weight: bold;text-transform: capitalize;}
.blog-posts .carousel-inner img {margin-bottom: 10px;}
.blog-posts .carousel-inner h1 {font-size:24px; text-align: center; font-family: 'Lobster Two', cursive; margin: 0; margin-bottom: 10px;}
.blog-posts .carousel-inner a { color:#4c4c4c; text-decoration: none;} 
.blog-posts .carousel-inner .description { color:#888888; text-decoration: none; text-align: center; font-size: 14px;} 
.blog-posts .carousel-inner .time {display: block; text-align: center;} 
.blog-posts .read-more {color: #6d604c;display: block; text-align: center; font-size: 14px;font-weight: 600;letter-spacing: 5px;padding-top: 20px;text-align: center;text-transform: uppercase;}
.shop-dropdown { list-style : none; margin : 0; padding : 0; }
.dropdown-cart { height : auto; max-height : 250px; overflow-x : hidden; width : 265px; padding: 10px; }
.shop-dropdown a.dropdown-toggle { color : #333; font-size : 13px; }
.shop-dropdown a.dropdown-toggle:hover { text-decoration : none; }
.dropdown-cart li .item { display : block; margin : 3px 0; }
.dropdown-cart li .item:hover { background-color : #f3f3f3; }
.dropdown-cart li .item:after { clear : both; content : " "; display : block; font-size : 0; height : 0; visibility : hidden; }
.dropdown-cart li .item-in { float : left; }
.dropdown-cart li .item-in img { height : 50px; width : 50px; }
.dropdown-cart li .item-in a.item-info span { font-size : 12px; }
.dropdown-cart li .item-in a.item-info .product-name { display: block; }
.dropdown-cart .go-checkout {background-color: #e3e3e3;border: 1px solid #e3e3e3;color: #333;font-size: 1.4rem;font-weight: 700;padding: 13px 15px;transition: all 0.5s ease-out 0s;width: 100%;text-transform: uppercase;border-radius: 25px;}
.dropdown-cart .go-checkout:hover { background-color: #fdb000; color:#fff; }
.dropdown-cart .item-x-absolute { position : absolute; right : 10px; }
.dropdown-cart li .item-in .left-side { float : left; width : 50px; }
.dropdown-cart li .item-in .right-side { border-bottom : 1px solid #f1f1f1; float : left; margin-left : 2px; width : 170px; }
.dropdown-cart .item-info .prices span { color : #fe3a3a; display : inline !important; }
.dropdown-cart .item-info .prices, ul.dropdown-cart .item-info .currency { color: #666; display: inline !important; font-size: 16px; font-weight: bold; }
#view-product h1 { margin: 0; padding: 0; text-transform: capitalize; color:#444444; font-size: 24px; margin-bottom: 10px;     font-weight: 800;}
#view-product .product-info {background-color: #f6f7fb; padding: 10px;}
#view-product .product-info .add-to-cart { display: inline-block;  margin-bottom: 5px; border: 1px solid #e2dfdb;    border-top-color: rgb(226, 223, 219);    border-right-color: rgb(226, 223, 219);    border-bottom-color: rgb(226, 223, 219);    border-left-color: rgb(226, 223, 219);border-radius: 30px;color: #6d604c;font-size: 14px;font-weight: 700;padding: 11px 25px;text-transform: uppercase;transition: all .5s;}
#view-product .manage-buttons { padding-top: 10px; padding-bottom: 10px;}
#view-product #description {background-color: #f6f7fb; padding: 10px;}
#view-product #description .header {background-color: #f4f4f4; margin-top: -10px; margin-left: -10px; margin-right: -10px; padding: 20px;}
#view-product #description .header .title { color:#fff; background-color: #A0C03C; padding: 20px; margin-left: -20px;}
#view-product .top-part { margin-bottom: 20px; }
.inner-nav {background-color: #f1f1f1; padding: 20px; margin-bottom: 30px;}
.inner-nav .active {color:#A0C03C;}
#modalImagePreview { background-color : rgb(0,0,0); background-color : rgba(0,0,0,0.9); display : none; height : 100%; left : 0; overflow : auto; padding-top : 100px; position : fixed; top : 0; width : 100%; z-index : 100; }
#modalImagePreview .modal-content { text-align: center; display : block; margin : auto; max-width : 700px; width : 80%; }
#modalImagePreview #caption { color : #ccc; display : block; height : 150px; margin : auto; max-width : 700px; padding : 10px 0; text-align : center; width : 80%; }
#modalImagePreview .modal-content, #modalImagePreview #caption { animation-duration : 0.6s; animation-name : zoom; webkit-animation-duration : 0.6s; webkit-animation-name : zoom; }
#modalImagePreview .close { opacity: 1; color : #f1f1f1; font-size : 40px; font-weight : bold; position : absolute; right : -10px; top : -40px; transition : 0.3s; }
#modalImagePreview .close:hover,#modalImagePreview .close:focus { color : #bbb; cursor : pointer; text-decoration : none; }
#modalImagePreview img {max-width: 100%;}
.other-images-container .active img {border:3px solid #b1b1b1;}
.img-series {    bottom: -17px;    color: #fff;    font-size: 14px;    position: absolute;    right: 0;}
.img-sl { cursor: pointer;}
.orders-from-category {margin-bottom: 20px;}
.orders-from-category h2 {color: #4c4c4c;font-size: 28px;font-weight: bold;text-transform: capitalize; font-family: 'Lobster Two', cursive; text-align: center;}
.product-inner h3 {text-transform: uppercase; text-align: center;  font-weight: bold;  padding-top: 5px;margin: 5px 0;  margin-bottom: 5px;display: block;font-size: 16px;}
.product-inner .price {display: block; text-align: center; color:#98ab3f; font-weight: bold;}
.product-inner .add-to-cart { display: block; width: 150px; margin: 0 auto; background: rgba(0, 0, 0, 0) none repeat scroll 0 0;border: 1px solid #e2dfdb;border-radius: 30px;color: #6d604c;font-size: 12px; text-align:center; font-weight: 700;padding: 11px 25px;text-transform: uppercase;transition: all .5s;}
.product-inner .add-to-cart:hover {background-color:#fdb000; color:#fff; text-decoration: none;}
#checkout-page { margin-bottom: 20px;}
#checkout-page #goOrder {background-color: #f6f7fb; padding: 10px;}
#checkout-page #goOrder .form-control { border:1px solid #ebebeb; border-radius: 0; box-shadow: none;}
#checkout-page #goOrder label {font-size: 12px; color:#444444;}
#checkout-page .go-order { display: block; line-height: 50px; background: #a0c03c;border: medium none;color: #ffffff;font-size: 17px;font-weight: 600;height: 50px;margin: 20px 0 0;padding: 0;text-transform: uppercase;transition: all 0.5s ease 0s;width: 100%;}
#checkout-page h4 {font-family: 'Lobster Two', cursive;color: #4c4c4c;font-size: 28px;font-weight: bold;text-transform: capitalize;}
.table-products img.product-image { width : 80px; } 
.relative {position: relative;}
.payment-type-box { border : 1px solid #ccc; margin : 20px 0; padding : 12px; position : relative; }
.payment-type-box .top-header { background-color : #f6f7fb; font-size : 14px; left : 50%; margin-left : -75px; padding-left : 5px; padding-right : 5px; position : absolute; top : -12px; width : 149px; }
.remove-product { left : 0; position : absolute; top : 0; }
.btn-green {background-color: #a0c03c; color:#fff;}
#shopping-cart { margin-bottom: 20px;}
.btn-black {background-color: #2f2f2f; color:#fff;}
.btn-black:hover {color:#f1f1f1;}
#contacts {margin-bottom: 20px;}
#contacts #map {margin-bottom: 30px; height: 400px;  width: 100%;}
#contacts .contact-details {background-color: #f4f4f4; padding: 20px;}
#contacts .contact-form {background-color: #f4f4f4; padding: 20px; }
#contacts .contact-form .form-control {width: 100%; box-shadow: none;  border-radius: 0; height: 35px;border: 1px solid #ebebeb;margin-bottom: 30px;padding-left: 10px;}
#contacts .contact-form label { font-size:12px; font-weight: normal; color:#444;}
.blog-list .caption { color : #666; }
.blog-list small span { margin-right : 7px; }
.blog-list small, .blog-list small a, .blog-preview-time { color : silver; }
.blog-list .caption h5 { font-size : 16px; }
.blog-list img { width : 100%; }
#blog .thumbnail { border-radius : 0; }
.blog-preview-time { display : inline-block; margin-bottom : 10px; }
.blog-description { color : #666; font-size : 13px; }
.blog-artchive { list-style : none; margin-bottom : 20px; padding-left : 0; }
.blog-artchive .item { background : transparent none repeat scroll 0 0; border-color : -moz-use-text-color -moz-use-text-color #ccc; border-image : none; border-style : none none dotted; border-width : 0 0 1px; moz-border-bottom-colors : none; moz-border-left-colors : none; moz-border-right-colors : none; moz-border-top-colors : none; padding : 10px 0px; padding-left : 10px; }
.blog-artchive .item a { color : #666; }
.blog-home-left-categ { margin-bottom : 20px; }
.blog-list .description {height: 125px;overflow: hidden;}
.blog-list h5 {height: 40px; overflow: hidden;}
.blog-list .img-container {height: 400px; overflow: hidden;}
#shop-page { margin-bottom: 20px; }
#shop-page .categories {border:1px solid #fdb000; border-radius: 5px;}
#shop-page .categories .body {padding: 10px;}
#shop-page .categories .title {background-color: #fdb000; padding: 10px; color:#fff; text-transform: uppercase;}
#shop-page .categories ul { list-style : none; padding : 0; margin:0; }
#shop-page .categories ul li, div.filter-sidebar ul li a { margin-bottom : 4px; }
#shop-page .categories ul li a { color : #6d6d6d; display : inline-block; font-size : 13px; }
#shop-page .categories ul li a.selected, div.filter-sidebar ul li a:hover { color : #1e88e5; }
#shop-page .product-inner .img-responsive {margin: 0 auto;}
#show-xs-nav { border : 1px solid #666; color : #666; font-size : 15px; padding : 3px; text-align : center; text-decoration : none; }
#show-xs-nav span i { margin-left : 5px; }
#shop-page .bootstrap-select > .dropdown-toggle.bs-placeholder, #shop-page .bootstrap-select > .dropdown-toggle.bs-placeholder:active, #shop-page .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, #shop-page .bootstrap-select > .dropdown-toggle.bs-placeholder:hover {color:#fff;}
#products-side h1 {font-family: 'Lobster Two', cursive; margin: 0; margin-bottom: 20px;}
.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover, .pagination > li > a, .pagination > li > span {color:#fdb000;}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {background-color: #fdb000; border:1px solid #fdb000; color:#fff;}
footer .footer {background-color: #181717;}
.footer p { margin : 0; }
.footer img { max-width : 100%; }
.footer h3 { border-bottom : 1px solid #fff; color: #fff; font-size : 18px; font-weight : 600; line-height : 27px; padding : 40px 0 10px; text-transform : uppercase; }
.footer ul { color : #fff; list-style-type : none; margin-left : 0; margin-top : 15px; padding-left : 0; }
.footer ul li a { display : block; padding : 0 0 5px 0; }
.footer a, .footer p { color : #fff; }
.footer p , .footer ul { font-size : 13px; }
.bg-yellow{
    background: #FFA500;
}
footer .footer-bottom { padding-top: 20px; padding-bottom: 20px; border-bottom: 2px solid #e5e5e5; }
#notificator { display : none; left : 50%; margin-left : -100px; padding : 15px 25px; position : fixed; text-align : center; top : 20px; width : 200px; z-index : 5000; }

@media (min-width: 992px) and (max-width: 1199px) { 
    #home-slider, #home-slider .item  {height: 500px;}
    #home-slider .item h3 {margin-top: 80px; font-size:38px;}
    #home-slider .item .description {font-size:18px;}
}

@media (min-width: 768px) and (max-width: 991px) { 
    #home-slider, #home-slider .item  {height: 400px;}
    #home-slider .item h3 {margin-top: 80px; font-size:32px;}
    #home-slider .item .description {font-size:16px;}
    #nav-categories, #show-xs-nav .hidde-sp { display : none; }
    .mainmenu ul li .megamenu { width: 600px; left:50%; margin-left: 0;}
}

@media (min-width: 991px) {
    #nav-categories { display : block !important; }
}

@media screen and (max-width: 767px) {
    #home-slider, #home-slider .item  {height: auto;}
    #home-slider .item h3 {margin-top: 0; font-size:20px;}
    #home-slider .item .description {font-size:14px;}
    #home-slider .item .add-to-cart {padding: 5px 15px; font-size:12px;}
    .header .search {float:none;}
    .header .phone, .header .dropdown-langs { float: none;}
    .header .dropdown-langs { margin-bottom: 10px;}
    .home-banners .single-banner { width:100%; margin-bottom: 10px;}
    .navbar-header { color:#ffffff;margin-left: 40px;        margin-right: -59px;
        margin-top: -57px;}
    .navbar-toggle span {background-color:#fff;}
    .mainmenu li {  padding-left: 60px;}
    .multi-item-carousel .item .col-xs-12:nth-child(2), .multi-item-carousel .item .col-xs-12:nth-child(3) {display: none;}
    .multi-item-carousel .item a .img-responsive { margin: 0 auto;}
    #nav-categories, #show-xs-nav .hidde-sp { display : none; }
    .social-media-product-share {margin-bottom: 20px;}
}

@media (max-width: 480px) { 
}
/* Header alignment */
.flex-align-center {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

/* Navbar overrides */
.custom-header .navbar-default {
    background: transparent;
    border: none;
    margin-bottom: 0;
}

.custom-header .navbar-nav > li > a {
    color: #000;
    font-weight: 500;
    padding: 15px 10px;
}

/* Search Bar styling */
.search-box-container .form-control {
    border-radius: 20px 0 0 20px;
    border: 1px solid #ddd;
    box-shadow: none;
}

.search-box-container .btn {
    border-radius: 0 20px 20px 0;
    background: #f1f1f1;
    border: 1px solid #ddd;
}

/* Right side icons */
.right-utility {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.login-link {
    color: #333;
    margin: 0 10px;
    font-weight: bold;
}

/* Signup Button like image */
.signup-btn {
    background-color: #FFA500; /* Orange color */
    color: white !important;
    border-radius: 8px;
    padding: 8px 20px;
    font-weight: bold;
    border: none;
}

.signup-btn:hover {
    background-color: #e69500;
}

/* Utility spacing */
.currency-selector, .flag-icon {
    cursor: pointer;
    font-size: 16px;
}

/* Home pge cars filter  */
/* Main Box */
.car-filter {
  background: #f5f5f5;
  padding: 30px;
  border-radius: 20px;
  max-width: 900px;
  margin: 50px auto;
}

/* Title */
.car-filter h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

/* Rows */
.filter-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

/* Inputs */
.filter-row select,
.filter-row input {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
  min-width: 150px;
}

/* Toggle text */
.toggle-filter {
  align-self: center;
  cursor: pointer;
  font-size: 14px;
}

/* Checkbox */
.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;

}
.checkbox input[type=checkbox]{
  position:relative ; 
}
/* Footer */
.filter-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.filter-footer a {
  text-decoration: none;
  color: #555;
  font-size: 14px;
}

/* Button */
.filter-footer button {
  background: #f5a300;
  border: none;
  padding: 12px 25px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

/* 📱 Mobile Responsive */
@media (max-width: 768px) {
  .car-filter {
      padding: 20px;
  }

  .car-filter h2 {
      font-size: 24px;
  }

  .filter-row {
      flex-direction: column;
  }

  .filter-footer {
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
  }

  .filter-footer button {
      width: 100%;
  }
}

/************END FILTER CARD SLIDER********************/
/* Slider Container */
.latest-offers-section {
    padding: 40px 0;
    overflow: hidden; /* Taake side arrows layout se bahar na jayen */
}

/* Image Styling */
.latest-offers-section .offer-item {
    margin: 0 10px; /* Padding ki jagah margin use karein conflict se bachne ke liye */
}

.latest-offers-section .offer-item img {
    width: 100%;
    border-radius: 15px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Custom Yellow Arrows */
.latest-offers-section .slick-prev, 
.latest-offers-section .slick-next {
    width: 40px !important;
    height: 40px !important;
    background-color: #FFB400 !important;
    border-radius: 50% !important;
    z-index: 5;
}

/* Arrow Icons Position */
.latest-offers-section .slick-prev { left: 10px !important; }
.latest-offers-section .slick-next { right: 10px !important; }

/* Arrow Icons Design */
.latest-offers-section .slick-prev:before, 
.latest-offers-section .slick-next:before {
    color: #000 !important; /* Arrow icon color */
    font-size: 24px !important;
    opacity: 1 !important;
}

/* Custom Rectangular Dots */
.latest-offers-section .slick-dots li {
    width: 25px !important;
    height: 6px !important;
}

.latest-offers-section .slick-dots li button {
    width: 25px !important;
    height: 6px !important;
    padding: 0 !important;
}

.latest-offers-section .slick-dots li button:before {
    content: '' !important;
    width: 25px !important;
    height: 6px !important;
    background: #ddd !important;
    border-radius: 3px !important;
    opacity: 1 !important;
}

.latest-offers-section .slick-dots li.slick-active button:before {
    background: #FFB400 !important; /* Active yellow color */
}

/* Container Background */
.latest-vehicles-slider-section {
    background-color: #000000;
    padding: 60px 0;
    overflow: hidden;
}

.latest-vehicles-slider-section .heading {
    color: #ffffff;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 35px;
}

/* Card Styling */
.latest-vehicles-slider-section .car-card {
    background-color: #2c2e33;
    border-radius: 12px;
    margin: 0 10px;
    overflow: hidden;
    border: none;
    transition: transform 0.3s ease;
}

.latest-vehicles-slider-section .car-card:hover {
    transform: translateY(-5px);
    text-decoration: none;
}

/* Image Fit */
.latest-vehicles-slider-section .card-img-container {
    height: 180px;
    overflow: hidden;
    background: #000;
}

.latest-vehicles-slider-section .card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Typography */
.latest-vehicles-slider-section .card-content { padding: 20px; }

.latest-vehicles-slider-section .car-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 15px 0;
    height: 45px;
    overflow: hidden;
}

/* Specs Grid */
.latest-vehicles-slider-section .car-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
}

.latest-vehicles-slider-section .spec-item {
    color: #b0b3b8;
    font-size: 12px;
    white-space: nowrap;
}

.latest-vehicles-slider-section .spec-item i {
    margin-right: 5px;
    color: #888;
}

/* Price Section */
.latest-vehicles-slider-section .price-section { text-align: right; }

.latest-vehicles-slider-section .price-label {
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    display: block;
}

.latest-vehicles-slider-section .price-value {
    color: #f39c12;
    font-size: 22px;
    font-weight: bold;
}

/* Slick Customization */
.latest-vehicles-slider-section .slick-dots li button:before { color: #fff !important; }
.latest-vehicles-slider-section .slick-prev:before, 
.latest-vehicles-slider-section .slick-next:before { font-size: 30px; color: #f39c12; }

/* Container Background */
.new-products {
    background-color: #000000;
    padding: 60px 0;
}

.new-products .heading {
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    font-family: sans-serif;
}

.new-products .see-more-btn {
    color: #f39c12;
    border: 1px solid #f39c12;
    padding: 6px 18px;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s;
}

.new-products .see-more-btn:hover {
    background-color: #f39c12;
    color: #fff;
}

/* Card Styling */
.new-products .product-box {
    margin-bottom: 25px;
}

.new-products .product-card {
    display: block;
    background-color: #2c2e33; /* Kobe grey color */
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    transition: transform 0.3s ease;
    border: none;
}

.new-products .product-card:hover {
    transform: translateY(-5px);
}

/* Image Container */
.new-products .card-img-container {
    height: 180px;
    overflow: hidden;
    background: #000;
}

.new-products .card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Image stretch nahi hogi */
}

/* Content Area */
.new-products .product-content {
    padding: 15px;
}

.new-products .product-content h4 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    height: 40px; /* Title height consistent rakhta hai */
    overflow: hidden;
}

/* Specs Styling */
.new-products .car-specs {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns like image */
    gap: 8px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
}

.new-products .car-specs span {
    color: #b0b3b8;
    font-size: 11px;
    display: flex;
    align-items: center;
}

.new-products .car-specs i {
    margin-right: 6px;
    color: #888;
    width: 14px;
}

/* Price Area */
.new-products .price-box {
    text-align: right;
}

.new-products .price-box small {
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    display: block;
}

.new-products .price-box .price {
    color: #f39c12; /* Kobe orange/yellow color */
    font-size: 20px;
    font-weight: bold;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .new-products .card-img-container {
        height: 220px; /* Mobile par bari image */
    }
    .new-products .product-box {
        padding: 0 10px;
    }
}

/* section */
.about-section {
  padding: 70px 0;
  background: #17191C;
}

/* image wrapper */
.image-wrapper {
  position: relative;
  width: 100%;
}

/* main image */
.img-main {
  width: 100%;
  border-radius: 15px;
  transition: 0.4s;
}

/* overlay image (bottom corner) */
.img-overlay {
  position: absolute;
  width: 55%;
  bottom: -30px;
  right: -20px;
  border-radius: 15px;
  border: 4px solid #E6E0D4;
  transition: 0.4s;
}

/* hover zoom */
.image-wrapper img:hover {
  transform: scale(1.05);
}

/* text content */
.about-content {
  color: #fff;
  padding-left: 20px;
}

.about-content h2 {
  color: #E6E0D4;
  margin-bottom: 15px;
}

.about-content p {
  color: #ccc;
  margin-bottom: 15px;
}

.about-content ul {
  list-style: none;
  padding: 0;
}

.about-content ul li {
  margin-bottom: 8px;
  color: #E6E0D4;
}

/* Section Background */
.top-brands-section {
    padding: 60px 0;
    background-color: #f9f9f9;
}

/* Intro Text Styling */
.top-brands-section .brand-heading {
    font-size: 32px;
    font-weight: bold;
    color: #000;
    margin-bottom: 15px;
}

.top-brands-section .brand-subtext {
    color: #666;
    margin-bottom: 25px;
    font-size: 14px;
}

.top-brands-section .brand-view-btn {
    display: inline-block;
    background-color: #ffb400; /* Yellow Theme */
    color: #000;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}

/* Slider Card Styling */
.top-brands-section .brand-card-item {
    padding: 10px; /* Space between logos */
}

.top-brands-section .brand-inner-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
    padding: 30px 15px;
    text-align: center;
    transition: 0.3s ease-in-out;
    height: 180px; /* Fixed height for alignment */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.top-brands-section .brand-inner-box:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

.top-brands-section .brand-inner-box img {
    max-width: 80px;
    height: auto;
    margin-bottom: 15px;
    filter: grayscale(100%); /* Optional: Grayscale effect */
    transition: 0.3s;
}

.top-brands-section .brand-inner-box:hover img {
    filter: grayscale(0%);
}

.top-brands-section .brand-name {
    display: block;
    font-weight: 600;
    color: #333;
}



/*services section*/
/* section */
.services-section {
  background: #17191C;
  padding: 60px 0;
}

/* title */
.section-title {
  text-align: center;
  color: #E6E0D4;
  margin-bottom: 40px;
  font-size: 28px;
}

/* service box */
.service-box {
  background: #1f2226;
  color: #ffffff;
  padding: 25px;
  border-radius: 15px;
  margin-bottom: 25px;
  transition: 0.3s;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  border: 1px solid transparent;
}

/* heading */
.service-box h4 {
  color: #E6E0D4;
  margin-bottom: 10px;
}

/* text */
.service-box p {
  color: #ccc;
  font-size: 14px;
}

/* hover effect */
.service-box:hover {
  transform: translateY(-5px);
  border: 1px solid #E63232;
  box-shadow: 0 10px 25px rgba(230,50,50,0.3);
}

/* responsive spacing */
@media (max-width: 768px) {
  .service-box {
    text-align: center;
  }
}

/* section */
.reviews-section {
  box-shadow: 0 10px 25px rgb(7 7 7 / 30%);
  padding: 60px 0;
  
}

/* title */
.section-titles {
  text-align: center;
  color: #17191C;
  margin-bottom: 40px;
  font-weight: 800;
}

/* image background */
.review-img {
  height: 300px; /* MUST */
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
}

/* overlay content (half bottom) */
.review-content {
  background: rgba(18, 17, 18, 0.7);
  color: #fff;
  width: 100%;
  padding: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* text */
.review-content p {
  font-size: 14px;
  margin-bottom: 5px;
}

.review-content h5 {
  color: #E63232;
  font-size: 13px;
}

/* hover effect */
.review-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.6);
}



.review-card.show {
  opacity: 1;
  transform: translateY(0);
}



.faq {
    max-width: 1170px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .faq input {
    display: none;
  }
  
  .faq label {
    display: block;
    background: #17191C;
    color: #E6E0D4;
    margin-bottom: 10px;
    padding: 15px 20px;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
  }
  
  .faq label:hover {
    background: #fdb000;
  }
  
  .faq-heading {
    font-size: 16px;
    margin: 0;
    font-weight: 600;
  }
  
  .faq-text {
    font-size: 14px;
    color: #E6E0D4;
    margin-top: 10px;
    line-height: 1.6;
    display: none;
  }
  
  .faq input:checked + label .faq-text {
    display: block;
  }
  
  .faq-arrow {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #E6E0D4;
    border-bottom: 2px solid #E6E0D4;
    transform: rotate(45deg);
    transition: 0.3s;
  }
  
  .faq input:checked + label .faq-arrow {
    transform: rotate(-135deg);
  }
  
  /* ✅ Mobile Responsive */
  @media (max-width: 768px) {
    .faq {
      padding: 10px;
    }
  
    .faq label {
      padding: 12px 15px;
    }
  
    .faq-heading {
      font-size: 14px;
    }
  
    .faq-text {
      font-size: 13px;
    }
  
    .faq-arrow {
      right: 15px;
      top: 18px;
    }
  }
  
  /* ✅ Extra Small Devices */
  @media (max-width: 480px) {
    .faq-heading {
      font-size: 13px;
    }
  
    .faq-text {
      font-size: 12px;
    }
  
    .faq label {
      padding: 10px 12px;
    }
  }
  /*  Product view page*/
  
/* Sidebar Main Container */
.product-sidebar-card {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
}

/* Title Styling */
.main-product-title {
    font-size: 19px;
    font-weight: 700;
    color: #222;
    padding: 15px 20px;
    margin: 0;
    border-bottom: 1px solid #f5f5f5;
    background: #fafafa;
}

/* Price Section Padding */
.price-container {
    padding: 20px;
}

/* Price Flexbox (Total Price & Yellow Box) */
.price-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-price-label {
    font-size: 20px;
    font-weight: 800;
    color: #000;
}

.yellow-price-box {
    background-color: #f1c40f; /* Screenshot Yellow */
    padding: 8px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    font-weight: 800;
}

.yellow-price-box i {
    font-size: 16px;
    margin-right: 10px;
    transform: rotate(90deg); /* Tag icon angle */
}

.price-amount {
    font-size: 20px;
}

/* Small Subtexts */
.shipping-info-text {
    text-align: right;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    margin-bottom: 20px;
}

/* Detail Rows (Vehicle Price, Category etc) */
.vehicle-detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}

.detail-label {
    font-weight: 700;
    color: #444;
}

.orange-text {
    color: #e67e22; /* Vehicle price color */
}

.strikethrough {
    text-decoration: line-through;
    color: #999;
}

/* Category Badge */
.category-badge {
    background: #ebf5ff;
    color: #2980b9;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.category-badge:hover {
    background: #2980b9;
    color: #fff;
}

/* Helpers */
.divider-line {
    border-top: 1px solid #eee;
    margin: 15px 0;
}

.align-center {
    align-items: center;
}

.quote-card {
  background: #fff;
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 0 15px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;
  max-width: 450px;
}

.quote-card h4 {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 20px;
}

.quote-card label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 5px;
  display: block;
}

.custom-input {
  border-radius: 10px !important;
  border: 1px solid #dce0e4 !important;
  padding: 10px 15px !important;
  font-size: 14px;
}

.btn-inquiry {
  background-color: #fce3a1; /* Light yellow from image */
  color: #8a7a50;
  font-weight: bold;
  border: none;
  padding: 12px 60px;
  border-radius: 12px;
  width: 100%;
  transition: 0.3s;
}

.btn-inquiry:hover {
  background-color: #fbd678;
  color: #000;
}
.product-card-horizontal {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.product-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-top: 0;
}

.product-specs {
  margin: 10px 0;
  color: #777;
  font-size: 13px;
}

.product-specs span {
  margin-right: 15px;
}

.stock-tag {
  background: #fff3cd;
  border: 1px solid #ffeeba;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 10px;
}

.status-reserved {
  color: #f39c12;
  font-weight: bold;
  margin: 15px 0;
  text-align: center;
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.btn-request-similar {
  background: #f1c40f;
  color: #000;
  font-weight: bold;
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: 25px;
  text-decoration: none;
  transition: 0.3s;
}

.btn-request-similar:hover {
  background: #d4ac0d;
  color: #000;
}

.wishlist-icon {
  float: right;
  font-size: 20px;
  color: #ccc;
}

.price-text {
  font-size: 20px;
  font-weight: bold;
  color: #e74c3c;
  display: block;
  margin-bottom: 5px;
}
/* SHOP WHATSAPP BUTTON */
.btn-whatsapp-inquiry {
  background-color: #25D366; /* WhatsApp Green */
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 50px; /* Pill shape like your design */
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
  width: 100%;
}

.btn-whatsapp-inquiry:hover {
  background-color: #128C7E;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3);
  color: #fff;
}

.btn-whatsapp-inquiry i {
  font-size: 20px;
  margin-right: 10px;
}

/* Horizontal Card Mobile Fix */
@media (max-width: 767px) {
  .product-card-horizontal {
      text-align: center;
  }
  .btn-whatsapp-inquiry {
      margin: 0 auto;
  }
}


.whatsapp-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start; /* Alignment left ya center kar sakte hain */
}

.custom-whatsapp-btn {
    display: flex;
    align-items: center;
    background-color: #25d366; /* WhatsApp Green */
    color: white !important;
    text-decoration: none !important;
    padding: 5px 25px 5px 5px; /* Right side padding for spacing */
    border-radius: 50px; /* Pill shape */
    font-family: Arial, sans-serif;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.custom-whatsapp-btn:hover {
    transform: scale(1.02);
    background-color: #20ba5a;
}

.wa-icon-box {
    background-color: transparent;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.wa-icon-box i {
    font-size: 45px; /* Bada icon jaisa image mein hai */
}

.wa-text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wa-top-text {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.wa-bottom-text {
    font-size: 26px; /* Bada font 'CLICK HERE' ke liye */
    font-weight: 900;
    line-height: 1;
    margin-top: -2px;
}

/* Mobile responsive handling */
@media (max-width: 480px) {
    .wa-bottom-text {
        font-size: 20px;
    }
    .wa-top-text {
        font-size: 9px;
    }
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 5px; /* space between icon and text */
  background-color: #25D366;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}

.btn-whatsapp i {
  font-size: 18px;
}

.btn-whatsapp:hover {
  background-color: #1ebe5d;
  text-decoration: none;
}

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: white;
  font-size: 20px;          /* Large button text */
  padding: 15px 25px;       /* Large button padding */
  border-radius: 50px;       /* Rounded pill shape */
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;                 /* Space between icon and text */
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 9999;             /* Always on top */
  transition: transform 0.2s, background-color 0.2s;
}

.whatsapp-float i {
  font-size: 28px;           /* Larger WhatsApp icon */
}

.whatsapp-float:hover {
  background-color: #1ebe5d;
  transform: scale(1.05);    /* Slight pop effect on hover */
}


/* ===== REMINDER BOX ===== */
.reminder-box {
  background: #fff;
  border-left: 5px solid #fdb000; /* Red accent line */
  padding: 20px 25px;
  margin-top: 25px;
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: 0.3s ease;
  font-family: Arial, sans-serif;
}

/* Hover effect */
.reminder-box:hover {
  box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

/* Header */
.reminder-box h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #222;
  position: relative;
}

/* Red underline under header */
.reminder-box h2::after {
  content: "";
  width: 100px;
  height: 3px;
  background: #fdb000;
  position: absolute;
  left: 0;
  bottom: -5px;
  border-radius: 2px;
}

/* List style */
.reminder-list {
  padding-left: 20px;
  margin: 0;
}

.reminder-list li {
  margin-bottom: 12px;
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  position: relative;
  padding-left: 25px;
}

/* Number style */
.reminder-list li::marker {
  color: #fdb000;
  font-weight: bold;
  font-size: 16px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .reminder-box {
      padding: 15px 20px;
  }

  .reminder-box h2 {
      font-size: 18px;
  }

  .reminder-list li {
      font-size: 14px;
      padding-left: 20px;
  }
}
/* ===== PROFORMA INVOICE SECTION ===== */
.proforma-section {
  background: #fff;
  padding: 30px 25px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  margin-top: 30px;
  font-family: Arial, sans-serif;
}

/* Header */
.proforma-section h2 {
  font-size: 24px;
  font-weight: 700;
  color: #222;
  margin-bottom: 25px;
  position: relative;
}

.proforma-section h2::after {
  content: "";
  width: 60px;
  height: 3px;
  background: #fdb000;
  position: absolute;
  left: 0;
  bottom: -5px;
  border-radius: 2px;
}

/* Steps Container */
.proforma-steps {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

/* Each Step */
.step {
  flex: 1 1 22%;
  background: #f9f9f9;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: 0.3s;
  position: relative;
  min-width: 220px;
}

.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Step Icon */
.step-icon {
  font-size: 40px;
  background: #fdb000;
  color: #fff;
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  margin: 0 auto 15px auto;
}

/* Step Number */
.step-number {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #fdb000;
  margin-bottom: 10px;
}

/* Step Text */
.step p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .proforma-steps {
      gap: 15px;
  }

  .step {
      flex: 1 1 45%;
  }
}

@media (max-width: 576px) {
  .step {
      flex: 1 1 100%;
  }

  .step-icon {
      font-size: 35px;
      width: 60px;
      height: 60px;
      line-height: 60px;
  }

  .step-number {
      font-size: 18px;
  }

  .step p {
      font-size: 14px;
  }
}/* ===== ORDERS FROM CATEGORY SECTION ===== */
.orders-from-category-section {
  background: #111;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  margin-top: 30px;
  color: #fff;
  font-family: Arial, sans-serif;
}

.orders-from-category-section h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 25px;
  position: relative;
}
.orders-from-category-section h2::after {
  content: "";
  width: 60px;
  height: 3px;
  background: #fdb000;
  position: absolute;
  left: 0;
  bottom: -5px;
  border-radius: 2px;
}

/* Products Grid */
.products-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}



.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.3);
}

.product-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}



.product-price {
  font-size: 16px;
  font-weight: 700;
  color: #fdb000;
  display: block;
  margin-bottom: 5px;
}

.product-old-price {
  font-size: 14px;
  color: #999;
  
  display: block;
  margin-bottom: 5px;
}

.product-stock {
  font-size: 14px;
  color: #fff;
  display: block;
  margin-bottom: 12px;
}
/* DESCRIPTION CONTAINER */
#description {
  background: #ffffff;
  padding: 20px;
  margin-top: 25px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}

/* HOVER EFFECT */
#description:hover {
  box-shadow: 0 12px 35px rgba(0,0,0,0.12);
}

/* HEADER BAR */
#description .header {
  border-bottom: 2px solid #f1f1f1;
  margin-bottom: 15px;
  padding-bottom: 8px;
}

/* TITLE STYLE */
#description .title {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  position: relative;
}

/* RED LINE UNDER TITLE 🔥 */
#description .title::after {
  content: "";
  width: 50px;
  height: 3px;

  position: absolute;
  left: 0;
  bottom: -5px;
}

/* DESCRIPTION TEXT */
#description p {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
}

/* MOBILE */
@media (max-width: 768px) {
  #description {
      padding: 15px;
  }

  #description .title {
      font-size: 18px;
  }

  #description p {
      font-size: 14px;
  }
}

.main-des{
  font-size: 17px;
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.main-titles{
  font-size: 35px;
}

.blog-full-wrapper {
    background-color: #f7f7f7;
    width: 100%;
    padding: 40px 0;
    display: block;
}

/* Card Container */
.calculator-card {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  max-width: 900px;
  margin: 20px auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.calc-title {
  font-weight: 700;
  margin-bottom: 25px;
  color: #000;
}

/* Inputs & Labels */
.form-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

.custom-input {
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 10px 15px;
}

/* Shipping Method Toggle */
.shipping-toggle {
  background: #f1f3f5;
  border-radius: 10px;
  padding: 5px;
  display: flex;
}

.btn-shipping {
  border: none;
  padding: 8px 25px;
  border-radius: 8px;
  font-weight: 600;
  transition: 0.3s;
}

.btn-shipping.active {
  background-color: #FFB400; /* Yellow Theme */
  color: #000;
}

/* Custom Switch/Toggles */
.custom-switch .form-check-input {
  width: 45px;
  height: 22px;
  cursor: pointer;
}

.custom-switch .form-check-input:checked {
  background-color: #FFB400;
  border-color: #FFB400;
}

/* Custom Radio Buttons */
.custom-radio .form-check-input:checked {
  background-color: #FFB400;
  border-color: #FFB400;
  box-shadow: 0 0 0 0.25rem rgba(255, 180, 0, 0.25);
}

.custom-radio label {
  font-weight: bold;
  font-size: 14px;
}

/* Buttons */
.divider {
  border-top: 1px solid #eee;
  margin: 20px 0;
}

.btn-reset {
  background: #e0e0e0;
  border: none;
  padding: 8px 20px;
  border-radius: 5px;
  font-weight: 600;
}

.btn-calculate {
  background-color: #FFB400;
  border: none;
  padding: 10px 40px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(255, 180, 0, 0.3);
}

.btn-calculate:hover {
  background-color: #e6a200;
}
/* left side blog page css*/
.filter-sidebar {
  width: 370px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  font-family: sans-serif;
}

.filter-header h5 {
  font-weight: bold;
  color: #333;
  background: #f0f0f0;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.filter-group {
  margin-bottom: 15px;
}

.filter-group label {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.filter-input {
  border-radius: 8px;
  border: 1px solid #dce0e4;
  font-size: 14px;
  color: #555;
  padding: 8px;
}

/* Tags Styling */
.selected-tag {
  background: #fff;
  border: 1px solid #dce0e4;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  font-weight: 600;
}

.remove-tag {
  color: #ccc;
  cursor: pointer;
  font-size: 18px;
}

/* Transmission Pills */
.btn-pill {
  background: #e9ecef;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 12px;
  color: #495057;
}

.btn-pill.active {
  background: #dee2e6;
  font-weight: bold;
}

/* Clearance Badge */
.badge-clearance {
  background: #c88d00;
  color: white;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

/* Action Buttons */
.btn-apply {
  background: #ffcc00;
  border: none;
  font-weight: bold;
  padding: 10px;
  border-radius: 8px;
}

.btn-clear-all {
  background: #dce0e4;
  border: none;
  font-weight: bold;
  padding: 10px;
  border-radius: 8px;
}
.justify-content-end{
  display: flex;
}
.round-flex{
    display: flex;
}
.mb-2{
    display: flex;
}


/*Blog page*/
/* Card Container */
.blog-list-horizontal {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: 0.3s;
}

.blog-list-horizontal:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Image Styling */
.blog-list-horizontal .img-container img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* Image ko stretch hone se bachayega */
}

/* Content Styling */
.caption-content {
  padding: 15px 20px;
  position: relative;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-section .title {
  font-weight: bold;
  color: #333;
  margin-top: 0;
}

.bookmark-icon {
  font-size: 20px;
  color: #999;
  cursor: pointer;
}

/* Icons and Specs like the image */
.meta-info {
  margin: 10px 0;
  color: #666;
  font-size: 13px;
}

.meta-info span {
  margin-right: 15px;
}

.description {
  color: #777;
  font-size: 14px;
  line-height: 1.6;
}

/* Button style like "Request Similar" */
.btn-request {
  background-color: #FFB400; /* Yellow/Orange color from image */
  color: #000;
  font-weight: bold;
  border-radius: 25px;
  padding: 10px 25px;
  margin-top: 10px;
  display: inline-block;
  transition: 0.3s;
}

.btn-request:hover {
  background-color: #e6a200;
  color: #fff;
}
/* Card Container */
.calculator-card {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  max-width: 900px;
  margin: 20px auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.calc-title {
  font-weight: 700;
  margin-bottom: 25px;
  color: #000;
}

/* Inputs & Labels */
.form-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

.custom-input {
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 10px 15px;
}

/* Shipping Method Toggle */
.shipping-toggle {
  background: #f1f3f5;
  border-radius: 10px;
  padding: 5px;
  display: flex;
}

.btn-shipping {
  border: none;
  padding: 8px 25px;
  border-radius: 8px;
  font-weight: 600;
  transition: 0.3s;
}

.btn-shipping.active {
  background-color: #FFB400; /* Yellow Theme */
  color: #000;
}

/* Custom Switch/Toggles */
.custom-switch .form-check-input {
  width: 45px;
  height: 22px;
  cursor: pointer;
}

.custom-switch .form-check-input:checked {
  background-color: #FFB400;
  border-color: #FFB400;
}

/* Custom Radio Buttons */
.custom-radio .form-check-input:checked {
  background-color: #FFB400;
  border-color: #FFB400;
  box-shadow: 0 0 0 0.25rem rgba(255, 180, 0, 0.25);
}

.custom-radio label {
  font-weight: bold;
  font-size: 14px;
}

/* Buttons */
.divider {
  border-top: 1px solid #eee;
  margin: 20px 0;
}

.btn-reset {
  background: #e0e0e0;
  border: none;
  padding: 8px 20px;
  border-radius: 5px;
  font-weight: 600;
}

.btn-calculate {
  background-color: #FFB400;
  border: none;
  padding: 10px 40px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(255, 180, 0, 0.3);
}

.btn-calculate:hover {
  background-color: #e6a200;
}
/* left side blog page css*/
.filter-sidebar {
  width: 370px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  font-family: sans-serif;
}

.filter-header h5 {
  font-weight: bold;
  color: #333;
  background: #f0f0f0;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.filter-group {
  margin-bottom: 15px;
}

.filter-group label {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.filter-input {
  border-radius: 8px;
  border: 1px solid #dce0e4;
  font-size: 14px;
  color: #555;
  padding: 8px;
}

/* Icons and Specs like the image */
.meta-info {
  margin: 10px 0;
  color: #666;
  font-size: 13px;
}

.meta-info span {
  margin-right: 15px;
}


.stock-tag {
    background: #fff3cd;
    color: #856404;
    padding: 2px 10px;
    display: inline-block;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.status-reserved {
    color: #f39c12;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-reserved .dot {
    height: 8px;
    width: 8px;
    background-color: #f39c12;
    border-radius: 50%;
}

.status-subtext {
    font-size: 0.85rem;
    color: #888;
    margin-top: 5px;
}

.price-section {
    margin: 20px 0;
    text-align: right;
}

.price-item {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
}

.price-label {
    font-weight: 700;
    font-size: 0.8rem;
    color: #444;
}

.price-value.grey { color: #555; font-size: 1.1rem; }
.price-value.red { color: #e74c3c; font-size: 1.4rem; font-weight: 800; }

.btn-whatsapp-inquiry {
    background: #ffc107;
    color: #000;
    text-decoration: none;
    padding: 12px 25px;
    border-radius: 8px;
    display: block;
    text-align: center;
    font-weight: 700;
    transition: 0.3s;
}

.btn-whatsapp-inquiry:hover {
    background: #e0a800;
    color: #000;
}
.main-head{
  display:flex;
}
.main-head .text-center{
  margin-left: 78%;
    margin-top: -17px;
    padding: 20px;
}
.main-head .see-more-btn{
  color: #fff;
  font-size: 17px;
  margin-bottom: 20px;
}
.see-more{
    color: #fff;
    font-size: 17px;
    margin-bottom: 20px;
    font-weight: 700;
}
@media (max-width: 767px) {
    /* Header row ko flexbox mein convert karna */
    .header.row {
        display: flex !important;
        align-items: center; /* Vertical centering */
        justify-content: space-between; /* Horizontal spacing */
        flex-wrap: nowrap; /* Elements ko next line par jane se rokna */
        padding: 10px 5px;
        margin: 0;
    }

    /* Logo ka size chota karna taake jagah bane */
    .logo img {
        max-height: 35px;
        width: auto;
        display: block;
        margin: 0 auto;
    }

    /* Menu, Logo, aur Right side ke containers ki width set karna */
    .header > div[class*="col-xs-"] {
        float: none !important; /* Float hatana flexbox ke liye zaroori hai */
        padding: 0 5px;
    }

    /* Right side selectors (Currency/Lang) ko ek line mein lana */
    .top {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
    }

    /* फालतू items ko hide karna jo mobile header ko kharab kar sakte hain */
    .phone, #bigger-search {
        display: none !important;
    }

    /* Dropdown icons aur text styling */
    .dropdown-langs img {
        width: 20px;
        height: auto;
    }
    .my-acc-login {
   display: none;
}
.my-acc, .my-acc-login, .my-acc-register {
    display: none;
}
.header .top {
         border-bottom: none
}
}

/* Navbar Toggle Button aur uski Bars ko white karne ke liye */
.navbar-toggle {
    border-color: #000 !important; /* Button ka outer border white */
}

.navbar-toggle .icon-bar {
    background-color: #000 !important; /* Teeno horizontal lines white */
}

/* Hover ya Focus par bhi white rakhne ke liye (Optional) */
.navbar-toggle:hover, 
.navbar-toggle:focus {
    background-color: transparent !important;
    border-color: #000 !important;
}

@media (max-width: 767px) {
    /* Har column ko full width (100%) dena */
    footer .f-col {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
        margin-bottom: 30px; /* Thoda gap dene ke liye */
    }

    /* Newsletter box aur social icons ko center karna */
    footer .newsletter-box, 
    footer .social, 
    footer .footer-icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    /* List items se bullets/padding hatana center karne ke liye */
    footer ul {
        padding: 0 !important;
        list-style: none;
    }

    /* Contact icons ko text ke sath align karna */
    footer .footer-icon li span {
        float: none !important;
        display: inline-block;
    }

    /* Payment icons ko center karna */
    footer .footer-bottom .pull-right {
        float: none !important;
        text-align: center;
        width: 100%;
    }
    
    footer .payments {
        display: inline-flex;
        float: none;
    }
}

/* Hero Section */
.hero {
    background: linear-gradient(#ffb40096, #ffb40096), url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&q=80&w=1500') no-repeat center center/cover;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    text-transform: uppercase;
    font-weight: 800;
}
.hero p{
  font-size: 2rem;
}

.about-section-company {
    background: white;
    padding: 2rem;
    margin-bottom: 2rem;
    border-left: 5px solid #fdb000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Table Styling */
.profile-table {
    background: white;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px #fdb000;
}

.profile-table h3 {
    margin-bottom: 1rem;
    color: #fdb000;
}

.profile-table table {
    width: 100%;
    border-collapse: collapse;
}

.profile-table th, td {
    text-align: left;
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

.profile-table th {
    background-color: #f8f8f8;
    width: 30%;
    color: #555;
}

/* Cards Section */
.vision-mission {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.card {
    background: #fdb000;
    color: white;
    padding: 2rem;
    border-radius: 5px;
    text-align: center;
}

.card h3 {
    margin-bottom: 10px;
    color: #000;
    font-weight: 800;
}

/* Container layout */
.info-section {

   
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 0px 20px;
    justify-content: center;
    background-color: #fcfcfc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Individual Card Styling */
.info-section .card {
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* Soft depth */
    flex: 1;
    min-width: 300px;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Image/Header area */
.info-section .card-header img {
    width: 100%;
    height: auto;
    display: block;
}

/* Text area */
.info-section .card-body {
    padding: 30px;
    color: #555;
    line-height: 1.7;
    font-size: 16px;
}

/* Bold highlights */
.info-section .card-body strong {
    color: #222;
    font-weight: 700;
}

/* Spacing between paragraphs in the Mission card */
.info-section .card-body p + p {
    margin-top: 15px;
}

/* Responsive: Stacks on mobile, Side-by-side on desktop */
@media (max-width: 768px) {
    .info-section {
        flex-direction: column;
        align-items: center;
    }
    
 .info-section    .card {
        width: 100%;
    }
}

/* The Main White Card */
        .contact-card {
            background-color: #fff;
            width: 90%;
            
            padding: 80px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 8px; /* Optional slight rounding */
            display: flex; /* Key for layout */
            gap: 40px; /* Space between text and image sections */
        }

        /* Title Area */
        .title-section {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 30px;
        }

        .flag-icon {
            width: 40px; /* Adjust size */
            height: auto;
        }

        h2.main-title {
            margin: 0;
            font-size: 24px;
            font-weight: bold;
        }

        /* Left Side (Text Info) */
        .info-section {
            flex: 1; /* Takes up left space */
        }

        .info-group {
            margin-bottom: 20px;
        }

        .label {
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }

        .details {
            margin: 0;
            line-height: 1.5;
            color: #555;
        }

        .info-group a {
            color: #555;
            text-decoration: none;
        }

        .info-group a:hover {
            text-decoration: underline;
        }

        /* Right Side (Images) */
        .image-section {
            flex: 1; /* Takes up right space */
            display: flex;
            flex-direction: column;
            gap: 15px; /* Spacing between image rows */
        }

        .large-image {
            width: 100%;
            height: auto;
            border-radius: 4px;
        }

        .small-images-row {
            display: flex;
            gap: 15px;
        }

        .small-image {
            flex: 1; /* Each small image takes half width */
            width: 100%;
            height: auto;
            border-radius: 4px;
        }

        /* Special WhatsApp Section */
        .whatsapp-section {
            margin-top: 30px;
            border-top: 1px solid #eee; /* Light divider */
            padding-top: 20px;
        }

        .whatsapp-button {
            background-color: #25D366; /* Official WhatsApp Green */
            color: #fff;
            padding: 12px 24px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: background-color 0.2s;
        }

        .whatsapp-button:hover {
            background-color: #1ebe57; /* Darker green on hover */
        }

        .whatsapp-icon {
            width: 24px;
            height: auto;
        }

        /* Responsive Mobile Layout */
        @media (max-width: 768px) {
            .contact-card {
                flex-direction: column; /* Stack vertically on mobile */
                padding: 20px;
            }

            .image-section {
                order: -1; /* Place image on top when stacked */
            }
        }
/* Container & Resets */
.page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* Breadcrumbs */
.breadcrumb-bar {
    background-color: #f8f9fa;
    padding: 10px 15px;
    margin-bottom: 20px;
}
.breadcrumb {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.breadcrumb li + li::before {
    content: "/";
    padding: 0 10px;
    color: #999;
}
.breadcrumb a { color: #007bff; text-decoration: none; }

/* Global Title Header */
.title-wrapper {
    border-left: 6px solid #b30000;
    padding-left: 20px;
    margin: 20px 0;
}
.main-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}

/* Hero Image */
.hero-image-wrap {
    width: 100%;
    margin-bottom: 30px;
}
.hero-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Contact Card Layout */
.contact-card {
    display: flex;
    gap: 40px;
    background: #fff;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.info-section { flex: 1.3; }
.image-section { flex: 1; display: flex; flex-direction: column; gap: 15px; }

.title-section { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.flag-icon { width: 40px; height: auto; border: 1px solid #ddd; }
.card-heading { font-size: 20px; margin: 0; font-weight: 700; }

.info-group { margin-bottom: 15px; }
.label { font-weight: bold; margin-bottom: 5px; color: #333; }
.details, .details a { color: #555; text-decoration: none; line-height: 1.5; }

.large-image { width: 100%; border-radius: 4px; }
.small-images-row { display: flex; gap: 15px; }
.small-image { width: 50%; border-radius: 4px; }

/* WhatsApp Button */
.custom-whatsapp-btn {
    display: flex;
    align-items: center;
    background: #25D366;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 50px;
    width: fit-content;
    gap: 15px;
    margin-top: 10px;
}
.wa-top-text { display: block; font-size: 11px; }
.wa-bottom-text { font-weight: bold; font-size: 14px; }

/* MOBILE RESPONSIVENESS */
@media (max-width: 992px) {
    .contact-card {
        flex-direction: column; /* Stacks sections */
    }
    .image-section {
        order: -1; /* Puts images above text on mobile */
    }
    .main-title { font-size: 22px; }
}
/* Container Layout */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* Breadcrumb Styling */
.breadcrumb-bar {
    background-color: #f1f1f1;
    padding: 10px 20px;
    margin-bottom: 25px;
    border-radius: 2px;
}

.breadcrumb {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.breadcrumb li + li::before {
    content: "/";
    padding: 0 10px;
    color: #888;
}

.breadcrumb a {
    text-decoration: none;
    color: #0056b3;
}

/* Red Accent Header */
.title-wrapper {
    border-left: 7px solid #b30000; /* Matching the deep red from your image */
    padding-left: 20px;
    margin: 30px 0;
}

.main-title {
    font-size: 38px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
    color: #000;
}

/* Description Text */
.membership-description {
    line-height: 1.8;
    color: #444;
    font-size: 16px;
    margin-bottom: 50px;
    max-width: 1000px;
}

.membership-description strong {
    color: #000;
    font-weight: 700;
}

/* Association Logo Gallery */
.association-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Keeps logos of different heights centered */
    justify-content: flex-start;
    gap: 50px;
    margin-top: 20px;
}

.logo-box img {
    max-height: 110px; /* Controls max height to keep logos uniform */
    width: auto;
    max-width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.logo-box img:hover {
    transform: translateY(-5px); /* Subtle interactive lift */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .main-title {
        font-size: 26px;
    }
    
    .association-logos {
        justify-content: center; /* Center logos on smaller screens */
        gap: 30px;
    }
    
    .logo-box img {
        max-height: 80px;
    }
}

.corporate-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

/* Vision & Mission Layout */
.vm-row {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}

.vm-card {
    flex: 1;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.vm-img {
    width: 100%;
    height: auto;
    display: block;
}

.vm-content {
    padding: 25px;
    line-height: 1.6;
    color: #444;
}

.vm-content strong {
    color: #000;
}

/* Awards Grid Layout */
.awards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    border-top: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

.award-item {
    padding: 40px 20px;
    text-align: center;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
}

.award-icon {
    width: 180px; /* Adjust based on your laurel image size */
    margin-bottom: 20px;
}

.award-info .rank {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0 5px 0;
}

.award-info .desc {
    font-size: 14px;
    color: #666;
}

/* Responsive Design */
@media (max-width: 992px) {
    .vm-row {
        flex-direction: column;
    }
    
    .awards-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
    }
}

@media (max-width: 600px) {
    .awards-grid {
        grid-template-columns: 1fr; /* 1 column for phones */
    }
}
.about-section-company h2{
  font-weight: 800;
}

/* Container Layout */
.policy-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
    color: #333;
}

/* Intro Section */
.policy-subtitle {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.main-points {
    list-style: none;
    padding: 0;
    margin-bottom: 50px;
}

.main-points li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 15px;
}

/* Custom list numbering to match image style */
.main-points li::before {
    content: counter(item) ". ";
    counter-increment: item;
    position: absolute;
    left: 0;
    font-weight: 400;
}

/* Bold Section Header */
.section-title {
    font-size: 34px;
    font-weight: 800; /* Extra Bold */
   /* Subtle line under header */
    padding-bottom: 15px;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.section-content p {
    line-height: 1.8;
    font-size: 16px;
    color: #444;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .section-title {
        font-size: 26px;
    }
    
    .policy-container {
        margin: 20px auto;
    }
}

/* Container Layout */
.policy-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
    color: #333;
}

/* Intro Section */
.policy-subtitle {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.main-points {
    list-style: none;
    padding: 0;
    margin-bottom: 50px;
}

.main-points li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 15px;
}

/* Custom list numbering to match image style */
.main-points li::before {
    content: counter(item) ". ";
    counter-increment: item;
    position: absolute;
    left: 0;
    font-weight: 400;
}

/* Bold Section Header */
.section-title {
    font-size: 34px;
    font-weight: 800; /* Extra Bold */
    border-bottom: 1px solid #ccc; /* Subtle line under header */
    padding-bottom: 15px;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

.section-content p {
    line-height: 1.8;
    font-size: 16px;
    color: #444;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .section-title {
        font-size: 26px;
    }
    
    .policy-container {
        margin: 20px auto;
    }
}

/* Container Layout */
.legal-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
    color: #000;
}

/* Bold Header Style */
.header-main {
    font-size: 32px;
    font-weight: 800; /* Extra bold as per design */
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.header-divider {
    border: 0;
    border-top: 1px solid #ccc;
    margin-bottom: 30px;
}

/* Body Text Styles */
.policy-intro p, 
.policy-footer p {
    line-height: 1.8;
    font-size: 15px;
    color: #333;
    margin-bottom: 25px;
}

/* Indented Numbered List */
.purposes-list {
    margin-left: 80px; /* Strong indentation to match screenshot */
    margin-bottom: 40px;
}

.purposes-list ol {
    list-style: none;
    counter-reset: purpose-counter;
}

.purposes-list li {
    counter-increment: purpose-counter;
    position: relative;
    padding-bottom: 12px;
    line-height: 1.6;
    font-size: 15px;
}

.purposes-list li::before {
    content: counter(purpose-counter) ". ";
    position: absolute;
    left: -30px; /* Position numbers outside the text flow */
    font-weight: 400;
}

/* Responsive Mobile Layout */
@media (max-width: 768px) {
    .purposes-list {
        margin-left: 40px; /* Reduce indentation on smaller screens */
    }
    
    .header-main {
        font-size: 24px;
    }
}

.choose-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
    color: #333;
}

/* Stats Grid Layout */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.stat-card {
    text-align: left;
}

.laurel-wrapper {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* Ensures all boxes are uniform height */
}

.laurel-wrapper img {
    max-width: 100%;
    height: auto;
}

.stat-text {
    font-size: 14px;
    line-height: 1.5;
}

.stat-text strong {
    color: #000;
}

/* Highlights List Styling */
.highlights-section {
    margin-top: 30px;
}

.numbered-highlights {
    list-style: none;
    counter-reset: custom-counter;
    padding: 0;
}

.numbered-highlights li {
    counter-increment: custom-counter;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.6;
}

.numbered-highlights li::before {
    content: counter(custom-counter) ". ";
    position: absolute;
    left: 0;
    font-weight: normal;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .laurel-wrapper {
        height: auto;
    }
}

/* --- Global Container --- */
.reviews-container {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1.5rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.reviews-section-title {
    font-size: 1.5rem;
    color: #111827;
    font-weight: 800;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    border-left: 5px solid #007bff; /* Brand Accent */
    padding-left: 15px;
}

/* --- Review Card Design --- */
.reviews-cards {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 25px;
    border: 1px solid #f3f4f6;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.reviews-cards:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #e5e7eb;
}

/* --- User Identity & Avatar --- */
.reviews-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #fff;
    border-radius: 16px; /* Modern Squircle shape */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

.verified-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #10b981; /* Green for trust */
    color: white;
    font-size: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.name-date h4 {
    margin: 0;
    font-size: 2.05rem;
    color: #1f2937;
    font-weight: 700;
}

.name-date span {
    font-size: 0.95rem;
    color: #9ca3af;
}

.stars {
    color: #f59e0b; /* Amber/Gold */
    font-size: 2.1rem;
    letter-spacing: 2px;
}

/* --- Review Body --- */
.reviews-content h5 {
    margin: 0 0 10px 0;
    font-size: 2.15rem;
    color: #111827;
    font-weight: 700;
}

.reviews-content p {
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
    font-size: 2rem;
}

/* --- Footer Actions --- */
.reviews-footer {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.actions a {
    color: #007bff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s;
}

.actions a:hover {
    color: #0056b3;
}

.helpful-btn {
    cursor: pointer;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.helpful-btn:hover {
    background: #ffffff;
    border-color: #007bff;
    color: #007bff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 600px) {
    .reviews-header {
        flex-direction: column;
        gap: 12px;
    }
    .reviews-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

.process-section {
    padding: 60px 20px;
    background-color: #ffffff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.process-main-title {
    text-align: center;
    font-size: 28px;
    color: #1a1a1a;
    margin-bottom: 50px;
    font-weight: 800;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.step-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 30px;
    position: relative;
    border: 1px solid #eeeeee;
    transition: all 0.3s ease;
}

.step-card:hover {
    background: #ffffff;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #007bff;
    transform: translateY(-5px);
}

.step-badge {
    width: 45px;
    height: 45px;
    background: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,123,255,0.3);
}

/* Specific Highlight for Step 2 (Deposit) */
.step-card.highlight {
    border-left: 5px solid #ffc107;
}

/* Specific Highlight for Step 10 (Success) */
.step-card.success {
    background: #e9f7ef;
    border-color: #27ae60;
}

.step-card.success .step-badge {
    background: #27ae60;
}

.step-body h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    color: #333333;
    font-weight: 700;
}

.step-body p {
    margin: 0;
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
}

/* Responsive Fix for Mobile */
@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }
}

.payment-section {
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.payment-title {
    text-align: center;
    color: #333;
    font-weight: 800;
    margin-bottom: 5px;
}

.payment-subtitle {
    text-align: center;
    color: #777;
    margin-bottom: 40px;
}

.bank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 30px;
}

.bank-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #e1e1e1;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.bank-header {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.mufg-color { background: #df0011; } /* MUFG Red */
.resona-color { background: #00843d; } /* Resona Green */

.bank-header h3 {
    margin: 0;
    font-size: 20px;
}

.currency-tag {
    background: rgba(255,255,255,0.2);
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}

.bank-body {
    padding: 25px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-row label {
    font-size: 13px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
}

.detail-row span {
    color: #333;
    font-weight: 700;
    font-size: 15px;
}

.detail-row.highlight span {
    color: #007bff;
    font-size: 18px;
}

.swift-code {
    background: #f8f9fa;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px dashed #ccc;
    font-family: monospace;
}

.detail-address {
    margin-top: 20px;
}

.detail-address label {
    font-size: 13px;
    color: #888;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.detail-address p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

.payment-note {
    margin-top: 30px;
    background: #fff9e6;
    border-left: 5px solid #ffc107;
    padding: 15px 25px;
    border-radius: 4px;
    color: #856404;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .bank-grid {
        grid-template-columns: 1fr;
    }
    .detail-row {
        flex-direction: column;
    }
    .detail-row span {
        margin-top: 5px;
    }
}