@font-face {
    font-family: 'Damion';
    src: url('assets/Font/Damion-Regular.ttf');
}
@font-face {
    font-family: 'Noto Sans JP';
    src: url('assets/Font/NotoSansJP-Regular-Alphabetic.woff2');
}

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

html, body{
    height: 100%;
    width: 100%;
}

:root{
    /* Container Boxed-Width */
    --box-width: 1440px;

    /* Container Full-Width */
    --full-width: 100%;

    /* Colors */
    --light-brown: rgba(235, 133, 26, 0.7);
    --dark-blue: rgba(5, 142, 192, 1);
    --light-blue: rgba(169, 225, 255, 1);
    --light-color: rgba(255, 251, 223, 1);
    --light-grey: rgba(235, 235, 235, 1);
    --text-color: rgba(64, 64, 64, 1);
    --text-light-color: rgba(44, 44, 44, 1);

    /* Font Families */
    --noto-font: 'Noto Sans JP', sans-serif;
    --inter-font: 'Inter', sans-serif;
    --lato-font: 'Lato', sans-serif;
    --damion-font: 'Damion', sans-serif;
    --hiragino-font: 'Hiragino Sans', sans-serif;

    /* Standard font sizes */
    --heading-h1: 58px;
    --heading-h2: 43px; 
    --heading-h3: 40px;
    --heading-h4: 38px;
    --heading-h5: 28px;
    --heading-h6: 24px;
    --extra-heading: 20px;
    --paragraph: 16px;
    --span: 15px;
    --big-text: 170px;
}


@media (min-width: 1920px){
    :root{
        /* Container Full-Width */
        --full-width: 1440px;
    }
}

@media (max-width: 1024px) {
    :root{
        /* Container Boxed-Width */
         --box-width: 100%;

          /* Standard font sizes */
        --heading-h1: 43px !important;
        --heading-h2: 36px !important; 
        --heading-h3: 32px !important;
        --heading-h4: 27px !important;
        --heading-h5: 24px !important;
        --heading-h6: 20px !important;
        --extra-heading: 18px !important;
        --paragraph: 16px !important;
        --span: 15px !important;
        --big-text: 150px !important;


    }
}

@media (max-width: 767px) {
    :root{
        /* Container Boxed-Width */
         --box-width: 100%;

          /* Standard font sizes */
        --heading-h1: 32px !important;
        --heading-h2: 29px !important; 
        --heading-h3: 26px !important;
        --heading-h4: 24px !important;
        --heading-h5: 22px !important;
        --heading-h6: 20px !important;
        --extra-heading: 18px !important;
        --paragraph: 14px !important;
        --span: 15px !important;
        --big-text: 110px !important;
    }
}


.orange_highlight{
    color: #FEA547;
}

/* Header Start */
header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-top-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 上部ロゴと電話番号 */
.header-top-container .header-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    width: var(--box-width);
    padding: 25px 0;
}
header .logo{
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo img{
    width: 77px;
}

.navbar_cta {
    display: flex;
    align-items: center;
    gap: 15px;
    transform: translateX(28%);
}

.navbar_cta .icon img{
    width: 25px;
}

.navbar_cta .phone-number {
    font-weight: 700;
    font-size: 33px;
    font-family: var(--noto-font);
    letter-spacing: 3.3px;
    color: #2C2C2C;
}
.navbar_cta .phone-number a{
    color: #2C2C2C;
    text-decoration: none;
}



/* グローバルナビゲーション */
.header-nav-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(214, 233, 240, 1);
}

.header-nav {
    width: var(--box-width);
}

.nav-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
}
.nav-links li {
    padding: 30px 20px;
    transition: all 0.3s ease;
}
.nav-links li.active {
    background: var(--dark-blue) !important;
    padding: 36px 69.5px;
}

.nav-links a {
    text-decoration: none;
    font-size: 18px;
    font-family: var(--noto-font);
    font-weight: 500;
    letter-spacing: 1.8px;
    color: var(--text-color);
    transition: all 0.3s ease;
}
.nav-links li a:hover{
    color: var(--dark-blue);
}

.nav-links li.active a {
    color: #fff;
    font-weight: 700;
}
/* Header End */

/* Home Page Start */
/* Main Start */

/* Home Hero Start */
.home-hero-container{
    width: var(--full-width);
    height: 95vh;
    background: linear-gradient(185deg, rgba(44, 166, 224, 0.05), rgba(255, 255, 255, 1));
    position: relative;
}

.home-hero-container .top-layer{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    z-index: 5;
}

.home-hero-container .top-layer img{
    width: 83%;
    height: 611px;
    object-fit: cover;
    border-radius: 10px;
    transform: translateX(50px);
}

.top-layer .hero-text-container{
    background: rgba(255, 255, 255, 0.93);
    border-radius: 14px;
    padding: 100px 115px 100px 215px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-text-container h1{
    font-size: var(--heading-h1);
    font-family: var(--noto-font);
    font-weight: 700;
    line-height: 87px;
    letter-spacing: 5.8px;
    color: rgba(44, 44, 44, 1);
}

.hero-text-container p:nth-child(2){
    font-size: 20px;
    font-family: var(--noto-font);
    font-weight: 500;
    line-height: 37px;
    letter-spacing: 2px;
    color: rgba(44, 44, 44, 1);
}
.hero-text-container p:nth-child(3){
    color: rgba(233, 158, 83, 0.3);
    font-family: var(--damion-font);
    font-size: 48px;
    font-weight: 400;
    line-height: 46px;
    letter-spacing: 4.8px;
    align-self: flex-end;
    position: absolute;
    right: -50px;
    bottom: 10px;
    transform: rotate(-10deg);
}

.home-hero-container .bg-pink-layer{
    width: 34%;
    height: 506px;
    background: rgba(250, 228, 207, 1);
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 1;
}

.home-hero-container .bg-blue-layer{
    width: 81%;
    height: 508px;
    background: var(--light-blue);
    position: absolute;
    right: 0%;
    bottom: 0%;
}
/* Home Hero End */


/* Vending Machine Start */
.vending-machine-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 0;
    /* background: url(assets/Media/Home_vending_machine_section_bg.png); */
    background: url(assets/Media/Home_vending_machine_section_bg_left.png),
    url(assets/Media/Home_vending_machine_section_bg_middle.png),
    url(assets/Media/Home_vending_machine_section_bg_middle.png);
    background-size: 10% 80% 10%;
    /* background-repeat: no-repeat; */
    background-position: center;
}

