@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
:root{
  --bs-primery-color: #af2167;
  --bs-second-color:#0c0402;
 --bs-red:#af2167;
  --bs-grey:#696567;
  --bs-yellow:#ffe8a1;

}

body{
   font-family: "Quicksand", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding:0px 200px 10px 200px;
}
h1, h2, h3,h4 {
    font-family: "Quicksand", sans-serif;
   
}

/* Navbar */
#menuIcon {
  transition: 0.3s ease;
}
.navbar-expand-lg {
    background-color: #fff;
}

.bi-x {
  transform: rotate(180deg);
}
.navbar{
    padding:0px 0;
}
.navbar-brand img{
width: 80%;
}
.navbar-brand span{
    color:#d63300;
    font-weight:700;
}

.navbar-expand-lg {
    flex-wrap: wrap;
}
.nav-link {
    font-size: 14px;
    padding: 0px;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show  {
    color: var(--bs-primery-color);
}
.nav-link:hover {
color: var(--bs-primery-color);
}
.navbar-toggler {
    border:0px!important;
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 0;
}
.navbar-expand-lg .navbar-nav {
  margin-right: 4%;
}
#heroCarousel{
    margin-top: 0px;
    padding: 0px 30px;
}
/* Hero Section */
/* Hero Slide */
.hero-slide{
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Dark overlay (optional if needed) */
.hero-slide::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    
}
.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}
.heropadtop {
    padding-top: 180px;
}
.hero-img {
    padding-top: 0px;
  

}
.justify-content-right {
    justify-content: right;
}
.carousel-indicators [data-bs-target] {
    border-top: 0px;
    border-bottom: 0px;
}
.carousel-indicators {
    justify-content: left;
    margin-left: 5%;
    bottom: 20px;
}
/* Content */
.hero-content{
    position:relative;
    z-index:2;
    animation: slideUp 1s ease-in-out;
}

.hero-content h1{
    font-size:45px;
    font-weight:700;
    color:var(--bs-primery-color)
}

.hero-content h4{
    font-weight:500;
    color:var(--bs-grey);
    margin-bottom:20px;
}

.hero-content p{
    color:#444;
    margin-bottom:20px;
    font-size: 15px;
}

/* Button */
.btn-buy{
    border:2px solid #d63300;
    color:#d63300;
    padding:10px 30px;
    border-radius:50px;
    font-weight:600;
    transition:0.3s;
}

.btn-buy:hover{
    background:#d63300;
    color:#fff;
}

/* Animation */
@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Carousel Indicators */
.carousel-indicators [data-bs-target]{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#000;
}

.carousel-indicators .active{
    background:#d63300;
}

/* Responsive */
@media(max-width:991px){
    .hero-content h1{
        font-size:38px;
    }
    .hero-slide{
        text-align:center;
    }
}
/* Keyframes */
@keyframes slideInLeft{
    from{
        opacity:0;
        transform:translateX(-50px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes float{
    0%{transform:translateY(0);}
    50%{transform:translateY(-15px);}
    100%{transform:translateY(0);}
}

/* Responsive */
@media(max-width:991px){
    .hero-title{
        font-size:36px;
    }
    .hero-section{
        text-align:center;
    }
}

@media screen and (max-width: 992px) {
.topbaritems {
    display: block;
}
.rightalign {
    text-align: right;
    padding-right: 25px;
}
.navbar-brand  {
    width: 70%;
}
.navbar-brand img{
width: 65%;
padding-left: 0px;
}
.hero-img {
  padding: 0px;

    height: auto;
    
    


}
.hero-img img {
  height:68vh;
  object-fit: cover;
}
.carousel-indicators {
  bottom: 30px;
  left: 10%;
}
.heropadtop {
    padding-top: 10px;
}
.hero-slide{
    height: auto!important;
    background-size: cover;
    background-position: center;
    position: relative;
}
.carousel-indicators {
margin-bottom: -1.5rem;
}

#heroCarousel {
    margin-top: 0px;
}
#heroCarousel {
   padding: 0px 30px;
}
.nav-item {
    padding: 8px 0px;
    border-bottom: solid 1px;
    border-color: var(--bs-grey);
}
}
.dropdown::after {
    box-sizing: content-box;
}
.dropdown::before {
    box-sizing: content-box;
}
@media (min-width: 992px) {

    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }

    /* Submenu positioning */
    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: 0;
        display: none;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }


}

