/*----------------------------------------------------
CSS Table Of Content

1. Global Area
2. Menu Section

----------------------------------------------------*/

/*---------- Font load ----------*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/*---------- 1. Global Area ----------*/

:root {
    --primary-color: #222 !important;
    --primary-dark-color: #323a45 !important;
    --primary-light-color: #e9b25c30 !important;
    --secondary-color: rgba(234, 51, 35, 1) !important;
    --dark-color: #1a1a20 !important;
    --dark-grey-color: #6d8a8c !important;
    --grey-color: #f5f4f4 !important;
    --white-color: #ffffff !important;


    --primary-font: 'Roboto Mono' !important;
    --secondary-font: 'Montserrat' !important;
}

.alert {
    position: absolute;
    padding: 100px;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    top: 300px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    cursor: pointer;
    background: var(--primary-color);
    font-weight: 600;
    color: #fff;
}

.alert:hover:after {
    opacity: 1;
}

.alert:after {
    content: 'X';
    width: 30px;
    height: 30px;
    border-radius:15px;
    text-align: center;
    position: absolute;
    top: 20px;
    right: 20px;
    font-weight: 700;
    font-size: 20px;
    background: var(--secondary-color);
    color: var(--white-color);
    opacity: 0;
    transition: all .3s;
}

.no-resp {
    display: flex;
}

.only-resp {
    display: none;
}

