html{
    overflow-x: hidden;
}
body{
    margin: 0;
}
.fixed-top {
      top: -40px;
      transform: translateY(40px);
      transition: transform .3s;
  }
.breadcrumb-item + .breadcrumb-item::before{
    content: ">" !important;
}
.chaigram-link{
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid #000;
    display: block;
}
.chaigram-link:hover{
    color: #000;
    text-decoration: none;
    background: #fff;
}
.font-inter{
    font-family: "Inter", sans-serif;
}

.heading-light{
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 42px;
}
.heading-bold{
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 42px;
}
.heading-light2{
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 33px;
    line-height: 40px;
}
.heading-bold2{
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 33px;
    line-height: 40px;
}
.sub-heading{
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 30px;
    text-align: center;
}

.heading-available{
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 50px;
}

.blog-paragraph{
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 40px;    
}

.timeline-heading{
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 27px;
    line-height: 50px;
    color:  #000; 
}

.timeline-p{
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 30px;
    color:  #000 !important; 
}

.timeline-subheading{
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 30px;
    color:  #000;  
}


.left-sideline, .right-sideline{
    display: flex;
    flex-direction: row;
}

.right-sideline:before, .left-sideline:after{
  content: "";
  flex: 1 1;
  border-bottom: 2px solid;
  margin: auto;
  margin-bottom: 24px;
}

.left-sideline-timeline, .right-sideline-timeline{
    display: flex;
    flex-direction: row;
}

.right-sideline-timeline1{
    display: flex;
    flex-direction: row;
}

.right-sideline-timeline:before, .left-sideline-timeline:after{
  content: "";
  flex: 1 1;
  border-bottom: 2px solid;
  margin: auto;

 margin-left: -21px;
  margin-bottom: 17px;
  margin-right: -60px;
}

.right-sideline-timeline1:before{
    content: "";
    flex: 1 1;
    border-bottom: 2px solid transparent;
    margin: auto;
    margin-bottom: auto;
    margin-left: auto;
  margin-left: -40px;
  margin-bottom: 18px;
}

.left-sideline-blog{
    display: flex;
    flex-direction: row;
}





/*===========Form Style Starts======= */
.chaigram-form{
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 2px solid #a9a9a9;
  border-radius: 0;
  background: transparent;
}
.chaigram-form:focus{
  border-color: #000;
  box-shadow: none;
}

.form-control:focus{
    box-shadow: none !important;
}

.iti{ width: 100%; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.numPlusMinus{
  border: 1px solid #6a6a6a;
  padding: 2px 8px 5px 8px;
  border-radius: 50px;
  text-decoration: none;
}

.numPlusMinus:hover{
  background: #000;
  color:  #fff;
  text-decoration: none;
}

.time-slot-picker-table tbody{
    background: #fff;
}
/*===============Form Style Ends================*/



/*====Header Navbar styles====*/
.text-chaigram{
    color: #FFDD00 !important;
}
.bg-chaigram{
    background: #FFDD00 !important;
}
.btn-chaigram{
    border: 1px solid rgb(0, 0, 0);
    width: 150px;
    padding: 4px 5px;
    text-align: right;
    border-radius: 50px;
    background: transparent;
}
.btn-chaigram:hover{
    background: #FFDD00;
}
.link-simple{
    color:  #000;
    text-decoration: none;
}
.link-simple:hover{
    color: #FFDD00;
}
.link-light{
    color:  #fff;
    text-decoration: none;
}
.link-light:hover{
    color:  #FFDD00;
    text-decoration: none;
}
.navbar{
    border-bottom: 3px solid #FD0;
    box-shadow: 0px 1px 12px #000000c7;
}
.navbar-brand{
    margin-right: 2rem !important;
}
.navbar-collapse .navbar-nav .nav-item {
  padding-left: 5px;
  padding-right: 5px;
}
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.88) !important;
  padding-top: 12px;
  padding-bottom: 8px;
}
.navbar-dark .navbar-nav .nav-link i{
    font-size: 15px;
    color: #FFDD00;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
  border-bottom:2px solid #fd0 !important;
  padding-bottom: 6px;
}

