@charset "utf-8";
/* CSS Document */
body{ width:100%; padding:0; margin:0; background:#fff;  font-family: var(--primary-font); color: var(--dark-color);}
a{ outline:none; text-decoration:none; }
a:focus, a:hover{ outline:none; text-decoration:none; }
ul{ padding:0; margin:0; list-style:none; }
@media screen and (min-width: 1300px) { 
	.container{ max-width:1194px; }
}

/* ________________________header start________________________ */
header{  background: url('../images/banner-bg.jpg') center no-repeat; background-size: cover; position: relative; z-index: 1; overflow-x: hidden;}
header::after { content:''; position:absolute; bottom:-2px; bottom:0px; left:0; width:200%; height:203px; background:url('../images/banner-bottom-element.png') repeat-x; background-size:contain; animation:scrollLoop 60s linear infinite; z-index:2; pointer-events: none; background-position-y: bottom;}
@keyframes scrollLoop { 0% { transform: translateX(0); } 100% { transform: translateX(-50%);} }
header .top-block{ display: flex; justify-content: space-between; align-items: center; padding-top: 31px;}
header .top-block .left,
header .top-block .right{ display: flex; align-items: center; gap: 23px;}
header .main-block{ padding-block: 110px 140px;}
header .main-block h2{ --font-size: clamp(1.25rem, 1.169rem + 0.4321vw, 1.6875rem); font-size: var(--font-size); font-weight: 700; font-family: var(--secondary-font); padding-bottom: 34px; line-height: calc(var(--font-size) + 6px);}
header .main-block h1 span,
header .main-block h2 span{ color: var(--primary-color);}
header .main-block h1{ font-size: clamp(2.1875rem, 1.9792rem + 1.1111vw, 3.3125rem); line-height: clamp(2.5rem, 2.2454rem + 1.358vw, 3.875rem); font-weight: 700; font-family: var(--secondary-font); padding-bottom: 33px; color: var(--secondary-color);}
header .main-block h1 span{ position: relative;}
header .main-block h1 span::after{ content: ''; background:url('../images/banner-heading-apple.png') center no-repeat; background-size: cover; width: 42px; aspect-ratio: 1/1; position: absolute; right: -44px; top: 0;}
header .main-block p{ padding-bottom: 28px; font-size: clamp(1rem, 0.9769rem + 0.1235vw, 1.125rem); line-height: 28px;}
/* ________________________header end________________________ */


/* ________________________Introduction section start________________________ */
.introduction-section{ background-color: var(--secondary-color); color: var(--white-color); position: relative; z-index: 999; padding-bottom: 75px;}
.introduction-section .img-box{ border: 5px solid var(--white-color); transform: rotate(-8deg);  margin-right: 30px; height: 100%; color: var(--whead-color);}
.introduction-section h3{ font-size: clamp(1.5625rem, 1.2731rem + 1.5432vw, 3.125rem); line-height: clamp(2.0625rem, 1.7153rem + 1.8519vw, 3.9375rem); padding-block:9px 41px; font-weight: 700; font-family: var(--secondary-font);}
.introduction-section p{ padding-bottom: 60px; font-size: clamp(1rem, 0.9306rem + 0.3704vw, 1.375rem); line-height: clamp(1.625rem, 1.463rem + 0.8642vw, 2.5rem);}
.introduction-section p:last-child{ padding-bottom: 0;}
/* ________________________Introduction section end________________________ */


/* ________________________award wining section start________________________ */
.award-winning-section{ background: url('../images/award-bgjpg.jpg') center no-repeat; background-size: cover; color: var(--white-color); text-align: center; padding-block: 77px 150px; position: relative; z-index: 1;}
.award-winning-section::after{ content: ''; width: 173px; height: 153px; background: url('../images/award-section-grass.png') repeat; position: absolute; bottom: 0; right: 57px; z-index: 2;}
.award-winning-section::before{ content: ''; width: 173px; height: 153px; background: url('../images/award-section-grass.png') repeat; position: absolute; bottom: 0; right: 57px; animation: grass-ani-1 0.5s linear infinite; transform-origin: bottom; z-index: 2;}
@keyframes grass-ani-1 { 0%{ transform: rotate(-1.5deg);} 50%{ transform: rotate(0deg);} 100%{ transform: rotate(-1.5deg);}}
.award-winning-section h3{ font-size: clamp(1.875rem, 1.4815rem + 2.0988vw, 4rem); line-height: 1; font-weight: 700; font-family: var(--secondary-font); padding-bottom: 27px;}
.award-winning-section p{ font-size: clamp(1.125rem, 1.0787rem + 0.2469vw, 1.375rem); line-height: 28px; max-width: 720px; margin: 0 auto;}
.award-winning-section .main-block{ position: relative; z-index: 999;}
/* ________________________award wining section end________________________ */


/* ________________________video section start________________________ */
.video-section{ background-color: var(--whead-color); padding-bottom: 80px;}
.video-section .video-box{ position: relative; margin-top: -60px; z-index: 999; height: 460px; box-shadow: 0px 11px 10px 0px rgba(0, 0, 0, 0.1); border: 6px solid var(--white-color);}
.video-section .video-box a{transition: 0.3s ease-in-out; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 100px; color: var(--whead-color); animation: play_btn_ani 1.5s linear infinite;}
.video-section .video-box a:hover{ color: #FCAE4C; transition: 0.3s ease-in-out;}
/* ________________________video section end________________________ */




/* ________________________why special section start________________________ */
.why-special-section{ padding-block: 115px 80px; background-color: var(--whead-color); position: relative; overflow-x: hidden;}
.why-special-section::before{ content: ''; background: url('../images/special-section-design-element-1.png') no-repeat; height: 150px; width: 475px; position: absolute; bottom: 0; left: 0; background-size: contain; background-position-y:bottom;} 
.why-special-section::after{ content: ''; background: url('../images/special-section-design-element-2.png') no-repeat; height: 88px; width: 92px; position: absolute; bottom: 0; right: 81px; background-size: contain; background-position-y:bottom;} 
.why-special-section .img-group{ display: flex; justify-content: end; position: relative; z-index: 1; margin-right: 30px;}
.why-special-section .img-wrapper{ height: 400px; max-width: 570px; box-shadow: -7.502px 8.045px 0px 0px rgba(67, 66, 68, 0.14); border: 7px solid var(--white-color); transform: rotate(-10deg); display: flex; justify-content: end; }
.why-special-section .img-group .box-img{ position: absolute; top: -95px; left: -295px; max-width: 400px; z-index: 999;}
.why-special-section .img-group .box-img .arrow-wrapper{ position: relative;}
.why-special-section .img-group .box-img .arrow-wrapper .arrow{ position: absolute;  bottom: -70px; animation: special-arrow-ani 1s linear infinite;}
@keyframes special-arrow-ani{ 0%{ right: 35px;} 50%{ right: 40px;} 100%{ right: 35px;}}

.why-special-section .content-wrapper h3{ font-size: clamp(1.875rem, 1.6667rem + 1.1111vw, 3rem); line-height:  clamp(2.25rem, 2.0417rem + 1.1111vw, 3.375rem); font-weight: 700; font-family: var(--secondary-font); padding-bottom: 70px;}
.why-special-section .content-wrapper h3 span{ color: var(--primary-color); }
.why-special-section .content-wrapper h3 p{ position: relative;}
.why-special-section .content-wrapper h3 p::after{ content: '100% YUM'; padding: 18px 25px 15px 29px; position: absolute; top: -27px; right: 40px; font-size: clamp(0.8125rem, 0.7546rem + 0.3086vw, 1.125rem); font-weight: 500; background:url('../images/yum-tag.png') center no-repeat; background-size: contain; color: var(--white-color);}

/* ________________________why special section start________________________ */


/* ________________________health-conscious section start________________________ */
.health-conscious-section{ background-color: var(--secondary-color); padding-block: 115px 125px; text-align: center; color: var(--white-color); position: relative;}
.health-conscious-section .apple-1{ max-width: 126px; position: absolute; top: 35px; left: 55px; animation: apple-1-ani 1.5s linear infinite;}
.health-conscious-section .apple-2{ max-width: 156px; position: absolute; bottom: 50px; right: 74px; animation: apple-2-ani 1.5s linear infinite; z-index: 99;}
@keyframes apple-1-ani{  0% {top: 25px;} 50%{ top: 35px;} 100%{ top: 25px;}}
@keyframes apple-2-ani{  0% {bottom: 40px;} 50%{ bottom: 50px;} 100%{ bottom: 40px;}}
.health-conscious-section h3{ font-size: clamp(1.875rem, 1.6782rem + 1.0494vw, 2.9375rem); line-height: clamp(2.1875rem, 2.0023rem + 0.9877vw, 3.1875rem); font-family: var(--secondary-font); font-weight: 700; padding-bottom: 53px; max-width: 585px; margin: 0 auto;}
.health-conscious-section h3 span{color: var(--tertiary-color); }
.health-conscious-section p{ font-size: clamp(1rem, 0.9306rem + 0.3704vw, 1.375rem); line-height: clamp(1.625rem, 1.4861rem + 0.7407vw, 2.375rem); max-width: 700px; margin: 0 auto;}
/* ________________________health-conscious section end________________________ */


/* ________________________flavours section start________________________ */
.flavors-section{ padding-block: 95px 85px; background-color: var(--light-sky-color); position: relative; z-index: 1;}
.flavors-section .apple-3{ position: absolute; top: 140px; left: 50px; max-width: 146px; animation: apple-3-ani 2s linear infinite;}
.flavors-section .apple-4{ position: absolute; bottom: 340px; right: 140px; max-width: 167px; animation: apple-3-ani 2.5s linear infinite;}
.flavors-section .left-box{ position: relative; height: 100%;}
.flavors-section .left-box .apple-5{ position: absolute; bottom: 66px; left: 50%; transform: translateX(-50%); max-width: 129px; animation: apple-3-ani 2.5s linear infinite;}
.flavors-section .right-box .top{ margin-bottom: 50px;}
.flavors-section .right-box .top h3{ font-size: clamp(1.875rem, 1.5509rem + 1.7284vw, 3.625rem); line-height: clamp(2.3125rem, 1.8958rem + 2.2222vw, 4.5625rem); font-family: var(--secondary-font); font-weight: 700; padding-bottom: 42px;}
.flavors-section .right-box .top h3 span{color: var(--primary-color);}
.flavors-section .right-box .top p{ font-size: clamp(1.125rem, 1.044rem + 0.4321vw, 1.5625rem); line-height: clamp(1.6875rem, 1.5718rem + 0.6173vw, 2.3125rem); padding-bottom: 50px;}
.flavors-section .right-box .top p:last-child{ border-bottom: 1px solid #C0DBDE;}
.flavors-section .right-box .top .list-1 ul li{ color: var(--dark-color);}
.flavors-section .right-box .top .list-1{ padding-bottom: 25px;}
.flavors-section .right-box .bottom h4{ font-size: clamp(1.375rem, 1.2824rem + 0.4938vw, 1.875rem); line-height: clamp(1.875rem, 1.7593rem + 0.6173vw, 2.5rem); font-weight: 700; padding-bottom: 62px;}
.flavors-section .right-box .bottom{ font-size: clamp(1.0625rem, 1.0162rem + 0.2469vw, 1.3125rem); line-height: 2;}
@keyframes apple-3-ani{ 0%{ transform: rotate(0deg);}  50%{ transform: rotate(10deg);} 100%{ transform: rotate(0deg);}}
/* ________________________flavours section end________________________ */


/* ________________________gallery section start________________________ */
.gallery-section{ padding-block: 75px;}
.gallery-section h3{ font-size: clamp(1.875rem, 1.5509rem + 1.7284vw, 3.625rem); font-weight: 700; font-family: var(--secondary-font); padding-bottom: 73px; text-align: center;}
.gallery-section .slider-block .slide-block{ height: 275px; padding-inline: 15px;}
.gallery-section .slick-next,
.gallery-section .slick-prev{ background-color: transparent; border: none; position: absolute; top: 35%; transform: translateY(-50%); z-index: 999;}
.gallery-section .slick-prev{ left: -97px;}
.gallery-section .slick-next{ right: -97px;}
.gallery-section .slick-dots{ display: flex; gap: 18px; margin-top: 45px; justify-content: center;}
.gallery-section .slick-dots li button{ font-size: 0; height: 29px; width: 29px; border: none; background: url('../images/dot-apple.png') center no-repeat; background-size: contain;}
.gallery-section .slick-dots li.slick-active button{ background: url('../images/dot-active-apple.png') center no-repeat; z-index: 999; background-size: contain;}
/* ________________________gallery section end________________________ */


footer{ background-color: var(--secondary-color); padding-block: 30px;}
footer .main-block{ display: flex; justify-content: space-between; color: var(--white-color); align-items: center;}
footer p{ font-size: clamp(1rem, 0.8958rem + 0.5556vw, 1.5625rem);}
footer ul{ display: flex; gap: 30px;}
footer ul li a{ color: var(--white-color);}
footer ul li a i{ font-size: 35px;}


/*____________________________________________
                Media Quaries 
______________________________________________*/

@media only screen and (orientation:landscape) {
body { -webkit-text-size-adjust:none; }
}
@media only screen and (orientation:portrait) {
body { -webkit-text-size-adjust:none; }
}

@media screen and (max-width: 1799px){ .why-special-section .img-wrapper{ max-width: 500px; height: unset; aspect-ratio: 1/0.7;}  .why-special-section .img-group .box-img{ left: -125px;} .why-special-section .img-group .box-img{ max-width: 350px;}}

@media screen and (max-width: 1499px){ .why-special-section .img-wrapper{ max-width: 400px; height: unset; aspect-ratio: 1/0.7;}  .why-special-section .img-group .box-img{ left: clamp(-1.25rem, 25.0878rem + -35.1171vw, -7.8125rem); top: -150px;} .why-special-section .img-group .box-img{ max-width: clamp(18.75rem, 6.2082rem + 16.7224vw, 21.875rem);} .why-special-section .row:has(.box-img){ align-items: center;} 
.flavors-section .apple-3{ top: 550px;}
.flavors-section .apple-4{ right: 20px; bottom: 540px;}
}


@media screen and (max-width: 1299px){
    .gallery-section .slick-next{ right: 10%;}
    .gallery-section .slick-prev{ left: 10%;}
    .gallery-section .slick-next, .gallery-section .slick-prev{ top: -20%;}
}


@media screen and (max-width: 1299px){
    .why-special-section .content-wrapper h3 p::after{ right: unset; left: 0; top: clamp(-3.75rem, -3.5623rem + -1.001vw, -4.375rem);}
}

@media screen and (max-width: 1199px){
	header .main-block{ padding-top: 60px;}
    header .main-block h1,
    header .main-block h2{ padding-bottom: 25px;}
    header .main-block p{ padding-bottom: 20px;}
    header .main-block{ padding-bottom: 120px;}
    .introduction-section .img-box{ transform: rotate(-5deg);}
    .introduction-section p,
    .introduction-section h3{ padding-bottom: 20px;}
    .introduction-section{ padding-bottom: 50px;}
    .award-winning-section{ padding-block: 45px 100px;}
    .why-special-section .img-group{ flex-direction: column; align-items: center; justify-content: start; gap: 20px; margin-right: 0;}
    .why-special-section .img-group .box-img{ position: initial;}
    .why-special-section{ padding-block: 80px 170px;}
    .why-special-section .img-group .box-img .arrow-wrapper .arrow{  transform: rotate(50deg); left: 0;}
    @keyframes special-arrow-ani{ 0%{ bottom: -30px;} 50%{ bottom: -25px ;} 100%{ bottom: -30px;}}
    .why-special-section .content-wrapper h3{ padding-bottom: 45px;}
    .health-conscious-section .apple-2{ max-width: 100px; right: 30px;}
    .health-conscious-section .apple-1{ left: 30px; max-width: 100px;}
    .health-conscious-section h3{ padding-bottom: 30px;}
    .health-conscious-section{ padding-block: 90px;}
    .flavors-section{ padding-block: 80px;}
    .flavors-section .right-box .bottom h4,
    .flavors-section .right-box .top h3{ padding-bottom: 20px;}
    .flavors-section .right-box .top p{ padding-bottom: 30px;}
    .flavors-section .right-box .top{ margin-bottom: 30px;}
    .flavors-section .apple-4{ max-width: 120px; bottom: 577px;}
    .flavors-section .apple-3{ max-width: 120px; left: 100px;}
    .flavors-section .left-box .apple-5{ max-width: 100px; bottom: 215px;}
    .gallery-section{ padding-block: 50px;}
    .gallery-section h3{ padding-bottom: 40px;}
    .gallery-section .slick-dots{ margin-top: 30px;}
    footer{ padding-block: 20px;}
    .video-section{ padding-bottom: 0;}
}
@media screen and (max-width: 991px){
   header .logo-1{ max-width: 150px;}
   header .logo-2{ max-width: 70px;}
   header .logo-3{ max-width: 140px;}
   header .main-block{ padding-top: 40px;}
   header .main-block [class^="col-"]:has(.right-box){ display: flex; justify-content: center;}
   header .main-block .right-box{ max-width: 70%;}
   header .main-block .button-wrapper{ display: flex; justify-content: center; margin-bottom: 20px;}
   .introduction-section .img-box{ height: unset; max-width: 60%; aspect-ratio: 1/1.3; transform: rotate(0deg); margin-right: 0;}
   .introduction-section [class^="col-"]:has(.img-box){ display: flex; justify-content: center; margin-bottom: 20px;}
   .introduction-section .content-box{ text-align: center;}
   .award-winning-section::before,
   .award-winning-section::after{ opacity: 0.3;}
   .award-winning-section{ padding-block: 40px;}
   .why-special-section .img-wrapper{transform:  rotate(0);}
   .why-special-section .content-wrapper{ margin-top: 90px;}
   .why-special-section .content-wrapper h3{ padding-bottom: 30px;}
   .why-special-section{ padding-top: 50px;}
   .health-conscious-section h3{ padding-bottom: 20px;}
   @keyframes apple-1-ani{  0% {top: 10px;} 50%{ top: 20px;} 100%{ top: 10px;}}
   @keyframes apple-2-ani{  0% {bottom: 40px;} 50%{ bottom: 50px;} 100%{ bottom: 40px;}}
   .health-conscious-section .apple-2,
   .health-conscious-section .apple-1{ max-width: 70px;}
   .health-conscious-section{ padding-block: 70px;}
   .flavors-section .left-box{ display: flex; justify-content: center; margin-bottom: 20px}
   .flavors-section .left-box .apple-5{ display: none;}
   .flavors-section .apple-3{ top: -66px; left: 0; max-width: 90px;}
   .flavors-section .apple-4{ bottom: -30px; right:10px;}
   .video-section .video-box{ margin-top: 45px; height: 350px;}
   
   
}


/*NEW GRID SYSTEM*/
@media screen and (max-width:767px){
    header .top-block .left, header .top-block .right{ flex-wrap: wrap;}
    header .top-block{ flex-direction: column; gap: 10px;}
    header .main-block{ padding-top: 25px;}
    header .main-block{ padding-bottom: 80px;}
    header .main-block .right-box{ max-width: 80%;}
    .introduction-section .img-box{ max-width: 70%; aspect-ratio: 1/1.2;}
    .award-winning-section{ padding-block: 35px;}
    .why-special-section .content-wrapper h3{ padding-bottom: 20px;}
    .why-special-section .content-wrapper{ margin-top: 80px;}
    .why-special-section{ padding-top: 40px;}
    .health-conscious-section{ padding-block: 40px;}
    @keyframes apple-1-ani{  0% {top: -90px;} 50%{ top: -100px ;} 100%{ top: -90px;}}
    @keyframes apple-2-ani{  0% {bottom: -40px;} 50%{ bottom: -45px;} 100%{ bottom: -40px;}}
    .flavors-section{ padding-bottom: 50px;}
    .video-section .video-box a{ font-size: 70px;}
    .video-section .video-box{ height: 300px;}
}

@media screen and (max-width:575px){
    header .main-block{ padding-top: 20px;}
    header .main-block{ padding-bottom: 70px;}
    .award-winning-section{ padding-block: 30px;}
    .health-conscious-section{ padding-bottom: 60px;}
    .flavors-section{ padding-bottom: 40px;}
    .flavors-section .right-box .bottom h4,
    .flavors-section .right-box .top h3{ padding-bottom: 15px;}
    .flavors-section .right-box .top p{ padding-bottom: 20px;}
    .flavors-section .right-box .top{ margin-bottom: 20px;}
    .gallery-section{ padding-block: 30px;}
    .gallery-section h3{ padding-bottom: 30px;}
    .gallery-section .slick-dots li button{ height: 20px; width: 20px;}
    .gallery-section .slick-dots{ gap: 12px;}
    footer ul{ gap: 20px;}
}

@media screen and (max-width:500px){
    header .main-block{ padding-bottom: 60px;}
    .introduction-section p, .introduction-section h3{ padding-bottom: 15px;}
    .introduction-section{ padding-bottom: 30px;}
    .introduction-section .img-box{ max-width: 75%;}
    .award-winning-section{ padding-block: 25px;}
    .why-special-section .content-wrapper h3{ padding-bottom: 15px;}
    .why-special-section .content-wrapper{ margin-top: 70px;}
    .why-special-section{ padding-top: 30px;}
    .flavors-section{ padding-bottom: 30px;}
    .flavors-section .apple-3{ max-width: 70px; top: -50px;}
    .flavors-section .apple-4{ max-width: 90px;}
    .gallery-section{ padding-block: 20px;}
    .gallery-section h3{ padding-bottom: 20px;}
    footer .main-block{ flex-direction: column; align-items: center; gap: 15px; text-align: center;}
    .video-section .video-box{ height: 250px; margin-top: 30px;}
    .video-section .video-box a{ font-size: 50px;}
}

@media screen and (max-width:400px){
   header .logo-1{ max-width: 130px;}
   header .logo-2{ max-width: 50px;}
   header .logo-3{ max-width: 109px;}
   .btn-1{ padding: 10px 14px 17px 7px;}
   header .main-block{ padding-bottom: 50px;}
   .introduction-section .img-box{ max-width: 80%;}
   .flavors-section{ padding-bottom: 20px;}
   .video-section .video-box{ height: 180px;}
   .video-section .video-box a{ font-size: 40px;}
   
}

@media screen and (max-width:350px){

}