.vending-machine-container .vending-machine-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.vending-machine-section .vending-header{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.vending-header h2 {
    font-size: var(--heading-h2);
    font-family: var(--noto-font);
    font-weight: 700;
    line-height: 71px;
    letter-spacing: 2.15px;
    color: rgba(37, 87, 136, 1);
    text-align: center;
    text-shadow:
        -4px -4px 0 #fff,
         4px -4px 0 #fff,
        -4px  4px 0 #fff,
         4px  4px 0 #fff,
        0px 4px 14px rgba(0, 0, 0, 0.25);
}

.vending-cards-container{
    width: 100%;
    display: flex;
    justify-content: space-between;

}
.vending-cards-container .vending-card{
    width: 23% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    transition: all 0.3s ease;
}
.vending-cards-container .vending-card:hover{
    transform: scale(1.03) translateY(-10px);
    cursor: pointer;
}
.vending-cards-container .vending-card:nth-child(2) .vending-card-img img{
    width: 20% !important;
}
.vending-card .vending-card-img{
    width: 100%;
    height: 305px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 27px;
    box-shadow: 0px 4px 23px rgba(0, 0, 0, 0.25);
}
.vending-card .vending-card-img img{
    width: 42% !important;
}
.vending-card .vending-card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.vending-card .vending-card-content h6{
    font-size: var(--extra-heading);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(44, 44, 44, 1);
    text-align: center;
}
/* Vending Machine End */

/* Instagram Start */
.instagram-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--dark-blue);
    padding: 100px 0;
}
.instagram-container .instagram-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 65px;
}
.instagram-section h3{
    font-size: var(--heading-h3);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    line-height: 0;
}
.instagram-cards-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.instagram-cards-container .instagram-card{
    width: 15%;
    height: 210px;
}
.instagram-card a{
    display: inline-block;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.3) 56.49%, rgba(113, 166, 191, 0.3) 71.52%), url('assets/Media/Instagram_section_image.jpeg');
    background-size: cover;
    background-position: center;
}
.instagram-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.instagram-cta a{
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: var(--noto-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    background: linear-gradient(90deg, #EB851A 0%, #FFA74A 100%);
    border-radius: 123.5px;
    padding: 20px 100px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.instagram-cta a:hover{
    transform: scale(1.03);
    cursor: pointer;
}

/* Instagram End */

/* News Start */
.news-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 200px 0;
}
.news-container .news-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
}
.news-section h3{
    font-size: var(--heading-h3);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    text-transform: uppercase;
    color: var(--text-light-color);
    line-height: 0;
}
.news-cta a{
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: var(--noto-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    background: linear-gradient(90deg, #EB851A 0%, #FFA74A 100%);
    border-radius: 123.5px;
    padding: 20px 100px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.news-cta a:hover{
    transform: scale(1.03);
}

.news-cards-container{
    width: 75%;
    display: flex;
    flex-direction: column;
}
.news-cards-container .news-card{
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px dashed rgba(186, 177, 163, 1);
    padding: 35px 0;
}
.news-cards-container .news-card:nth-child(1){
    padding-top: 0;
}
.news-cards-container .news-card:nth-child(1) a{
    text-decoration-thickness: 1px;
    text-decoration-color: rgb(119, 119, 119);
}
.news-cards-container .news-card:nth-last-child(1){
    border-bottom: none;
    padding-bottom: 0;
}
.news-card p{
    font-family: var(--inter-font);
    font-size: var(--paragraph);
    font-weight: 500;
    letter-spacing: 1.6px;
    color: var(--text-light-color);
    width: 40%;
}
.news-card a{
    font-family: var(--inter-font);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--text-light-color);
    width: 50%;
    text-decoration-thickness: 2px;
    text-decoration-color: rgb(173, 173, 173);
}
/* News End */


/* Purchasing Benefits Start */
.purchasing-benefits-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(36.49deg, #CBF3FF -1.33%, #E9FAFF 35.27%, #F8FDFF 65.46%, #FFEFDF 118.22%);
    padding: 250px 0 150px 0;
}
.purchasing-benefits-container .purchasing-benefits-section{
    width: var(--full-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
}
.purchasing-benefits-section h3{
    font-size: var(--heading-h3);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    color: var(--text-light-color);
}
.benefits-blocks-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 100px;
}
.benefits-blocks-container .benefits-block{
    width: 100%;
    position: relative;
}

.benefits-blocks-container .benefits-block:nth-child(odd){
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.benefits-blocks-container .benefits-block:nth-child(odd) img{
    border-top-right-radius: 70px;
    border-bottom-right-radius: 70px;
}
.benefits-blocks-container .benefits-block:nth-child(odd) .benefit-content{
    left: 45%;
}
.benefits-blocks-container .benefits-block:nth-child(even){
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.benefits-blocks-container .benefits-block:nth-child(even) img{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 70px;
    border-bottom-left-radius: 70px;
}
.benefits-blocks-container .benefits-block:nth-child(even) .benefit-content{
    left: 7% !important;
}   

.benefits-block img{
    width: 67%;
    height: 600px;
    object-fit: cover;
    border-top-right-radius: 70px;
    border-bottom-right-radius: 70px;
    filter: brightness(1.2);
    position: relative;
}
/* .benefits-block img::before{
    content: '';
    width: 65%;
    height: 600px;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.3) 100%, rgba(113, 166, 191, 0.3) 0%);
    position: absolute;
    top: 0;
    left: 0;
    border-top-right-radius: 70px;
    border-bottom-right-radius: 70px;
    z-index: 1;
} */
.benefits-block .benefit-content{
    width: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    background: #fff;
    filter: drop-shadow(0px 4px 54px rgba(0, 0, 0, 0.25));
    border-top-left-radius: 70px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 70px;
    /* padding: 75px 100px 85px 100px; */
    padding: 60px 100px 130px 100px;
    box-shadow: inset 1px 1px 3px rgba(5, 142, 192, 0.404),
    inset -1px -1px 3px rgba(5, 142, 192, 0.404);
    z-index: 3;
}

.benefit-content .benefit-content-top{
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: -65px;
}

.benefits-blocks-container .benefits-block:nth-child(3) .benefit-content .benefit-content-top{
    margin-bottom: -45px;
}
.benefits-blocks-container .benefits-block:nth-child(4) .benefit-content .benefit-content-top{
    margin-bottom: -30px;
}

.benefit-content .benefit-content-top .benefit-top-left h1{
    font-family: var(--damion-font);
    font-size: var(--big-text);
    font-weight: 400;
    letter-spacing: -11.9px;
    color: var(--light-brown);
    transform: translateY(-20px);
}
.benefit-content .benefit-content-top .benefit-top-right{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.benefit-content .benefit-content-top .benefit-top-right h6{
    font-family: var(--noto-font);
    font-size: var(--heading-h6);
    font-weight: 700;
    letter-spacing: 2.4px;
    color: rgba(72, 71, 60, 1);
    transform: translateX(-12px);
}   
.benefit-content .benefit-content-top .benefit-top-right p{
    font-family: var(--lato-font);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: var(--light-brown);
}
.benefit-content .benefit-content-bottom p{
    font-family: var(--inter-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 30px;
    color: var(--text-light-color);
}

/* Purchasing Benefits End */


/* Points Start */
.points-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 150px 0 150px 0;
}
.points-container .points-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
}

.points-section h3{
    font-size: var(--heading-h3);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    color: var(--text-light-color);
}
.points-cards-container{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px 30px; 
}
.points-cards-container .points-card{
    width: 47%;
    background: #fff;
    border-radius: 30px;
    filter: drop-shadow(0px 4px 24px rgba(0, 0, 0, 0.25));
    padding: 75px 60px 40px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    transition: all 0.3s ease;
}
.points-cards-container .points-card:hover{
    transform: scale(1.03) translateY(-10px);
    cursor: pointer;
}
.points-card h5{
    font-family: var(--noto-font);
    font-size: var(--heading-h5);
    font-weight: 700;
    letter-spacing: 2.8px;
    color: var(--dark-blue);
    text-align: center;
}
.points-card p{
    font-family: var(--noto-font);
    font-size: var(--paragraph);
    font-weight: 500;
    letter-spacing: 1.6px;
    color: var(--text-light-color);
    text-align: center;
}
/* Points End */

/* Home CTA Start */
.home-cta-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 0;
    background: linear-gradient(rgba(252, 211, 172, 0.7), rgba(252, 211, 172, 0.7)), url('assets/Media/Instagram_section_image.jpeg');
    background-size: cover;
    background-position: center;
}
.home-cta-container .home-cta-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.home-cta-section .cta-main{
    width: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 115px 75px 75px 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 75px;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
}
.cta-main .cta-top{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.cta-top h5{
    font-family: var(--noto-font);
    font-size: 25px;
    font-weight: 700;
    line-height: 45px;
    letter-spacing: 2.5px;
    color: rgba(72, 71, 60, 1);
    text-align: center;
}
.cta-top p{
    font-family: var(--lato-font);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: var(--light-brown);
    text-align: center;
}

.cta-bottom{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.cta-bottom .cta-bottom-left{
    width: 49%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}
.cta-bottom .cta-bottom-left span{
    font-family: var(--noto-font);
    font-size: var(--span);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-align: center;
    color: var(--text-light-color);
}
.icon-box{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}
.icon-box svg{
    transform: translateY(-3px);
}

.icon-box .icon-box-right{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.icon-box .icon-box-right h3{
    font-family: var(--noto-font);
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 3.5px;
    color: rgba(39, 39, 39, 1);
}
.icon-box .icon-box-right h3 a{
    color: rgba(39, 39, 39, 1);
    text-decoration: none;
}
.icon-box .icon-box-right span{
    font-family: var(--hiragino-font);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.9px;
    color: rgba(39, 39, 39, 1);
}

.cta-bottom .cta-bottom-right{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding-left: 15px;
}

.cta-bottom .cta-bottom-right span{
    font-family: var(--noto-font);
    font-size: var(--span);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-align: center;
    color: var(--text-light-color);
}
.cta-bottom .cta-bottom-right a{
    font-family: var(--noto-font);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1.7px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, #F8A95C 35.38%, #EB851A 146.92%);
    border-radius: 113.5px;
    padding: 25px 75px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}
.cta-bottom .cta-bottom-right a:hover{
    transform: scale(1.03);
    cursor: pointer;
}
.cta-line{
    width: 1px;
    height: 125px;
    background: rgba(155, 155, 155, 1);
}
/* Home CTA End */

/* Information Vending Machine Start */
.information-vending-machine-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 150px 0 150px 0;
    background: url('assets/Media/Information_vending_machine_bg.png');
    background-size: cover;
    background-position: center;
}
.information-vending-machine-container .information-vending-machine-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}
.information-vending-machine-section .information-vending-machine-top{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.information-vending-machine-top h3{
    font-size: var(--heading-h3);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--text-light-color);
    text-align: center;
}
.information-vending-machine-top p{
    font-size: var(--paragraph);
    font-family: var(--noto-font);
    font-weight: 500;
    letter-spacing: 1.6px;
    color: var(--text-light-color);
    text-align: center;
}

.information-vending-machine-section .information-vending-cards-container{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px 30px;
    position: relative;
}
.information-vending-cards-container .information-vending-card{
    width: 47%;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}
.information-vending-card:hover{
    transform: scale(1.02) translateY(-5px);
    cursor: pointer;
}
.information-vending-card .card-img{
    width: 100%;
    height: 436px;
    position: relative;
}
.information-vending-card .card-img::before{
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.3) 56.49%, rgba(113, 166, 191, 0.3) 71.52%);
    position: absolute;
    top: 0;
    left: 0;
}

.information-vending-card .card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.information-vending-card .card-content{
    width: 100%;
    background: var(--dark-blue);
    padding: 55px 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* flex-grow: 1; */
}
.information-vending-card .card-content h5{
    font-size: var(--heading-h5);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 2.8px;
    color: #fff;
    text-align: center;
}
.information-vending-card .card-content p{
    font-size: var(--paragraph);
    font-family: var(--noto-font);
    font-weight: 500;
    letter-spacing: 1.6px;
    line-height: 30px;
    text-align: left;
    color: #fff;
}

/* Information Vending Machine End */


/* Have Questions Start */
.have-questions-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 0;
    background: linear-gradient(251deg, rgba(255, 236, 218, 0.8) -13.75%, rgba(246, 252, 251, 0.8) 56.68%, rgba(203, 243, 255, 0.8) 120.68%);
}



.have-questions-container .have-questions-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 65px;
}
.have-questions-section .have-questions-top{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.have-questions-top h5{
    font-size: var(--heading-h5);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 2.8px;
    color: var(--text-light-color);
    text-align: center;
}
.have-questions-top h2{
    font-size: var(--heading-h2);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 4.8px;
    color: var(--text-light-color);
    text-align: center;
}
.have-questions-top h2 span{
    color: rgba(235, 133, 26, 1);
    padding-bottom: 10px;
    border-bottom: 4px solid rgba(235, 133, 26, 1);
}
.have-questions-section .have-question-cards-container{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 80px;
}
.have-question-cards-container .have-question-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 293px;
    transition: all 0.3s ease;
}
.have-question-card:hover{
    transform: scale(1.03) translateY(-10px);
    cursor: pointer;
}
.have-question-card .card-img{
    width: 100%;
    height: 293px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0px 4px 34px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}
.have-question-card .card-img img{
    width: 154px;
}
.have-question-card .card-content h6{
    font-size: var(--heading-h6);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 2.4px;
    line-height: 36px;
    color: var(--text-light-color);
    text-align: center;
}
/* Have Questions End */
/* Main End */
/* Home Page End */



/* Footer Start */

.footer-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--light-color);
}

