@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');

:root {
    --main-font: "Montserrat", sans-serif;
    --secondary-font: "Playfair", serif;
    --main-color: #1B5A8C;
    --section-x-padding:140px;
}

body {
    font-family: var(--main-font);
}

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --bs-gutter-x: 32px;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1400px) and (max-width: 1900px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        padding-right: 100px !important;
        padding-left:100px !important;
    }

    .gap-150 {
        gap: 100px !important;
    }
}


@media (min-width: 576px) {
    .container-sm, .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1680px;
        padding-right: calc(var(--bs-gutter-x) * 0.5);
        padding-left: calc(var(--bs-gutter-x) * 0.5);
    }
}


section{
    overflow:hidden;
}

input, textarea, input:focus, textarea:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    border-bottom: 2px solid var(--main-color) !important;
    margin-bottom: 42px;
    padding: 10px 0 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    color: #000 !important;
}

input::placeholder,textarea::placeholder{
    color:#000 !important;
    font-size:20px !important;
    line-height:24px !important;
}

html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"] {
    direction: ltr !important;
    text-align: right !important;
}

.default-btn {
    --btn-color: var(--main-color);
    background-color: var(--btn-color);
    color: #fff;
    padding: 14px 20px;
    border: none;
    outline: none;
    width: 100%;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:ease-out .2s all;
}

.default-btn:hover {
    background-color: #0F4A79;
}

.default-btn .btn-text {
    position: relative;
    z-index: 1;
}

.alert{
    border-radius:0;
}

.alert-danger {
    color: #fb0f0f;
    background-color: #ffffff;
    border-color: #1b5a8c00;
    border-bottom: 2px solid #ff000082;
}
.alert-success {
    color: #0b5e01;
    background-color: #ffffff;
    border-color: #1b5a8c00;
    border-bottom: 2px solid #0b5e017a;
}

/* Küçük kutu */
.default-btn .btn-square {
    position: absolute;
    top: 0;
    right: 0;
    margin: 6px;
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .55s 
ease;
    z-index: 2;
}

.default-btn:hover svg{
    transform:rotate(45deg);
}


.default-60 {
    margin-bottom: 42px;
    font-size: 60px;
    line-height: 66px;
    font-family: var(--secondary-font);
}

.default-40 {
    font-size: 40px;
    line-height: 46px;
    font-family: var(--secondary-font);
}

.default-20 {
    font-size: 20px;
    line-height: 24px;
}

.gap-150{
    gap:150px;
}



@media (max-width: 992px) {
    .default-60 {
        margin-bottom: 35px;
        font-size: 40px;
        line-height: 46px;
    }

    .default-40 {
        font-size: 36px;
        line-height: 40px;
    }

    .gap-150 {
        gap: 50px;
    }

}

@media (max-width: 768px) {
    input, textarea, input:focus, textarea:focus {
        margin-bottom: 30px;
        font-size: 16px !important;
        line-height: 20px !important;
    }

    input::placeholder, textarea::placeholder {
        font-size: 16px !important;
        line-height: 20px !important;
    }

    .default-btn {
        padding: 10px;
    }

    .default-btn .btn-square {
        width: 30px;
        height: 30px;
    }

    .default-60 {
        margin-bottom: 30px;
        font-size: 35px;
        line-height: 40px;
    }

    .default-40 {
        font-size: 32px;
        line-height: 36px;
    }

    .default-20 {
        font-size: 18px;
        line-height: 20px;
    }

    .gap-150 {
        gap: 40px;
    }
}

.default-breadcrumb{
    display:flex;
    width:100%;
    align-items:start;
    color:#fff
}

@media (max-width: 768px) {
    html[dir="ltr"] .container:not(footer .container) {
        padding-right: 60px;
    }

    html[dir="rtl"] .container:not(footer .container) {
        padding-left: 60px;
    }
}

@media (max-width: 576px) {
    html[dir="ltr"] .container:not(footer .container) {
        padding-right: 36px;
    }

    html[dir="rtl"] .container:not(footer .container) {
        padding-left: 36px;
    }
}


.default-breadcrumb .breadcrumb-mini{
    background-color:var(--main-color);
    width:47px;
    min-width:47px;
    height:47px;
    font-size:16px;
    line-height:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:12px;
}

.default-breadcrumb hr{
    background-color:var(--main-color);
    height:2px;
    width:100%;
}

.default-breadcrumb .breadcrumb-big{
    width:138px;
    min-width:138px;
    height:138px;
    background-color:var(--main-color);
    font-size:16px;
    line-height:24px;
    padding:16px;
}


/* Navigation Start*/

.top-nav {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    position: fixed;
    z-index: 99999;
    top: 0;
}

