@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Jost", sans-serif;  
} 
:root {
    /* Colors */
    --primary-color: #160b03;
    --secondary-color: #f1aa04;
    --dark-color: #252525;
    --white-color: #fff;
    --light-gray-color: #f2f2f2;
    --header-footer:#073986;

    /* Site Max-Width */
    
}
.navbar{
    background: #f1045b;
}

.bell{
    font-size: 12px;
    transition: all .3s ease;
}

.hero{
    background-color: #f5f4f4;
    box-shadow: 0px 4px 6px #00000086;
    z-index: 1000;
}

.fa-user{
    transition: all .3s ease;
    &:hover{
        transform: scale(1.3);
        color: #ededed;
    }
}

.fa-gift, .branded, .fa-clock, .fa-handshake{
    color: #f1045b;
}

.fa-award{
    color: #000000da;
}

.fa-handshake{
    color: #9b01be;
}

.fa-headset{
    color: #ff6200;
}

.fa-print {
    background: linear-gradient(
        90deg,
        #00ffff,
        #ff00ff,
        #ffff00,
        #000000
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fa-shirt{
    color: #03b900;
}





/* Navigation Menu */
.fixed-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    transition: top 0.5s ease-in-out;
    box-shadow: 0px 4px 6px #df003474; /* Adds a slight shadow */
    transition: transform 0.5s ease-in-out;
    transform: translateY(-100%);
}

.navbar-content{
    max-width: 1000px;
}

.show-nav {
    transform: translateY(0);
}

/* .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
   
} */

  
  /* Default style for nav links */
 .navbar-nav .nav-link {
    transition: all 0.3s ease; /* Smooth transition */
  }
  
  /* Hover effect for nav links */
  .navbar-nav .nav-link:hover {
    text-decoration: underline; /* Add underline effect (optional) */
    
  }
  
  
/* Slidefade Section */

.carousel-indicators [data-bs-target] {
    width: 15px; /* Dot size */
    height: 15px; /* Dot size */
    background-color: #002e73;
    border-radius: 50%; /* Make button circular */
    border: none; /* Remove border */
    margin: 0 5px; /* Add space between dots */
    transition: background-color 0.3s ease; /* Smooth hover effect */
  }
  
  .carousel-indicators button.active {
    background-color: crimson; /* Active dot color */
  }
  
  .carousel-indicators button:hover {
    background-color: #000; /* Dot color on hover */
  }



/* Text starts below and moves to center */
.carousel-item .carousel-caption {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.8s ease,
                transform 0.8s ease;
}

/* Animate text when slide becomes active */
.carousel-item.active .carousel-caption {
    opacity: 1;
    transform: translateY(0);
}






/* Slide image */
.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 25px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-pagination{
    width: 20px;
    height: 20px;
    font-size: 16px;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .swiper-button-next, .swiper-button-prev{
    transition: all .3s ease;
    font-weight: 700;
    font-size: 10px;
  }
  .swiper-button-next:hover, .swiper-button-prev:hover{
    background-color: #b4b4b4;
    
  }

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.8s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


.border-divider{
    width: 100%;
    height: 3px;

    background: linear-gradient(
    45deg,
    transparent,
    #f1045b,
    transparent

    );
    
}

/* ================Home Content Section===========*/
.product-main{
    max-width: 1100px;
    background: #f3f3f3;
    box-shadow: 2px 10px 20px 5px #00000068;
}

.product-image{
    cursor: pointer;;
    transition: all .4s ease;  
}
.product-image:hover{
    transform: scale(1.03);
    box-shadow: 2px 10px 20px 5px #00000089;
}

/* ============================================= */



/* ======Footer Section =========*/

.footer-content, .footer-bottom{
    max-width: 1100px;
}


footer a {
transition: all 0.3s ease;
}

footer ul li a:hover {
color: #ffc107 !important;
padding-left: 5px;
}

/* Social buttons */
footer .btn-outline-light {
transition: all 0.3s ease;
}

footer .btn-outline-light:hover {
transform: translateY(-4px);
background-color: #ffc107;
border-color: #ffc107;
color: #212529;
}

/* CTA button */
footer .btn-warning {
transition: all 0.3s ease;
}

footer .btn-warning:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 193, 7, 0.25);
}
/* ================================================ */