:root {
    --light-color : white;
    --theme-color : #fff;
    --navbar-color : #222;
    --gray : #222;
    --gray1 : #252525;
}
#custom-collapse {
    position: absolute;
    top: 65px;
    right: 20%;
    z-index: 1000;
    opacity: 0;
    cursor: pointer!important;
}
#custom-collapse.show {
    opacity: 1;
    right: 20%;
    /* animation: 0.2s linear wipe-in-left both; */
    transition: max-height 0.2s ease-out;
}
.custom-megamenu{
    z-index: 2;
    max-height: 100%;
    overflow: scoll;
    transition: max-height 0.2s ease-out;
}
.nav-item i{
    cursor: pointer!important;
}
.nav-mobile i.dropdown-toggle::after{
    display: none!important;
}
.bg-custom{
    box-shadow: 0.5px 0px 1px!important;
}
.custom-navbar{
    background-color: var(--navbar-color)!important;
    box-shadow: 0.5px 0px 1px!important;
    /* a, a ~ i, button{
        color: var(--light-color)!important;
    } */
    a, a ~ i{
        color: var(--light-color)!important;
    }
    a.active{
        color: var(--theme-color)!important;
    }
}
.custom-navbar-height{
    height: 65px!important;
}

/* Mega Menu */
.mega-menu-bar{
    background-color: var(--navbar-color)!important;
    box-shadow: 0.5px 0px 1px!important;
    border-radius : 5px;
    margin : 5px 0 0 0;

    a, a ~ i{
        color: var(--light-color)!important;

    }
    a.active , h5{
        color: var(--theme-color)!important;
        margin : 0 0 20px 0;
    }
    a:hover {
        color: var(--theme-color)!important;
        text-decoration : underline !important;
    }
}

.bg-fort-theme1{
    background-color : var(--gray1);
    /* background-color : #252525; */
}

.glass-bg {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

  /* Home Section with Background Image */
.home1 , .about1, .cart1 , .checkout1, .contact1, .login1, .register1, .product1 , .singleProduct1, .profile1, .error1 {
    background-image : url("../../../public/frontend/img/bg-body.png");
    background-attachment: fixed;
    background-size: 300px;
}
 /* ============================================================================================ */
 /* ========================================= HOME ========================================= */
 /* ============================================================================================ */
 .breadcrumb-item a{
    text-decoration: none!important;
 }
 .breadcrumb-item+.breadcrumb-item::before
{
    color : var(--light-color)!important;
}

.breadcrumb-item.active
{
    color : var(--light-color)!important;
}

#breadcrumbs a,#filterForm a{
    color: var(--light-color)!important;
}


/* Overlay Effect */
.home1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* Ensure Content Stays Above the Overlay */
.home1 > * {
    position: relative;
    z-index: 3;
}

/* Image Adjustments */
.move-image {
    left: 50px;
    width: 300px;
    height: 300px;
    object-fit: cover;
}

/* Content Box */
.right-card-cta {
    padding: 80px;
    width: 900px;
}

/* Medium Screens */
@media (max-width: 991px) {
    .move-image {
        width: 250px;
        height: 250px;
        left: 40px;
    }

    .right-card-cta {
        padding: 40px;
        width: 500px;
    }
}

/* Small Screens */
@media (max-width: 767px) {
    .move-image {
        left: 0;
        width: 100% !important;
        margin-bottom: 20px;
    }

    .right-card-cta {
        padding: 30px;
        width: 100% !important;
    }
}


/* ====================== */
/* ===== carousel ===== */
/* ====================== */

  /* Smooth fade animation for captions */
  .carousel-caption {
    background: rgba(0, 0, 0, 0.5); /* Dark semi-transparent background for readability */
    border-radius: 10px;
    padding: 15px;
    animation: fadeInUp 1s ease-in-out;
}

/* Keyframe for animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ====================== */
/* ===== Categories ===== */
/* ====================== */

.category-border-container {
    width: 170px;
    height: 170px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-border {
    transition: transform 0.6s ease-in-out;
}

/* Image Container (Keeps Image Static) */
/* .category-image-container {
    width: 150px;
    height: 150px;
    position: relative;
    z-index: 1;
    overflow: hidden;
} */
/* ================ */

.box {
    position: relative;
    width: 170px;
    height: 170px;
    background:  #ccc;
    border-radius: 50%;
    overflow: hidden;
  }

  .box::before {
    content: "";
    position: absolute;
    inset: -10px 100px;
    background: #fabc17;
    transition: 0.5s;
    animation: border-animation 4s linear infinite;
  }

  .box:hover::before {
    inset: -20px 0px;
  }


  .box::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: transparent;
    border-radius: 50%;
    z-index: 1;
  }


