* {
  box-sizing: border-box;
  font-family: 'Arial';
  font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'New Spirit';
  color: #121212;
  font-weight: 700;
}

p,ul li, ol li {
  font-size: 20px;
  color: #121212;
  line-height: 24px;
}
.container{
  width: 100%;
  max-width: 1230px;
  margin:auto;
  padding-left: 15px;
  padding-right: 15px;

}


*,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td {
  margin: 0;
  padding: 0;
}

a:hover {
  text-decoration: none;
}

a {
  text-decoration: none;
}

.heading {
    text-align: center;
    margin-bottom: 40px;
}

.heading h1 {
    font-size: 40px;
}

:root {
  /* Cola flavor variables */
  --colabeforebg: url('./images/cola_beforebg.png');
  --colawhybaraqabg: #EC2125;
  --colabaraqalightbg:#FDE9E9;
  --colacustomerloves:#FBD3D3;
  --colaHeroImg: url('./images/cola-bg.jpg');
  --colaHeroGIF: url('./images/cola_bubble.gif');
  --colacustomerlovesImg: url('./images/cola-customer-lovesbg.png');
  --colacustomerlovesImgBot: url('./images/cola-customer-lovesbgbot.png');
  --coladailydosebefore: url('./images/cola_daily_dose_before.png');
  --colamissionbg: url('./images/colamissionbg.png');
  --colafooterbg: url('./images/colafooterbg.png');
  --colamenuColor:#FDE9E9;
  
  /* Jaljeera flavor variables */
  --jaljeerabeforebg: url('./images/jaljeera_beforebg.png');
  --jaljeerawhybaraqabg: #718F04;
  --jaljeerabaraqalightbg:#F1F4E6;
  --jaljeeracustomerloves:#E3E9CD;
  --jaljeeraHeroImg: url('./images/jaljeera-bg.jpg');
  --jaljeeraHeroGIF: url('./images/jaljeera_bubble.gif');
  --jaljeeracustomerlovesImg: url('./images/jaljeera-customer-lovesbg.png');
  --jaljeeracustomerlovesImgBot: url('./images/jaljeera-customer-lovesbgbot.png');
  --jaljeeradailydosebefore: url('./images/jaljeera_daily_dose_before.png');
  --jaljeeramissionbg: url('./images/jaljeeramissionbg.png');
  --jaljeerafooterbg: url('./images/jaljeerafooterbg.png');
  --jaljeeramenuColor:#F1F4E6;
  
  /* Orange flavor variables */
  --orangebeforebg: url('./images/orange_beforebg.png');
  --orangewhybaraqabg: #EF522B;
  --orangebaraqalightbg:#FDF0EC;
  --orangecustomerloves:#FCDCD5;
  --orangeHeroImg: url('./images/orange-bg.jpg');
  --orangeHeroGIF: url('./images/orange_bubble.gif');
  --orangecustomerlovesImg: url('./images/orange-customer-lovesbg.png');
  --orangecustomerlovesImgBot: url('./images/orange-customer-lovesbgbot.png');
  --orangedailydosebefore: url('./images/orange_daily_dose_before.png');
  --orangemissionbg: url('./images/orangemissionbg.png');
  --orangefooterbg: url('./images/orangefooterbg.png');
  --orangemenuColor:#FDF0EC;
  
  /* Lemon flavor variables */
  --lemonbeforebg: url('./images/lemon_beforebg.png');
  --lemonwhybaraqabg: #02753C;
  --lemonbaraqalightbg:#E6F1EC;
  --lemoncustomerloves:#CCE3D8;
  --lemonHeroImg: url('./images/lemon-bg.jpg');
  --lemonHeroGIF: url('./images/lemon_bubble.gif');
  --lemoncustomerlovesImg: url('./images/lemon-customer-lovesbg.png');
  --lemoncustomerlovesImgBot: url('./images/lemon-customer-lovesbgbot.png');
  --lemondailydosebefore: url('./images/lemon_daily_dose_before.png');
  --lemonmissionbg: url('./images/lemonmissionbg.png');
  --lemonfooterbg: url('./images/lemonfooterbg.png');
  --lemonmenuColor:#E6F1EC;
  
  /* Dynamic variables (these will change) - default to cola */
  --current-beforebg: var(--colabeforebg);
  --current-whybaraqabg: var(--colawhybaraqabg);
  --current-HeroImg: var(--colaHeroImg);
  --current-HeroGIF: var(--colaHeroGIF);
  --current-customerlovesImg: var(--colacustomerlovesImg);
  --current-customerlovesImgBot: var(--colacustomerlovesImgBot);
  --current-dailydosebefore: var(--coladailydosebefore);
  --current-missionbg: var(--colamissionbg);
  --current-footerbg: var(--colafooterbg);
  --current-baraqalightbg:var(--colabaraqalightbg);
  --current-customerloves:var(--colacustomerloves);
  --current-menuColor:#E6F1EC;
}

