@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{margin: 0;padding: 0;box-sizing: border-box;}
body{
    width: 100%;
    height: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
nav{width: 100%;}
.flex{display: flex;justify-content: center;}
.pixel{width: 1400px;}
li{list-style: none;}
a{text-decoration: none;}

/*TOP-BAR START*/
#top-bar{position: fixed;z-index: 1000;width: 100%;background: #424242;}
.space{height: 115px}
.navbar-one{color: #000;height: 115px;}
.navbar-one-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    height: 115px;
}
.logo img{width: 210px}
.alt-con{display: flex;justify-content: space-between;align-items: center;}
.menu-hr{width: 0;height: 20px;border-right: 2px solid white;}
.alt{height: 60px;display: flex;justify-content: center;align-items: center;}
.alt li{margin: 17px;line-height: 0.5;}
.alt li a{
    text-decoration: none;
    text-transform: capitalize;
    font-size: 16px;
    margin: 20px;
    color: #fff;
    font-weight: 400;
    justify-content: center;
}
.alt li a h1{text-decoration: none;text-transform: capitalize;font-size: 20px;margin: 0 10px;color: #f7f7f7;font-weight: 500;letter-spacing: 2px;}

/*TOP-BAR END*/
.bottom-nav{display: none;}

/*HOME*/
.header{height: 875px;width: 100%;position: relative;background-image: url(../images/zemin.png);background-repeat: no-repeat;background-size: cover;}
.header-con{position: relative;height: auto;display: flex;justify-content: center;}
.header .sliders{position: relative;width: 100%;height: 100%;}
.header .slider-bg{width: 100%;position: relative}
.sliders .left-container{position: absolute;bottom: 0;left: 0;width: 50%}
.sliders .left-container img{width: 100%}
.sliders .right-container{position: absolute;bottom: 0;right: 0;width: 50%;display: flex;justify-content: center}
.sliders .right-container .slider-form{width: 80%;background: #3d3d3dc9;display: flex;justify-content: center;flex-wrap: wrap}
.sliders .right-container .slider-form-top{width: 100%;display: flex;justify-content: center}
.sliders .right-container .slider-form-top h1{
    width: 80%;
    background-image: linear-gradient(#8821a5, #540a69);
    clip-path: polygon(0% 0%, 100% 0%, 96% 100%, 4% 100%);
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 2px;
}
.sliders .right-container .form-in{width: 70%;margin: 20px 0}
.sliders .right-container .form-in p{color: white;padding: 20px 0;font-style: italic;font-weight: 300;font-size: 20px;letter-spacing: 1px;}
.sliders .right-container .form-in input{width: 100%;height: 50px;padding: 10px;margin: 20px 0;font-size: 20px;font-weight: 600;}
.sliders .right-container .form-in select{width: 100%;height: 50px;padding: 0 10px;margin: 20px 0;font-size: 20px;font-weight: 600;}
.colon-2{margin: 50px 0}
.colon-2 button{
    width: 100%;
    height: 50px;
    background: #d29954;
    background-image: linear-gradient(to right, #f3df99, #d29954, #f3df99);
    border-radius: 20px;
    color: white;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}
#rezervasyonForm{margin: 20px 0 50px 0}
/*HOME*/


/* TEAM */
.team-wrapper{position: relative;animation: up 1.5s ease;}
@keyframes up {
    0%{bottom: -100px;opacity: 0;}
    100%{bottom: 0;opacity: 1;}
}

#team{height: auto;width: 100%;}

.team-card{display: flex;justify-content: center;flex-wrap: wrap;position: relative}
.team-card-title{width: 100%}
.team-card-container{margin: 20px 0;}
.team-card{width: 25%;text-align: center;padding: 10px 30px;height: 300px;margin:0;border-right: 1px solid #d5d5d5}

.lisance-image img{width: 100%}
.lisance-card{display: flex;flex-wrap: wrap;justify-content: center}
.lisance-info{width: 100%}
.lisance-info h1{font-size: 20px;color: black;font-weight: 500;letter-spacing: -1px;line-height: 0.9;}

/* TEAM */


/* SERVICE */
.service-wrapper{position: relative;animation: up 1.5s ease;padding: 85px 0}
@keyframes up {
    0%{bottom: -100px;opacity: 0;}
    100%{bottom: 0;opacity: 1;}
}
#service{height: auto;width: 100%;background: #424242;}
.service-title{display: flex;align-items: center;position: relative}
.service-title h1{
    color: white;
    background: #424242;
    padding: 0 20px;
    font-size: 25px;
    font-weight: 500;
}
.service-hr{width: 100%;height: 0;border-top: 3px solid white;}
.service-card{display: flex;flex-wrap: wrap;}
.service-card-title{width: 100%}
.service-card-container{margin: 60px 0;}
.service-card{width: 25%;padding: 10px;border: 2px solid #6f7573;margin: 0 20px}
.service-card .service-image{
    width: 50px;
    height: 50px;
    display: flex;
    margin: 10px 0;
    justify-content: center;
    align-items: center;
    background: #20a487;
    border-radius: 50%;
}
.service-card .service-image img{width: 40px;height: 40px;padding: 5px;}
.service-card-title h1{color: white;font-weight: 400;font-size: 17px;}
.service-card-description{color: white;text-align: center;padding: 20px 5px;font-weight: 300;font-size: 15px;}
/* SERVICE */

/* ABOUT */
#about{background: #727270}
.about-wrapper{display: flex;align-items: center;padding: 85px 0}
.about-image{width: 50%;position: relative;display: flex;justify-content: center}
.about-info{width: 50%}
.image-bg{
    background: #424242;
    width: 400px;
    height: 400px;
    position: absolute;
    top: 20px;
    transform: translateX(-20px);
    z-index: 0;
    border-radius: 30px;
}
.about-image img{width: 400px;height: 400px;object-fit: cover;border-radius: 30px;position: relative;z-index: 10}
.about-info-wrapper{display: flex;align-items: center;flex-wrap: wrap}
.about-info-wrapper img{width: 50%;margin: 20px 0}
.about-info-wrapper p{padding: 10px 0;width: 100%;font-weight: 400;color: white;}
.about-info-wrapper div{padding: 10px 0;width: 85%;font-weight: 400;color: white;line-height: 1.5;}

#info{height: auto;width: 100%;padding: 85px 0;background: #727270;}
#info .card{width: 300px;height: 200px;padding: 10px;margin: 10px;border: 2px solid #727270;}
#info img{width: 50px;margin: 5px 0px;}
#info h1{color: #fff;font-size: 20px;padding: 5px 0px;font-weight: 400}
#info p{color: #fff;font-size: 16px;padding: 5px 0px;font-weight: 300}
#info h2{font-size: 17px;color: #fff;}
.clock {display: flex;align-items: center;}
/* ABOUT */



/* LIST BLOG */
.single-wrapper{margin: 50px 0;position: relative;z-index: 10}
.single-wrapper h1{color: #898989;font-size: 40px;font-weight: 500;}
.single-wrapper h2{font-size: 22px;font-weight: 300;color: #898989;}

.service-list{display: flex;flex-wrap: wrap;margin-bottom: 85px}
.blog-card-list{
    width: 250px;
    height: auto;
    margin: 10px 20px 10px 0;
    padding: 10px;
    border: 2px solid #424242;
    position: relative;
    z-index: 10;
}
.blog-card-list img{width: 100%;height: 215px;object-fit: cover;}
.blog-card-list h1{font-size: 20px;font-weight: 400;color: #898989;text-align: center;padding: 10px 0;}
.blog-card-list hr{width: 90%;color: #898989;margin: 10px;}
.blog-card-list span{color: #898989;font-size: 15px;font-weight: 200;padding: 0 10px;}
/* LIST BLOG */


/* SERTİFİKALAR */


.sertifika-card{
    width: 250px;
    height: 370px;
    margin: 20px;
}
.sertifika-card img{
    width: 100%;
    height: 370px;
    object-fit: contain;
}
.sertifika-card h1{
    font-size: 20px;
    color: #1a5768;
    font-weight: 500;
}


/* SERTİFİKALAR */



/* SINGLE BLOG */
.single-service{flex-wrap: wrap}
.article{width: 1100px;padding: 0 15px;}
.article img{width: 100%;}
.article .category img{width: 100%;height: 450px;object-fit: cover;}
.article h1{font-size: 40px;font-weight: 500;color: #424242;padding: 10px 0px;}
.article p{font-size: 19px;font-weight: 400;color: #424242;padding: 10px 0px;}
.category{font-size: 19px;font-weight: 400;color: #424242;padding: 10px 0px;position: relative;z-index: 10}
.middleware-hr{width: 100%;border-bottom: 2px solid #424242;margin: 10px 0px 20px;}
.example{width: 300px;padding: 30px 15px;border-left: 2px dashed rgba(0,0,0,0.2);position: relative;z-index: 10}
.example-card img{width: 100%;height: 160px;object-fit: cover;}
.example-card h1{font-size: 20px;font-weight: 400;color: #898989;text-align: center;padding: 10px;}
.single-article{padding: 30px;}
/* SINGLE BLOG */


/* CONTACT */
.box{
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 5fr 4fr;
    grid-template-areas:
        "form info"
        "form map";
    grid-gap: 20px;
    margin-top: 20px;
    animation: up 1.5s ease;
}
#contact{padding: 0 50px 50px 50px;}
#contact .contact{padding: 40px;background: rgba(0,0,0,0.0);box-shadow: 0 5px 35px rgba(0,0,0,0.15);}
#contact .contact h3{color: #424242;margin-bottom: 10px;font-size: 1.4em;}
#contact .formBox{position: relative;width: 100%;}
#contact .formBox .row50{display: flex;gap: 20px;}
#contact .inputBox{display: flex;flex-direction: column;margin-bottom: 10px;width: 50%;}
#contact .formBox .row100 .inputBox{width: 100%;}
#contact .inputBox span{color: #424242;margin-top: 10px;margin-bottom: 5px;}
#contact .inputBox input{padding: 10px;font-size: 1.1em;outline: none;text-transform: none;border: 1px solid #424242;}
#contact .inputBox textarea{padding: 10px;font-size: 1.1em;outline: none;border: 1px solid #424242;resize: none;margin-bottom: 10px;text-transform: none;min-height: 220px;}
#contact .inputBox textarea::placeholder{font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}
#contact .inputBox input[type="submit"]
{
    background: #424242;
    color: #e7e7e9;
    border: none;
    font-size: 1.1em;
    text-transform: none;
    max-width: 120px;
    font-family: 'Exo 2', sans-serif;
    cursor: pointer;
    padding: 14px 15px;
}
#contact .inputBox ::placeholder{color: #424242;}
#contact .info h3{color: #424242;}
#contact .info .infoBox div{display: flex;align-items: center;margin: 25px 0;}
#contact .info .infoBox div span{
    min-width: 40px;
    height: 40px;
    color: #fff;
    border: 2px solid #424242;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    font-family: 'Exo 2', sans-serif;
    border-radius: 50%;
    margin-right: 15px;
}
#contact .info .infoBox img{width: 32px;height: 32px;}
#contact .info .infoBox div p{color: rgba(0,0,0,0.5);font-family: 'Exo 2', sans-serif;font-size: 1.1em;}
#contact .info .infoBox div a{color: rgba(0,0,0,0.5);text-decoration: none;font-family: 'Exo 2', sans-serif;text-transform: none;font-size: 1.1em;}
#contact .sci{margin-top: 40px;display: flex;justify-content: center;}
#contact .sci li{list-style: none;margin-right: 15px;}
#contact .sci li a{font-size: 2em;color: #ccc;}
#contact .sci li a:hover{color: #dfae51;}
#contact .map{padding: 0;}
#contact .map iframe{height: 100%;width: 100%;}
.contact.form{grid-area: form;}
.contact.form.ilk{display: none;}
.contact.info{grid-area: info;}
.contact.map{display: flex;justify-content: center;align-items: center;background: black;}
.contact.map img{width: 300px;}
/* CONTACT */




/* FOOTER */
#footer{background: #424242;width: 100%;padding: 20px;}
.footer-wrapper{display: flex;flex-wrap: wrap;justify-content: space-between;margin: 85px 0}
.footer-ul{width: 70%}
.footer-ul ul{display: flex;align-items: center;flex-wrap: wrap}
.footer-ul ul a{width: 33%;text-align: start;margin: 15px 0}
.footer-ul ul li{color: #ffffff;font-weight: 500;font-size: 16px;text-transform: uppercase}
.footer-hr{width: 50%;height: 0;border-bottom: 3px solid #daa95f}
.footer-image{width: auto}
.footer-image img{width: 175px}
.footer-image h1{font-size: 14px;margin: 10px 0;color: #ffffff;width: 200px;font-weight: 400;}
/* FOOTER */

.alert.alert-danger {
    padding: 5px;
    background: #0e0e0e24;
}
.alert.alert-danger li{color: red;list-style: circle}
.navbar-one .menu{display: none;}
.navbar-second{display: none}
.single-wp{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #21a689;
    z-index: 1000;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}
.single-wp i{color: white;font-size: 35px;}

@media only screen and (max-width: 1400px) {
    .pixel{width: 96%}
    .alt li{margin: 0 5px}
    .alt li a h1{font-size: 14px}
    .logo img{width: 150px}
    .icons span{font-size: 14px}
    .service-card{width: 20%}
    .team-card{width: 25%}
    .footer-ul ul li{font-size: 14px}
    .footer-image img{width: 100px}
    #contact .box{
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "form"
            "info"
            "map";
    }
    #contact .map{min-height: 300px;}
    #contact .formBox .row50{display: flex;gap: 0;flex-direction: column;}
    #contact .inputBox{width: 100%;}
}
@media only screen and (max-width: 890px){
    .alt li a h1{margin: 0 3px}
    .icons i{font-size: 20px}
    .service-card{margin: 0 20px;width: 25%}
    .about-image{width: auto}
    .about-wrapper{flex-wrap: wrap;justify-content: center}
    .about-image img{width: 100%}
    .image-bg{width: 100%}
    .about-info{margin: 50px 0}
    .footer-hr{width: 100%;margin: 0 0 20px 0;}
    .footer-ul{width: 100%}
    .footer-ul ul{flex-wrap: wrap}
    .footer-image{width: 100%;margin: 50px 0;display: flex;justify-content: center;align-items: center;flex-wrap: wrap}
    .footer-image a {width: 100%;text-align: center;display: flex;justify-content: center;}
    .footer-image h1{font-size: 14px}
    #contact .contact{padding: 20px;}
}

@media only screen and (max-width: 500px){
    .header{height: 600px;width: 100%;}
    .header-con, .header-con.pixel{padding: 0; width: 100%}
    .header .sliders{display: flex;justify-content: center;flex-wrap: wrap}
    .sliders .left-container{bottom: 0;right: 10px;width: 55%;z-index: 10}
    .sliders .right-container{bottom: 20%;width: 75%;display: flex;justify-content: center}
    .sliders .right-container .slider-form{width: 100%;}
    .sliders .right-container .slider-form-top h1{width: 60%;height: 40px;font-size: 14px;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;}
    .sliders .right-container .form-in{width: 95%;}
    .sliders .right-container .form-in p{padding: 0;font-size: 13px;}
    #rezervasyonForm{margin: 10px 0 10px 0;}
    .sliders .right-container .form-in input{width: 100%;height: 40px;padding: 5px;margin: 5px 0;font-size: 14px;}
    .sliders .right-container .form-in select{width: 100%;height: 40px;padding: 0 5px;margin: 5px 0;font-size: 14px;}
    .colon-2{margin: 10px 0;text-align: end}
    .colon-2 button{width: 50%;height: 40px;font-size: 15px;}

    #contact{padding: 10px;}
    .alt{display: none}
    .single-wp{bottom: 65px;right: 10px;z-index: 1000}
    .bottom-nav{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: block;
        height: 50px;
        z-index: 1000;
        background: #d9e7e5;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    }
    .bottom-container{display: flex;align-items: center;}
    .bottom-container .fast-calling{width: 100%;display: flex;justify-content: center;align-items: center;height: 50px;background: #424242;}
    .bottom-container .fast-calling.wp{background: #009045}
    .bottom-container .fast-calling.locate{background: #5c2968
    }
    .pixel{width: 96%;}
    .fast-calling i{color: #fff;font-size: 17px;margin: 0 5px;}
    .fast-calling span{font-size: 14px;color: #fff;font-weight: 600;}
    .navbar-one{height: 95px}
    .navbar-one-wrapper{height: 95px}
    .logo img{width: 140px}
    .navbar-one .menu{display: initial}
    .navbar-one .menu img{width: 55px}
    .icons{display: none}
    .menu-img{display: none}
    .space{height: 95px}
    .menu-img2{right: 0px;width: 150px;top: 95px;opacity: 1;}
    .menu-img3{width: 165px;opacity: 1}
    .service-title h1{top: -30px;font-size: 25px}
    .service-description p{font-size: 14px}
    .service-card{width: 60%;margin: 0 15px}
    .service-card-container{margin: 60px 0 0 }
    .about-image img{width: 96%;left: 0;height: 275px}
    .image-bg{left: 0px;width: 96%;height: 275px}
    .service-description p{letter-spacing: 0.5px;}
    .about-info-wrapper p{padding: 10px 10px;width: 100%}
    .about-info-wrapper div{padding: 10px 10px;width: 100%}
    .team-title h1{top: -30px;font-size: 40px}
    .team-description p{letter-spacing: 0.5px;}
    .service-card-description{text-align: left}
    #team{align-items: center}
    .team-card{width: 25%;margin: 10px 0;height: auto;padding: 0 10px}
    .footer-ul ul a{width: 100%}

    .team-card-container{margin: 0}
    .lisance-info h1{font-size: 14px;color: #5f5f5f}

    .about-info{width: 100%}
    .footer-image img{width: 150px}

    .navbar-second{visibility: hidden;opacity: 0;width: 0;position: absolute;right: 0;height: 100vh;}
    .navbar-second.active{display: block;height: 100vh;width: 60%;visibility: initial;position: absolute;right: 0;opacity: 1;background: #434242;z-index: -1;top: 0}
    .alt2{height: auto;width: 100%;display: block;margin-top: 100px}
    .alt-con{flex-wrap: wrap}
    .alt2 li a h1{padding: 15px;color: white;font-size: 14px;font-weight: 400}
    .alt2 li{margin: 5px;width: 100%;line-height: .5;}
    .alt2 .menu-hr{width: 100%;height: 0;border-bottom: 1px solid #858585}
    .nav-links ul li.bottom::after{border-bottom: none;}

    .service-list a{width: 100%;}
    .service-list .blog-card-list{width: 100%;}
    .blog-card-list img{height: 250px}
    .blog-card-list h1{text-align: left}
    .blog-card-list span{padding:  0 5px}
    .example{border-left: none}

}