@font-face {
    font-family: TildaSans;
    src: url("../fonts/TildaSans-VF.woff2") format("woff2");
}

:root {

    --main-color: #0B0B3E;
    --second-coler: #38a21f;
    --second-color-hover: #1b3f71;
    /* --bs-modal-width: 560px; */
}

body {
    font-family: TildaSans;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100vw;
}
/* h1, h2, h3, h4, h5{
    min-width: max-content;
} */
a {
    text-decoration: none;
    color: initial;
}
.p0{
    padding: 0;
}
.mr-30{
    margin-right: 30px;
}
.blank-body {
    width: 100vw;
    min-height: 100vh;
}

.header {
    height: 80px;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 200;
    padding: 0 40px;
    top: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0);
    transition: background-color .3s linear;
    background-color: #fff;
    overflow: hidden;
}

.header a {
    text-decoration: none;
}

.logoside {
    height: 80px;
    width: 240px;
}

.imglogo {
    margin-right: 30px;
    vertical-align: middle;
    max-height: 80px;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
ul.mobile_nav li a.active {
    color: #38a21f !important;
    opacity: 0.7;
    -webkit-box-shadow: inset 0px -1px 0px 0px #55ba3d;
    box-shadow: inset 0px -1px 0px 0px #55ba3d;
}

.navbar-centered {
    justify-content: center;
}

.centerside {
    font-size: 18px;
    color: #000000;
    font-weight: 500;
    font-family: TildaSans;
    width: 100%;
}

.nav-link {
    font-family: TildaSans;
}

.centerside .nav-link:not(.active):not(.tooltipstered)::after {
    content: '';
    position: absolute;
    left: 0;
    border-bottom: 0px solid #20083d;
}

.navbar-corner-button {
    display: none;
}

.nav {
    flex-direction: row;
    display: flex;
    height: 80px;
}

.nav-box {
    padding: 0px !important;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
    margin: 0 20px;
}

.nav-box:first-child {
    margin-left: 0;
}

.nav-box:last-child {
    margin-right: 0;
}

.nav-box:hover {
    opacity: 1;
    color: #38a21f !important;
    -webkit-box-shadow: inset 0px -1px 0px 0px #55ba3d;
    box-shadow: inset 0px -1px 0px 0px #55ba3d;
    -webkit-transition: color 0.3s ease in out, opacity 0.3s ease in out;
    transition: color 0.3s ease in out, opacity 0.3s ease in out;
}

.nav li {
    padding: 0 5px;
    height: 80px;
    display: flex;
    align-items: center;
}

.head-right {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    min-width: 275px
}

.rightcontainer {
    display: block;
    text-align: right;
    width: auto;
    position: relative;
    float: right;
}

.sociallinks {
    padding-left: 30px;
    display: table-cell;
    vertical-align: middle;
    line-height: 0;
}

.sociallinks_wrapper {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.sociallinks_item {
    display: table-cell;
    vertical-align: middle;
    padding: 0 5px;
}

.right_langs {
    padding-left: 30px;
    display: table-cell;
    vertical-align: middle;
}

.right_buttons_wrap {
    display: table;
    width: auto;
    float: right;
}

.right_langs_lang {
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px;
    font-family: 'TildaSans', Arial, sans-serif;
    font-size: 16px;
    color: #000000;
    word-break: keep-all;
}

.right_langs_lang a {
    font-size: 18px;
    color: #000000;
    font-weight: 500;
    font-family: 'TildaSans';
}

#section1 {
    background-color: #0B0B3E;
    width: 100vw !important;
    max-width: 100%;
    height: 631.2px;
    display: flex;
    height: calc(100vh - 80px);
    height: 832px;
    min-height: 340px;
    display: grid;
    grid-template-columns: 55% 45%;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "s1l1 s1r"
        "s1l2 s1r"
        "s1l3 s1r";


}

.s1-leftside {
    width: 55%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-evenly;
    justify-content: space-evenly;
    /* zoom: var(--vw-birim); */
    
}

.s1-title {
    width: 95%;
    height: fit-content;
    zoom: var(--vw-birim1200);
    grid-area: s1l1;
    order: 1;
    margin: auto 0;
}

.s1-title h2 {
    font-family: TildaSans;
    font-weight: 300;
    font-size: 48px;
    line-height: 74px;
    color: #fff;
    text-size-adjust: auto;
}

.s1-subtext {
    font-size: 20px;
    font-weight: 200;
    line-height: 31px;
    color: #fff;
    height: fit-content;
    zoom: var(--vw-birim1200);
    grid-area: s1l2;
    order: 2;
    margin: auto 0;
}
.s1-button-wrapper{
    zoom: var(--vw-birim1200);
    grid-area: s1l3;
    order: 5;
}
.s1-button {
    width: 180px;
    height: 48px;
    font-size: 18px;
    line-height: 48px;
    font-weight: 400;
    color: #fff;
    background-color: var(--second-coler);
    border: 1px solid #fff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
    order: 4;
}

.s1-rightside {
    height: 100%;
    aspect-ratio: 1/1;
    width: 44vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    grid-area: s1r;
    order: 3;
}

.circle-turn {
    transform-origin: center center;
    animation: rotate 90s linear infinite;

}

.turnimg-wrapper {
    overflow: hidden;
}

.square-box {
    aspect-ratio: 1 / 1;
    height: fit-content;
    position: relative;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    /* padding: 20px; */
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
        animation-timing-function: 0;
    }

    100% {
        transform: rotate(360deg);
    }
}