/*-------------------- Header Start------------------ */
header .header_head {
    display: flex;
    justify-content: space-between;
}

header {
    background: var(--current-whybaraqabg);
    padding: 30px 0px;
    transition: background-color 300ms ease;
}

.header_head nav a {
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    padding-left: 40px;
    font-family: 'New Spirit';
    font-weight: 500;
}
/*-------------------- Header End------------------ */



/*--------- Top Carousel Slider Start------ */


.theme-cola {
    background-image: var(--current-HeroImg);
    background-size: cover;
}


.hero {
    display: grid;
    grid-template-columns: 512px 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'content '
        'bottle';
    align-items: center;
    transition: all 0.5s ease;
    gap: 35px;
    min-height: 700px;
}

.hero-text {
    grid-area: content;
    grid-row: 1/3;
}

.hero-text h1 {
    font-size: 56px;
    margin-bottom: 16px;
}
.hero-text p {
    margin-bottom: 48px;
}

.hero-text a {
    background: var(--current-whybaraqabg);
    color: white;
    padding: 10px 37px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 25px;
    border: 1px solid #000;
    box-shadow: 0 2px 0 rgba(0,0,0,0.9);
}

.arrows {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 420px;
}

.bottles {
    grid-area: bottle;
/*    overflow: hidden;
    height: 510px;*/
    grid-column: 2/3;
}


.bottle {
    width: 135px;
    cursor: pointer;
    transition: all 0.4s ease;
    transform: scale(0.9);
    flex-shrink: 0;
}

.bottle:hover{
    transform: scale(0.95) translateY(-10px);
}

.bottle.active {
    width: 230px;
    opacity: 1;
    /*animation: bounce 0.5s ease;*/
}



.hero-text .arrows button {
    background: #fff;
    cursor: pointer;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
}

/*.arrows button:hover {
  background: rgba(0, 0, 0, 0.1);
}*/

/*--------- Top Carousel Slider End------ */



/*----------- Why Baraqa Start----------- */

.why_baraqa {
    background:var(--current-baraqalightbg);
    padding: 65px 0 90px;
    position: relative;
    margin-top: -15px;
}
.why_baraqa:before {
    content: "";
    position: absolute;
    left: 0;
    top: -21px;
    width: 100%;
    height: 22px;
    background: var(--current-beforebg);
    background-repeat: no-repeat;
    background-size: 100%;
}
.why_baraqa .container {
    max-width: 952px;
}

.why_baraqa .heading {
    text-align: center;
    max-width: 460px;
    margin: 0 auto 40px;
}

.why_baraqa .heading h1 {
    font-size: 56px;
    margin-bottom: 23px;
}

.why_baraqa_head {
    display: flex;
    gap: 24px;
}

.why_baraqa_head .slide {
    text-align: center;
    max-width: 230px;
    margin: 0 auto 40px;
}
.why_baraqa_head .slide svg {
    fill: var(--current-whybaraqabg);
    margin-bottom: 16px;
}
.why_baraqa_head .slide p {
    font-size: 16px;
}

.why_baraqa_head .slide img {
    margin-bottom: 16px;
}

.why_baraqa_btn {
    text-align: center;
}

.why_baraqa_btn a {
    background: var(--current-whybaraqabg);
    font-size: 20px;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
    min-width: 281px;
    height: 54px;
    display: inline-block;
    line-height: 54px;
    border: 1px solid #000;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.9);
}
/*----------- Why Baraqa End----------- */

/*----------- Offer Banner Start ----------- */
.offer_banner {
    position: relative;
    margin-top: -25px;
}

/*----------- Offer Banner End ----------- */



/*----------- Our Story Start ----------- */
.our_story {
    background: var(--current-baraqalightbg);
    padding: 100px 0;
    margin-top: -35px;
}

.our_story_grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.our_story .left img{
  width: 100%;
}

.our_story_grid .right {
    max-width: 580px;
}

.our_story_grid .right h1 {
    font-size: 40px;
    margin-bottom: 16px;
}

/*----------- Our Story End ----------- */