.top-nav .logo-container {
    padding: 43px 0 3px 0;
    width: 100%;
    background-color: transparent;
    transition: all .3s ease;
}

.logo-wrapper {
    display: flex;
    width: 100%;
    justify-content: center; 
    transition: justify-content .3s ease;
}

.top-nav.active .logo-wrapper {
    justify-content: space-between;
    align-items: center;
}

.logo-wrapper img {
    max-width: 100%;
    transition: transform .3s ease;
    transform: scale(1);
}

.top-nav h1 { /*International Trading FZCO*/
    font-size: 22px;
    color: #fff;
    font-family: 'Montserrat';
    letter-spacing: 3px;
    font-weight: 200;
    margin-bottom: 0;
    display:none;
}

.top-nav.active h1{
    display:block;
}

.top-nav.active .logo-wrapper {
    justify-content: space-between;
    align-items: center;
}


/* aktifken sola kayacak */
.top-nav.active .logo-wrapper img {
    left: 0;
    transform: translateX(0);
    height:40px;
}

.top-nav.active .logo-container {
    background-color: var(--main-color);
    padding: 30px 0; /* daha küçük padding */
}


@media (max-width: 992px) {
    .top-nav {
        gap: 30px;
    }

    .top-nav  .logo-container{
       padding:30px 0 3px 0;
    }
    .top-nav.active  .logo-container{
       padding:30px 0;
    }

    .top-nav.active   .logo-container img{
        height:30px;
    }

    .top-nav.active h1{
       font-size: 16px;
    }

    .top-nav nav ul {
        display: flex;
        gap: 15px;
    }

    .top-nav nav li a {
        color: #fff;
        font-size: 18px;
        line-height: 20px;
    }
}

@media (max-width: 768px) {
    .top-nav {
        gap: 20px;
    }

    .top-nav  .logo-container{
       padding:15px 0;
    }

    .top-nav.active  .logo-container{
       padding:20px 0;
    }

    .top-nav.active  .logo-container img{
        height:30px;
    }
}
@media (max-width: 576px) {
    .top-nav.active h1 {
        display: none;
    }

    .top-nav {
        gap: 20px;
    }
    .top-nav  .logo-container img{
        height:45px;
    }
}


/* Navigation End*/


/*Hero Start*/


.hero-banner {
    overflow: hidden;
    position: relative;
    height:100svh;
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.75);
}

/*.hero-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(to bottom, #ffffff, #ffffff2e, #ffffff2e);
}*/

.hero-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgb(255 255 255 / 18%) 70%, rgb(27 90 140 / 79%) 100%);
    opacity: 0.8;
    pointer-events: none;
}


.hero-banner > *:not(.hero-bg) {
    position: relative;
    z-index: 2;
}

.hero-banner .banner-wrapper {
    height: 100svh;
    display: flex;
    align-items: end;
    padding-bottom: 22svh;
}

.hero-banner nav {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 50%;
    width:100%;
    top: 174px;
    z-index:3 !important;
    transform: translate(-50%);
}
.hero-banner nav ul{
    display:flex;
    gap:20px;
}
.hero-banner  nav li a{
    color: var(--main-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: ease-out .2s all;
}
.hero-banner  nav li a:hover{
    color:var(--main-color);
    border-bottom:1px solid var(--main-color);
}

.hero-banner .banner-content{
    color: #fff;
    position: relative;
    z-index: 1;
}
.hero-banner .hero-subtext{
    max-width: 1000px;
}

.hero-banner .banner-content h1{
    font-size:80px;
    line-height:75px;
    margin-bottom:40px;
    font-family:var(--secondary-font);
}

.hero-banner .big-logo{
    position:absolute;
    width:100%;
    bottom:0;
    left:0;
    max-width:100%;
}
.hero-banner .big-logo img{
    width:100%;
}

@media (max-width: 1200px) {
    .hero-banner .banner-content h1 {
        font-size: 60px;
        line-height: 65px;
        margin-bottom: 40px;
        font-family: var(--secondary-font);
    }

    .hero-banner .hero-subtext{
        max-width:800px;
    }
}
@media (max-width: 992px) {
    .hero-banner .banner-content h1 {
        font-size: 50px;
        line-height: 45px;
        margin-bottom: 30px;
    }

    .hero-banner nav ul {
        display: flex;
        gap: 15px;
    }

    .hero-banner nav li a {
        color: #fff;
        font-size: 18px;
        line-height: 20px;
    }

    .hero-bg::after {
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgb(255 255 255 / 44%) 25%, rgb(27 90 140 / 96%) 100%);
    }
}

