#header .header-nav.header-nav-stripe nav > ul > li a  {
    position: relative;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        z-index: 10;
        text-transform: uppercase;
        color: #000; 
}


 #slider-container {
        
        overflow: hidden;
        position: relative;
        margin: 20px auto;
 
    }

    #slider-wrapper {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .slider-item {
        min-width: 100%;
        box-sizing: border-box;
        
    }

    .counters{
        display: flex;
        align-items: center;
    }


    .slider-item img {
        border-radius: 40px;
        object-fit: cover;
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
        transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 1 !important;
    }


#header .header-nav.header-nav-stripe nav > ul > li a::before {
    content: '';
          display: block;
          position: absolute;
          border-radius: 2px ;
          height: 7px;
          width: 0;
          bottom: 2px;
          left: 0;
          right: 0;
          margin: 0 auto;
          background-color: #009ac39c;
          border-radius: 5px;
          z-index: -1;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
          -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
          -moz-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
          transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#header .header-nav.header-nav-stripe nav > ul > li a:hover:before{
    visibility: visible;
          opacity: 1;
          width: 100%;
}


.tercih-edilen{
box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
border-radius: 20px;
display: flex;
width: 46%;
padding-left: 10px;
border-bottom: 3px solid #009ac3;
}


@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap");

:root {
/* Colors */
--brand-color: hsl(192.62deg 100% 38.24%);
--black: hsl(0, 0%, 0%);
--white: hsl(0, 0%, 100%);
/* Fonts */
--font-title: "Montserrat", sans-serif;
--font-text: "Lato", sans-serif;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

/* Remove default margin */
body,
h2,
p {
margin: 0;
}

/* GLOBAL STYLES */

h2 {
font-size: 2.25rem;
font-family: var(--font-title);
color: var(--white);
line-height: 1.1;
}

/* p {
font-family: var(--font-text);
font-size: 1rem;
line-height: 1.5;
color: var(--white);
} */

.flow > * + * {
margin-top: var(--flow-space, 1em);
}


/* CARD COMPONENT */
.card {
display: grid;
place-items: center;
width: 80vw;
max-width: 25.875rem;
height: 28.125rem;
overflow: hidden;
border-radius: 10px;
box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
border: 10px blue !important;
}

.card > * {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

.card__background {
object-fit: cover;
max-width: 100%;
height: 100%;
}

.card__content {
--flow-space: 0.9375rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-self: flex-end;
height: 55%;
width: 100%;
padding: 12% 1.25rem 1.875rem;
background: linear-gradient(
180deg,
hsla(0, 0%, 0%, 0) 0%,
hsla(0, 0%, 0%, 0.3) 10%,
hsl(0, 0%, 0%) 100%
);
}

.card__content--container {
--flow-space: 1.25rem;
}

.card__title {
position: relative;
width: fit-content;
width: -moz-fit-content; /* Prefijo necesario para Firefox  */
}

.card__title::after {
content: "";
position: absolute;
height: 0.3125rem;
width: calc(100% + 1.25rem);
bottom: calc((1.25rem - 0.5rem) * -1);
left: -1.25rem;
background-color: var(--brand-color);
}

.card__button {
padding: 0.35em 1.6em;
width: fit-content;
width: -moz-fit-content; /* Prefijo necesario para Firefox  */
font-variant: small-caps;
font-weight: bold;
border-radius: 0.45em;
border: none;
background-color: hsl(192.62deg 100% 38.24%);
font-family: var(--font-title);
font-size: 1.125rem;
color: var(--black);
}

.card__button:focus {
outline: 2px solid black;
outline-offset: -5px;
}

@media (any-hover: hover) and (any-pointer: fine) {
.card__content {
transform: translateY(55%);
transition: transform 500ms ease-out;
transition-delay: 500ms;
}

.card__title::after {
opacity: 0;
transform: scaleX(0);
transition: opacity 1000ms ease-in, transform 500ms ease-out;
transition-delay: 500ms;
transform-origin: right;
}

.card__background {
transition: transform 500ms ease-in;
}

.card__content--container > :not(.card__title),
.card__button {
opacity: 0;
transition: transform 500ms ease-out, opacity 500ms ease-out;
}

.card:hover,
.card:focus-within {
transform: scale(1.05);
transition: transform 500ms ease-in;
}

.card:hover .card__content,
.card:focus-within .card__content {
transform: translateY(0);
transition: transform 500ms ease-in;
}

.card:focus-within .card__content {
transition-duration: 0ms;
}

.card:hover .card__background,
.card:focus-within .card__background {
transform: scale(1.3);
}

.card:hover .card__content--container > :not(.card__title),
.card:hover .card__button,
.card:focus-within .card__content--container > :not(.card__title),
.card:focus-within .card__button {
opacity: 1;
transition: opacity 500ms ease-in;
transition-delay: 800ms;
font-size: 14px;
font-weight: 500;
}

.card:hover .card__title::after,
.card:focus-within .card__title::after {
opacity: 1;
transform: scaleX(1);
transform-origin: left;
transition: opacity 500ms ease-in, transform 500ms ease-in;
transition-delay: 500ms;
}
}


/* ürün kategorisi  kısmı  */
.urun-1{
color: #000;
font-size: 28px;
font-weight: 600;
box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
border-radius: 20px;
width: 16%;
margin-top: 45px;
padding-left: 10px;
padding: 10px;
border-bottom: 3px solid #009ac3;
text-align: center;
}




/* iletişimm bölüm  */

.iltsm-1{
padding: 65px 0px;
border-bottom: 1px solid #00000052;
border-top: 1px solid #00000052;
margin-bottom: 0px;
}


.urundty-mavı{
background: #009ac324; 
padding: 20px; 
border-radius: 20px;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border: 2px solid #009ac3;
}

.urunweight{
font-weight: 600;
}

.detayphoto{
width: 500px; 
 height: 500px;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 20px;
}

.detayphoto-2{
width: 500px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 20px;
height: 400px;
border: 2px solid blue;
}

.aq-su-dty{
margin-bottom: 15px;
 border: 2px solid blue;
   padding: 10px; 
   border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.azot-h2{
color: #009ac3; padding-bottom: 30px; padding-top: 20px;
}

.azot-p{
margin-bottom: 15px;
 border: 2px solid blue;
   padding: 10px; border-radius: 20px; 
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


.slader-1{
border: 2px solid blue;
 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  border-radius: 20px;
}

.eporic-h2{
color: #009ac3;
padding-bottom: 10px;
}

.eporic-p{
padding-bottom: 25px;
padding-bottom: 25px;
}


.urun-border-dty{
margin-bottom: 15px; border: 2px solid blue;  padding: 10px; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.ga-ul-dty{
color: #009ac3; padding-bottom: 30px; padding-top: 20px;

}

.hava-fltre-p{
margin-bottom: 15px; 
border: 2px solid blue;
  padding: 10px; border-radius: 20px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


.dty-h2-mavı{
color: black;
 background: #009ac32e;
  padding: 10px; border-radius: 15px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.grsl-dty{
height: 307px;
  border: 2px solid #009ac3;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 20px;
}

.margın-paddıng{
margin-top: 30px; 
margin-bottom: 30px;
}

.margın-top-150{
margin-top: 150px;
}

.su-tahliye-weight{
font-weight: 700;
}