*{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
image{
    width: 100%;
}

/* header nav */
#logoImg{
    max-width: 150px;
    max-height: 70px;
    object-fit:cover;
}

@media(min-width: 768px){
    #logoImg{
         max-width: 300px;
    }
}

#heroSec{
    width: 100%;
    min-height: 85vh;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: linear-gradient(to right, #FDF6EC 50%, #FDE68A 100%);
    padding-top: 35px !important;
    position: relative;
}
#heroSec .writeup h1{
    font-size: 40px;
}

#productImg{
    padding-top: 20px;
}
#productImg > img{
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    object-position: center;
    animation: bubbleUp 8s ease-in-out infinite;

}
#heroSec > div{
    width: 100%;
}
@media (min-width: 768px) {
    #heroSec{
        flex-wrap: nowrap;
    }
    #heroSec > div:nth-of-type(1){
        max-width: 60%;
    }
    #heroSec > div:nth-of-type(2){
        max-width: 40%;
    }
    #productImg > img{
        max-width: 500px;
        max-height: 500px;
        min-height: 400px;
    }
    #productImg{
        padding-top: 0;
    }
 }


 .icon {
  position: absolute;
  opacity: 0.15;
  animation: float 6s ease-in-out infinite;
    width: 60px;
  height: 60px;
  fill: #facc15; /* golden yellow */
  opacity: 0.4;
}

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




@keyframes bubbleUp {
  0% { transform: translateY(0) scale(1); opacity: 0.8; }
  50% { transform: translateY(-20px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0.8; }
}


#productSec{
    padding: 30px 0;
    min-height: 90vh;
}
#productSec .menu-img{
    width: 100%;
    max-width: 420PX;
    max-height: 400PX;
    object-fit: cover;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#productSec .card{
    width: 100%;
    /* height: 300px; */
    max-width: 400px;
}
#productSec .card .card-img-top{
    width: 100%;
    height: 65%;
    object-fit: cover;
}
#productSec .row{
    gap: 9px;
}
@media (min-width: 768px) {
    #productSec .menu-img{
        max-width: 400px;
        max-height: 400px;
    }
    #productSec .row .col-md-5 .writeup{
        max-width: 400PX;
    }
    #productSec .card{
        max-width: 250px;
        height: 256px;
    }
    #productSec .row{
        gap: 0;
    }
 }

 .order-btn{
    text-decoration: none;
    padding: 5px;
    display: inline-block;
    width: 100%;
    max-width: 200px;    
    margin: 2px auto;
    color: #FDF6EC;
    border-radius: 4px;
    background-color: #c5453c;
 }

 #location{
    min-height: 55vh;
    display: flex;
    align-items: center;
    background-color: #FDF6EC;
    padding-bottom:60px;
 }
 #location > .container > .row-c{
    display: flex;
    gap: 10px;
    flex-direction: column-reverse;
 } 
 @media (min-width: 768px) {
    #location{
        min-height: 100vh;
    }
     #location > .container > .row-c{
        flex-direction: row;
     }
 }
 footer{
    background-color: #000;
    color:#fff;
 }
 footer svg{
    color: #FDF6EC;
    transition: all 0.3s ease-in-out;
 }
 footer svg:hover{
    color: #c5453c;
 }





         /* Loading Screen Styles */
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
        }

        .loading-content {
            text-align: center;
            animation: fadeInUp 1s ease-out;
        }

        .loading-logo {
            max-width: 150px;
            margin-bottom: 20px;
            animation: pulse 2s infinite;
        }

        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #d97706;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }



/* aboutus */

#aboutUs{
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  /* padding-left: 5%; */
    /* background-color:  #FDF6EC; */

}
#aboutUs img,
#contact img
{
    max-height: 350px;
    object-fit: cover;
    border-radius: 7px;
}

#aboutUs .badge {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  width: fit-content;
}


#contact{
    min-height: 100vh;
    padding-bottom: 40px;
}

#contact .btn-custom{
    background-color: #c5453c;
}

.navbar-nav{
    position: absolute;
    background-color: #fff;
    z-index: 9;
    top:70px;
    left: 0;
    right: 0;
    padding: 7px;
    padding-bottom: 40px;
}
@media(min-width:768px){
    .navbar-nav{
        position: relative;
        padding-bottom: 0;
        top: 0;
    }
}