:root {
  --primary: #ec994b;






  --white: #ffffff;










  --bg: #f5f5f5;
}

html {
  font-size: 62.5%;
  font-family: "Montserrat", sans-serif;
  scroll-behavior: smooth;
}



@media (min-width: 1440px) {
  html {
    zoom: 1;
  }
}

@media (min-width: 2560px) {
  html {
    zoom: 1.7;
  }
}

@media (min-width: 3860px) {
  html {
    zoom: 2.5;
  }
}

::-webkit-scrollbar {
  width: 1.3rem;
}

::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background: #797979;
  transition: all 0.5s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  background: #222224;
}

::-webkit-scrollbar-track {
  background:rgb(95, 94, 94);
}




.text-center {
  text-align: center;
}

.section-heading {
  font-size: 3rem;
  color: var(--primary);
  padding: 1rem;
}


.section-headingG{
    text-align: center;
    font-size:2.5em;
    color: var(--primary);
    margin: 2rem;
}

#tranding .tranding-slider {
   height: 29rem;
  background-image: url(../images/meetings-bg.jpg);
   border-radius: 1.5rem;
   position: relative;
}
.tranding-slide .tranding-slide-img img {
  margin-top:4rem;
  width:35rem;
  height: 24rem;
  border-radius: 1.5rem;
  object-fit: cover;
}

/* SMOLE SIZE */

@media (max-width:500px) {
  #tranding .tranding-slider {
    height: 26rem; }     }

.tranding-slide {
   width:17rem;
  height:23rem;
  position: relative;
}



@media (max-width:500px) {
  .tranding-slide {
    width:17rem !important;
    height:21rem !important;
    margin-top:1rem;
  }

  .tranding-slide .tranding-slide-img img {
      margin-top:1rem;

    width: 17rem !important;
    height:21rem !important;
  }
  
}







.tranding-slide .tranding-slide-content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.tranding-slide-content .food-price {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: var(--white);
}

.tranding-slide-content .tranding-slide-content-bottom {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: var(--white);
}

.food-rating {
  padding-top: 1rem;
  display: flex;
  gap: 1rem;
}

.rating ion-icon {
  color: var(--primary);
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
  display: none;
}

.tranding-slider-control {


  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
    bottom: 1rem;

}

.tranding-slider-control .swiper-button-next {
  left: 58% !important;
  transform: translateX(-58%) !important;
}


@media (max-width:990px) {
  .tranding-slider-control .swiper-button-next {
    left: 70% !important;
    transform: translateX(-70%) !important;
  }



  .tranding-slider-control .slider-arrow {
    
  background: var(--white);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  left: 42%;
  transform: translateX(-42%);
  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
  
  
}
}

@media (max-width:450px) {
  .tranding-slider-control .swiper-button-next {
    left: 80% !important;
    transform: translateX(-80%) !important;
  }

}

@media (max-width:990px) {
  .tranding-slider-control .swiper-button-prev {
    left: 30% !important;
    transform: translateX(-30%) !important;
  }



}

@media (max-width:450px) {
  .tranding-slider-control .swiper-button-prev {
    left: 20% !important;
    transform: translateX(-20%) !important;
  }




}




.tranding-slider-control .slider-arrow ion-icon {
  font-size: 2rem;
  color: #222224;
 
}

.tranding-slider-control .slider-arrow::after {
  content: '';
}

.tranding-slider-control .swiper-pagination {
  position: relative;
  width: 15rem;
  bottom: 0rem;
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
  filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}

.tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--primary);
}





