body {
    margin: 0;
    padding: 0;
    z-index: 1;
    font-size: 16px;
    line-height: 1.5;
    position: relative;
    overflow-x: hidden;
    color: var(--body-color);
    font-family: var(--primary-font);
    -moz-osx-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ul-li ul {
    margin: 0;
    padding: 0;
}

.ul-li ul li {
    list-style: none;
    display: inline-block;
}

.ul-li-block ul {
    margin: 0;
    padding: 0;
}

.ul-li-block ul li {
    display: block;
    list-style: none;
}

[data-background] {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: 500ms all ease;
    transition: 500ms all ease;
}

a:hover,
a:focus {
    text-decoration: none;
}

button {
    cursor: pointer;
}

.form-control:focus,
button:visited,
button.active,
button:hover,
button:focus,
input:visited,
input.active,
input:hover,
input:focus,
textarea:hover,
textarea:focus,
a:hover,
a:focus,
a:visited,
a.active,
select,
select:hover,
select:focus,
select:visited {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-decoration: none;
    color: inherit;
}

.page-title h2 {
    text-align: center;
    font-size: 24px;
    color: #222;
    margin-bottom: 75px;
}

.page-button {
    text-align: center;
    margin-top: 25px;
}

.page-button a {
    background: var(--primary-color);
    color: var(--white-color);
    padding: 10px 30px;
    font-weight: 600;
    font-size: 16px;
    transition: all .5s;
}

.page-button a:hover {
    background: var(--secondary-color)
}

.inner-page {
    padding: 50px 10% 150px;
    position: relative;
}

.inner-page .inner-text,
.inner-page .inner-text p {
    padding: 50px 0;
    font-size: 16px !important;
    color: var(--primary-color) !important;
    font-family: var(--primary-font) !important;
}

.inner-page .inner-text p {
    margin: 0 !important;
    padding: 0;
}

.inner-page .inner-text.meeting-details a {
    color: var(--primary-color);
    text-decoration: underline;
    transition: all .3s;
}

.inner-page .inner-text.meeting-details a:hover {
    color: var(--secondary-color);
}

.inner-title {
    width: 100%;
    height: 490px;
    background: var(--secondary-color);
    position: relative;
    padding-top: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-title h2 {
    font-size: 40px;
    color: var(--white-color)
}

.inner-sub-title {
    border-bottom: 2px solid var(--primary-color);
}

.form-element {
    min-height: 100px;
}

.form-element .required {
    color: var(--secondary-color);
}

.form-element .error-text {
    color: var(--secondary-color);
    font-size: 12px;
}

.form-element label {
    margin-bottom: 5px;
}

.form-element input,
.form-element select,
.form-element textarea {
    border: 1px solid var(--dark-grey-color)
}

.form-element input:focus,
.form-element textarea:focus {
    border: 1px solid var(--secondary-color);
    box-shadow: 0 0 4px var(--secondary-color);
}

.form-element button {
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: 400;
    padding: 8px 20px;
    letter-spacing: 1px;
    transition: all .3s;
}

.form-element button:hover {
    background: var(--secondary-color);
    color: var(--white-color);
}



/*---------- 2. Menu Section ----------*/

.menu-area {
    padding: 20px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 190px;
    transition: all .5s;
    position: absolute;
    z-index: 12;
    background: var(--white-color);
    width: 100%;
}

.menu-area .menu-logo img {
    width: 180px;
}

.menu-area ul li {
    display: inline-block;
    font-weight: 600;
    font-size: 16px;
    color: var(--primary-color);
}

.menu-area .menu-items ul li {
    margin: 0 12px;
    padding: 20px 5px;
    position: relative;
}

.menu-area .menu-items ul li:before {
    content: '.';
    font-size: 40px;
    color: var(--secondary-color);
    position: absolute;
    left: -20px;
    top: -10px;
    opacity: 0;
    transition: all .5s;
}

.menu-area .menu-items ul li:hover:before {
    opacity: 1;
}

.menu-area .menu-items ul li.active:before {
    content: '.';
    font-size: 40px;
    color: var(--secondary-color);
    position: absolute;
    left: -20px;
    top: -10px;
    opacity: 1;
    transition: all .5s;
}

.menu-area .menu-lng ul li {
    margin: 0px;
    padding: 20px 0px;
}

.menu-area .menu-lng ul li p {
    margin: 0 0 5px
}

.menu-area .menu-lng ul li.active {
    color: var(--secondary-color);
}

.menu-area .menu-lng ul li:nth-child(2) {
    font-size: 20px;
}

.menu-area .sub-menu {
    position: absolute;
    z-index: 12;
    background: var(--white-color);
    border: 1px solid var(--primary-color);
    width: max-content;
    top: 50px;
    left: -25px;
    display: none;
    transition: all .5s;
}

.menu-area .sub2 a {
    font-weight: bold !important;
}

.menu-area .sub-menu ul li:before {
    content: '';
}

.menu-area .menu-items ul li:hover .sub-menu {
    display: block;
}

.menu-area .sub-menu ul {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.menu-area .sub-menu ul li {
    margin: 0;
    padding: 10px;
    width: 100%;
    position: relative;
}

.menu-area .sub-menu ul li a {
    font-size: 16px;
    font-weight: 400;
    transition: all .5s;
    color: var(--primary-color);
}

.menu-area .sub-menu ul li a:hover {
    color: var(--secondary-color);
}

.menu-area .sub2 a {
    text-transform: uppercase;
}

.menu-area .sub2-menu {
    position: absolute;
    z-index: 1;
    background: var(--white-color);
    border: 1px solid var(--primary-color);
    border-left: none;
    width: max-content;
    top: -11px;
    left: 100%;
    display: none;
    transition: all .5s;
}

.menu-area .sub2-menu ul li a {
    font-weight: 400 !important;
    text-transform: unset;
}

.menu-area .sub-menu ul li:hover .sub2-menu {
    display: block;
}



.menu-area .sub2-menu ul {
    padding: 10px 20px 10px 10px;
}

.menu-area.sticky-ready {
    top: -100px;
    left: 0;
}

.menu-area.sticky-ready.sticky {
    position: fixed;
    top: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    z-index: 20;
}

.menu-area .menu-search {
    width: 220px;
}

.menu-area .menu-search input {
    border: none;
    border-bottom: 1px solid var(--dark-grey-color);
    width: 200px;
    padding: 2px 30px 2px 2px
}

.menu-area .menu-search input:focus {
    border-bottom-color: var(--secondary-color)
}

.menu-area .menu-search button {
    border: none;
    background: none;
    margin-left: -35px
}

.whatsapp {
    position: fixed;
    width: 80px;
    height: 80px;
    bottom: 5vh;
    right: 3vh;
    z-index: 123;
}

.whatsapp a {
    width: 80px;
    height: 80px;
    font-size: 80px;
    color: #25d366;
    transition: all .3s;
}

.whatsapp a:hover {
    color: var(--secondary-color)
}

/*---------- 3. Home Slider Section ----------*/

.slider-area {
    padding: 190px 10% 0;
    height: auto;
    position: relative;
}

.slider-area .slider {
    width: 100%;
    height: 100%;
}

.slider-area .slider .slide {
    width: 100%;
    height: 880px;
}

.slider-area .slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-area .slider-arrows {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 5%;
    margin-top: 95px;
}

.slider-area .slider-arrows .arw {
    color: var(--primary-color);
    font-size: 30px;
    cursor: pointer;
    transition: all .5s;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

.slider-area .slider-arrows .arw:hover {
    color: var(--white-color);
    background: var(--secondary-color)
}

/*---------- 3. Home Forms Section ----------*/

.form-area {
    padding: 100px 20%;
}

.form-area .page-title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
}

.form-area .tab-pane {
    border-top: 2px solid var(--secondary-color);
    padding-top: 50px;
}

.form-area .nav-pills {
    justify-content: center;
}

.form-area .nav-pills button {
    color: var(--primary-dark-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.form-area .nav-pills button.active {
    background: var(--secondary-color);
    font-weight: 700;
}

/*---------- 3. Home Meetings Section ----------*/

.meetings-area {
    padding: 150px 10%;
}

.meetings-area .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 75px;
}

.meetings-area .content .top {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
}

.meetings-area .content .top h2 {
    font-size: 70px;
    color: var(--primary-color);
    margin: 0;
    transition: all .5s;
}

.meetings-area .content .top img {
    width: 15px;
}

.meetings-area .content p {
    font-size: 16px;
    margin-top: -10px;
    color: var(--primary-color);
    transition: all .5s;
    text-align: center;
}

.meetings-area .inner-text {
    padding-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 350px;
    white-space: normal;
}

.meetings-area .inner-text p {
    padding-bottom: 0;
    margin-top: 0px;
    text-align: unset;
    display: inline;
}

.meetings-area .content a:hover .top h2 {
    color: var(--secondary-color);
}

.meetings-area .content a:hover p {
    color: var(--secondary-color);
}

/*---------- 3. Footer Section ----------*/

.footer-area {
    background: var(--grey-color);
    padding: 100px 5% 20px;
}

.footer-area .footer-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-around
}

.footer-area .footer-content .footer-logo .s-media {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 10px 0;
}

.footer-area .footer-content .footer-logo .s-media a {
    font-size: 30px;
    color: var(--primary-color);
    transition: all .3s;
}

.footer-area .footer-content .footer-logo .s-media a:hover {
    color: var(--secondary-color);
}

.footer-area .footer-content ul li {
    margin-bottom: 10px;
}

.footer-area .footer-content ul li a {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color);
    position: relative;
}

.footer-area .footer-content .footer-menu ul li a:before {
    content: '.';
    font-size: 40px;
    color: var(--secondary-color);
    position: absolute;
    left: -25px;
    top: -31px;
    opacity: 0;
    transition: all .5s;
}

.footer-area .footer-content .footer-menu ul li a:hover:before {
    opacity: 1;
}

.footer-area .footer-content .footer-contact ul li a:hover {
    color: var(--secondary-color);
}

.footer-area .copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 75px;
}

.footer-area .copyright p {
    font-family: var(--primary-font);
    font-size: 16px;
    margin: 0;
}

.footer-area .copyright i {
    font-size: 12px;
    margin: 0 5px;
}

/*---------- 3. About Us Page ----------*/

.inner-page .inner-video {
    padding: 50px;
}

.inner-page .inner-video iframe {
    width: 90%;
    margin-left: 5%
}

.inner-page .inner-counter {
    padding: 100px 0 0;
}

.inner-page .inner-counter ul {
    display: flex;
    align-items: center;
    justify-content: space-around
}

.inner-page .inner-counter ul li {
    text-align: center;
}

.inner-page .inner-counter ul li h2 {
    font-size: 60px;
}

.inner-page .inner-counter ul li p {
    font-size: 16px;
}

/*---------- 3. Members Page ----------*/

.board .inner-title {
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 20px;
}

.board .row div {
    margin: 15px 0;
}

.board .inner-text h3 {
    font-size: 20px;
}

.board .inner-text p {
    font-size: 14px;
}

/*---------- 3. Press Page ----------*/

.press .grid-container {
    line-height: 0;
    column-count: 4;
    column-gap: 10px;
}

.press .grid-container img {
    width: 100%;
    height: auto !important;
    padding: 20px;
    margin-bottom: 10px;
    border: 10px solid var(--dark-color)
}

/*---------- 3. Membership Page ----------*/

.inner-form {
    width: 60%;
    margin: 50px auto;
}

.inner-form .form-element {
    min-height: 100px;
}

.inner-form .form-element .required {
    color: var(--secondary-color);
}

.inner-form .form-element .error-text {
    color: var(--secondary-color);
    font-size: 12px;
}

.inner-form .form-element label {
    margin-bottom: 5px;
}

.inner-form .form-element input:focus {
    border: 1px solid var(--secondary-color);
    box-shadow: 0 0 4px var(--secondary-color);
}

.inner-form .form-element button {
    background: var(--primary-color);
    color: var(--white-color);
    font-weight: 400;
    padding: 8px 20px;
    letter-spacing: 1px;
    transition: all .3s;
}

.inner-form .form-element button:hover {
    background: var(--secondary-color);
}

/*---------- Search Results Page ----------*/

.search-results {
    margin: 20px 0 50px;
    font-size: 20px;
}

.search-results ul li {
    margin: 15px
}

.search-results ul li a {
    color: var(--primary-color);
    transition: all .3s;
}

.search-results ul li a:hover {
    color: var(--secondary-color);
}

/*---------- 3. Project Page ----------*/

.project-page {
    padding: 190px 0 150px;
    position: relative;
}

.project-page .project-title {
    padding: 50px 0;
    text-transform: uppercase;
}

.project-page .project-title h2 {
    font-size: 40px;
    text-align: center;
    font-weight: 700;
}

.project-page .project-cover-img {
    width: 100%;
    height: 500px;
}

.project-page .project-cover-img img {
    width: 100%;
}

.project-page .project-videos {
    display: flex;
    justify-content: space-between;
}

.project-page .project-videos .video {
    width: 100%;
    padding: 20px;
}

.project-page .project-videos .video:first-child {
    padding-left: 0;
}

.project-page .project-videos .video:last-child {
    padding-right: 0;
}

.project-page .project-videos .video iframe {
    width: 100%;
    height: 300px;
}

.project-desc {
    padding: 50px 0;
    font-size: 16px;
    font-weight: 400;
}

.project-photos {
    width: 100%;
}

.project-photos .photo {
    position: relative;
}

.project-photos .photo img {
    width: 100%;
    height: 100%;
}

.project-photos .photo p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: var(--white-color);
    font-weight: 600;
    display: none;
    transition: all .3s;
    text-align: center;
}