.turnimage {
    object-fit: cover;
}

.center-image {
    width: 88%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;

}

.center-image img {
    max-width: 100%;
    max-height: 100%;
    transition: opacity .2s ease-in-out;
}

.mobile-nav-container {
    background-color: #fff;
    width: 100%;
    min-height: 400px;
    font-size: 18px;
    font-weight: 500;
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    top: 150px;
    z-index: 50;
    min-height: 500px;

}

.mobile-nav-container.visible {
    display: block;
    /* Görünür olduğunda */
}

.hidden {
    display: none;
    /* Gizlemek için kullanılabilir */
}

.mobile-nav-container ul {
    list-style: none;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 40px;
}

.mobile-nav-container a {
    text-decoration: none;
    color: #0B0B3E;
    font-family: TildaSans;

}

.mobile-sociallinks {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.mobile-sociallinks ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin-top: 40px;
}

ul.mobile_nav {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    line-height: 50px;
}

.mobile-langs {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    font-weight: 500;
    justify-content: center;
}

/* S2 */

#s2 {
    padding: 0;
    margin: auto;
    margin-top: 100px;
}

.s2-text-box {
    background-color: #fff;
    grid-area: s2box;
    justify-self: stretch;
    padding: 25px;
    padding-top: 60px;

}

.s2-container {
    display: grid;
    grid-template-columns: auto 500px;
    /* grid-template-columns: minmax(60%, auto) minmax(350px, 500px); */
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 85px auto auto;
    grid-template-areas:
        "s2head s2head"
        "s2box s2side"
        "s2foot s2side";
}
#s2header{
    grid-area: s2head;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    padding: 0 30px;
}
h2.s2h {
    font-size: 54px;
    font-weight: 400;
    line-height: 84px;
    margin-right: 30px;
    min-width: max-content;

}

.s2-text-box p {
    font-size: 22px;
    line-height: 31px;
    font-weight: 400;
}

.s2-text-box p {
    margin-bottom: 50px;
}
.s2-text-button{
    background-color: var(--second-coler);
    color: #fff;
    border:none;
    border-radius: 10px;
    padding: 10px 20px;
    margin-bottom: 50px;
    display: none;
}
.s2side {
    grid-area: s2side;
    align-items: center;
    text-align: center;
    padding-bottom: 65px;
    background-color: var(--main-color);
    margin-top: -100px;
}

.linebox {
    width: 889px;
    height: 4px;
    background-color: var(--second-coler);
    position: relative;
    float: right;
    right: 30px;
    top: 66px;
}

.flex-linebox {
    height: 4px;
    /* min-width: 100px; */
    width: -webkit-fill-available;
    background-color: var(--second-coler);
    float: right;
    /* margin-right: 30px; */
}





.temizle {
    float: none;
}

button.cus2, .cus2 {
    position: sticky;
    top: 50vh;
    right: 30px;
    width: 248px;
    height: 55px;
    background-color: var(--second-coler);
    color: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    font-size: 18px;
    line-height: 55px;
    font-weight: 400;
    place-self: center;
    margin: 0 auto;
    margin-top: 130px;
    /* margin-left: 120px; */
    transition: transform 0.2s ease;
}

button.cus2:hover {
    background-color: var(--second-color-hover);
}

.s2foot {
    grid-area: s2foot;
    color: #fff;
    padding-top: 50px;
    padding-left: 30px;
    padding-right: 60px;
    background-color: var(--main-color);
}

.s2fat {
    font-size: 48px;
    line-height: 74px;
    font-weight: 300;
}
.s2fat-ger {
    font-size: 38px;
    line-height: 74px;
    font-weight: 300;
    min-height: 148px;
}
.s2foot-autotype .ger{
    font-size: 38px !important;
}

.typed-cursor {
    color: var(--second-coler);
}

.s2ft {
    font-size: 24px;
    line-height: 37px;
    font-weight: 300;
    padding: 30px 0;
}

#s3 {
    margin-top: 100px;
}

.s3header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    width: 100%;
    overflow-y: hidden;
}