/*=============== VARIABLES CSS ===============*/
:root {

  --yellow-color: 52;
  --green-color: 116;
  --pink-color: 300;
  --white-color: hsl(0, 0%, 100%);
  --black-color: hsl(0, 0%, 0%);
  --biggest-font-size: 2rem;
  --big-font-size: 1.5rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-semi-bold: 600;
  --font-bold: 700;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
  :root {
    --biggest-font-size: 3rem;
    --big-font-size: 2.5rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;


}




a {
  text-decoration: none;
}

.car__imgg {
    border-radius:0.6rem;

  display: block;
  max-width: 100%;
  height: 100%;
  width: 100%;
  align-items: center;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.contain {
  max-width: 1120px;


  
}



/*=============== CARD ===============*/
.car {
  animation: Anim 1s ease-in 2s 1 normal;
  animation-timeline: view();
  position: relative;
  margin: 1rem;
 border-radius:2rem;


 
}


.car__bg, 
.car__blu {
  position: absolute;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
}

.carc__bg, 
.carc__blu {
  position: absolute;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
}




.car__bg {
  object-fit: cover;
  object-position: center;
  
}


.carc__bg {
  object-fit: cover;
  object-position: center;
}

.car__blu {
  backdrop-filter: blur(24px);
}


.car__contain{
  position: relative;
  display: grid;
  grid-template-columns: 260px;
  justify-content: center; 
  gap: 1rem;



}




.car__artic {
  box-shadow: 0px 0px 10px 2px rgb(27, 26, 26);
    border-radius:0.8rem;


  position: relative;
  overflow: hidden;
  height: 180px;
  left: 0%;

}




.car__imgg {

  align-items: center;
  transition: transform .4s;
}


.car__dat {
  color: white;
    background-color: #1f1e1e96;
  width: 100%;
text-align:center;
  font-size: 30px;
  position: absolute;
  bottom: 0.4rem;
}

.car__nam {
  color: rgb(255, 255, 255);
  font-size: 30px;
  margin: 0px;
}







.car__profession {
  display: block;
  font-size: var(--small-font-size);
}

.car__cli {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform .3s;
}

.car__artic:hover .car__imgg {
  transform: scale(1.1);
}







/*=============== CARD INFO ===============*/
.inf {
  border-radius: 1rem;
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background-color: hsla(0, 0%, 8%, 0.397);
  backdrop-filter: blur(12px);
  padding: 4rem 2.5rem 2.5rem;
  color:white;
  clip-path: circle(8px at 88% 9%);
  transition: clip-path .5s ease-in-out;
}

.inf__nam {
  color: white;
  font-size: 30px;
  margin-bottom: 1rem;
}
.rating{
  font-size: 20px;
}
.inf__description {
  font-size: var(--small-font-size);

}

.inf__butt {
  margin-top: 5PX;
  display: inline-flex;
  border: 4px solid white;
  box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%);

  border-radius: 1rem;
  color: white;
  font-size: 20px;
  font-weight: 500;
  transition: box-shadow .4s;
}

.inf__butt:hover {
  box-shadow: 0 0 20px hsl(var(--hue), 90%, 50%);
}

.inf__social {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  column-gap: .5rem;
}


.inf__link:hover {
  transform: translateY(-.25rem);
}

/* Rotate icon */
.car__artic:hover .card__clip {
  transform: rotate(-45deg);
}

/* Clip path animation */
.inf:hover,
.car__cli:hover ~ .inf {
  clip-path: circle(100%);
}



/*=============== CARD hard ===============*/







/*=============== BREAKPOINTS ===============*/

/* For small devices */
@media screen and (max-width: 350px) {
   .car__contain {
    grid-template-columns: repeat(2, 80px);

  }


  .inf__nam {
    
  color: white;
  font-size: 10px;
  margin-bottom: 1rem;
}

  .car__contain {
    grid-template-columns: repeat(2,110px);

  }
  .inf__butt {
    display: inline-flex;
    border:1px solid white;
    box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%);
    padding: 0.1rem 0.1rem;
    color: white;
    font-size:10px;
    font-weight: 500;
    transition: box-shadow .4s;
  }

  .rating{
    font-size:1px;
  }
  

  .car__artic {
    position: relative;
    border-radius: 0.2rem;
    overflow: hidden;
    height:160px;
    left: 0%;
  }

  .inf {
    justify-content: center; 
  }
  

}




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

  .car__contain {
    grid-template-columns: repeat(2, 160px);

  }
  .inf__butt {
    display: inline-flex;
    border:1px solid white;
    box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%);
    padding: 0.2rem 0.2rem;
    border-radius: 1rem;
    color: white;
    font-size:12px;
    font-weight: 500;
    transition: box-shadow .4s;
  }

  .rating{
    font-size:12px;
    color: #222224;
  }
  

  .car__artic {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    height: 230px;
    left: 0%;
  }

  .inf {
    justify-content: center; 
  }
  

}

@media screen and (min-width: 410px) {
  .car__contain {
    grid-template-columns: repeat(2, 190px);
  }
  .car__artic {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    height: 260px;
    left: 0%;
  }


  .inf {
    justify-content: center; 
  }


    .inf__butt {
    display: inline-flex;
    border:1px solid white;
    box-shadow: 0 0 12px hsl(var(--hue), 90%, 50%);
    padding: 0.3rem 0.5rem;
    border-radius: 1rem;
    color: white;
    font-size:12px;
    font-weight: 500;
    transition: box-shadow .4s;
  }

}


/* For medium devices */
@media screen and (min-width: 600px) {
  .car__contain {
    grid-template-columns: repeat(3, 200px);
  }

  .car__artic {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    height: 300px;
    left: 0%;
  }


  .inf {
    justify-content: center; 
  }




}

/* For large devices */
@media screen and (min-width: 1000px) {



  .car {
    display: grid;
    place-content: center;
  }
  .car__contain{
    grid-template-columns: repeat(4, 260px);
  }
  .car__artic {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    height: 300px;
    left: 0%;
  }
  
  .car__imgg {
    border-radius: 1rem;
  }
  .car__dat {
    bottom: 1rem;
  }
  .car__profession {
    font-size: var(--normal-font-size);
  }
  .car__cli {
    top: 1.5rem;
    right: 1.5rem;
  }

  .inf__description, 
  .inf__butt {
    font-size: var(--normal-font-size);
  }
  .inf__description {
    margin-bottom: 1.5rem;
  }
  .inf__social {
    left: 2rem;
    bottom: 2.5rem;
    column-gap: .75rem;
  }                   

}