/* ============ Nav hover dropdown desktop view ============ */
@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0px; }
}	
/* ============ Nav hover dropdown desktop view .end// ============ */

.navbar .nav-item .dropdown-menu{
    border-radius: 0;
}
.dropdown-toggle::after{
    content: none !important;
}

.search-box .form-control {
    padding-left: 2.375rem;
}

.search-box .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.search-box input{
border-radius: 50px;
}
.shopping-cart{
    background: #FFDD00;
    border-radius: 50%;
}
.shopping-cart i{
    padding: 7px;
}
.shopping-cart:hover{
    background: #000;
}



/*=====Footer Style Starts Here=====*/
footer {
    background-color: #000;
    color: #fff;
    position: relative;
}

footer a {
    color: #ffc107;
    text-decoration: none;
}

footer a:hover {
    color: #ffeb3b;
}

footer p, footer address {
    margin: 0;
    line-height: 1.5;
}

footer ul {
    padding-left: 0;
    list-style-type: none;
}

footer ul li {
    display: inline;
}

.fas, .fab {
    font-size: 1.5rem;
}

.fas:hover, .fab:hover {
    color: #ffeb3b;
}
.footer-p, .footer-p-center{
  vertical-align: middle;
  display: inline;

}

.social-icon{
    padding: 2px 4px;
    transition: transform 0.8s ease-in-out;
}

.social-icon img:hover{
    transform: scale(1.5);
}

.bi {
    font-size: 1.5rem;
}

.bi:hover {
    color: #ffeb3b;
}

/*========Home Page Hero Section Slider=======*/
 #slider-lg{
    display: block;
 }
 #slider-sm{
    display: none;
 }

/*Home Page Hero Section End*/
/*Home Content Section*/
.heading-card{
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}
.paragraph-card{
    font-family: "Inter", sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    text-align: center;
    padding: 5px 15px;
}
.card-fmcg, .card-qsr{
    height: 322px;
    height: 322px;
    box-shadow: 1px 2px 5px #979696;
    border-radius: 12px;
    cursor: pointer;
}
.left-line, .right-line{
    border-bottom: 2px solid #000;
    width: 20%;
    position: relative;
    display: inline-block;
    top:  -8px;
}
.paragraph1{
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px; 
}
/*Carousel*/
#owl-fmcg{
  margin-top: 85px;
}

#owl-fmcg .owl-item img{
  display: block;
  width: 94px;
  height: 94px;
  margin-top: -45px;
}

#owl-fmcg .owl-nav, #owl-qsr .owl-nav{
  border: 1px solid #000;
  width: 150px;
  padding: 4px 10px;
  text-align: right;
  border-radius: 50px;
  position: absolute;
  top: -55px;
  right: 0px;
  background: #fff;
  cursor: pointer;
}

#owl-timeline .owl-nav{
  border: 1px solid #000;
  width: 170px;
  padding: 4px 10px;
  text-align: right;
  border-radius: 50px;
  position: absolute;
  top: -55px;
  right: 0px;
  background: #fff;
  cursor: pointer;
}

#owl-fmcg .owl-nav:hover, #owl-qsr .owl-nav:hover, #owl-timeline .owl-nav:hover{
  background: #FFDD00;
}

#owl-timeline .owl-nav .owl-prev:hover, #owl-timeline .owl-nav .owl-next:hover{
    background: transparent !important;
    color:  #000;
}

#owl-fmcg .owl-nav .owl-prev .nav-left, .nav-right{
  background: #000;
  padding: 4px 8px;
  border-radius: 50px;
  color: #FD0;
  
}
#owl-qsr .owl-nav .owl-prev .nav-left, .nav-right{
  background: #000;
  padding: 4px 8px;
  border-radius: 50px;
  color: #FD0;
  
}

#owl-timeline .owl-nav .owl-prev .nav-left, .nav-right{
  background: #000;
  padding: 4px 8px;
  border-radius: 50px;
  color: #FD0;
  
}

