/* HERO RESPONSIVE */

/*=========================================
RESPONSIVE HERO
=========================================*/

@media (max-width: 1400px){

    .hero-content{
        width:500px;
    }

    .hero-content h1 span{
        font-size:80px;
    }

    .hero-content h2{
        font-size:95px;
    }

    .hero-content h3{
        font-size:52px;
    }

}

/*==============================*/

@media (max-width:1200px){

    .hero{

        min-height:850px;

    }

    .hero-content{

        width:470px;

        padding-top:70px;

    }

    .hero-logo{

        width:130px;

    }

    .hero-content h1 span{

        font-size:72px;

    }

    .hero-content h1 small{

        font-size:32px;

    }

    .hero-content h2{

        font-size:85px;

    }

    .hero-content h3{

        font-size:48px;

    }

    .hero-content h4{

        font-size:21px;

    }

    .hero-content p{

        font-size:16px;

        max-width:420px;

    }

}

/*==============================*/

@media (max-width:991px){

    .hero{

        min-height:780px;

        align-items:center;

    }

    .hero-overlay{

        background:linear-gradient(
        180deg,
        rgba(255,255,255,.92),
        rgba(255,255,255,.75),
        rgba(255,255,255,.35)
        );

    }

    .hero-content{

        width:100%;

        max-width:650px;

        text-align:center;

        margin:auto;

        padding-top:120px;

    }

    .hero-logo{

        margin:0 auto 30px;

    }

    .line{

        margin:25px auto;

    }

    .hero-content p{

        margin:auto;

    }

}

/*==============================*/

@media (max-width:768px){

    .hero{

        min-height:720px;

    }

    .hero::before{

        width:450px;

        height:450px;

    }

    .hero-content{

        padding-top:100px;

    }

    .hero-logo{

        width:110px;

    }

    .hero-content h1 span{

        font-size:56px;

    }

    .hero-content h1 small{

        font-size:26px;

        letter-spacing:6px;

    }

    .hero-content h2{

        font-size:68px;

        margin-top:10px;

    }

    .hero-content h3{

        font-size:42px;

        margin-top:-12px;

    }

    .hero-content h4{

        font-size:20px;

    }

    .hero-content p{

        font-size:15px;

        line-height:1.8;

        max-width:100%;

    }

    .hero-btn{

        padding:16px 35px;

        margin-top:30px;

    }

}

/*==============================*/

@media (max-width:576px){

    .hero{

        min-height:680px;

    }

    .hero-banner{

        object-position:72% center;

    }

    .hero-content{

        padding-top:90px;

    }

    .hero-logo{

        width:95px;

        margin-bottom:20px;

    }

    .hero-content h1 span{

        font-size:42px;

        line-height:1;

    }

    .hero-content h1 small{

        font-size:20px;

        letter-spacing:5px;

    }

    .hero-content h2{

        font-size:52px;

    }

    .hero-content h3{

        font-size:34px;

    }

    .hero-content h4{

        font-size:17px;

    }

    .hero-content p{

        font-size:14px;

    }

    .hero-btn{

        width:100%;

        padding:15px;

    }

    .line{

        width:80px;

    }

}

/*==============================*/

@media (max-width:400px){

    .hero{

        min-height:630px;

    }

    .hero-content h1 span{

        font-size:34px;

    }

    .hero-content h1 small{

        font-size:18px;

    }

    .hero-content h2{

        font-size:44px;

    }

    .hero-content h3{

        font-size:28px;

    }

    .hero-content h4{

        font-size:15px;

    }

    .hero-content p{

        font-size:13px;

    }

    .hero-btn{

        font-size:14px;

    }

}


/* TASTING */


/*=========================================
OUR RANGE RESPONSIVE
=========================================*/

@media (max-width:1200px){

    .our-range{

        padding:100px 0;

    }

    .range-content{

        grid-template-columns:300px 1fr;

        gap:60px;

    }

    .range-left h2{

        font-size:52px;

    }

}

/*==============================*/

