:root {
    --blue: #2095f2;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #f44236;
    --orange: #fd7e14;
    --yellow: #ff9700;
    --green: #37bd74;
    --teal: #20c997;
    --cyan: #11cdef;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #ff6f61;
    --secondary: #fc9e21;
    --success: #37bd74;
    --info: #11cdef;
    --warning: #dc793e;
    --danger: #f44236;
    --light: #edf4f8;
    --dark: #181715;
    --alternate: #007cb7;
    --contrast: #fff;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    
}

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

html {
    font-family: Verdana, sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block
}

section{
    overflow: hidden;
    position: relative;
}


h1,
h2,
h3,
h4,
h5,
h6{
    font-family: 'Futurist Fixed-width', sans-serif;
}


nav.navbar{
    font-family: 'Futurist Fixed-width', sans-serif;
}

a.navbar-brand{
    color: var(--dark);
    font-weight: 600;
}

a.nav-link{
    color: var(--dark);
    font-weight: 600;
}

.left-title {
    background-color: #fae6ba;
    display: flex;
    width: 100%;
    height: 600px;
}
.left-title p{
    font-size: 50px;
    padding: 0px 25px;
}

.right-img img{
    width: 100%;
}

.aciklama{
    background-color: var(--contrast);
    position: absolute;
    top: 200px;
    padding: 40px;
    box-shadow: var(--contrast);
}

.urun-img img {
    width: 100%;
}

.pembe{
    width: 100%;
    height: 200px;
    background-color: #ee7f85;
    position: relative;
    top: 120px;
    z-index: -1;
}

.urun-liste{
   margin-top: 20px;
}

.page-baslik h1{
   position: relative;
   
}
.fab-resim img{
    width: 100%;
}

.turuncu{
    background-color: #f71c52;
    width: 50%;
    left: 0;
}



ul.iletisim li{
    list-style: none;
}

.footer{
    background-color: #faadaf;
}
.sol-img img{
    width: 100%;
}
.sag-img img{
    width: 100%;
}



.baslikk{
    margin: 100px 0px;
}


@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 375px) {
	  
	  .left-title p {
		font-size: 25px;
		padding: 0px 10px;
	  }
  .aciklama {    
	top: 120px;
    padding: 5px;
	}
	.aciklama-par {
    font-size: 15px;
}
	  
  }


@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 425px) {
    .aciklama{
        padding: 10px;
        left: 40px;
        top: 111px;
        width: 82%;
    }
      .aciklama-par{
          font-size: 13px;
      }
      .left-title{
          height: 400px;
          margin-bottom: 25px;
      }
      .left-title p {
          font-size: 25px;
          padding: 0px 25px;
      }
      .aciklama-baslik h3{
          font-size: 15px;
          font-weight: 600;
      }
      p.effect-underline{
          display: block;
          position: relative;
          font-size: 20px;
      }
      p.effect-underline::after{
        content: '';
        position: absolute;
        bottom: 0;
        width: 30%;
        left: 35%;
        
        height: 0.3em;
        background-color: hotpink;
        opacity: 0;
        z-index: -1;
        transition: opacity 300ms, transform 300ms;
      }
      p.effect-underline:hover::after,
      p.effect-underline:focus::after{
        opacity: 1;
        transform: translate3d(0, -0.2em, 0);
      }
   

      .iletisim-par {
        position: relative;
        left: -31px;
    }

    a.und {
        display: block;
        position: relative;
        padding: 0.2em 0;
    }
    
    /* Fade in */
    a.und::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 16px;
        width: 15%;
        height: 0.5em;
        background-color: hotpink;
        opacity: 0;
        transition: opacity 300ms, transform 300ms;
    }
    
    a.und:hover::before,
    a.und:focus::before {
        opacity: 1;
        transform: translate3d(0, -1.2em, 0);
    }
    a.und{
        text-decoration: none;
        color: var(--gray-dark);
    }

  }


  @media only screen 
  and (min-device-width: 576px) 
  and (max-device-width: 768px)  { 
    .aciklama{
        padding: 10px;
        left: 100px;
        top: 111px;
        width: 63%;
    }
      .aciklama-par{
          font-size: 13px;
      }
      .left-title{
          height: 400px;
          margin-bottom: 25px;
      }
      .left-title p {
          font-size: 25px;
          padding: 0px 25px;
      }
      .aciklama-baslik h3{
          font-size: 15px;
          font-weight: 600;
      }
      p.effect-underline{
          display: block;
          position: relative;
          font-size: 20px;
      }
      p.effect-underline::after{
        content: '';
        position: absolute;
        bottom: 0;
        width: 30%;
        left: 35%;
        
        height: 0.3em;
        background-color: hotpink;
        opacity: 0;
        z-index: -1;
        transition: opacity 300ms, transform 300ms;
      }
      p.effect-underline:hover::after,
      p.effect-underline:focus::after{
        opacity: 1;
        transform: translate3d(0, -0.2em, 0);
      }
   
      a.und::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 16px;
        width: 15%;
        height: 0.5em;
        background-color: hotpink;
        opacity: 0;
        transition: opacity 300ms, transform 300ms;
    }
    
    a.und:hover::before,
    a.und:focus::before {
        opacity: 1;
        transform: translate3d(0, -1.2em, 0);
    }
    a.und{
        text-decoration: none;
        color: var(--gray-dark);
    }
}


