@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    box-sizing: border-box;
    /* line-height: 1.6; */
}
/* ================== header style ================== */
header{
    background-color: rgb(247, 241, 241);
    width: 100%;
}

.container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 15vh;
    padding: 0 100px;
}

.container img{
    width: 100px;
}

.container ul{
    display: flex;
    align-items: center;
    list-style-type: none;
    gap: 48px;
    height: 100%;
}
.container ul li a{
    text-decoration: none;
    font-weight: 600;
    height: 15vh;
    padding: 6vh 1vh;
    color: #392d2f;
}
.container ul li a:hover{
    color: #392d2f7f;
}
.menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 28px;
  color: #392d2f;
}

/* =============== main style ==================== */

/* ===========HERO SECTION STYLE============ */
.hero-section{
    width: 100%;
    height: 100vh;
    color: #392d2f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: show-content 1s linear;
    padding: 0 100px;
    margin-bottom: 56px;
    line-height: 1.6;
}
@keyframes show-content{
    0% {
        opacity: 0;
    }
    90%{
        opacity: 1;
    }
}

.hero-section .hero-left .sub-title {
    font-weight: 600;
}
.hero-section .hero-left h1{
    font-weight: 500;
    font-size: 40px;
    margin: 12px 0;
}
#date-open{
    margin: 32px 0;
}
.hero-section .hero-left .group-btn {
    display: flex;
    align-items: center;
    gap: 32px;
}
.hero-section .hero-left .group-btn a{
    padding: 12px 24px;
    background: rgb(137, 36, 36);
    text-decoration: none;
    color: #fefefe;
    border: 3px solid rgb(137, 36, 36);
    font-weight: 700;
    transition: .2s linear;
}
.hero-section .hero-left .group-btn .order-btn {
    color: rgb(137, 36, 36);
    background: transparent;
}
.hero-section .hero-left .group-btn .order-btn:hover{
    color: #fefefe;
    background: rgb(137, 36, 36);
}
.hero-section .hero-left .group-btn .menu-btn:hover {
    color: rgb(137, 36, 36);
    background: #fefefe;
}
.hero-right img{
    width: 500px;
}

/* ============FEATURE SECTION STYLE============== */
.spacial-feature-section {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: #392D2F;
    padding: 20px 100px;
}
.spacial-feature-section .left {
    width: 48%;
    color: #fefefe;
    height: fit-content;
    animation: show-content linear forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}
.spacial-feature-section .left .text-dsc{
    line-height: 2;
    margin: 28px 0;
}
.spacial-feature-section .right .text-dsc {
    line-height: 1.6;
}
.spacial-feature-section .left .small-title {
    color: #A8603D;
}
.spacial-feature-section .left h1 {
    font-weight: 400;
    font-size: 52px;
}
.spacial-feature-section .left .left-btn {
    color: #fefefe;
    text-decoration: none;
    padding: 12px;
    border: 2px solid #fefefe;
    transition: .2s ease-in;
}
.spacial-feature-section .left .left-btn:hover{
    background: #A8603D;
    border-color: #A8603D;
}
.spacial-feature-section .right {
    background: #fefefe;
    width: 35%;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    top: -140px;
    animation: from-right ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
    animation-fill-mode: forwards;
    color: #392d2f;
}
@keyframes from-right{
    10%{
        transform: translateX(70%);
        opacity: 0;
    }
    85%{
        transform: translateX(0);
        opacity: 1;
    }
}

.spacial-feature-section .right .background-top{
    width: 100%;
    height: 100px;
    background: #EAD4B3;
}
.spacial-feature-section .right h2 {
    font-style: italic;
}
.spacial-feature-section .right img {
    width: 100px;
    left: 37%;
    border-radius: 100%;
}
.go-up-50{
    position: relative;
    top: -50px;
}
.mx-24{
    margin: 0 24px;
}

.flex{
    display: flex;
}
#price {
    margin: 16px 24px;
}

#btn{
    position: relative;
    top: -40px;
    padding: 12px 24px 12px 4px;
    /* background: #392D2F; */
    color: #392D2F;
    font-weight: 600;
    transition: .4s linear;
    margin-bottom: 32px;
}
#btn:hover{
    background: lightgray;
}

/* =============best brew============== */
.bestBrew-section{
    height: 100vh;
    width: 100%;
    background: #654649;
    padding: 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    color: white;
}
.bestBrew-section .left{
    animation: show-image  linear;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
    animation-fill-mode: forwards;
}
@keyframes show-image {
    0%{
        transform: translateX(-50%);
        opacity: 0;
    }
    80% {
        transform: translateX(0);
        opacity: 1;
    }
}
.bestBrew-section .left img {
    width: 400px;
}
.bestBrew-section .right {
    line-height: 1.6;
    animation: show-content 2s linear;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
}
.bestBrew-section .right h1 {
    font-size: 40px;
    font-weight: 400;
    font-style: italic;
}
.bestBrew-section .right p {
    margin: 12px 0 20px 0;
    
}
#line{
    margin-bottom: 20px;
}
#order-today {
    padding: 12px;
    background: #A8603D;
    text-decoration: none;
    font-weight: 600;
    color: #fefefe;
}
.px-10 {
    padding: 0 10px;
}

