*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root{  
    /* This colors are standard pallet without rgba */
    --pink-mist-color: #F7DAE7;
    --rustic-red-color: #3e0014;
    --burgundy-color: #7a002b;
    --tyrian-purple-color: #5b002c;
    --cherry-soda-color: #d38c9d;
    --ruby-petals-color: #a55166;
    --bubblegum-pink-color: #e2b4c1;
/* rgba colors */
    --brown-coffee-color: rgb(70, 29, 58);
    --brown-chocolote-color: rgb(75, 21, 53);
    --old-lavender-color: rgb(113,85,122);
    --jacarta-color: rgb(58,52,91);
    --japanese-violet-color: rgb(80, 42, 80);
    --dark-raspberry-color: rgb(126, 42, 83);
    --pearly-puple-color: rgb(186, 113, 162);
    --classic-rose-color: rgb(236,208,236);
/* polished colors */
    --vanila-cream-color: #f0e7d5;
    --cream-color: #fefcef;
    --white-lotus-color: #fff9f2;
    --cream-white-color: #f8f6ed;
    --deep-burgundy-color: #66001f;
    --rich-rose-color: #66000e;
    --dark-raspberry-color: #570219;
}

/* Style for Banner */
.banner{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image:url(../images/backgound\ banner.png);
}
.banner img{
    height: 170px;
    width: 170px;
    margin: 1rem;
    box-shadow: var(--ruby-petals-color) 5px 5px 10px 5px;
    border-radius: 50%;
    background-color: white;
}
.banner h2{
    font-family: Sacramento, Roboto ;
    font-size: 2.4rem;
    width: max-content;
    margin: 1rem;
    color: var(--brown-coffee-color);
}

/* Stlye for Main Content */
/* image-content */
.container{
    display: flex;
    justify-content: center;
    padding: 2rem;
    background-color: var(--bubblegum-pink-color); 
 
}
.container .image-content img{
    height: 500px;
    width: 500px;
    aspect-ratio: 1;   
}
/* text-content */
.container .text-content{
    background-color: #fff2f7;
    padding: 0 5px;
    border-radius: 10px;
}
.container .text-content h2{
    padding: 0.5rem;
}
.container .text-content p{
    line-height: 1.3rem;
    padding: 10px;
}


/* Product Gallery Carousel Style */
.product-gallery{
    width: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: none;
    background-color: var(--pink-mist-color);
    padding: 2rem;
   
}
.bag{
    display: flex;
    flex: 0 0 auto;
    height: 210px;
    width: 200px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    margin: 0 1rem;
}
.bag img{
    height: 100%;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 15px;

}
.product-carousel{
    display: flex;
    width: max-content;
    animation: slide 20s linear infinite reverse;
}

@keyframes slide {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
    
}