/*---------------------- Testimonials Start ----------------------- */

.testimonials_section {
    position: relative;
    padding: 65px 0;
    background: var(--current-customerloves);
}


.testimonials_section:before {
    content: "";
    position: absolute;
    left: 0;
    top: -40px;
    width: 100%;
    height: 43px;
    background: var(--current-customerlovesImg);
    background-repeat: no-repeat;
    background-size: 100%;
}

.testimonials_section:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -41px;
    width: 100%;
    height: 41px;
    background: var(--current-customerlovesImgBot);
    background-repeat: no-repeat;
    background-size: 100%;
}

.testimonials_section .container {
    max-width: calc(calc(100% - 1280px) / 2 + 1280px);
    width: 100%;
    margin-left: auto;
    margin-right: 0;
    padding-right: 0;
}

.testimonials_section .slide {
    background: #fff;
    padding: 40px;
    border-radius: 16px;
}

.testimonials_section .shadow .name {
    font-size: 16px;
    font-weight: 600;
}
.testimonials_section .splide__track{
    padding-left: 0 !important;
}

.testimonials_section .slide .content {
    margin-bottom: 55px;
    line-height: 32px;
}


/*---------------------- Testimonials End ----------------------- */


/*------------------ Daily Dose Start---------------*/

.daily_dose {
    background: var(--current-baraqalightbg);
    padding: 65px 0;
    position: relative;
    z-index: -1;
}
.daily_dose:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -22px;
    width: 100%;
    height: 22px;
    background: var(--current-dailydosebefore);
    background-repeat: no-repeat;
    background-size: 100%;
}

.daily_dose_grid {
    display: flex;
    align-items: center;
    gap: 75px;
    justify-content: space-between;
}

.daily_dose_grid .left h1 {
    font-size: 40px;
    margin-bottom: 8px;
}

.daily_dose_grid .left p {
    margin-bottom: 16px;
}

.daily_dose_grid .left .insta_text {
    display: flex;
    align-items: center;
    gap: 16px;
}

.daily_dose_grid .left .insta_text > div {
    background: var(--current-whybaraqabg);;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.daily_dose_grid .right img {
    width: 100%;
}

/*------------------ Daily Dose End---------------*/


/*------------ Frequently Asked Questions Start --------------- */
.frequently_asked_question {
    padding: 80px 0;
}

.frequently_asked_question .container {
    max-width: 820px;
}

.faq-item {
  border-bottom: 1px solid #000;
  padding: 8px 0;
}

.faq-question {
  width: 100%;
  text-align: left;
  font-size: 16px;
  background: none;
  border: none;
  outline: none;
  padding: 8px 0;
  position: relative;
  cursor: pointer;
}

.faq-question::after {
    content: "";
    position: absolute;
    right: 0;
    transition: transform 0.3s ease;
    background-image: url("data:image/svg+xml;charset=UTF-8, %3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20.031 9.53104L12.531 17.031C12.4614 17.1008 12.3787 17.1561 12.2876 17.1938C12.1966 17.2316 12.099 17.251 12.0004 17.251C11.9019 17.251 11.8043 17.2316 11.7132 17.1938C11.6222 17.1561 11.5394 17.1008 11.4698 17.031L3.96979 9.53104C3.82906 9.39031 3.75 9.19944 3.75 9.00042C3.75 8.80139 3.82906 8.61052 3.96979 8.46979C4.11052 8.32906 4.30139 8.25 4.50042 8.25C4.69944 8.25 4.89031 8.32906 5.03104 8.46979L12.0004 15.4401L18.9698 8.46979C19.0395 8.40011 19.1222 8.34483 19.2132 8.30712C19.3043 8.26941 19.4019 8.25 19.5004 8.25C19.599 8.25 19.6965 8.26941 19.7876 8.30712C19.8786 8.34483 19.9614 8.40011 20.031 8.46979C20.1007 8.53947 20.156 8.6222 20.1937 8.71324C20.2314 8.80429 20.2508 8.90187 20.2508 9.00042C20.2508 9.09896 20.2314 9.19654 20.1937 9.28759C20.156 9.37863 20.1007 9.46136 20.031 9.53104Z' fill='%23121212'/%3e%3c/svg%3e ");
    background-repeat: no-repeat;
    width: 20px;
    height: 100%;
}

.faq-question.active::after {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
}
/*------------ Frequently Asked Questions End --------------- */



/*-------------- Mission Soda Industry Start ------------- */

.mission_soda_industry {
    background: var(--current-customerloves);
    padding: 65px 0 80px;
    position: relative;
}

.mission_soda_industry:before {
    content: "";
    position: absolute;
    left: 0;
    top: -19px;
    width: 100%;
    height: 22px;
    background: var(--current-missionbg);
    background-repeat: no-repeat;
    background-size: 100%;
}

.mission_soda_industry .container {
    max-width: 730px;
}

/*-------------- Mission Soda Industry End ------------- */


/*---------------------------- Footer Start----------------------- */

footer {
    background: var(--current-whybaraqabg);
    position: relative;
    padding-bottom: 65px;
    padding-top: 65px;
}
footer:before {
    content: "";
    position: absolute;
    left: 0;
    top: -40px;
    width: 100%;
    height: 43px;
    background: var(--current-footerbg);
    background-repeat: no-repeat;
    background-size: 100%;
}

footer .footer_logo {
    text-align: center;
    max-width: 700px;
    margin: auto;
    padding-bottom: 32px;
}

footer .footer_logo p {
    font-family: 'New Spirit';
    color: #fff;
    font-weight: 500;
}

.footer_logo img {
    padding-bottom: 32px;
}
.footer_logo svg{
    margin-bottom: 32px;
}


footer .footer_socials_link ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding-top: 32px;
    padding-bottom: 32px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}




