*{box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;}
html {scroll-behavior: smooth;}
.row:after, .row-underline:after {content: "";display: table;clear: both;}
.body{margin: 0;}
.logo{
    height: 50px;
    float:left;
    padding:5px;
}
.row-underline{
    border-bottom:1px solid #f1f1f1;
}
.container{
    width:100%;
    margin-left:0%;
    padding:0px 10px 20px 10px;
}
.sidenav {
    width: 100%;
    background: #ffffff;
}
.sidenav a {
    padding: 15px 10px 15px 10px;
    text-decoration: none;
    font-size: 15px;
    color: #064579;
    display: inline-block;
    text-transform: capitalize;
    transition: 0.5s;
    border-radius: 10px;
}
.sidenav a:hover {
    text-decoration: none;
    background-color: #f1f1f1;
    color: #064579;
    transition: 0.5s;
}
.langButton{
    border:1px solid transparent;
    background-color: transparent;
    color: #949292;
    padding: 0px 10px 0px 10px;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s;
    text-transform: capitalize;
    float: right;
}
.langButton:hover{
    color: #5c5a5a;
    text-decoration: underline;
}
.menuBars{
    border:none;
    background-color: transparent;
    color: #4b4949;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    display: none;
    cursor: pointer;
    transition: 0.5s;
    float: right;
    padding: 10px 10px 0px 0px;
}
.menuText{
    color: #646464;
    font-size: 18px;
    font-weight:bold;
    padding: 5px;
    text-transform: capitalize;
}
.container2, .container3, .container6, .container7 , .container9{
    width:90%;
    margin-left:5%;
}
.container4{
    width:90%;
    margin-left:5%;
    color: #4b4949;
}
.col-25{
    float:left;
    width: 25%;
    padding: 15px;
    position: relative;
}
.col-25-1{
    float:left;
    width: 25%;
    padding: 15px;
    position: relative;
}
.col-25-2{
    float:left;
    width: 25%;
    padding: 0px 5px 5px 5px ;
    position: relative;
}

.col-33-2{
    float:left;
    width: 33%;
    padding: 0px 5px 5px 5px ;
    position: relative;
}
.cardWhite{
    width: 100%;
    padding: 20px;
    text-align: justify;
    background-color: transparent;
    color:#064579;
    line-height: 25px;
    font-size: 15px;
}
.cardWhite h1{
    text-align: left;
    line-height: normal;
}
.cardPhoto, .cardPhoto1, .cardPhoto2, .cardPhoto3{
    width: 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 300px;
    border-radius:10px;
    padding: 15px;
    display: flex;
    align-items: flex-end; /* metni alta hizalar */
    justify-content: center; 
    overflow: hidden;

}

.container-img{
    width: 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 450px;
    display: flex;
    align-items:center; /* metni alta hizalar */
    justify-content: left; 
    overflow: hidden;
    background-image: url('img/main_web.png');
    padding: 35px;

}

.containerimg-cont{
    background-color: white;
    color:#073255;
    padding:15px;
    border-radius:10px;
    width: 60%;
    text-align: left;
    float: left;
    opacity: 0.95;
}
.containerimg-cont p{
    line-height: 25px;
    text-align: justify;
}

.containerimg-cont a{
    line-height: 25px;
    text-align: justify;
    color:#094b81;
    font-weight: bold;
}
.containerimg-cont a:hover{
    line-height: 25px;
    text-align: justify;
    color:#0c2d47;
}


.containerimg-cont h2{
    text-transform: capitalize;
    font-weight: bold;
    font-size:25px;
}

.cardPhoto{ background-image: url("img/c1.png");}
.cardPhoto1{ background-image: url("img/c2.png");}
.cardPhoto2{background-image: url("img/c3.png");}
.cardPhoto3{background-image: url("img/c4.png");}


