@import url('https://fonts.googleapis.com/css?family,Poppins:200,300,400,500,600,700,800,900&display=swap'); 

html {
 
  height: 100%;
  padding: 1em;
  font-size: 112.5%;
  color: #124;
  /* background-color: white; */
  /* background-position: -40vw 14rem, 50% 10rem, 60vw 14rem, -10vw calc(14rem + 20vw), 30vw calc(14rem + 20vw); */
  /* background-size: 80vw 80vw; */
  /* background-repeat: repeat; */
}
 /* css for bg */
 .bg1, .bg2, .bg3 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 35vh; /* Adjust the minimum height as needed */
}

.bg1 {
  background-image: url("Pictures/bg1.jpg");
}

.bg2 {
  background-image: url("Pictures/bg2.jpg");
}

.bg3 {
  background-image: url("Pictures/bg3.jpg");
}

@media only screen and (max-width: 414px) {
  .bg1, .bg2, .bg3 {
    background-attachment: scroll; /* Change to scroll for smaller screens */
    background-size: contain; /* Adjust background size for smaller screens */
    min-height: 50vh; /* Adjust the minimum height for smaller screens */
  }
}

/* this css is for the navbar  */
.container-fluid.main {
    position: relative;
    padding: 0;
    background: transparent;
  }
  
  .collapse.in {
    display: block;
}
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  #navbar {
    background: transparent;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1000; /* Ensure the navbar appears on top */
    border: none;
  }
  #myNavbar{
    border: none;
    border-color: transparent;
    
  }
  #nav-item1{
    margin-bottom: 18px;
  }
    
  #nav-ul{
    margin-top: 10px;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 8px;
      /* margin-right: -15px; */
       background: #5f826778;
       float: right;
       border-radius: 10px;
       box-shadow:1px 1px 1px 1px white;
  }
  
 

  
  

  #nav-item2, #nav-item3, #nav-item4, #nav-item5, #nav-item6{
    font-size: 15px;
    background: transparent;
    border: none;
    color: #ffedd3;
    text-transform: uppercase;
    position: relative;
    transition: 0.5s ease;
    cursor: pointer;
  }
  #nav-item2:before, #nav-item3:before, #nav-item4:before, #nav-item5:before, #nav-item6:before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: #286c33;
    transition: 0.5s ease;
  }

  #nav-item2:hover, #nav-item3:hover, #nav-item4:hover, #nav-item5:hover, #nav-item6:hover{
    color:  #286c33;
    transition-delay: 0.5s;
  }
  #nav-item2:hover::before, #nav-item3:hover::before, #nav-item4:hover::before, #nav-item5:hover::before, #nav-item6:hover::before {
    width: 100%;
  }
  
  #nav-item2::after, #nav-item3::after, #nav-item4::after, #nav-item5::after, #nav-item6::after  {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    transition: 0.4s ease;
    z-index: -1;
  }
  
  #nav-item2:hover::after, #nav-item3:hover::after, #nav-item4:hover::after, #nav-item5:hover::after, #nav-item6:hover::after {
    height: 100%;
    transition-delay: 0.4s;
    color: aliceblue;
  }
  

.navbar-default .navbar-brand {
  font-family: Verdana;
  color: #ffffff;
  font-size: 20px;
  background-color: transparent;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffffff;
  background-color: transparent;
}

.navbar-default .navbar-nav > li > a {
  color: #ffffff;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffffff;
  background-color: transparent;
}

.navbar-default .navbar-toggle {
  border-color: transparent;
}

.navbar-default .navbar-toggle:hover {
  background-color: transparent;
}

.navbar-default .navbar-toggle:focus {
  background-color: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}

.carousel .background {
    /* background-position: center center; */
    background-size: 1920px 1080px;
    background-repeat: no-repeat;
    height: 700px;
  }

@media (max-width:800px) {
  .carousel .background {
    background-size: cover; /* To make the background image looks good */
  }
}