footer .footer_socials_link {
    text-align: center;
}

footer .footer_socials_link ul li a {
    color: #fff;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-family: 'New Spirit';
    font-weight: 500;
}

footer .footer_bottom {
    text-align: center;
    padding-top: 32px;
}

footer .footer_bottom p {
    font-size: 16px;
    color: #fff;
}

/*---------------------------- Footer End ----------------------- */



/*------------ Product Page Start ------------------*/
.details_top {
    background: var(--current-baraqalightbg);
    padding: 65px 0;
}

.details_top_grid {
    display: grid;
    grid-template-columns: 690px 1fr;
    gap: 40px;
}

.details_top_grid .left .big_img img {
    width: 100%;
}

.details_top_grid .left {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 16px;
}

.details_top_grid .left .small_img .slide {
    background: var(--current-customerloves);
    margin-bottom: 16px;
    border-radius: 15px;
    text-align: center;
    padding: 28px 0;
}

.details_top_grid .left .small_img .slide svg {
    margin: 0 auto 16px;
}

.details_top_grid .left .small_img .slide span {
    font-size: 20px;
    display: block;
    line-height: 25px;
    color: #121212;
}

.details_top_grid .right > svg {
    margin-bottom: 8px;
}

.details_top_grid .right h1 {
    font-size: 40px;
    margin-bottom: 8px;
    font-weight: 600;
}

.details_top_grid .right .classic_rein {
    font-size: 18px;
    color: #8E8E93;
    margin-bottom: 16px;
    display: inline-block;
}

.details_top_grid .right .price {
    font-size: 30px;
    font-family: 'New Spirit';
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 32px;
}

.details_top_grid .right .price span {
    font-family: 'New Spirit';
    font-size: 16px;
    line-height: 28px;
    font-weight: 600;
    text-transform: uppercase;
}

.details_top_grid .right .available_sizes {
    margin-bottom: 32px;
}

.details_top_grid .right .available_sizes .available_size_text {
    font-size: 15px;
    margin-bottom: 8px;
    display: inline-block;
    line-height: 20px;
}

.details_top_grid .right .available_sizes .buttles_grid {
    display: flex;
    gap: 8px;
}

.details_top_grid .right .available_sizes .buttles_grid button {
    border: 1px solid #121212;
    border-radius: 8px;
    min-width: 91px;
    height: 37px;
    background: #fff;
    font-size: 16px;
    line-height: 21px;
    color: #121212;
}

.details_top_grid .right .our_flavours .our_flavours_text {
    font-size: 15px;
    margin-bottom: 8px;
    display: inline-block;
    line-height: 20px;
}

.details_top_grid .right .our_flavours .flavours_grid {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
}

.details_top_grid .right .our_flavours .flavours_grid .flavours_slide img {
    width: 90px;
    border-radius: 8px;
    height: 90px;
    object-position: top;
}

.details_top_grid .right .our_flavours .flavours_grid .flavours_slide {
    position: relative;
    border-radius: 8px;
    border: 1px solid #121212;
    color: #121212;
}

.details_top_grid .right .our_flavours .flavours_grid .flavours_slide .flavour_name {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 37px;
    text-align: center;
    line-height: 37px;
    border-radius: 0 0 8px 8px;
}