.footer {
    width: var(--box-width);
    padding: 120px 0 125px 0;
  }
  
  .footer .footer-box {
    max-width: var(--box-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  
  .phone {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 40px 0;
    transform: translateX(-10px);
  }
  .phone svg{
    transform: translateY(-3px);
    width: 50px;
  }
  
  .phone .number {
    font-family: var(--noto-font);
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 3.5px;
    color: rgba(39, 39, 39, 1);
  }
  .phone .number a{
    color: rgba(39, 39, 39, 1);
    text-decoration: none;
  }
  
  .text {
    font-family: var(--noto-font);
    font-size: var(--paragraph);
    font-weight: 500;
    letter-spacing: 1.6px;
    color: var(--text-color);
    line-height: 30px;
  }
  
  .links {
    display: flex;
    width: 60%;
    justify-content: space-around;
  }
  
  .links-one,
  .links-two {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  
  .links-one li,
  .links-two li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px;
  }
  
  .links-one li a,
  .links-two li a {
    text-decoration: none;
    color: rgba(72, 71, 60, 1);
    font-family: var(--noto-font);
    font-weight: 500;
    letter-spacing: 1.4px;
    font-size: 14px;
  }
  
  .links-one li p svg,
  .links-two li p svg {
    width: 16px !important;
  }
  
  .rights {
    max-width: var(--box-width);
    margin: 0 auto;
  }
  
  .rights h3 {
    margin-top: 25px;
    font-size: 12px;
    font-family: var(--noto-font);
    font-weight: 500;
    letter-spacing: 1.2px;
    color: var(--text-light-color);
  }
  
  @media screen and (max-width: 991px) {
    .footer {
      padding: 100px 60px;
    }
  
    .phone {
      gap: 10px;
    }
  
    .phone .number {
      font-size: 30px;
    }
  
    .text {
      font-size: 16px;
    }
  
    .links {
      width: 50%;
      justify-content: space-between;
    }
  
    .links-one,
    .links-two {
      gap: 20px;
    }
  
    .links-one li,
    .links-two li {
      gap: 13px;
    }
  }
  
  @media screen and (max-width: 740px) {
    .footer {
      padding: 80px 30px;
    }
  
    .footer .footer-box {
      flex-direction: column;
    }
  
    .links {
      width: 100%;
      justify-content: space-between;
      margin-top: 30px;
      flex-wrap: wrap;
      gap: 20px;
    }
  
    .phone {
      margin: 20px 0;
    }
  
    .phone .number {
      font-size: 25px;
    }
  
    .text {
      font-size: 14px;
    }
  
    .phone-icon {
      width: 30px;
      height: 30px;
    }
  
    .logo-icon {
      width: 50px;
    }
  }

/* Footer End */




/* Product 1 Page Start */

  /* Product Hero Section Start */
  .product-hero-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 125px 0;
    margin-top: 75px;
    background: url(assets/Media/Banner_image_all.png);
    /* background-size: cover; */
    background-position: 175% center;
    background-repeat: no-repeat;
  }
  .product-hero-container .product-hero-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    gap: 70px;
  }
  .product-hero-section h1{
    font-size: var(--heading-h1);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 5.8px;
    color: var(--text-light-color);
    position: relative;
  }
  .product-hero-section h1::after{
    content: '';
    width: 100px;
    height: 4px;
    background-color: rgba(0, 0, 0, 1);
    position: absolute;
    bottom: -30px;
    left: 0;
  }
  .product-hero-section h6{
    font-size: 25px;
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--text-light-color);
  }
  /* Product Hero Section End */


