@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap"); 
body {font-family:"Roboto", sans-serif; max-width: 100vw; width: 100%; overflow-x: hidden;}
.bizSiziArayalim{display: none;}
html{max-width: 100vw; width: 100%; overflow-x: hidden;}
.form-submit {background:#3f5519 !important;  color:#fff !important;}
.text-center {text-align:center;}
.row {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:50px;}
.row .col.col60 {width:60%;}
.row .col.col40 {width:40%;}
.row .col.col20 {width:20%;}
.mainSlider .item .mobile {display:none;}
.mainBottom {margin:20px 10% 100px 10%;}
.mainBottom .textArea span {color:#3d5f00; display:block; font-size:80px; font-weight:500; margin-bottom:60px;}
.mainBottom .textArea span b {font-weight:900;}
.mainBottom .textArea span i {font-size:72px; font-weight:400; font-style:normal;}
.mainBottom .textArea small {color:#000; font-size:36px; font-weight:400;}
.mainBottom .textArea small b {font-weight:700; font-size:62px;}
.mainBottom .imgArea {position:relative; padding:15px;}
.mainBottom .imgArea:after {content:""; position:absolute; top:0; background-color:#3d5f00; left:0; width:25%; height:2px;}
.mainBottom .imgArea:before {content:""; position:absolute; top:0; background-color:#3d5f00; left:0; width:2px; height:25%;}
.metrolifeSliderArea {margin:20px 5% 100px 5%; padding:0 5%;}
.metrolifeSliderArea .titleArea {margin-bottom:70px;}
.metrolifeSliderArea .titleArea h1 {font-size:54px; position:relative; text-align:center; padding-top:35px; font-weight:900; color:#3d5f00; margin-bottom:20px;}
.metrolifeSliderArea .titleArea h1:after {content:attr(data-content); font-size:90px; position:absolute; left:50%; transform:translateX(-50%); color:rgba(61, 95, 0, 0.2); top:0; line-height:90px; width:100%; font-weight:400;}
.metrolifeSliderArea .titleArea h2 {font-size:54px; position:relative; text-align:center; font-weight:900; color:#3d5f00;}
.metrolifeSliderArea .titleArea h2:after {content:attr(data-content); font-size:90px; position:absolute; left:50%; transform:translateX(-50%); color:rgba(61, 95, 0, 0.2); top:10px; line-height:90px; width:100%; font-weight:400;}
.metrolifeSliderArea .metrolifeSlider .items a {display:block; text-align:center;}
.metrolifeSliderArea .metrolifeSlider .items a span {display:block; color:#3d5f00; font-weight:bold; font-size:36px; margin-bottom:15px;}
.metrolifeSliderArea .metrolifeSlider .items a small {font-size:26px; font-weight:400; display:block; margin-bottom:30px; color:#000; min-height:65px;}
.metrolifeSliderArea .metrolifeSlider .items a i {background-color:#3d5f00; color:#fff; font-weight:500; font-size:28px; border-top-left-radius:25px; border-bottom-right-radius:25px; padding:15px 40px; display:inline-block; font-style:normal;}
.metrolifeSliderArea .metrolifeSlider .owl-nav {top:50%; transform:translateY(-50%); bottom:auto; left:auto; width:100%;}
.metrolifeSliderArea .metrolifeSlider .owl-nav .owl-next {right:-90px; position:absolute; background:#3d5f00 url(../images/next1.png) no-repeat center; border-radius:50%; width:50px; height:50px;}
.metrolifeSliderArea .metrolifeSlider .owl-nav .owl-prev {left:-90px; position:absolute; background:#3d5f00 url(../images/prev1.png) no-repeat center; border-radius:50%; width:50px; height:50px;}


.popupWrapper {display:block; max-width:1480px; width:100%; background-color:#294635; padding:20px 50px 50px; position:relative;}
.popupWrapper .row {background:linear-gradient(#294635, #294635) padding-box, linear-gradient(to right, #6f4614, #fee07e) border-box; border-radius:50px; border:4px solid transparent; padding:50px; align-items:center; color:#fff;}
.popupWrapper .row .col.col28 {width:28%;}
.popupWrapper .row .col.col68 {width:68%;}
.popupWrapper .imgArea {text-align:center;}
.popupWrapper .imgArea .img {position:relative; padding:25px 0px 0px 25px; margin-bottom:20px;}
.popupWrapper .imgArea .img:before {content:""; width:156px; height:220px; background:url(../images/imgAfter.png) no-repeat; position:absolute; left:0; top:0;}
.popupWrapper .imgArea .img img {display:block; width:100%;}
.popupWrapper .imgArea span {display:block; font-size:30px; font-weight:bold; margin-bottom:5px;}
.popupWrapper .imgArea small {display:block; font-size:20px; font-weight:400;}
.popupWrapper .textArea p {font-size:23px; font-weight:400;}
.popupWrapper .arrowArea {position:absolute; top:15px; right:60px; display:flex;}
.popupWrapper .arrowArea a {background:#fff url(../images/greenArrow.png) no-repeat center; width:35px; height:35px; display:block; border-radius:50%; background-size:50%;}
.popupWrapper .arrowArea a:first-child {transform:rotate(180deg); margin-right:5px;}

.galleryAreaWrapper{position: relative;}
.galleryAreaWrapper::before{content: ""; width: 100%; height: 50%; background-color: #3d5f00; display: block; position: absolute; top: 0; z-index: 1;}
.galleryAreaWrapper .galleryArea{ margin:0 auto; width: 80%; z-index: 2; position: relative;}
.galleryAreaWrapper .galleryArea .textContent p{color: white;font-weight: 100 !important; font-size: 60px; text-align: center;}
.galleryAreaWrapper .galleryArea .textContent .btnArea{margin: 30px auto 15px; display: flex; justify-content: center; position: relative;}
.galleryAreaWrapper .galleryArea .textContent .btnArea a{background-color: #5f7b2f; color: #e9e9e9; font-weight: bold; font-size: 25px; padding: 5px 30px; margin-right: 20px; width: 200px; text-align: center; border-radius: 5px;}
.galleryAreaWrapper .galleryArea .textContent .btnArea a.active{background-color: #e9e9e9; color: #3d5f00; border: 3px solid #ffa800;}
.galleryAreaWrapper .galleryArea .textContent .btnArea .daireBtns{display: none; position: absolute; left: 49%; top: 40px; transform: translateX(-50%); }
.galleryAreaWrapper .galleryArea .textContent .btnArea .daireBtns.active{display: flex;z-index: 3;}
.galleryAreaWrapper .galleryArea .textContent .btnArea .daireBtns a{font-size: 16px; margin: 5px 0;width: max-content; display: block;  padding: 5px 15px; border-radius: 0; background-color: #ffa800; color: #3d5f00;}
.galleryAreaWrapper .galleryArea .textContent .btnArea .daireBtns a.active{background-color: #3d5f00; color: white;}
.galleryAreaWrapper .galleryArea .imgContent { position: relative; }
.galleryAreaWrapper .galleryArea .imgContent img{width:100%;}
.galleryAreaWrapper .galleryArea .imgContent .gallerySlider{display: none;}
.galleryAreaWrapper .galleryArea .imgContent .gallerySlider.active{display: block;}
.galleryAreaWrapper .galleryArea .imgContent p{ position: absolute; right: 0; top: 20px; background-color: #456a26; color: white; border: 1px solid white; border-right: 0; z-index: 2; padding: 5px 10px; font-style: italic;}
.galleryAreaWrapper .galleryArea .imgContent .owl-nav .owl-prev, .galleryAreaWrapper .galleryArea .imgContent .owl-nav .owl-next{display:none}
.galleryAreaWrapper .galleryArea .imgContent iframe{width: 100%; height: 600px;}
.hiddenConceptProjects{display: none;}
.gallerySlider.tanitimFilmi .gallery-follow-arrow.visible{display: none;}

.gallery-follow-arrow {position: absolute;display: none;transform: translate(-50%, -50%);z-index: 9999;pointer-events: none;}
.gallery-follow-arrow .icon {display: none;background: rgba(99, 125, 62, .8); border-radius: 50%; height: 75px; width: 75px; }
.gallery-follow-arrow .icon img{filter: invert(1); width: 15px; height: 15px; object-fit: contain;}
.gallery-follow-arrow.leftMode .icon.left {display: inline-flex; align-items: center; justify-content: center;}
.gallery-follow-arrow.rightMode .icon.right {display: inline-flex; align-items: center; justify-content: center;}
.gallery-follow-arrow.visible {display: flex;}


.scroolMenu{width: 85%; margin: 75px auto 50px;}
.scroolMenu a{color: #244511; text-decoration: underline; font-size: 20px; margin-right: 40px; font-weight: bold;}

.videoGaleriWrapper{position: relative;}
.videoGaleriWrapper::after{content: ""; height: 50%; width: 100%; position: absolute; bottom: -1px; background-color: #3d5f00; z-index: 0;}
.videoGaleriWrapper .videoGaleri{width: 90%; margin: 0 auto;}
.videoGaleriWrapper .videoGaleri .item a{position: relative; display: block; width: 100%; height: 100%;}
.videoGaleriWrapper .videoGaleri .item a span{position: absolute; top: 25px; left: 50%; transform: translateX(-50%); color: white; text-align: center;}
.videoGaleriWrapper .videoGaleri .item a::after{content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url(../images/play.png) no-repeat; background-size: contain; width: 50px; height: 50px; filter: invert(1);}

.scroolSliderWrapper{background-color: #3d5f00; padding: 75px 0;  overflow-x: hidden;}
/* .scroolSliderWrapper .scroolSlider{padding-left: 100px;} */
.scroolSliderWrapper .scroolSlider .owl-stage-outer{padding-bottom: 50px;}
.scroolSliderWrapper .scroolSlider .item {height: 450px; width: 350px;margin-right: 150px;padding: 20px 30px 20px;border-top-left-radius: 30px;border-top-right-radius: 30px;display: block;background-color: white;box-shadow: 0 8px 20px rgba(0,0,0,0.5);transition: 1s all ease;}
.scroolSliderWrapper .scroolSlider .item .text{color: #3f7425; text-align: center; height: 150px; font-size: 16px;}
.scroolSliderWrapper .scroolSlider .item .text span{display: block; margin-bottom: 25px;}
.scroolSliderWrapper .scroolSlider .item .img{ width: 100%;padding-top: 85%;position: relative;overflow: hidden;}
.scroolSliderWrapper .scroolSlider .item .img img{width: 100%;height: auto;position: absolute;top: 0;left: 0;transition: top .3s; border-top-left-radius: 40px;border-top-right-radius: 40px;}
.scroolSliderWrapper .scroolSlider .item:hover{background-color: #3d5f00;border: 1px solid #a1c267;box-shadow: 0 16px 30px rgba(0,0,0,1);}
.scroolSliderWrapper .scroolSlider .item:hover .text{ color: white; font-size: 21px;}
.scroolSliderWrapper .scroolSlider .item:hover .img img{ color: white; font-size: 20px; top: 50px;}

.metrolifePremiumTaniyin{width: 80%; margin: 100px auto; display: flex; }
.metrolifePremiumTaniyin .left{width: 60%; }
.metrolifePremiumTaniyin .left .top{background-color: #f1f1f1; padding: 30px 50px;}
.metrolifePremiumTaniyin .left .top p{font-size: 45px; font-weight: 200; color: #3d5f00;}
.metrolifePremiumTaniyin .left .top p strong{display: block; font-weight: 700;}
.metrolifePremiumTaniyin .left .bottom{background-color: #e9e9e9; padding: 30px 75px;  display: flex; justify-content: space-between; }
.metrolifePremiumTaniyin .left .bottom .company{width: 48%; height: 100%;}
.metrolifePremiumTaniyin .left .bottom .company .imgWrapper{width: 100%; height: 125px; background-color: white; display: flex; align-items: center;justify-content: center;}
.metrolifePremiumTaniyin .left .bottom .company .imgWrapper img{width: 100%;height: 100px; object-fit: contain; }
.metrolifePremiumTaniyin .left .bottom .company strong{color: #3d5f00; font-size: 28px; text-align: center; display: block; margin-bottom: 5px;}
.metrolifePremiumTaniyin .left .bottom .company span{color: #3d5f00; font-size: 28px; font-weight: 200; text-align: center; display: block; margin-top: 5px;}
.metrolifePremiumTaniyin .right{width: 40%; color: white; background-color: #3d5f00;}

.metrolifePremiumTaniyin .right .top{ padding: 31px 50px; font-size: 23px;}
.metrolifePremiumTaniyin .right .top ul{margin: 20px 45px 0; }
.metrolifePremiumTaniyin .right .top ul li{list-style: url(../images/complete.png);padding-bottom: 5px; margin-bottom: 10px;}
.metrolifePremiumTaniyin .right .bottom{background-color: #335000; padding: 20px 50px; font-size: 20px; text-align: center;}
.metrolifePremiumTaniyin .right .bottom span{display: block; color: #fff04e;}

.satisTemsilcileri{width: 80%; margin: 0 auto 50px;}
.satisTemsilcileri h2{text-align: center; font-size: 50px; color: #3d5f00; font-weight: 200; margin-bottom: 30px;}
.satisTemsilcileri .satisTemsilcileriSlider{ display: flex;}
.satisTemsilcileri .satisTemsilcileriSlider .item{width: 250px; position: relative;}
.satisTemsilcileri .satisTemsilcileriSlider .item a{display: flex; position: relative; overflow-x: hidden; box-shadow: 0px 0px 10px 0px #000000; width: 100%;}
.satisTemsilcileri .satisTemsilcileriSlider .item a::after{content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url(../images/playWithBg.png) no-repeat; background-size: contain; width: 150px; height: 150px;}
.satisTemsilcileri .satisTemsilcileriSlider .item a img{width: 200px; filter: brightness(0.7); width: 100%;}
.satisTemsilcileri .satisTemsilcileriSlider .item a img:last-child{position: absolute; opacity: 0;right: -100%; transition: .3s all ease-in-out;}
.satisTemsilcileri .satisTemsilcileriSlider .item a:hover img:last-child{opacity: 1; right: 0;}

.contactWrapper{background-color: #3d5f00; display: flex; }
.contactWrapper .left{width: 40%; text-align: center; padding: 60px 0;}
.contactWrapper .left h2{color: white; font-size: 50px; font-weight: 200; margin-bottom: 25px;}
.contactWrapper .left h2 strong{font-weight: 600;}
.contactWrapper .right{color: #3d5f00; width: 60%; background-color: #e9e9e9;}
.contactWrapper .right p{padding: 80px 70px; font-size: 25px;}
.contactWrapper .right p a{ color: inherit;}
.contactWrapper .right iframe{width: 100%; height: 600px;}
.contactWrapper .right p:first-child strong br{display: none;}
@keyframes slideEffect {
    0%, 45% {opacity: 0;right: -100%;}
    50%, 95% {opacity: 1;right: 0;}
    100% {opacity: 0;right: -100%;}
}


@media screen and (max-width: 1024px){
  .satisTemsilcileri .satisTemsilcileriSlider .item a img:last-child {opacity: 0;right: -100%;animation: slideEffect 6s infinite ease-in-out;}
}

@media screen and (max-width: 1650px){
  .metrolifePremiumTaniyin .right .top{padding: 25px 50px ;}
  .metrolifePremiumTaniyin .right .bottom p{font-size: 17px;}
  .satisTemsilcileri .satisTemsilcileriSlider .item{width: 200px;}
}
@media screen and (max-width: 1450px){
  .satisTemsilcileri .satisTemsilcileriSlider .item{width: 175px;}
}
@media screen and (max-width: 1350px){
  .satisTemsilcileri .satisTemsilcileriSlider .item{width: 200px;}
  .contactWrapper .left h2{font-size: 40px;}
  .contactWrapper .left img{max-width: 70%;}
  .contactWrapper .right p{padding: 60px;}
}
@media screen and (max-width: 1395px){
  .metrolifePremiumTaniyin .left .bottom{padding: 35px;}
  .metrolifePremiumTaniyin .left .bottom .company .imgWrapper {height: 100px;}
  .metrolifePremiumTaniyin .left .bottom .company strong{font-size: 22px;}
  .metrolifePremiumTaniyin .left .bottom .company span{font-size: 22px;}
  .metrolifePremiumTaniyin .right .top{font-size: 18px; padding: 28px 25px;}
  .metrolifePremiumTaniyin .right .bottom p{font-size: 18px;}
}
@media screen and (max-width: 1170px){
  .metrolifePremiumTaniyin{flex-direction: column;}
  .metrolifePremiumTaniyin .left{width: 100%;}
  .metrolifePremiumTaniyin .right{width: 100%;}
  .metrolifePremiumTaniyin .left .bottom{padding: 20px;}
  .metrolifePremiumTaniyin .left .bottom .company{width: 49%;}
  .metrolifePremiumTaniyin .left .bottom .company strong, .metrolifePremiumTaniyin .left .bottom .company span{font-size: 14px; white-space: nowrap;}
  .metrolifePremiumTaniyin .right .top ul {margin: 20px 20px 0;}
  .metrolifePremiumTaniyin .right .bottom p{font-size: 13px;}
  .metrolifePremiumTaniyin .right .bottom {padding: 20px 5px;}
}
@media screen and (max-width: 1680px) {
  .mainBottom {margin:20px 3%;}
  .mainBottom .textArea span {font-size:60px;}
  .mainBottom .textArea span i {font-size:55px;}
  .mainBottom .textArea small {font-size:30px;}
  .mainBottom .textArea small b {font-size:50px;}
  .mainBottom .textArea.right {padding-left:30px;}
  .mainBottom .imgArea img {width:100%;}
  .metrolifeSliderArea .titleArea h1 {font-size:45px;}
  .metrolifeSliderArea .titleArea h1:after {font-size:60px;}
  .metrolifeSliderArea .titleArea h2 {font-size:45px;}
  .metrolifeSliderArea .titleArea h2:after {font-size:60px; top:0px;}
  .metrolifeSliderArea .metrolifeSlider .items a span {font-size:25px;}
  .metrolifeSliderArea .metrolifeSlider .items a small {font-size:20px; min-height:50px;}
  .metrolifeSliderArea .metrolifeSlider .items a i {font-size:21px;}

  .galleryArea{width: 90%;}
  .galleryArea .textContent p{font-size: 45px;}
}


@media screen and (max-width: 1250px) {
  .mainBottom {margin:20px 3%;}
  .mainBottom .textArea span {font-size:40px; margin-bottom:20px;}
  .mainBottom .textArea span i {font-size:35px;}
  .mainBottom .textArea small {font-size:25px;}
  .mainBottom .textArea small b {font-size:40px;}
  .mainBottom .textArea.right {padding-left:30px;}
  .mainBottom .imgArea img {width:100%;}
  .metrolifeSliderArea .titleArea h1 {font-size:35px;}
  .metrolifeSliderArea .titleArea h1:after {font-size:50px;}
  .metrolifeSliderArea .titleArea h2 {font-size:35px;}
  .metrolifeSliderArea .titleArea h2:after {font-size:50px;}

}

@media screen and (max-width: 1024px) {
  .hidden {display:none !important;}
  .satisTemsilcileri{width: 90%;}
  .galleryArea .imgContent iframe{ height: 200px;}
  .galleryArea .imgContent p{font-size: 13px;}
  .galleryAreaWrapper::before{height: 60%;}
  .galleryAreaWrapper .galleryArea{width: 90%;}
  .galleryAreaWrapper .galleryArea .textContent p{font-size: 35px; padding-top: 20px;}
  .galleryAreaWrapper .galleryArea .textContent p strong{display: block;}
  .galleryArea .imgContent.mt-60{margin: 40px auto 0;}
  .galleryAreaWrapper .galleryArea .imgContent .owl-nav{ position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); display: flex;}
  .galleryAreaWrapper .galleryArea .imgContent .owl-nav .owl-prev{display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 10px; background-color: white; border: 1px solid #244511; border-radius: 100%;}
  .galleryAreaWrapper .galleryArea .imgContent .owl-nav .owl-next{display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 10px; background-color: white; border: 1px solid #244511; border-radius: 100%;}
  .galleryAreaWrapper .galleryArea .imgContent .owl-nav .owl-prev img, .galleryAreaWrapper .galleryArea .imgContent .owl-nav .owl-next img{object-fit: contain; width: 50%;}
  .galleryAreaWrapper .galleryArea .textContent .btnArea a{font-size: 14px; padding: 5px; border: 2px solid #3d5f00; margin-right: 0;}
  .galleryAreaWrapper .galleryArea .textContent .btnArea a.active{border: 2px solid #ffa800; }
  .galleryAreaWrapper .galleryArea .textContent .btnArea .daireBtns.active{justify-content: center; top: 22px; left: unset; transform: unset;}
  .galleryAreaWrapper .galleryArea .textContent .btnArea .daireBtns.active a{padding: 2px 5px; font-size: 12px; border: 1px solid transparent;}
  .galleryAreaWrapper .galleryArea .textContent .btnArea .daireBtns.active a.active{ border: 1px solid #ffa800;}
  .satisTemsilcileri .satisTemsilcileriSlider .item{width: 150px;}
  .satisTemsilcileri .satisTemsilcileriSlider .item a{box-shadow: unset;}
  .contactWrapper{flex-direction: column;}
  .contactWrapper .right { display: flex; flex-direction: column; }
  .contactWrapper .left{width: 100%;}
  .contactWrapper .left h2{font-size: 30px;}
  .contactWrapper .left h2 br{display: none;}
  .contactWrapper .right{width: 100%;}
  .contactWrapper .right p{text-align: center; }
  .contactWrapper .right p:first-child strong{width: 100%; display: block;}
  .contactWrapper .right p:first-child strong br{display: block;}
  .contactWrapper .right p:first-child br:last-child{display: none;}
  .contactWrapper .right .order-1{ display: block; order: 1;}
  .contactWrapper .right .order-2{ display: block; order: 3;}
  .contactWrapper .right .order-3{ display: block; order: 2;}
  .contactWrapper .right iframe{width: 80%; height: 400px; margin: 0 auto 30px;}
  .contactWrapper .right p {font-size: 17px; padding: 30px;}
}

@media screen and (max-width: 800px) {
  body {background:none !important;}
  section#sect1 {background:none !important;}
  .mainSlider .item .desktop {display:none;}
  .mainSlider .item .mobile {display:block;}
  .mainBottom .row .col {width:100%;}
  .mainBottom .row.order .col:first-child {order:2;}
  .mainBottom .textArea span {font-size:30px; margin-bottom:20px;}
  .mainBottom .textArea span i {font-size:25px;}
  .mainBottom .textArea small {font-size:20px;}
  .mainBottom .textArea small b {font-size:25px;}
  .mainBottom .textArea.right {padding-left:0px;}
  .metrolifeSliderArea {margin:50px 0 30px 0; padding:0 2%;}
  .metrolifeSliderArea .titleArea h1 {font-size:25px; padding-top:10px;}
  .metrolifeSliderArea .titleArea h1:after {font-size:30px; line-height:30px;}
  .metrolifeSliderArea .titleArea h2 {font-size:25px;}
  .metrolifeSliderArea .titleArea h2:after {font-size:30px; line-height:30px; top:15px;}
  .metrolifeSliderArea .metrolifeSlider .owl-nav .owl-prev {left:0;}
  .metrolifeSliderArea .metrolifeSlider .owl-nav .owl-next {right:0;}

}