.details_top_grid .right .order_now {
    height: 55px;
    width: 100%;
    border-radius: 50px;
    background: var(--current-whybaraqabg);
    border: 1.5px solid #121212;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 0 rgba(0,0,0,0.9);
    cursor: pointer;
}

.details_top_grid .right .available_sizes .buttles_grid button.active {
    border: 2px solid #121212;
}

.details_top_grid .right .our_flavours .flavours_grid .flavours_slide.active {
    border: 2px solid #121212;
}

.pdp_description {
    background: var(--current-customerloves);
    position: relative;
    padding: 65px 0;
}

.pdp_description:before {
    content: "";
    position: absolute;
    left: 0;
    top: -31px;
    width: 100%;
    height: 31px;
    background: url(./images/cola_description_pdp_before.png);
    background-repeat: no-repeat;
    background-size: 100%;
}

.pdp_description .faq-question {
    font-size: 20px;
    font-weight: 700;
    color: #121212;
}
.pdp_description .faq-answer p {
    font-size: 16px;
    line-height: 24px;
}

.adds_organic-pdp {
    position: relative;
    margin-top: -28px;
    z-index: 1;
}

.adds_organic-pdp img {
    width: 100%;
}

.pdp_testimonials{
    background: var(--current-baraqalightbg);
    margin-top: -35px;
}

.pdp_testimonials .slide {
    background: var(--current-customerloves);
    text-align: center;
}
.pdp_testimonials:before{
    content: none;
}
.pdp_testimonials .slide .shadow svg{
    margin-bottom: 16px;
}

.pdp_testimonials .slide .content {
    margin-bottom: 16px;
    line-height: 24px;
    font-size: 16px;
}

.pdp_testimonials .shadow .name {
    font-family: 'New Spirit';
    line-height: 25px;
}
.pdp_testimonials:after{
    content: none;
}

.pdp_fre_askd_qsn {
    padding: 65px 0;
    background: var(--current-baraqalightbg);
}

.pdp_fre_askd_qsn{
    padding: 65px 0 80px;
    background: var(--current-baraqalightbg);
}


/*------------ Product Page End ------------------*/




/*---------- Contact Us Page End ----------- */

.contact_us {
    background-color: #FFFADE;
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.contact_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.contact_grid .left, .contact_grid .right {
    background: white;
    padding: 40px 40px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    min-height: 600px;
}

.contact_grid .left h2 {
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 8px 0;
}

.contact_grid .left > p {
    font-size: 16px;
    margin: 0 0 24px 0;
}

.contact_info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.info_item {
    display: flex;
    gap: 8px;
    align-items: center;
}

.info_item .icon {
    width: 64px;
    height: 64px;
    background: #FFFADE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #1a1a1a;
    border: 1px solid #FFF0A8;
}

.contact_grid .left .faq-question{

    font-size: 20px;
    font-weight: 700;
    color: #121212;
}
.contact_grid .left .faq-item {
    border-bottom: 0px solid #000;
    border-top: 1px solid #121212;
}

.info_text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info_text .label {
    font-size: 15px;
    color: #8E8E93;
    margin-bottom: 4px;
    line-height: 20px;
}

.info_text .value {
    font-size: 20px;
    color: #121212;
    font-weight: 700;
    text-decoration: none;
}

.info_text .value:hover {
    color: #333;
}

.contact_grid .right h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 24px 0;
    font-family: 'Arial';
}

.contact_form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form_group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form_group label {
    font-size: 15px;
    color: #121212;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 4px;
}

.form_group input, .form_group textarea {
    padding: 14px 16px;
    border: none;
    background: #F2F2F7;
    border-radius: 50px;
    font-size: 16px;
    color: #8E8E93;
    transition: background 0.3s ease;
}

.form_group input::placeholder,
.form_group textarea::placeholder {
    color: #999;
}

.form_group input:focus,
.form_group textarea:focus {
    outline: none;
    background: #EFEFEF;
}

.form_group textarea {
    resize: vertical;
    min-height: 80px;
}

  .message {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    display: none;
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

.submit_btn {
    background: #121212;
    color: white;
    padding: 16px 32px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.3s ease;
}

.submit_btn:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}


        .submit_btn:active {
            transform: translateY(0);
        }

        .submit_btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