.project-photos .photo:before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    transition: all .3s;
}

.project-photos .photo:hover:before,
.project-photos .photo:hover p {
    cursor: pointer;
    display: block;
}

/*---------- 3. Exhibitions Page ----------*/

.ex-content {
    margin-bottom: 50px;
}

.ex-content .ex-img {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.ex-content .ex-img .sold {
    position: absolute;
    top: 40px;
    left: -70px;
    background: var(--secondary-color);
    color: var(--white-color);
    font-family: var(--primary-font);
    font-weight: bold;
    font-size: 20px;
    width: 250px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    transform: rotate(-45deg);
}

.ex-content .ex-img img {
    width: 100%;
}

.ex-content h3 {
    font-size: 30px;
    font-weight: 600;
}

.ex-content h5 {
    font-size: 20px;
}

.ex-content p {
    font-size: 16px;
    margin-bottom: 30px;
}

.ex-content .buy {
    background: var(--primary-color);
    color: var(--white-color);
    padding: 12px 30px;
    transition: all .3s;
}

.ex-content .sold {
    background: var(--secondary-color);
    color: var(--white-color);
    padding: 12px 30px;
    transition: all .3s;
    width: fit-content;
}

.ex-content .buy:hover {
    background: var(--secondary-color);
}

.exhibition-items {
    padding: 240px 0 0;
}

.exhibition-items .ex-content {
    width: 70%;
    margin: auto;
    display: flex;
    flex-direction: row;
}

.exhibition-items .ex-content .left-content {
    max-width: 50%;
    margin-right: 100px;
}

.exhibition-items .ex-content h3 {
    font-size: 60px;
    font-weight: 600;
}

.exhibition-items .ex-content h5 {
    font-size: 40px;
    margin: 30px 0;
}

.exhibition-items .ex-content p {
    font-size: 30px;
    margin-bottom: 30px;
}

.exhibition-items .ex-details {
    width: 70%;
    margin: 50px auto;
}

.exhibition-items .ex-details h3 {
    margin-bottom: 20px;
}

.exhibition-items .ex-details h3 span {
    font-weight: 300;
}

.exhibition-items .ex-details h3:nth-child(2) {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--primary-color);
}

