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

body{
    font-family: Roboto, sans-serif, Arial, Helvetica;
    background-color: var(--pink-mist-color);
}
: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;
    --classic-taupe-color: rgba(50, 50, 8, 0.862);
/* 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;

/*CATALOGUE COLOR OPTIONS  */
--caramel-brown-color:rgb(137, 87, 17);
--taupe-color: rgba(46, 34, 6, 0.914);
--khaki-color: rgba(213, 205, 186, 0.964);
--creme-white-color: rgb(253, 242, 227);
--pink-color: rgba(254, 214, 221, 0.844);
--chocolate-color: rgba(134, 72, 33, 0.985);
--pale-khaki-green-color: rgba(212, 205, 172, 0.778);
}

/* HEADER STYLE */
/* Banner Style */
.header{
    position: sticky;
    top: 0;
    background-color: var(--pink-mist-color);
    z-index: 100;
}
.news-container{
    display: flex;
    background-color: black;
    overflow: hidden;
    gap: 3rem;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 5% 95%,
        transparent
    );
}
.news{
    display: flex;
    flex-shrink: 0;
    gap: 3rem;
    min-width: 100%;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.7rem 0 ;
    color: var(--white-lotus-color);
    background-color: black;
    animation: news 25s linear infinite;
}
.news p{
    color: var(--white-lotus-color);

}

@keyframes news {
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(calc(-100% - 2rem));
    }
    
}

.banner{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 1rem 0;
    gap: 2rem;
    background-color: var(--pink-mist-color);
}
.banner img{
    height: 85px;
    width: 85px;
    border-radius: 50%;
    box-shadow: 3px 3px 6px 3px #0000004a;
}
.banner h1{
    font-family: Parisienne;
    font-size: 3rem;
    color: var(--dark-raspberry-color);
}

/* Navbar style */
nav ul{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
    background-color: var(--deep-burgundy-color);
    padding: 1.5rem 0;
}
nav ul a{
    text-decoration: none;
    color: var(--white-lotus-color);
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0.7rem;
    border-radius: 15px;   
    text-transform: uppercase;
    transition: all 1s;
}
nav ul a:hover{
    background-color: var(--white-lotus-color);
    color: var(--deep-burgundy-color);
}
nav ul span{
    border-radius: 15px;
    box-shadow: 3px 3px 6px 3px #3131314a;
    transition: all 1s;
}
nav ul span a{
    background-color: var(--cream-white-color);
    color: var(--deep-burgundy-color);  
    font-size: 1.3rem;
    padding: 0.8rem 1.5rem;
    font-weight: 600;
    transition: all 0.5s;
}
nav ul span:hover a{
    background-color: rgba(255, 166, 0, 0.845);
    color: var(--white-lotus-color);
    border: 1px solid var(--white-lotus-color);
}
nav ul span a i{
    font-size: 1.1rem;
    animation: change-color 0.7s linear 10;
}
@keyframes change-color {
    0%{
        color: var(--white-lotus-color);
    }

    to{
        color: var(--deep-burgundy-color);
    }
}
/* Greeting style */
.greeting h1{
    text-align: center;
    padding: 1.5rem 0;
    font-size: 3rem;
    word-spacing: 1.5rem;
    font-family: Playfair Display;
    position: relative;
    color: var(--deep-burgundy-color);
}