#owl-qsr .owl-item img {
  display: block;
  width: 94px;
  height: 94px;
  margin-top: 25px;
}

#owl-timeline .owl-stage::after{
    padding-bottom: 25px !important;
}

/*========= Home page style Ends ==========*/

/*========= About Us Starts =========*/

.paragraph-bottom-fade{
    position: relative; 
    bottom: 8em;
    height: 6em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
}

.our-journey-bg{
    background-image: url('./assets/images/aboutUs/Our-Journey.jpg');
    height: 587px;
    width: 1451px;
    background-repeat: no-repeat;
    background-position: center center;
}

.timeline-section {
    padding: 40px 0;
    background-color: #f8f9fa;
}

.timeline-item {
    background: #fff; 
    padding: 20px;
    margin: 10px 0px 10px 0px;
    position: relative;
    height: 220px;
}

.timeline-icon {
    width: 60px;
    height: 60px;
    background-color: #000;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffc107;
    margin-top: -50px;
}

    .timeline-icon img {
        width: 100%;
        border-radius: 50%;
    }

    .timeline-item h5 {
        font-weight: bold;
        color: #333;
    }

    .timeline-item p {
        color: #777;
    }

    .timeline-carousel.owl-drag .owl-item{
      padding-top: 40px;
    }
/*========== About Us Ends ===========*/

/*==========Our Product ==========*/
.ghee-card{
    width: 1387px;
    height:  533px;
    background-repeat: no-repeat;
    background-position: center center;
}

.beverage-card{
    width: 345px;
    height:  533px;
    background-repeat: no-repeat;
    background-position: center center;
}


.btn-shop{
    background: #fff;
    border: 1px solid #000;
    border-radius: 50px;
    padding: 5px 28px 7px 28px;
    box-shadow: 1px 1px 4px #0000005e;
    font-weight: 700;
}
.btn-shop:hover{
    background: #FFDD00;
}

.tablinks h5{
    background: #FFDD00; 
    border-radius: 0px 0px 5px 5px;  
    font-size: 20px; 
    font-weight: 700; 
    line-height: 50px;
}

.beverage-container{
    padding: 5px 0px 5px 40px;
}

.tabcontent{
    padding: 5px 60px 5px 60px;
}

.ghee-container{
    padding: 120px 125px 25px 125px;
}

.beverage-container{
    padding: 5px 0px 5px 40px;
}
.beverage-img-sm-container{
    display: none;
}


/*=======Our Product Ends=======*/

/*=======QSR Details start======*/
#qsr1 .tabcontent{
    padding: 5px 60px 5px 60px
}

#qsr1 .tabcontent .carousel-item img{
    width:  1201px;
    height: 584px;
}

#qsr .owl-item{ 
    padding-left: 27px;
    padding-right: 27px;

  }
  #qsr .owl-item > div {
    cursor: pointer;
    margin: 15% 8%;
    transition: margin 0.4s ease; 
  }
  #qsr .owl-item .center > div {
    cursor: pointer;
    margin: 0;
  }
  #qsr .owl-item:not(.center) > div:hover {
    opacity: .75;
  }
  #qsr .owl-item.active.center {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  #qsr.owl-item > div > img{
    border-radius: 50%;
    width:  250px !important;
    height: 250px !important;
  }
  #qsr .nav-left, #qsr .nav-right{
    z-index: 1;
    width: 30px;
    height: 30px;
    background-color: #919191;
    border-radius: 50%;
    position: absolute;
    top: 38%;
    padding: 4px;
    color: #FFDD00;
    font-size: 22px;
  }
  #qsr .nav-left{
  left:  -10px;
  }
  #qsr .nav-right{
  right: -10px;
  }

  #qsr .nav-left:hover, #qsr .nav-right:hover{
    width: 35px;
    height: 35px;
    padding: 6px;
    font-size: 25px;
    background: #000;
    transition: width 0.1s, height 0.1s ease;
  }

  #qsr .owl-dots {
    text-align: center;
  }
  #qsr .owl-dots button.owl-dot.active span, 
  #qsr .owl-dots button.owl-dot:hover span {
    background-color: #000;
    border-radius: 5px;
    height: 5px;
    width: 40px;
    position: absolute;
    top: 0.2px;
    left:0.3px;
  }
  #qsr .owl-dots button.owl-dot{
    background: #a1a1a1;
     border-radius: 5px;
     height: 5px;
     width: 40px;
     position: relative;
     margin: 2px;
  }