.carousel .background.a {
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("blueberry.jfif");
}

.carousel .background.b {
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Pomegranate.jfif");
}

/* .carousel .background.c {
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("cherry.jfif");
} */
.carousel .background.d {
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Grape.jfif");
  }
  /* .carousel .background.e {
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("mango.jfif");
  }
  .carousel .background.f {
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("mango.jfif");
  }
  .carousel .background.g {
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("strawberry.jfif");
  } */

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition: opacity 0.5s; /* The 0.5s describes the duration to make the opacity from 0 to 1 */
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

/* CSS Hack to trigger GPU for smooth transition */
@media all and (transform-3d),
(-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next,
  .carousel-fade .carousel-inner > .item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.prev,
  .carousel-fade .carousel-inner > .item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.next.left,
  .carousel-fade .carousel-inner > .item.prev.right,
  .carousel-fade .carousel-inner > .item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
/* CSS Hack to trigger GPU for smooth transition */

.covertext {
    position: absolute;
    top: 200px;
    left: 0px;
    right: 0px;
  }

.title {
  font-family: Verdana;
  font-weight: 600;
  font-size: 60px;
  color: #ffffff;
  text-align: center;
}

.subtitle {
  font-family: Verdana;
  font-size: 23px;
  color: #ffffff;
  text-align: center;
}

.explore {
  text-align: center;
  margin-top: 10px;
}

#btn
{
  width: 150px;
  height: 60px;
  border: 3px solid #e30613;
  border-radius: 45px;
  transition: all 0.3s;
  cursor: pointer;
  background: white;
  font-size: 1.2em;
  font-weight: 550;
  font-family: 'Montserrat', sans-serif;
  color: #e30613;
}

#btn:hover {
  background: #e30613;
  color: white;
  font-size: 1.5em;
}
.collapse .navbar-collapse {
  background-color: #ffffff8f;
}


/* this css is for the cards: */


*
{ 
	/* margin: 0; */
    /* padding: 0; */
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
     
}
.card .contentBx h2, 
.card .description p {
    font-family:'Poppins', sans-serif; 
}

html,
body {
  height: 100vh;
  padding: 0;
 
}




#home {
   
    color: #fff;
    text-align: center;
    /* padding: 20px; */
}

#products {

background: transparent;
/* height: 100vh; */
padding-left: 10vw;
padding-top: 150px;
padding-bottom: 150px;
background: url('Pictures/aloevera4.jpg');
background-size: 1920px 1080px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media only screen and (max-width: 414px) {
  #products {
      padding-left: 5vw;
      padding-top: 100px;
      padding-bottom: 100px;
      background-size: contain; /* Ensure the entire image fits within the element */
      background-attachment: scroll;
      background-repeat: no-repeat;
      background-position: center;
  }
}



.products-display 
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* gap: 20px; */
	column-gap: 10px;
	
	
} 

  @media screen and (max-width: 768px) {
   
	.products-display {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		
	  }
    .products-display .card {

      margin-top: 50px;
  }
	  #products{

	  padding-left: 2vw;
 }
/* 
 .content__main h3{
  font-size: 16;
 } */

}
@media screen and (max-width: 480px) {
  .content__main h3 {
    font-size: 1.5rem; /* Adjust font size for very small phone screens */
    letter-spacing: 0.3rem; /* Adjust letter spacing for very small phone screens */
    width: 30vw;
   margin-left: 20px;
  }
  .content__main h1{
    font-size: 2.5rem
  }
}
@media screen and (min-width: 481px) and (max-width: 767px) {
  .content__main h3 {
    font-size: 2rem; /* Adjust font size for Samsung screens */
    letter-spacing: 0.4rem; /* Adjust letter spacing for Samsung screens */
    width: 30vw;
    position:center ;
    justify-content: center;
    margin-left: 20px;
  }
  .content__main h1{
    font-size: 2.5rem
  }
}
@media screen and (min-width: 321px) and (max-width: 720px) {
  .content__main h3 {
    font-size: 1rem; /* Adjust font size for Samsung Galaxy A12 */
    letter-spacing: 0rem; /* Adjust letter spacing for Samsung Galaxy A12 */
    width: 30vw;
    margin-left: 20px;
    
  }
  .content__main h1{
    font-size: 2rem
  }
}