/* Promo Style */
.promo-container{
    display:flex ;  
    justify-content: center;
    align-items: center;
    background-color: whitesmoke;
}
.promo{
    height: 500px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    margin: 2rem 5rem;
    border-radius: 3rem;
    overflow: hidden;
}
.promo .text{
    background-color: var(--rich-rose-color);
    grid-column: 1/3;
    grid-row: 1/4;
    z-index: 1;
    padding: 2rem;
    color: whitesmoke;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.promo .text h1{
    font-family: Playfair Display, Roboto, sans-serif;
    font-size: 2.3rem;
}
.promo .text h2{
    padding:1.5rem 0 1.5rem ;
    font-size: 1.8rem;
}
.promo .text p{
    font-size: 1rem;
    margin-bottom: 0.7rem;
}
.promo .text a{
    font-size: 1.3rem;
    font-weight: bold;
   text-decoration: none;
    color: white; 
    padding: 1rem;
    border: none;
    border-radius: 10px;
    width: max-content;
    background: rgb(255, 166, 0);
    transition: all 0.5s;
}
.promo .text a:hover{
    background-color: var(--vanila-cream-color);
    color: var(--deep-burgundy-color);
    cursor: pointer;
}
.promo .centerpiece{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 2/4;
    grid-row: 2/3;
    z-index: 3;
}
.promo .centerpiece img{
    height: 350px;
    width: 350px;
}
.promo .velvet-side{
    background-image: url(../images/Palettes/pearlescent.jpg);
    background-size: cover;
    grid-column: 3/4;
    grid-row: 1/4;
    z-index: 1;
}
.promo .text span{
    font-size: 12px;
    margin-top: 0.5rem;
    color: var(--cream-white-color);
}


/* Signature */
.signature-container{
    width: 100%;
    padding: 3rem 0rem;
    height: max-content;
    text-align: center;
    background: #f7dae7;
}
.signature-container h1{
    font-size: 8.5rem;
    font-family: Playfair Display, Roboto, sans-serif;
    letter-spacing: 2rem;
    text-transform: uppercase;
    font-weight: 700;
}
.signature-container h1 i{
    font-size: 5rem;
    animation: blink 2s linear infinite;
}
.swebaura h1{
    font-size: 3rem;
    padding: 3rem;
    letter-spacing:1rem;
    font-weight: bold;
}

@keyframes blink{
    0%{
        color: black;
    }
    10%{
        color: orange;

    }
    20%{
        color: rgb(222, 26, 222);
    }
    30%{
        color: red;
    }
    50%{
        color: pink;
    }
    70%{
        color: green;
    }
    80%{
        color: rgb(0, 38, 255);
    }
    100%{
        color: black;
    }
}

/* Footer Style */
footer{
    background: black;
    color: white;
    padding: 2rem;
}
.footer-container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 2rem;
}
.footer-container .nav-section a{
    text-decoration: none;
    color: white;
    line-height: 2rem;
    font-weight: bold;
}
.footer-container .nav-section i{
    font-size: 14px;
    padding-right: 1.5rem;
    color: rgb(255, 60, 125);

}
.footer-container .nav-section li{
    list-style: none;
}
.footer-container .shop-logo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.shop-logo .logo{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 20px ;
}
.shop-logo .logo h2{
    font-family: Parisienne, Roboto, sans-serif;
    font-size: 2.5rem;
}
.shop-logo .logo img{
    height: 100px;
    width: 100px;
    border-radius: 50%;
}
.footer-container.shop-logo .follow-us{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.shop-logo .follow-us p{
    font-size: 1rem;
    text-align: center;
}
.follow-us em{
    color: var(--pink-mist-color)
}

.shop-logo .follow-us .socials{
    margin-top: 12px;
}
.shop-logo .follow-us a{
    font-size: 2rem;
    margin: 0 7px;
    color: var(--white-lotus-color);
    transform: color 1s;
}
.shop-logo .follow-us a:hover{
    color: rgb(255, 60, 125);
} 

footer .address{
    line-height: 2.3rem;
}
footer span{
    color: #ded6dace;
    margin: 2.5rem 2.5rem 1rem;
    line-height: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
footer span a{
    margin-top: 1rem;
    color: rgb(81, 81, 255);
    font-size: 15px;
    font-weight: 600;
}



/* MEDIA QUERIES */
@media(max-width:1210px){
    .promo .centerpiece img{
        max-height: 300px;
        max-width: 300px;
    }
    .promo .centerpiece{
        grid-column: 3/4;
        grid-row: 2;
        border-radius: 3rem;
    }
}
@media(max-width:1220px){
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        padding: 2rem;
    }
    .container .image-content{
        order: 2;
    }  
    .promo{
        margin: 2rem 1rem;  
        grid-template-columns: none;
        grid-template-rows: none;
    }
    .promo .text{
        grid-column: 1/2;
        grid-row: 1/4;
        padding: 2rem;
    }
    .promo .text h1{
        font-size: 2rem;
    }
    .promo .text h2{
        font-size: 1.4rem;
    }
    .promo .text p{
        font-size: 1.2rem;
    }
    .promo .text button{
        font-size: 1.3rem;
    }
    
    .promo .centerpiece{
        grid-column: 2/4;
        grid-row: 1/4;
        border-radius: 3rem;
    }
    .promo .velvet-side{
        grid-column: 2/4;
        grid-row: 1/4;
    }
        
    .signature-container h1{
        font-size: 2.5rem;
    }
    .signature-container h1 i{
        font-size: 3rem;
    }
    .swebaura h1{
        font-size: 1.5rem;
        padding: 3rem 0rem;
    }
    
}

@media(max-width:1060px){
 
    .promo .text{
        grid-column: 1/4;
        grid-row: 1;
        padding: 1rem;
    }
    
    .promo .text h1{
        font-size: 1.8rem;
    }
    .promo .text h2{
        font-size: 1.2rem;
    }
    .promo .text p{
        font-size: 1rem;
    }
    .promo .text button{
        font-size: 1.1rem;
    }
    .promo .centerpiece{
        grid-column: 1/4;
        grid-row: 2;
    }
    .promo .centerpiece img{
        max-height: 230px;
        max-width: 230px;
    }
    .promo .velvet-side{
        grid-column: 1/4;
        grid-row: 2;
        border-radius: 0 0 3rem 3rem;
    }   
    .container .image-content img{
        height: 100%;
        width: 100%; 
    }
}

@media(max-width:830px){
    .container{
        padding: 2rem 0.5rem;
    }
    .footer-container{
        justify-content: inherit;
        flex-flow: column;
        padding: 2rem 0.5rem;
    }
    .footer-container .nav-section ul{
        display: flex;
        padding: 2rem 0.2rem;
        gap: 1rem;
    }
    .footer-container .nav-section ul a{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    .shop-logo .follow-us{
        padding: 1.5rem 0.5rem;
    }
    .shop-logo .logo img{
        height: 50px;
        width: 50px;
    }
    .signature-container h1{
        letter-spacing: 1rem;
    }
    .swebaura h1{
        letter-spacing: 0.5rem;
    }
}
@media(max-width:677px){
    .promo .centerpiece img{
        max-height: 215px;
        max-width: 215px;
    }
     .promo .text h1{
        font-size: 1.5rem;
    }
}

@media(max-width:450px){
    .promo .centerpiece img{
        max-height: 200px;
        max-width: 200px;
    }
}