.ex-list {
    margin-top: 150px;
}

.ex-list .slide {
    padding: 20px;
}

.ex-list .ex-img {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.ex-list .ex-img .sold {
    position: absolute;
    top: 40px;
    left: -70px;
    background: var(--secondary-color);
    color: var(--white-color);
    font-family: var(--primary-font);
    font-weight: bold;
    font-size: 20px;
    width: 250px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    transform: rotate(-45deg);
}

.ex-list .slide .ex-img img {
    width: 100%;
}

.order {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
}

.order .order-img {
    width: 50%;
}

.order .order-img img {
    width: 100%;
}

.order .order-details,
.order .billing-details{
    width: 100%;
    margin: 50px;
}

.order .order-details table th,
.order .order-details table td {
    border: 1px solid var(--dark-grey-color);
    padding: 20px;
}

.order .form-element {
    height: 120px;
}

.order input {
    height: 60px;
    border: 1px solid var(--dark-grey-color);
}

.order .form-element button {
    padding: 12px 30px;
}

/*---------- 3. Art Meetings Page ----------*/

.inner-content.meetings-area {
    padding: 75px 0;
}

.inner-content.meetings-area .inner-text {
    padding-bottom: 0;
    padding-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inner-content.meetings-area .inner-text p {
    font-family: var(--primary-font) !important;
    font-size: 16px;
    text-align: left !important;
}

.inner-content.meetings-area #meetings-list {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.inner-content.meetings-area .pagination {
    font-size: 25px;
    font-weight: 700;
    display: flex;
    justify-content: center;
}

.inner-content.meetings-area .pagination a {
    margin: 0 20px;
    transition: all .3s;
    color: var(--primary-color);
}

.inner-content.meetings-area .pagination a:hover {
    color: var(--secondary-color);
}


/*---------- 3. Contact Page ----------*/

.inner-page .inner-map {
    position: absolute;
    width: 100%;
    height: 600px;
    left: 0;
    top: 0;
    z-index: 1;
}

.inner-page .inner-map iframe {
    width: 100%;
    height: 600px;
}

.inner-page .inner-contact {
    margin-top: 450px;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 150px;
}

.inner-page .inner-contact .contact-info {
    width: 100%;
    height: 510px;
    background: var(--white-color);
    border: 1px solid var(--dark-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.inner-page .inner-contact .contact-info:nth-child(2) {
    background: var(--dark-color);
    height: 600px;
    color: var(--white-color);
}

.inner-page .inner-contact .contact-info:nth-child(2) .c-icon {
    border-bottom: 2px solid var(--white-color);
}

.inner-page .inner-contact .contact-info .c-icon {
    border-bottom: 2px solid var(--dark-color);
    padding: 0 0 20px;
}

.inner-page .inner-contact .contact-info .c-icon i {
    font-size: 70px;
}

.inner-page .inner-contact .contact-info .c-info {
    text-align: center;
}

.inner-page .inner-contact .contact-info .c-info .title {
    font-weight: 700;
    margin-bottom: 30px;
    font-size: 20px;
}

.inner-page .inner-contact .contact-info .c-info .info {
    font-size: 16px;
    padding: 0 50px;
}

.inner-page .inner-contact-extra {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 75px 0 0;
    padding: 0 150px;
}

.inner-page .inner-contact-extra .ex-address {
    width: 100%;
    padding-right: 50px;
}

.inner-page .inner-contact-extra .ex-address .title {
    font-size: 50px;
    font-weight: 700;
}

.inner-page .inner-contact-extra .ex-address .content {
    margin-top: 50px;
}

.inner-page .inner-contact-extra .ex-address .content .address {
    margin-bottom: 50px;
}

.inner-page .inner-contact-extra .ex-address .content .address .tle {
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px;
}

.inner-page .inner-contact-extra .ex-address .content .address .adrs {
    display: flex;
    align-items: center;
}

.inner-page .inner-contact-extra .ex-address .content .address .adrs p {
    margin: 0 0 0 10px
}

.inner-page .inner-contact-extra .ex-form {
    width: 100%;
    padding-left: 50px;
}


/*---------- Tukey Map ----------*/


.svg-turkiye-haritasi {
    max-width: 1140px;
    margin: 100px auto 0;
    text-align: center;
    height: 500px;
}

.svg-turkiye-haritasi svg {
    width: 100%;
    height: auto;
}

.il-isimleri {
    position: absolute;
    z-index: 2;
}

.il-isimleri div {
    display: flex;
    flex-direction: column;
    background: #222;
    color: #fff;
    padding: 8px 16px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.il-isimleri div p {
    margin: 0;
  }

.il-isimleri div span {
    width: 100x;
    font-weight: 700;
    text-transform: uppercase;
}

.il-isimleri div ul {
    margin-left: 20px;
}

.il-isimleri div ul li {
    font-size: 12px;
}

#svg-turkiye-haritasi path {
    cursor: pointer;
    fill: #cccccc;
}

#svg-turkiye-haritasi .has-data path:hover {
    fill: var(--primary-color);
}

#svg-turkiye-haritasi .has-data path {
    cursor: pointer;
    fill: var(--secondary-color);
}

.created-content {
    padding: 20px 0;
    margin: 0;
    font-family: var(--primary-font);
}

.created-content p {
    margin-bottom: 5px;
}

.created-content a,
.created-content p a {
    padding: 10px 50px;
    font-size: 18px !important;
    background: var(--primary-color) !important;
    border-radius: 30px;
    transition: all .3s;
    color: var(--white-color) !important;
    font-weight: bold !important;
    line-height: 40px;
}

.created-content a:hover {
    background: #000;
}

.created-content .only-text.with-bg {
    width: 100% !important;
    position: relative;
    margin: 0 !important;
    padding: 0 10%;
}

.created-content .only-text.with-bg .bg-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    object-fit: cover
}