@media (max-width: 800px) {
    .hero-banner .banner-content h1 {
        font-size: 45px;
        line-height: 40px;
        margin-bottom: 30px;
    }
}
@media (max-width: 767px) {
    .hero-banner .banner-content h1 {
        font-size: 26px;
        line-height: 30px;
        margin-bottom: 30px;
    }

    .hero-banner .hero-subtext {
        font-size: 16px;
        line-height: 20px;
    }
}

/*@media (max-width: 576px) {
    .hero-banner .banner-content {
        max-width:360px;
    }
}*/
        /*Hero End*/
        /*Stats-Facts Start*/

        .stats-facts {
    padding: 150px 0;
}

.stats-facts h2{
    margin-bottom:42px;
    color:var(--main-color);
}

.stats-facts svg{
    margin-bottom:42px;
}

.stats-facts p {
    max-width: 370px;
}

.stats-facts .first-p {
    max-width: initial;
}

.stats-facts .f-h2,.stats-facts  .first-p{
    max-width:810px;
}
.stats-facts .text-caption-hr{
   margin:80px 0;
   height:2px;
   background-color:var(--main-color);
}

@media (max-width: 992px) {
    .stats-facts {
        padding: 80px 0;
    }
    .stats-facts .text-caption-hr {
        margin: 40px 0;
    }
}
@media (max-width: 768px) {
    .stats-facts {
        padding: 48px 0;
    }
    .stats-facts svg {
        margin-bottom: 30px;
    }
}

/*Stats-Facts End*/


/*Services Start*/

.services {
    background:url("../img/whatwedo_bg.png") center center no-repeat;
    background-size:cover;
    padding:150px 0;
}

.services .border-line{
    background-color:#A7A7A7 !important;
}

.services h2,
.services h3{
    margin:0;
    color:#FFFFFF;
}

.services h2{
    max-width:810px;
}
.services .fs-p{
    margin:42px 0;
    max-width:810px;
}
.services .default-20{
    color:#A7A7A7;
}

.services .nav-item div.row{
    gap:120px;
}

.services .nav-item{
    padding:57px 0 42px 0;
    border-top:1px solid #A7A7A7;
}

.services ul.nav.nav-tabs{
    border-bottom:1px solid #A7A7A7;
}

@media (max-width: 992px) {
    .services {
        padding: 80px 0;
        background-position: 90% center;
    }

    .services .fs-p{
        margin:42px 0;
    }

    .services .nav-item div.row{
        gap:40px;
    }

    .services .nav-item{
        padding:30px 0;
    }
}

@media (max-width: 768px) {
    .services {
        padding: 48px 0;
        background-position: 90% center;
    }
    .services .fs-p{
        margin:20px 0;
    }

    .services .nav-item div.row{
        gap:20px;
    }

    .services .nav-item{
        padding:20px 0;
    }
}
@media (max-width: 576px) {
    .services .nav-item{
        max-width:360px;
    }
}

/*Services End*/


/*Get In Touch Start*/

.get-in-touch {
    padding: 150px 0;
}

.get-in-touch h2{
    color:var(--main-color);
    margin-bottom:42px;
    max-width:800px;
}

.get-in-touch .form-end-text{
    color: #a7a7a7;
    font-size: 16px;
    max-width: initial;
}

.get-in-touch p{
    margin-bottom:60px;
    max-width:800px;
}

#contact-form input {
    margin-bottom: 0 !important;
}
#contact-form .col-12{
    margin-bottom: 42px;
}


@media (max-width: 992px) {
    .get-in-touch {
        padding: 80px 0;
    }

    .get-in-touch h2{
        margin-bottom:30px;
    }

    #contact-form .col-12 {
        margin-bottom: 30px;
    }
}
@media (max-width: 768px) {
    .get-in-touch {
        padding: 48px 0;
    }
}

/*Get In Touch End*/

/*Contact Info Start*/

.contact-info{
    padding:150px 0;
    background:url("../img/contact_info_bg.png") center center no-repeat;
    background-size:cover;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    border: 1px solid var(--main-color);
    overflow:hidden;
}

.info-box {
    padding: 42px 10px 42px 42px;
    border: 1px solid var(--main-color);
    border-left: none;
    border-top: none;
}

.info-box:nth-child(1),
.info-box:nth-child(2) {
    border-top: none;
}

.address-box {
    grid-column: 1 / 2;
}

.empty-box {
    background: #ffffff;
    grid-column: 2 / 3;
    max-width:100%;
}

.info-title {
    color: var(--main-color);
    margin: 0 0 12px;
}

.info-value {
    font-family:var(--main-font);
    margin: 0;
    text-transform:initial;
}
html[dir="rtl"] .phone-text {
    direction: ltr;
    text-align:right;
    unicode-bidi: bidi-override;
}

.info-value.mail {
    font-size: 30px;
    line-height: 37px;
}
.info-value .span-blue {
    color:var(--main-color);
}