.s3header-h {
    font-size: 54px;
    line-height: 84px;
    font-weight: 400;
    color: #000000;
    min-width: max-content;
    margin-right: 50px;
}

.s3header-bar {
    height: 4px;
    padding-right: 30px;
    width: 100%;
    background-color: var(--second-coler);
    align-self: center;
}

.s3products {
    display: flex;
    transition: 0.s ease-in-out;
    flex-wrap: wrap;
}

.s3-product-cards {
    width: 50vw;
    aspect-ratio: 233 / 152;
    height: 480px;
    height: 37.5vw
}

.s3-card1-inner,
.s3-card2-inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding: 20px 40px;
    text-align: center;
}






/* CARD 1 */

.s3-card1 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url('../images/Frame_8_3.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: all 0.5s ease;
    transition: background-size 0.5s ease-in-out, background-position 0.5s ease-in-out;
}

.s3t1 {
    font-size: 38px;
    line-height: 47px;
    font-weight: 300;
    color: #fff;
}

.s3t2 {
    font-size: 22px;
    line-height: 34px;
    font-weight: 300;
    color: #fff;
    margin-top: 20px;
}

.button-wrapper1 {

    position: absolute;
    margin-top: 40px;
    width: 100px;
    height: 45px;
    z-index: 23;

}

.btn-card1 {
    position: absolute;
    margin-top: 10px;
    z-index: 1;
    color: #fff;
    border: 1px solid #fff;
    background-color: var(--second-coler);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -mox-border-radius: 10px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    height: 45px;
    font-size: 14px;
    padding: 0 30px;
    opacity: 0;
    transform: translateY(0);
    /* animation: hoverout 0.2s ease forwards; */
    transition: opacity 0.2s ease, transform 0.2s ease;

}

.s3-card1-inner.active .s3t1,
.s3-card1-inner.active .s3t2 {
    transform: translateY(-40px);
    transition: transform 0.2s ease;
}

.s3-card1-inner.active .btn-card1 {
    opacity: 1;
    transform: translateY(40px);
}

.s3-card1-layer,
.s3-card2-layer {
    background-image: -webkit-linear-gradient(top, rgba(11, 11, 62, 0.9), rgba(11, 11, 62, 0.7));
    width: 100%;
    height: -webkit-fill-available;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.2s ease;

}

.s3-card1:hover .s3-card1-layer,
.s3-card2:hover .s3-card2-layer {
    opacity: .8;
    transition: opacity 0.2s ease;
}

.s3-card1:hover {
    background-size: 120%;
    background-position: center;
    /* Arka planın konumunu sabit tut */
    transition: background-size 0.2s ease, background-position 0.2s ease;
    transition: all ease-in-out .25s;
}

.s3-card2:hover {
    background-size: 110%;
    /* Resmi %120 boyutunda göster */
    background-position: center;
    /* Arka planın konumunu sabit tut */
    transition: background-size 2s linear, background-position 2s linear;

}

/* CARD 2 */

.s3-card2 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url('../images/20231208_201200__1_-.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: all 0.5s ease;
    transition: background-size 2s linear, background-position 2s linear;
}

.s3t3 {
    font-size: 38px;
    line-height: 47px;
    font-weight: 300;
    color: #fff;
}

.s3t4 {
    font-size: 22px;
    line-height: 34px;
    font-weight: 300;
    color: #fff;
    margin-top: 20px;
}

.button-wrapper2 {

    position: absolute;
    margin-top: 40px;
    width: 100px;
    height: 45px;
    z-index: 23;

}

.btn-card2 {
    position: absolute;
    margin-top: 10px;
    z-index: 1;
    color: #fff;
    border: 1px solid #fff;
    background-color: var(--second-coler);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -mox-border-radius: 10px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    height: 45px;
    font-size: 14px;
    padding: 0 30px;
    opacity: 0;
    transform: translateY(0);
    /* animation: hoverout 0.2s ease forwards; */
    transition: opacity 0.2s ease, transform 0.2s ease;

}

.s3-card2-inner.active .s3t3,
.s3-card2-inner.active .s3t4 {
    transform: translateY(-60px);
}

.s3-card2-inner.active .btn-card2 {
    opacity: 1;
    transform: translateY(40px);
}

.s3t3,
.s3t4,
.s3t1,
.s3t2 {
    transform: translateY(0);
    transition: transform 0.2s ease;
}

.btn-card1:hover {
    background-color: var(--second-color-hover);
}

.btn-card2:hover {
    background-color: var(--second-color-hover);
}


/* S4 */


#s4 {
    padding: 0;
    margin: auto;
    margin-top: 100px;
    margin-bottom: 200px;
}

.s4-text-box {
    background-color: #fff;
    grid-area: s4box;
    justify-self: stretch;
    padding: 25px;


}

