* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

a {
    text-decoration: none;
}
ol, ul{
    margin-bottom: 0px !important;
}
li {
    list-style: none;
}
#temizle{clear: both;}
img {
   max-width: 100%;
}

header{
    height: 115px;
}
.wrapper {
    max-width: 1200px;
    margin: auto;
}

.logo{
    z-index: 99999;
}
.header-top{
    position: absolute;
    height: 40px;
    background-color: #000;
    width: 100%;
    z-index: -1;
}

header .wrapper{
    display: flex;
    justify-content: space-between;
}

.header-right{
    display: flex;
    flex-direction: column;
    align-items: end;
    
}

.header-right-top{
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    height: 40px;
}
.header-right-top a{
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}
.header-right-top a i{
    padding-right: 10px;
}

.header-right-down{
    display: flex;
    gap: 30px;
    height: 75px;
   align-items: center;
}

nav ul{
    display: flex;
}
nav ul li a{
    color: #000;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 20px  ;
}
nav ul li a:hover{
    background: #be1818;
    color: #fff;
}
.contact{
    position: relative;
    width: 200px;
    text-decoration: none;
    font-weight: 400;
    text-align: center;
    height: 45px !important;
    z-index: 1000;
    font-size: 16px;
    background: #be1818;
    color: #ffff;
    line-height: 45px;
    display: inline-block;
    text-shadow: 0 0 2px rgb(0 0 0 / 36%);
    border: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgb(0 0 0 / 0%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    border-radius: 10px;
}
.contact:before {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 10px;
    top: 0;
    border: 1px solid #be1818       ;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    color: #fff !important;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.contact:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    color: #fff;
}

.mid-icons .wrapper{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 999;
    margin-top: -55px;
}
.icons{
  
display: flex;
width: 360px;
align-items: center;
height: 100px;

}

.icon-img{
    width: 150px;
    background-color: #be1818;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-img img {
    width: 50px;
    height: 50px;
}

.icon-desc{
    padding-left: 10px;
    background-color: #fff;
    height: 100px;
}
.icon-desc h4{
    font-weight: 600;
    font-size: 16px;
    color: #000;
}
.icon-desc p{
    font-weight: 400;
    font-size: 12px;
    color: #6b7281;
}

.mid-icons{
    background:#f3f4f8;
}


.about{
    background: #f3f4f8;
    padding: 50px;
}
.about .wrapper{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.about-left{
    width: 49%;
    padding-top: 40px;

}

.about-title-little{
    font-size: 12px;
    font-weight: 300;
    color: #be1818;
    
}
.about-title{
    font-size: 24px;
    font-weight: 500;
    color: #000;
    margin-bottom: 20px;
}
.about-left p{
    font-size: 16px;
    font-weight: 500;
    color: #6b7281;
}
.about-right{
    width: 49%;

}


.services{
    background:url(/img/urun-bg.jpg)center no-repeat;
    height: 500px;
}
.blog{
    margin-bottom: 80px;
}

.follow{background: #dcdcdc; height: 100px; }
.follow .wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    flex-wrap: wrap;
}
.follow-title a{
    color: #000;
}


footer{ height:400px; width:100%; margin:0px auto; background-color: #000; padding:40px 0px 15px 0px; z-index:2;}
footer .bir{ position:relative; float:left; width:22%; margin-right:2%; height:auto; display:block; text-align:center; }

footer .iki{ position:relative; float:left; width:22%; height:auto;margin-right:2%;  display:block; }
footer .uc{ position:relative; float:left; width:22%; height:auto; display:block; }
footer .dort{ position:relative; float:right; width:25%; height:auto; display:block; text-align:left; }
footer .bes{ position:relative; float:left; width:75%; height:auto; line-height:50px; display:block; text-align:left;  }
footer .alti{ position:relative; float:left; width:25%; height:auto; display:block; text-align:right;  }
footer .link{ position:relative; float:left; width:100%; height:auto; display:block; font-family: 'Poppins', sans-serif;  color:#fff; font-size:14px; line-height:30px; font-weight:400; transition:all 0.2s ease-in;  }
footer .link:hover{color:#be1818}
footer .baslik1{ position:relative; width:auto; height:auto; display:inline-block; font-family: 'Poppins', sans-serif;   font-size:24px; color:#fff; font-weight:600; line-height:40px; border-bottom:3px solid #fff; padding-bottom:10px; margin-bottom:20px; text-align:right; }
footer .sosyal{ width:auto; height:auto; margin-left:5px; display:inline-block; transition:all 1s ease-in; }
footer .sosyal:hover{ transform: rotate(-360deg);  }
footer .copy{ position:relative; margin:0 auto; width:60%; height:auto; display:block; font-family: 'Poppins', sans-serif;   font-size:14px; color:#000; line-height:20px; text-align:center; }
.footer-yazi{ font-family: 'Poppins', sans-serif;  color:#000; font-size:14px; line-height:24px; font-weight:500; }
footer .line{ width:100%; height:1px; background:#000; position:relative; display:block; margin:20px auto;}
footer .phone-alan{position:relative; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%;}
footer .phone{position:relative; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color:  transparent; color: #fff; width: 40px; height: 40px; line-height: 34px; text-align: center; border-radius: 5px; transition:all 0.2s ease-in; float: left;}
footer .phone{max-width: 100%; border-style: dashed;border-width: 2px;border-color: #fff;}
footer .phone-alan:hover .phone{background: #be1818;}
footer .phone-alan p{padding-left: 55px; padding-top:6px; font-size: 14px; font-weight:300; cursor: pointer;}


.backpages{
    margin: 50px;
}
.backpages .wrapper{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
}

.backpages-left{
    background: #f2f2f2;
    display: flex;
    flex-direction: column;
   
    width: 24%;
}
.backpages-left a{
    color: #000;
    font-size: 16px;
    padding: 15px;
    transition: all 0.5s ease;

}
.backpages-left a:hover{
    padding-left: 20px;
}

.backpages-right{
    background: #fff;
    min-height: 400px;
    width: 75%;
    padding: 20px;
    font-size: 16px;
    color: #000;
}

.back-product{
    width: 32%;
    height: 220px;
    background: #dcdcdc;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.back-product img{
    height: 150px;
    object-fit: cover;
    width: 100%;
}
.right-products{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap:10px
}
.product-desc{margin-bottom: 20px; color: #fff;}
.product-desc a{color: #000;}

.back-product:hover .product-desc a{
    color: #be1818;
}
.style1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #000;
    background: #f4f4f4;
    width: 100%;
    height: 70px;
    line-height: 70px;
    padding-left: 15px;
    margin-bottom: 10px;
    border: 0px;
    box-sizing: border-box;
    border: 1px solid #f0f0f0;
    outline: none;
}

.style2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #000;
    background: #fff;
    width: 100%;
    height: 152px;
    line-height: 25px;
    padding-left: 15px;
    margin-bottom: 1px;
    border: 0px;
    box-sizing: border-box;
    border: 1px solid #f0f0f0;
    outline: none;
}

.buton-form {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: #fff;
    background: #8d5ba1;
    width: auto;
    height: 50px;
    line-height: 50px;
    padding: 0px 30px;
    border: 0px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
}

    .buton-form:hover {
        background: #000;
    }
#wpfixed {
    position: fixed;
    right: -175px;
    bottom: 100px;
    width: 250px;
    background: #07d362;
    display: block;
    vertical-align: top;
    padding: 15px;
    border-radius: 50px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    transition: all 0.4s ease-in;
    z-index: 999999999;
}

    #wpfixed i {
        font-size: 38px;
        color: rgba(255,255,255,1.00);
        position: relative;
        display: block;
        float: left;
        padding-right: 0px;
        padding-left: 15px;
    }

    #wpfixed:hover {
        right: 0px;
    }

#insfixed {
    position: fixed;
    right: -175px;
    bottom: 200px;
    width: 250px;
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    display: block;
    vertical-align: top;
    padding: 15px;
    border-radius: 50px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    transition: all 0.4s ease-in;
    z-index: 9999999;
}

    #insfixed i {
        font-size: 38px;
        color: rgba(255,255,255,1.00);
        position: relative;
        display: block;
        float: left;
        padding-right: 0px;
        padding-left: 15px;
    }

    #insfixed:hover {
        right: 0px;
    }
/*  Mobil Menü */

#hamburger{position: absolute;display: block;top: 10px;left: 12px;}

 #hamburger svg {
    fill: #000;
    width: 40px;
    height: 40px;
  }
  
  #mmenu {
    font-family: 'Open Sans', sans-serif;
    display: block;
    height: 110vh;
    left: -300px;
    background-color: #000;
    color: #fff;
    position: fixed;
    top: 0;
    z-index: 999999 !important;
    width: 300px;
    -webkit-transition: all 0.122s ease-in-out;
    transition: all 0.122s ease-in-out;
  }
  
  #mmenu > ul {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    margin: 0;
    padding: 0;
  }
  
  #mmenu > ul > li {
    height: auto;
    display: block;
    width: 100%;
    margin-top: 5px;
  }
  
  #mmenu > ul > li a {
    height: 42px;
    font-size: 17px;
    text-decoration: none;
    color: #fff;
   font-family: 'Open Sans', sans-serif;
    display: block;
    line-height: 42px;
    font-weight: 500;
  }
  
  #mmenu > ul > li > a {
    padding-left: 15px;
  }
  
  #mmenu > ul > li:hover ul {
    max-height: 4200px;
    visibility: visible;
    opacity: 1;
  }
  
  #mmenu > ul > li > ul {
    max-height: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.122s ease-in-out;
    transition: all 0.122s ease-in-out;
    list-style: none;
    padding-left: 0px;
    margin: 0;
  }
  
  #mmenu > ul > li > ul a {
    border: 1px solid #eee;
    border-left: 0;
    border-right: 0;
    padding-left: 20px;
  }
  
  #closeButton {
    padding-left: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 18px;
    border-bottom: 1px solid #fff;
    cursor: pointer;
  }
  
  .hidden {
    opacity: 0;
    visibility: hidden;
    z-index: -9999;
  }
  
  #overlay {
    content: "";
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
  }
  /* Mobil Menü Bitiş */