.contact-page header {
    background: #FFDE3D;
}
.contact-page .header_head nav a {
    color: #121212;
}
.contact-page .mission_soda_industry{
    display: none;
}
.contact-page footer {
    background: #FFDE3D;
}
.contact-page footer .footer_logo p {
    color: #000000;
}
.contact-page footer .footer_socials_link ul {
    border-top: 1px solid #121212;
    border-bottom: 1px solid #121212;
}
.contact-page footer .footer_socials_link ul li a {
    color: #121212;
}
.contact-page footer .footer_bottom p {
    color: #121212;
}
.contact-page footer:before {
    background: url(./images/contact_footer_before.png);
    top: -41px;
    height: 41px;
    background-repeat: no-repeat;
    background-size: 100%;
}

/*---------- Contact Us Page Start ----------- */


/*-------------- Story Page Start ------------- */
.story_section {
    background-color: #FFFADE;
    padding: 95px 0;
    margin-top: -30px;
}

.story_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.story_grid .content h2 {
    font-size: 48px;
    font-weight: 600;
    margin: 0 0 16px 0;
    line-height: 36px;
}

.story_grid .content p {
    font-size: 20px;
    line-height: 36px;
    margin: 0 0 16px 0;
}
.story_grid .content p:last-child {
    margin-bottom: 0;
}

.story_grid .content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.story_grid .content ul li {
    line-height: 36px;
    padding-left: 20px;
    position: relative;
}

.story_grid .content ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #1a1a1a;
    font-weight: bold;
}

.story_grid .image {
    position: sticky;
    top: 20px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #E5DDD0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.story_grid .image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

/*-------------- Story Page Start ------------- */


/*------------- Terms & Conditions Start-------------- */
.terms_and_conditions {
    background: #FFFADE;
    padding: 40px 0;
}
.terms_and_conditions .heading {
    text-align: left;
}
.terms_and_conditions .heading h2 {
    margin-bottom: 20px;
}
.terms_and_conditions p {
    margin-bottom: 30px;
}
.terms_and_conditions strong {
    font-weight: 700;
}
.terms_and_conditions strong a {
    font-weight: 700;
    color: #000;
}
.terms_and_conditions ul li {
    counter-increment: alphaCounter;
    position: relative;
    margin-bottom: 10px;
}

.terms_and_conditions ul li::marker {
    content: "(" counter(alphaCounter, lower-alpha) ") ";
}


/*------------- Terms & Conditions End-------------- */





/*--------------- Media Query Start-------------- */
 
  @media (min-width: 993px) { 
    .hemburger_icon, .cross_icon { display: none; }

     }


 @media (min-width: 769px){
    .mob{display: none;}
    .our_story_grid .left h1{
        display: none;
    }
 }
  @media (max-width: 768px){
    .desk{display: none;}
 }


 @media (max-width: 992px){
 header nav {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--current-menuColor);
    z-index: 9;
    display: block;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 0px;
    overflow: hidden;
    transition: height 0.4s ease;
}
.contact-page nav{
    background: #FFFADE;
}
header nav.active {
    height: 100vh;
    padding-top: 16px;
}

.hemburger_icon, .cross_icon{
    cursor: pointer;
}
.header_head nav a {
    font-size: 20px;
    padding-left: 0;
    display: block;
    padding: 24px 0;
    border-bottom: 1px solid #121212;
    color: #121212;
}
.hemburger_icon{
    display: block;
}
.cross_icon { 
    display: none; 
}
.hemburger_icon.hide {
    display: none;
}

.cross_icon.show {
    display: block;
}
 body.menu-open {
    overflow: hidden;
}

header {
    padding: 21px 0px;
}
footer {
    padding-bottom: 24px;
}
.contact-page .hemburger_icon svg path, .contact-page .cross_icon svg path {
    fill: #121212;
}



}