.cardP-Container{
    background-color: #064579;
    color:white;
    padding:5px 5px;
    border-radius:10px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size:14px;
    text-transform: capitalize;
}
.row-text{
    padding: 20px;
    color:#4b4949;
    text-align: justify;
}
.row-line{
    padding: 20px;
}
.col-5{
    float:left;
    width: 100%;
    text-align: left;
    padding: 20px;
}
.col-50{
    width: 50%;
    float:left;
}
.col-50-1{
    float:left;
    width: 50%;
    padding: 0px 5px 5px 5px ;
    position: relative;
}

.col-50-2{
    float:left;
    width: 50%;
    padding: 0px 5px 5px 5px ;
    position: relative;
}

.cardFunc{
    width: 100%;
    padding: 30px;
    text-align: justify;
    background-color: #064579;
    color:white;
    line-height: 30px;
    border-radius: 10px;
}
.cardFunc h2{text-transform: capitalize;}

.cardFunctions{
    width: 100%;
    padding: 30px;
    text-align: justify;
    background-color: transparent;
    color:#064579;
    line-height: 30px;
    border-radius: 10px;
}
.cardFunctions h1{
    text-align: center;
}
.cardLines{
    width: 100%;
    padding: 30px;
    text-align: justify;
    background-color: transparent;
    color:white;
    line-height: 30px;
    min-height: 600px;
    border-radius: 10px;
    background-color: #034e8b;
}
.cardLines h2{
    text-align: center;
}

.cardBlue{
    width: 100%;
    padding: 30px;
    text-align: justify;
    color:white;
    line-height: 30px;
    border-radius: 10px;
    background-color: #064579;
    min-height: 700px;
}

.cardBlue h2{
    line-height: normal;
    text-align: center;
}

.cardLight{
    width: 100%;
    padding: 30px;
    text-align: justify;
    color:white;
    line-height: 30px;
    min-height: 500px;
    border-radius: 10px;
    background-color: #064579;
}

.row-line{
    padding: 20px;
    color:#4b4949;
    text-align: left;
}

.cardSupport{
    width: 100%;
    padding: 20px;
    text-align: justify;
    background-color: transparent;
    color:#4b4949;
    line-height: 30px;
    min-height: 620px;
    border-radius: 10px;
    border:2px solid #f1f1f1;
}
.cardSupport h2{
    text-align: left;
}
.cardSupport a{
    color:#5c5a5a;
    font-weight: bold;
}
.cardSupport a:hover{
    color:#444;
}
.col-33{
    float: left;
    width: 33.3%; 
    padding:10px;
}

.col-33-1{
    float: left;
    width: 33.3%; 
    padding:10px;
}

.container5{
    width:90%;
    margin-left:5%;
    color:#4b4949
}
.cardHazirlik{
    transition: 0.1s;
    width: 100%;
    padding: 20px;
    border:2px solid #d4d3d3;
    border-radius:10px;
    font-size: 12px;
    min-height: 30em;
    background-color: #ffffff;
}
.cardHazirlik p{
    font-size: 14px;
    line-height: 25px;
    color: #4b4949;
}

.cardHazirlik h1{
    font-size: 30px;
    color: #064579;
}

.cardHazirlik h2{
    font-size: 20px;
    color: #4b4949;
    text-transform: capitalize;
}
.cardYellow{
    padding: 30px;
    background: #064579;
    min-height: 8em;
    text-align: justify;
    border-radius:10px;
    color: white;
    line-height: 25px;
}
.cardYellow h2{
    text-align: left;
    line-height: normal;
}
.cardYellow a{
    color:#f1f1f1;
    font-weight: bold;
    text-align: left !important;
}
.cardYellow a:hover{
    color:white;
}
.cardContact{
    color:#4b4949;
    background-color: transparent;
    padding: 55px 40px;
    line-height: 35px;
    text-align: justify;
}
.cardContact h1{
    text-align: left;
}
.cardContact a{
    text-decoration: none;
    color: inherit;
    display: block;
    text-transform: capitalize;
    font-weight: bold;
}
.cardReferans{
    color:white;
    background-color: #4b4949;
    border-radius: 10px;
    padding: 50px;
    line-height: 35px;
    text-align: justify;
}
.cardReferans h1{text-align: left;}