/* ===============BAKED GOODS================= */
.bakedGood-section {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 72px;
    padding: 0px 100px;
}
.bakedGood-section .left {
    /* width: 35%; */
    line-height: 1.6;
    animation: show-content linear;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
    animation-fill-mode: forwards;
}
.bakedGood-section .left .sub-title {
    color: #392D2F;
}
.bakedGood-section .left h1{
    margin-top: 16px;
    font-size: 48px;
    line-height: 1;
    font-weight: 400;
}
.bakedGood-section .left .text-dsc {
    margin: 16px 0;
}
.bakedGood-section .left a {
    padding: 12px 24px;
    background-color: #3e3234;
    border: 2px solid #3e3234;
    color: #fefefe;
    font-weight: 500;
    text-decoration: none;
    transition: all .5s ease-out;
}
.bakedGood-section .left a:hover{
    background-color: #fefefe;
    color: #392D2F;
}
.bakedGood-section .right {
    animation: from-right linear ;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
    animation-fill-mode: forwards;
}
.bakedGood-section .right img{
    width: 600px;
}

/* ==============CARD-CONTAINER=============== */
.card-container {
    display: flex;
    color: #fefefe;
    width: 98vw;
}
#card-left {
    background: #895B60;
}
#card-right {
    background: #4B2F32;
}
.card {
    padding: 40px 90px;
}
.card .text-dsc {
    line-height: 1.6;
    margin-bottom: 20px;
}
.my-18{
    margin: 18px 0;
}
.text-upper {
    text-transform: uppercase;
    font-size: 12px;
}
.card h3 {
    font-size: 30px;
    font-weight: 400;
}
.card a {
    padding: 12px 24px;
    border: 2px solid #fefefe;
    color: #fefefe;
    font-weight: 500;
    text-decoration: none;
}

/* ============Responsive=============== */
/* =====teblet====== */
.menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 28px;
  color: #392d2f;
}


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

/* ===== Tablet (<= 1024px) ===== */
@media (max-width: 1024px) {
  body {
    width: 100%; /* remove fixed width */
  }

  .hero-section {
    flex-direction: column;
    text-align: center;
    padding: 40px;
    height: auto;
  }
  .hero-section .hero-right img {
    width: 80%;
    margin-top: 20px;
  }

  .spacial-feature-section {
    flex-direction: column;
    height: auto;
    padding: 40px;
  }
  .spacial-feature-section .left,
  .spacial-feature-section .right {
    width: 100%;
    text-align: center;
  }
  .spacial-feature-section .right {
    width: 50%;
  }
  .spacial-feature-section .right img{
    left: 0;
  }
  .spacial-feature-section .right {
    top: 0;
  }

  .bestBrew-section {
    flex-direction: column;
    height: auto;
    padding: 40px;
  }
  .bestBrew-section .left img {
    width: 300px;
  }

  .bakedGood-section {
    flex-direction: column;
    text-align: center;
    height: auto;
    padding: 40px;
  }
  .bakedGood-section .right img {
    width: 80%;
  }

  .card-container {
    flex-direction: column;
    width: 100%;
  }
  .card {
    padding: 40px;
    text-align: center;
  }
}

/* ===== Smartphone (<= 768px) ===== */
@media (max-width: 768px) {
  header {
    padding: 0 20px;
  }
  .container ul.active {
    display: flex; /* show when toggle clicked */
  }
  .hero-section h1 {
    font-size: 28px;
  }

  .spacial-feature-section .right{
    width: 100%;
  }
  .spacial-feature-section h1 {
    font-size: 32px;
  }

  .bestBrew-section .right h1 {
    font-size: 28px;
  }

  .bakedGood-section h1 {
    font-size: 32px;
  }
}

/* ===== Small Smartphone (<= 480px) ===== */
@media (max-width: 480px) {
  .hero-section {
    padding: 20px;
  }
  .hero-section h1 {
    font-size: 24px;
  }
  .hero-section .text-dsc {
    font-size: 14px;
  }

  .spacial-feature-section,
  .bestBrew-section,
  .bakedGood-section {
    padding: 20px;
  }

  .card {
    padding: 20px;
  }
}


/* start footer */
footer{
    background: rgb(240, 233, 233);
    width: 100%;
    padding: 50px 100px;
    padding-bottom: 100px;
    box-sizing: border-box ;
}
footer .list-footer img{
    width: 200px;
}
.footer{
    display: flex;
    margin-bottom: 50px;
    /* justify-content: space-between;
    align-items: center;  */
}
.footer .list-footer{
    /* background-color: #392D2F; */
    width: 25%;
    height: auto;
    list-style-type: none;
}
.footer .list-footer ul{
    margin-bottom: 40px;
}
.footer .list-footer ul li{
    list-style-type: none;
    line-height: 1.8;
    
}
.footer .list-footer ul li a{
    text-decoration: none;
    color: #392D2F;
    font-weight: 400;
    font-size: 14px;
}

.footer .list-footer div #frist{
    font-size: 14px;
    font-weight: 600;
}
.footer .list-footer div #second{
    font-size: 14px;
    font-weight: 400;
}
.footer .list-footer-text{
    font-size: 14px;
    color: #392D2F;
    font-weight: 500;
    width: 40%;
    line-height: 1.8;
}
footer p{
    font-size: 12px;
    line-height: 1.5;
    color: #392D2F;
}
/* end footer */