.s4-container {
    height: auto;
    display: grid;
    /* grid-template-columns: minmax(60%, auto) minmax(300px, 500px); */
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 85px auto auto;
    grid-template-areas:
        "s4head s4head"
        "s4box s4side"
        "s4foot s4side";
}
.s4-header{
    grid-area: s4head;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    padding: 0 30px;
}
.s4h{
    min-width: fit-content;
}
h2.s4h {
    font-size: 54px;
    font-weight: 400;
    line-height: 84px;
    margin-right: 50px;
}
.s4h a{
    text-decoration: none;
}

.s4-text-box p {
    font-size: 22px;
    line-height: 31px;
    font-weight: 400;
}

.s4-text-box p {
    margin-bottom: 50px;
}

.s4side {
    grid-area: s4side;
    align-items: center;
    text-align: center;
    padding-bottom: 65px;
    background-color: var(--main-color);
    margin: auto;
    margin-top: -100px; 
    height: calc(100% + 100px);
}
.s4side2{display: none;}

.s4side-sliding {
    width: 80%;
    float: right;
    margin-right: 30px;
    padding-top: 100px;
    height: 100%;
}

.img-slide {
    position: sticky;
    top: 150px;
}

.s4-details-btn {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    color: #fff;
    background-color: var(--second-coler);
    height: 50px;
    width: 250px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    -webkit-border-radius: 10px
}

.s4foot {
    color: #fff;
    font-size: 22px;
    line-height: 34px;
    font-weight: 300;
    padding: 30px;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    background-color: var(--main-color);
}

.s4-certificates {
    margin: 50px 0;
    max-width: 70%;
}

.s4-img-container {
    display: flex;
    flex-direction: row;
    margin: 50px 0;
    justify-content: space-between;
}

.cerimg {
    width: 100px;

}

/* S5 */

#s5 {
    min-height: 600px;
    margin-top: 100px;

}

.s5-container {
    margin-top: 100px;
}

.s5-header {
    margin: 0;
    padding: 0 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 134px;
    justify-content: space-between;
}

.s5headbox {
    display: flex;
    align-items: center;
    padding-right: 70px;
    min-width: max-content;

}
.s5linebox{
    width: 100%;
    display: flex;
    align-items: center;
}

h2.s5h {
    font-size: 54px;
    font-weight: 400;
    line-height: 84px;
    width: fit-content;

}

#s5 .linebox {
    width: 810px;
    height: 4px;
    background-color: var(--second-coler);
    position: relative;
    float: right;
    right: 30px;
    top: 66px;
}

.s5-main {
    display: flex;
    flex-wrap: wrap;
    padding: 30px;
    padding-top: 50px;
    min-height: 350px;
}
.s5-main-text{
    width: 100%;
}

.s5-main-left, .s5-main-right {
    padding: 30px;
    width: 50%;
}

.s5h5 {
    font-size: 26px;
    line-height: 40px;
    font-weight: 500;
    color: #000000;
    min-width: min-content;
}

.s5-contact-box {
    display: flex;
    align-items: center;
    width: 270px;
    justify-content: space-between;
    padding: 10px 0;
}

.s5-contact-box-number {
    font-size: 22px;
    line-height: 34px;
    font-weight: 400;
    color: #000;
}

.s5-contact-box-img {
    width: 42px;
    height: 42px;
}

#s5 a {
    text-decoration: none;
}

.s5-adress {
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    color: #000;
    padding-top: 10px;

}

.s5-main-right {
    display: flex;
    align-items: flex-start;

}

.s5-main-right-container {
    width: 100%;
}

.s5-mail-lines {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    padding: 15px 0;
}

.s5-mail {
    font-size: 22px;
    line-height: 34px;
    font-weight: 400;
    color: #000;

}

.s5-mail-button {
    width: 202PX;
    height: 43PX;
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    color: #fff;
    background-color: var(--second-coler);
    padding: 11px 45px;
    border-radius: 10px;
    -webkit-border-radius: 10px;

}


/*About Sayfası*/
#aboutus a{
    text-decoration: none;
}

.about-banner {
    height: 321px;
    background-image: -webkit-linear-gradient(top, rgb(204, 204, 204), rgb(119, 119, 119));
    background-size: cover;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    vertical-align: middle;
    position: relative;
    background-attachment: fixed;
    overflow: hidden;
    height: inherit;
}

.about-banner-bg {
    background-image: url("../images/mavi_1.jpg");
    height: 321px;
    background-attachment: scroll;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    background-position: center center;
}

.about-banner-bg-filter {
    height: 321px;
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(34, 34, 34, 0.2));
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#about-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: inherit;
}

.abbannerh-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;

}

.abbannerh-wrapper h3 {
    color: #fff;
    font-size: 62px;
    line-height: 73px;
    font-weight: 300;
    z-index: 2;
}
.fdc{
    flex-direction: column;
}
.h-alt{
    font-size: 24px;
    color: #fff;
    z-index: 2;
}
#about-s1 {
    padding: 0;
}

