body {
    font-family: 'Poppins', sans-serif !important;
    scroll-behavior: smooth;
}
#hero{
    background-image: url('assets/hibiscus.jpg');
    background-size: cover;
    height: 100vh;
    padding: 0;
   display: flex;
    align-items: center;
    justify-content: center;
}
nav{

 font-size: clamp(1rem, 1.5vw, 2.5rem);
}
h1,h3{
    font-family: Oleo Script, sans-serif;
}
h2{
    font-family: Oleo Script, sans-serif;
   font-size: clamp(2rem, 3vw, 4.5rem) !important;
}
.navbar-logo{
    width:40px;
}

/*go to Contact Us button design*/
.contact-btn{
    font-size: clamp(1rem, 1vw, 1.5rem) !important;
    background-color: #ffd700 !important;
    font-weight: 500 !important;
}
.contact-btn:hover{
    border-color: #ffd700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8) !important;
    transform: translateY(-2px);
    color:#e9ecef !important;
}

/*about us section  */
#about-container{
    padding-top: 50px !important;
}
    /* Polaroid design */
    .polaroid-container {
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
    }       
    .polaroid-item {
        background: white;
        padding: 15px 15px 20px;
        border-radius: 5px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        transform: rotate(-2deg);
        transition: transform 0.3s ease;
        max-width:250px
    }   
    .polaroid-item:nth-child(even) {
        transform: rotate(2deg);
    }   
    .polaroid-item:hover {
        transform: rotate(0deg) scale(1.05);
    }       
    .polaroid-img {
        width: 200px;
        height: 170px;
        object-fit: cover;
        border: 1px solid #e9ecef;
    }
    .polaroid-caption {
        text-align: center;
        margin-top: 15px;
        font-style: italic;
        color: #6c757d;
    }

    /* sample artworks section */
#artworks{
   width: 90%; 
}
#artworks img{
    width: 100%;
    padding: 10px;    
}
#service div img{
  width: 20%;
}
#service p{
    margin: 0 !important;
}

/* contact us section */
a:hover{
    color: gray !important;
}
footer a{
    margin-top: 15px;
    color: white !important;
}
footer a i{
   font-size: clamp(2rem, 2vw, 7vw);
   margin-left: 2rem; 
}