@media (max-width: 768px){
.theme-cola {
    background-image: var(--current-HeroGIF);
}

.story_grid {
    grid-template-columns: 1fr;
    gap: 16px;
}
.story_grid .content h2 {
    font-size: 28px;
    line-height: 34px;
}
.story_grid .content {
    text-align: center;
}
.story_grid .content p {
    font-size: 17px;
    line-height: 28px;
    margin: 0 0 8px 0;
}

.story_grid .content ul li {
    line-height: 28px;
    font-size: 17px;
    padding-left: 0;
}
.story_section {
    padding: 35px 0 60px;
    margin-top: -15px;
}
.footer_logo img {
    padding-bottom: 24px;
}
footer .footer_logo p {
    font-size: 16px;
    line-height: 24px;
}

footer .footer_logo {
    padding-bottom: 24px;
}

footer .footer_socials_link ul {
    gap: 8px 40px;
    padding-top: 24px;
    padding-bottom: 24px;
    flex-wrap: wrap;
}

footer .footer_socials_link ul li {
    font-size: 15px;
}
footer .footer_bottom {
    padding-top: 24px;
}
footer .footer_bottom p {
    font-size: 12px;
    line-height: 16px;
}

footer:before {
    top: -22px !important;
    height: 23px !important;
    background-size: 180% 100% !important;
}

.contact_grid {
    grid-template-columns: 1fr;
    gap: 24px;
}
.contact_us {
    padding: 24px 0 50px;

}

.contact_grid .left, .contact_grid .right {
    padding: 24px 24px;
    border-radius: 16px;
    min-height: auto;
}
.contact_grid .left h2 {
    font-size: 22px;
    line-height: 28px;
}
.contact_grid .left > p {
    font-size: 16px;
    margin: 0 0 16px 0;
    line-height: 21px;
}

.info_item .icon {
    width: 40px;
    height: 40px;
}
.info_text .label {
    font-size: 12px;
    margin-bottom: 0;
    line-height: 16px;
}
.info_text .value {
    font-size: 16px;
    line-height: 21px;
}
.info_item .icon svg {
    width: 15px;
}
.contact_grid .right h3 {
    font-size: 16px;
    line-height: 21px;
}
.form_group label {
    font-size: 13px;
    line-height: 16px;
    margin-bottom: 0;
}
.submit_btn {
    padding: 13px 32px;

}
.contact_grid .left .faq-question {
    font-size: 15px;
    line-height: 20px;
}

/*Home*/

.hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 24px;
}
.hero-text {
    grid-row: auto;
    grid-column: auto;
    text-align: center;
    padding-top: 32px;
}

.hero-text h1 {
    font-size: 34px;
    line-height: 41px;
}
.hero-text p {
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 20px;
    padding: 0 30px;
}
.arrows {
    max-width: 100%;
}
.hero-text .arrows button {
    width: 46px;
    height: 46px;
}
.hero-text .arrows button svg {
    width: 18px;
}
.why_baraqa .heading h1 {
    font-size: 28px;
    margin-bottom: 8px;
    line-height: 34px;
}
.why_baraqa .heading p {
    font-size: 16px;
    line-height: 21px;
}
.why_baraqa .heading {
    margin: 0 auto 24px;
}
.why_baraqa_head {
    gap: 32px 16px;
    flex-wrap: wrap;
}
.why_baraqa_head .slide p {
    font-size: 15px;
    line-height: 20px;
}
.why_baraqa_head .slide svg {
    margin-bottom: 8px;
    width: 64px;
    height: 64px;
}
.why_baraqa_head .slide {
    max-width: 140px;
    margin: 0 auto 0px;
}

.why_baraqa_btn a {
    font-size: 16px;
    min-width: 220px;
    height: 50px;
    line-height: 50px;
    margin-top: 24px;
}
.our_story_grid .right h1{
    display: none;
}
.our_story_grid {
    gap: 16px;
    flex-direction: column;
}
.our_story_grid .right {
    text-align: center;
}
.our_story_grid .right p {
    font-size: 16px;
    line-height: 21px;
}
.our_story_grid .left h1 {
    font-size: 28px;
    text-align: center;
    margin-bottom: 16px;
    line-height: 34px;
}
.heading {
    margin-bottom: 24px;
}
.heading h1 {
    font-size: 28px;
    line-height: 34px;
}
.testimonials_section .slide {
    padding: 16px;
    border-radius: 16px;
}
.testimonials_section .slide .shadow {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}
.testimonials2 .slide .shadow {
    align-items: center;
}
.pdp_testimonials .slide .shadow svg {
    margin-bottom: 0;
}
.testimonials_section .slide .content {
    margin-bottom: 0;
    line-height: 22px;
    font-size: 16px;
}
.daily_dose_grid {
    gap: 24px;
    justify-content: space-between;
    flex-direction: column-reverse;
}
.daily_dose_grid .left {
    text-align: center;
}
.daily_dose_grid .left h1 {
    font-size: 28px;
    line-height: 34px;
}
.daily_dose_grid .left p {
    margin-bottom: 24px;
    font-size: 16px;
}
.daily_dose_grid .left .insta_text {
    gap: 8px;
    flex-direction: column;
}