/* Banner Carousel style */
#bannerCarousel1 .carousel-inner img, #bannerCarousel2 .carousel-inner img, #bannerCarousel3 .carousel-inner img, #bannerCarousel4 .carousel-inner img{
  width: 1201px;
  height: 584px; 
}

  #time-slot-pills nav > div a.nav-item.nav-link.active:after {
    content: "";
    position: relative;
    bottom: -54px;
    left: -20%;
    border: 15px solid transparent;
    border-top-color: #000;
  }
  #time-slot-pills nav > div a.nav-item.nav-link.active{
    background: #000;
    color: #fff;
  }
  #time-slot-pills nav > div a.nav-item.nav-link{
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
  }

  .time-slot-picker-table > thead > tr > th{
      text-align: center !important;
  }

  .tabbable-line{
 text-align:center;
}
/* Default mode */
.tabbable-line > .nav-tabs {  
  display:inline-block;
}

#time-slot-pills .nav-pills{    
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}
#time-slot-pills .nav-item{
 padding: 15px;
}

#time-slot-pills{
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-selected{
   /* background: #000;
    color: #fff;
    border-radius: 50px;
    font-size: 38px;
    padding: 15px 75px 15px 75px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;*/

}

.btn-selected:hover{
    color:  #FFDD00;
}
.offer-img{
    width: 250px;
}

.menu-img{
    width: 432px; 
    height: 489px;
}

.map-container{
    padding: 5px 60px 5px 60px;
}



/*=======QSR Details start======*/


.offer-container-parent{
    border-right: 3px solid #000000a3;
}
.btn-offer{
    border-radius: 20px;
    font-size: 20px;
    font-weight: 700;
    padding: 3px 15px;
    border: 2px solid #000;
}
/*=======Blog Starts=======*/
.blog-img{
    width: 820px; height: 360px;
}


/*=======Blog Ends=======*/

/*===========Gallery Starts==========*/
.filters ul{
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 30px 15px;
  padding-top: 10px;
  background: #FFDD00;
}
.filters ul li{
  display: inlnie-block;
  text-align: center;
  margin-right: 12px;
  padding: 0 5px 8px 5px;
  font-weight: 700;
  font-size: 16px; 
  cursor: pointer;
  position: relative;
  margin-bottom: -2px;
  color: #3c3c3c;
  transition: 0.3s;
  text-transform: uppercase;
}
.filters ul li:hover{
  color: #EB2D3A;
}
.filters ul li.is-checked{
  border-bottom: 3px solid #EB2D3A;
}
.filters ul li:last-child{
  margin-right: 0;
}
 

.grid .grid-item h1{
  background: #EEEEEE;
  height: 150px;
  line-height: 150px;
  color: white;
  font-size: 3em;
  text-align: center;
  margin-bottom: 30px;
}

/*=======Gallery Ends=====*/



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