.row-referans{
    padding: 60px 0px 60px 0px;
}

.cardMarka{
    color:white;
    background-color: #666363;
    border-radius: 10px;
    padding: 25px;
    line-height: 25px;
    text-align: justify;
    min-height: 650px;
    width: 100%;
}
.cardMarka a{
    color:#f2f2f2;
    text-decoration: underline;
    font-weight: bold;
    transition: 0.5;
}
.cardMarka a:hover{
    color:white;
    transition: 0.5;
}

.cardInfo{
    background-color: #4f8abb;
}

.cardReferans-Container{
    margin: auto;
    padding: 150px 15px;
}
.row-freq{
    color:#4b4949;
    text-align: left;
    padding: 10px;
}
.accordion {
    background-color: #ffffff;
    border-bottom:2px solid #064579 !important;
    color: #064579;
    cursor: pointer;
    padding: 20px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    transition: 0.4s;
}
.active{
    background-color: #064579; 
    color:#f1f1f1;
    border-radius:10px;
    transition: 0.4s;
}
.accordion:hover {
    background-color: #064579; 
    color:#f1f1f1;
    border-radius:10px;
}
.panel {
    padding: 0 5px;
    display: none;
    background-color: #ffffff;
    overflow: hidden;
    font-size: 15px;
    line-height: 30px;
}

.cardBottom{
    width: 100%;
    padding: 10px;
}

.cardBottom a{
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 14px;
    color: #888686;
    display: block;
    text-transform: capitalize;
}
.cardBottom p{
    padding: 0px 8px 0px 16px;
    text-decoration: none;
    font-size: 15px;
    color: #888686;
    display: block;
}
.cardBottom img{
    height: 30px;
    float:left;
    padding:0px;
}
.cardBottom h5{
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 15px;
    color: #064579;
    display: block;
    font-weight: bold;
    text-transform: capitalize;
}