.about-s1-main-container {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 57% 43%;
    grid-template-rows: 110px auto 500px;
    grid-template-areas:
        "abs1he abs1he"
        "abs1ma abs1sl"
        "abs1fo abs1fo";
    margin-top: 100px;
}

.about-s1-header {
    grid-area: abs1he;
    display: flex;
    align-items: center;
    margin: 0 30px;
    z-index: 2;
}

.about-s1-main {
    grid-area: abs1ma;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: nowrap;
    align-content: center;
    padding: 0 15px;

}

.about-s1-main-text {
    font-size: 22px;
    line-height: 33px;
    color: #000;
    font-weight: 400;
    padding-left: 30px;
}



.about-s1-slide {
    grid-area: abs1sl;
    background-color: var(--main-color);
    margin-top: -110px;
    position: relative;
    height: 983px;
}

.abs1-image-wrapper {
    width: 75%;
    aspect-ratio: 365/500;
    background-image: url(../images/fabrika2_1.png);
    left: 12.5%;
    top: 144px;
    position: absolute;
    /* transition: opacity 0.3s ease, top 0.3s ease; */
    background-size: cover;
}
.about-s1-footer{
    grid-area: abs1fo;
    display: grid;
    grid-template-columns: 57% 43%;
}
.about-s1-footer-left {
    display: flex;
    flex-direction: column;
    background-color: var(--main-color);
    /* width: 57%; */
}
.abs1fo-cerificate{
    padding-top: 50px;
}

.about-s1-footer-right {
    background-color: var(--main-color);
    height: -webkit-fill-available;    ;
    /* width: 43%; */
    opacity: 1;
}

.abs1fo-right-image {
    background-image: url(../images/fabrika_1.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 500px;
    opacity: 0;
}

.abs1fo-wrapper {
    font-size: 22px;
    line-height: 34px;
    font-weight: 300;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    padding: 50px 30px;
    
}


.abs1-certificate-img {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: flex-start;
    gap: 140px;
}

.abs1img {
    width: 100px;
    padding-top: 50px;
}

.polibold{
    font-weight: 600;
}
#mendil {
    margin: auto;
}
#contact{
    padding-top: 120px;
}
.kapak-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: auto auto;
    margin-top: 140px;
    column-gap: 40px;
    gap: 100px;
}

.kapak-box {
    width: 100%;
    margin: auto;
    height: 450px;
    margin-bottom: 100px;
}

.kapak-img {
    width: 100%;
    position: relative;
    height: 360px;
}

.doypack-img {
    width: 100%;
    position: relative;
    height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.img-first {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 2;
    max-width: 100%;
    max-height: 100%;
    transition: opacity 0.1s linear;
}

.img-second {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    max-width: 100%;
    max-height: 100%;
    transition: opacity 0.1s linear;
}

.img-doypack {
    left: auto;
    right: auto;
}

.kapak-img:hover .img-second {
    z-index: 3;
    opacity: 1;
}
.kapak-img:hover .img-first{
    opacity: 0;
}

.doypack-img:hover .img-second {
    z-index: 3;
    opacity: 1;
}

.kapak-title {
    font-size: 20px;
    line-height: 27px;
    font-weight: 600;
}

.button-box {
    margin-top: 19px;
}

.button1 {
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    background-color: var(--second-coler);
    border: 1px solid #ffffff00;
    border-radius: 10px;
    padding: 8px 12px;
}

.button1:hover {
    background-color: var(--second-color-hover);
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.button2 {
    color: #0b0b3e;
    background-color: #fff;
    border: 1px solid #38a21f;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    font-weight: 400;
    padding: 5px 12px;
    margin-left: 10px;
}

.button2:hover {
    color: #ffffff !important;
    background-color: #1b3f71 !important;
}

.main-back {
    background-color: var(--main-color);
}

.product-autotype {
    background-color: var(--main-color);
    color: #fff;
    padding: 50px 0;
}

.product-modal-header {
    padding: 10px;
    align-items: flex-start;
    height: fit-content !important;
}

.product-modal-body {
    --bs-modal-width: 760px;
    /* background-color: rgb(255 255 255 / 21%); */
}

.product-modal-content {
    width: 760px !important;
}

.product-btn-close {
    position: relative;
    top: 15px;
    float: right;
    --bs-btn-close-bg: url("../images/close_button.svg");
    padding-right: 50px;
    height: 16px;
    background-size: auto;
    --bs-btn-close-opacity: 1;
}

.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.5);
    /* Siyah renk ve %50 opaklık */
}

.lightbox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox img {
    max-width: 100%;
    max-height: 70vh;
    transition: transform 0.3s ease-in-out;
}

.lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: black;
    font-size: 2rem;
    cursor: pointer;
    z-index: 1050;
}