#kapa{display: block;}
#acil{ display:none; }


@media only screen and (max-width: 1000px) { 
    #acil{ display:block; }
    #kapa{ display:none !important; visibility:hidden;}
    header{height: 60px;}
    .header-right{
        display: none;
    }
    .header-top{
        display: none;
    }
header .wrapper{
justify-content : flex-end;
}
    .logo img{
        height: 120px;
    }
    .mid-icons .wrapper{
        gap: 30px;
        justify-content: center;
        margin-top: 0px;
    }
    .follow{
        margin-top: 30px;
    }
    footer{ height:auto; width:100%; margin:0px auto; background-color: #000; padding:80px 0px 80px 0px; z-index:2;}
footer .bir{ position:relative; float:left; width:100%; height:auto; display:block; text-align:center; border-bottom:1px solid #666; margin-bottom:30px; }
footer .bir img{width: 100px !important;}
footer .iki{ display: none;}
footer .uc{ display: none; }
footer .dort{ position:relative; float:left; width:100%; height:auto; display:block; text-align: center;  }
footer .bes{ position:relative; float:left; width:100%; height:auto; line-height:50px; display:block; text-align:center;  }
footer .alti{ position:relative; float:left; width:100%; height:auto; display:block; text-align:center;  }
footer .sosyal{ width:auto; height:auto; margin-left:5px;display:inline-block; transition:all 1s ease-in; }
.backpages-left{display: none;}
.backpages-right{width: 100%;}
}
@media only screen and (max-width: 768px) { 
    .about-left{
        width: 100% !important;
    }
    .about-right{
        width: 100%;
    }
    .back-product{width: 48%;}
}
 @media only screen and (max-width: 550px) { .back-product{width: 100%;} }