/* Products Filter Bar Start */
.products-filter-bar-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 0 75px 0;
}
.products-filter-bar{
    width: var(--full-width);
    display: flex;
    justify-content: center;
    gap: 25px;
}
.products-filter-bar .filter-btn{
    border: none;
    outline: none;
    background-color: rgba(240, 247, 250, 1);
    color: var(--dark-blue);
    border-radius: 7px;
    padding: 25px 0px 25px 0px;
    font-family: var(--noto-font);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    width: 21%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.filter-btn a{
    text-decoration: none;
    color: inherit;
    height: 100%;
    width: 100%;
    display: inline-block;
}
.products-filter-bar .filter-btn:hover{
    transform: translateY(-10px);
}
.products-filter-bar .filter-btn.active{
    background-color: var(--dark-blue);
    color: #fff;
}
/* Products Filter Bar End */


/* Beverage Machine Start */
.beverage-machine-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    margin-top: 0px;
    background: linear-gradient(73.57deg, #F6C796 -47.43%, #FFFFFF 60.52%, #7FD6FF 244.85%);
}
.beverage-machine-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    /* gap: 50px; */
}
.beverage-machine-section h3{
    font-size: var(--heading-h3);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--text-light-color);
    text-align: center;
}
.beverage-machine-main{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.beverage-machine-main .beverage-machine-img{
    width: 50%;
    transform: translateY(100px);
}
.beverage-machine-main .beverage-machine-img img{
    width: 100%;
    height: 415px;
    object-fit: cover;
    border-radius: 10px;
}
.beverage-machine-main .beverage-machine-content{
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.beverage-machine-content p{
    font-size: 18px;
    font-family: var(--hiragino-font);
    font-weight: 400;
    letter-spacing: 1.8px;
    color: var(--text-light-color);
    line-height: 30px;
}
/* Beverage Machine End */


/* Product 1 Products Start */
.product-1-products-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 225px 0px 100px 0px;
    padding-bottom: 100px;
}
.product-2-products-container{
    padding-bottom: 600px;
}
.product-3-products-container{
    padding-bottom: 450px;
}
.product-4-products-container{
    padding-bottom: 600px;
}
.product-1-products-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
}
.product-1-products-cards{
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    gap: 30px;
}
.product-1-products-card{
    width: 31.5%;
    display: flex;
    flex-direction: column;
}
.product-1-products-card .product-img{
    width: 100%;
    height: 500px !important;
}   
.product-1-products-card .product-img img{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}
.product-1-products-card .product-main{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    background: rgba(235, 235, 235, 1);
    padding: 25px 30px;
}
.product-1-products-card .product-main .product-tags{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.product-1-products-card .product-main .product-tags .product-tags-row{
    display: flex;
    gap: 12px;
}
.product-1-products-card .product-main .product-tags .product-tags-row p{
    font-size: 12px;
    font-family: var(--inter-font);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    line-height: 1em;
    background: var(--dark-blue);
    padding: 10px 0px;
    width: 65px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-1-products-card .product-main .product-content{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.product-1-products-card .product-main .product-content h6{
    font-size: 18px;
    font-family: var(--inter-font);
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-color);
    letter-spacing: 0px;
}
.product-1-products-card .product-main .product-content p{
    font-size: 12px;
    font-family: var(--inter-font);
    font-weight: 400;
    letter-spacing: 0px;
    color: var(--text-color);
    line-height: 22px;
}
.product-1-products-card .product-main .product-btn{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-1-products-card .product-main .product-btn a{
    font-size: 15px;
    font-weight: 700;
    font-family: var(--noto-font);
    letter-spacing: 1.5px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 12px 0px;
    background: rgba(235, 133, 26, 1);
    border-radius: 30px;
    width: 100%;
    transition: 0.3s;
}
.product-1-products-card .product-main .product-btn a:hover{
    background: rgba(235, 133, 26, 0.8);
}


/* Product 1 Products End */
/* Product 1 Page End */



/* Company Page Start */
/* Company Details Section Start */
.company-details-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 100px 0;
}
.company-details-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
}
.company-details-section .company-details-table{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.company-details-section .company-details-table .table-row{
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid rgba(244, 244, 244, 1);
    padding: 50px 20px;
}
.company-details-section .company-details-table .table-row:first-child{
    border-top: 2px solid rgba(244, 244, 244, 1);
}
.company-details-section .company-details-table .table-row .table-head{
    width: 20%;
    font-size: 20px;
    font-family: var(--noto-font);
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 28.96px;
    color: var(--text-light-color);
}
.company-details-section .company-details-table .table-row .table-data{
    width: 80%;
    font-size: 20px;
    font-family: var(--noto-font);
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 28.96px;
    color: var(--text-light-color);
}
/* Company Details Section End */


/* Map Section Start */
.map-container{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 75px 0 150px 0;
}
.map-section{
    width: var(--box-width);
}
.map-section iframe{
    width: 100% !important;
    height: 420px !important;
    border-radius: 10px;
}
/* Map Section End */
/* Company Page End */


/* News Page Start */

.news-main-container{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 100px 0 250px 0;
}
.news-main-section{
    width: var(--box-width);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.news-main-section .new-left-section{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 65px;
}
.news-main-section .new-left-section .news-left-header{
    width: 100%;
    padding-bottom: 30px;
    border-bottom: 3px solid rgba(218, 218, 218, 1);
}
.news-main-section .new-left-section .news-left-header h5{
    font-size: var(--heading-h5);
    font-family: var(--inter-font);
    font-weight: 700;
    letter-spacing: 2.8px;
    line-height: 1em;
    color: var(--text-light-color);
}

.news-main-section .new-left-section .news-left-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 55px;
}
.news-main-section .new-left-section .news-left-content .news-content-img{
    width: 100%;
    height: 525px;
    background: rgba(181, 181, 181, 1);
}
.news-main-section .new-left-section .news-left-content .news-content-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-main-section .new-left-section .news-left-content .news-content-text{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 35px;
}
.news-main-section .new-left-section .news-left-content .news-content-text p{
    font-size: 16px;
    font-family: var(--noto-font);
    font-weight: 400;
    letter-spacing: 1.6px;
    line-height: 30px;
}

.news-main-section .new-right-section{
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 35px;
}
.news-main-section .new-right-section .news-right-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    border-bottom: 2px solid rgba(218, 218, 218, 1);
    padding-bottom: 35px;
    transition: all 0.3s ease;
} 
.news-main-section .new-right-section .news-right-card:hover{
    transform: translateY(-10px);
}
.news-main-section .new-right-section .news-right-card .news-card-img{
    width: 100%;
    height: 265px;
    background: rgba(181, 181, 181, 1);
}
.news-main-section .new-right-section .news-right-card .news-card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-main-section .new-right-section .news-right-card .news-card-content{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.news-main-section .new-right-section .news-right-card .news-card-content p{
    font-size: var(--paragraph);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--text-light-color);
}
/* News Page End */




/* Delivery & Establishment Page Start */

/* .product-hero-container.delivery{
    background-position: 101% center;
} */


/* Availability Section Start */
.availability-container{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 150px 0px 100px 0px;
    background: rgba(240, 247, 250, 1);
    margin-top: 75px;
}
.availability-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 35px;
}
.availability-top{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.availability-top h3{
    font-size: var(--heading-h3);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    color: var(--text-light-color);
}
.availability-top p{
    font-size: 18px;
    font-family: var(--hiragino-font);
    font-weight: 400;
    letter-spacing: 1.8px;
    line-height: 31px;
    color: var(--text-light-color);
    text-align: center;
}
.availability-bottom{
    width: 50%;
    background: #fff;
    border-radius: 30px;
    padding: 75px 75px 60px 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}
.availability-bottom .icon-box span{
    font-size: 14px;
    letter-spacing: 1.4px;
}
.availability-bottom .icon-box svg{
    transform: translateY(-3px) translate(30px);
}
.availability-bottom > a{
    font-size: 17px;
    font-family: var(--noto-font);
    font-weight: 900;
    letter-spacing: 1.7px;
    line-height: 1em;
    background: linear-gradient(180deg, #F8A95C 35.38%, #EB851A 146.92%);
    border-radius: 113.5px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 25px 100px;
    transition: all 0.3s ease;
}
.availability-bottom > a:hover{
    transform: scale(1.03);
}
/* Availability Section End */


/* Delivery Steps Section Start */
.delivery-steps-container{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 100px 0px;
    background: rgba(255, 251, 247, 1);
} 
.delivery-steps-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.delivery-steps-section .delivery-cards-container{
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    position: relative;
}
.delivery-steps-section .delivery-cards-container .delivery-card{
    width: 100%;
    position: relative;
}
.delivery-steps-section .delivery-cards-container .delivery-card .card-container{
    width: 100%;
    padding: 30px 100px 30px 40px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 75px;
}
.delivery-card .delivery-img{
    width: 250px;
    height: 250px;
    background: rgba(242, 242, 242, 1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.delivery-card .delivery-img img{
    width: 160px;
}
.delivery-card .delivery-content{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.delivery-card .delivery-content .delivery-content-top{
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 20px;
}
.delivery-card .delivery-content .delivery-content-top span{
    font-size: 40px;
    font-family: var(--inter-font);
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: var(--dark-blue);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65px;
    height: 65px;
}
.delivery-card .delivery-content .delivery-content-top h5{
    font-size: var(--heading-h5);
    font-family: var(--inter-font);
    font-weight: 700;
    letter-spacing: 2.8px;
    color: var(--text-light-color);
}
.delivery-card .delivery-content .delivery-content-bottom > p{
    font-size: var(--paragraph);
    font-family: var(--inter-font);
    font-weight: 400;
    letter-spacing: 1.6px;
    color: var(--text-light-color);
} 
.delivery-card .card-container > img{
    width: 68px;
    position: absolute;
    left: 50%;
    bottom: -25px;
    transform: translateX(-50%);
    z-index: 1;
}
.delivery-steps-section .delivery-cards-container .delivery-card:last-child .card-container{
    padding: 30px 100px 100px 40px;
}
.delivery-card .delivery-message{
    width: 60%;
    background: url(assets/Media/Delivery_Steps_Message_Shape.png);
    background-size: cover;
    background-position: center;
    padding: 45px 40px 25px 40px;
    margin-left: auto;
    transform: translateY(-150px) translateX(-100px);
}
.delivery-message p{
    font-size: 13px !important;
    font-family: var(--noto-font) !important;
    font-weight: 700 !important;
    letter-spacing: 1.3px !important;
    line-height: 26px !important;
    color: #fff !important;
}
/* Delivery Steps Section End */


/* Expenses Section Start */

.expenses-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 175px 0px 150px 0;
    background: rgba(245, 245, 245, 1);
}
.expenses-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}
.expenses-section .expenses-top{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.expenses-section .expenses-top h3{
    font-size: var(--heading-h3);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    color: var(--text-light-color);
}
.expenses-section .expenses-cards-container{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 35px;
}
.expenses-section .expenses-cards-container .expenses-card{
    width: 48%;
    background: #fff;
    border-radius: 10px;
    padding: 85px 75px 85px 75px;
    box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 25px;
    transition: all 0.3s ease;
}
.expenses-card:hover{
    transform: scale(1.03);
}
.expenses-card .expense-card-top{
    display: flex;
    align-items: center;
    gap: 25px;
}
.expenses-card .expense-card-top img{
    width: 54px;
}
.expenses-card .expense-card-top h5{
    font-size: var(--heading-h5);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 2.8px;
    color: var(--dark-blue);
}
.expenses-card .expense-card-bottom p{
    font-size: 14px;
    font-family: var(--noto-font);
    font-weight: 400;
    letter-spacing: 1.4px;
    color: var(--text-light-color);
}
.expenses-card .expense-card-top .optional-support{
    display: inline-block;
    font-size: 14px;
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 0.28px;
    background: rgba(116, 198, 109, 1);
    color: #fff;
    border-radius: 100px;
    padding: 10px 25px;
    margin-left: 50px;
}
/* Expenses Section End */
/* Delivery & Establishment Page End */



/* Contact Page Start */

/* Inquiry Content Section Start */
.inquiry-content-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 90px 0px 75px 0px;
    background: #fff;
}
.inquiry-content-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.inquiry-content-section p{
    font-size: 18px;
    font-family: var(--hiragino-font);
    font-weight: 600;
    letter-spacing: 1.8px;
    color: var(--text-light-color);
    text-align: center;
}
/* Inquiry Content Section End */

/* Contact CTA Section Start */
.contact-cta-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0px;
    background: rgba(240, 247, 250, 1);
}  
.contact-cta-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-cta-section .contact-cta-bottom{
    width: 50%;
    background: #fff;
    border-radius: 30px;
    padding: 75px 75px 60px 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.contact-cta-section .contact-cta-bottom .icon-box{
    display: flex;
    align-items: center;
    gap: 25px;
}

.contact-cta-section .contact-cta-bottom .icon-box .icon-box-right{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contact-cta-section .contact-cta-bottom .icon-box .icon-box-right h3 a{
    font-size: var(--heading-h3);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--text-light-color);
    text-decoration: none;
}

.contact-cta-section .contact-cta-bottom .icon-box .icon-box-right span{
    font-size: 14px;
    font-family: var(--noto-font);
    font-weight: 400;
    letter-spacing: 1.4px;
    color: var(--text-light-color);
}

.contact-cta-section .contact-cta-bottom > a{
    font-size: 17px;
    font-family: var(--noto-font);
    font-weight: 900;
    letter-spacing: 1.7px;
    line-height: 1em;
    background: linear-gradient(180deg, #F8A95C 35.38%, #EB851A 146.92%);
    border-radius: 113.5px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 25px 100px;
    transition: all 0.3s ease;
}
.contact-cta-section .contact-cta-bottom > a:hover{
    transform: scale(1.03);
}

/* Contact CTA Section End */


/* Contact Form Section Start */

.contact-form-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 0px;
    background: rgba(253, 252, 251, 1);
}

.contact-form-section {
    width: var(--box-width);
    display: flex;
    justify-content: center;
}

.contact-form-section form {
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.contact-form-section .form-group {
    width: 100%;
    display: flex;
    gap: 50px;
}

.contact-form-section .form-group .form-group-left {
    width: 40%;
    display: flex;
    gap: 35px;
    align-items: center;
}

.contact-form-section .form-group .form-group-left label {
    font-size: 18px;
    font-family: var(--hiragino-font);
    font-weight: 500;
    letter-spacing: 1.8px;
    width: 150px;
}

.contact-form-section .form-group .form-group-left .required {
    font-size: 15px;
    font-family: var(--inter-font);
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    background: rgba(61, 171, 92, 1);
    padding: 6px 15px;
    border-radius: 6px;
}

.contact-form-section .form-group .form-group-left .optional {
    font-size: 15px;
    font-family: var(--inter-font);
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    background: rgba(184, 184, 184, 1);
    padding: 6px 15px;
    border-radius: 6px;
}
.contact-form-section .form-group.radio {
    margin-top: 7px;
}
.contact-form-section .form-group.radio .form-group-left {
    align-items: flex-start;
}
.contact-form-section .form-group.textarea {
    margin-top: 7px;
}
.contact-form-section .form-group.textarea .form-group-left {
    align-items: flex-start;
}

.contact-form-section .form-group .form-group-right {
    width: 60%;
}

.contact-form-section .form-group .form-group-right input {
    width: 100%;
    padding: 15px 30px 15px 30px;
    border: 2px solid rgba(180, 180, 180, 1);
    border-radius: 5px;
    font-size: 18px;
    font-family: var(--hiragino-font);
    font-weight: 400;
    letter-spacing: 1.8px;
    background: rgba(255, 255, 255, 1);
}
.contact-form-section .form-group .form-group-right input::placeholder {
    color: rgba(44, 44, 44, 0.3);
}

.contact-form-section .form-group .form-group-right textarea {
    width: 100%;
    padding: 15px 30px 15px 30px;
    border: 2px solid rgba(180, 180, 180, 1);
    border-radius: 5px;
    font-size: 18px;
    font-family: var(--hiragino-font);
    font-weight: 400;
    letter-spacing: 1.8px;
    background: rgba(255, 255, 255, 1);
    resize: none;
}

.contact-form-section .form-group .form-group-right .radio-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contact-form-section .form-group .form-group-right .radio-group label{
    font-size: 16px;
    font-family: var(--hiragino-font);
    font-weight: 500;
    letter-spacing: 1.6px;
    color: var(--text-light-color);
}

.contact-form-section .form-group .form-group-right .radio-group .radio-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-form-section .form-group .form-group-right .radio-group .radio-item label {
    font-size: var(--paragraph);
    font-family: var(--noto-font);
    font-weight: 400;
    letter-spacing: 1.6px;
    color: var(--text-light-color);
}
.radio-item input[type="radio"] {
    width: fit-content !important;
}


.contact-form-section .privacy-check {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.contact-form-section .privacy-check label {
    font-size: 16px;
    font-family: var(--noto-font);
    font-weight: 500;
    letter-spacing: 1.6px;
    color: rgba(67, 67, 67, 1);
}
.contact-form-section .privacy-check label a{
    color: #0886D5;
}

.contact-form-section form button {
    font-size: 17px;
    font-family: var(--noto-font);
    font-weight: 900;
    letter-spacing: 1.7px;
    line-height: 1em;
    background: linear-gradient(180deg, #F8A95C 35.38%, #EB851A 146.92%);
    border-radius: 113.5px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 25px 150px;
    border: none;
    cursor: pointer;
    align-self: center;
    transition: all 0.3s ease;
}
.contact-form-section form button:hover{
    transform: scale(1.03);
}
/* Contact Form Section End */
/* Contact Page End */



/* FAQ Page Start */
.faq-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 125px 0px 350px 0px;
    background: rgba(253, 252, 251, 1);
}
.faq-section{
    width: var(--box-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 150px;
}
.faq-block{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 75px;
}
.faq-block-header{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.faq-block-header h4{
    font-size: var(--heading-h4);
    font-family: var(--noto-font);
    font-weight: 700;
    letter-spacing: 3.8px;
    color: var(--text-light-color);
    position: relative;
}
.faq-block-header h4::before{
    content: "";
    height: 4px;
    width: 35%;
    background: rgba(0, 0, 0, 1);
    position: absolute;
    left: 0;
    bottom: -25px;
}

.faq-block-body{
    width: 100%;
}

.accordion {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.accordion-item {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.5s ease;
}

.accordion-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 100px;
    background: var(--dark-blue);
    border: none;
    cursor: pointer;
    color: #fff;
    position: relative;
    transition: all 0.3s ease;
    text-align: left;
}
.accordion-button .accordion-title{
    font-size: 22px;
    font-weight: 700;
    font-family: var(--noto-font);
    letter-spacing: 2.2px;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.accordion-button:hover {
    background: #0673B9;
}

.accordion-button .question {
    font-family: var(--inter-font);
    font-size: 38px;
    font-weight: 700;
    color: #fff;
}

.accordion-button .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.accordion-button .icon-container svg {
    width: 31px;
}

.accordion-button[aria-expanded="true"] .icon-container svg line:last-child {
    display: none;
}

.accordion-content {
    max-height: 0;
    padding: 0px 150px 0px 100px;
    background-color: rgba(245, 245, 245, 1);
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.accordion-content p {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    font-family: var(--noto-font);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1.6px;
    line-height: 33px;
    color: var(--text-light-color);
    padding: 30px 0;
    position: relative;
}

.accordion-content .answer {
    font-family: var(--inter-font);
    font-weight: 700;
    font-size: 38px;
    color: var(--dark-blue);
    transform: translateY(9px) !important;
}

.accordion-item.active {
    box-shadow: 0 2px 10px rgba(44, 166, 224, 0.1);
}

.accordion-item.active .accordion-content {
    max-height: 500px;
    opacity: 1;
}
/* FAQ Page End */



/* Responsive Code */

/* Large Screens */
@media (min-width: 1920px){
    .home-hero-container{
        width: var(--full-width);
        margin: 0 auto;
    }
}


/* Tablet Screens */
@media (max-width: 1024px){
    header{
        display: none;
    }



    .top-layer .hero-text-container{
        padding: 80px 90px 80px 100px;
    }
    .home-hero-container .top-layer img{
        height: 447px;
        width: 85%;
        transform: translateX(0px);
    }
    .hero-text-container p:nth-child(3){
        font-size: 32px;
        line-height: 30px;
        right: -30px;
        bottom: 15px;
    }

    .vending-machine-container{
        padding: 100px 10px !important;
        background-size: cover;
    }
    .vending-cards-container{
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 25px;
    }

    .vending-cards-container .vending-card {
        width: 48% !important;
    }


    .instagram-container{
        padding: 100px 10px;
    }
    .instagram-cards-container{
        justify-content: center ;
        flex-wrap: wrap;
        gap: 25px;
    }
    .instagram-cards-container .instagram-card{
        width: 31%;
        height: 230px;
    }

.benefits-blocks-container .benefits-block{
    padding-bottom: 375px;
}
    .benefits-blocks-container .benefits-block img{
        height: 450px;
        width: 95%;
    }

    .benefits-blocks-container .benefits-block:nth-child(odd) .benefit-content{
        top: 73% !important;
    }
    .benefits-blocks-container .benefits-block:nth-child(even) .benefit-content{
        top: 73% !important;
    }
    .benefits-blocks-container .benefits-block .benefit-content{
        padding: 45px 100px 115px 100px;
        width: 88% !important;
        left: 6% !important;
    }

    .points-container{
        padding: 150px 10px 150px 10px;
    }

    .home-cta-container{
        padding: 100px 10px 100px 10px;
    }
    .home-cta-section .cta-main{
        gap: 50px;
    }
    .cta-bottom{
        flex-direction: column;
        align-items: center;
        gap: 35px;
    }
    .cta-bottom .cta-bottom-left{
        width: 75%;
    }
    .cta-bottom .cta-bottom-right{
        width: 75%;
    }
    .cta-line{
        width: 40%;
        height: 1px;
    }

    .information-vending-machine-container{
        padding: 150px 10px 100px 10px;
    }
    .information-vending-card .card-img{
        height: 365px;
    }
    .information-vending-card .card-content{
        padding: 50px 60px 50px 60px;
        flex-grow: 1;
        justify-content: space-between;
    }

    .have-questions-container{
        padding: 100px 10px 100px 10px;
    }
    .have-question-cards-container{
        flex-wrap: wrap;
        gap: 50px !important;
    }
    .footer {
        padding: 100px 10px;
    }
    .footer .footer-box {
        flex-direction: column;
        gap: 50px;
    }
    .footer .links{
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }
    .rights h3{
        margin-top: 50px;
    }


    .product-hero-container{
        background-position: center center;
        background-size: cover;
        padding: 100px 10px 100px 10px;
    }

    .products-filter-bar-container{
        padding: 100px 10px 100px 10px;
    }
    .products-filter-bar{
        flex-wrap: wrap;
    }
    .products-filter-bar .filter-btn{
        font-size: 14px;
        width: 48%;
    }

    .beverage-machine-container{
        padding: 100px 10px 100px 10px;
    }
    .beverage-machine-section{
        gap: 50px;
    }
    .beverage-machine-main .beverage-machine-img {
        width: 50%;
        transform: translateY(0px);
    }
    .beverage-machine-main{
        flex-direction: column-reverse; 
        gap: 25px;
    }
    .beverage-machine-main > div{
        width: 100% !important;
    }

    .product-1-products-container{
        padding: 100px 10px 100px 10px;
        margin: 0;
    }
    .product-1-products-cards{
        gap: 25px;
    }
    .product-1-products-card{
        width: 48%;
    }
    .product-1-products-card .product-img {
        width: 100%;
        height: 375px !important;
    }


    .company-details-container{
        padding: 0px 10px 0px 10px;
    }
    .company-details-section .company-details-table{
        gap: 0;
    }
    .company-details-section .company-details-table .table-row{
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding: 35px 20px 35px 20px;
    }
    .company-details-section .company-details-table .table-row .table-head{
        width: 100%;
    }
    .company-details-section .company-details-table .table-row .table-data{
        width: 100%;
    }

    .map-container{
        padding: 0px 10px 0px 10px;
        margin: 75px 0 100px 0;
    }
    .map-section iframe{
        height: 350px !important;
    }


    .faq-container{
        padding: 100px 10px 100px 10px;
    }
    .accordion-button .accordion-title{
        font-size: 18px;
        gap: 10px;
    }
    .accordion-button .question{
        font-size: 30px;
    }
    .accordion-button .icon-container svg {
        width: 17px;
    }
    .accordion-content .answer{
        font-size: 30px;
    }
    .accordion-content p{
        font-size: 14px;
        line-height: 30px;
    }
    .accordion-button{
        padding: 25px 50px;
    }
    .accordion-item .accordion-content{
        padding: 0 50px;
    }


    .news-main-container{
        padding: 100px 10px 100px 10px;
    }
    .news-main-section{
        flex-direction: column;
        align-items: center;
        gap: 100px;
    }
    .news-main-section .new-left-section{
        width: 100%;
    }
    .news-main-section .new-left-section .news-left-content .news-content-img {
        height: 450px;
    }
    .news-main-section .new-left-section .news-left-content{
        gap: 35px;
    }
    .news-main-section .new-left-section .news-left-content .news-content-text{
        gap: 25px;
    }
    .news-main-section .new-left-section .news-left-content .news-content-text p{
        font-size: 14px;
        line-height: 27px;
    }
    .news-main-section .new-right-section{
        width: 75%;
    }
    .news-main-section .new-right-section .news-right-card .news-card-img{
        height: 375px;
    }


    .inquiry-content-container{
        padding: 50px 10px 50px 10px;
    }
    .inquiry-content-section p{
        font-size: 16px;
        line-height: 30px;
    }

    .contact-cta-section .contact-cta-bottom {
        width: 85%;
    }
    .contact-cta-section .contact-cta-bottom .icon-box .icon-box-right span{
        font-size: 12px;
    }
    .contact-cta-section .contact-cta-bottom > a{
        padding: 20px 75px;
    }


    .contact-form-container{
        padding: 100px 10px 100px 10px;
    }
    .contact-form-section form{
        width: 100%;
    }
    .contact-form-section .form-group{
        flex-direction: column;
        gap: 20px;
    }
    .contact-form-section .form-group > div{
        width: 100% !important;
    }
    .contact-form-section .form-group .form-group-left label{
        width: fit-content;
    }


    .availability-container{
        padding: 100px 10px 100px 10px;
    }
    .availability-top{
        width: 100%;
    }
    .availability-bottom{
        width: 85%;
    }
    .availability-bottom .icon-box span{
        font-size: 12px;
    }
    .availability-bottom .icon-box svg {
        transform: translateY(6px) translateX(0px);
    }


    .delivery-steps-container{
        padding: 100px 10px 0px 10px;
    }
    .delivery-steps-section .delivery-cards-container{
        width: 100%;
    }
    .delivery-steps-section .delivery-cards-container .delivery-card .card-container{
        flex-direction: column;
        gap: 35px;
    }
    .delivery-card .delivery-img {
        width: 255px;
        height: 250px;
    }
    .delivery-card .delivery-content{
        width: 75%;
    }
    .delivery-steps-section .delivery-cards-container .delivery-card:last-child .card-container {
        padding: 30px 100px 200px 40px;
    }
    .delivery-card .delivery-message {
        width: 96%;
        background-size: cover;
        background-position: center;
        padding: 55px 40px 35px 40px;
        margin-left: 2%;
        transform: translateY(-175px) translateX(0);
    }


    .expenses-container{
        padding: 100px 10px 100px 10px;
    }
    .expenses-section .expenses-cards-container .expenses-card{
        width: 100%;
    }
    .expenses-card .expense-card-top{
        justify-content: center;
    }
    .expenses-card .expense-card-bottom{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .expenses-card .expense-card-top img{
        width: 45px;
    }
    .expenses-card .expense-card-top .optional-support{
        font-size: 12px;
        padding: 10px 20px;
        margin-left: 35px;
    }


}


/* Mobile Screens */
@media (max-width: 500px) {
    .home-hero-container .top-layer img{
        height: 400px;
    }
    .top-layer .hero-text-container {
        padding: 65px 50px 65px 50px;
    }
    .hero-text-container h1{
        line-height: 50px;
    }
    .hero-text-container p:nth-child(2){
        font-size: 16px;
        line-height: 33px;
    }
    .hero-text-container p:nth-child(3) {
        font-size: 25px;
        line-height: 23px;
        right: -10px;
        bottom: 15px;
}

.vending-cards-container{
    gap: 75px;
}
.vending-header h2{
    line-height: 52px;
}
.vending-cards-container .vending-card{
    width: 100% !important;
}
.vending-card .vending-card-img img{
    width: 35% !important;
}
.vending-cards-container .vending-card:nth-child(2) .vending-card-img img{
    width: 16% !important;
}

.instagram-cards-container .instagram-card{
    width: 100%;
}
.instagram-cards-container .instagram-card {
    height: 300px;
}

.news-container{
    padding: 125px 10px 125px 10px;
}
.news-container .news-section{
    gap: 75px !important;
}
.news-cards-container{
    width: 100%;
}
.news-cards-container .news-card{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 30px 0;
}
.news-card a{
    width: 100%;
}

.purchasing-benefits-container {
    padding: 100px 0 175px 0;
}
.purchasing-benefits-section h3{
    padding: 0 10px;
}
.benefits-blocks-container .benefits-block img{
    height: 350px;
}
.benefits-blocks-container .benefits-block .benefit-content {
    padding: 55px 70px 80px 70px;
}
.benefit-content .benefit-content-top{
    margin-bottom: 0px;
}
.benefit-content .benefit-content-top .benefit-top-left h1 {
    transform: translateY(-41px);
}
.benefits-blocks-container .benefits-block:nth-child(1) .benefit-content{
    top: 70% !important;
}
.benefits-blocks-container .benefits-block:nth-child(3) .benefit-content{
    top: 72% !important;
}
.benefits-blocks-container .benefits-block:nth-child(3) .benefit-content-bottom{
    margin-top: 40px;
}
.benefits-blocks-container .benefits-block:nth-child(4) .benefit-content{
    top: 77% !important;
}
.benefits-blocks-container .benefits-block:nth-child(4) .benefit-content-bottom{
    margin-top: 25px;
}

.points-container {
    padding: 100px 10px 100px 10px;
}
.points-cards-container .points-card{
    width: 100%;
}
.home-cta-section .cta-main{
    padding: 50px 50px 50px 50px;
}
.cta-top h5{
    font-size: 22px;
}
.cta-bottom .cta-bottom-left {
    width: 100%;
}
.cta-bottom .cta-bottom-right {
    width: 100%;
}
.cta-bottom .cta-bottom-right a{
    font-size: 14px;
    gap: 10px;
}
.cta-bottom .cta-bottom-right svg{
    width: 16px;
}

.information-vending-machine-container {
    padding: 100px 10px 100px 10px;
}
.information-vending-cards-container .information-vending-card{
    width: 100%;
}

.product-hero-section h6{
    font-size: 18px;
}


.products-filter-bar-container {
    padding: 75px 10px 75px 10px;
}
.products-filter-bar{
    gap: 10px;
    flex-wrap: wrap;
}
.products-filter-bar .filter-btn{
    font-size: 10px;
    padding: 15px 0px 15px 0px;
    width: 47%;
}

.product-1-products-card {
    width: 100%;
}
.product-1-products-card .product-main .product-tags .product-tags-row p{
    width: 30%;
}


.accordion-button .question{
    font-size: 25px;
}
.accordion-button .accordion-title{
    font-size: 15px;
}


.accordion-button {
    padding: 20px 35px;
}
.accordion-item .accordion-content {
    padding: 0 35px;
}
.accordion-content .answer {
    font-size: 25px;
    line-height: 1em;
    transform: translateY(6px) !important;
}
.accordion-content p{
    padding: 23px 0;
}


.news-main-section .new-right-section .news-right-card .news-card-img {
    height: 300px;
}
.news-main-section .new-left-section {
    gap: 35px;
}
.news-main-section .new-right-section .news-right-card{
    padding-bottom: 20px;
}


.icon-box svg {
    width: 25px;
    transform: translateY(-7px);
}


.availability-container {
    padding: 75px 10px 75px 10px;
}
.availability-top p{
    font-size: 14px;
    line-height: 27px;
}
.availability-top {
    gap: 10px;
}
.availability-bottom {
    width: 100%;
}
.availability-bottom .icon-box{
    gap: 10px;
}
.icon-box .icon-box-right h3{
    font-size: 28px;
}
.availability-bottom .icon-box svg {
    transform: translateY(3px) translateX(0px);
}
.availability-bottom > a{
    padding: 20px 75px;
}

.delivery-steps-section .delivery-cards-container .delivery-card .card-container{
    padding: 35px 35px 35px 35px;
}
.delivery-card .delivery-img {
    width: 200px;
    height: 200px;
}
.delivery-card .delivery-img img {
    width: 50%;
}
.delivery-steps-section .delivery-cards-container .delivery-card:last-child .card-container {
    padding: 35px 35px 160px 35px;
}
.delivery-card .delivery-message {
    width: 96%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-165px) translateX(0);
    /* padding: 55px 40px 35px 40px; */
}
.delivery-message p {
    font-size: 12px !important;
    letter-spacing: 1.2px !important;
    line-height: 20px !important;
}

.expenses-section .expenses-cards-container .expenses-card{
    padding: 75px 50px 75px 50px;
}

.availability-bottom .icon-box span {
    font-size: 10px;
}

.home-hero-container{
    height: 75vh !important;
}

}


/* Extra Small Screens */
@media (max-width: 400px){
    .benefits-blocks-container .benefits-block .benefit-content {
        padding: 55px 35px 70px 35px;
    }
    .benefit-content .benefit-content-bottom p{
        font-size: 14px;
        line-height: 28px;
    }
    .benefits-blocks-container .benefits-block .benefit-content {
        width: 90% !important;
        left: 5% !important;
    }

    .points-cards-container .points-card img{
        width: 100%;
    }

    .cta-top h5 {
        font-size: 20px;
        line-height: 35px;
    }
    .icon-box .icon-box-right h3{
        font-size: 25px;
    }
    .icon-box svg {
        width: 20px;
    }
    .cta-bottom .cta-bottom-right a{
        font-size: 10px;
        padding: 20px 50px;
    }
    .home-cta-section .cta-main {
        padding: 50px 35px 50px 35px;
    }

    .information-vending-card .card-content {
        padding: 35px 40px 35px 40px;
    }
    .information-vending-card .card-img {
        height: 335px;
    }

    .have-questions-top h2 span {
        padding-bottom: 5px;
        margin-bottom: 5px;
        display: inline-block;
    }
    .logo-icon {
        width: 81px;
    }
    .phone {
        gap: 5px;
    }

    .top-layer .hero-text-container {
        padding: 50px 35px 50px 35px;
    }
    .hero-text-container p:nth-child(2) {
        font-size: 14px;
        line-height: 30px;
    }
    .hero-text-container p:nth-child(3) {
        font-size: 16px;
        line-height: 14px;
        right: -10px;
        bottom: 15px;
    }


    .news-main-section .new-left-section .news-left-content .news-content-img {
        height: 350px;
    }
    .news-main-section .new-right-section {
        width: 100%;
    }
    .news-main-section .new-right-section .news-right-card .news-card-img {
        height: 325px;
    }


    .contact-cta-section .contact-cta-bottom {
        width: 90%;
        padding: 50px 35px 50px 35px;
    }
    .contact-cta-section .contact-cta-bottom > a {
        padding: 20px 50px;
    }
    
    .contact-cta-container .icon-box svg{
        transform: translateY(-16px) translateX(15px);
    }


    .availability-bottom{
        padding: 35px 35px 35px 35px;
    }
    .availability-bottom .icon-box svg {
        transform: translateY(0px) translateX(0px);
    }
    .availability-bottom > a {
        padding: 20px 50px;
        font-size: 12px;
    }

    .delivery-card .delivery-img {
        width: 175px;
        height: 170px;
    }
    .delivery-card .delivery-content {
        width: 100%;
    }
    .delivery-card .delivery-content .delivery-content-top span {
        font-size: 20px;
        width: 35px;
        height: 35px;
    }
    .delivery-card .card-container > img {
        width: 50px;
        bottom: -18px;
    }
    .delivery-card .delivery-message {
        width: 96%;
        background-size: 249%;
        background-repeat: no-repeat;
        background-position: 10% center;
        transform: translateY(-200px) translateX(0);
        padding: 55px 40px 20px 40px;
    }
    .delivery-steps-section .delivery-cards-container .delivery-card:last-child .card-container {
        padding: 35px 35px 215px 35px;
    }

    .expenses-container {
        padding: 100px 10px 100px 10px;
        margin-top: -65px;
    }
    .expenses-card .expense-card-top img {
        width: 35px;
    }

    .expenses-card .expense-card-top .optional-support {
        font-size: 10px;
        padding: 7px 10px;
        margin-left: 0px;
    }
    .expenses-card .expense-card-top {
        gap: 20px;
        flex-wrap: wrap;
    }
    .expenses-card .expense-card-bottom p{
        font-size: 12px;
        text-align: center;
    }
    .expenses-section .expenses-cards-container .expenses-card {
        padding: 50px 35px 50px 35px;
    }

}


/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    opacity: 0;
    visibility: hidden;
    background-color: var(--dark-blue);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: all ease 0.3s;
    transform: scale(0.9);
    z-index: 99999999;
  }
  
  .scroll-to-top:hover {
    background-color: #0056b3;
  }
  
  .scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
  
  .scroll-to-top.hide {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
  }


/* General Header Styles */
.phone-header {
    display: none;
    width: 100%;
    background-color: #fff;
    z-index: 999999999999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
}

.phone-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 10px;
}

.phone-header .logo img {
    width: 60px;
}

/* Hamburger Styles */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 35px;
    height: 35px;
    border: none;
    background: none;
    cursor: pointer;
}
.hamburger svg{
    height: 100%;
    width: 100%;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: #333;
    border-radius: 3px;
    transition: transform 0.7s ease, opacity 0.7s ease;
}

.drawer-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}
.drawer-logo img{
    width: 75px;
}
    
/* Hamburger active state */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: 98;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

.overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Drawer Styles */
.side-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 20px;
    transition: left 0.3s ease;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 99;
    overflow-y: auto;
}
.side-drawer .nav-links{
    flex-direction: column;
    gap: 15px;
}
.side-drawer .nav-links li{
    padding: 10px 50px;
}
.side-drawer .nav-links li.active{
    padding: 10px 50px;
    border-radius: 100px;
}

.side-drawer.open {
    left: 0; /* Slide into view */
}

/* Close Button */
.close-drawer {
    align-self: flex-end;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.close-drawer svg {
    width: 24px;
    height: 24px;
}

/* Phone Box at the Bottom */
.phone-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border-top: 1px solid #ddd;
    width: fit-content;
    margin: 10px auto 0 auto;
    padding-top: 15px;
}
.phone-box img{
    width: 20px;
}
.phone-box a.phone-number{
    text-decoration: none;
    color: rgba(39, 39, 39, 1);
    font-family: var(--noto-font);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

/* Overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 98;
}

.overlay.open {
    display: block; /* Show overlay when open */
}

/* Prevent page scrolling when drawer is open */
body.drawer-open {
    overflow: hidden;
}


/* Responsive Toggle */
@media screen and (max-width: 1024px) {
    .phone-header {
        display: flex;
        flex-direction: column;
    }

    /* Hide desktop header */
    .desktop-header {
        display: none;
    }
}