/* MAIN CONTENT STYLE */
/* Shop Catalogue List style */
.category-title{
    background-color: var(--white-lotus-color);
    padding: 1rem 1.5rem;
    color: var(--deep-burgundy-color);
    text-align: center;
}
.category{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    place-items: center;
    background-color: var(--bubblegum-pink-color);
}
.category img{ 
    height: 270px;
    width: 250px;
    aspect-ratio: 1;
    background-color: var(--white-lotus-color);
    border-radius: 15px;
    margin-bottom: 12px;
    box-shadow: 5px 5px 7px 3px #0000004a;
}
.category .item .text-area{
    background-color: var(--cream-color);
    margin-bottom: 2rem;
    border-radius: 10px;
    box-shadow: 5px 5px 7px 3px #0000004a;
}
.category .item .text-area h4{
    padding: 10px 10px 0;
}
.category .item .text-area p{
    padding: 0 10px;
}
.category .item span{
    color: #fb1212ce;
    padding: 0 10px 1rem;
    font-size: 14px;
}
.category .item .line-through{
    color: #fb1212ce;
    text-decoration: line-through;
    padding: 0 10px 1rem;
    font-size: 14px;
}
.shop-now-btn{
    background-color: var(--cream-color);
    color: #570219;
    box-shadow: 1px 1px 1px 2px #e2b4c1;
    border-radius: 13px;
    border: none;
    margin: 0rem 1rem 1rem;
    padding: 0.5rem 1rem;
    transition: box-shadow 0.5s;
}
.shop-now-btn:hover{
    box-shadow: 1px 1px 1px 2px #f9a722;
    cursor: pointer;
}
.shop-now-btn a{
    display: block;
    color: inherit;
    text-decoration: none;
}
.item-colors .text-area .color-icons{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 1rem;
}
.item-colors .text-area .color-icons button{
    margin: 0;
}

/* Caramel Blush Colors Available */
.item-colors .text-area .color-icons .caramel-brown{
    color: var(--caramel-brown-color);
}
.item-colors .text-area .color-icons .taupe{
     color: var(--taupe-color);
}
/* Plush Snow Colors Available */
.item-colors .text-area .color-icons .white{
    color: var(--creme-white-color);
}
.item-colors .text-area .color-icons .khaki{
     color: var(--khaki-color);
}
/* Cream Classy Colors Available */
.item-colors .text-area .color-icons .white{
    color: var(--creme-white-color); 
}
.item-colors .text-area .color-icons .caramel-brown{
     color: var(--caramel-brown-color); 
}
/* Floral Petite Colors Available */
.item-colors .text-area .color-icons .pink{
    color: var(--pink-color); 
}
.item-colors .text-area .color-icons .chocolate{
     color: var(--chocolate-color);
}
/* Duchess Colors Available */
.item-colors .text-area .color-icons .pale-khaki-green{
    color: var(--pale-khaki-green-color); 
}
.item-colors .text-area .color-icons .pink{
     color: var(--pink-color); 
}



/* 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 Style */
.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;
    text-decoration: none;
}



/* MEDIA QUERIES */
@media(max-width:650px) {
    nav ul a{
        font-size: 1.1rem;
    }
    nav ul span{
        padding: 0.5rem;
    }
    nav ul span a{
        font-size: 1rem;
    }
    nav ul span a i{
        font-size: 0.8rem;
    }
    .news p{
        font-size: 0.8rem;
    }
}
@media(max-width:950px){
.greeting h1{
    font-size: 2rem;
    padding: 1rem;
    word-spacing: 0.5rem;
}
}
@media(max-width:430px){
    nav ul a{
        font-size: 0.9rem;
    }
    nav ul span a{
        font-size: 0.9rem;
    }
    nav ul span a i{
        font-size: 0.8rem;
    }
    .banner{
        gap: 1rem;
    }
    .category-title{
        font-size: 1.55rem;
    }
}
@media (max-width: 483px){
    nav ul a{
        font-size: 0.9rem;
    }
    nav ul span a{
        font-size: 0.8rem;
        padding: 0.6rem 1rem;
    }
}
@media (max-width: 405px){
    .banner img{
        height: 65px;
        width: 65px;
    }
    .banner h1{
        font-size: 2rem;
    }
    nav ul{
        padding: 1.2rem 0;
    }
    nav ul a{
        font-size: 0.7rem;
    }
    nav ul span a{
        font-size: 0.7rem;
    }
    nav ul span a i{
        font-size: 0.6rem;
    }
    .greeting h1{
        font-size: 1.5rem;
    }
}
@media (max-width: 346px){
    nav ul a{
        font-size: 0.7rem;
    }
    nav ul span a{
        font-size: 0.6rem;
    }
    nav ul span a i{
        font-size: 0.5rem;
    }
}
@media (max-width: 336px){
    nav ul a{
        font-size: 0.6rem;
    }
    nav ul span a{
        font-size: 0.5rem;
    }
    nav ul span a i{
        font-size: 0.5rem;
    }
}

/* MEDIA QUERIES FOR PROMO SIGNATURE AND FOOTER SECTIONS */
@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;
    }
}