.lightbox-arrow.left {
    left: 10px;
}

.lightbox-arrow.right {
    right: 10px;
}

.modal-product-name {
    font-size: 32px;
    line-height: 37px;
    font-weight: 400;
    color: #000;
    padding-bottom: 30px;
}

.product-modal-footer {
    flex-direction: column;
    align-content: flex-start;
    padding-left: 30px;
}

.modal-contact-btn {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    background-color: var(--second-coler);
    padding: 15px 60px;
    border-radius: 10px;
    border: none;
}

.doypack-wrapper {
    display: flex;
    margin-top: 140px;
}

.doypack-box {
    width: 760px;
    margin: auto;
    height: 450px;
    margin-bottom: 100px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.marqueetext{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 135px 0;
}
.marqueetext-outer{
    position: relative;
    max-width: 100vw;
    width: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}
.marqueetext-wrapper{
    overflow: hidden;
    position: relative;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.marqueetext-content-wrapper{
    background-color: var(--main-color);
    height: 80px;
    opacity: 1;
}
.marqueetext-content{
    animation-duration: 10.04s;
    animation-name: scroll-text;
    list-style: none;
    height: 100%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.marqueetext-item{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-negative: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    max-height: 100%;
    white-space: nowrap;
    pointer-events: all;
    -webkit-transform: translateZ(0);
}
.marqueetext-text{
    color: #ffffff;
    font-weight: 300;
    font-family: 'TildaSans';
    font-size: 20px;
    line-height: 1.55;
    padding: 0 10px;
}

.marquee-bar {
    margin: 100px 0;
    padding: 20px 0;
    height: 80px;
    background-color: var(--main-color);
    color: #fff;
    display: flex;
    justify-content: center;
}

.marquee {
    font-size: 20px;
    line-height: 1.55;
    padding: 0 10px;
    font-weight: 300;

}

.marquee-wrapper {
    animation-duration: 10.04s;
    animation-name: scroll-text;
    overflow: hidden;
    display: flex;
    justify-content: center;

}

@keyframes scroll-text {
    0% {
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
    }

    100% {
        transform: translateX(-502px);
        -webkit-transform: translateX(-502px);
    }
}
#privicy{
    margin: 150px 0;
}
.privacy-contact-wrapper{
    padding: 20px 0;
}
.privicy-inner{
    font-size: 1.275rem;
    line-height: 1.8rem;
    font-weight: 300;
    color: #000;

}
.privicy-inner p{
    margin-bottom: 2rem;
}
.privacy-contact:nth-child(1){
    font-size: 1.1rem;
    line-height: 1.75rem;
    color: #000;
}
.privacy-contact:nth-child(2){
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #000;
}
footer {
    background-color: var(--main-color);

}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 150px;
    padding: 30px;
}

.footer-logo {
    width: 170px;
}

.footer-nav {
    font-size: 14px;
    color: #fff;

}

.footer-nav a {
    text-decoration: none;
    padding: 8px;
    color: #fff;

}

.copyright {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    color: #7d7d7d;
    float: right;
    padding: 10px;
    ;
}

.contact-modal-content {
    width: 560px;
}

.contact-modal-header {
    width: 560px;
    height: 110px;
    border-bottom: none;
}

.modal-wrapper {
    padding: 40px 45px;
}

.modal-text-wrapper {
    margin-bottom: 24px;
    text-align: center;
}

.modal-text1 {
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 11px;
    line-height: 1.23;
}

.modal-text2 {
    font-weight: 400;
    font-size: 20px;
    line-height: 1.55;
}

#enggeneral input {
    color: #000000;
    border: 1px solid #1b3f71;
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 16px;
    height: 60px;
    line-height: 1.33;
    padding: 0 20px;
    width: 100%;
    margin-bottom: 25px;

}

.input-wrapperr {
    margin-bottom: 25px;
}

.iti {
    z-index: 1051;
    /* Bootstrap modal z-index ile uyumlu */
}

.iti__dropdown {
    z-index: 1060;
    /* Açılır menünün modal üzerinde görünmesi için */
}

