/*==================================================
    My Cake Book
    style.css
====================================================*/


/*==================================================
    Variables
====================================================*/

:root{

    --primary:#E8A8A8;
    --primary-dark:#D88D8D;
    --secondary:#FFF8F6;
    --dark:#43332F;
    --text:#6E6E6E;
    --white:#ffffff;
    --border:#F0E4E2;
    --shadow:0 15px 40px rgba(0,0,0,.08);

    --heading:'Cormorant Garamond', serif;
    --body:'Poppins', sans-serif;
    --script:'Allura', cursive;

}


/*==================================================
    Reset
====================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--body);
    color:var(--text);
    background:#fff;
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;
    padding:0;
    margin:0;

}

section{

    position:relative;
    padding:110px 0;

}

.container{

    max-width:1200px;

}


/*==================================================
    Typography
====================================================*/

.section-subtitle{

    color:var(--primary-dark);
    font-size:15px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;

}

.section-title{

    font-family:var(--heading);
    font-size:58px;
    color:var(--dark);
    margin:15px 0;

}

.section-description{

    max-width:650px;
    margin:auto;
    line-height:1.9;

}


/*==================================================
    Buttons
====================================================*/

.btn{

    border-radius:50px;
    padding:14px 34px;
    font-weight:500;
    transition:.35s ease;

}

.explore-btn{

    background:var(--primary);
    color:#fff;

}

.explore-btn:hover{

    background:var(--dark);
    color:#fff;
    transform:translateY(-4px);

}

.read-btn{

    background:var(--dark);
    color:#fff;

}

.read-btn:hover{

    background:var(--primary);
    color:#fff;

}


/*==================================================
    Navbar
====================================================*/

.navbar{

    padding:18px 0;
    transition:.35s;
    z-index:999;
    background:transparent;

}

.navbar.scrolled{

    background:#fff;
    padding:12px 0;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.navbar-brand img{

    height:62px;

}

.navbar-nav{

    gap:18px;

}

.nav-link{

    color:var(--dark);
    text-transform:uppercase;
    font-size:15px;
    font-weight:500;
    position:relative;
    transition:.35s;

}

.nav-link:hover,
.nav-link.active{

    color:var(--primary-dark);

}

.nav-link::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:var(--primary);
    transition:.35s;

}

.nav-link:hover::after,
.nav-link.active::after{

    width:100%;

}

.navbar-toggler{

    border:none;

}

.navbar-toggler:focus{

    box-shadow:none;

}


/*==================================================
    Hero Section
====================================================*/

.hero-section{

    min-height:100vh;
    background:var(--secondary);
    display:flex;
    align-items:center;
    overflow:hidden;
    position:relative;
    padding-top:120px;

}

.hero-bg{

    position:absolute;
    inset:0;
    background:url("../images/watercolor-bg.png") center center/cover;
    opacity:.15;
    z-index:0;

}

.hero-section .container{

    position:relative;
    z-index:2;

}

.hero-subtitle{

    color:var(--primary-dark);
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:600;
    margin-bottom:20px;

}

.hero-title{

    font-family:var(--heading);
    font-size:74px;
    line-height:1.08;
    color:var(--dark);

}

.hero-title span{

    color:var(--primary);

}

.hero-description{

    margin-top:25px;
    max-width:520px;
    line-height:2;
    font-size:17px;

}

.hero-buttons{

    margin-top:35px;

}

.hero-image{

    position:relative;

}

.hero-image img{

    width:100%;
    max-width:360px;
    margin:auto;
    animation:float 5s ease-in-out infinite;

}

.wave{

    position:absolute;
    bottom:-2px;
    left:0;
    width:100%;
    z-index:5;

}

.wave img{

    width:100%;
    display:block;

}


/*==================================================
    Floating Animation
====================================================*/

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0);

    }

}


/*==================================================
    Utility Classes
====================================================*/

.rounded-xl{

    border-radius:30px;

}

.shadow-soft{

    box-shadow:var(--shadow);

}

.bg-soft{

    background:var(--secondary);

}

.text-primary-soft{

    color:var(--primary);

}
/*==================================================
    Welcome Section
====================================================*/

.welcome-section{

    background:#fff;
    padding:110px 0;

}

.welcome-image{

    position:relative;
    text-align:center;

}

.welcome-image img{

    width:100%;
    max-width:500px;
    margin:auto;
    border-radius:30px;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,.12));
    transition:.4s;

}

.welcome-image img:hover{

    transform:translateY(-10px);

}

.welcome-section .section-title{

    margin-bottom:25px;

}

.welcome-section p{

    font-size:16px;
    line-height:2;
    color:#666;
    margin-bottom:18px;

}

.welcome-section .read-btn{

    margin-top:20px;

}





/*==================================================
    Specialities
====================================================*/

.specialities-section{

    background:#FFF8F6;

}

.specialitySwiper{

    padding:25px 5px 70px;

}

.cake-card{

    background:#fff;
    border-radius:28px;
    padding:25px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;

}

.cake-card:hover{

    transform:translateY(-10px);

}

.cake-card img{

    width:220px;
    height:220px;
    margin:auto;
    border-radius:50%;
    object-fit:cover;
    border:8px solid #FFF4F2;
    transition:.35s;

}

.cake-card:hover img{

    transform:scale(1.05);

}

.cake-card h5{

    font-family:var(--heading);
    font-size:30px;
    color:var(--dark);
    margin:25px 0 12px;

}

.cake-card p{

    font-size:15px;
    color:#666;
    line-height:1.8;

}



/* Swiper */

.swiper{

    overflow:hidden;

}

