/*font-family*/
/* ABSINTHE-AGED.TTF */
@font-face {
  font-family: "Absinthe Aged";
  src: url("/Fonts/ABSINTHE-AGED.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* BrandonPrinted-One.ttf */
@font-face {
  font-family: "Brandon Printed";
  src: url("/Fonts/BrandonPrinted-One.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* CareType.otf */
@font-face {
  font-family: "CareType";
  src: url("/Fonts/CareType.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/* NimbusSanLOT Ailesi */
@font-face {
  font-family: "Nimbus San LOT";
  src: url("/Fonts/NimbusSanLOT-Bol.otf") format("opentype");
  font-weight: 700;
  /* Bold */
  font-style: normal;
}

@font-face {
  font-family: "Nimbus San LOT";
  src: url("/Fonts/NimbusSanLOT-Reg.otf") format("opentype");
  font-weight: 400;
  /* Regular */
  font-style: normal;
}

/* NimbusSanConLOT Ailesi */
@font-face {
  font-family: "Nimbus San Con LOT";
  src: url("/Fonts/NimbusSanConLOT-Bol.otf") format("opentype");
  font-weight: 700;
  /* Bold */
  font-style: normal;
}

@font-face {
  font-family: "Nimbus San Con LOT";
  src: url("/Fonts/NimbusSanConLOT-Reg.otf") format("opentype");
  font-weight: 400;
  /* Regular */
  font-style: normal;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}
body {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content-wrapper {
  flex: 1 0 auto;
}
.navbar{
  background-color: white;
  transition: background-color 0.3s ease-in-out;
}
.navbar.color-change{
  background-color: rgba(255,255,255, 0.9);
}
.navbar .nav-link{
  font-size: 20px;
  font-family: "Brandon Printed", sans-serif;
  color: black;
}
.navbar .nav-link:hover{
  color: #3f3c3c;
}
.navbar .line{
  display: block;
  width: 0px;
  height: 2px;
  background-color: black;
  margin: 0 auto;
  transition: all 0.3s ease-in-out;
}
.nav-item:hover .line{
  width: 100%;
  background-color: #e1251b;
}
.hero {
  background-image: url("/content/images/hero-background.png");
  background-size: cover;
  background-position: center;
  padding: 5rem 0;
}
.banner{
  height: 74vh;
  min-height: 40vh;
  margin-top: 80px;
  position: relative;
}
.banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0 , 0.2);
  z-index: 2;
}
.hero-1 h1 {
  font-size: clamp(4.25rem, 2.4569rem + 8.9655vw, 7.5rem);
  line-height: clamp(4.63rem, 3.39rem + 3.3vw, 5.8rem);
  font-family: "Brandon Printed", sans-serif;
  transform: rotate(-6deg);
  display: inline-flex;
}
.hero-1 .title h1 {
  position: relative;
}
.hero-1 .title img {
  position: absolute;
  top: -50px;
  right: 50px;
  width: 40%;
}
.hero-2 .col-md-4 img:hover {
  animation: hero-2-img 1s ease-in-out 1;
  z-index: 2;
}
.hero h2 {
  font-size: clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem);
  font-size: clamp(2.25rem, 1.19rem + 2.83vw, 3rem);
  font-family: "Brandon Printed", sans-serif;
}
.hero-2 {
  position: relative;
  z-index: 2;
}
.hero-2 .products img {
  width: 100%;
  max-width: 248px;
  cursor: pointer;
}
.hero-2 .text-end {
  margin-top: -22px;
}
.section-1 {
  background-image: url(/content/images/kitchen-2.jpg);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 18rem 0 0rem;
}
.section-1 .yellow-card {
  background-image: url(/content/images/yellow-background.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 14% 10%;
  position: relative;
  margin-bottom: -60px;
}
.section-1 .yellow-card p {
  font-size: 22px;
  line-height: 46px;

}
.products-packet {
  z-index: 2;
  position: relative;
}

.section-2 {
  padding: 5% 0;
}

.pink-card {
  background-image: url(/content/images/backgorund-pink-2.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 9% 12%;
  position: relative;
}

.pink-card h1 {
  font-size: 30px;
  font-family: "Brandon Printed", sans-serif;
  margin-bottom: 20px;
  transform: rotate(-6deg);
}

.pink-card span {
  font-size: 68px;
}

.pink-card span:last-child {
  font-size: 48px;
}

.pink-card p {
  font-size: 18px;
  line-height: 32px;
  font-family: "Nimbus San LOT", sans-serif;
}

.section-3 {
  background-image: url(/content/images/kadin-el.png);
  background-color: #e1251b;
  background-position: bottom;
  background-size: 48%;
  background-repeat: no-repeat;
  padding: 22% 0;
  margin-top: -16%;
  position: relative;
  z-index: -1;
}

.section-3 h1 {
  z-index: 2;
  position: relative;
  color: white;
  font-size: clamp(2.625rem, 2.0733rem + 2.7586vw, 3.625rem);
  font-family: "Brandon Printed", sans-serif;
  transform: rotate(8deg);
  margin-top: -100px;

}

.section-4 .text h1 {
  font-size: clamp(3.625rem, 2.9353rem + 3.4483vw, 4.875rem);
  line-height: 72px;
  font-family: "Brandon Printed", sans-serif;
  transform: rotate(-6deg);
  color: #8C4898;
  display: inline-flex;
  position: relative;
}

.section-4 h1 img {
  position: absolute;
  top: -14%;
  right: -22%;
  width: 60%;
}

.healthy {
  margin-bottom: 14rem;
  position: relative;
}

.circular-graphic-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
}

.product-presentation-wrapper {
  height: 700px;
}

.product-slider {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 2.5% 0;
}

.swiper-slide img {
  display: block;
  width: 98%;
  height: 100%;
  object-fit: contain;
  transform: rotate(6deg);
}

.swiper-pagination {
  position: absolute;
  top: unset !important;
  bottom: -80px !important;
  left: 50% !important;
  right: unset !important;
  transform: translateX(-50%) rotate(270deg) !important;
  z-index: 2;
}

.swiper-pagination-bullet {
  padding: 4px;
}

.swiper-pagination-bullet-active {
  background-color: #e2574c !important;
  height: 34px !important;
  border-radius: 8px !important;
}

.text-bg {
  background-image: url(/content/images/text-font-purple.png);
  background-position: left;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 1% 6% 1% 6%;
  max-width: 692px;
  max-height: 800px;
  font-family: "Brandon Printed", sans-serif;
  color: white;
  font-size: clamp(1.50rem, 1.41rem + 0.91vw, 2.4rem);
}

.text p:nth-last-child(-n+2) {
  font-family: "Nimbus San LOT", sans-serif;
}

.text-green {
  background-image: url(/content/images/text-font-green.png);
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 2rem 4%;
  max-width: 450px;
  max-height: 800px;
  font-family: "Brandon Printed", sans-serif;
  color: white;
  font-size: clamp(1.5rem, 0.9483rem + 2.7586vw, 2.5rem);
}

.text-green-radius {
  background-image: url(/content/images/text-radius-green-bg.png);
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
  padding: 16% 7%;
  font-family: "Brandon Printed", sans-serif;
  color: white;
  font-size: 24px;
  margin-top: -50px;
}

.section-6 {
  background-image: url(/content/images/red-background-dot.png);
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 2% 0;
}

.section-6 h1 {
  font-size: clamp(2.375rem, 2.0302rem + 1.7241vw, 3rem);
  font-family: "Brandon Printed", sans-serif;
  color: white;
}

.section-6 p {
  font-size: 18px;
  line-height: 32px;
  font-family: "Nimbus San LOT", sans-serif;
  color: white;
}

.section-7 {
  background-image: url(/content/images/section-7-background.jpg);
  background-position: center;
  background-size: cover;
  padding: 6% 0 18% 0;
}

.section-7 h1 {
  font-size: clamp(2.625rem, 2.0733rem + 2.7586vw, 3.625rem);
  font-family: "Brandon Printed", sans-serif;
  color: white;
  transform: rotate(6deg);
}

.section-8 {
  padding: 3% 0 3.5% 0;
}

.card-grid {
  padding-top: 3.5rem;
}

.card-grid img {
  transition: all 0.4s ease-in-out;
  width: 100%;
  max-width: 240px;
}

.card-grid img:hover {
  transform: scale(1.1);
}

.section-9 {
  padding: 0 0 5% 0;
}

.section-9 .black-text {
  background-image: url(/content/images/black-text-background.png);
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 1.8rem 8%;
  max-width: 437px;
  max-height: 800px;
  font-family: "Brandon Printed", sans-serif;
  color: white;
  font-size: clamp(1.5rem, 0.9483rem + 2.7586vw, 2.5rem);
}

.section-9 a {
  display: block;
  position: relative;
  padding-top: 1.5rem;
  transition: all 0.2s ease-in-out;
}

.section-9 a:hover {
  filter: contrast(1.2) brightness(1.4);
}

.section-9 a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(/content/images/video-play.svg);
  width: 56px;
  height: 56px;
  background-repeat: no-repeat;
  z-index: 2;
  transition: all 0.2s ease-in-out;
}

.section-9 a:hover::after {
  transform: translate(-50%, -50%) scale(1.1);
}
.about-us{
  padding: 4% 0;
}
.about-us-text h1{
  font-family: "Brandon Printed", sans-serif;
  font-size: 40px;
}
.about-us-text{
font-family: "Nimbus San LOT", sans-serif;
font-size: 18px;
line-height: 24px;
}

footer {
  background-color: #e1251b;
  flex-shrink: 0;
  width: 100%;
}
.social-left a,
.youtube-content a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/*responsive*/
@media screen and (min-width:1199px) and (max-width: 1385px) {
  .text-bg {
    font-size: 30px;
  }
}

@media screen and (max-width:1024px) {
  .section-1 .container {
    margin-bottom: 0px;
  }

  .hero-2 .text-end {
    margin-top: 10px;
  }

  .healthy {
    margin-bottom: 7rem;
  }

  .product-presentation-wrapper {
    height: 400px;
  }

  .product-slider {
    width: 300px;
  }
}

@media screen and (min-width: 1024px) {
  .bulgur-left img {
    width: 140% !important;
  }
}
@media screen and (max-width:991px){
  .navbar .line{
    margin-left: 0;
    width: 0px;
  }
  .nav-item:hover .line{
    width: 44%;
  }
  .banner{
    margin-top: 88px;
    height: 40vh;
  }
}

@media screen and (max-width: 768px) {
  .bulgur-left {
    margin-bottom: -80px;
  }

  .section-3 {
    margin-top: -10%;
  }

  .healthy-container .info-text-img {
    max-width: 100%;
    margin-bottom: 10px;
  }

  .product-presentation-wrapper {
    height: 340px;
  }

  .text-green-radius {
    padding: 5% 3% !important;
  }
  .about-us {
    padding: 7% 0 18% 0;
}
}

@media screen and (max-width: 430px) {
  .section-3 {
    margin-top: -5%;
  }

  .bulgur-left {
    margin-bottom: -44px;
  }

  .section-3 h1 {
    margin-top: 0px;
  }

  .section-4 .text h1 {
    width: 100% !important;
  }

  .section-4 h1 img {
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
  }

  .circular-graphic-bg {
    display: none;
  }
}

/*animasyon*/
.hidden-animation{
  opacity: 0;
}
.animate-left { animation: animate-left 0.8s ease forwards; }
.animate-right { animation: animate-right 0.8s ease forwards; }
.animate-top { animation: animate-top 0.8s ease forwards; }
.animate-bottom { animation: animate-bottom 0.8s ease forwards;}
.animate-fade { animation : animate-fade 0.7s ease forwards;}


@keyframes hero-2-img {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(8deg) scale(1.1);
  }

  75% {
    transform: rotate(-8deg) scale(1.05);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes animate-left {
  0% { transform: translateX(-100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Sağ -> Sol Animasyonu */
@keyframes animate-right {
  0% { transform: translateX(100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Yukarıdan Aşağı */
@keyframes animate-top {
  0% { transform: translateY(-100px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes animate-bottom {
  0%{ transform: translateY(100px); opacity: 0;} 
  100%{ transform: translateY(0); opacity: 1;}
}
@keyframes animate-fade {
  0%{ opacity: 0;}
  100%{ opacity: 1;}
}

/* #anima1 {
  display: flex;
  justify-content: center;
  width: 200px;
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
}

#anima1 span {
  position: relative;
  bottom: -120px;
  margin: 0 2px 44px;
  min-width: 12px;
  height: 120px;
  background: whitesmoke;
  border-radius: 50%;
  animation: animate 3s linear infinite;
  opacity: 0;
  filter: blur(14px);
  animation-delay: calc(var(--i) * 1s);
}

@keyframes animate {
  0% {
    transform: translateY(0) scaleX(1);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  50% {
    transform: translateY(-75px) scaleX(5);
  }

  95% {
    opacity: 0;
  }

  100% {
    transform: translateY(-150px) scaleX(10);
  }
} */

.smoke-container {
  width: 200px; 
  height: 350px; 
  position: absolute; 
  top: -74%;
  left: 50%;
  transform: translateX(-50%);
}

.smoke-particle {
  position: absolute;
  bottom: 0; 
  left: 50%; 
  width: 60px; 
  opacity: 0; 
  transform-origin: bottom center; 
  animation-name: smokeAnimation;
  animation-timing-function: linear; 
  animation-iteration-count: infinite; 
  will-change: transform, opacity; 
}

@keyframes smokeAnimation {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.2); 
  }
  20% {
    opacity: 0.7; 
    transform: translate(-55%, -30px) scale(0.6); 
  }
  50% {
    opacity: 0.6;
    transform: translate(-45%, -120px) scale(0.9);
  }
  80% {
    opacity: 0.2;
    transform: translate(-60%, -250px) scale(1.3); 
  }
  100% {
    opacity: 0; 
    transform: translate(-50%, -330px) scale(1.6); 
  }
}

.smoke-particle.p1 {
  width: 50px;
  animation-duration: 7s; 
  animation-delay: 0s;    
  left: 48%;
}

.smoke-particle.p2 {
  width: 70px;
  animation-duration: 8s;
  animation-delay: 1.5s; 
  left: 52%; 
}

.smoke-particle.p3 {
  width: 45px;
  animation-duration: 6s;
  animation-delay: 3s;
  left: 45%;
}

.smoke-particle.p4 {
  width: 65px;
  animation-duration: 7.5s;
  animation-delay: 4s;
  left: 55%;
}