.container8{
    width:100%;
    margin-left:0%;
    padding:20px;
}
.row-bottom{border-top:1px solid #f1f1f1}
.bottomText{
    color:#949292;
    text-align: left;
    font-size: 12px;
    display: inline-block;
}
.bottomButton{
    border:1px solid transparent;
    border-radius: 100%;
    background-color: transparent;
    color: #949292;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: 0.5s;
    text-transform: capitalize;
}

.cardImg{
    display: block;
    margin: auto;
    
}
.mobil-card{
    background-color: #064579;
    color:#f1f1f1;
    padding:20px;
    border-radius:10px;
    width: 100%;
    text-align: left;
    float: left;
}

.mobil-card a{
    color:#f1f1f1;
    font-size: smaller;
}

#displayNone{display: none;}
.langMobile{display: none;}
#mobil-header{display: none;}

@media (max-width: 1024px) {

    #referans{background-color: #4b4949;}
    .col-25{width: 50%; padding: 5px;}
    .col-25-1{width: 100%; padding:5px; }
    .col-25-2{width: 50%; padding:5px; }
    .col-5{width: 100%; padding:5px;}
    .col-50{width: 100%;}
    .col-50-1{width: 100%;}
    .col-50-2{width: 50%;}
    .col-33{width: 100%;}
    .col-33-1{width: 50%;}
    .col-33-2{width: 50%; padding:5px; }
    .cardHazirlik{min-height: 300px;}
    .container{padding:0px 0px 0px 0px;}
    .container2, .container3, .container4, .container5, .container6,.container7{width: 90%; margin-left:5%;}
    .cardPhoto, .cardPhoto1, .cardPhoto2, .cardPhoto3 {height: 400px; padding: 5px;}
    .cardP-Container, .cardWhite{padding: 5px;}
    .cardWhite h1{text-align: center; line-height: normal;}
    .cardFunctions{padding: 15px;}
    .cardFunctions h1{text-align: center; font-size: 25px;}
    .cardFunc h2{text-align: center; font-size: 20px;}
    .cardFunc{padding: 10px;}
    .cardLines {min-height: 680px; padding: 15px;}
    .cardLines h3{text-align: center;}
    #displayNone{display: block;}
    .row-referans{padding: 5px;}
    .cardReferans{padding: 5px;}
    .cardReferans-Container{padding: 15px 15px;}
    .cardMarka{min-height: 700px;}
    .cardImg{display:none}
    .cardSupport{min-height: 100px;}
    .accordion{font-size: 17px;}
    .cardLight{min-height: 300px;}

    .container-img{
    width: 100%;

    height: 320px;

    padding: 35px;

    }

    .containerimg-cont{
        width: 70%;
    }
    
}


@media screen and (max-width: 770px) {
    #web-header{display: none;}
    #mobil-header{display: block;}
    p{font-size: 14px ; line-height: 20px ;}
    li{font-size: 14px ;}
    h1{font-size: 22px ;}
    h2{font-size: 17px }
    h3{font-size: 16px }
    .menuBars{display:inline-block}
    .langDesktop{display: none;}
    .langMobile{display:block;}
    #menuDiv{display:none}
    .sidenav{overflow: hidden;}
    .sidenav a{display: block;}
    .container{padding:0px 0px 0px 0px;}
    .langButton{float: left; }
    .container2, .container3, .container4, .container5, .container6,.container7{width: 100%; margin-left:0%;}
    .col-25{width: 50%; padding: 5px;}
    .col-25-1, .col-25-2{width: 100%; padding:5px; }
    .col-50-1{width: 100%;}
    .col-50-2{width: 100%;}
    .col-33-1{width: 100%;}
    .col-33-2{width: 100%; padding:5px; }
    .cardPhoto, .cardPhoto1, .cardPhoto2, .cardPhoto3 {height: 200px; padding: 5px;}
    .cardP-Container, .cardWhite{padding: 5px;}
    .cardWhite h1{text-align: center; line-height: normal;}
    .cardFunctions{padding: 15px;}
    .cardFunctions h1{text-align: center; font-size: 25px;}
    .cardFunc h2{text-align: center; font-size: 20px;}
    .cardFunc{padding: 10px;}
    .cardLines {min-height: 100px; padding: 15px;}
    .col-33{width: 100%;}
    #displayNone{display: block;}
    .row-referans{padding: 5px;}
    .cardReferans{padding: 5px;}
    .cardReferans-Container{padding: 15px 15px;}
    .cardMarka{min-height: auto;}
    .cardHazirlik{min-height: 10em;}
    .cardImg{display:none}
    .cardSupport{min-height: 100px;}
    .accordion{font-size: 17px;}
    .cardContact{padding:15px}
    .cardBlue{min-height: 100px;}

    .container-img{
        width: 100%;
        height: 450px;
        align-items:flex-end; /* metni alta hizalar */
        padding: 0px 17px 0px 17px;
        background-image: url('img/main_mobil.png');
    }
    .containerimg-cont{
        background-color: #2c5d8b;
        color:#f1f1f1;
        padding:20px;
        border-radius:10px;
        width: 100%;
        text-align: left;
        float: left;
        opacity: 0.96;
    }
    .containerimg-cont a{
        line-height: 25px;
        text-align: justify;
        color:#f1f1f1;
        font-weight: bold;
        font-size: 15px;
    }
    .containerimg-cont a:hover{
        color:white;
    }

}
@media screen and (min-width: 1441px) {
    .container2, .container3, .container4, .container5, .container6, .container7, .container9{width: 70%;margin-left:15%}
}
@media screen and (min-width: 2000px) {
    .container2, .container3, .container4, .container5, .container6, .container7, .container9{width: 55%;margin-left:22.5%}
}