.swiper-button-next,
.swiper-button-prev{

    width:52px;
    height:52px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    color:var(--primary);
    transition:.3s;

}

.swiper-button-next:hover,
.swiper-button-prev:hover{

    background:var(--primary);
    color:#fff;

}

.swiper-button-next::after,
.swiper-button-prev::after{

    font-size:18px;
    font-weight:bold;

}

.swiper-pagination{

    bottom:0;

}

.swiper-pagination-bullet{

    width:12px;
    height:12px;
    background:#D7B1B1;

}

.swiper-pagination-bullet-active{

    background:var(--primary);

}





/*==================================================
    Gallery
====================================================*/

.gallery-section{

    background:#fff;

}

.gallery-item{

    overflow:hidden;
    border-radius:25px;
    position:relative;

}

.gallery-item img{

    width:100%;
    height:300px;
    object-fit:cover;
    transition:.45s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item::before{

    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.15);
    opacity:0;
    transition:.35s;
    z-index:1;

}

.gallery-item:hover::before{

    opacity:1;

}

/*==================================================
    CTA Section
====================================================*/

.cta-section{

    padding:90px 0;
    background:#FFF8F6;

}

.cta-box{

    background:#fff;
    border-radius:35px;
    padding:70px;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
    position:relative;
    overflow:hidden;

}

.cta-box::before{

    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:#FCECEC;
    top:-120px;
    right:-120px;

}

.cta-box::after{

    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:#FFF5F5;
    bottom:-80px;
    left:-80px;

}

.cta-box>*{

    position:relative;
    z-index:2;

}

.cta-title{

    font-family:var(--heading);
    font-size:54px;
    color:var(--dark);
    margin:18px 0;

}

.cta-box p{

    font-size:16px;
    line-height:2;
    color:#666;
    max-width:650px;

}
/*==================================================
    Contact Section
====================================================*/

.contact-section{

    background:#fff;
    padding:110px 0;

}

.contact-card{

    background:#fff;
    padding:40px 25px;
    text-align:center;
    border-radius:25px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;

}

.contact-card:hover{

    transform:translateY(-8px);

}

.contact-card i{

    width:70px;
    height:70px;
    background:#FFF2F2;
    color:var(--primary);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    font-size:28px;
    margin-bottom:20px;

}

.contact-card h5{

    font-family:var(--heading);
    color:var(--dark);
    font-size:30px;
    margin-bottom:10px;

}

.contact-card p{

    margin:0;
    color:#666;
    line-height:1.8;

}



/*==================================================
    Footer
====================================================*/

footer{

    background:#FFF8F6;
    padding:18px 0;

}

footer p{

    margin:0;
    color:#666;

}

footer a{

    width:42px;
    height:42px;
    background:#fff;
    color:var(--primary);
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:10px;
    transition:.35s;

}

footer a:hover{

    background:var(--primary);
    color:#fff;
    transform:translateY(-4px);

}



/*==================================================
    Back To Top
====================================================*/

#backToTop{

    position:fixed;
    right:25px;
    bottom:25px;

    width:52px;
    height:52px;

    border:none;
    border-radius:50%;

    background:var(--primary);
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:999;

}

#backToTop.show{

    opacity:1;
    visibility:visible;

}

#backToTop:hover{

    background:var(--dark);

}



/*==================================================
    Fade Animation
====================================================*/

.fade-up{

    opacity:0;
    transform:translateY(50px);
    transition:.8s;

}

.fade-up.show{

    opacity:1;
    transform:translateY(0);

}



/*==================================================
    Responsive
====================================================*/

@media(max-width:1199px){

.hero-title{

    font-size:64px;

}

.section-title{

    font-size:50px;

}

.cta-title{

    font-size:46px;

}

}



@media(max-width:991px){

section{

    padding:90px 0;

}

.navbar{

    background:#fff;

}

.navbar-collapse{

    background:#fff;
    padding:20px;
    margin-top:15px;
    border-radius:20px;

}

.navbar-nav{

    gap:10px;
    text-align:center;

}

.hero-section{

    text-align:center;
    padding-top:140px;

}

.hero-description{

    margin:auto;
    margin-top:25px;

}

.hero-buttons{

    justify-content:center;

}

.hero-image{

    margin-top:60px;

}

.hero-title{

    font-size:56px;

}

.section-title{

    font-size:42px;

}

.cta-box{

    padding:50px;

    text-align:center;

}

.cta-title{

    font-size:40px;

}

footer{

    text-align:center;

}

footer .text-lg-end{

    margin-top:20px;

}

}



@media(max-width:768px){

.hero-title{

    font-size:46px;

}

.section-title{

    font-size:38px;

}

.cta-title{

    font-size:34px;

}

.cake-card img{

    width:180px;
    height:180px;

}

.gallery-item img{

    height:250px;

}

.contact-card{

    padding:30px 20px;

}

}



@media(max-width:576px){

section{

    padding:70px 0;

}

.hero-title{

    font-size:38px;

}

.hero-description{

    font-size:15px;

}

.section-title{

    font-size:32px;

}

.cta-title{

    font-size:30px;

}

.hero-buttons .btn,

.read-btn,

.explore-btn{

    width:100%;

}

.cake-card{

    padding:20px;

}

.cake-card img{

    width:150px;
    height:150px;

}

.cta-box{

    padding:35px 25px;

}

.contact-card{

    margin-bottom:20px;

}

#backToTop{

    width:46px;
    height:46px;

}

}



/*==================================================
    Selection Color
====================================================*/

::selection{

    background:var(--primary);
    color:#fff;

}
/*==================================================
    Scrollbar
====================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#fafafa;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}