@media (max-width:991px){

    .our-range{

        padding:90px 0;

    }

    .range-content{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .range-left{

        max-width:600px;

        margin:auto;

    }

    .gold-line{

        margin:20px auto;

    }

    .slider-nav{

        justify-content:center;

    }

    .range-right{

        display:flex;

        justify-content:center;

    }

    .range-image{

        width:90%;

        max-width:700px;

    }

}

/*==============================*/

@media (max-width:768px){

    .our-range{

        padding:80px 0;

    }

    .range-left h2{

        font-size:42px;

    }

    .range-left p{

        font-size:16px;

        line-height:1.8;

        margin-bottom:35px;

    }

    .slider-nav{

        gap:15px;

    }

    .slider-nav button{

        width:48px;

        height:48px;

        font-size:18px;

    }

    .slider-nav span{

        font-size:18px;

    }

    .range-image{

        width:100%;

    }

}

/*==============================*/

@media (max-width:576px){

    .our-range{

        padding:70px 0;

    }

    .range-content{

        gap:40px;

    }

    .range-left h2{

        font-size:34px;

    }

    .gold-line{

        width:70px;

    }

    .range-left p{

        font-size:15px;

    }

    .slider-nav{

        gap:12px;

    }

    .slider-nav button{

        width:42px;

        height:42px;

        font-size:16px;

    }

    .slider-nav span{

        font-size:16px;

    }

}

/*==============================*/

@media (max-width:400px){

    .our-range{

        padding:60px 0;

    }

    .range-left h2{

        font-size:30px;

    }

    .range-left p{

        font-size:14px;

    }

    .slider-nav button{

        width:38px;

        height:38px;

        font-size:14px;

    }

    .slider-nav span{

        font-size:15px;

    }

}


/*=========================================
TASTING SECTION RESPONSIVE
=========================================*/

@media (max-width:1200px){

    .tasting-section{

        padding:100px 0;

    }

    .tasting-wrapper{

        grid-template-columns:1fr 450px;

        gap:60px;

    }

    .tasting-content h2{

        font-size:56px;

    }

}

/*==============================*/

@media (max-width:991px){

    .tasting-section{

        padding:90px 0;

    }

    .tasting-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .tasting-image{

        order:1;

        text-align:center;

    }

    .tasting-image img{

        width:90%;

        max-width:650px;

        margin:auto;

    }

    .tasting-content{

        order:2;

        text-align:center;

        max-width:700px;

        margin:auto;

    }

    .notes{

        margin-top:35px;

    }

    .note{

        text-align:left;

    }

}

/*==============================*/

@media (max-width:768px){

    .tasting-section{

        padding:80px 0;

    }

    .section-subtitle{

        font-size:13px;

        letter-spacing:3px;

    }

    .tasting-content h2{

        font-size:46px;

    }

    .notes{

        margin-top:30px;

    }

    .note{

        gap:18px;

        padding:22px 0;

    }

    .icon{

        width:50px;

        height:50px;

        font-size:22px;

    }

    .note h4{

        font-size:18px;

    }

    .note p{

        font-size:15px;

        line-height:1.7;

    }

}

/*==============================*/

@media (max-width:576px){

    .tasting-section{

        padding:70px 0;

    }

    .tasting-content{

        text-align:left;

    }

    .section-subtitle{

        font-size:12px;

        letter-spacing:2px;

    }

    .tasting-content h2{

        font-size:36px;

    }

    .note{

        gap:15px;

        padding:18px 0;

    }

    .icon{

        width:45px;

        height:45px;

        font-size:18px;

    }

    .note h4{

        font-size:16px;

        margin-bottom:6px;

    }

    .note p{

        font-size:14px;

        line-height:1.6;

    }

    .tasting-image img{

        width:100%;

    }

}

/*==============================*/

@media (max-width:400px){

    .tasting-section{

        padding:60px 0;

    }

    .tasting-content h2{

        font-size:30px;

    }

    .section-subtitle{

        font-size:11px;

    }

    .icon{

        width:40px;

        height:40px;

        font-size:16px;

    }

    .note{

        gap:12px;

    }

    .note h4{

        font-size:15px;

    }

    .note p{

        font-size:13px;

    }

}


/*=========================================
PROMO SECTION RESPONSIVE
=========================================*/

@media (max-width:1400px){

    .promo-section{

        min-height:800px;
        background-position:-250px center;

    }

    .promo-content{

        width:48%;

    }

    .promo-content h2{

        font-size:72px;

    }

    .promo-content h3{

        font-size:60px;

    }

    .promo-content h4{

        font-size:50px;

    }

    .promo-content h1{

        font-size:62px;

    }

}

/*================================*/

@media (max-width:1200px){

    .promo-section{

        min-height:700px;
        background-position:-300px center;

    }

    .promo-content{

        width:52%;

    }

    .promo-content h5{

        font-size:20px;

    }

    .promo-content h2{

        font-size:60px;

    }

    .promo-content h3{

        font-size:50px;

    }

    .promo-content h4{

        font-size:42px;

    }

    .promo-content h1{

        font-size:52px;

    }

}

/*================================*/

@media (max-width:991px){

    .promo-section{

        min-height:900px;

        padding:80px 0;

        align-items:flex-end;

        background-position:center top;

        background-size:contain;

    }

    .promo-wrapper{

        justify-content:center;

        min-height:auto;

    }

    .promo-content{

        width:100%;

        text-align:center;

        margin:0;

        padding-top:420px;

    }

    .promo-content h2{

        font-size:56px;

    }

    .promo-content h3{

        font-size:46px;

    }

    .promo-content h4{

        font-size:38px;

    }

    .promo-content h1{

        font-size:46px;

    }

}

/*================================*/

@media (max-width:768px){

    .promo-section{

        min-height:760px;

        background-size:100% auto;

    }

    .promo-content{

        padding-top:320px;

    }

    .promo-content h5{

        font-size:18px;

        letter-spacing:2px;

    }

    .promo-content h2{

        font-size:46px;

    }

    .promo-content h3{

        font-size:38px;

    }

    .promo-content h4{

        font-size:30px;

    }

    .promo-content h1{

        font-size:36px;

    }

    .promo-btn{

        padding:16px 36px;

    }

}

/*================================*/

@media (max-width:576px){

    .promo-section{

        min-height:650px;

        padding:60px 0;

    }

    .promo-content{

        padding-top:250px;

    }

    .promo-content h5{

        font-size:16px;

    }

    .promo-content h2{

        font-size:34px;

    }

    .promo-content h3{

        font-size:28px;

    }

    .promo-content h4{

        font-size:22px;

    }

    .promo-content h1{

        font-size:28px;

    }

    .promo-btn{

        width:100%;

        padding:15px;

        margin-top:30px;

    }

}

/*================================*/

@media (max-width:400px){

    .promo-section{

        min-height:560px;

    }

    .promo-content{

        padding-top:210px;

    }

    .promo-content h2{

        font-size:28px;

    }

    .promo-content h3{

        font-size:22px;

    }

    .promo-content h4{

        font-size:18px;

    }

    .promo-content h1{

        font-size:22px;

    }

    .promo-content h5{

        font-size:14px;

    }

}
/* ===============================
   Responsive Footer
================================ */

/* Large Tablets */
@media (max-width:1200px){

    .footer-container{
        width:90%;
    }

    .footer-right{
        gap:45px;
    }

}


/* Tablets */
@media (max-width:991px){

    footer{
        margin-top:140px;
        padding-top:90px;
    }

    .footer-badge{
        width:150px;
        height:150px;
        top:-75px;
    }

    .footer-badge svg{
        width:150px;
        height:150px;
    }

    .footer-container{

        width:90%;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:40px;

    }

    .footer-left{
        width:100%;
    }

    .footer-logo{
        width:160px;
    }

    .footer-center{

        width:100%;
        padding-top:0;
        justify-content:center;

    }

    .footer-right{

        width:100%;
        justify-content:center;
        gap:60px;

    }

}


/* Mobile */
@media (max-width:768px){

    footer{

        margin-top:120px;
        padding-top:85px;

    }

    .footer-badge{

        width:130px;
        height:130px;
        top:-65px;

    }

    .footer-badge svg{

        width:130px;
        height:130px;

    }

    .footer-logo{

        width:140px;

    }

    .footer-right{

        flex-direction:column;
        gap:25px;
        align-items:center;

    }

    .footer-right ul{

        padding:0;

    }

    .footer-right li{

        font-size:14px;
        margin-bottom:10px;

    }

    .social-icons{

        justify-content:center;
        flex-wrap:wrap;

    }

    .copyright{

        font-size:11px;
        padding:12px 15px;
        line-height:1.6;

    }

}


/* Small Mobile */
@media (max-width:480px){

    footer{

        margin-top:100px;
        padding-top:75px;

    }

    .footer-badge{

        width:110px;
        height:110px;
        top:-55px;

    }

    .footer-badge svg{

        width:110px;
        height:110px;

    }

    .footer-logo{

        width:120px;

    }

    .social-icons{

        gap:12px;

    }

    .social-icons a{

        width:34px;
        height:34px;
        font-size:14px;

    }

    .footer-right li{

        font-size:13px;

    }

    .copyright{

        font-size:10px;

    }

}

/* navbar */


/*==========================
RESPONSIVE NAVBAR
===========================*/

@media(max-width:991px){

    header{

        padding:18px 0;

    }

    .logo img{

        width:120px;

    }

    .mobile-toggle{

        display:block;

    }

    .nav-links{

        position:fixed;

        top:0;

        right:-100%;

        width:280px;

        height:100vh;

        background:#fff;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:35px;

        box-shadow:-10px 0 40px rgba(0,0,0,.12);

        transition:.45s ease;

        z-index:999;

    }

    .nav-links.active{

        right:0;

    }

    .nav-links li{

        width:100%;

        text-align:center;

    }

    .nav-links a{

        font-size:20px;

        color:#4b176d;

        display:block;

        padding:10px;

    }

    .nav-links a::after{

        display:none;

    }

}

@media(max-width:768px){

    .logo img{

        width:105px;

    }

}

@media(max-width:480px){

    .nav-links{

        width:100%;

    }

}


/* WHY CHOOSE */

@media(max-width:991px){

    .choose-grid{

        grid-template-columns:1fr;

    }

    .section-heading h2{

        font-size:50px;

    }

}

@media(max-width:768px){

    .choose-section{

        padding:90px 0;

    }

    .section-heading h2{

        font-size:40px;

    }

    .choose-card{

        padding:35px;

    }

    .number{

        font-size:55px;

    }

}

@media(max-width:576px){

    .section-heading h2{

        font-size:32px;

    }

    .choose-card{

        padding:28px;

    }

    .choose-card h3{

        font-size:22px;

    }

    .choose-card p{

        font-size:15px;

    }

}


/* BEST SERVED */


@media(max-width:991px){

    .served-wrapper{

        grid-template-columns:1fr;

    }

    .served-image{

        order:-1;

        max-width:450px;

        margin:auto;

    }

}

@media(max-width:768px){

    .served-section{

        padding:90px 0;

    }

    .served-content h2{

        font-size:46px;

    }

    .serve-item{

        padding:18px;

    }

}

@media(max-width:576px){

    .served-content h2{

        font-size:36px;

    }

    .serve-item{

        flex-direction:column;

        text-align:center;

        align-items:center;

    }

    .served-btn{

        width:100%;

        justify-content:center;

    }

}


/* COCKTAIL */

@media(max-width:991px){

.cocktail-wrapper{

grid-template-columns:1fr;

gap:60px;

}

.cocktail-image{

order:1;

max-width:500px;

margin:auto;

}

.cocktail-content{

order:2;

text-align:center;

}

.recipe-box{

text-align:left;

}

.cocktail-content h2{

font-size:50px;

}

}

@media(max-width:576px){

.cocktail-section{

padding:80px 0;

}

.cocktail-content h2{

font-size:38px;

}

.recipe-box{

padding:22px;

}

.cocktail-btn{

width:100%;

justify-content:center;

}

}

/* CRAFTED */


@media(max-width:991px){

.crafted-section{

min-height:700px;

text-align:center;

}

.crafted-content{

margin:auto;

}

.crafted-content .gold-line{

margin:30px auto;

}

.crafted-content h2{

font-size:58px;

}

.crafted-content blockquote{

padding-left:0;

border:none;

font-size:30px;

}

}

@media(max-width:576px){

.crafted-section{

padding:100px 0;

min-height:auto;

}

.crafted-content h2{

font-size:40px;

}

.crafted-content p{

font-size:15px;

}

.crafted-content blockquote{

font-size:24px;

}

.crafted-btn{

width:100%;

}

}


@media(max-width:768px){

.faq-section{

padding:90px 0;

}

.faq-heading h2{

font-size:46px;

}

.faq-question{

padding:22px;

}

.faq-question h3{

font-size:18px;

width:85%;

}

.faq-answer p{

padding:0 22px 22px;

}

}

@media(max-width:576px){

.faq-heading h2{

font-size:36px;

}

.faq-question{

align-items:flex-start;

}

.faq-icon{

width:38px;

height:38px;

font-size:22px;

}

}

@media(max-width:991px){

.highlights-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.highlights-section{

padding:90px 0;

}

.highlights-heading h2{

font-size:46px;

}

.highlights-grid{

grid-template-columns:1fr;

}

.highlight-card{

padding:30px;

}

}

@media(max-width:576px){

.highlights-heading h2{

font-size:36px;

}

.highlight-card h3{

font-size:20px;

}

.highlight-number{

width:55px;

height:55px;

font-size:20px;

}

}