/* Offcanvas: readable colours */

.offcanvas{ z-index:1060 !important; }
.offcanvas-backdrop{ z-index:1055 !important; }
.offcanvas{ background:#fff; color:#222; }
.offcanvas a{ color:#222 !important; text-decoration:none; }
.offcanvas a:hover{ color:#174a74 !important; }
.offcanvas .list-unstyled a{ color:#222; }
.offcanvas .list-unstyled a:hover{ color:#174a74; }

/* Icons & badges */
.offcanvas i{ color:#222; }
.offcanvas .badge{ font-weight:600; }
.offcanvas #cart-count-mobile,
.offcanvas .wishlist-count{ background:#174a74; }

/* Submenu visuals */
.offcanvas ul ul{
  border-left:2px solid #eee;
  margin-left:.5rem;
  padding-left:.75rem;
}
.offcanvas a[data-has-children] i.icofont-thin-right{ transition:transform .2s ease; }
.offcanvas a.open i.icofont-thin-right{ transform:rotate(90deg); }

/* Social icons in offcanvas */
.offcanvas .d-flex.gap-3 a i{ color:#222 !important; }

/* Header / badges */
.cart-count{
  position:relative;
  color:#fff;
  background:var(--theme-color1);
  padding:0 4px;
  border-radius:50px;
}
.cart-count-basket{
  position:relative;
  color:#fff;
  background:var(--theme-color1);
  padding:6px;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  top:1px;
  right:-20px;
  font-size:.90rem;
  margin-top:-20px;
}
.sticky-menu .cart-count-basket{
  position:relative;
  right:-7px;
  top:-20px;
  font-size:1.2rem !important;
  width:26px !important;
  height:26px !important;
}
.sticky-menu .basket-hide{ margin-top:30px !important; }
.basket-hide-basket{ margin-top:10px; }

/* Buttons / links */
.wishlist-button{ background:none; border:0; color:#ff4081; }
.wishlist-button:hover{ color:#e60073; }
.wishlist-button:focus{ outline:0 !important; box-shadow:none !important; }

/* Cookie / modal basics */
.cookie-title{ font-size:18px; color:#f7f20b; font-weight:600; }
.cookie-btn{ padding:3px; }
.modal-header{ border-bottom:none; }
.title{ color:#000 !important; }
.welcome-padding{
  margin-left:18px;
  margin-top:3px;
  font-size:18px;
  font-style:italic;
  font-weight:700;
  text-shadow:.5px 0 0 currentColor, -.5px 0 0 currentColor;
}
@keyframes fadeIn{ 0%{opacity:0;} 100%{opacity:1;} }
.modal-title{ font-size:1.5rem; font-weight:700; }
.modal-body img{ border-radius:50%; }
.modal-body p{ font-size:1.2rem; }
.modal-footer{ border-top:none; }

/* Newsletter / Recaptcha */
.recaptcha-container{
  text-align:center;
  margin:10px auto;
  width:100%;
  max-width:320px;
}
.g-recaptcha{ display:inline-block; }

/* Layout resets */
html,body{ overflow-x:hidden; width:100%; margin:0; padding:0; }
.fixed,.absolute{ left:0; right:0; }
.about-us-content{ width:100%; }

/* Social icon (header top strip) */
.social-icon li a i{
  color:#1877F2;
  transition:color .3s ease;
  border:2px solid #fff;
  border-radius:50%;
  padding:14px;
  font-size:24px;
}
.social-icon li a:hover i{ color:#3d0957; }

/* Responsive-split menu */
.responsive-split-menu ul{
  column-count:1;
  column-gap:20px;
  padding-left:0;
}
@media (min-width:768px) and (max-width:991.98px){
  .responsive-split-menu ul{
    column-count:2;
    margin-bottom:16px;
  }
}


/* Bounce on hover */
@keyframes bounce{ 0%{transform:translateY(0);} 50%{transform:translateY(-5px);} 100%{transform:translateY(0);} }
.bounce:hover{ animation:bounce .4s ease-in-out; }

/* Header top background helper (kept as a utility) */
.header-top-back{ background:#dec6f9; }

/* Home-only helpers—move to page stylesheet if not reused site-wide */
@media (max-width:768px){
  .about-us-home4 .row{ flex-direction:column; align-items:center; text-align:center; }
  .about-us-home4 .content-column{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  .list-style1-home4{ flex-direction:column; align-items:center; padding:0; text-align:center; }
  .list-style1-home4.ml-40{ margin-left:0 !important; }
  .about-us-home4 img.img-1{ max-width:90%; height:auto; display:block; margin:0 auto; }
  .text-three{ display:flex; justify-content:center; width:100%; }
}

/* Remove any leftover debug overlay */
@media (min-width:1024px){
  body::after{ content:none !important; outline:none !important; }
}
  .offcanvas,
  .offcanvas a,
  .offcanvas i { color:#000000 !important; }
  .offcanvas a { text-decoration:none !important; }
  .offcanvas .list-unstyled a { color:#000000 !important; }
  .offcanvas #cart-count-mobile, .offcanvas .wishlist-count { background:#174a74 !important; }

.cart-count-basket {
    position: relative;
    color: white;
    background: var(--theme-color1);
    padding: 6px; /* Equal padding */
    width: 24px; /* Ensures it's a square before rounding */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Makes it a perfect circle */
    top: 1px;
    right: -20px;
    font-size: 0.90rem;
    margin-top: -20px;
}

/* Only split into 2 columns on tablets (iPad size) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .responsive-split-menu ul {
    column-count: 2;
    margin-bottom: 16px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {

    .normal-menu .cart-count-basket {
    position: relative;
    right: -7px; 
    top: -19px;
    width: 26px !important;
    height: 26px !important;
    font-size: 1.2rem !important;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.modal-body img {
    border-radius: 50%;
}

.modal-body p {
    font-size: 1.2rem;
}

.modal-footer {
    border-top: none;
}

.cmc-desc {
    font-size: 14px;
    line-height: 1.6;
}

.mc-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.mc-btn {
    width: 100%;
    max-width: 200px;
    text-align: center;
}


.header-top-back {
    background-color: #dec6f9;
}


/* Prevent horizontal scrolling */
html, body {
    overflow-x: hidden; /* No horizontal scroll */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Fix layout shifts caused by elements overflowing */


/* Ensure absolute/fixed elements don't break layout */
.fixed, .absolute {
    left: 0;
    right: 0;
}


.wishlist-button {
    background: none;
    border: none;
    color: #ff4081;
}
.wishlist-button:hover {
    color: #e60073;
}
}

/* Optional: Debugging - Show any overflowing element with a red outline */
@media (min-width: 1024px) {
    body::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        outline: 2px solid red; /* Remove after testing */
    }
}
@media only screen and (max-width: 768px) {
    /* Center the content on smaller screens */
    .about-us-home4 .row {
        flex-direction: column; /* Stack elements */
        align-items: center; /* Center align */
        text-align: center;
    }


    /* Ensure the content column is centered */
    .about-us-home4 .content-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Adjust the list styles to stack */
    .list-style1-home4 {
        flex-direction: column;
        align-items: center;
        padding: 0;
        text-align: center;
    }

    /* Remove left margin that pushes it off-center */
    .list-style1-home4.ml-40 {
        margin-left: 0 !important;
    }

    /* Make the image responsive and centered */
    .about-us-home4 img.img-1 {
        max-width: 90%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /* Ensure the button is centered */
    .text-three {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
}  
    @media (max-width: 768px) {
    #welcomeModal .modal-content {
        flex-direction: column; /* Stack text & image vertically on small screens */
        width: 90%; /* Use 90% of the screen width */
        height: auto; /* Let height adjust based on content */
        margin: 10% auto; /* Center modal vertically */
        margin-left: 20px; /* Rem}ove left margin for smaller screens */
        padding: 20px;
    }

    #welcomeModal .modal-body {
        flex-direction: column; /* Stack text above image */
        text-align: center; /* Center text for mobile */
    }

    #welcomeModal img {
        max-width: 100%; /* Make image fully responsive */
        height: auto; /* Maintain aspect ratio */
        margin: 15px 0; /* Add spacing around the image */
        border-radius: 5px; /* Ensure rounded corners */
    }

    #welcomeModal .close {
        width: 35px; /* Slightly smaller close button */
        height: 35px;
        font-size: 16px;
        top: 5px; /* Adjust position for mobile */
        right: 5px;
    }
}

/* Larger Screens (Default Styles) */
@media (min-width: 769px) {
    #welcomeModal .modal-content {
        width: 660px; /* Keep original width */
        height: 360px;
        flex-direction: row; /* Side-by-side layout */
        justify-content: space-between;
        align-items: center;
        margin-left: -60px;
    }

    #welcomeModal .modal-body {
        display: flex;
        align-items: center;
        text-align: left; /* Align text normally */
    }

    #welcomeModal img {
        max-width: 236px;
        margin-left: 67px;
    }
}


.contact-list-one li .icon {
    margin-top: -10px;}

    .page-title {
        background:url({{$homepage->login_background_image}}) no-repeat center center;
        background-size: cover;
    }

    @media (max-width: 768px) {
        .page-title {
        background:url({{$homepage->header_image_mobile}}) no-repeat center center;
        background-size: cover;
        }
    }


@media (min-width:1024px){
  body::after{ content:none !important; outline:none !important; }
}

a:hover, a:focus, a:focus-visible,
button:hover, button:focus, button:focus-visible {
  outline:none !important;
  box-shadow:none !important;
}
img { border:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0
}