@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 992px)  { 

  .aciklama{
      padding: 10px;
      left: 70px;
      top: 70px;
      width: 55%;
  }
    .aciklama-par{
        font-size: 13px;
    }
    .left-title{
        height: 310px;
    }
    .left-title p {
        font-size: 20px;
        padding: 0px 25px;
    }
    .aciklama-baslik h3{
        font-size: 15px;
        font-weight: 600;
    }
    p.effect-underline{
        display: block;
        position: relative;
        font-size: 20px;
    }
    p.effect-underline::after{
      content: '';
      position: absolute;
      bottom: 0;
      width: 30%;
      left: 35%;
      
      height: 0.3em;
      background-color: hotpink;
      opacity: 0;
      z-index: -1;
      transition: opacity 300ms, transform 300ms;
    }
    p.effect-underline:hover::after,
    p.effect-underline:focus::after{
      opacity: 1;
      transform: translate3d(0, -0.2em, 0);
    }
  
    a.und::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 16px;
        width: 15%;
        height: 0.5em;
        background-color: hotpink;
        opacity: 0;
        transition: opacity 300ms, transform 300ms;
    }
    
    a.und:hover::before,
    a.und:focus::before {
        opacity: 1;
        transform: translate3d(0, -1.5em, 0);
    }
    a.und{
        text-decoration: none;
        color: var(--gray-dark);
    }
}