.created-content .only-text.with-bg .text {
    position: relative;
    z-index: 12;
    top: 50%;
    transform: translateY(-50%)
}

.created-content .only-text,
.created-content .text-img {
    padding: 0
}

.created-content .text {
    padding: 0;
}

.created-content .text-img {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.created-content .text-img.text-50-img-50 .text,
.created-content .text-img.text-60-img-40 .text,
.created-content .text-img.text-40-img-60 .text {
    padding: 0 50px 0 0px;
}

.created-content .text-img.img-50-text-50 .text,
.created-content .text-img.img-40-text-60 .text,
.created-content .text-img.img-60-text-40 .text {
    padding: 0 0 0 50px;
}

.created-content .text-img.text-50-img-50 img,
.created-content .text-img.img-50-text-50 img {
    max-width: 50%;
}

.created-content .text-img.text-50-img-50 .text,
.created-content .text-img.img-50-text-50 .text {
    width: 100%;
}

.created-content .text-img.text-40-img-60 img,
.created-content .text-img.img-60-text-40 img {
    width: 60%;
}

.created-content .text-img.text-60-img-40 img,
.created-content .text-img.img-40-text-60 img {
    width: 40%;
}

.created-content .img {
    display: flex;
    justify-content: center
}

.created-content .img img {
    max-width: 100%;
    width: 100%;
}

.created-content .vid {
    display: flex;
    justify-content: center;
}

.created-content .vid iframe {
    width: 100%;
}

.created-content ul li {
    position: relative;
    margin-left: 25px;
    margin-bottom: 8px;
}

.created-content ul li:before {
    content:'';
    text-align: center;
    line-height: 20px;;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary-color);
    position: absolute;
    left: -10px;
    top: 7px;
}

