/* 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;
  }
}

/* Footer */
.footer-wrapper{
  background:#e6f0f8;
  color:#333;
  font-size:14px;
  padding:0;
  border-top:1px solid #174a74;
}
.footer-inner{ padding:10px 0; }
.footer-text{ font-size:12px; }
.footer-title{
  font-size:16px;
  font-weight:700;
  margin-bottom:10px;
  color:#0056b3;
}
.footer-block-menu i{
  font-size:16px;
  margin-right:5px;
  border-radius:50%;
  padding:5px;
  color:#000;
}
.footer-block-menu ul{
  padding-left:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
}
.footer-block-menu ul li{ flex:0 0 100%; margin-bottom:6px; }
.footer-block-menu a{
  color:#333;
  text-decoration:none;
  display:inline-block;
  transition:all .3s ease;
}
.footer-block-menu a:hover{
  color:#174a74;
  transform:scale(1.05);
  text-shadow:0 0 6px rgba(255,255,255,.3);
}
.footer-social-icons i{
  font-size:14px;
  margin-right:8px;
  border-radius:50%;
  padding:8px;
  color:#fff !important;
  width:30px; height:30px; line-height:14px;
  text-align:center;
  display:inline-block;
}
.footer-block i{
  font-size:14px;
  margin-right:8px;
  border-radius:50%;
  padding:8px;
  color:#212529;
  width:30px; height:30px; line-height:14px;
  text-align:center;
  display:inline-block;
}
.footer-social-icons-share i{
  font-size:14px;
  margin-right:14px;
  border-radius:50%;
  padding:8px;
  color:#fff;
  width:30px; height:30px;
  text-align:center;
  display:inline-block;
  vertical-align:middle;
}
.footer-about-width{ width:300px; }

.footer-social-icons i.fa-facebook-f{ background:#3b5998; }
.footer-social-icons i.fa-instagram{ background:#E1306C; }
.footer-social-icons i.fa-youtube{ background:#FF0000; }
.footer-social-icons i.fa-twitter{ background:#1DA1F2; }
.footer-social-icons i.fa-tiktok{ background:#000; }

.footer-block .share-btn i.fa-facebook-f{ background:#3b5998; }
.footer-block .share-btn i.fa-twitter{ background:#1DA1F2; }
.footer-block .share-btn i.fa-whatsapp{ background:#25D366; }
.footer-block .share-btn i.fa-envelope{ background:#dd4b39; }
.footer-block .share-btn i.fa-link{ background:#6c757d; }

.footer-social-icons-share i.fa-facebook-f{ background:#3b5998; }
.footer-social-icons-share i.fa-twitter{ background:#1DA1F2; }
.footer-social-icons-share i.fa-instagram{ background:#E1306C; }
.footer-social-icons-share i.fa-youtube{ background:#FF0000; }
.footer-social-icons-share i.fa-tiktok{ background:#000; }
.footer-social-icons-share i.fa-whatsapp{ background:#25D366; }
.footer-social-icons-share i.fa-envelope{ background:#c71610; }
.footer-social-icons-share i.fa-link{ background:#888; }

.share-btn{ margin-left:10px; }
.footer-expanded{
  display:none;
  margin-top:20px;
  border-top:1px solid #ccc;
  padding-top:20px;
}
.footer-toggle-btn{
  background:none;
  border:none;
  color:#444;
  font-weight:600;
  margin-top:10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.footer-toggle-btn:hover{ color:#000; }
.footer-image-info{
  display:flex;
  flex-direction:column;
  gap:15px;
  margin-top:20px;
}
.footer-image-info .image-line{
  display:flex;
  align-items:center;
  gap:6px;
}
.footer-image-info img{
  object-fit:cover;
  border-style:solid; border-width:1px;
  margin-right:5px; margin-top:12px;
}

@media (min-width:768px){
  .footer-col-spacing{ padding-left:24px; }
  .footer-about-width{ width:240px; }
}
@media (max-width:767px){
  .footer-image-info .image-line{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .footer-image-info img{ margin:0 auto 10px; }
  .footer-inner,
  .footer-image-info,
  .footer-block-menu,
  .footer-social-icons{
    padding-left:15px;
    padding-right:15px;
  }
  .footer-image-info .image-line{
    align-items:flex-start;
    text-align:left;
  }
  .footer-block-menu ul{ flex-direction:column; }
  .footer-social-icons{ justify-content:flex-start; }
}
@media (min-width:768px) and (max-width:1024px){
  .footer-inner .col-md-3,
  .footer-inner .col-md-2{
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    margin-bottom:28px;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .footer-image-info .image-line{
    flex-direction:row;
    align-items:center;
    text-align:left;
  }
  .footer-block-menu ul{ gap:8px 15px; }
  .footer-block-menu ul li{ flex:0 0 48%; }
  .footer-social-icons{ justify-content:flex-start; }
  .footer-col-spacing{ padding-left:30px; width:700px; }
  .footer-about-width{ width:700px; }
}

/* Spacing helpers */
.footer-v-space{ margin-top:30px; }
@media (max-width:767px){ .footer-v-space{ margin-top:35px; } }
@media (min-width:768px) and (max-width:1024px){ .footer-v-space{ margin-top:45px; } }
hr.faded-line{
  border:none;
  height:1px;
  background:linear-gradient(to right, transparent, #000, transparent);
  margin:16px 0;
}

/* Reduced motion / accessibility */
.footer-block-menu a:hover{
  /* prevent layout jump on hover in some browsers */
  transform:none !important;
  text-shadow: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; }
}

/* 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) {
  footer .row {
    flex-direction: column;
  }

  .footer .col-md-4,
  .footer .col-sm-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }


    .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; }
}

.footer-block-menu a:hover{
  transform:none !important;
  text-shadow: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; }
}

.footer-social-icons i,
.footer-social-icons-share i {
  box-shadow:none !important;
  outline:none !important;
  border: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
}