@media only screen 
  and (min-device-width: 992px) 
  and (max-device-width: 1200px)  { 

    .aciklama{
        left: 100px;
        padding: 10px;
        top: 130px;
    }
	.aciklama-par{
		font-size:14px;
	}
    .left-title{
        height: 410px;
    }
    .left-title p{
        font-size: 35px;
    }
    p.effect-underline{
        display: block;
        position: relative;
        font-size: 25px;
    }
    p.effect-underline::after{
      content: '';
      position: absolute;
      bottom: 0;
      width: 30%;
      left: 35%;
      
      height: 0.3em;
      background-color: hotpink;
      opacity: 0;
      z-index: -1;
      transition: opacity 300ms, transform 300ms;
    }
    p.effect-underline:hover::after,
    p.effect-underline:focus::after{
      opacity: 1;
      transform: translate3d(0, -0.2em, 0);
    }
    .page-baslik h1{
        position: relative;
        margin-bottom: 40px;
        
     }
   
    a.und::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 16px;
        width: 15%;
        height: 0.5em;
        background-color: hotpink;
        z-index: 1;
        opacity: 0;
        transition: opacity 300ms, transform 300ms;
    }
    
    a.und:hover::before,
    a.und:focus::before {
        opacity: 1;
        transform: translate3d(0, -1.5em, 0);
    }
    a.und{
        text-decoration: none;
        color: var(--gray-dark);
    }

  }

  .urunler-img img {
    width: 100%;
    }
    .swiper-wrapper{
        height: 40%!important;
    }
  @media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1400px)  { 
nav.navbar{
    font-family: 'Futurist Fixed-width', sans-serif;
}

a.navbar-brand{
    color: var(--dark);
    font-weight: 600;
}

a.nav-link{
    color: var(--dark);
    font-weight: 600;
}

.left-title {
    background-color: var(--secondary);
    display: flex;
    width: 100%;
    height: 600px;
}
.left-title p{
    font-size: 45px;
    padding: 0px 25px;
}

.right-img img{
    width: 100%;
}

.aciklama{
    background-color: var(--contrast);
    position: absolute;
    top: 225px;
    padding: 35px;
    width: 560px;
    left: 200px;
    box-shadow: var(--contrast);
}

.urun-img img {
    width: 100%;
}


.pembe{
    width: 100%;
    height: 200px;
    background-color: var(--pink);
    position: relative;
    top: 120px;
    z-index: -1;
}

.urun-liste{
   margin-top: 20px;
}

.page-baslik h1{
   position: relative;
   margin-bottom: 50px;
   
}
.fab-resim img{
    width: 100%;
}

.turuncu{
    background-color: #f71c52;
    width: 50%;
    left: 0;
}

.urunler-img.pant img {
width: 100%;
}

ul.iletisim li{
    list-style: none;
}

.footer{
    background-color: var(--pink);
    margin-top: 150px;
}
.sol-img img{
    width: 100%;
}
.sag-img img{
    width: 100%;
}



.baslikk{
    margin: 100px 0px;
}



p.effect-underline{
    display: block;
    position: relative;
    font-size: 30px;
}
p.effect-underline::after{
  content: '';
  position: absolute;
  bottom: 0;
  width: 30%;
  left: 35%;
  
  height: 0.3em;
  background-color: hotpink;
  opacity: 0;
  z-index: -1;
  transition: opacity 300ms, transform 300ms;
}
p.effect-underline:hover::after,
p.effect-underline:focus::after{
  opacity: 1;
  transform: translate3d(0, -0.2em, 0);
}
a.und::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 16px;
    width: 15%;
    height: 0.5em;
    background-color: hotpink;
    opacity: 0;
    transition: opacity 300ms, transform 300ms;
}

a.und:hover::before,
a.und:focus::before {
    opacity: 1;
    transform: translate3d(0, -1.5em, 0);
}
a.und{
    text-decoration: none;
    color: var(--gray-dark);
}

}

@media only screen 
and (min-device-width: 1920px) {
	.aciklama {left: 500px;}
}

@media only screen 
and (min-device-width: 1400px)
and  (max-device-width: 1920px){
  .aciklama{
      background-color: var(--contrast);
      position: absolute;
      top: 200px;
      padding: 49px;
      width: 600;
      left: 230px;
      box-shadow: var(--contrast);
  }

  .aciklama-baslik{
      position: relative;
      left: 50px;
  }
  p.effect-underline{
      display: block;
      position: relative;
      font-size: 30px;
  }
  p.effect-underline::after{
    content: '';
	position: absolute;
	bottom: 0;
	width: 30%;
    left: 35%;
    
	height: 0.3em;
	background-color: hotpink;
	opacity: 0;
    z-index: -1;
	transition: opacity 300ms, transform 300ms;
  }
  p.effect-underline:hover::after,
  p.effect-underline:focus::after{
    opacity: 1;
	transform: translate3d(0, -0.2em, 0);
  }

  a.und::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 16px;
    width: 15%;
    height: 0.5em;
    background-color: hotpink;
    z-index: 1;
    opacity: 0;
    transition: opacity 300ms, transform 300ms;
}

a.und:hover::before,
a.und:focus::before {
    opacity: 1;
    transform: translate3d(0, -4em, 0);
}
a.und{
    text-decoration: none;
    color: var(--gray-dark);
}
}


 .fa-pinterest-square,
 .fa-instagram-square,
 .fa-whatsapp-square{

        font-size: 28px;
}

.fa-pinterest-square{
    color: #6e2909;
}

.fa-instagram-square{
    color: #ee7f85;
}
.fa-whatsapp-square{
    color: #faadaf;
}
.fab-resim.position-relative {
    box-shadow: -50px -50px #e79a4a;
}