@media only screen and (max-width: 767px){
    .footer-nav{
        display: none;
    }
    /*=====Home page======*/
    #slider-lg{
        display: none;
    }
    #slider-sm{
        display: block;
    }
    .shopping-cart {
        display: block;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
    }
    .shopping-cart:hover i{
        color:  #FFDD00;
    }

    .search-box{
        width:  100%;
    }

    #owl-fmcg .owl-nav, #owl-qsr .owl-nav{
        right: 30%;
    }
    #owl-timeline .owl-nav{
        right: 21%;
    }
    .paragraph1{
        font-size: 18px;
    }

    .paragraph-card{
        padding-top: 20px;
    }

    /*=======About Us======*/
    .our-journey-bg{
        display: none;
    }
    .vision-mission-container{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .vision-mission{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /*======Our Product=====*/
    #owl-product .nav-left{
        left:  0px !important;
    }
    #owl-product .nav-right{
        right: 0px !important;
    }

    

    .tabcontent{
        padding: 0px;
    }

    .ghee-card {
        width: 100%;
        height: 100%;
        background-image: none !important;
    }
    .ghee-container{
        padding: 30px;

    }
    .ghee-img-sm-container{
        margin: -30px -15px 15px -15px;
    }
    .ghee-sm-img{
        width: 100%;
        height: 100%;
    }

    .ghee-btn{
        margin-bottom: 30px;
        margin-top: -20px;
    }

    .beverage-container{
        padding: 5px 30px 30px 30px;
    }
    .btn-beverage{
        margin-top: 10px;
    }
    
    .beverage-img-sm-container{
        display: block;
        margin: -30px -15px 0px -15px;
    }

    /*======Our Product Ends======*/
    /*=======QSR Details Start======*/
    #qsr1 .tabcontent{
        padding: 0px;
    }

    #qsr .owl-item.active.center {
        -webkit-transform: scale(1.2) !important;
        transform: scale(1.2) !important;
    }

    #bannerCarousel1 .carousel-inner img, #bannerCarousel2 .carousel-inner img, #bannerCarousel3 .carousel-inner img, #bannerCarousel4 .carousel-inner img{
    width: 100% !important;
    height: 100% !important; 
    }

    .heading-available-h2{
        text-align: center;
    }

    .btn-selected{
        font-size: 28px;
        margin-top: 25px;
    }

    
    
    .offer-container-parent{
        border-right: none;
        padding-bottom: 30px;
        border-bottom: 3px solid #000;
    }
    .offer-container-parent-right{
        padding-bottom: 30px;
    }
    .offer-container{
        display: flex;
        justify-content: center;
    }
    
    
    .menu-img{
        width: 100%;
        height: 100%;
    }

    .map-container{
        padding: 0px;
    }

    /*=======QSR Details End======*/

    /*======Blog Starts======*/
    .blog-img{
        width: 100%; 
        height: 100%;
    }

    /*======Blog Ends======*/
   
}


@media only screen and (min-width: 768px) and (max-width: 1024px){
    /*======Home=====*/
    #slider-lg{
        display: block;
    }
    #slider-sm{
        display: none;
    }
    #slider-lg .carousel-caption{
        background-image: linear-gradient(90deg, #fff0, #fffffffc) !important;
    }
    .chaigram-slider-text{
        font-size: 26px !important;
        top: 15% !important;
        line-height: 35px !important;
    }

    .cloud-kitchen{
        margin-top: -6px !important;
    }

    .search-box{
        margin-top: 22px;
        margin-bottom: 20px !important;
    }

    .shopping-cart {
        padding: 12px 0px 6px 0px;
        cursor: pointer;
    }
    .shopping-cart:hover i{
        color:  #FFDD00;
    }

    .footer-nav{
        margin-left: -80px;
        margin-right: -80px;
    }

    .contact-list{
        margin-left: -80px;
        margin-top: 30px;
    }

    .footer-p, .footer-p-center{
        font-size: 14px;
    }

    .footer-p a{
        padding-left: 75px;
    }

    /*======About Us=====*/
    .taste-nation-img{
        width: 215px !important;
        padding-top: 50px;
    }


    .vision-mission-container{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .vision-mission{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .vision-mission-container .card{
        height: 740px;
    }

    .icon-target{
        margin-top: 28px;
    }
    .achievement-img{
        width: 245px !important;
    }

    /*=========Our Product===========*/

    /*=========Our Product===========*/


    /*======QSR Details Start=======*/
    #bannerCarousel1 .carousel-inner img, #bannerCarousel2 .carousel-inner img, #bannerCarousel3 .carousel-inner img, #bannerCarousel4 .carousel-inner img{
    width: 100% !important;
    height: 100% !important; 
    }
    .offer-img{
        width: 130px;
    }
    /*======QSR Details End======*/

    /*=======Blog Starts=======*/
    .blog-img{
        width: 100%; 
        height: 100%;
    }

    /*=======Blog Ends======*/

}