/* *************************************************** FONT IMPORT ************************************************** */
@font-face {
    font-family: Exo;
    src: url(../../../file/font/exo/Exo-Regular.ttf);
}
@font-face {
    font-family: Exo-SemiBold;
    src: url(../../../file/font/exo/Exo-SemiBold.ttf);
}
@font-face {
    font-family: Poppins;
    src: url(../../../file/font/poppins/Poppins-Regular.ttf);
}
@font-face {
    font-family: Poppins-SemiBold;
    src: url(../../../file/font/poppins/Poppins-SemiBold.ttf);
}
@font-face {
    font-family: Poppins-Bold;
    src: url(../../../file/font/poppins/Poppins-Bold.ttf);
}

html{ scroll-behavior: smooth; }
body{ background-color: inherit; font-family: Poppins, serif; background-color: #292929; }
pre{ display: table; }

#page-notice-area .body b{
    background-color: transparent;
}

#whatsapp-destek-hatti{
    z-index: 5; font-family: Exo-ExtraBold, sans-serif;
    background-color: #03529D; color: #FFF; padding: 30px 15px 30px 13px; border-radius: 0 15px 15px 0;
    position: fixed; top: 50%; right: 0; transform: translate(0, -50%) rotate(180deg); writing-mode: vertical-lr;
    box-shadow: 0 0 10px 1px rgba(0,0,0,0.4);
}
#whatsapp-destek-hatti:hover{ text-decoration: none; background-color: #03488a; }
#backToTop {
    position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; display: none;
    justify-content: center; align-items: center; background-color: #292929;
}
.breadcrumb a{ text-decoration: none; }
/* *************************************************** FONT IMPORT ************************************************** */