.content {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    inset: 7px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 3;
  }

  .content img {
    transition: 0.75s;
  }



/* Image Styling */
.category-img {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease-in-out;
}

/* Shine Effect */
.shine-effect {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%);
    transform: skewX(-20deg);
    transition: left 0.4s ease-in-out;
    z-index: 3;
}


/* Shine Effect Moves Across the Image */
.category-item:hover .shine-effect {
    left: 100%;
}
.category-item:hover .brush-stock{
    opacity: 1;
    /* transform: rotate(90deg); */
}

.category-item:hover .category-image-container  {
    border:none;
    transition: border 0.3s ease-in-out;
}

/* Category Text Animation (Slide Down) */
.category-text {
    opacity: 0;
    transform: translateY(-30px);
    transition: transform 0.6s ease-in-out, opacity 0.5s ease-in-out;
}

/* Show Text on Hover with Slide Down */
.category-item:hover .category-text {
    opacity: 1;
    transform: translateY(0);
    /* background: #fab917; */
    /* background: #ff4c84; */
}


/* ====================== */
/* ===== Best Selling ===== */
/* ====================== */

.product-card1 {
    transition: 0.3s;
    border-radius: 8px;
    overflow: hidden;
}

/* Product Image Container */
.product-img-container {
    position: relative;
    overflow: hidden;
}

/* Hover Icons - Initially Hidden */
.product-hover-icons {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Show Icons on Hover */
.product-card1:hover .product-hover-icons {
    opacity: 1;
}

/* Hover Effect - Add to Cart Button */
.btn-dark {
    transition: background 0.3s ease-in-out;
}

.btn-dark:hover {
    background: #000;
    color: white;
}

@media (max-width: 1150px) {
  .dynamic-width {
      width: 25% !important; /* Set width to 25% when screen is <= 1150px */
  }
}

  @media (min-width: 1151px) {
      .dynamic-width {
          width: 50% !important; /* Default width of 50% for large screens */
      }
  }

/* ====================== */
/* ===== Grid Images ===== */
/* ====================== */

.hover-scale {
    transition: transform 0.3s ease-in-out;
}

.hover-scale:hover {
    transform: scale(1.1);
}


/* ====================== */
/* ===== Featured Card ===== */
/* ====================== */

.feature-card {
    background-color: #fff;
    transition: background-color 0.3s ease-in-out;
}
.feature-card:hover {
    background-color: #c0e4ec; /* Light pink hover effect */
}


 /* ============================================================================================ */
 /* ========================================= card ========================================= */
 /* ============================================================================================ */

.product-card {
    transition: 0.3s;
}

/* Hover Icons - Initially Hidden */
.product-hover-icons {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Show Icons on Hover */
.product-card:hover .product-hover-icons {
    opacity: 1;
}

/* Hover Effect - Add to Cart Button */
.btn-dark {
    transition: background 0.3s ease-in-out;
}

.btn-dark:hover {
    background: #000;
    color: white;
}

 /* ============================================================================================ */
 /* ========================================= Single Products ================================== */
 /* ============================================================================================ */

 .product-Details-tab {
    .nav-pills .nav-link.active{
        color : black;
        background: white;
      }
      .nav-pills .nav-link{
        color : white;
      }

      .progress-bar{
        background : gray;
      }
  }


 /* ============================================================================================ */
 /* ========================================= CART ========================================= */
 /* ============================================================================================ */


/* ======================= */
/* ==== Product List ===== */
/* ======================= */

.product-list {
    .table {
      border-collapse:separate;
      /* border : 1px solid white !important; */
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      border-radius:6px;
      background: rgba(255, 255, 255, 0.1) !important;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }

    .table td, .table th {
      text-align: center;
      color: white !important;
      border-left: none;
      border-right : 1px solid rgba(255, 255, 255, 0.2);
      border-bottom : 1px solid rgba(255, 255, 255, 0.2);
      background-color: transparent !important;
    }

    td:last-child, th:last-child {
      border-right: none;
    }
    tr:last-child td{
      border-bottom: none;
    }
  }




 /* ============================================================================================ */
 /* ========================================= Profile ========================================= */
 /* ============================================================================================ */

 /* Profile Main */

 .profile-main{

    /* main */
    .nav-pills .nav-link.active  {
      border: none;
      background :white;
      color : black;

    }
    .nav-pills .nav-link{
        border-radius: 0;
      color : white;
      border-bottom: 1px solid white;
    }

    /* Address */
    .list-group-item {
        color:white;
        background: transparent;
    }

    /* Profile Inputs */
    /* ::placeholder   {
      color: white !important;
      opacity: 1;
    }

    .form-control{
      background-color: transparent;
      color : white;
    }

    .form-control:focus {
      border-color: white;
      box-shadow: none;
    } */

    /* .form-check-input:checked {
        background-color: #ffc107;
        border-color: #ffc107;
    } */

    /* order */
    .order-tab{
      .table {
        border-collapse:separate;
        border : 1px solid white !important;
        border-radius:6px;
      }

      .table td, .table th {
        text-align: center;
        color: white !important;
        border-left: none;
        border-right : 1px solid white;
        border-bottom : 1px solid white;
        background-color: transparent !important;
      }

      td:last-child, th:last-child {
        border-right: none;
      }
      tr:last-child td{
        border-bottom: none;
      }
    }
   }



 /* ============================================================================================ */
 /* ========================================= Checkout ================================== */
 /* ============================================================================================ */

.checkout1{
    .nav-tabs .nav-link.active{
        color : black;
        background: white;
    }
    .nav-tabs .nav-link{
        color : white;
    }

    .list-group-item {
        color: white;
        background: transparent;
    }

    .table th {
        text-align: end;
        border : 2px solid white;
    }
    .table td {
        text-align: end;
        color:white;
        background-color: transparent !important;
    }
}

 /* ============================================================================================ */
 /* ========================================= Login, Register ========================================= */
 /* ============================================================================================ */
 .login-section{
    /* .bg-theme {
        background : url("../img/body-gray6.png");
        background-attachment: fixed;
        background-size: 300px;
        background-position: center;
    } */

    /* .glass-bg {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 10px;
    } */

  }



/* -----------------------------------------  ==  END ==  ----------------------------------------- */

/* ============================================================================================ */
/* ========================================= Error ========================================= */
/* ============================================================================================ */


    /* Cake Illustration */
    .cake-img {
        max-width: 60%;
        height: auto;
        animation: float 3s ease-in-out infinite;
    }

    /* Floating Animation */
    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }

    /* Buttons */
    .btn-theme {
        border: 1px solid white;
        color : white;
        transition: transform 0.3s ease-in-out;
    }

    .btn-theme:hover {
        background: white;
        color: black;
        transform: scale(1.05);
    }


/* -----------------------------------------  ==  END ==  ----------------------------------------- */

/* Inputs */

::placeholder   {
    color: white !important;
    opacity: 1 !important;
  }

  .form-control{
    background-color: transparent  !important;
    color : white !important;
  }

  .form-control:focus {
    border-color: white !important;
    box-shadow: none !important;
  }

  .form-check-input:checked {
    background-color: black;
    border-color: white;
 }

 /* Pagination */

 .pagination{
    .page-link{
        color : white;
        background: var(--gray1);
    }
    .page-link:hover{
        color : black;
        background: white;
    }
 }


  /* Floating Animation */
  @keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
  }