@media (max-width: 992px) {
    .contact-info {
        padding: 80px 0;
    }

    .info-box {
        padding: 25px 10px 25px 25px;
        border-right:none;
    }
    .info-grid {
        grid-template-columns: 1fr;
    }

    address-box,
    .empty-box {
        grid-column: auto;
    }

    .empty-box{
        height:200px;
    }
}

@media (max-width: 768px) {
    .contact-info {
        padding: 48px 0;
    }

    .info-box {
        padding: 20px 10px 20px 20px;
    }

    .info-value:not(.address-text) {
        font-size: 24px;
        line-height: 30px;
    }
}

/*Contact Info End*/

/* Genel footer yüksekliği */
.custom-footer {
    width: 100%;
}


/* Üst alan */
.footer-top {
    background: var(--main-color);
    padding: 70px 0;
    color: #A7A7A7;
    z-index:999;
    position:relative;
}

.footer-logo {
    max-height: 70px;
    max-width:100%
}

.footer-desc {
    margin: 0;
    text-align: start;
}

.footer-top ul{
    padding-right:0;
    padding-left:0;
}

html[dir="rtl"] .footer-top ul {
    text-align: end;
}


.footer-links a {
    color: #A7A7A7;
    font-size: 16px;
    line-height: 27px;
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: ease-out .2s all;
}

.footer-links a:hover {
    color: #fff;
    padding-bottom:2px;
    border-bottom:1px solid #fff;
}
.footer-links a.disabled {
    color: #A7A7A7;
    opacity:.7;
    border-bottom:1px solid transparent;
}

.footer-top .copyright {
    font-size: 16px;
    line-height: 27px;
    color: #A7A7A7;
}

/* Alt alan */
.footer-bottom {
    min-height: 68px;
    background: #ffffff;
    border-top: 1px solid #e4e4e4;
    font-size: 13px;
}

.footer-designed {
    color: #000;
    font-size: 14px;
    line-height: 18px;
}

.footer-update {
    text-align:end;
}

@media (max-width: 1200px) {
    .footer-update {
        text-align:start
    }

    html[dir="rtl"] .footer-top ul {
        text-align: start;
    }
}
@media (max-width: 768px) {
    .footer-designed {
        font-size:14px;
    }

    .footer-update {
        font-size: 14px;
        text-align:start
    }

    html[dir="rtl"] .footer-top ul {
        text-align: start;
    }
}


:root {
    --text-color: #ffffff;
    --bg-dark: #0d0d0d;
}

.lang-switcher {
    position: fixed;
    bottom: 20px;
    z-index: 9999;
}

html[dir="ltr"] .lang-switcher {
    right: 20px;
}

html[dir="rtl"] .lang-switcher {
    left: 20px;
}

@media (max-width: 576px) {
    html[dir="ltr"] .lang-switcher {
        right: 10px;
        bottom:10px;
    }

    html[dir="rtl"] .lang-switcher {
        left: 10px;
        bottom: 10px;
    } 
}

.lang-main-btn,
.lang-item {
    width: 70px;
    height: 42px;
    background: var(--main-color);
    color: var(--text-color);
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, border-color .15s ease;
}

.lang-main-btn:hover,
.lang-item:hover {
    background: #16486c;
    border-color: rgba(255,255,255,0.2);
}

.flag-icon {
    width: 24px;
    height: 16px;
    border-radius: 1px;
    object-fit: cover;
}

.lang-options {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all .2s ease;
}

.lang-switcher.open .lang-options {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lang-item.active {
    border-color: #ffffff;
    background: #16486c;
}

/*Right navigation Start*/

.section-nav {
    z-index: 999;
    right: 40px;
    left:initial;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

html[dir="rtl"] .section-nav {
    left: 40px;
    right:initial;
}

@media (max-width: 576px) {
    .section-nav {
        right: 8px !important;
        left:initial !important;
    }

    html[dir="rtl"] .section-nav {
        left: 8px !important;
        right:initial !important;
    }
}

.section-nav::before{
    content: "";
    top: -20%;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 2px;
    height: calc(100% + 45px);
    background-color: var(--main-color);
    z-index: -1;
}

.section-nav .line {
    width: 3px;
    height: 40px;
    background: #6faac6;
    border-radius: 10px;
}

/* Küçük kare (default) */
.section-nav .dot {
    width: 14px;
    height: 14px;
    background: #A7A7A7;
    border-radius: 2px;
    cursor: pointer;
    transition: all .25s ease;
}

/* AKTİF OLAN = GÖRSELDEKİ BÜYÜK KOYU MAVİ KARE */
.section-nav .dot.active {
    width: 22px;
    height: 22px;
    background: var(--main-color);
    transform: scale(1.05);
}



/*Right navigation End*/