@media (max-width:600px) {
	.products-display .card {

        margin-top: 50px;
    }
	.products-display {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	  }
	  #products{

    padding: 10%;
    padding-left: 10vw;
   }
   .content__main h3{
    font-size: 16px;
   }
 
  }
.products-display .card {
    position: relative;
    width: 320px;
    height: 450px;
    background: #232323;
    border-radius: 20px;
    overflow: hidden;
    /* flex-grow: 1;
    flex-basis: 200; */
}

.products-display .card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #487027;
    clip-path: circle(550px at 80% 20%);
    transition: 0.5s ease-in-out;
}

/* ... rest of your CSS ... */

#can-2:before 
{
	background: #aa1e19; 
}
#can-3:before 
{
	background: #15174a; 
}
#bottle-1:before 
{
	background: #50ce04; 
}
#bottle-2:before 
{
	background: #ff2c30; 
}

#limo-1:before 
{
	background: #fd6033; 
}
#limo-2:before 
{
	background: #b6572b; 
}
#limo-3:before 
{
	background: #91262c; 
}
.products-display .card:hover:before 
{ 
clip-path: circle(300px at 80% -20% ); 
} 


.products-display .card:after 
{ 
	position: absolute; 
	align-items: center;
	top: 35% ; 
	left: -10% ; 
	font-size: 9em ; 
	font-weight: 800; 
	font-style: italic; 
	color: rgba(255,255,255,0.04); 
} 
#can-1:after 
{ 
	content: 'Grape';
	}
#can-2:after 
{ 
	content: 'Pomeg-\Aranate';
    white-space: pre;
	font-size: 7em ;
	align-items: center;
	left: -5%;
	top: 20% ;
	}
	#can-3:after 
{ 
	content: 'Blue-\A berry';
    white-space: pre-wrap;
	font-size: em ;
	align-items: center;
	left: -5%;
	top: 20% ;
	}
#bottle-1:after 
{ 
	content: 'Grape';
	}

	#bottle-2:after 
	{ 
		content: 'Staw-\A berry';
		white-space: pre;
		font-size: 9em ;
		align-items: center;
		left: -2%;
		top: 20% ;
		}
	#limo-1:after 
{ 
	content: 'Mango';
	font-size: 8em ;
	left: -7%;
	}
	#limo-2:after 
{ 
	content: 'Peach';
	font-size: 8.2em ;
	left: -4%;
	}
	#limo-3:after 
{ 
	content: 'Cherry';
	font-size: 8em ;
	}


	
.products-display .card .imgBx
 { 
	position: absolute; 
	top: 50% ; 
	transform: translateY(-50%); 
	z-index: 10000; 
	width: 100% ; 
	height: 220px; 
	transition: 0.5s; 
} 