/* Dropdown styling */
.dropdown-menu {
    border-radius: 0px;
    padding: 10px 0;
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.dropdown-item {
    padding: 8px 20px;
    transition: 0.3s;
    font-size: 14px;
}

.dropdown-item:hover {
    background: var(--bs-primery-color);
    color: #fff;
}
*::after {
  box-sizing: border-box;
}

/* Desktop hover dropdown */
@media (min-width: 992px) {

  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }

  .dropdown-submenu {
    position: relative;
  }

  .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    display: none;
  }

  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
}



/* HERO SECTION */

/* ANIMATIONS */
@keyframes slideLeft{
  from{
    opacity:0;
    transform:translateX(-60px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes slideRight{
  from{
    opacity:0;
    transform:translateX(60px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes float{
  0%{ transform:translateY(0px); }
  50%{ transform:translateY(-20px); }
  100%{ transform:translateY(0px); }
}

/* RESPONSIVE */
@media(max-width:991px){

}



#navbar.scrolled {
    background-color: #fff; /* Change to your desired color */


}

.carousel-caption {
  position: absolute;
  right: 15%;
  top: 5%!important;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: center;
}
.carousel-caption h2{
font-size: 50px;
font-weight: 300;
}

.social-toggle-btn {
  position: absolute;
  right: 20px;
  top: 25px;
  width: 40px;
  height: 40px;
  border: 0px solid #b89b5e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
}

.social-toggle-btn i {
   color:var(--bs-primery-color);
}

.social-bar {
  position: fixed;
  right: -60px;
  top: 30%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: 0.4s ease;
}

/* Active State */
.social-bar.active {
  right: 20px;
  z-index: 10000;
}

/* Icons */
.social-bar a {
  width: 40px;
  height: 40px;
  border: 1px solid #414141;
  display: flex;
  align-items: center;
  justify-content: center;
  color:var(--bs-primery-color);
  background: #fff;
  text-decoration: none;
}

.social-bar a:hover {
  background: var(--bs-primery-color);
  color: #fff;
}
.carouselpad {
  padding-bottom: 30px !important;
}
@media screen and (max-width: 992px) {
.social-toggle-btn {
  position:absolute;
  right: 20px;
  top: 25px;
  width: 40px;
  height: 40px;
  border: 0px solid #b89b5e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
}
.navbar-toggler {
  margin-right: 40px;
}
.carouselpad {
  padding-bottom: 0px !important;
}

}


#menuIcon {
  transition: transform 0.3s ease;
}

.navbar-collapse.show ~ .navbar-toggler #menuIcon {
  transform: rotate(180deg);
}

.carousel-control-next, .carousel-control-prev {
    width: 10%!important;
}

@media screen and (max-width: 992px) {
.carousel-control-next, .carousel-control-prev {
    width: 30%!important;
}
.carousel-caption h2 {
    font-size: 30px;
}
body{
   font-family: "Quicksand", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding:0px ;
}


}
@media screen and (min-device-width: 394px) and (max-device-width: 992px) { 
    /* STYLES HERE */

    .hero-img {
        height: 100%;
        background-color: #000;
       
        object-fit: contain;
    }
     .hero-img img{
        height: 100%;
        background-color: #000;
    }
    #heroCarousel{
        margin-bottom: 30px;
    }
    .navbar-brand img {
    width: 35%;
    padding-left: 0px;
  }
  .sticky-top {

  position:relative!important;
  top: 0;
  z-index: 1020;
}

}