@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Meddon&family=Oswald:wght@200..700&family=Outfit:wght@100..900&family=Playball&family=Poppins:wght@200;300;400;500;600&family=Roboto+Slab:wght@100..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
html {
  scroll-behavior: smooth;
}
/* topBar Header style */
.main-container{
     background-color: #444444; 
    background-image: linear-gradient(to right, #b11e20, #823a39);
}
.topbar-text {
    line-height: 2;
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bold;
}

@media (max-width: 767.98px) {
    .topbar-text {
        font-size: 13px;
        line-height: 1.5;

    }
}

/* logo image */
.logo-image{
    text-align: center; 
    display: block;
}
.logo-img {
    max-width: 100px;
    max-height: 100px;
    display: inline-block;
    /* margin-top:-55px */
}


/* navbar style here */
/* Navbar background */
.navbar {
  background: #ffc107 !important;
}

/* Default nav link style */
.navbar-nav .nav-link {
  font-size: 14px;
  font-weight: 500;
  color: black;
  transition: all 0.3s;
  text-transform: uppercase;
}

.navbar-nav .nav-link span {
  margin-left: 10px;
}

.navbar-nav .nav-link:hover {
  color: #823a39;
}

/* Offcanvas link hover */
.offcanvas-body .nav-link:hover {
  color: #b11e20;
}

/* Menu button style */
.btn-bar {
  font-size: 30px;
}

/* Mobile view styles */
@media (max-width: 991px) {
  .offcanvas-body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertical center */
    align-items: center;     /* Horizontal center */
    height: 100%;            /* Take full height of offcanvas */
  }

  .offcanvas-body .navbar-nav {
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Space between menu items */
  }

  .offcanvas-body .nav-link {
    font-size: 18px;
    color: white;
    font-weight: 500;
    padding: 10px 0;
  }

  .nav-link span {
    display: none; /* Hide the "|" dividers on mobile */
  }
}

/* Very small screens fix */
@media (max-width: 480px) {
  .btn-bar {
    font-size: 26px;
  }
}

.home-banner{
    background: url('../Images/product-banner.jpg') no-repeat center center;
    background-size: cover;
    height: 75vh; 

}

/* navbar below 3 cards */

.custom-img {
  width: 100%;       /* full width by default */
  height: auto;     /* fixed height on large screens */
  object-fit: cover; /* crop nicely */
  display: block;
}
.nav_below_three_card img {
    display: block;
    max-width: 100%;
    height: 100%; /* Keeps image aspect ratio */
    border-radius: 8px; /* Optional: rounded corners */
    object-fit: cover; /* Ensures image fills container nicely */
}

/* 📱 On small screens, make the image smaller */
@media (min-width: 768px) and (max-width: 1280px) {
  .custom-img {
    height: 100%;    /* shorter height for small devices */
  }
  .nav_below_three_card .col-lg-4 div{
    overflow:hidden;
    width: 100% !important;
    height : 100% !important;
  }
}

@media (max-width: 576px) {
  .custom-img {
    height: auto;    /* even smaller for mobile */
  }
}

/* nav-below-price-card */

.nav-below-price-card{
background: linear-gradient(to right, #ff6a00, #ee0979);}
.btn-view{
    background-color: #F91D1D;
    font-size: 15px;
    font-weight: bold;
}
.btn-view:hover{
     background-color: #333333;
 
}
@media (max-width: 1035px) {
   .nav-below-price-card .img-div{
    width: 200px !important;
    height: 200px !important;
   } 
}
@media (max-width: 767px) {
  .small-response {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        gap: 15px;
        text-align: left;
    }

  .small-response .img-div {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
  }

  .small-response .text-div {
    text-align: left;
  }
}
@media (max-width: 575px) {
  .small-response {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .small-response-img-below-text{
        text-align: center;
    }
  .small-response .img-div {
    width: 350px !important;
    height: 350px !important;

  }
   .small-response .img-div img{
    width:100% !important;
    height:auto !important;
        flex-shrink: 0;

   }
   .nav-below-price-card .col-sm-12{
    margin-bottom: 20px !important;
   }
}

/* <!-- price 3 cards below Red_container --> */
.price-below-container{
    background-color: #f43206 !important;
    color: #ffffff;
}
.price-below-container .sivan-p-text{
     font-size: 18px;
     width: 85%;
     line-height: 2;

}
.price-below-container .sivan-p-about{
    font-size: 18px;
    letter-spacing: 2px;

}
.btn-discount{
    background-color: #333333;
        color: #ffffff;
     font-size: 15px;

}
.btn-discount:hover{
    background-color: #fff !important;
    color: #333 !important;
    font-size: 15px;
}
/* <!-- red-container below continous 5 images --> */

.main-pattasu-div img{
    width:100%;
    height: 100%;
      object-fit: cover; /* crop nicely */
    /* display: block; */
}
@media (max-width: 767px) {
    .main-pattasu-div{
        display: flex;
        flex-direction: column;
    }
}
    /* our pricelist container */

.pricelist-container{
    background-image: url('../Images/price.jpg');
    color: #ffffff;

}
.pricelist-container .pricelist-div p{
    font-size: 15px;
letter-spacing: 2px;

}

/* Footer style here */
footer{
    color: #ffffff;
}
footer .footer-top-container {
background-image: linear-gradient(to right, rgba(237, 11, 15, 0.7), rgba(180, 29, 26, 0.7)), url('../Images/footer1.avif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: white;
}
footer ul li a{
    font-size: 23px;
}
footer .bottom-container{
    background-color: #621113;
    padding: 20px;
    color: #ffffff;
}
.bottom-container p{
    font-size: 14px;
         line-height: 2;

}
footer .address ul li, .footer-phone{
    line-height: 2;
    font-size: 20px;
}
footer .fa-brands{
    font-size: 30px;
}
.footer-content p{
        line-height: 2;
        font-size: 15px;

}
footer ul li a{
    margin-left: 30px;
}
@media (max-width: 1000px){
    footer ul li a{
    font-size: 25px;
}}

@media (max-width: 914px){
    footer ul li a{
    font-size: 23px;
}
footer .main-row ul{
    display: flex;
    flex-direction: column;
    gap: 25px;
}

}
@media (max-width: 493px){
    .footer-content{
        padding: 0 !important;
    }
}