.products-display .card:hover .imgBx
 { 
 	top: 0% ; 
 	transform: translateY(0%); 
 	} 

 .products-display .card .imgBx #can1 
 { 
 	position: absolute; 
 	top: 30%; 
 	left: 48%; 
 	transform: translate(-50%,-50%) rotate(-25deg);
 	width: 270px; 
} 
 .products-display .card .imgBx #can2
 { 
 	position: absolute; 
 	top: 30%; 
 	left: 48%; 
 	transform: translate(-50%,-50%) rotate(-25deg);
 	width: 270px; 
} 
.products-display .card .imgBx #can3
{ 

	
	position: absolute; 
	top: 35%; 
	left: 48%; 
	transform: translate(-11%,15%) rotate(-25deg);
	width: 270px; 
} 

 .products-display .card .imgBx #bottle1 
 { 
 	position: absolute; 
 	top: 30%; 
 	left: 48%; 
 	transform: translate(-50%,-50%) rotate(-25deg);
 	width: 270px; 
} 
.products-display .card .imgBx #bottle2 
{ 
	position: absolute; 
	top: 30%; 
	left: 48%; 
	transform: translate(-50%,-50%) rotate(-25deg);
	width: 270px; 
} 
.products-display .card .imgBx #limo1
{ 
	position: absolute; 
	top: 30%; 
	left: 48%; 
	transform: translate(-55%,-59%) rotate(-35deg);
	width: 270px; 
} 
.products-display .card .imgBx #limo2
{ 
	position: absolute; 
	top: 30%; 
	left: 48%; 
	transform: translate(-55%,-59%) rotate(-35deg);
	width: 270px; 
} 
.products-display .card .imgBx #limo3
{ 
	position: absolute; 
	top: 30%; 
	left: 48%; 
	transform: translate(-55%,-59%) rotate(-35deg);
	width: 270px; 
} 
.products-display .card .contentBx 
{ 
	 position: absolute;
	 bottom: -100px; 
	 width: 100%; 
	 height: 100px; 
	 text-align: center; 
	 transition: 1s; 
	 z-index: 10; 
	 } 

.products-display .card:hover .contentBx 
 { 
 	height: 545px; 
 	z-index: 20;
} 
.products-display .card .contentBx h2

{    margin-top: 0px;
	 font-size: 25px;
	font-weight: 600; 
	letter-spacing: 1px; 
	color: #fff;
	font-family: 'Poppins', sans-serif } 

 
 #can1, #can2, #bottle1,  #bottle2, #limo1, #limo2, #limo3 {
 	scale: 0.5;
 }

 #can3 {
	scale: 2.3;
}
 #grape,  #pomegranate,  #blueberry, #mango,#peach, #cherry{
 	scale: 0.18;
 }

#strawberry {
	scale: 0.18;
	transform:  rotate(-35deg);
}


.products-display .card .description
{
	 position: absolute;
	 bottom: -100px; 
	 left: 20px;
	 width: 60%; 
	 height: 100px; 
	 text-align: left; 
	 transition: 1s; 
	 z-index: 10; 
	 font-size: 25px;
	 font-weight: 600; 
	letter-spacing: 1px; 
	color: #fff; 
}
.products-display .card:hover .description
{
 	height: 150px; 
 	z-index: 20;
} 

.products-display .card .fruit
{
	 position: absolute;
	 bottom: -10px;
	 transition: 1s; 
	 z-index: 10; 
	 transform: rotate(15deg);
	 width: 100px; 
	height: 100px;
	left: -130px;
}

.products-display .card:hover .fruit
{
 	 bottom: 290px; 
 	z-index: 20;
} 

#limo-1 p, #limo-2 p, #limo-3 p{

		margin-left: 20px;
	  
}


/* this css if for the carousel: */