.mission_soda_industry .heading {
    margin-bottom: 0;
}
.mission_soda_industry {
    padding: 40px 0 70px;
}
.mission_soda_industry:before {
    top: -19px;
    height: 21px;
    background-size: 100% 105% !important;
}
.frequently_asked_question {
    padding: 43px 0 60px;
}
.daily_dose {
    padding: 40px 0;
}
.testimonials_section {
    padding: 40px 0;
}
.testimonials_section:after {
    bottom: -23px;
    height: 23px;
    background-size: 180% 100% !important;
}
.testimonials_section:before {
    top: -22px;
    height: 23px;
    background-size: 180% 100%;
}
.our_story {
    padding: 50px 0 45px;
    margin-top: -20px;
}
.why_baraqa:before {
    width: 100%;
    background-size: 104% 100%;
    top: -19px;
}

.why_baraqa {
    padding: 40px 0 70px;
    margin-top: -15px;
}
.bottles {
    grid-area: bottle;
    grid-column: auto;
}

.details_top_grid {
    grid-template-columns: 1fr;
    gap: 24px;
}
.details_top_grid .right {
    overflow: hidden;
}
.details_top_grid .right .our_flavours .flavours_grid {
    margin-bottom: 32px;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;

}

.details_top_grid .left {
    grid-template-columns: calc(70% - 8px) calc(30%);
    gap: 8px;
}
.details_top {
    padding: 24px 0;
}
.details_top_grid .left .small_img .slide svg {
    margin: 0 auto 8px;
    width: 32px;
    height: 32px;
}
.details_top_grid .left .small_img .slide {
    margin-bottom: 8px;
    border-radius: 8px;
    padding: 12px 0 8px;
}

.details_top_grid .left .small_img .slide span {
    font-size: 13px;
    line-height: 16px;
    color: #121212;
}

.details_top_grid .right h1 {
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 4px;
}
.details_top_grid .right .price {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 24px;
}
.details_top_grid .right .price span {
    font-size: 12px;
    line-height: 28px;
}
.details_top_grid .right .classic_rein {
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 21px;
}
.details_top_grid .right .available_sizes .available_size_text {
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 16px;
}
.details_top_grid .right .available_sizes .buttles_grid button {
    min-width: 83px;
    font-size: 16px;
    line-height: 21px;
}

.details_top_grid .right .available_sizes {
    margin-bottom: 24px;
}
.details_top_grid .right .our_flavours .our_flavours_text {
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 16px;
}
.pdp_description:before {
    top: -21px;
    width: 100%;
    height: 21px;
    background-size: 101% 100% !important;
}

.details_btn_pdp {
    position: fixed;
    z-index: 999;
    bottom: 0;
    background: #ffffff;
    width: 100%;
    left: 0;
    padding: 16px;
}
.pdp_description .faq-question {
    font-size: 16px;
    line-height: 21px;
}

.pdp_description .faq-answer p {
    font-size: 13px;
    line-height: 20px;
}

.theme-cola {
    background-repeat: no-repeat;
    background-size: cover;
}

 }





@media (max-width: 768px) {
  
  .bottles {
    position: relative;
    height: 400px;
    overflow: hidden;
  }
  
  .bottle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); 
    transform-origin: center bottom;
    display: none;
    transition: none; /* Ensure no unwanted transitions interfere */
    width: 170px;
  }
  
  .bottle.active {
    display: block;
    width: 170px;
    pointer-events: none;
  }

.bottle.exit-left {
  display: block; 
  animation: exitLeft 0.2s ease-in forwards;
}

.bottle.exit-right {
  display: block;
  animation: exitRight 0.2s ease-in forwards;
}

/* Enter animations - Rotate from TOP */
.bottle.enter-right {
  display: block;
  animation: enterRight 0.2s ease-out forwards;
}

.bottle.enter-left {
  display: block;
  animation: enterLeft 0.2s ease-out forwards;
}

/* Exit Left: Rotate counter-clockwise from top */
@keyframes exitLeft {
  0% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg);
    transform-origin: center bottom;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: center bottom;
  }
}

/* Exit Right: Rotate clockwise from top */
@keyframes exitRight {
  0% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg);
    transform-origin: center bottom;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) rotate(90deg);
    transform-origin: center bottom;
  }
}

/* Enter from Right: Rotate in counter-clockwise from top */
@keyframes enterRight {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(90deg);
    transform-origin: center bottom;
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg);
    transform-origin: center bottom;
  }
}

/* Enter from Left: Rotate in clockwise from top */
@keyframes enterLeft {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: center bottom;
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg);
    transform-origin: center bottom;
  }
}

  
  

  
}


/*--------------- Media Query End-------------- */