/* ************************************************** CHROME SCROLL ************************************************* */
::-webkit-scrollbar { height: 10px; width: 10px; background: #292929; }
::-webkit-scrollbar-thumb { background: #999; -webkit-border-radius: 20ex; }
::-webkit-scrollbar-corner { background: #FFF; }
/* ************************************************** CHROME SCROLL ************************************************* */




/* ****************************************************** NAV ******************************************************* */
#main-nav{ padding-left: 30px; padding-right: 30px; background-color: #292929; font-family: Exo, sans-serif; }
#main-nav .navbar-brand{ }
#main-nav .logo{ height: 60px; transition: .4s all; }
#main-nav{ height: 120px; transition: .4s all; }
#main-nav .nav-item{ position: relative; padding-left: 20px; padding-right: 20px; }
#main-nav .nav-item:after{ content: ""; position: absolute; height: 15px; width: 2px; right: -1px; top: 11px; background-color: #555; }
#main-nav .nav-item:last-child:after{ display: none; }

#main-nav.lowHeight{ height: 70px; background-color: #000; }
#main-nav.lowHeight .logo{ height: 45px; }
/* ****************************************************** NAV ******************************************************* */




/* ****************************************************** TEXT ****************************************************** */
.title-1  { color: #313136; font-size: 70px; font-family: Poppins-Bold, sans-serif;     }
.title-1w { color: #FFF;       }
.title-2  { color: #313136; font-size: 50px; font-family: Poppins-SemiBold, sans-serif; }
.title-2w { color: #FFF;    }

.paragraph-1  { font-size: 26px; color: #313136; }
.paragraph-1w { color: #FFF; }
.paragraph-2  { font-size: 22px; color: #313136; }
.paragraph-2w { color: #FFF; }

.page-section .title-2{ margin-bottom: 30px; }
.page-section .title-1{ margin-bottom: 30px; }
/* ****************************************************** TEXT ****************************************************** */




/* ************************************************** MAIN SLIDER *************************************************** */
#mainSlider .carousel-item{ height: 88vh;}
#mainSlider.page-slider .carousel-item{ height: 30vh;}
#mainSlider img{
    height: 100%; width: 100%; object-fit: cover; filter: brightness(50%) grayscale(20%);
}
#mainSlider .carousel-caption{ text-align: left !important; bottom: 22%; }
#mainSlider.page-slider .carousel-caption{  }
#mainSlider.page-slider .carousel-caption h5{ text-align: center; }
#mainSlider .carousel-caption h5{ text-align: left; font-size: 50px; margin-bottom: 15px; }
#mainSlider .carousel-caption p{ text-align: left; font-size: 26px; }
#mainSlider .button-wrapper{ text-align: left; margin-top: 60px; }
#mainSlider .button-wrapper .btn{  }
#mainSlider .button-wrapper .btn-slide-primary{ margin-right: 15px; border-width: 3px; }
#mainSlider .button-wrapper .btn-slide-primary:hover{ }
#mainSlider .button-wrapper .btn-slide-outline{ }
/* ************************************************** MAIN SLIDER *************************************************** */




/* ***************************************************** BUTTON ***************************************************** */
.btn-generic{ padding: 15px 30px; font-size: 20px; font-family: Poppins-SemiBold, sans-serif; }

.btn-1{ background-color: #578789; border-color: #578789; color: #FFF; }
.btn-1:hover{ background-color: #426768; color: #FFF; }

.btn-outline-1{ border-width: 3px; }

.page-section .button-wrapper{ margin-top: 30px; }
/* ***************************************************** BUTTON ***************************************************** */


/* *************************************************** BREADCRUMB *************************************************** */
.breadcrumb{}
.breadcrumb-item{ font-size: 20px; }
/* *************************************************** BREADCRUMB *************************************************** */


/* ************************************************** PAGE SECTION ************************************************** */
.page-section{ padding: 120px 0; min-height: 88vh; display: flex; align-items: center;  }
.page-section-separator{ height: 400px; }
/* ************************************************** PAGE SECTION ************************************************** */




/* ****************************************************** BOX ******************************************************* */
.box-1{ width: 76%; aspect-ratio: 1; position: relative; }
.box-1:hover img{ filter: brightness(50%) grayscale(40%) contrast(100%); }
.box-1 img{
    max-width: 100%; height: 100%; object-fit: cover; z-index: 1;
    filter: brightness(50%) grayscale(80%) contrast(70%); transition: 1s all;
}
.box-1 .curtain{ position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; }
.box-1 .play-button{
    height: 80px; width: 80px; background-color: #FFF; border-radius: 80px;
    position: absolute; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: .2s;
}
.box-1 .play-button i{ color: #313136; transition: .2s; }
.box-1 .play-button:hover{ background-color: #313136; }
.box-1 .play-button:hover i{ color: #FFF; }
.box-1 .decoration-box-1{
    height: 40%; width: 50%; background-color: #578789;
    position: absolute; bottom: 0; left: 0; z-index: 0;
    transform: translate(-35px, 30px);
}
/*hover*/
.box-1:hover .video-img{ transform: scale(1.1); }


.box-2{}
.box-2 .decoration-box-2{
    height: 45px; width: 55px; background-color: #578789; position: absolute; bottom: -7px; right: -9px;
    z-index: 0;
}
.box-2 .item{ position: relative; height: 120px; width: 120px; margin-bottom: 30px; }
.box-2 .item .inner{
    height: 100%; width: 100%; background-color: #292929; position: relative;
    display: flex; justify-content: center; align-items: center; z-index: 1;
    transition: .4s all;
}
.box-2 .item img{ width: 100%; height: auto; }
/*hover*/
.box-2 .item:hover .inner{ transform: scale(1.1); }


.box-3{}
.box-3 .item{ padding: 0 15px; }
.box-3 .item .inner{ transition: .4s all; }
.box-3 .item .img-wrapper{}
.box-3 .item .img-wrapper img{ max-width: 100%; height: 100%; object-fit: cover; }
.box-3 .item .content-wrapper{ padding: 30px; border: solid #999; border-width: 0 1px 1px 1px; transition: .4s all; }
.box-3 .item .content{
    margin-bottom: 15px;
    overflow: hidden; /* Metnin taşmasını engeller */
    text-overflow: ellipsis; /* Taşma durumunda üç nokta ekler */
    display: -webkit-box; /* Webkit tabanlı tarayıcılar için (Chrome, Safari) */
    -webkit-line-clamp: 3; /* Gösterilecek maksimum satır sayısı */
    -webkit-box-orient: vertical; /* Dikey yönlendirme */
    height: 72px;
}
.box-3 .item .content-wrapper a{ text-decoration: none; color: #578789; font-weight: 600; font-size: 18px; }
.box-3 .item:hover .inner{ box-shadow: 0 7px 40px 0 rgba(0,0,0,0.2); }
.box-3 .item:hover .content-wrapper{ border: solid transparent; border-width: 0 1px 1px 1px; }


.box-4{}
.box-4 .item{}
.box-4 .item a{}
.box-4 .item img{ transition: .4s all; width: 100%; aspect-ratio: 1; object-fit: cover;}
.box-4 .item:hover img{ filter: brightness(50%); }
/* ****************************************************** BOX ******************************************************* */




/* ***************************************************** SLICK ****************************************************** */
.slick-slider-wrapper { position: relative; }
.slick-slider-wrapper .nav-btn { color: #FFF; cursor: pointer; font-size: 50px; position: absolute; top: 34%; opacity: .25; transition: .2s; }
.slick-slider-wrapper .nav-btn:hover{ opacity: 1; }
.slick-slider-wrapper .prev { left: 0; transform: translate(-45px); }
.slick-slider-wrapper .next { right: 0; transform: translate(45px); }

.slick-box-1{  }
.slick-box-1 .item{ margin: 0 15px; }
.slick-box-1 img{ height: 300px; width: 100%; position: relative; object-fit: cover; cursor: pointer; border: 5px solid #FFF; transition: .2s; }
.slick-box-1 img:after{ content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: red; z-index: 1; }
.slick-box-1 .title{ color: #FFF; text-align: center; margin-top: 15px; }
/*hover*/
.slick-box-1 .item:hover img{ border: 10px solid #578789;  }

#project-slick-slider-wrapper .nav-btn{ top: 40%; }
/* ***************************************************** SLICK ****************************************************** */




/* ***************************************************** MODAL ****************************************************** */
#promoVideoModal{ background-color: transparent;}
#promoVideoModal .modal-dialog{ background-color: transparent; border: 0; }
#promoVideoModal .modal-content{ background-color: transparent; border: 0; }
#promoVideoModal .modal-header{ background-color: transparent; color: #FFF; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); border: 0; }
#promoVideoModal .modal-title{ font-size: 36px !important; }
#promoVideoModal .modal-body{ background-color: transparent; border: 0; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px 0 rgba(0,0,0,0.5); }
#promoVideoModal .modal-header .btn-close{ filter: invert(100%) brightness(100%); font-size: 26px; }

.special-modal-1 .modal-content{ border-radius: 30px; padding: 30px; }
.special-modal-1 .modal-body p{ font-size: 18px; }
.special-modal-1 .modal-header{ border-bottom: 0; font-size: 26px; }
.special-modal-1 .modal-title{ font-size: 26px !important; }
/* ***************************************************** MODAL ****************************************************** */








/* **************************************************** CONTACT ***************************************************** */
#contact{ color: #EEE; }
#contact .container-fluid{ height: 100%;}
#contact .row{ height: 100%; }
#contact .contact-info{  }
#contact .contact-info .line{ display: flex; margin-bottom: 30px; }
#contact .contact-info .icon{ width: 60px; text-align: center; margin-right: 20px;}
#contact .contact-info .content{ max-width: 70%; }
#contact .contact-info .title{ font-size: 20px; font-weight: 600; margin-bottom: 5px; }
#contact .contact-info .text{ font-weight: 500; font-size: 16px; color: #999; }
#contact .contact-info .text a{ color: inherit; }
#contact .contact-info .text a:hover{ text-decoration: underline; }
#contact .copyright{}
#contact .copyright .line-1{ display: flex;}
#contact .copyright .logo-wrapper{}
#contact .copyright .logo-wrapper img{ height: 60px; }
#contact .copyright .social-wrapper{ display: flex; align-items: end; justify-content: center; padding: 0 0 0 60px; }
#contact .copyright .social-wrapper .icon{ height: 36px; aspect-ratio: 1; background-color: #FFF; color: #292929; border-radius: 48px; margin: 0 5px; display: flex; justify-content: center; align-items: center; transition: .4s all; }
#contact .copyright .social-wrapper .icon:hover{ background-color: #000; color: #999; }
#contact .copyright .line-2{ font-size: 12px; color: #999; font-weight: 500; margin: 30px 0 0 0; }
#contact a{ text-decoration: none; color: #FFF; }
#contact .copyright .line-3{ margin-bottom: 10px; }
#contact .copyright .line-3 a{ font-size: 10px; font-weight: 400; color: #666; }
/* **************************************************** CONTACT ***************************************************** */








/* ****************************************************** MAP ******************************************************* */
#map{ height: 100%; width: 100%; position: relative; line-height: 0; }
#map form{
    position: absolute; left: 30px; bottom: 30px; max-width: 90%; width: 500px; background-color: #FFF;
    padding: 40px 30px 30px 30px; box-shadow: 0 8px 30px 0 rgba(0,0,0,0.2);
}
#map form input{ font-size: 14px; }
#map form textarea{ font-size: 14px; }
#map form .btn{ background-color: #578789; border-color: #578789; }
#map form .btn:hover{ background-color: #466a6c; }
#map iframe{ height: 100%; width: 100%; }
/* ****************************************************** MAP ******************************************************* */








/***************************************************** RESPONSIVE *****************************************************/
@media only screen and (max-width: 1400px){
    #contact .copyright .line-1{ display: block; }
    #contact .copyright .social-wrapper{ align-items: center; padding: 15px 0 30px 0; }
    #contact .copyright .logo-wrapper{ text-align: center; }
}
@media only screen and (max-width: 1200px){
    #main-nav.lowHeight{ height: auto; }
    #main-nav{ height: auto; padding-top: 15px; padding-bottom: 15px; }
    #main-nav .nav-item:after{ display: none; }
    #main-nav .navbar-nav{ padding-top: 30px; }
    #main-nav.lowHeight .logo{ height: 40px; }
}
@media only screen and (max-width: 992px){
    #main-nav .logo{ height: 40px; }
    #mainSlider .button-wrapper .btn-slide-primary{ margin-bottom: 15px; }
    #mainSlider .carousel-caption{ bottom: 10%; }
    #mainSlider .carousel-caption h5{ font-size: 36px; }
    #mainSlider .carousel-caption p{ font-size: 18px; }
}
@media only screen and (max-width: 768px) {
    #contact .copyright .line-2{ text-align: center; }
    .box-3 .item{ margin-bottom: 30px; }
    .box-3 .item:last-child{ margin-bottom: 0; }
    .slick-slider-wrapper .nav-btn{ display: none !important; }
    #mainSlider .carousel-caption{ bottom: 15%; }
    .partner-section.page-section .button-wrapper{ margin-bottom: 60px; text-align: center; }
    .partner-section.page-section .paragraph-2{ text-align: center; }
    .page-section .title-2{ text-align: center; }
    #map{ height: 50vh; }
    #map form{ display: none; }
    #contact .copyright .line-3{ text-align: center;}
}
@media only screen and (max-width: 576px){
    .slick-slider-wrapper .nav-btn{ display: none !important; }
    .box-2 .item{ height: 100px; width: 100px; }
    .page-section .title-1{ font-size: 50px; }
    #mainSlider .carousel-caption h5{ font-size: 30px; }
    #mainSlider .carousel-caption .btn{ font-size: 15px; }
}
/***************************************************** RESPONSIVE *****************************************************/