#Product-Description{
	height:100vh;
  background-color: transparent;
}
.js-transitions-disabled * {
  transition: none !important;
}
.carousel {
  position: relative;
  height: 100%;
  overflow: hidden;
  perspective: 50vw;
  perspective-origin: 50% 50%;
}
.carousel__control {
  position: absolute;
  height: 160px;
  width: 40px;
  background: #fff;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}
.carousel__control a {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 75%;
  box-sizing: border-box;
}
.carousel__control a:hover:before {
  background-color: rgba(0,0,0,0.4);
}
.carousel__control a.active:before,
.carousel__control a.active:hover:before {
  background-color: rgba(0,0,0,0.6);
}
.carousel__control a:first-child {
  margin-top: 15px;
}
.carousel__control a:before {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
  padding-top: 25%;
  width: 25%;
  background: rgba(0,0,0,0.2);
  content: '';
  display: block;
  margin-top: -12.5%;
}
.carousel__stage {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  margin: auto;
  transform-style: preserve-3d;
  transform: translateZ(calc(-50vh + 20px));
}
.spinner {
  position: absolute;
  width: calc(50vw - (29px));
  height: calc(100vh - 40px);
  top: 0;
  left: 0;
  right: auto;
  bottom: 0;
  margin: auto;
  transform-style: preserve-3d;
  transition: transform 1s;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  transform: rotateX(0);
}
.js-spin-fwd .spinner {
  transform: rotateX(-90deg);
}
.js-spin-bwd .spinner {
  transform: rotateX(90deg);
}
.js-spin-fwd .spinner--right {
  transform: rotateX(90deg);
}
.js-spin-bwd .spinner--right {
  transform: rotateX(-90deg);
}
.spinner--right {
  right: 0;
  left: auto;
}
.spinner__face {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.spinner__face.js-next {
  display: block;
  transform: rotateX(90deg) translateZ(calc(50vh - 20px));
}
.spinner--right .spinner__face.js-next {
  transform: rotateX(270deg) translateZ(calc(50vh - 20px));
}
.js-spin-bwd .spinner__face.js-next {
  transform: rotateX(-90deg) translateZ(calc(50vh - 20px));
}
.js-spin-bwd .spinner--right .spinner__face.js-next {
  transform: rotateX(-270deg) translateZ(calc(50vh - 20px));
}
.js-active {
  display: block;
  transform: translateZ(calc(50vh - 20px));
}
.content {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: absolute;
  width: 200%;
  height: 100%;
  left: 0;
}
.spinner--right .content {
  left: -100%;
}
.content__left,
.content__right {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}
.content__right {
  right: 0;
  left: auto;
}
.content__left {
  background-repeat: no-repeat;
  background-size: cover;
}
.content__left:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
}

.content__left span {
  font-size: 1vw;
  font-weight: 300;
  letter-spacing: 0.2em;
  opacity: 0.9;
  font-family: Merriweather;
}
.content__right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.content__right .content__main {
  position: absolute;
  font-family: Merriweather, serif;
  text-align: left;
  color: #fff;
  font-size: 1.3vw;
  padding: 0 8vw;
  line-height: 1.65;
  font-weight: 300;
  margin: 0;
  opacity: 0.8;
}
.content__right .content__main p:last-child {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.85em;
}
.content__right .content__index {
  font-size: 30vh;
  position: absolute;
  right: -1vh;
  bottom: 0vh;
  opacity: 0.04;
  font-family: oswald;
  color: #fff;
}
[data-type="can1"] .content__left {
  background-image: url("Pictures/can1art.jpg");
}
.spinner--right [data-type="can1"] .content__left {
  background-image: none;
}


[data-type="can2"] .content__left {
  background-image: url("Pictures/can2art.jpg");
}
.spinner--right [data-type="can2"] .content__left {
  background-image: none;
}


[data-type="can3"] .content__left {
  background-image: url("Pictures/can3art.jpg");
}
.spinner--right [data-type="can3"] .content__left {
  background-image: none;
}


[data-type="bottle1"] .content__left {
  background-image: url("Pictures/bottle1art.jpg");
}
.spinner--right [data-type="bottle1"] .content__left {
  background-image: none;
}



[data-type="bottle2"] .content__left {
    background-image: url("Pictures/bottle2art.jpg");
  }
  .spinner--right [data-type="bottle2"] .content__left {
    background-image: none;
  }



[data-type="limo1"] .content__left {
  background-image: url("Pictures/limo1art.jpg");
}
.spinner--right [data-type="limo1"] .content__left {
  background-image: none;
}  



[data-type="limo2"] .content__left {
    background-image: url("Pictures/limo2art.jpg");
  }
  .spinner--right [data-type="limo2"] .content__left {
    background-image: none;
  }



  [data-type="limo3"] .content__left {
    background-image: url("Pictures/limo3art.jpg");
  }
  .spinner--right [data-type="limo3"] .content__left {
    background-image: none;
  }
  
  


  /* css for logistics
   */
  

   #logistics{
    padding-top: 200px;
   
    background: url('Pictures/aloevera1.jpg');
background-size: 1920px 1080px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;

background-size: cover;

   }
   @media only screen and (max-width: 414px) {
    #logistics {
        padding-top: 100px; /* Adjust padding for smaller screens */
        background-size: contain; /* Ensure the background image fits within the element */
        background-attachment: scroll; /* Allow the background to scroll with the content */
    }
}


   #logistics-cards{
    padding-top: 50px;