.created-content ol {
    counter-reset: list-counter;
    list-style: none;
    padding-left: 0;
}

.created-content ol li {
    counter-increment: list-counter;
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
}

.created-content ol li::before {
    content: counter(list-counter);
    position: absolute;
    left: 0;
    top: 5px;
    width: 25px;
    height: 25px;
    background-color: var(--primary-color);
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.section .sctn {
    width: 80%;
    margin: 0 auto 100px;
}

.section .sctn.full-scr {
    width: 100%;
    margin: 0 auto 100px;
}

.section .sctn.full-scr .only-text {
    padding-top: 100px;
    padding-bottom: 100px;
}

.section .sctn.full-scr:first-child {
    margin-top: 0;
}

.section .sctn.full-scr:first-child .created-content {
    padding-top: 0;
    margin-top: 0;
}

.section .sctn.full-scr .grid {
    padding: 0;
}



.custom-col {
    flex: 0 0 50%; /* Varsayılan olarak %50 genişlik */
  }

  @media (min-width: 768px) {
    .custom-col {
      flex: 0 0 25%; /* Orta ekranlarda %25 genişlik */
    }
  }

  @media (min-width: 992px) {
    .custom-col {
      flex: 0 0 20%; /* Büyük ekranlarda %20 genişlik */
    }
  }

#messageModal .modal-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px;
    font-family: var(--primary-font);
    font-weight: bold;
    text-align: center;
}

#messageModal .modal-body button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 30px;
    color: var(--primary-color)
}

#messageModal .modal-body button.rtl {
    left: 20px;
    right: unset;
}

#messageModal .modal-body img {
    width: 50%;
    margin-bottom: 50px;
}


.donate {
    position: fixed;
    bottom: 1vh;
    left: 0px;
    z-index: 12;
    padding: 20px;
}

.donate img {
    width: 100px;
}

.inner-page.documents {
    padding: 100px 10% !important;
}

.documents .doc {
    margin: 50px 0;
}

.documents .doc a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.documents .doc a i {
    font-size: 50px;
    margin: 0 0 20px;
}