:root {
  --main-color: #FFE1E9;    
}

p, a, span, h1, h2, h3, h4, h5, h6, button{
    font-family: "DM Sans", sans-serif;    
    font-style: normal;
}
ul, p, a, span, h1, h2, h3, h4, h5, h6, button {margin: 0; padding: 0}
.dm-sans-regular {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
}
.order-line .bolid{
  width: 30px;
  height: 30px;
  margin: auto;
  background-color: #000;
  border-radius: 50%;
}
.order-line .phase-col.active .phase-box .bolid {background-color: #ffc927;}
.order-line .phase-col:not(:first-child) .phase-box::before{
  content: '';
  display: block;
  position: absolute;
  top: 13px;
  right:50%;
  width: 100%;
  height: 5px;
  background-color: #000;
}
.order-line .phase-col.active .phase-box::before {background-color: var(--primary-clr);}
.order-line .phase-col:first-child .phase-box::before, .order-line .phase-col:last-child .phase-box::after{ display: none;}

.dm-sans-medium {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
}
.dm-sans-SemiBold {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
}
.dm-sans-bold {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
}

.dm-sans-ExtraBold {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
}
html {scroll-behavior: unset !important;}
a {text-decoration: none;}
.section-title {font-size: 28px;}
.btn-style {font-size: 18px; padding-block: 12px;}
.cusrsor-pointer {cursor: pointer;}
.bg-ofwhite {background: #FAFAEF;}
.height-btn .submit-btn {height: 57px;}
.text-clr {color: #050B20}
.cursor-pointer {cursor: pointer;}
/* Start header */
.header {transition: box-shadow 0.3s ease;}
.header .logo-wrap{max-width: max-content;}
.header .logo-header, .header .header-logo-mobile {max-height: 60px;}
.header .lang-btn {line-height: 1.3; max-height: 30px;}
header.scrolled {box-shadow: 0 2px 6px rgba(0,0,0,0.15);}
.user-dropdown .dropdown-toggle::after {display: none;}
.cart_count {
	right: -11px;
	top: -9px;
	background-color: #cb2c3e;
	height: 23px;
	width: 23px;
	font-size: 12px;
	color: #fff
}
.cart-drawer-box {width: 500px; transition: all .4s ease-in-out; right: -500px;}
.cart-drawer-box .cart_count {height: auto; width: auto; font-size: 16px;}
.cart-drawer-box.open {right: 0;}
.cart-drawer-box .items-counter {font-size: 23px;}
.cart-drawer-box .content-box-wrap{height: calc(100% - 74px);}
.empty-cart-text {font-size: 28px;}
.cart-drawer-box .image-item {width: 85px;aspect-ratio: 1 / 1;max-height: 85px;}
.count-controls {width: 300px;}
.counter-num {border: 1px solid #000;}
.counter-num .count-num {width: 40px; height: 40px;}
.counter-num .count-num:focus {border: none; outline: none;}
.counter-num .btn-minus, .counter-num .btn-plus {width: 33px; height: 40px;}
.total-item-price,
.cart-drawer-box .item-name,
.cart-drawer-box .item-price,
.cart-drawer-box .item-size,
.cart-drawer-box .total-price{font-size: 18px;}
.cart-drawer-box .note {font-size: 16px;}
.cart-drawer-box .items-list {max-height: 320px; overflow-y: auto;}
.cart-drawer-box .items-list li:not(:last-child){margin-bottom: 30px;}
.cart-drawer-items-details {width: 80%;}
.submit-btn {background-color: #03092F; height: 48px;}
.overlay-to-close {background: rgba(3, 9, 47, 0.4); display: none;}
.nav-btn {min-width: 40px;}


/* End header */

/************************************ Start Home page content **********************************/

/* Start Main section */
.main-section {background-color: var(--main-color); height: 100vh;}
.main-title, .main-title + p{font-size: 42px;}
.main-section-slider .owl-stage-outer, .main-section-slider .owl-stage, .main-section-slider .owl-item {height: 100%;}

/* End Main section */

/* Start favorite soaps section */
.favorite-soaps-section {margin-block: 80px;}
.favorite-soaps-section .product-name {font-size: 20px;}
.favorite-soaps-section .product-image{/*min-height: 380px;*/ aspect-ratio: 1 / 1.5;}
/* End favorite soaps section */

/* Start Come on, contact us section */
.come-on-contact-section {background-color: #FAFAEF; margin-bottom: 80px}
.come-on-contact-section .p-text, .come-on-contact-section a {font-size: 24px;}
.image-section {max-width: 100%; width: 100%; max-height: 578px;}
/* End Come on, contact us section */

/* Start Best selling section */
.best-selling-section {margin-bottom: 80px;}
.best-selling-section .inner-container {max-width: 950px;}
.best-selling-section .image-wrap img {aspect-ratio: 1 / 1; max-height: 500px ;}
.best-selling-section .best-selling-bg {background-color: var(--main-color);}
/* End Best selling section */

/* Start instagram gallery */
.instagram-gallery {margin-bottom: 80px;}
.insta-img {width: 185px;aspect-ratio: 1 / 1;}
.instagram-slider .owl-next {
    width: 50px;
    height: 50px;
    background: #FFFFFF99 !important;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background .2s ease-in-out;
}
.instagram-slider .owl-next:hover {background: #FFFFFF !important;}
.instagram-slider .owl-prev{display: none;}
/* End instagram gallery */

/* Start about us section */
.about-us-section {margin-bottom: 80px; background-color: #F7F7F7;}
.about-us-section .title {font-size: 42px;}
.about-us-section .title + p {font-size: 24px;}
.about-us-section .about-image-1 {height: 750px;}
.about-us-section .about-image-2 {
    width: 300px;
    height: 300px;
    position: absolute;
    left: -103px;
    bottom: -80px;
}
/* End about us section */

/* Start newsletter section */
/* .newsletter-section {background-color: #03092F; padding-block: 80px;} */
.newsletter-section .newsletter-title {font-size: 32px;}
.newsletter-section .newsletter-title svg + p {font-size: 18px;}
.newsletter-section .newsletter-wrap{width: 400px; background-color: #444D99; border-radius: 22px;}
.newsletter-section .newsletter-input {color: #fff; height: 40px;}
.newsletter-section .newsletter-input::placeholder {
  color: white;
  opacity: 1; /* important for Firefox */
}
.newsletter-section .newsletter-input::selection {background: #000;}
.newsletter-section .newsletter-input:focus {outline: none; border: none;}
.newsletter-section .newsletter-btn {height: 40px;}

/* End newsletter section */

/************************************ End Home page content **********************************/

/************************************ Start products page **********************************/
.page-cover {max-width: 800px;}
/* Start products section */
.btns-box {width: 100%; border: 1px solid rgba(3, 9, 47, 0.5); padding: 10px; overflow: auto;}
.btns-box ul li a.category-name {padding: 10px 25px; transition: all .2s ease-in-out;}
.btns-box ul li a.category-name.active, .btns-box ul li a.category-name:hover {background-color: #03092F; color: white !important;}
.products-section{margin-bottom: 80px;}
.products-section .product-image {aspect-ratio: 1 / 1.5;}

.lazy-img {opacity: 0;transition: opacity .4s ease;}
.lazy-loaded {opacity: 1;}
/* End products section */

/************************************ End products page **********************************/

/************************************ Start Product Details page **********************************/

/* Start breadcrumb */
.breadcrumb li:last-child a{cursor:unset}
.breadcrumb li:not(:last-child) a::after {
  content: '/';
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  
}
/* End breadcrumb */

/* Start Product section */
#single-product-slider .product-image {
    /* height: 600px; */
    width: 100%;
    max-width: 407px;
    aspect-ratio: 1 / 1.5;
}
.product-details-section {margin-bottom: 80px;}
 .product-details-section .thumbnails-img {
  width: 120px;
  aspect-ratio: 1 / 1;
  transition: all .2s ease-in-out;
  border: 1px solid transparent;
}

#custom-dots button.active .thumbnails-img{border: 1px solid #000;}
.thumbnails-box {width: 120px}
.slider-box {width: 100%; max-width: 100%;}
.product-details-section .product-name {font-size: 48px;}
.product-description {font-size: 20px;}
.product-info-section {background-color: #FAFAEF;}
.product-info-section .for-border{border-right: 1px solid #000; border-left: 1px solid #000;}

.size-box .size-input, .color-box .color-input {
    position: absolute;
    z-index: -3;
    opacity: 0;
}
.size-box label {
    width: 65px;
    height: 55px;
    background-color: #F7F7F7;
    border: 1px solid transparent;    
    
}
.size-box .size-input:checked + label {border-color:#021A4A;}

.color-box label {
    width: 56px;
    height: 56px;
    border-radius: 50%;
}
.color-box label {border:1px solid transparent;}
.color-box .color-input:checked + label {border-color: #511E21;}

/* Start Product section */



/************************************ End Product Details page **********************************/

/************************************ Start checkout page **********************************/
.select-option-wrap .select2-container--default .select2-selection--single{height: 57px; border-radius: 50px; border-color: #050B2080; background-color: transparent;}
.select-option-wrap .select2-container--default .select2-selection--single .select2-selection__rendered
{line-height: 57px;}
.select-option-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {height: 57px; right: 16px;}
.select-option-wrap .select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select-option-wrap .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}
.select2-container--open .select2-dropdown--below {
  border-top: 1px solid #aaa !important; border-top-left-radius: 4px; border-top-right-radius: 4px;
}
.select-option-wrap .select2-container .select2-selection--single .select2-selection__rendered {padding-left: 22px;}
.select2-container--default .select2-selection--single .select2-selection__arrow b {border: none !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: "";
  background: url('../images/select-arrow.svg') no-repeat center center;
  width: 14px;
  height: 14px;
  display: block;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {background-color: #03092F;}
.note-pay {font-size: 24px;}
.divider-line {border-bottom: 1px solid #000;}
.cards-icon {right: 22px; top: 50%; transform: translateY(-50%);}

.order-summary-box .image-item {width: 70px; aspect-ratio: 1 / 1; max-height: 70px;}
.order-summary-box .items-list li:not(:last-child) {margin-bottom: 30px;}
.tabs-container .tab:not(:first-child) {display: none;}
.order-summary-item-details {width: 62%;}
 .input-icon {right: 20px; top: 50px;}

 .custom-bolid-input-mark {
    border-radius: 50%;
    display: block;
    width: 24px;
    height: 24px;
    border: 2px solid #000;
}
.custom-bolid-input-mark::before {
    content: '';
    display: block;
    width: 17px;
    height: 17px;
    background-color: transparent;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.custom-radio-input {display: none;}
.custom-radio-input:checked + div .custom-bolid-input-mark::before {background-color: #000;}
.custom-ckeckbox .custom-bolid-input-mark, .custom-ckeckbox .custom-bolid-input-mark::before {border-radius: 7px;}
.addition-img {width: 60px; height: 60px;}
.custom-ckeckbox .custom-bolid-input-mark {border-width: 1px;}
.card-icon-wrap {width: 82px;height: 39px;}
.order-summary-box {position: sticky; top: 145px;}
/************************************ End checkout page **********************************/

/************************************ Start order confirmation page **********************************/
.order-confirmation-wrap {max-width: 688px;}
.order-confirmation-wrap .item-name {font-size: 22px;}
.sub-total-clr {color: #C12A3B}
.unlimited-miles-clr {color: #4CAF50}
.discount-clr {color: #C12A3B}
/************************************ End order confirmation page **********************************/

/************************************ Start About us page **********************************/

.section-in-about-page {margin-bottom: 80px;}
.section-in-about-page .inner-container {max-width: 950px;}
.section-in-about-page .image-wrap img {aspect-ratio: 1 / 1; max-height: 500px ;}

/************************************ End About us page **********************************/

/************************************ Start Contact us page **********************************/
.contact-us-box {max-width: 600px;}
.contact-methods {max-width: 1000px;}
.contact-icon-box {
  height: 44px;
  width: 44px;
  min-width: 44px;
  background-color: var(--main-color);
}
.contact-box-method {height: 100%;}
/************************************ End Contact us page **********************************/

/************************************ Start faq page **********************************/
/* Start faq question */
.faq-section {margin-bottom: 80px;}
.faq-section .faq-list {max-width: 700px;}
.faq-section .question-header {font-size: 22px;}
.faq-section .question-header .icon-wrap {width: 40px; height: 40px; background-color: #E04356;}
.faq-section .question-header .minus-svg{display: none;}
.faq-section .question-header.active .plus-svg{display: none;}
.faq-section .question-header.active .minus-svg{display: block;}
.faq-section .bottom-line {height: 1px;width: 100%;background: #E1DCD4;}
.faq-section .faq-list li .answer{font-size: 17px;}
.faq-section .faq-list li:not(:first-child) .answer {display: none;}
/* End faq question */
/************************************ End faq page **********************************/

/************************************ Start user dashboard page **********************************/
.dashboard-btns .submit-btn {background-color: #E04356;}
.address-box {max-width: 50%;}
.address-box:not(:last-child) {margin-bottom: 40px;}
.order-item:not(:last-child) {border-bottom: 1px solid #000;}
.order-item .order-image {width: 117px; max-height: 117px; aspect-ratio: 1 / 1;}
.order-items-count {height: 50px; min-width: 50px;}
.no-orders-box {min-height: 300px;}
.phone-number-group .country_code_wrap {left: 3px; top: 50%; transform: translateY(-50%);}
.phone-number-group .phone-input {padding-left: 103px;}
.phone-number-group .select2-container--default .select2-selection--single {border: none; background-color: transparent;}
/************************************ End user dashboard page **********************************/


/* Start footer */
.footer {background-color: #F6F6F6;padding-bottom: 60px;}
.footer .footer-logo {max-width: 86px;}
.footer .note-under-logo {font-size: 14px;}
.footer-links-title {font-size: 29px; margin-bottom: 22px;}
.footer-links {font-size: 14px;}
.payment-methods-list li {
  width: 50px;
  height: 50px;
  background-color: #D0DEEB;
  
}
/* End footer */

/* Start modals */
.modal .btn-close {opacity: 1;}
.modal .submit-btn {height: 56px;}
.or-divider{border-bottom: 1px solid #050B2080;}
.or-divider .or-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.social-media-login-btn {border: 1px solid #050B2080; height: 56px;}
.input-border {border-color: #03092F;}

.show_password {right: 13px; top: 48px;}

/* End modals */



/* Start Custom checkbox */
.large-checkbox {width: 24px;height: 24px;border-color: #000}
.form-check-input:checked {background-color: var(--primary-clr);border-color: #000;}
.custom-checkbox:checked {
    background-color: var(--primary-clr);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
}
.form-check-input:focus {box-shadow: 0 0 0 .25rem rgba(248, 128, 0, 0.3); border-color: var(--primary-clr);}
/* End Custom checkbox */

/* this code to solve height and width problem */
.product-image-wrap {
  aspect-ratio: 1 / 1.5; /* الحاوية */
  overflow: hidden;  
  display: block;
}
/* img داخل الحاوية */
.product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* أو contain حسب اختيارك */
  object-position: center; /* ضع المركز دائمًا في الوسط */
  display: block;
}
.product-image-wrap { aspect-ratio: 1 / 1.5; overflow: hidden; }
.product-image-wrap.square-img { aspect-ratio: 1 / 1; } /* للحالة المربعة */
.product-image-wrap.portrait-img { aspect-ratio: 1 / 1.5; }
.product-image-wrap img { width:100%; height:100%; object-fit: cover; object-position:center; }

.slider-box .product-image-wrap.square-img img { max-width: 100% !important;}