padding-bottom: 100px;
   }
  .logistics-card{
    width:30%;
    height: 50%;

  }
  h1 {
    font-family: 'Tahoma';
    font-size: 20px;
    font-weight: bold;
    text-align: center;
  }
  h2 {
    font-family: 'Tahoma';
    font-size: 20px;
    font-weight: normal;
    text-align: center;
  }

  #truck-image{
    scale: 0.5;
  }
  .TruckLoader {
    margin-top: 50px;
    position: relative;
    width: 150px;
    height: 45px;
    background: #5fac7d;
    box-shadow: inset 2px 5px 5px #356a4c;
    animation: put-put 2s infinite, move-truck 10s infinite;
    background-size: 100% auto;
    border-radius: 4px;
    -webkit-box-reflect: below 15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 0.1)));
  }
  .TruckLoader:before, .TruckLoader:after {
    content: '';
    display: block;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    background: #223331;
    position: absolute;
    bottom: -10px;
  }
  .TruckLoader:before {
    left: 6px;
  }
  .TruckLoader:after {
    right: 6px;
  }
  .TruckLoader-cab {
    position: absolute;
    left: -35px;
    bottom: 0;
    width: 33px;
    height: 25px;
    background: #5fac7d;
    box-shadow: inset 2px 5px 5px #356a4c;
    border-radius: 40% 0 4px 4px;
    -webkit-box-reflect: below 15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 0.1)));
  }
  .TruckLoader-cab:before, .TruckLoader-cab:after {
    position: absolute;
    content: '';
    display: block;
    background: #5fac7d;
    box-shadow: inset 2px 5px 5px #356a4c;
  }
  .TruckLoader-cab:before {
    width: 20px;
    height: 15px;
    top: -15px;
    right: 0;
    border-radius: 100% 0 0 0;
  }
  .TruckLoader-cab:after {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background: #444;
    left: 5px;
    border: 2px solid #fff;
    background: #223331;
    position: absolute;
    bottom: -10px;
  }
  .TruckLoader-smoke, .TruckLoader-smoke:after, .TruckLoader-smoke:before {
    position: absolute;
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    right: -1px;
    bottom: -5px;
    border-radius: 50%;
    background: #333;
  }
  .TruckLoader-smoke {
    animation: smoke-1 2s infinite;
  }
  .TruckLoader-smoke:after {
    animation: smoke-2 3s infinite;
  }
  .TruckLoader-smoke:before {
    animation: smoke-3 4s infinite;
  }
  
  @-webkit-keyframes smoke-1 {
    0% {
      opacity: 0;
    }
    15% {
      opacity: 0.9;
    }
    100% {
      right: -30px;
      bottom: 5px;
      width: 30px;
      height: 30px;
      opacity: 0;
    }
  }
  @-webkit-keyframes smoke-2 {
    0% {
      opacity: 0;
    }
    15% {
      opacity: 0.9;
    }
    100% {
      right: -60px;
      bottom: 8px;
      width: 25px;
      height: 25px;
      opacity: 0;
    }
  }
  @-webkit-keyframes smoke-3 {
    0% {
      opacity: 0;
    }
    15% {
      opacity: 0.9;
    }
    100% {
      right: -40px;
      bottom: 2px;
      width: 35px;
      height: 35px;
      opacity: 0;
    }
  }
  @-webkit-keyframes move-truck {
    0% {
      margin-left: 90%;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    50% {
      margin-left: 45%;
    }
    90% {
      opacity: 1;
    }
    100% {
      margin-left: 0;
      opacity: 0;
    }
  }
  



  .card-logistics {
    width: 250px;
    height: 280px;
    background: white;
    padding: 1em;
    border-radius: 6px;
     box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1); 
     box-shadow:  2px 15px 15px rgba(0, 0, 0, 0.1); 
  }
  
  .card-image {
    background: linear-gradient(to bottom, 
    rgba(95, 172, 125, 0.9),
    rgba(95, 172, 125, 0.7),
    rgba(95, 172, 125, 0.5),
    rgba(95, 172, 125, 0.3),
    rgba(95, 172, 125, 0.1)
  );
    width: 100%;
    height: 130px;
    border-radius: 6px 6px 0 0;
    display: flex;
    align-items: center;
 justify-content: center;
  }
  
  .card-image:hover {
    transform: scale(0.98);
  }
  
  .category {
    text-transform: uppercase;
    font-size: 0.7em;
    font-weight: 600;
    color: rgb(63, 121, 230);
    padding: 10px 7px 0;
    
  }
  
  .category:hover {
    cursor: pointer;
  }
  
  .heading {
   
    font-weight: 600;
    font-size: 1.7em;
    color: rgb(88, 87, 87);
    padding: 7px;
    padding-bottom: 15px;
  }
  
  .heading:hover {
    cursor: pointer;
  }
  
  .author {
    color: gray;
    font-weight: 400;
    font-size: 11px;
    padding-top: 20px;
  }
  
 
  #logistics-cards{
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    column-gap: 10px;
  padding-left: 1vw;}


    #logistics{
      padding: 5em;
      }
    @media screen and (max-width: 1100px) {
     
      #logistics-cards{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
       
        }
        #logistics{
          padding: 0em;
          }
      }
      
    @media screen and (max-width: 800px) {
     
      #logistics-cards{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        }
        #logistics{
          padding: 0em;
          }
      }
      @media screen and (max-width: 580px) {
     
        #logistics-cards{
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          padding-left: 20vw;
               }
               #logistics{
                padding: 0em;
                }
        }


        /* css for contact us  */
        :root {
          --primary-color: #010712;
          --secondary-color: #818386;
          --bg-color: #FCFDFD;
          --button-color: #3B3636;
          --h1-color: #3F444C;
        }
        
        [data-theme="dark"] {
          --primary-color: #FCFDFD;
          --secondary-color: #818386;
          --bg-color: #010712;
          --button-color: #818386;
          --h1-color: #FCFDFD;
        }
        
        * {
     
          transition: all 0.3s ease-in-out;
        }
        
        #contact-us{
          width: 100%;
        }
        .contact-container {
          display: flex;
          /* width: 100vw; */
          height: 100vh;
          background: var(--bg-color);
        }
        
        .left-col {
          width: 45vw;
          height: 100vh;
          background-image: url("Pictures/aloevera2.jpg");
          background-size: cover;
          background-repeat: no-repeat;
        }
        
      
        
        .right-col {
          background: var(--bg-color);
          width: 50vw;
          height: 100vh;
          padding: 5rem 3.5rem;
        }
        
        #h1-contact-us, label, #kontakt_btn, .description {
          font-family: 'Jost', sans-serif;
          font-weight: 400;
          letter-spacing: 0.1rem;
        }
        
        #h1-contact-us {
          color:var(--h1-color);
          text-transform: uppercase;
          font-size: 2.5rem;
          letter-spacing: 0.5rem;
          font-weight: 300;
        }
        
        #p-contact-us {
          color: var(--secondary-color);
          font-size: 0.9rem;
          letter-spacing: 0.01rem;
          width: 40vw;
          margin: 0.25rem 0;
        }
        
        label, .description {
          color: var(--secondary-color);
          text-transform: uppercase;
          font-size: 1rem;
          padding-top: 10px;
        }
        
        form {
          width: 31.25rem;
          position: relative;
          margin-top: 6rem;
          padding: 1rem 0;
        }
        
        input, textarea, label {
          width: 40vw;
          display: block;
        }
        
        #p-contact-us, placeholder, input, textarea {
          font-family: 'Helvetica Neue', sans-serif;
        }
        
        input::placeholder, textarea::placeholder {
          color: var(--primary-color);
        }
        
        input, textarea {
          color: var(--primary-color);
          font-weight: 500;
          background: var(--bg-color);
          border: none;
          border-bottom: 1px solid var(--secondary-color);
          padding: 0.5rem 0;
          margin-bottom: 1rem;
          outline: none;
        }
        
        textarea {
          resize: none;
        }
   
        
        #kontakt_btn{
          color: white;
          background: var(--button-color);
          margin-top: 10px;
          border-radius: 4px;
          padding: 5px;
          padding-left: 10px;
          padding-right: 10px;
          cursor: pointer;
        }
        
        input:hover, textarea:hover, button:hover {
          opacity: 0.5;
        }
        
       #kontakt_btn:active {
          opacity: 0.8;
        }
        
        /* Toggle Switch */
        
        .theme-switch-wrapper {
          display: flex;
          align-items: center;
          text-align: center;
          width: 160px;
          position: absolute;
          top: 0.5rem;
          right: 0;
        }
        
        .description {
            margin-left: 1.25rem;
          }
        
        .theme-switch {
          display: inline-block;
          height: 34px;
          position: relative;
          width: 60px;
        }
        
        .theme-switch input {
          display:none;
        }
        
        
        #error, #success-msg {
          width: 40vw;
          margin: 0.125rem 0;
          font-size: 0.75rem;
          text-transform: uppercase;
          font-family: 'Jost';
          color: var(--secondary-color);
          }
        
        
          #success-msg {
          transition-delay: 3s;
          }
        
        @media only screen and (max-width: 950px) {
        
          #h1-contact-us {
            font-size: 1.75rem;
          }
         #p-contact-us {
            font-size: 0.7rem;
          }
          input, textarea, #button-contact-us {
            font-size: 0.65rem;
          }
          .description {
            font-size: 0.3rem;
            margin-left: 0.4rem;
          }
          #bkontakt_btn {
            width: 7rem;
          }
          .theme-switch-wrapper {
            width: 120px;
          }
          .theme-switch {
          height: 28px;
          width: 50px;
        }
        
        .theme-switch input {
          display:none;
        }
        
        .slider:before {
          background-color: #fff;
          bottom: 0.25rem;
          content: "";
          width: 20px;
          height: 20px;
          left: 0.25rem;
          position: absolute;
          transition: .4s;
        }
          input:checked + .slider:before {
          transform: translateX(16px);
        }
        
        .slider.round {
          border-radius: 15px;
        }
        
        .slider.round:before {
          border-radius: 50%;
        }
        
        }

        @media (max-width:800px) {
          #logistics{
            background-size: cover; /* To make the background image looks good */
          }
          #products{
            background-size: cover; /* To make the background image looks good */
          }
        }

        #skontakt_btn{
          color: white;
          background-color: black;
          margin-top: 10px;
          border-radius: 4px;
          padding: 5px;
          padding-left: 10px;
          padding-right: 10px;
        }
        .site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}

.contactInfo{
  padding-left:0;
}
.contactInfo li{
  list-style:none
 
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}


svg{
  padding-right: 2px;
}