*, html, body{box-sizing: border-box;font-family: "Montserrat", sans-serif;margin:0;padding:0;}
html{background-color: #f1eaf1;;}
a{text-decoration: none;color:#222;}
.baslikImgLeft{float:left;width:200px!important;height:auto!important;margin:20px calc(100% - 200px) 20px 0!important;}
.baslikImgCenter{float:left;width:14%!important;height:auto!important;margin:20px 43%!important;}
.container{float:left;width:1160px;margin:0 calc(50% - 580px);position:relative;}
header{float:left;width:100%;position:absolute;top:0;left:0;z-index:9;padding:10px 0;}
.logoArea{float:left;width:100px;margin:5px 10px 0 0;}
.logoArea img{float:left;height:60px;position:relative;z-index:9;}
.menuArea{float:right;max-width:calc(100% - 120px);}
.menuArea ul{float:left;width:100%;list-style: none;}
.menuArea ul li{float:left;padding:10px;font-size:15px;font-weight: 600;margin:0 10px;list-style: none;line-height: 60px;color:white;}
.menuArea ul a{color:white;}


.slide{float:left;width:100%;position: relative;}
.slideCover{float:left;width:100%;position: absolute;left:0;top:0;height:90vh;background: radial-gradient(circle, rgb(0, 0, 0, 0) 0%, #00000044 30%, #0000009a 50%, rgba(0,0,0) 100%);}
.slide img{float:left;width:100%;height: 90vh;object-fit: cover;}
.scLeft{float:left;width:100px;height: 60vh;position: absolute;left:0;top:0;padding:0 25px;z-index:8;}
.scLeft img{float:left;width:50px;object-fit: contain;filter:brightness(1);cursor:pointer;transition: 0.6s;}
.scLeft img:hover{filter:brightness(0.7);}
.scRight{float:left;width:100px;height: 60vh;position: absolute;right: 0;top:0;padding:0 25px;z-index:8;}
.scRight img{float:left;width:50px;object-fit: contain;filter:brightness(1);transform: rotate(180deg);cursor:pointer;transition: 0.6s;}
.scRight img:hover{filter:brightness(0.7);}
.slideBorder{float:left;width:100%;margin:7px 0;height: 2px;background-color: #ccc;}

.slider {position: relative;width: 100%;width: 100%;overflow: hidden;}
.slides {display: flex;transition: transform 0.5s ease-in-out;}
.slide {min-width: 100%;height: auto;display: flex;flex-direction: column;justify-content: center;align-items: center;}

.slideArea{float:left;width:100%;height:90vh;position:relative;z-index:8;}
.slideAreaCover{float:left;width:100%;height:100%;background-color: rgba(0, 0, 0, 0.20);position: absolute;left:0;top:0;z-index:9}
.slideArea img{float:left;width:100%;height:100%;object-fit: cover;position: absolute;left:0;top:0;z-index:8;}
.slideBox{float:left;width:500px;margin:30vh 0 0;position:relative;z-index:99;padding:20px;border-radius: 10px;}
.slideBox span{float:left;width:100%;font-size:16px;font-weight: 600;color:#b062b0;}
.slideBox h1{float:left;width:100%;font-size:42px;text-transform: capitalize;color:white;}
.slideBox p{float:left;width:100%;font-size:16px;font-weight: 500;color:white;}
.slideBox a{float:left;padding:12px 25px;background-color:#9b33e5;border:1px solid #9b33e5;color:white;border-radius: 5px;margin:20px 20px 0 0;font-size:18px;font-weight: 500;}
.slideBox a:last-child{background-color:transparent;color:#9b33e5;}

.aboutArea{float:left;width:100%;margin:3% 0;}
.aboutArea img{float:left;width:45%;margin:20px 5% 0 0;height:500px;object-fit: contain;}
.aboutAreaBox{float:left;width:50%;display: flex;align-items: center;flex-direction: column;justify-content:center;min-height: 500px;overflow: hidden;}
.aboutAreaBox h2{float:left;width:100%;font-size:36px;}
.aboutAreaBox p{float:left;width:100%;margin:10px 0;}

.serviceArea{float:left;width:100%;background-size: cover;background-position: top;padding:3% 15%;margin:5% 0;background-repeat: no-repeat;background-color: #ebe0e9;}
.serviceArea h2{float:left;width:100%;text-align: center;font-size:32px;}
.serviceArea a{float:left;width:200px;margin:30px calc(50% - 100px) 10px;background-color: #542954;color:white;padding:15px 20px;border-radius: 5px;text-align: center;}
.saService{float:left;width:33.3%;padding:10px 40px;}
.saService img{float:left;width:100px;height:100px;object-fit:cover;border-radius: 50%;margin:10px calc(50% - 50px);}
.serviceImgCenter{float:left;width:30%!important;height:auto!important;margin:10px 35%!important;}
.saService h3{float:left;width:100%;text-align: center;font-size:24px;font-weight: 600;margin:10px 0 5px;}
.saService p{float:left;width:100%;text-align: center;}

.blogArea{float:left;width:100%;}
.blogArea h2{float:left;width:100%;text-align: center;font-size: 32px;}
.baBlog{float:left;width:30%;margin:10px 1.6%;box-shadow: 0 0 10px 3px #e5dae5;border-radius: 2px;}
.baBlog img{float:left;width:100%;height:200px;object-fit: cover;}
.baBlog span{float:left;width:84%;margin:10px 8% 0;font-size: 13px;font-weight: 500;}
.baBlog h4{float:left;width:84%;margin:10px 8% 5px;}
.baBlogDesc{float:left;width:100%;height:80px;overflow: hidden;}
.baBlogDesc p{float:left;width:84%;margin:5px 8%;}
.baBlog a{float:left;width:180px;margin:20px calc(50% - 90px) 30px;background-color: #542954;color:white;text-align: center;border-radius: 5px;padding:10px 0;}

.imSlideArea{float:left;width:100%;height:250px;padding:40px 0;background-size: cover;background-position: center;background-attachment: fixed;margin:50px 0 0;}
.imsaImage{float:left;width:15%;height:170px;margin:0 2.5%;}
.imsaImage img{float:left;max-width:100%;height:100%;object-fit:cover;border-radius: 50%;}

footer{float:left;width:100%;padding:50px 0 0;}
.footerLogo{float:left;width:28%;padding:10px 20px;margin-right:2%;}
.footerLogo img{float:left;height:100px;width:100px;object-fit: contain;margin:0 calc(100% - 100px) 5px 0;}
.socialIcon{float:left;width:100%;margin:20px 0 0;}
.socialIcon a{float:left;width:40px;margin:5px 5px 5px 0;}
.socialIcon img{float:left;width:25px;height:25px;object-fit: cover;border-radius: 50%;}
.footerTab{float:left;width:18%;padding:10px 20px;margin:15px 1.5% 0;}
.footerTab h4{float:left;width:100%;font-size:20px;font-weight: 600;margin:0 0 10px;}
.footerTab a{float:left;width:100%;font-weight: 500;font-size:15px;margin:5px 0;}
.footerContact{float:left;width:28%;padding:10px 20px;margin:15px 0 0;background-color:#e8d9e8;box-shadow: 0 0 10px 3px #e5dae5;border-radius: 10px;}
.fcArea{float:left;width:100%;margin:10px 0;display: flex;align-items: center;justify-content: center;}
.fcArea img{float:left;width:40px;height:40px;object-fit: cover;margin:0 10px 0 0;}
.fcArea a{float:left;width:calc(100% - 60px);}
.copyright{float:left;width:100%;background-color:#e8d9e8;margin:20px 0 0;text-align: center;padding:15px 0;font-size:14px;font-weight: 500;color:#000;}
.copyright p, .copyright a{color:#000;}

.subPageArea{float:left;width:100%;height:30vh;position:relative;display: flex;align-items: center;justify-content: center;}
.subPageCover{float:left;width:100%;height:100%;background-color: rgba(0, 0, 0, 0.25);position: absolute;left:0;top:0;z-index:8}
.subPageArea img{float:left;width:100%;height:100%;object-fit: cover;position: absolute;left:0;top:0;z-index:8;}
.subPageArea h1{float:left;position:relative;width:300px;font-size:32px;text-transform: capitalize;text-align: center;z-index:9;color:white;}

.hizmetArea{float:left;width:100%;padding:50px 0;}
.hizmetArea h2{float:left;width:100%;text-align: center;margin:0 0 20px;font-size: 32px;font-weight: 600;}
.hizmetS{float:left;width:33.3%;margin:10px 0 20px;}
.hizmet{float:left;width:90%;margin:10px 5%;box-shadow:0 0 5px 3px #ccc;border-radius:10px;}
.hizmet img{float:left;width:100%;height:220px;object-fit: cover;border-radius: 10px 10px 0 0;}
.hizmet h3{float:left;width:94%;margin:10px 3% 0;text-align: center;font-weight: 600;text-overflow: ellipsis;white-space:nowrap;overflow: hidden;}
.hizmetDesc{float:left;width:90%;margin:10px 5%;height:80px;overflow: hidden;line-height: 20px;text-align: center;}
.hizmet a{float:left;width:100px;margin:5px calc(50% - 50px) 15px;background-color:#b062b0;color:white;text-align: center;padding:10px 0;border-radius:5px;}

.galeriArea{float:left;width:100%;padding:50px 0;}
.galeriArea h2{float:left;width:100%;text-align: center;margin:0 0 20px;font-size:32px;font-weight: 600;}
.galeriS{float:left;width:25%;}
.galeri{float:left;width:94%;margin:10px 3%;border-radius: 5px;cursor:pointer;}
.galeri img{float:left;width:100%;height:200px;object-fit: cover;border-radius: 5px;}

.modal{float:left;width:100%;height:100vh;position: fixed;left:0;top:0;background-color: #00000090;z-index:999;display: none;align-items: center;justify-content: center;}
.modalCover{float:left;width:100%;height:100vh;position:relative;left:0;top:0;z-index:8;}
.modalIc{float:left;position:absolute;z-index:9;display: flex;align-items: center;justify-content: center;}
#image{float:left;max-width:80%;max-height: 80vh;}
.modalLeft{float:left;width:50px;height: 60vh;position: absolute;left:-55px;top:calc(50% - 25px);padding:0 5px;z-index:99;}
.modalLeft img{float:left;width:50px;object-fit: contain;filter:brightness(1);cursor:pointer;transition: 0.6s;}
.modalLeft img:hover{filter:brightness(0.7);}
.modalRight{float:left;width:50px;height: 60vh;position: absolute;right: -40px;top:calc(50% - 25px);;padding:0 5px;z-index:99;}
.modalRight img{float:left;width:50px;object-fit: contain;filter:brightness(1);transform: rotate(180deg);cursor:pointer;transition: 0.6s;}
.modalRight img:hover{filter:brightness(0.7);}

.leftArea{float:left;width:65%;height:auto;margin:50px 5% 0 0;box-shadow: 0 0 3px 3px #ccc;padding:20px;border-radius: 5px;}
.leftArea img{border-radius: 5px;max-width:100%;}
.leftAreaData{float:left;width:100%;margin:10px 0;}
.leftAreaData h2{float:left;width:100%;font-size:20px;font-weight: 600;margin:5px 0 10px;}
.rightArea{float:left;width:30%;padding:20px;margin:50px 0 0;box-shadow: 0 0 3px 3px #ccc;border-radius: 5px;}
.rightArea h3{float:left;width:100%;font-size:20px;font-weight: 600;margin:0 0 10px;}
.rightArea a{float:left;width:100%;margin:5px 0;font-weight: 500;}

.iletisimArea{float:left;width:100%;margin:50px 0;}
.iletisimArea h2{float:left;width:100%;text-align: center;margin:10px 0 30px;font-size:24px;font-weight: 600;}
.iletisimTop{float:left;width:33.3%;margin:10px 0;display: flex;align-items: center;justify-content: center;}
.iletisimTop img{float:left;width:35px;height:35px;object-fit: cover;}
.iletisimTop a{float:left;margin:0 0 0 10px;max-width:calc(100% - 50px);font-weight: 500;}

.iletisimForm{float:left;width:57%;margin:50px 3% 20px 0;padding:10px 10px 10px 15px;box-shadow: 0 0 3px 2px #ccc;border-radius: 5px;}
.iletisimForm h3{float:left;width:100%;font-size: 20px;font-weight: 500;margin:0 0 10px 0;}
.iletisimForm a{float:left;width:100px;margin:20px calc(100% - 100px) 30px 0;background-color: #b062b0;color:white;padding:7px 0;text-align: center;border-radius: 5px;box-shadow: 0 0 3px 2px #ccc;cursor: pointer;}
.inputGroupHalf{float:left;width:48%;margin:10px 2% 0 0;}
.inputGroupHalf p{float:left;width:100%;font-size:16px;font-weight: 500;margin:5px 0;}
.inputGroupHalf input{float:left;width:100%;border:1px solid #ccc;border-radius: 5px;padding:10px;}
.inputGroup{float:left;width:98%;margin:10px 2% 0 0;}
.inputGroup p{float:left;width:100%;font-size:16px;font-weight: 500;margin:5px 0;}
.inputGroup textarea{float:left;width:100%;height:170px;border:1px solid #ccc;border-radius: 5px;padding:10px;}
.iletisimMap{float:left;width:40%;margin:50px 0 20px;box-shadow: 0 0 3px 2px #ccc;border-radius: 5px;padding:10px 15px;}
.iletisimMap h3{float:left;width:100%;font-size: 20px;font-weight: 500;margin:0 0 20px;}

.footerLogo p{float:left;width:100%;font-weight: 500;font-size: 14px;}



.mobileLogo{display:none;}
.mobileContact{display:none;}
.mobileBtn{display: none;}
.menuBtn{display:none;}
@media screen and (max-width: 1600px){
    .modalLeft{left:0;}
    .modalRight{right:5px;}
}
@media screen and (max-width: 1200px){
    .container{width:900px;margin:0 calc(50% - 450px);}
    .imSlideArea{height:220px;}
    .imsaImage{height:135px;}
    .footerTab a{float:left;width:100%;font-size:14px;font-weight: 500;}
    .footerContact{font-size:13px;}
    .hizmetS{width:48%;margin:10px 1% 20px; }
}

@media screen and (max-width: 920px){
    .container{width:800px;margin:0 calc(50% - 400px);}
    .footerLogo{float:left;width:320px;margin:10px calc(50% - 160px);display: flex;align-items: center;justify-content: center;flex-direction: column;}
    .footerLogo img{float:left;margin:0 calc(50% - 50px) 5px;}
    .footerLogo p{text-align: center;}
    .socialIcon{display: flex;align-items: center;justify-content: center;}
    .footerTab{float:left;width:320px;margin:10px calc(50% - 160px);text-align: center;}
    .footerContact{float:left;width:320px;margin:10px calc(50% - 160px);}
}
@media screen and (max-width: 920px){
    .container{width:760px;margin:0 calc(50% - 380px);}
    .menuBtn{display: block;position: absolute;right:0;top:20px;cursor:pointer;}
    .menuBtn img{float:left;width:40px;height:40px;object-fit: contain;filter: invert(1);}
    .menuArea{position:fixed;right:-330px;top:0;width:300px;height:100vh;background-color: #542954;box-shadow: 0 0 10px 2px #ccc;padding:30px 20px;z-index:9999;transition:0.6s;}
    .mobileBtn{float:left;display:block;position: absolute;left:20px;top:20px;color:white;font-weight: 700;font-size: 24px;cursor:pointer;}
    .mobileLogo{float:left;width:100%;display: block;}
    .mobileLogo img{float:left;width:180px;margin:30px calc(50% - 90px) 50px;}
    .menuArea ul li{float:left;width:100%;margin:0;padding:5px 0;text-align: center;line-height: 30px;}
    .mobileContact{float:left;width:100%;display: block;margin:50px 0;}
    .mobileContact p{float:left;width:100%;text-align: center;color:white;font-size: 13px;margin:10px 0 30px;}
    .mobileContact a{float:left;width:30px;height:30px;margin:5px 10px;}
    .mobileContact a img{float:left;width:100%;height: 100%;object-fit: cover;}
    .leftArea, .rightArea{width: 100%;}
    .iletisimTop{width:500px;margin:10px calc(50% - 250px);flex-direction: column;}
    .iletisimTop img{margin:10px calc(50% - 17.5px);}
    .iletisimTop a{width:100%;text-align: center;}
    .iletisimForm, .iletisimMap{width:500px;margin:30px calc(50% - 250px) 10px;}
}
@media screen and (max-width: 850px){
    .container{width:660px;margin:0 calc(50% - 330px);}
    .aboutArea img{width:400px;height:400px;margin:20px calc(50% - 200px);}
    .aboutAreaBox{width:400px;margin:20px calc(50% - 200px) 0;}
    .aboutAreaBox h2{text-align: center;}
    .baslikImgLeft{margin:20px calc(50% - 100px) 20px!important}
    .saService{width:400px;margin:20px calc(50% - 200px) 0;}
    .baBlog{width:400px;margin:20px calc(50% - 200px) 0;}
    .imSlideArea{height: 190px;}
    .imsaImage{width:110px;height:110px;margin:0 10px;}
    .galeriS{width:33.3%;}
}
@media screen and (max-width: 700px){
    .container{width:600px;margin:0 calc(50% - 300px);}
    .imSlideArea{height: 180px;}
    .imsaImage{width:100px;height:100px;margin:0 10px;}
}
@media screen and (max-width: 620px){
    .container{width:520px;margin:0 calc(50% - 260px);}
    .imSlideArea{height: 170px;}
    .imsaImage{width:90px;height:90px;margin:0 7px;}
    .slideArea, .slideCover{height:60vh;}
    .slideBox{width:90%;margin:20vh 5% 0;}
    .slide img{height:60vh;}
    .hizmetS{width:90%;margin:10px 5% 20px; }
    .galeriS{width:50%;}
    .modalLeft{width:35px;}
    .modalLeft img{width:35px;}
    .modalRight{width:35px;right:10px;}
    .modalRight img{width:35px;}
    .inputGroupHalf{width:98%; margin:10px 2% 0 0;}
}
@media screen and (max-width: 540px){
    .container{width:440px;margin:0 calc(50% - 220px);}
    .imSlideArea{height: 150px;}
    .imsaImage{width:75px;height:75px;margin:0 6px;}
    .baslikImgLeft, .baslikImgCenter{margin:10px calc(50% - 70px) 10px!important;width:140px!important;}
    .aboutAreaBox h2{font-size:28px;}
    .aboutAreaBox{font-size:14px;}
    .serviceArea h2{font-size:28px;}
    .saService h3{font-size:20px;}
    .shortDesc{font-size:14px;line-height: 18px;height: 72px!important;}
    .serviceArea a{margin:20px calc(50% - 70px) 7px;width:140px;padding:10px;font-size:14px;}
    .baBlog a{margin:20px calc(50% - 70px);width:140px;padding:10px;font-size:14px;}
    .slideBox{width:400px;}
    .slideBox h1{font-size:32px;}
    .scLeft{width:40px;padding:0 2px;}
    .scLeft img{width:35px;}
    .scRight{width:40px;padding:0 2px;}
    .scRight img{width:35px;}
    
    .iletisimTop{width:90%;margin:10px 5%;flex-direction: column;}
    .iletisimTop img{margin:10px calc(50% - 17.5px);}
    .iletisimTop a{width:100%;text-align: center;}
    .iletisimForm, .iletisimMap{width:90%;margin:30px 5% 10px;}
}
@media screen and (max-width: 450px){
    .container{width:400px;margin:0 calc(50% - 200px);}
    .imSlideArea{height: 140px;}
    .imsaImage{width:70px;height:70px;margin:0 5px;}
    .galeriS{width:100%;}
}
@media screen and (max-width: 420px){
    .container{width:360px;margin:0 calc(50% - 180px);}
    .imSlideArea{height: 105px;padding:20px 0;}
    .imsaImage{width:62px;height:62px;margin:0 5px;}
    
    .aboutArea img{width:95%;height:auto;margin:20px 2.5%;}
    .aboutAreaBox, .saService, .baBlog{width:95%;margin:20px 2.5% 0;}
    .slideBox h1{font-size:24px;margin:0 0 20px;}
    .slideBox a{padding:7px 15px;}
}
@media screen and (max-width: 380px){
    .container{width:340px;margin:0 calc(50% - 170px);}
    .imSlideArea{height: 100px;padding:20px 0;}
    .imsaImage{width:60px;height:60px;margin:0 3px;}
}
@media screen and (max-width: 350px){
    .container{width:320px;margin:0 calc(50% - 160px);}
    .imSlideArea{height: 95px;padding:20px 0;}
    .imsaImage{width:58px;height:58px;margin:0 3px;}
}