@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
html{scroll-behavior: smooth;font-family: 'Outfit', sans-serif;}
body{background: #fcfcf4}
*{box-sizing: border-box;margin: 0;padding: 0;}
ul{list-style: none}
a{text-decoration: none}
.flex{display: flex;justify-content: center;}
.pixel{width: 1450px;}
.space{height: 115px;}
.navbar{position: fixed;width: 100%; align-items: center;height: 115px;top: 0; z-index: 100;padding: 10px;transition: 0.5s ease;background: #fcfcf4;border-bottom: 5px solid #62af3f;border-top: 10px solid #62af3f;}
.navbar.nav{top: 0; background: #62af3f; transition: 0.5s ease;border-bottom: 4px solid white;border-top: none;height: 90px}
.navbar.nav .logo{width: 140px; transition: 0.5s ease;}
.navbar-container{display: flex; transition: 0.5s ease; justify-content: space-between;margin-top: 0;}
.navbar.nav .navbar-container{margin-top: 0; transition: 0.5s ease;}

.logo{width: 165px; transition: 0.5s ease;}
.logo img{width: 100%}
.wht{display: none}
.navbar.nav .lac{display: none}
.navbar.nav .wht{display: initial}
.navbar-list{display: flex;justify-content: space-between;align-items: center;width: 70%}
.navbar-list ul.navbar-list-ul{display: flex;justify-content: center;align-items: center}
.navbar-list ul.navbar-list-ul li a{font-size: 18px; font-weight: 700; color: #03452e; transition: 0.5s ease; display: flex;align-items: center}
.navbar-list ul li a{color: white}
.navbar-list ul li{cursor: pointer; height: 70px;display: flex;align-items: center;}
.navbar-list ul.navbar-list-ul li{position: relative}
.navbar.nav .navbar-list ul li a{color: white; transition: 0.5s ease;}
.navbar-list ul li .navbar-hr{width: 0;height: 20px;border-right: 2px solid #140666;margin: 0 20px}
.navbar.nav .navbar-list ul li .navbar-hr{border-right: 2px solid #fff;}
#menu-btn-second{margin: 0 25px; cursor: pointer}
.navbar-list ul.navbar-list-ul li ul li{
    width: 175px;
    padding: 12px 10px;
    margin: 0;
    height: auto;
    color: white;
    border-bottom: 1px solid #5f5f5f;
    font-weight: 400;
}
.navbar-list ul.navbar-list-ul li ul{
    width: auto;
    display: none;
    border-left: 1px solid #5f5f5f;
    border-right: 1px solid #5f5f5f;
    position: absolute;
    top: 65px;
    padding: 0;
    background: #140666;
}
.navbar-list ul.navbar-list-ul li:hover ul{display: block;}
.left-nav{position: absolute;left: 0;width: 80px;z-index: 1;opacity: 0.5;}
.right-nav{position: absolute;right: 0;width: 80px;z-index: 1;opacity: 0.5;}
.navbar.nav .navbar-list ul.navbar-list-ul li ul li{color: #fff;}
/*YANMENU*/

.yan-menu{
    width: 100%;
    height: 100vh;
    background-color: rgba(255,255,255,0.5);
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s ease;
    align-items: center;
}
.yan-menu-open{opacity: 1;visibility: initial;transition: 0.5s ease;}
.yan-menu-bg{
    background: #438e3c;
    height: 70vh;
    border-radius: 50px;
    position: relative;
    width: 80%;
    align-items: center;
}
.yan-menu-bg img{position: absolute;right: -64px;bottom: 16px;z-index: 1;}
.yan-menu-text{width: 50%;position: relative;left: 0;top: 0;}
.yan-menu-text ul{display: block;}
.yan-menu ul li{height: 40px;}
.yan-menu ul li ul{
    display: none;
    top: 0;
    background: #3b307e;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: -65px;
    padding: 10px 0;
    height: 45vh;
}
.yan-menu ul li ul li{width: max-content;}
.yan-menu-text ul li a{color: #fff;font-weight: 300;line-height: 1.3;font-size: 22px;}
.yan-menu-text ul li:hover a{color: #c4c4c4;}
#menu-btn-second2{position: absolute;right: 40px;top: 70px;}
#menu-btn-second2 img{width: 80px;cursor: pointer;}
/*YANMENU*/
/*Anasayfa*/
.slider{background-color: #ebebeb;}
.slider-line{width: 100%;height: auto;}
.slider img{width: 100%;height: 65vh;object-fit: cover;}
.circle{margin: 15px 0 25px}
.circle-container h1{font-size: 20px;color: #165731;font-weight: 400;text-align: center;margin: 10px 0;}
.circle-image {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 25px 10px 25px 10px;
    border-radius: 50%;
    border: 4px solid transparent; /* Border ile uyumlu olacak */
    background: linear-gradient(white, white), linear-gradient(to right, #559242, #103e1d);
    background-clip: padding-box, border-box;
    background-origin: border-box;
}
.circle-image img {width: 100%;height: 100%;object-fit: cover;border-radius: 50%;}
.about{
    position: relative;
    margin: 0;
    background-color: #006934 !important;
    padding: 10px 0;
    flex-wrap: wrap;
    border-top: 15px solid #5fb23f;
    border-bottom: 15px solid #5fb23f;
}
.about .mon{
    position: absolute;
    bottom: -85px;
    right: 0;
    z-index: 10;
}
.about-content.pd{
    padding: 100px 0;
    overflow: hidden;
}
.about-content{
    margin-top: 40px;
    padding: 50px 0;
    margin-bottom: 40px;
    position: relative;
}
.about-title{
    text-align: center;
}
.about-hr{
    width: 100px;
    height: 0;
    border-bottom: 5px solid #534795;
    border-radius: 20px;
    margin: 20px;
}
.about-title h3{color: #9AB4DB;margin: 10px;}
.about-title h1{
    color: #2e2e2e;
    font-size: 26px;
    font-weight: 600;
    width: 70%;
    line-height: 1.4;
}
.about-info{margin: 70px 0;align-items: center;}
.about-image{width: 50%;}
.about-text{width: 50%;}
.about-image img{width: 500px;}
.about-text p {
    margin: 25px 0;
    font-size: 20px;
    color: #777777;
    line-height: 1.5;
}
.about-text ul li{
    display: flex;
    align-items: center;
    margin: 20px 0;
}
.about-text ul{
    margin: 15px;
}
.about-text ul li .about-list-icon{
    margin: 0 20px;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.about-list-icon i{color: #fff;}
.about-text span{color: #fff;font-size: 18px;font-weight: 400;width: 90%;}
.about-btn{padding: 12px 5px;background: #ffda41;width: 185px;border-radius: 10px;transform: translateY(35px);}
.about-btn a{color: #165731;font-size: 18px;font-weight: 400;align-items: center;}
.about-btn a i{margin: 0 0 0 10px;}
.pasta-title h1{color: white;font-weight: 500;padding: 0 0 25px 30px;font-size: 35px;}
.about-text .bulut1{position: absolute;z-index: 10;top: 300px;width: 120px;right: 0;}
.buluts .bulut2{position: absolute;z-index: 10;top: 70px;right: 0;width: 150px;}
.buluts .bulut3{position: absolute;z-index: 10;top: 270px;width: 125px;left: 0;}
.padding-2{
    padding: 1.5rem 0 !important;
}
/*Anasayfa*/

.bottom-footer{padding: 10px 0;}
.bottom-footer h1{color: #140665;font-size: 17px;font-weight: 400;}
#hakkinda{background: #fcfcf4;height: 100vh}
#hakkinda .col{padding: 50px 0}
.hak{margin: 30px 0}
.hakkinda-title{color: #1e7035;transform: translateX(0px);font-size: 35px;font-weight: 200}
.hakkimizda-card{background: #c2d9c6;padding: 80px;transform: translateX(0px);height: 75vh;display: none;align-items: center;flex-wrap: wrap}
.hakkimizda-card h1{width: 100%;font-size: 1.9rem;margin: 0;font-weight: 500;color: #165731;}
.hakkimizda-card p{font-style: normal}
.misyon-card{background: #b5d1ba;padding: 80px;transform: translateX(0px);height: 75vh;display: none;align-items: center;flex-wrap: wrap}
.misyon-card h1{width: 100%;font-size: 1.9rem;margin: 0;font-weight: 500;color: #165731;}
.misyon-card p{font-style: normal}
.vizyon-card{background: #b1cfbb;padding: 80px;transform: translateX(0px);height: 75vh;display: none;align-items: center;flex-wrap: wrap}
.vizyon-card h1{width: 100%;font-size: 1.9rem;margin: 0;font-weight: 500;color: #165731;}
.vizyon-card p{font-style: normal}
.active{display: flex}
.info-container{position: relative}
.info-container p{font-size: 1.3rem;font-weight: 300;color: #165731;line-height: 1.7;}
.hakkimizda-top{display: flex;position: absolute;top: 0;left: 0px}
.hakkimizda-top-title{padding: 10px 50px;cursor: pointer}
.hakkimizda-top-title h1{font-size: 20px;color: white;font-weight: 300}
.hakkimizda-top-title.abouts{background: #62af3f;border-bottom-right-radius: 40px;border-right: 3px solid #fce5e5;position: relative;z-index: 4;}
.hakkimizda-top-title.misyon{background: #4a997f;border-bottom-right-radius: 40px;border-right: 3px solid #fce5e5;position: relative;z-index: 3;transform: translateX(-40px);}
.hakkimizda-top-title.vizyon{background: #236536;border-bottom-right-radius: 40px;border-right: 3px solid #fce5e5;position: relative;z-index: 2;transform: translateX(-80px);}

#ofis{background: #006934;height: 100vh;display: flex;align-items: center;border-top: 15px solid #5fb23f;border-bottom: 15px solid #5fb23f;}
.ofis-container{transform: translateX(25px);}
.ofis-card{display: flex;flex-wrap: wrap}
.ofis-title{color: white;transform: translateX(25px);font-size: 35px;font-weight: 200;margin: 30px 0}
.colon-1{background: #FCFCF4;width: 23%;padding: 20px;margin: 0 20px 20px 0}
.ofis-text h1.il{margin: 0;color: #c3c3c3;font-size: 25px;font-weight: 600;}
.ofis-text h1.bayi{margin: 0;color: #006934;font-weight: 700;font-size: 25px;text-transform: uppercase}
.ofis-hr{width: 250px;border-bottom: 4px solid #006934;margin: 5px 0;}
.ofis-text p{color: #90908f;font-size: 18px;margin: 10px 0}
.navigasyon-buton{margin: 10px 0}
.navigasyon-buton a{color: white;font-weight: 400}
.ofis-image iframe{width: 100%;height: 310px;filter: grayscale(1);}
.navigasyon-buton{width: 170px;background: #006934;display: flex;justify-content: center;padding: 5px}
.navigasyon-buton a:hover{color: white;text-decoration: none !important;text-transform: none !important;}
.navigasyon-buton a{letter-spacing: 2px;font-weight: 300;}
.navigasyon-buton img{width: 20px;height: 20px;margin: 0 0 0 10px}

.footer{width: 100%;display: flex;justify-content: center;align-items: center;background-color: #FCFCF4;}
.footer .web-icon{width: 200px;padding: 20px;}
.footer .web-icon img{width: 100%;}
.bottom-footer{width: 100%;display: flex;justify-content: center;align-items: center;background-color: #FCFCF4;}
.bottom-footer a{color: #012619}
.bottom-nav{display: none}

@media (max-width: 1150px) {
    .pixel{width: 97%;}
    .slider{height: 600px;}
    .slider-line{height: 600px;}
    .slider-line img{height: 500px;}
    .about-image img{width: 300px;}
    .about-content{padding: 10px 0;}
    .navbar-list ul li .navbar-hr{margin: 0 15px;}
    .navbar-list ul li a{font-size: 16px;}
    .navbar-list{width: auto}
    .buluts .bulut3{width: 80px}
    .buluts .bulut2{width: 80px}
    .about-text .bulut1{display: none}
}
@media (max-width: 991px) {
    .navbar-list ul li{height: 40px;}
    .logo{width: 115px;}
    .navbar-container{margin-top: 0;padding: 10px;}
    .about{overflow-x: revert;}
    .navbar-list ul.navbar-list-ul{display: none;}
    .slider{height: 500px;}
    .slider-line{height: 500px;}
    .section-top{padding: 2rem 0 !important;}
    .padding-2{padding: 1.5rem 0 !important;}
    .about-title h1{width: 80%;}
    .about .mon{width: 500px;bottom: -45px;}
    .about-info{margin: 20px 0;}
    .about-text p{font-size: 18px;}
    .about-title h1{font-size: 20px;}
    .yan-menu-bg{height: 45vh;width: 80%;}
    .hakkimizda-card{transform: translateX(0px)}
    .misyon-card{transform: translateX(0px)}
    .vizyon-card{transform: translateX(0px)}
    .hakkimizda-top{left: 0}
    .hakkinda-title{transform: translateX(0px)}
    .colon-1{width: 30%}
    .about-text span{width: 75%}
}
@media (max-width: 800px) {
    .pixel{width: 95%;}
    .about-info{flex-wrap: wrap;}
    .about-image{width: 100%;}
    .about-text{width: 100%;}
    .buluts{opacity: 0.5;}
    .bulut1{opacity: 0.5;}
    .about-text p{color: #161616;}
    .hakkimizda-top{width: 100%}
    .hakkimizda-top-title{padding: 10px 20px;width: 25%}
    .hakkimizda-top-title.abouts{border-bottom-right-radius: 0;border-right: none}
    .hakkimizda-top-title.misyon{border-bottom-right-radius: 0;transform: translateX(0px);border-right: none}
    .hakkimizda-top-title.vizyon{border-bottom-right-radius: 0;transform: translateX(0px);border-right: none}
    .hakkimizda-top-title.company{border-bottom-right-radius: 0;border-right: 0px solid #fce5e5;transform: translateX(0px)}
}
@media (max-width: 500px) {
    .hakkimizda-card h1{margin: 10px 0 30px 0}
    .misyon-card h1{margin: 10px 0 30px 0}
    .vizyon-card h1{margin: 10px 0 30px 0}
    #hakkinda{height: auto}
    .ofis-title{transform: translateX(0);font-size: 30px}
    #ofis{height: auto}
    .ofis-container{transform: translateX(0px);}
    .colon-1{width: 100%;margin: 0 0 20px 0;}
    .pasta-title h1{font-size: 30px;padding: 30px 0 10px 30px;font-weight: 400}
    .about-text span{font-size: 17px;font-weight: 200}
    .hakkinda-title{transform: translateX(0px)}
    .hakkimizda-card{transform: translateX(0px);padding: 20px;height: auto}
    .misyon-card{transform: translateX(0px);padding: 20px;height: auto}
    .vizyon-card{transform: translateX(0px);padding: 20px;height: auto}
    .hakkimizda-top{left: 0;overflow-x: scroll;position: relative}
    .hakkimizda-top-title h1{font-size: 16px}
    .hakkimizda-top-title{width: 135px;}
    .bottom-footer{margin-bottom: 50px}
    .bottom-nav{display: initial;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 1000}
    .bot-nav{list-style: none;margin: 0;padding: 0;width: 100%;display: flex}
    .bot-nav li{background: #f6050c;padding: 5px 0;width: calc(100% / 5);}
    .bot-nav li img{width: 25px;height: 25px;object-fit: contain;margin: 3px 0}
    .bot-nav li a{color: white;display: flex;flex-wrap: wrap;justify-content: center;align-items: center}
    .bot-nav li span{font-size: .5rem;width: 100%;text-align: center;font-weight: 200}
    .navbar-list{width: auto;position: absolute;right: 20px;top: 23px;}
    .space{height: 75px}
    .logo img{width: 95%;}
    .navbar{top: 0;border-top: none;height: 75px;border-bottom: 3px solid #62af3f;}
    .navbar.nav{top: 0;border-top: none;height: 75px;border-bottom: 3px solid #fff;}
    .slider{height: auto;}
    .slider-line{height: auto;}
    .slider-line img{height: auto;}
    .navbar.nav .logo{width: 115px}
    .circle{margin: 10px 0 10px}
    .about-content.pd{padding: 10px 0}
    .circle-image{width: 70px;height: 70px;margin: 10px 5px;border: 4px solid transparent;}
    .buluts{opacity: 1;}
    .yan-menu-bg img{right: -33px;bottom: 29px;}
    .navbar-list ul li{height: 30px}
    .yan-menu-bg{position: relative;height: 70vh;top: 0;border-radius: 30px;width: 80%;}
    .yan-menu-text ul li a{font-size: 18px;line-height: 1.5;}
    #menu-btn-second2{right: 20px;top: 60px;}
    #menu-btn-second2 img{width: 45px;}
    .yan-menu-text{width: 70%;z-index: 1;}
    #menu-btn-second{margin: 0;}
    .navbar-container{margin-top: 0;padding: 0;justify-content: center;}
}