@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{box-sizing: border-box;margin:0;padding:0;font-family: "Montserrat", serif;font-optical-sizing: auto;font-style: normal;}
a{text-decoration: none;color:#222;}
.container{float:left;width:1300px;margin:0 calc(50% - 650px);}
.hContainer{display: flex;align-items: center;justify-content: space-evenly;}
header{float:left;width:100%;position: relative;padding:10px 0;border-bottom:2px solid #ccc;box-shadow: 0 0 5px 1px #999999;}
header a{float:left;padding:5px 10px;font-weight: 600;margin:5px 10px;color:#222;transition: 0.6s;text-shadow: 2px 2px 5px #ccc;}
header a:hover{color:#791313;text-shadow: 2px 2px 10px #49131380;}
.logoArea img{float:left;height:80px;}

.aboutMargin{margin:7.5% 0!important;}

.slider-container {position: relative;width: 100%;overflow: hidden;height: 600px;}
.slider {position: relative;width: 100%;height: 100%;}
.slide {position: absolute;width: 100%;height: 100%;opacity: 0;transition: opacity 0.5s ease-in-out;display: flex;align-items: center;justify-content: center;}
.slide.active {opacity: 1;}
.slide img {width: 100%;height: 100%;object-fit: cover;}
.slideData{position:absolute;max-width: 600px;background-color: #22222290;padding:1.5% 3%;border-radius: 10px;}
.slideData p{float:left;width: 100%;text-align: center;color:#fff;font-size:16px;font-weight: 500;margin:5px 0;}
.slideTitle{float:left;width: 100%;text-align: center;color:#fff;font-size:20px;font-weight: 600;margin:5px 0;}

.prev, .next {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0,0,0,0.5);color: white;border: none;padding: 2px 20px 7px;cursor: pointer;font-size: 36px;border-radius: 50%;}
.prev {left: 10px;}
.next {right: 10px;}
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);}

.aboutArea{float:left;width:100%;margin:20px 0;}
.aboutArea h1{text-align: center;margin:30px 0 10px;}
.aboutLeft{float:left;width:50%;padding:30px;}
.aboutLeft img{float:left;width: 100%;border-radius: 10px;height: 400px;object-fit: cover;}
.aboutRight{float:left;width:50%;padding:30px;height: 460px;overflow: hidden;display:flex;align-items: center;justify-content: center;flex-direction: column;margin:0;}
.aboutRight h1{float:left;width: 80%;text-align:left;font-size:26px;margin:25px 20% 15px 0;line-height: 34px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;font-weight: 600;}
.aboutDesc{float:left;width:100%;line-height: 20px;display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 10;overflow: hidden;text-overflow: ellipsis;height:250px;}
.aboutRight p{ float:left;width: 100%;font-weight: 500;color:#222;margin:6px 0;}
.aboutRight a{float:left;width:180px;margin:20px calc(50% - 90px) 5px;text-align: center;background-color: #ef4433;color:#fff;padding:10px;border-radius: 5px;transition: 0.6s;font-weight: 600;}
.aboutRight a:hover{box-shadow: 0 0 1px 2px #7f221999;background-color:#ef4433;font-weight: 500;}
.aboutDetail{float:left;width:50%;padding:30px;min-height: 460px;display:flex;align-items: center;justify-content: center;flex-direction: column;margin:0;}
.aboutDetail p{ float:left;width: 100%;line-height: 20px;font-weight: 500;color:#222;margin:10px 0;}

.serviceArea{float:left;width:100%;padding:50px 0;position:relative;box-shadow: 0 0 5px 0px #999999;}
.serviceArea:before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;background:url('../images/services.jpg');background-size:cover;background-position: center;background-attachment: fixed;filter:opacity(0.2);z-index: -1;}
.serviceArea h2{float:left;width:100%;font-size:28px;font-weight: 600;text-align: center;margin:20px 0;}
.services{float:left;width:33%;padding:2%;}
.service{float:left;width:100%;box-shadow:0px 0px 10px 1px #c1c1c1;background-color: #fff;border-radius: 20px;}
.service img{float:left;width:100%;border-radius: 10px 10px 0 0;height: 220px;object-fit: cover;}
.service h3{float:left;width:94%;height:50px;margin:5% 3% 0;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;font-weight: 600;font-size:20px;line-height: 24px;display: flex;align-items: center;}
.serviceDesc{float:left;width:100%;height:95px;overflow: hidden;}
.service p{float:left;width:94%;margin:3%;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;font-weight: 400;}
.service a{float:left;width:140px;margin:10px calc(50% - 70px) 25px;background-color: #ef4433;color:#fff;padding:10px;text-align: center;border-radius: 10px;font-weight: 600;}
.service a:hover{box-shadow: 0 0 1px 2px #7f221999;background-color:#ef4433;font-weight: 500;}

.yorum-container {position: relative;width: 100%;overflow: hidden;padding:0 5px;margin:50px 0;}
.yorumArea {display: flex;transition: transform 0.5s ease-in-out;}
.yorumlar {display: flex;width: 100%;justify-content: space-around;flex-shrink: 0;}
.yorum {background: #fff;border: 1px solid #ddd;border-radius: 5px;padding:30px 20px;width: 45%;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
.yorum h4 {margin-top: 10px;font-size: 1.1em;color: #333;}
.oncekiBtn, .sonrakiBtn {position: absolute;top: 50%;transform: translateY(-50%);background: #333;color: #fff;border: none;padding: 10px 15px;cursor: pointer;border-radius: 5px;}
.oncekiBtn {left: 0;z-index: 9;}
.sonrakiBtn {right: 0;z-index: 9;}
.oncekiBtn:hover, .sonrakiBtn:hover {background: #555;}

footer{float:left;width:100%;padding:70px 0 10px;background-color: #f8f8f8;box-shadow: 0 0 5px 1px #999999;}
footer p{float:left;width:100%;font-size:18px;font-weight: 600;margin:0 0 10px;}
.footerLeft{float:left;width:200px;margin-right:10%;}
.footerLeft img{float:left;width:80%;}
.footerLeft p{float:left;width:100%;font-size: 14px;}
.footerMenu{float:left;width:20%;margin:0 2.5%;}
.footerMenu a{float:left;width:100%;margin:10px 0 0;font-size:14px;font-weight: 500;}
.footerContact{float:left;width:calc(40% - 200px);}
.footerContact a{float: left;width: 100%;margin: 10px 0 5px;font-size: 15px; font-weight: 500;line-height: 20px;}
.footerContact a img{float:left;width: 20px;margin:0 7px 0 0;}
.copyright{float:left;width:100%;text-align: center;margin:20px 0 0;font-weight: 500;}
.copyright p{font-size:14px!important;}
.copyright a{font-weight: 700;}

.contactArea{float:left;width:100%;margin:20px 0;}
.contactArea h1{text-align: center;margin:30px 0 10px;}
.successMsg{float:left;width:100%;text-align: center;font-size:20px;color:rgb(8, 160, 8);font-weight: 600;margin:10px 0;}
.contactFull{float:left;width:100%;padding:30px;}
.contactData{float:left;width:33.3%;padding:1% 1.5%;}
.contactData img{float:left;width:25px;margin:0 10px 0 0;}
.contactData a{float:left;line-height: 25px;font-weight: 500;}
.contactSocial{float:left;width:100%;display: flex;align-items: center;justify-content: center;}
.contactSocial a{float:left;width:35px;height:50px;margin:0 10px;padding:7.5px;}
.contactSocial a img{float:left;width:35px;}
.contactLeft{float:left;width:50%;padding:30px;margin:20px 0;}
.contactRight{float:left;width:50%;padding:30px;margin:20px 0;}
.contactRightMap{box-shadow: 0 0 5px 1px #ccc;border-radius: 10px;height: 500px;} 

.iletisim-form{float:left;width:94%;margin:0 3% 3%;box-shadow: 0 0 5px 1px #ccc;padding:5%;border-radius:10px;height:500px;}
.iletisim-form h3{float:left;width:100%;margin:0 0 2%;}
.form-element{float:left;width:100%;}
.form-element label{float:left;width:100%;font-weight: 600;margin:3% 0 1% 5px;}
.form-element input{float:left;width:100%;border:1px solid #ccc;border-radius:10px;box-shadow: 0 0 5px 1px #ccc;line-height: 25px;padding:3px 10px;transition:0.3s;}
.form-element input:hover{box-shadow: 0 0 5px 3px #ccc;}
.form-element textarea{float:left;width:100%;border:1px solid #ccc;border-radius:10px;box-shadow: 0 0 5px 1px #ccc;line-height: 27px;height:100px;padding:10px;transition:0.3s;}
.form-element textarea:hover{box-shadow:0 0 5px 3px #ccc;}
.form-element a{float:left;width:100px;margin:5% calc(50% - 50px) 0;background-color:#ef4433;color:white;border-radius:5px;text-align: center;line-height: 30px;transition:0.5s;}
.form-element a:hover{box-shadow: 0 0 10px 5px #ccc;}
.form-element p{float:left;width:100%;margin:0 0 1% 0;}


.mobilMenu{float:left;position: fixed;width:350px;height:100vh;right:-350px;top:0;background-color: #fff;box-shadow: 0 0 5px 1px #aaa;z-index:999;transition: 0.6s;}
.mobilMenu span{float:left;font-size:24px;position: absolute;left:20px;top:15px;font-weight: 600;cursor: pointer;}
.mmLogo{float:left;width:100%;padding:50px 80px 20px 80px;margin:10px 0 30px!important;}
.mmLogo img{float:left;width:100%;}
.mobilMenu a{float:left;width: 100%;text-align: center;margin:0 0 8px 0;}
.mobilContact{float:left;width:100%;padding:10px 50px;margin:30px 0 0;}
.mobilContact a{float: left;width: 100%;margin: 10px 0 5px;font-size: 14px; font-weight: 500;line-height: 20px;}
.mobilContact a img{float:left;width: 20px;margin:0 calc(50% - 10px) 5px;}
.mobilMenuBtn{display:none;float:right;width:40px;height:40px;}.mobilMenuBtn a{padding:0!important;margin:0!important;}.mobilMenuBtn img{float:left;width: 100%;}

@media screen and (max-width:1350px) {
    .container{width:1200px;margin:0 calc(50% - 600px);}
}

@media screen and (max-width:1250px) {
    .container{width:1100px;margin:0 calc(50% - 550px);}
}
@media screen and (max-width:1150px) {
    .container{width:1000px;margin:0 calc(50% - 500px);}
    .footerLeft{width:300px;margin:10px calc(50% - 150px) 30px;}
    .footerLeft img{width:70%;margin:10px 15%;}
    .footerMenu{float:left;width:25%;}
    .footerContact{width:40%;}
}
@media screen and (max-width:1050px) {
    .container{width:980px;margin:0 calc(50% - 490px);}
}
@media screen and (max-width:1000px) {
    .container{width:940px;margin:0 calc(50% - 470px);}
}
@media screen and (max-width:950px) {
    .container{width:880px;margin:0 calc(50% - 440px);}
}
@media screen and (max-width:900px) {
    .container{width:840px;margin:0 calc(50% - 420px);}
    .leftMenu, .rightMenu{display:none;}
    .hContainer{justify-content: space-between;padding:0 20px;}
    .mobilMenuBtn{display:block;}
    .contactData{width: 400px;margin:10px calc(50% - 200px);display: flex;align-items: center;justify-content: center;}
    .contactData a{text-align: center;display: flex;align-items: center;justify-content: center;flex-direction: column;}
    .contactData a img{margin:0 calc(50% - 12.5px) 10px;}
    .contactLeft{width: 100%;padding:20px;}
    .iletisim-form{width:100%;margin:0 0 3%;height: auto;}
    .contactRight{width: 100%;padding: 20px;}
}
@media screen and (max-width:850px) {
    .container{width:780px;margin:0 calc(50% - 390px);}
    .aboutLeft{width: 100%;padding:20px 30px 10px;}
    .aboutRight, .aboutDetail{width: 100%;padding:0 30px 20px;height: auto;}
    .services{width:50%;}
}
@media screen and (max-width:800px) {
    .container{width:740px;margin:0 calc(50% - 370px);}
}
@media screen and (max-width:750px) {
    .container{width:680px;margin:0 calc(50% - 340px);}
}
@media screen and (max-width:700px) {
    .container{width:640px;margin:0 calc(50% - 320px);}
}
@media screen and (max-width:650px) {
    .container{width:580px;margin:0 calc(50% - 290px);}
    .footerMenu{width:300px;margin:10px calc(50% - 150px);text-align: center;}
    .footerContact{width:300px;margin:10px calc(50% - 150px);text-align: center;}
    .footerContact a{display:flex;align-items: center;justify-content: center;flex-direction: column;}
    .footerContact a img{margin:0 0 10px;}
    .services{width:100%;}
    .slider-container{height: 400px;}
    .prev, .next{padding:1px 15px 5px;font-size: 26px;}
    .contactRightMap{height: 350px;}
}
@media screen and (max-width:600px) {
    .container{width:540px;margin:0 calc(50% - 270px);}
    .yorumlar{display: block;}
    .yorum{width: 94%;margin:3%}
}
@media screen and (max-width:550px) {
    .container{width:480px;margin:0 calc(50% - 240px);}
}
@media screen and (max-width:500px) {
    .container{width:440px;margin:0 calc(50% - 220px);}
    .slider-container{height: 350px;}
}
@media screen and (max-width:450px) {
    .container{width:380px;margin:0 calc(50% - 190px);}
    .slider-container{height: 300px;}
    .aboutLeft{padding:10px 0;}
    .aboutRight, .aboutDetail{padding: 10px 0;}
}
@media screen and (max-width:400px) {
    .container{width:340px;margin:0 calc(50% - 170px);}
}
@media screen and (max-width:350px) {
    .container{width:330px;margin:0 calc(50% - 165px);}
}
@media screen and (max-width:335px) {
    .container{width:320px;margin:0 calc(50% - 160px);}
}
@media screen and (max-width:322px) {
    .container{width:300px;margin:0 calc(50% - 150px);}
}