.z-100{
    z-index: 100!important
}
.h-60
{
    height: 60vh!important;
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px;
    }
}
.cursor-pointer{
    cursor: pointer!important;
}
#toast-container>div{
    opacity:1!important;
}
.toast-success {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border: 1px solid #28a745 !important;
}
.toast-error {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border: 1px solid #dc3545 !important;
}
.toast-title {
    font-weight: bold;
}
.toast-message {
    font-size: 14px;
}
.select2-container--default .select2-selection--multiple{
    border: 1px solid #e0e5eb!important;
}

.select2-container .select2-search--inline .select2-search__field{
    margin-top: 0px!important;
}
.select2-dropdown{
    z-index: 1!important;
}
.select2-container .select2-selection--multiple{
    min-height: 32px!important;
}
.select2-results ul{
    gap: 0rem!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    margin-right: 0px!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    margin-right: 5px!important;
    margin-top: 5px!important;
    padding: 0 4px!important;
    color: whitesmoke!important;
    font-size: 14px!important;
    background-color: #4f5562 !important;
    border: 1px solid #4f5562 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color: #4f556287!important;
    color: white!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color: white!important;
}
.select2-search__field{
    width: 100%!important;
}
.select2-container--default .select2-selection--multiple{
    display: flex!important;
}
.select2-container .select2-selection--multiple{
    font-size: 10px;
    align-items: center;
    display: inline-grid;
    width: 100%;
}

@media (min-width: 992px) and (max-width: 1400px) {
    .custom-padding {
        padding: 0rem !important
    }
    .w-lg-100{
        width: 100%!important;
    }

}

@media screen and (min-width: 1400px) {
    .w-xl-50{
        width: 50%!important;
    }
}

.bg-custom-2{
    background: rgba(255, 255, 255, 0.1);
}

.bg-custom-1{
    background: darkgrey;
}

select.form-control option{
    color: black !important;
}