/* globals */
@font-face {
  font-family: 'Norando';
  src: url('Norando-Regular.eot');
  src: local('Norando'), local('Norando-Regular'),
      url('Norando-Regular.eot?#iefix') format('embedded-opentype'),
      url('Norando-Regular.woff2') format('woff2'),
      url('Norando-Regular.woff') format('woff'),
      url('Norando-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
    --primary: #9ac43f;
    --secondary: #0377d8;
    --primaryaccent: #729d16;
    --secondaryaccent: #035ba4;
}

body {font-family: 'Montserrat', sans-serif; background-color: #666;}
.container-chenab {max-width:1680px; margin: auto; background-color: var(--primary);}
img{max-width:100%;}
.off{display:none;}
.ml-auto {margin-left: auto;}
h1, h2, h3, h4, h5, h6, div, span, p, img, a {transition: all ease .3s;}
h1, h2, h3, h5 {text-transform: uppercase; }
.btn {border:none; text-transform: uppercase; font-size:1rem; font-weight: 700; box-shadow: 0px 5px 10px rgba(0,0,0,.1);}
.btn-success {background: none; background-color: var(--primary);}
.btn-success:hover {background-color: var(--primaryaccent);}
.btn-primary {background-color: var(--secondary); color:#FFF;}
.btn-primary:hover {background-color: var(--primaryaccent); color: #FFF;}
.btn-light:hover {background-color: var(--primaryaccent); color: #FFF;}
.left-marg {margin-left: 15px;}
.btn-lg {padding:10px 30px;}
h1 {font-size: 2.4vw; font-weight: 700; line-height: 3vw; margin:0;}
h2 {font-size: 2.5vw; font-weight: 700; line-height: 3vw; margin:0;}
.shop-row h2 {font-size: 1.7vw; font-weight: 700; line-height: 2.5vw; margin:0;}
h3 { font-size:2.5vw; line-height: 3vw; margin-bottom: 2rem; font-weight: 300;}
h4 {}
h5 {font-size: 14px; font-weight: 500; margin-bottom: 0; color: #4d7e10; ; margin-bottom: 5px;}
p{font-size:15px; font-weight: 400; margin-bottom: 2rem; color: #000; font-family: 'Open Sans', sans-serif;}
div p:last-child {margin-bottom: 0;}
.flex-center {align-items: center;}
.justify-center {justify-content: center;}
section{padding:5rem 7vw;}
.row {margin: 0;}
.shop-row{margin:0;}
.shop-row > div {padding:12vh 2vw; display: flex; flex-wrap:wrap; flex-direction:column; justify-content: stretch; align-items: center;}
.top-marg {margin-top:2rem;}
ol, ul {font-family: 'Open Sans', sans-serif; font-size:15px;}

/* header / nav */
header {background-color: #FFF; padding: 0 5vw; position: relative; z-index: 10; box-shadow: 0px 10px 0px rgba(0,0,0,.06); border-top:4px solid var(--primary);}
.logo-span {position: relative;}
.logo-span img.abs {position: absolute; bottom:-58px; z-index: 3; left:0;}
.navbar-brand img {max-width:200px; margin-bottom:-40px; margin-left: -10px; position: relative; z-index: 4; margin-top: 10px;}
.navbar-nav {margin-top:3rem; font-family: 'Montserrat', sans-serif; }
.navbar-expand-lg .navbar-nav .nav-link{color: #669900; text-transform: uppercase; padding:2px 20px; font-size: 16px; font-weight: 500; white-space: nowrap;}
.navbar-expand-lg .navbar-nav .nav-link.btn {color: #FFF; padding:6px 10px; font-weight: bold; margin-right:-10px; margin-top:-4px; margin-left: 30px;}
.navbar-expand-lg .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active, .navbar-nav .show>.nav-link{color: var(--secondary);}
.navbar-expand-lg .navbar-nav .nav-link.btn:hover {color: #FFF;}
.navbar .container {position: relative;}

.navbar-expand-lg .navbar-nav .dropdown-menu {padding: 0; margin:0; border-radius: 0;}
.dropdown-item {padding:5px 30px; color: #669900; border-bottom: 1px solid #CCC; text-transform: uppercase; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 500;}
.dropdown-item:hover {background-color: #669900; color:#FFF;}
.dropdown-menu {--bs-dropdown-link-active-bg:#669900; border: none;}

/* menu button */
.menu {background-color: transparent; border: none; cursor: pointer; display: flex; padding: 0;}
.line {fill: none; stroke: black; stroke-width: 6; transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);}
.line1 {stroke-dasharray: 60 207; stroke-width: 6; }
.line2 {stroke-dasharray: 60 60; stroke-width: 6;}
.line3 {stroke-dasharray: 60 207; stroke-width: 6;}
.opened .line1 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6;}
.opened .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; stroke-width: 6;}
.opened .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; stroke-width: 6;}

/* slider */
.item {position: relative; background-color: #000;}
.slider img {width:100%;}
.slider .caption {position: absolute; top:50%; width: 40%; transform: translateY(-50%) translateX(-50%); text-align: center; left:50%; z-index: 2; color: #FFF; }
.slider h5 {color: #FFF;}
.slick-next {right:25px; z-index: 3;}
.slick-prev {left: 25px; z-index: 3;}

/* home */
.world {background-color: #E2E2E2;}
.the_world {padding:0; margin-left: -10px;}
.shape-holder {background-color: #FFF; margin-top:-4rem;}
.shape {background-image: radial-gradient(120% 120px at 50% -30px, #E2E2E2 75%, transparent 75%); padding-top:5rem;}

/* products */
.product {background-color: #FFF;}
.product_cats {display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -20px; margin-top: 1rem;}
.product_cats-details {flex: 0 0 31%; margin:10px; position: relative; background-color: #000; border-radius: 12px; overflow: hidden;}
.product_cats-details .product_cats-image {opacity: .8;}
.product_cats-name {position: absolute; width: 100%; bottom: 0; padding:10px 20px; color: #FFF; font-weight: bold; background-color: rgba(0,0,0,.2);}
.product_cats-name img {position: absolute; top:-50%; left:0; display: none;}
.product_cats-name h4 {margin-bottom: 0;  text-transform: uppercase; font-weight: 500; font-size: 1.2rem;}
.product_cats-name p {color: #FFF; opacity:0; transition: all ease .3s; height: 0;}
.product_cats-details:hover img {opacity: 1;}
.product_cats-details:hover .product_cats-name {background-color: rgba(0,0,0,.4);}
.product_cats-details:hover p {opacity: 1; height: 30px;}

/* sales-portal */
.white, .white p {color: #FFF;}
.bg-sales-portal {background-image: url(../images/tea-fields.jpg); background-size: cover; background-attachment: fixed;}
.bg-green{background-color: var(--primary);}

/* brands */
.brand-carousel {background-color: #FFF; padding-bottom: 2rem;}
.all-brands {margin: 0 -20px; padding:0 50px;}
.all-brands .slick-slide {display: flex; align-items: center; margin:20px; justify-content: center; padding:30px;}
.all-brands .slick-track {display: flex; align-items: center;}
.all-brands .slick-next:before, .all-brands .slick-prev:before {color: #333;}

/* footer */
footer {background-color:whitesmoke; color: #333; /*border-top:1px solid #CCC;*/ }
footer h5 {color: #333;}
footer h5 {margin-bottom: 1.5rem;}
.socials a {margin-right: 40px; font-size: 35px;}
footer ul {list-style-type: none; text-align: left; padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; font-size: 14px;}
footer li {margin-bottom: 5px;}
footer p, footer a {color:#333; text-decoration: none;}
footer section.container {padding-bottom:2rem;}
.fb {color:#365fa9;}
.yt {color:#f10002;}
.insta {color:#8b30b5;}
footer a:hover {color: var(--primary);}
.footer-links {justify-content: space-between; position: relative; padding-left: 30px;}
footer .bottom-0 {margin-bottom: -2.5rem;}
.emblem {position: absolute; bottom:0; right:0; border-radius: 10px;}
.flex-disp {display: flex; align-items: center; margin-bottom: 3rem;}
.flex-disp p {margin: 0;} .flex-disp img {margin-right: 40px;}
.copyrt {padding:5px 20px 20px 20px;}

/* about */
.the-top-image {position: relative;}
.the-top-image .abs {position: absolute; top:10vh; left:22vw;}
.about-home {padding-top: 0; margin-top: -10vw; position: relative; z-index: 4;}
.abt-section:nth-child(even) {background-color: #F2F2F2;}
.abt-section:nth-child(odd) {background-color: #FFF;}
.abt-section .col-md-8 {padding-left:3rem;}
.desktop-reverse {flex-direction: row-reverse;}
.capsule-holder {padding-top:0; padding-left:5vw; padding-right: 5vw;}
.world-round {background-color: #FFF; border-radius: 15%/50%; padding:3vw 5vw;}
.items-row {padding-top: 0;}
.single-items-row {display: flex; flex-direction: row; justify-content: stretch;}
.single-item {display: flex; flex-direction: column; justify-content: stretch;}
.single-item .im-holder {background-color:rgba(255,255,255,.4); width:130px; height: 130px; display: flex; align-items: center; justify-content: center; margin: auto; border-radius: 50%; margin-bottom: 2rem;}
.single-item .im-detail {border-radius: 15px; background-color: rgba(255,255,255,.8); color: #000; padding:2rem; text-align: center; flex-grow: 1; margin-bottom: 2rem;}
.single-item .im-detail h4 {text-transform: uppercase; font-weight: 600; font-size: 1.2rem; margin-bottom: 1.6rem;}
.abt-section .desktop-reverse .col-md-8 {padding-right:3rem; padding-left: 0;}
.abt-section h2, .abt-section h3 {margin-bottom: 2rem; font-size: 1.4rem;}

/* groceries */
section.top-im {padding: 0; position:relative; background-color: #000;}
.top-im:not(.reg) img {width:100%; opacity: .5;}
.top-im .abs {position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); color: #FFF;}
.top-im .abs h5 {color: #FFF;}
.groceries_block .bg-white {background-color: #FFF; padding:0px 20px 20px 20px; text-decoration: none; text-align: left; max-width:1146px; border-radius: 0 0 10px 10px;}
.groceries_block {display: inline-block; text-decoration: none;}
.more {color: var(--secondary); text-decoration: underline; font-weight: bold;}
.more:hover {color: var(--secondaryaccent);}

.the-top-image h2 {font-family: 'Norando', sans-serif; color:#FFF; text-shadow: 0 0 5px rgba(0,0,0,.2); text-transform: none; font-weight: normal; letter-spacing: 1px;}

/* brands */
.about-brand h1 {margin-bottom: 2rem;}
.brand-vid {padding-right: 3rem;}
.product-row {display: flex; flex-wrap: wrap; padding:1rem 0 0 0; align-items: center; justify-content:center;}
.a-product {overflow: hidden; position: relative; margin:20px; border:1px solid #CCC; border-radius: 6px; width:21%; cursor:default; background-color: #FFF;}
.a-product img {transform: scale(1,1); padding:30px 30px 50px 30px;}
.a-product:hover img {transform: scale(1.1, 1.1);}
.a-product p {width:100%; position: absolute; bottom:0; left:0; width:100%; padding-top:10px; padding-bottom: 10px; text-align: center; background-color: rgba(0,0,0,.7); color: #FFF;}
.a-product:hover p {background-color: var(--primary); font-weight: bold; color: #000;}
.products-section:nth-child(even){background-color:mintcream;}
.products-section:nth-child(odd){background-color:#fff;}
.primary {background-color: var(--primary);}
.field-bg {background-image: url(../images/field-bg.jpg); background-size: cover;}
.description {overflow: hidden;}
.read-more {cursor: pointer; color:var(--secondaryaccent); font-size: 13px; transition: all ease .3s; font-weight: bold;}
.read-more:hover {color:var(--primaryaccent); }
.bg-white {background-color: #FFF;}

/* available products */
.available-product{ background-color: #f5f5f5; padding-left: 20px; padding-right: 20px;background-image:url(../images/bg.jpg);}
.available-product h2 {margin-bottom: 0;}
.available-product-row {display: flex; flex-wrap: wrap; justify-content: space-evenly; margin-left:2rem; margin-right: 2rem; }
.the-product {padding:10px 10px 30px 10px; width:30%; min-width:350px; margin:15px; border:1px solid #DDD; background-color: #FFF; border-radius: 5px;  text-align: justify;}
.the-product:hover {/*background: linear-gradient(132deg, #ffffff, #c7f785, #ffffff, #bfe481, #ffffff, #ffffff);
  background-size: 1200% 1200%;

  -webkit-animation: greybg 30s ease infinite;
  -moz-animation: greybg 30s ease infinite;
  animation: greybg 30s ease infinite;*/}
.the-product h4 {padding-top: 1rem; font-size:1.6rem; font-weight: 700;}
.the-product p {max-width:450px; margin: auto; margin-bottom: 1rem; padding:0 20px;}
.the-product p.big {font-size: 1.2rem; text-align: center;}
.the-product a {display:inline-block; text-align: center; margin:auto; margin-bottom:30px;}
.av-image {max-width:110px; position: absolute; left:-70px; bottom:30%; z-index: 3;}
/* flip */
/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {background-color: transparent; width: 250px; height:350px;perspective: 1000px; margin:20px auto 10px auto; /* Remove this if you don't want the 3D effect */}
  /* This container is needed to position the front and back side */
.flip-box-inner {position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d;}
  /* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {transform: rotateY(180deg);}
/* Position the front and back side */
.flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%;-webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Style the front side (fallback if image is missing) */
.flip-box-front {background-color: #FFF; color: black; border-radius: 5px; }
/* Style the back side */
.flip-box-back { background-color: #FFF; color: white; border-radius: 5px;  transform: rotateY(180deg);}

/* landscape product */
.the-landscape-product {margin:20px; }
.the-landscape-product h4 {font-weight: 900;}
.the-landscape-product li {padding-left: 10px;}
.available-now {max-width:110px; position: relative;}
.available-now img {max-width: 100%; position: absolute; top:150px; left:30%; z-index: 1000;}
.s-slider img {max-height: 500px; margin: auto;}
.product-detail { border: 1px solid #DDD; background-color: #FFF; border-radius: 5px; margin:0 6rem 2rem 6rem; padding:2rem 0;}
.s-slider > div.slick-slide {display: flex; align-items: center; justify-content: center; height: 100%;}
.s-slider .slick-next:before, .s-slider .slick-prev:before {color: #000;}
/*.slider h1 {font-family: 'Norando', sans-serif; text-transform: capitalize; font-weight: normal; font-size: 3.5rem; line-height: normal;}*/


.all-products {background-color: #FFF;}
.product-list img {border-radius: 4px; overflow: hidden;}
.product-list > div {padding-bottom:3rem; margin-bottom: 2rem; border-bottom: 1px solid #CCC;}
.product-list > div:last-child {padding-bottom: 0; margin-bottom: 0; border: none;}
.product-list h4, .pro h4 {font-size: 1.5rem; font-weight: bold; margin-bottom: .8rem; text-align: center;}
.det {padding-left: 2rem; padding-top:2rem;}
.det p:last-child {padding-bottom: 0; margin-bottom: 0;}
.pro {background-color: #FFF; padding:2rem; flex-grow: 1; border:1px solid #DDD; border-radius: 5px; display: flex; align-items: center; margin-bottom: 30px;}
.pro a {display: block; text-align: center; text-decoration: none;}
.pro a i { display: block; margin: auto;}
.flex-full-size {display: flex; align-items: stretch;}
.flex-full-size > div {display: flex; align-items: stretch;}

.new-brands {display: flex; align-items: center; justify-content: space-evenly; padding:2rem 0;}
.new-brands img {max-width: 250px; width:100%;}

.contacts a {color:#000; font-weight: bold;}
.contacts a:hover { text-decoration: none;}
.contact-details a {color: var(--secondaryaccent); font-weight: bold; font-size: 15px; text-decoration: none;}
.contact-details a:hover {color: var(--secondary);}

@-webkit-keyframes greybg {
  0%{background-position:1% 0%}
  50%{background-position:99% 100%}
  100%{background-position:1% 0%}
}
@-moz-keyframes greybg {
  0%{background-position:1% 0%}
  50%{background-position:99% 100%}
  100%{background-position:1% 0%}
}
@keyframes greybg {
  0%{background-position:1% 0%}
  50%{background-position:99% 100%}
  100%{background-position:1% 0%}
}

/* contact */
.flex-row {display: flex; justify-content: stretch; align-items: stretch;}
.flex-row > div {align-items: stretch; display: flex;}
.in-item {box-shadow: 0 0 10px rgba(0,0,0,.2); padding:10px; width:100%;}
.in-item i {display: block; font-size:40px; margin:50px auto 10px auto; color: var(--secondaryaccent);}
.in-item .bottoms {margin:20px; margin-top:0; padding:0 20px 40px 20px; border-bottom: 1px solid #CCC;}
.in-item .bottoms:last-child {border-bottom: none;}
.the-form {padding:2rem;}

@media screen and (max-width:1500px){
  .the-product {width:30%;}
  /*header {padding:0 2vw;}*/
}
@media screen and (max-width:1400px){
    .navbar-expand-lg .navbar-nav .nav-link {padding:2px 10px; font-size:13px;}
    .dropdown-item {font-size: 13px;}
    .navbar .container{max-width:96%;}
}

@media screen and (max-width:1200px){
    .a-product {width: 42%;}
    .product_cats-details {flex: 0 0 45%;}
    
}
@media screen and (max-width:991px){
    .brand-vid {padding-right: 0; margin-bottom: 2rem;}
    .all-brands {padding: 0;}
    .the-product {width:95%;}
    .product-detail {margin:15px;}
    .flex-full-size > div {margin-bottom: 2rem;}
    .product_cats-details {flex: 0 0 90%;}
}
@media screen and (max-width:768px){
    .slider img {width: 280vw; max-width: none; position: relative; left:-80%;}
    .slider {overflow: hidden;}
    .slider .caption {width:70%;}
    header {padding: 0; padding-bottom: 15px;}
    .navbar {padding-bottom: 0;}
    .navbar-brand {margin-left:15px;}
    .navbar-toggler {margin-right: 20px; margin-top:10px;}
    .abs-button {right:18px;}
    .navbar-expand-lg .navbar-nav .nav-link {padding:15px 40px; border-top: 1px solid #CCC; font-size:14px;}    
    .dropdown-item {font-size: 14px; padding:15px 40px}
    .navbar-expand-lg .navbar-nav .nav-link:hover {background-color:#E2E2E2;}
    .navbar-expand-lg .navbar-nav .nav-link.btn {margin:0 auto; width:90%; margin-top:10px;}
    .navbar .container {padding:0;}
    footer{padding:0 30px;}
    footer .flex-center {display: block; text-align: center;}
    footer ul li {text-align: center;}
    footer .socials {padding-top: 30px;}
    footer .socials a {margin:40px;}
    .mobile-center {text-align: center;}
    .flex-disp {display: block; text-align: center;}
    .flex-disp img {padding-bottom: 2rem; margin:0;}
    .emblem {position: relative;}
    .footer-links h5 {margin-top:2rem;}
    h1{font-size:2rem; line-height: 2.3rem;}
    h2, .shop-row h2 {font-size:1.7rem; line-height:2rem;}
    h3{font-size:1.6rem; line-height: 1.9rem;}
    section {padding:5rem 2vw;}
    .logo-span img.abs {bottom: -65px; left: 0px;}
    .navbar-brand img {max-width: 170px; margin-top:10px;}
    .world-round {text-align: center; padding:40px 20px;} .world-round img, .world img {margin-top: 2rem;}
    .about-home {margin-top: 60px;} .about-home img {margin-top:2rem;}
    .available-product-row {margin-left: 0; margin-right: 0;}
    .pro {padding:20px 10px; margin-bottom: 0;}
    .pro h4 {margin: 0; margin-top:10px;}
    .det {padding:10px;}
    .the-product {width: 100%; margin-left: 0; margin-right: 0;}

    .the-form {padding:1rem;}
    .the-form .row {margin: 0 -15px;}

    .abt-section img {margin-bottom: 3rem;}
    .abt-section .col-md-8, .abt-section .desktop-reverse .col-md-8 {padding:0 20px;}
    .new-brands {flex-direction: column;}
    .new-brands img {margin: 20px;}
}





.carousel__slide__inner {
    overflow: hidden;
    position: relative;
  }
  .doAnimation .slick-active .carousel__slide__inner .carousel__image {
    -webkit-animation: scale-out 0.875s cubic-bezier(0.7, 0, 0.3, 1) 0.375s both;
            animation: scale-out 0.875s cubic-bezier(0.7, 0, 0.3, 1) 0.375s both;
    transform: scale(1.3);
  }
  .carousel__slide__overlay {
    background-color: transparent;
    background-size: 100%;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
  }
  .slick-active .carousel__slide__overlay {
    /*animation: scale-in-hor-left 1.375s cubic-bezier(0.645, 0.045, 0.355, 1) 0.25s reverse both;*/
  }
  .carousel__image {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: relative;
    transform: scale(1);
    width: 100%;
    z-index: 1;
  }
  
  @-webkit-keyframes scale-out {
    0% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes scale-out {
    0% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
  @-webkit-keyframes scale-in-hor-left {
    0% {
      transform: translateX(-100%) scaleX(0);
      transform-origin: 0% 0%;
      opacity: 1;
    }
    50% {
      transform: translateX(-50%) scaleX(0.5);
      transform-origin: 0% 0%;
      opacity: 1;
    }
    100% {
      transform: translateX(0) scaleX(1);
      transform-origin: 0% 0%;
      opacity: 1;
    }
  }
  @keyframes scale-in-hor-left {
    0% {
      transform: translateX(-100%) scaleX(0);
      transform-origin: 0% 0%;
      opacity: 1;
    }
    50% {
      transform: translateX(-50%) scaleX(0.5);
      transform-origin: 0% 0%;
      opacity: 1;
    }
    100% {
      transform: translateX(0) scaleX(1);
      transform-origin: 0% 0%;
      opacity: 1;
    }
  }