/* hamburger menu */
@media screen and (max-width:992px) {
    .header {
        height: 150px;
        padding-left: 0;
    }

    .head-right {
        display: none;
    }

    .navbar {
        justify-content: flex-end;
    }

    .logoside {
        height: 150px;
        width: 300px;
        display: flex;
    }

    .imglogo {
        max-width: 300px;
        max-height: 115px;
        margin: auto;
    }

    .centerside {
        width: auto;
    }

    .t-menuburger {
        position: relative;
        flex-shrink: 0;
        width: 28px;
        height: 20px;
        padding: 0;
        border: none;
        background-color: transparent;
        outline: none;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        transition: transform .5s ease-in-out;
        cursor: pointer;
        z-index: 999;
    }

    .t-menuburger span {
        display: block;
        position: absolute;
        width: 100%;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        transition: .25s ease-in-out;
        height: 3px;
    }

    .t-menuburger span:nth-child(1) {
        top: 0;
    }

    .t-menuburger span:nth-child(2),
    .t-menuburger span:nth-child(3) {
        top: 8px;
    }

    .t-menuburger span:nth-child(4) {
        top: 16px;
    }

    .t-menuburger-opened span:nth-child(1) {
        top: 8px;
        width: 0%;
        left: 50%;
    }

    .t-menuburger-opened span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .t-menuburger-opened span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .t-menuburger-opened span:nth-child(4) {
        top: 8px;
        width: 0%;
        left: 50%;
    }

    .navbar-corner-button {
        display: block;
    }
    .img-slide{
        top: 200px;
    }

}

@media screen and (max-width:1199px) {
    .s2-text-box p, .s4-text-box p{
        font-size: 18px;
    }
    .s5-contact-box-number, .s5-mail{
        font-size: 18px;
    }
    .s5-mail-button{
        font-size: 14px;
    }
    .s5-mail-button{
        padding: 8px 20px;
        font-size: 14px;
    }
    .s3t1, .s3t3{
        font-size: 28px;
    }
    .s3t2, .s3t4{
        font-size: 18px;
    }
    h2.s2h, .s3header-h, h2.s4h, h2.s5h{
        font-size: 48px;
    }
    .s2ft{
        font-size: 20px;
    }
    .s4side-sliding{
        float: none;
        margin: auto;
    }
    .s1-title, .s1-subtext, .s1-button-wrapper{
        zoom: var(--vw-birim960);
    }
    .s1-title h2{
        font-size: 48px;
    }
    .s1-subtext{
        font-size: 22px;
    }
    .abs1-certificate-img{
        gap: 100px;
    }
    .about-s1-main-text{
        font-size: 18px;
    }
}

@media screen and (max-width:986px) {
    .s1-title h2 {
        font-size: 40px;
    }

    .s1-title {
        width: 90%;
    }
    .s5-container{
        margin-top: 50px;
    }
    #s4{
        margin-bottom: 50px;
    }
    .abs1-certificate-img{
        gap: 60px;
    }
    .abs1fo-wrapper{
        font-size: 18px;
    }
}

@media screen and (max-width:959px) {
    .s1-title h2 {
        font-size: 30px;
        line-height: 38px;
    }

    #section1 {
        height: 50vw;
    }
    .s1-title, .s1-subtext, .s1-button-wrapper{
        zoom: var(--vw-birim640);
    }
    .s1-subtext {
        width: 65%;
        font-size: 18px;
    }
    .cerimg{
        width: 75px;
    }
    .s5-main-left, .s5-main-right{
        width: 100%;
    }
    .s5-mail-lines{
        gap: 50px;
        width: 450px;
        margin: auto;
    }
    .s5-main-left, .s5-main-right{
        padding: 0;
    }
    .s5-contact-box{
        margin: auto;
    }
    .s5-adress{
        text-align: center;
    }button.cus2{
        width: 200px;
        height: 44px;
        font-size: 16px;
        line-height: 44px;
    }
    .s2fat{
        font-size: 40px;
        line-height: 60px;
    }
    .s2fat-ger{
        font-size: 34px;
        line-height: 60px;
    }
    .s2ft{
        font-size: 20px;
        line-height: 32px;
    }
    h2.s2h, .s3header-h, h2.s4h, h2.s5h{
        font-size: 30px;
    }
    .s4foot{
        font-size: 16px;
    }
    .s3-product-cards{
        height: 358px;
    }
    .button-wrapper1, .button-wrapper2{
        position: relative;
    }
    .btn-card1, .btn-card2{
        opacity: 100;
    }
    .s5h5{
        text-align: center;
    }
    .abs1-certificate-img{
        margin-right: 30px;
        justify-content: space-between;
        gap: 0px;
    }
    .about-s1-main-text{
        font-size: 16px;
    }
    .abs1fo-wrapper{
        font-size: 16px;
    }
}
@media screen and (max-width:832px) {
    #section1{
        height: 416px;
    }
    .abs1-certificate-img{
        gap: unset;
    }

}
@media screen and (max-width:801px) {
    .s3-product-cards{
        height: 405px;
    }
    .s2fat{
        font-size: 30px;
    }
    .s2fat-ger{
        font-size: 28px;
    }
}
@media screen and (max-width:768px) {
    .s3-product-cards{
        width: 100vw;
        height: 75vw;
    }
    .s3t2, .s3t4{
        max-width: 544px;
    }
    
}
@media screen and (max-width:742px) {
    .s1-subtext {
        width: 70%;
    }
    .abs1-certificate-img{
        gap: 50px;
            }
}

@media screen and (max-width:693px) {
    .s1-subtext {
        width: 85%;
    }
    .s2-text-button{
        display: block;
    }
    .s2side{
        display: none;
    }
    .s2-container{
        grid-template-columns: 1fr;
    }
    .s4-details-btn{
        width: 200px;
    }
    .abs1-certificate-img{
        gap: 40px;
    }
}

@media screen and (max-width:668) {}


@media screen and (max-width: 639px){
    #section1{
        min-height: 360px;
        height: 75vw;
    }
    .s4-container{
        grid-template-columns: 2fr 1 fr;
        grid-template-rows: 85px auto auto;
        grid-template-areas: 
        "s4head s4head"
        "s4box s4box"
        "s4foot s4side";
    }
    .s4-text-box{margin-bottom: 50px;}
    .s4side, .s4side-sliding{
       display: none;
    }
    .s4side2{
        display: block;
        grid-area: s4side;
        background-color: var(--main-color);
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../images/fabrika2_1.png");
        background-size: cover;
        background-position: 30%;
    }
    .s4side-img{
        margin: auto;
    }
    .s4foot{
        margin-top: 0;
        padding: 15px 5px;
    }
    .s4-certificates{
        margin-bottom: 0;
        max-width: 100%;
        padding: 5px;
    }
    #s4{
        margin-bottom: 100px;
    }
    .s5h5{
        font-size: 20px;
    }
    .s1-title, .s1-subtext, .s1-button-wrapper{
        zoom: var(--vw-birim460);
    }
    .s1-title h2{
        font-size: 26px;
    }
    .s1-subtext{
        font-size: 16px;
    }
    .footer-container{
        margin: 0;
        padding: 0;
    }
    .footer-nav{
        display: none;
    }
    .about-s1-slide{
        background-color: #fff;
        height: unset;
    }
    .about-s1-main-container{
        grid-template-rows: 110px auto auto;
    }
    .about-s1-main{
        gap: 50px;
        margin-bottom: 50px;
    }
    .about-s1-footer{
        /* flex-direction: column;
        flex-wrap: nowrap; */
        grid-template-columns: 1fr;

    }
    .about-s1-footer-left{
        order: 2;
        width: 100%;
    }
    .about-s1-footer-right{
        order: 1;
        width: 90%;
        height: 300px;
        margin: 30px auto;
    }
    .abs1fo-right-image{
        opacity: 1;
        height: inherit;
    }
    .abs1-certificate-img{
        padding-bottom: 30px;
    }
}

@media screen and (max-width:554px) {
    #section1{
        height: 416px !important;
    }
    .s5-main{
        padding: 0;
    }

}

/* 479Px */

@media screen and (max-width:479px) {
    .s4side2{
        display: none;
    }
    .s4-container{
        grid-template-columns: 1fr;
        grid-template-rows: 85px auto auto;
        grid-template-areas: 
        "s4head s4head"
        "s4box s4box"
        "s4foot s4foot";
    }
    #section1{
        display: grid;
        flex-direction: column;
        justify-content: center;
        height: auto !important;
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto auto;
        grid-template-areas: "s1l1" "s1l2" "s1r" "s1l3";
        justify-items: center;
        gap: 45px;
        padding: 30px 0 ;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100vw;
        text-align: center;
    }
    .s1-rightside{
        width: 75%;
    }
    .s1-title, .s1-subtext, .s1-button-wrapper{
        zoom: var(--vw-birim320);
    }
    .s1-title{
        font-size: 26px;
    }
    .s1-subtext{
        font-size: 16px;
    }
    .s3-product-cards{
        min-height: 405px;
    }
    .s5-main{
        padding: 5px;
    }
    .s5-main-left, .s5-main-right{
        padding: 0;
    }
    .s5-main-right, .s5-mail-lines{
        flex-direction: column;
    }
    .s5-mail-lines{
        gap: 15px;
    }
    .s5-main-right-container{
        padding: 30px 0;
    }
    #s4, #s3, #s5{
        margin: 30px 0;
    }
    .s4-details-btn{
        margin: auto;
    }
    .s5-container{
        margin: 0;
    }
    #s5, .s5-container{
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .s5-header{
        width: 100vw;
    }
    .s5-main-text{
        padding: 0 30px;
    }
    .s5-contact-box{
        padding: 20px 0;
    }
    .s2foot-autotype{
        font-size: 20px;
    }
    .s2ft{
        font-size: 16px;
    }
    .imglogo, .logoside{
       max-width: 200px;
       max-height: 120px;
    }
    .s5-mail-lines{
        width: unset;
    }
    .about-s1-slide{
        display: none;
    }
    .about-s1-main-container{
        grid-template-columns: 1fr;
    }
    .abbannerh-wrapper h3{
        font-size: 48px;
    }
    
}
@keyframes sonme {
    0% {

    }
}