/* My defaults */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
}

.container {
    padding-top: 5rem;
    width: 50%;
    margin: auto;
}

p {
    font-weight: 300;
}


/* End of defaults */

.header {
    width: 100%;
    height: 5rem;
    background-color: rgba(255, 255, 255, 0.027);
    position: fixed;
    display: flex;
    justify-content: space-between;
    backdrop-filter: blur(9px);
    border-bottom: 1px solid lightgoldenrodyellow;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

.header-left {
    display: flex;
    margin-left: 2%;
    gap: 1rem;
}

.header-text {
    align-self: center;
}

.header-text h4 {
    font-weight: 500;
    font-size: 2rem;
    transition: ease-in-out 0.2s;
}

.header-text h4 a:hover {
    color: olive;
    transition: ease-in-out 0.2s;
    text-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.header-text p {
    font-size: 1rem;
    text-align: center;
    color: olive;
}

.header-text h4 a {
    color: black;
    transition: ease-in-out 0.2s;
}

img {
    width: 100%;
    height: 100%;


}

.hamburger {
    display: none;
    /* hidden on desktop */
}

.header-right {
    display: flex;
    margin-right: 2%;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.header-right a:nth-child(5) {
    font-weight: 500;
}

.header-right a {
    color: black;
    font-weight: 400;
    font-size: 1.1rem;
    transition: ease-in-out 0.2s;

}

.header-right a:hover {
    color: olive;
    transition: ease-in-out 0.2s;
    text-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}



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

File#: _1_language-picker
Title: Language Picker
Descr: A custom selector allowing users to choose their preferred language on a page
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*,
*::after,
*::before {
    box-sizing: border-box;
}

* {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1rem;
}

h1,
h2,
h3,
h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 300;
}

h1 {
    font-size: 2.0736rem;
}

h2 {
    font-size: 1.728rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.2rem;
}

ol,
ul,
menu {
    list-style: none;
}

button,
input,
textarea,
select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
}

textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
}

a {
    color: hsl(250, 84%, 54%);
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
}

@media (min-width: 64rem) {
    body {
        font-size: 1.25rem;
    }

    h1 {
        font-size: 3.051rem;
    }

    h2 {
        font-size: 2.44rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    h4 {
        font-size: 1.5625rem;
    }
}

/* variables */
:root {
    /* colors */
    --li4-color-primary-hsl: 250, 84%, 54%;
    --li4-color-bg-hsl: 0, 0%, 100%;
    --li4-color-contrast-high-hsl: 230, 7%, 23%;
    --li4-color-contrast-higher-hsl: 230, 13%, 9%;
    --li4-color-bg-light-hsl: 0, 0%, 100%;
    --li4-color-white-hsl: 0, 0%, 100%;
    --li4-color-bg-dark-hsl: 240, 4%, 95%;
    --li4-color-bg-lighter-hsl: 0, 0%, 100%;
    --li4-color-black-hsl: 230, 13%, 9%;

    /* spacing */
    --li4-space-3xs: 0.25rem;
    --li4-space-2xs: 0.375rem;
    --li4-space-xs: 0.5rem;
    --li4-space-sm: 0.75rem;
}

@media(min-width: 64rem) {
    :root {
        /* spacing */
        --li4-space-3xs: 0.375rem;
        --li4-space-2xs: 0.5625rem;
        --li4-space-xs: 0.75rem;
        --li4-space-sm: 1.125rem;
    }
}

/* buttons */
.li4-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    white-space: nowrap;
    text-decoration: none;
    background: hsl(var(--li4-color-bg-dark-hsl));
    color: hsl(var(--li4-color-contrast-higher-hsl));
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all 0.2s ease;
    will-change: transform;
    padding: var(--li4-space-1s) var(--li4-space-sm);
    border-radius: 0.25em;
}

.li4-btn:focus-visible {
    box-shadow: 0px 0px 0px 2px hsl(var(--li4-color-bg-hsl)), 0px 0px 0px 4px hsla(var(--li4-color-contrast-higher-hsl), 0.15);
    outline: none;
}

.li4-btn:active {
    transform: translateY(2px);
}

.li4-btn--subtle {
    background: hsl(var(--li4-color-bg-lighter-hsl));
    color: hsl(var(--li4-color-contrast-higher-hsl));
    box-shadow: inset 0px 1px 0px hsla(var(--li4-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--li4-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--li4-color-black-hsl), 0.2), 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
}

.li4-btn--subtle:hover {
    background: hsl(var(--li4-color-bg-light-hsl));
    box-shadow: inset 0px 1px 0px hsla(var(--li4-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--li4-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--li4-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
}

.li4-btn--subtle:focus {
    box-shadow: inset 0px 1px 0px hsla(var(--li4-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--li4-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--li4-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12), 0px 0px 0px 2px hsl(var(--li4-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--li4-color-contrast-high-hsl));
}

.li4-icon {
    height: var(--li4-size, 1em);
    width: var(--li4-size, 1em);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
}

/* component */
:root {
    --picker-vertical-gap: 4px;
}

.language-picker {
    display: inline-block;
    position: relative;
}

.language-picker__form {
    display: none;
}



.language-picker__button .li4-icon {
    height: 16px;
    width: 16px;
}

.language-picker__button .li4-icon:first-of-type {
    margin-right: var(--li4-space-3xs);
}

.language-picker__button .li4-icon:last-of-type {
    margin-left: var(--li4-space-3xs);
}

.language-picker__dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    width: 200px;
    background-color: hsl(var(--li4-color-bg-light-hsl));
    box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075), 0 0.9px 1.5px rgba(0, 0, 0, 0.03), 0 3.1px 5.5px rgba(0, 0, 0, 0.08), 0 14px 25px rgba(0, 0, 0, 0.12);
    padding: var(--li4-space-3xs) 0;
    border-radius: 0.25em;
    z-index: 5;
    margin-top: var(--picker-vertical-gap);
    margin-bottom: var(--picker-vertical-gap);
    --space-unit: 1rem;
    --text-unit: 1rem;
    font-size: var(--text-unit);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.2s, opacity 0.2s;
}

.language-picker__dropdown--right {
    right: 0;
    left: auto;
}

.language-picker__dropdown--up {
    bottom: 100%;
    top: auto;
}

.language-picker__button[aria-expanded=true]+.language-picker__dropdown {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.2s;
}

.language-picker__item {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: var(--li4-space-2xs) var(--li4-space-sm);
    color: hsl(var(--li4-color-contrast-high-hsl));
    transition: background 0.2s;
}

.language-picker__item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.language-picker__item:hover {
    background-color: hsla(var(--li4-color-contrast-higher-hsl), 0.075);
}

.language-picker__item:focus {
    outline: none;
    background-color: hsla(var(--li4-color-primary-hsl), 0.1);
}

.language-picker__item[aria-selected=true] {
    position: relative;
    background-color: hsl(var(--li4-color-primary-hsl));
    color: hsl(var(--li4-color-white-hsl));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.language-picker__item[aria-selected=true]:focus {
    outline: 2px solid hsla(var(--li4-color-primary-hsl), 0.2);
}

.language-picker__item[aria-selected=true]::after {
    content: "";
    height: 16px;
    width: 16px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E");
    margin-left: auto;
}

.language-picker__flag {
    display: flex;
    align-items: center;
}

.language-picker__flag::before {
    display: none;
    flex-shrink: 0;
    content: "";
    height: 16px;
    width: 16px;
    margin-right: var(--li4-space-2xs);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.language-picker__dropdown .language-picker__flag::before {
    margin-right: var(--li4-space-xs);
}

.language-picker--flags .language-picker__flag::before {
    display: inline-block;
    display: inline-flex;
}

.language-picker--flags .language-picker__button .li4-icon:first-of-type {
    display: none;
}

.language-picker__flag--deutsch::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M48,18H0V8c0-1.105,0.895-2,2-2h44c1.105,0,2,0.895,2,2V18z'/%3E%3Crect y='18' fill='%23EE0000' width='48' height='12'/%3E%3Cpath fill='%23FDCF00' d='M48,40c0,1.105-0.895,2-2,2H2c-1.105,0-2-0.895-2-2V30h48V40z'/%3E%3C/svg%3E");
}

.language-picker__flag--english::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23002781' d='M46,6H2C0.896,6,0,6.896,0,8v32c0,1.104,0.896,2,2,2h44c1.104,0,2-0.896,2-2V8C48,6.896,47.104,6,46,6z'/%3E%3Cpath fill='%23E6E6E6' d='M48,8c0-1.104-0.896-2-2-2h-5.161L28,15.876V6h-8v9.876L7.161,6H2C0.896,6,0,6.896,0,8v2.586L12.239,20H0v8 h12.239L0,37.415V40c0,1.104,0.896,2,2,2h5.161L20,32.124V42h8v-9.876L40.839,42H46c1.104,0,2-0.896,2-2v-2.585L35.761,28H48v-8 H35.761L48,10.586V8z'/%3E%3Cpolygon fill='%23D10D24' points='48,22 26,22 26,6 22,6 22,22 0,22 0,26 22,26 22,42 26,42 26,26 48,26 '/%3E%3Cpath fill='%23D10D24' d='M47.001,6.307L29.2,20h3.28L48,8.062V8C48,7.268,47.587,6.656,47.001,6.307z'/%3E%3Cpath fill='%23D10D24' d='M32.48,28H29.2l17.801,13.693C47.587,41.344,48,40.732,48,40v-0.062L32.48,28z'/%3E%3Cpath fill='%23D10D24' d='M15.52,28L0,39.938V40c0,0.732,0.413,1.344,0.999,1.693L18.8,28H15.52z'/%3E%3Cpath fill='%23D10D24' d='M15.52,20h3.28L0.999,6.307C0.413,6.656,0,7.268,0,8v0.062L15.52,20z'/%3E%3C/svg%3E");
}

.language-picker__flag--francais::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%2301209F' d='M16,42H2c-1.105,0-2-0.895-2-2V8c0-1.105,0.895-2,2-2h14V42z'/%3E%3Cpath fill='%23EF4234' d='M48,40c0,1.105-0.895,2-2,2H32V6h14c1.105,0,2,0.895,2,2V40z'/%3E%3Crect x='16' y='6' fill='%23E6E6E6' width='16' height='36'/%3E%3C/svg%3E");
}

.language-picker__flag--italiano::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23009345' d='M16,42H2c-1.105,0-2-0.895-2-2V8c0-1.105,0.895-2,2-2h14V42z'/%3E%3Cpath fill='%23CF2B36' d='M48,40c0,1.105-0.895,2-2,2H32V6h14c1.105,0,2,0.895,2,2V40z'/%3E%3Crect x='16' y='6' fill='%23E6E6E6' width='16' height='36'/%3E%3C/svg%3E");
}

.language-picker--hide-label .language-picker__button .li4-icon {
    margin-left: 0;
}

.language-picker--hide-label .language-picker__button .li4-icon:first-of-type {
    display: none;
}

.language-picker--hide-label .language-picker__button em {
    display: none;
}

.language-picker--hide-label .language-picker__button .language-picker__flag::before {
    margin-right: var(--li4-space-3xs);
}

.language-picker--hide-label .language-picker__flag::before {
    display: inline-block;
    display: inline-flex;
}

/* utility classes */
.li4-sr-only {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    white-space: nowrap;
}

/* Language picker end */

/* Shuurlu */
.shuurlu {
    height: 100vh;
    width: auto;
    padding-top: 2rem;
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}

.shuurlu h1 {
    font-weight: 700;
}

.shuurlu p {
    color: olive;
    font-size: 1.2em;
    font-weight: 300
}

.shuurlu a {
    margin-top: 3rem;
    border: 1px solid olive;
    background-color: olive;
    color: white;
    padding: 9px 16px;
    border-radius: 2rem;
    transition: ease-in-out 0.3s;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.shuurlu a:hover {
    transition: ease-in-out 0.3s;
    transform: translateY(-10px);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.container {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

/* Retritler */
.retritler {
    height: auto;
    width: 100%;
    background-image: url(teze-shekil.png);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}


.retritler h1 {
    font-weight: 700;
    font-size: 5rem;
    color: white;
    margin-bottom: 10rem;
}



.retritler-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding-top: 10vh;
}

.retritler-container h1 {
    padding-top: 5rem;
    margin-bottom: 5rem;
}

.heyatMektebi {
    height: auto;
    width: 100%;
    background-image: url(heyatmektebi\ cropped.png);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}


.heyatMektebi h1 {
    font-weight: 700;
    font-size: 5rem;
    color: white;
    margin-bottom: 10rem;
}

.heyatMektebi-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-content: center;
    padding-top: 10vh;
}

.heyatMektebi-container h1 {
    padding-top: 5rem;
    margin-bottom: 5rem;
}


.bizim {
    height: 80vh;
    width: auto;
    background-image: linear-gradient(40deg, #fdfcfb 0%, #e2d1c3 100%);
}

.bizim3 {
    height: 100vh;
    width: auto;
    background-image: linear-gradient(40deg, #fdfcfb 0%, #e2d1c3 100%);
}


.bizim3-container {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}


.bizim3-textsk {
    text-align: center;
    width: 45%;
    justify-self: center;
    padding-top: 3rem;
}

.bizim3-textsk p {
    text-align: left;
}

.bizim-container {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.bizim-text {
    text-align: left;
    width: 45%;
}

.bizim-textsk {
    text-align: center;
    width: 45%;
    justify-self: center;
}

.bizim-textsk p {
    text-align: left;
}

.bizim-text h2 {
    font-weight: 700;
}

.bizim-text p {
    font-weight: 300;
    font-size: 1rem;
}

.bizim-image {
    width: 45%;
    align-self: center;

}

.bizim-image img {
    border-radius: 2rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    align-self: center;
    justify-content: center;
    margin-top: 20%;
}


.bizim2 {
    height: 110vh;
    width: auto;
    background-image: linear-gradient(40deg, #fdfcfb 0%, #e2d1c3 100%);
}

.bizim-container2 {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.bizim-text2 {
    text-align: left;
    width: 45%;
}

.bizim-text2 h2 {
    font-weight: 700;
}

.bizim-text2 p {
    font-weight: 300;
    font-size: 1.1rem;
}

.bizim-text1 {
    text-align: left;
    width: 45%;
}

.bizim-text1 p {
    font-size: 1.1rem;
    font-weight: 300;
}

.bizim-text3 {
    text-align: left;
    width: 45%;
}

.bizim-text3 p {
    font-size: 1.1rem;
    font-weight: 300;
}

.bizim-text4 {
    text-align: left;
    width: 45%;
}

.bizim-text4 p {
    font-size: 1.1rem;
    font-weight: 300;
}

.bizim-text5 {
    text-align: left;
    width: 45%;
}

.bizim-text5 p {
    font-size: 1.1rem;
    font-weight: 300;
}


.bizim-text6 {
    text-align: left;
    width: 45%;
}

.bizim-text6 p {
    font-size: 1.1rem;
    font-weight: 300;
}

.bizim-image2 {
    width: 45%;
    align-self: center;

}

.bizim-image2 img {
    border-radius: 2rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    align-self: center;
    justify-content: center;
    margin-top: 20%;
}

/* Retritler end */

/* Heyat mektebi */

.heyatMektebi {
    height: auto;
    width: 100%;
    background-image: url(heyatmektebi\ cropped.png);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}


.heyatMektebi h1 {
    font-weight: 700;
    font-size: 5rem;
    color: white;
    margin-bottom: 10rem;
}

.heyatMektebi-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-content: center;
    padding-top: 10vh;
}

.heyatMektebi-container h1 {
    padding-top: 5rem;
    margin-bottom: 5rem;
}


/* proqrammi na sentyabr */

.proqrammi {
    height: auto;
    width: auto;
    background-image: linear-gradient(40deg, #fdfcfb 0%, #e2d1c3 100%);
}

.proqrammi-container {
    width: 60%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.podpiska a {
    padding: 10px;
    border: 1px solid olive;
    text-align: center;
    border-radius: 2rem;
    justify-self: center;
    width: 300px;
    margin: auto;
    background-color: white;
    margin-bottom: 5rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    color: olive;

}

.podpiska a:hover {
    color: white;
    background-color: olive;
}

.podpiska {
    display: flex;
}

.bashliq {
    text-align: center;
    padding: 7rem
}

.bashliq h1 {
    font-weight: 600;
}

.bashliq p {
    padding-top: 2rem;
    font-size: larger;
}

.ichlik {
    display: flex;
    gap: 2rem;
    margin-bottom: 5rem;
}



.bulletPoint {
    font-size: 30px;
    border: 1px solid olive;
    color: white;
    background-color: olive;
    padding: 10px 22px;
    border-radius: 2rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    height: 5%;
}

.bulletPointText {
    border: 1px solid lightgray;
    background-color: #F8F4EC;
    padding: 2rem 2rem;
    border-radius: 2rem;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}


/* proqrammi na sentyabr end */

.bizim {
    height: 80vh;
    width: auto;
    background-image: linear-gradient(40deg, #fdfcfb 0%, #e2d1c3 100%);
}

.bizim-container {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.bizim-text {
    text-align: left;
    width: 45%;
}

.bizim-text h2 {
    font-weight: 700;
}

.bizim-text p {
    font-weight: 300;
    font-size: 1rem;
}

.bizim-image {
    width: 45%;
    align-self: center;

}

.bizim-image img {
    border-radius: 2rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    align-self: center;
    justify-content: center;
    margin-top: 20%;
}


.bizim2 {
    height: 110vh;
    width: auto;
    background-image: linear-gradient(40deg, #fdfcfb 0%, #e2d1c3 100%);
}

.bizim-container2 {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.bizim-text2 {
    text-align: left;
    width: 45%;
}

.bizim-text2 h2 {
    font-weight: 700;
}

.bizim-text2 p {
    font-weight: 300;
    font-size: 1.1rem;
}

.bizim-text1 {
    text-align: left;
    width: 45%;
}

.bizim-text1 p {
    font-size: 1.1rem;
    font-weight: 300;
}

.bizim-text3 {
    text-align: left;
    width: 45%;
}

.bizim-text3 p {
    font-size: 1.1rem;
    font-weight: 300;
}

.bizim-text4 {
    text-align: left;
    width: 45%;
}

.bizim-text4 p {
    font-size: 1.1rem;
    font-weight: 300;
}

.bizim-text5 {
    text-align: left;
    width: 45%;
}

.bizim-text5 p {
    font-size: 1.1rem;
    font-weight: 300;
}


.bizim-text6 {
    text-align: left;
    width: 45%;
}

.bizim-text6 p {
    font-size: 1.1rem;
    font-weight: 300;
}

.bizim-image2 {
    width: 45%;
    align-self: center;

}

.bizim-image2 img {
    border-radius: 2rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    align-self: center;
    justify-content: center;
    margin-top: 20%;
}

/* Retritler end */
/* Heyat mektebi end */

.loqo {
    height: 20%;
    width: 20%;
    overflow: hidden;
}

.felsefemiz {
    height: 100vh;
    width: auto;
    background-image: linear-gradient(40deg, #fdfcfb 0%, #e2d1c3 100%);
}

.felsefemiz-container {
    display: flex;
    width: 85%;
    margin: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;

}

.felsefemiz-text h3 {
    font-size: 3rem;
    font-weight: 700;
}

.felsefemiz-text p {
    color: olive;
}

.felsefemiz-cards {
    display: flex;
    gap: 5rem;
    padding-top: 3rem;
}

.felsefemiz-card {
    text-align: left;
    border: 1px solid lightgray;
    background-color: #F8F4EC;
    padding: 2rem 2rem;
    width: 25rem;
    height: 20rem;
    border-radius: 2rem;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    transition: ease-in-out 0.3s;
}

.felsefemiz-card:hover {
    transition: ease-in-out 0.3s;
    transform: translateY(-10px);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.emoji {
    font-size: 3rem;
    color: olive;
}

.fa-solid {
    color: olive;
}

.felsefemiz-card h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.felsefemiz-card p {
    font-weight: 300;
    font-size: 1.2rem;
}

/* Proqramlarimiz */
.proqramlarimiz {
    height: 120vh;
    width: auto;
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}

.proqramlarimiz-container {
    width: 85%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 2rem;
}

.proqramlarimiz-text {
    text-align: center;
}

.proqramlarimiz-cards {
    display: flex;
    gap: 1rem;
    padding-top: 3rem;
}


.proqramlarimiz-text h3 {
    font-size: 3rem;
    font-weight: 700;
}

.proqramlarimiz-text p {
    color: olive;
}

.proqramlarimiz-card {
    padding: 0.7rem 0.7rem;
    border-radius: 1rem;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: ease-in-out 0.3s;
    height: 32rem;
    width: 20rem;
    border: 1px solid lightgray;
    background-color: #F8F4EC;
}

.proqramlarimiz-card:hover {
    transition: ease-in-out 0.3s;
    transform: translateY(-5px);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    cursor: pointer;
}



.proqramlarimiz-card h3 {

    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    margin-top: 1rem;
    text-align: center;
}


.proqramlarimiz-card p {
    font-weight: 300;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.proqramlarimiz-card:nth-child(2) p {
    margin-bottom: 3rem;
}




.proqramlarimiz-card-text a {
    font-weight: 400;
    font-size: 1.2rem;
    margin: 0 auto;
    width: 70%;
    border: 1px solid white;
    text-align: center;
    display: block;
    padding: 5px;
    border-radius: 2rem;
    background-color: white;
    color: black;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.proqramlarimiz-card-text a:hover {
    font-weight: 400;
    font-size: 1.2rem;
    margin: 0 auto;
    width: 70%;
    border: 1px solid white;
    text-align: center;
    display: block;
    padding: 5px;
    border-radius: 2rem;
    background-color: olive;
    color: white;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}


/* Proqramlarimiz end */

/* Deyerimiz */

.deyerlerimiz {
    height: 90vh;
    width: auto;
    background-image: linear-gradient(40deg, #fdfcfb 0%, #e2d1c3 100%);
}

.deyerlerimiz p:first-of-type {
    color: olive;
}

.deyerlerimiz-container {
    width: 85%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 2rem;
}

.deyerlerimiz-text {
    text-align: center;
}

.deyerlerimiz-text h3 {
    font-size: 3rem;
    font-weight: 700;
}

.deyerlerimiz-cards {
    display: flex;
    padding-top: 3rem;
    gap: 2rem;
    justify-content: center;
}

.deyerlerimiz-card {
    height: 20rem;
    width: 16rem;
    border: 1px solid lightgray;
    justify-items: center;
    text-align: center;
    align-content: center;
    border-radius: 1rem;
    transition: ease-in-out 0.3s;
    background-color: #F8F4EC;
    padding: 2rem 2rem;
}

.deyerlerimiz-card:hover {
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: ease-in-out 0.3s;
    transform: translateY(-10px);
}

.deyerlerimiz-emoji {
    font-size: 3rem;
}

.deyerlerimiz-card p {
    font-weight: 300;
    font-size: 1.2rem;
}

.deyerlerimiz-card h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.deyishiklik {
    height: 50vh;
    width: auto;
    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.deyishiklik-container {
    width: 85%;
    height: 20rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.deyishiklik-text {
    text-align: center;
}

.deyishiklik-text h3 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.deyishiklik-text p {
    font-weight: 300;
    font-size: 1.5rem;
    margin-bottom: 3rem;
}

.deyishiklik-text1 {
    text-align: center;
}

.deyishiklik-text1 p {
    font-weight: 350;
    font-size: 1.5rem;
    margin-bottom: 2rem;
}



.deyishiklik-text a {
    padding: 16px;
    border: 1px solid olive;
    background-color: olive;
    color: white;
    border-radius: 2rem;
    transition: ease-in-out 0.3s;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.deyishiklik-text a:hover {
    transition: ease-in-out 0.3s;
    transform: translateY(-10px);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

/* Blank space */
.blank {
    height: 10vh;
    width: auto;
    background-color: white;
}

.blank2 {
    height: 5vh;
    width: auto;
    background-image: url(line.png);
}

/* Blank space end */

/* Footer start */
.footer {
    height: 30vh;
    background-color: #faf0e6;
}

.footer-container {
    width: 85%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
}

.footer-part {
    text-align: start;

}

.footer-part p {
    font-weight: 300;
    color: olive;
    font-size: 1rem;
}

.footer-part a {
    color: olive;
}

.footer-part h4 {
    font-weight: 400;
}

.footer-loqo-text {
    overflow: none;
    height: 3rem;
    display: flex;
    align-items: center;
}

.footer-loqo-text img {
    width: 3rem;
    height: 3rem;
}

.footer-loqo-text h4 {
    font-weight: 500;
    font-size: 1.5rem;
}

/* Footer end */

/* haqqimizda css */

.missiya {
    height: 100vh;
    width: auto;
    background-image: linear-gradient(28deg, #fdfcfb 0%, #e2d1c3 100%);
}

.missiya-container {
    display: flex;
    width: 70%;
    margin: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;

}

.missiya-text h3 {
    font-size: 3rem;
    font-weight: 500;
}

.missiya-text p {
    color: olive;
}

.missiya-cards {
    display: flex;
    gap: 5rem;
    padding-top: 3rem;
}

.missiya-card {
    text-align: left;
    border: 1px solid lightgray;
    background-color: #F8F4EC;

    padding: 2rem 2rem;
    width: 25rem;
    height: 22rem;
    border-radius: 2rem;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    transition: ease-in-out 0.3s;
}

.missiya-card:hover {
    transition: ease-in-out 0.3s;
    transform: translateY(-10px);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.emoji {
    font-size: 3rem;
}

.missiya-card h3 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    margin-top: 1rem;

}

.missiya-card p {
    font-weight: 300;
    font-size: 1.2rem;
}

.komanda {
    height: 120vh;
    width: auto;
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}

.komanda-container {
    display: flex;
    flex-direction: column;
    /* This moves the text to the top and images to the bottom */
    align-items: center;
    /* This centers everything horizontally */
    width: 100%;

}

.komanda-text {
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

.komanda-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.komanda-text h3 {
    font-size: 3rem;
    font-weight: 500;
}

.komanda-text p {
    color: olive;
}

.komanda-card {
    padding: 0.7rem 0.7rem;
    border: solid 1px #faf0e6;
    border-radius: 1rem;
    background-color: #faf0e6;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: ease-in-out 0.3s;
    height: 33rem;
    width: 20rem;
}

.komanda-card:hover {
    transition: ease-in-out 0.3s;
    transform: translateY(-5px);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    cursor: pointer;
}



.komanda-card h3 {

    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    margin-top: 1rem;
    text-align: left;

}

.komanda-card span {
    font-size: 1.1rem;
}

.komanda-card p {
    font-weight: 300;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}


.komanda-card-text a {
    font-weight: 400;
    font-size: 1.2rem;
    margin: 0 auto;
    width: 70%;
    border: 1px solid white;
    text-align: center;
    display: block;
    padding: 5px;
    border-radius: 2rem;
    background-color: white;
    color: black;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);

}

.komanda-card-text a:hover {
    font-weight: 400;
    font-size: 1.2rem;
    margin: 0 auto;
    width: 70%;
    border: 1px solid white;
    text-align: center;
    display: block;
    padding: 5px;
    border-radius: 2rem;
    background-color: olive;
    color: white;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);

}

.bizim {
    height: 80vh;
    width: auto;
    background-image: linear-gradient(40deg, #fdfcfb 0%, #e2d1c3 100%);
}

.bizim-container {
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;

    gap: 5rem;
}

.bizim-text {
    text-align: left;
    width: 45%;
}

.bizim-text h2 {
    font-weight: 700;
}

.bizim-text p {
    font-weight: 300;
    font-size: 1rem;
}

.bizim-image {
    width: 45%;

}

.bizim-image img {
    border-radius: 2rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}


.niye {
    height: 50vh;
    width: auto;
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}

.niye-container {
    width: 70%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;



}

.niye-upper h3 {
    font-size: 2.8rem;
    font-weight: 500;
    margin-bottom: 2rem;
    margin-top: 3rem;
}

.niye-lower {
    display: grid;
    grid-template-columns: 2fr 2fr;
    gap: 1rem;
    font-weight: 300;
}

/* haqqimizda css end */

/* Proqramlarimiz */
.prz {
    height: 70vh;
    width: auto;
    padding-top: 2rem;
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}

.prz-container {
    width: 85%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.prz h1 {
    font-weight: 700;
}

.prz p {
    color: olive;
    font-size: 1.5rem;
}

/* Proqramlarimiz end */

/* Product Selection Container */
.heyat-text select#therapyType {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid olive;
    /* Your signature pink */
    border-radius: 30px;
    /* Rounded pill shape */
    padding: 12px 40px 12px 20px;
    font-size: 16px;
    font-family: 'Work Sans', sans-serif;
    color: #444;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23808000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    box-shadow: 0 4px 6px rgba(255, 182, 193, 0.1);
    min-width: 180px;
}

/* Hover and Focus States */
.heyat-text select#therapyType:hover {
    border-color: olive;
    box-shadow: 0 6px 12px rgba(255, 182, 193, 0.2);
    transform: translateY(-1px);
}

.heyat-text select#therapyType:focus {
    background-color: #fffafb;
    border-color: olive;
}

/* Aligning the Select and the Button */
#heyat2 .heyat-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Grouping the dropdown and button together */
.selection-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

/* Pop up */
/* This ensures the popup covers the screen when display: flex is triggered */
/* Ensure the popup is actually visible and on top of everything */
/* Container Background */
#loginPopup {
    display: none;
    /* JS will toggle this to flex */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Dark semi-transparent overlay */
    backdrop-filter: blur(4px);
    /* Blurs the website behind the popup */
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

/* The Modal Box */
.popup-content {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    position: relative;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    animation: fadeInScale 0.3s ease-out;
}

/* The "X" Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
}

.close:hover {
    color: #333;
}

/* The Heading */
.popup-content h3 {
    margin-top: 0;
    font-family: sans-serif;
    color: #2c3e50;
    font-size: 1.4rem;
    line-height: 1.2;
}

/* The Sign In Link (Styled as a Button) */
.popup-content a {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 25px;
    background-color: #007bff;
    /* Primary Brand Color */
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: transform 0.2s, background-color 0.2s;
}

.popup-content a:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

/* Entrance Animation */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Pop up end */

.icon {
    font-size: 4rem;
}

.fi {
    color: olive;
}

.heyat1 {
    height: 130vh;
    width: auto;
    overflow: hidden;
    background-image: linear-gradient(40deg, #fdfcfb 0%, #e2d1c3 100%);
}

.heyat1 img {
    width: 100%;
    height: auto;
}

.bullets ul li {
    margin-bottom: 5px;
    /* Adjust this number (e.g., 0px or 2px) to get it perfect */
    padding: 0;
    /* Ensures no extra padding is causing the gap */
    line-height: 1.2;
    /* Controls the height of the text line itself */
}

.heyat2 {
    height: 120vh;
    width: auto;
    overflow: hidden;
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}

.heyat3 {
    height: 130vh;
    width: auto;
    overflow: hidden;
    background-image: linear-gradient(40deg, #fdfcfb 0%, #e2d1c3 100%);
}


.heyat-container {
    width: 95%;
    margin: auto;
    display: flex;
    justify-content: center;
    margin-top: 5rem;
    gap: 4rem;

}

.heyat-icon {
    font-size: 3rem;
}

.heyat-text {
    text-align: left;
    width: 45%;
}

.heyat-text h2 {
    font-weight: 700;
}

.heyat-text p {
    font-weight: 500;
    font-size: 1.2rem;
}

.heyat-image {
    width: 45%;

}

.heyat-image img {
    border-radius: 2rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.bullets ul {
    font-weight: 350;
    font-size: 1.2rem;
}

.bullets li {
    line-height: 2;
}

.muddet-format {
    display: flex;
    gap: 15rem;
    padding-top: 2rem;
}

.muddet-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.muddet-icon {
    font-size: 1.5rem;
}

.muddet-box span {
    display: block;
    font-size: 1rem;
}

.muddet-box span:nth-child(2) {
    color: olive;
}

.heyat-text a {
    padding: 5px 15px;
    border: 1px solid olive;
    background-color: olive;
    color: white;
    border-radius: 2rem;
    transition: ease-in-out 0.3s;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.heyat-text a:hover {
    transition: ease-in-out 0.3s;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

.heyat3-image {
    max-width: 45%;
    height: 100%;
}

.heyat3-image img {
    border-radius: 2rem;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}


/* Proqramlarimiz end */

/* Elaqe */
.contact_us_2 * {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.contact_us_2 .text-blk {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    line-height: 25px;
    font-weight: 400;
    color: olive;
}


.contact_us_2 .responsive-cell-block {
    min-height: 75px;
}

.contact_us_2 input:focus {
    outline-color: initial;
    outline-style: none;
    outline-width: initial;
}

.contact_us_2 .container-block {
    min-height: 75px;
    width: 100%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    display: block;
}

.contact_us_2 .submit-btn:hover {
    transition: ease-in-out 0.3s;
    transform: translateY(-10px);
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;

}

.contact_us_2 .responsive-container-block {
    min-height: 75px;
    height: fit-content;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 50px;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.contact_us_2 .responsive-container-block.big-container {
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
    position: relative;
    height: auto;
}

.contact_us_2 .responsive-container-block.container {
    position: static;
    min-height: 75px;
    flex-direction: column;
    z-index: 2;
    max-width: 800px;
    margin-top: 120px;
    margin-right: auto;
    margin-bottom: 50px;
    margin-left: auto;
}

.contact_us_2 .container-block.form-wrapper {
    background-color: white;
    max-width: 799px;
    text-align: center;
    padding-top: 50px;
    padding-right: 40px;
    padding-bottom: 50px;
    padding-left: 40px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 20px 7px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

.contact_us_2 .text-blk.contactus-head {
    font-size: 36px;
    line-height: 50px;
    font-weight: 500;
}

.contact_us_2 .text-blk.contactus-subhead {
    color: #9c9c9c;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 50px;
    margin-left: 0px;
}

.contact_us_2 .responsive-cell-block.wk-desk-6.wk-ipadp-6.wk-tab-12.wk-mobile-12 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 26px;
    margin-left: 0px;
    min-height: 50px;
}

.contact_us_2 .input {
    width: 96%;
    height: 50px;
    padding-top: 1px;
    padding-right: 15px;
    padding-bottom: 1px;
    padding-left: 15px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #eeeeee;
    border-right-color: #eeeeee;
    border-bottom-color: #eeeeee;
    border-left-color: #eeeeee;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    font-size: 16px;
    color: black;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.contact_us_2 .textinput {
    width: 98%;
    min-height: 150px;
    padding-top: 20px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 15px;
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #eeeeee;
    border-right-color: #eeeeee;
    border-bottom-color: #eeeeee;
    border-left-color: #eeeeee;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    font-size: 16px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.contact_us_2 .submit-btn {
    width: 98%;
    background-color: olive;
    height: 60px;
    font-size: 20px;
    font-weight: 700;
    color: white;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: outset;
    border-right-style: outset;
    border-bottom-style: outset;
    border-left-style: outset;
    border-top-color: #767676;
    border-right-color: #767676;
    border-bottom-color: #767676;
    border-left-color: #767676;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    cursor: pointer;
    transition: ease-in-out 0.3s;

}

.contact_us_2 .form-box {
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

.contact_us_2 .social-media-links {
    width: 250px;
    display: flex;
    justify-content: space-evenly;
    margin-top: 50px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

.contact_us_2 .link-img {
    width: 30px;
    height: 30px;
}

.contact_us_2 .text-blk.input-title {
    text-align: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    font-size: 14px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    color: #9c9c9c;
}

.contact_us_2 ::placeholder {
    color: #dadada;
}

.contact_us_2 .blueBG {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    height: 300px;
    background-image: linear-gradient(40deg, #fdfcfb 0%, #e2d1c3 100%);
    ;
}

/* Toast Notification Styling */
.toast {
    visibility: hidden;
    min-width: 250px;
    background-color: #808000;
    /* Olive */
    color: #fff;
    text-align: center;
    border-radius: 30px;
    padding: 16px;
    position: fixed;
    z-index: 10000;
    /* Ensure it stays above header/footer */
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    font-family: 'Work Sans', sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Heyat mektebi */

.bizim3-textsk a {
    padding: 1rem;
    border: solid olive 1px;
    background-color: white;
    color: olive;
    border-radius: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bizim3-textsk a:hover {
    background-color: olive;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: fadein 0.5s, fadeout 0.5s 2.5s;

}

/* Heyat Mektebi end */

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .contact_us_2 .submit-btn {
        width: 100%;
    }

    .contact_us_2 .input {
        width: 100%;
    }

    .contact_us_2 .textinput {
        width: 100%;
    }

    .contact_us_2 .container-block.form-wrapper {
        margin-top: 80px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }

    .contact_us_2 .text-blk.input-title {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
    }

    .contact_us_2 .responsive-container-block.container {
        margin-top: 80px;
        margin-right: 0px;
        margin-bottom: 50px;
        margin-left: 0px;
    }

    .contact_us_2 .container-block.form-wrapper {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }

    .contact_us_2 .text-blk.contactus-head {
        font-size: 30px;
        line-height: 40px;
    }
}

@media (max-width: 500px) {
    .contact_us_2 .container-block.form-wrapper {
        padding-top: 50px;
        padding-right: 15px;
        padding-bottom: 50px;
        padding-left: 15px;
    }

    .contact_us_2 .container-block.form-wrapper {
        margin-top: 60px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }

    .contact_us_2 .responsive-cell-block.wk-ipadp-6.wk-tab-12.wk-mobile-12.wk-desk-6 {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 15px;
        margin-left: 0px;
    }

    .contact_us_2 .responsive-container-block {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 35px;
        margin-left: 0px;
    }

    .contact_us_2 .text-blk.input-title {
        font-size: 12px;
    }

    .contact_us_2 .responsive-container-block.container {
        margin-top: 50px;
        margin-right: 0px;
        margin-bottom: 50px;
        margin-left: 0px;
    }

    .contact_us_2 .container-block.form-wrapper {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }

    .contact_us_2 .responsive-container-block.big-container {
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-left: 20px;
    }

    .contact_us_2 .text-blk.contactus-head {
        font-size: 26px;
        line-height: 34px;
    }

    .contact_us_2 .input {
        height: 45px;
    }
}

/* Elaqe end */

@media (max-width: 768px) {
    body {
        font-size: 90%;
        line-height: 1.4;
        overflow-x: hidden;
        margin: 0;
        padding-top: 70px;
        /* push content down below fixed header */
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 70px;
        background-color: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 1000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .header-left {
        flex: 0 0 auto;
        max-width: 70%;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .header-left .header-text p {
        display: block;
    }

    .header-logo img {
        max-width: 50px;
        height: auto;
    }

    .header-text h4 {
        font-size: 1.2rem;
    }

    .header-text p {
        font-size: 0.8rem;
    }

    /* Hamburger only on mobile */
    .hamburger {
        font-size: 2rem;
        background: none;
        border: none;
        cursor: pointer;
        color: black;
        display: block;
        flex: 0 0 auto;
    }

    /* Collapsible nav hidden by default */
    .header-right {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
        display: none;
    }

    .header-right.active {
        display: flex;
    }

    .header-right a,
    .language-picker {
        width: 100%;
        padding: 0.5rem 0;
        font-size: 1rem;
    }

    /* Emojis bigger */
    .emoji,
    .deyerlerimiz-emoji {
        font-size: 3.5rem;
    }

    /* Remove fixed heights */
    .shuurlu,
    .felsefemiz,
    .proqramlarimiz,
    .deyerlerimiz,
    .missiya,
    .komanda,
    .bizim,
    .heyat1,
    .heyat2,
    .heyat3,
    .deyishiklik {
        height: auto !important;
        padding: 2rem 1rem;
    }

    .shuurlu .container {
        padding-top: 1rem;
    }

    .haqqimizda .container {
        justify-content: center;
        align-items: center;
    }

    /* Cards stack */
    .felsefemiz-cards,
    .proqramlarimiz-cards,
    .deyerlerimiz-cards,
    .missiya-cards,
    .komanda-cards {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .missiya-container {
        width: 95%;
    }

    .felsefemiz-card,
    .proqramlarimiz-card,
    .deyerlerimiz-card,
    .missiya-card,
    .komanda-card {
        width: 95%;
        height: auto;
    }

    .niye-container {
        width: 85%;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    /* Image + Text sections stack */
    .bizim-container,
    .heyat-container {
        flex-direction: column;
        gap: 2rem;
    }

    .bizim-text,
    .heyat-text {
        width: 100%;
        max-width: 100%;
    }

    /* Make bizim-image bigger */
    .bizim-image {
        width: 100%;
        text-align: center;
    }

    .bizim-image img {
        width: 100%;
        max-width: 600px;
        /* allow larger size */
        height: auto;
        display: inline-block;
    }



    .heyat-image,
    .heyat3-image {
        width: 100%;
        max-width: 100%;
    }

    /* Footer */
    .footer-container {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .footer {
        height: auto;
        padding: 2rem 1rem;
    }

    /* Language picker */
    .language-picker {
        width: 100%;
    }

    .language-picker select {
        width: 100%;
        padding: 0.5rem;
        font-size: 1rem;
    }

    .container {
        width: auto;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800&display=swap');

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    margin: 0;
}

.wk-desk-1 {
    width: 8.333333%;
}

.wk-desk-2 {
    width: 16.666667%;
}

.wk-desk-3 {
    width: 25%;
}

.wk-desk-4 {
    width: 33.333333%;
}

.wk-desk-5 {
    width: 41.666667%;
}

.wk-desk-6 {
    width: 50%;
}

.wk-desk-7 {
    width: 58.333333%;
}

.wk-desk-8 {
    width: 66.666667%;
}

.wk-desk-9 {
    width: 75%;
}

.wk-desk-10 {
    width: 83.333333%;
}

.wk-desk-11 {
    width: 91.666667%;
}

.wk-desk-12 {
    width: 100%;
}

/* @media (max-width: 1024px) {
    .wk-ipadp-1 {
        width: 8.333333%;
    }

    .wk-ipadp-2 {
        width: 16.666667%;
    }

    .wk-ipadp-3 {
        width: 25%;
    }

    .wk-ipadp-4 {
        width: 33.333333%;
    }

    .wk-ipadp-5 {
        width: 41.666667%;
    }

    .wk-ipadp-6 {
        width: 50%;
    }

    .wk-ipadp-7 {
        width: 58.333333%;
    }

    .wk-ipadp-8 {
        width: 66.666667%;
    }

    .wk-ipadp-9 {
        width: 75%;
    }

    .wk-ipadp-10 {
        width: 83.333333%;
    }

    .wk-ipadp-11 {
        width: 91.666667%;
    }

    .wk-ipadp-12 {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .wk-tab-1 {
        width: 8.333333%;
    }

    .wk-tab-2 {
        width: 16.666667%;
    }

    .wk-tab-3 {
        width: 25%;
    }

    .wk-tab-4 {
        width: 33.333333%;
    }

    .wk-tab-5 {
        width: 41.666667%;
    }

    .wk-tab-6 {
        width: 50%;
    }

    .wk-tab-7 {
        width: 58.333333%;
    }

    .wk-tab-8 {
        width: 66.666667%;
    }

    .wk-tab-9 {
        width: 75%;
    }

    .wk-tab-10 {
        width: 83.333333%;
    }

    .wk-tab-11 {
        width: 91.666667%;
    }

    .wk-tab-12 {
        width: 100%;
    }
}

/* Elaqe responsive */

@media (max-width: 500px) {
    .wk-mobile-1 {
        width: 8.333333%;
    }

    .wk-mobile-2 {
        width: 16.666667%;
    }

    .wk-mobile-3 {
        width: 25%;
    }

    .wk-mobile-4 {
        width: 33.333333%;
    }

    .wk-mobile-5 {
        width: 41.666667%;
    }

    .wk-mobile-6 {
        width: 50%;
    }

    .wk-mobile-7 {
        width: 58.333333%;
    }

    .wk-mobile-8 {
        width: 66.666667%;
    }

    .wk-mobile-9 {
        width: 75%;
    }

    .wk-mobile-10 {
        width: 83.333333%;
    }

    .wk-mobile-11 {
        width: 91.666667%;
    }

    .wk-mobile-12 {
        width: 100%;
    }
}

*/
/* Elaqe responsive end */

/* User page */
/* User Page Dashboard Styles */
.user-name-highlight {
    color: black;
}

.userpage-main {
    padding: 40px 5%;
    padding-top: 5rem;
    background-color: #fcf8f8;
    /* Soft background to match pink theme */
    min-height: 100vh;
}

/* This ensures the welcome text is visible regardless of CSS files */
#welcome {
    color: #333 !important;
    font-size: 1.1rem;
    font-weight: 600;
}

.user-name-highlight {
    color: black;
    /* The pink from your theme */
    font-weight: 700;
}

.logout-btn {
    background-color: #f4f4f4;
    /* Light gray */
    color: black;
    border: 1px solid black;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background-color: black;
    border-color: black;
    color: white;
}

/* Ensure Pay Now stays your primary color */
.pay-btn {
    background-color: #ffb6c1;
    /* Your pink theme */
    color: white;
    /* ... rest of your styles ... */
}

#cartTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    /* Gap between rows */
    font-family: 'Work Sans', sans-serif;
}

#cartTable th {
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #444;
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid #ffb6c1;
    /* Pink accent */
}

#cartTable tbody tr {
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
}

#cartTable tbody tr:hover {
    transform: translateY(-2px);
}

#cartTable td {
    padding: 20px 15px;
    color: #555;
}

#cartTable td:first-child {
    border-radius: 10px 0 0 10px;
    font-weight: 600;
}

#cartTable td:last-child {
    border-radius: 0 10px 10px 0;
}

/* Button Styling */
.pay-btn,
.discard-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
    margin-right: 5px;
}

.pay-btn {
    background-color: white;
    color: olive;
    border: 1px solid olive;
}

.pay-btn:hover {
    background-color: olive;
    color: white;
}

.discard-btn {
    background-color: transparent;
    color: #ff4d4d;
    border: 1px solid #ff4d4d;
}

.discard-btn:hover {
    background-color: #ff4d4d;
    color: white;
}

.status-paid {
    color: #2ecc71;
    font-weight: bold;
    text-transform: uppercase;
}

/* User page end */

/* Qeydiyyat */



/* Qeydiyyat end */


/* --- RESPONSIVE DESIGN --- */

/* For Tablets (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .container {
        width: 85%;
        /* Increase width from 50% to 85% for better readability */
    }

    .felsefemiz-cards,
    .proqramlarimiz-cards,
    .deyerlerimiz-cards {
        gap: 1.5rem;
    }
}

/* For Mobile (max-width: 768px) */
@media screen and (max-width: 768px) {

    /* Header & Navigation */
    .header {
        padding: 0 1rem;
    }

    .header-right {
        display: none;
        /* Hide standard nav */
        position: absolute;
        top: 5rem;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        padding: 2rem 0;
        border-bottom: 1px solid #ddd;
        text-align: center;
        backdrop-filter: blur(10px);
    }

    /* Show menu when "active" class is added via JS */
    .header-right.active {
        display: flex;
    }

    .header-right ul {
        flex-direction: column;
        gap: 1.5rem;
    }

    .hamburger {
        display: block !important;
        /* Force show the button you have in HTML */
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
        color: #333;
    }

    /* Section Layouts: Stack everything vertically */
    .shuurlu {
        height: auto;
        padding: 8rem 0 4rem 0;
    }

    .bizim-container,
    .felsefemiz-cards,
    .proqramlarimiz-cards,
    .deyerlerimiz-cards,
    .missiya-cards,
    .komanda-cards {
        flex-direction: column !important;
        align-items: center;
    }

    .bizim-text,
    .bizim-image,
    .felsefemiz-card,
    .proqramlarimiz-card {
        width: 100% !important;
        max-width: 400px;
        margin-bottom: 2rem;
    }

    /* Grid adjustments */
    .niye-lower {
        grid-template-columns: 1fr;
        /* Single column for 'Why Us' section */
    }

    /* Footer */
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 3rem;
    }

    /* Forms (Contact/Register) */
    .contact-container,
    .registration .container {
        width: 95%;
        padding: 20px;
    }
}

/* user page responsive */

/* Responsive Styles */
@media screen and (max-width: 768px) {

    /* Header & Navigation */
    .header {
        padding: 0 1rem;
    }

    .header-text h4 {
        font-size: 1.2rem;
    }

    .header-text p {
        display: none;
        /* Hide subtitle on small screens */
    }

    .hamburger {
        display: block !important;
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
        order: 2;
    }

    .header-right {
        display: none;
        /* Hidden by default on mobile */
        position: absolute;
        top: 5rem;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 2rem 0;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    .header-right.active {
        display: flex;
        /* Shown when hamburger is clicked */
    }

    .header-right a,
    #welcome-container,
    .logout-btn {
        margin: 10px 0 !important;
    }

    /* Table Responsiveness */
    .userpage-main {
        padding: 1rem;
        overflow-x: auto;
    }

    #cartTable {
        font-size: 0.9rem;
    }

    #cartTable th,
    #cartTable td {
        padding: 8px 4px;
    }

    /* General Layout Sections */
    .felsefemiz-cards,
    .proqramlarimiz-cards,
    .deyerlerimiz-cards,
    .missiya-cards,
    .komanda-cards {
        flex-direction: column !important;
        align-items: center;
        gap: 2rem;
    }

    .felsefemiz-card,
    .proqramlarimiz-card,
    .missiya-card {
        width: 90% !important;
        height: auto !important;
    }
}

@media screen and (max-width: 480px) {

    /* Stack table cells on very small screens */
    #cartTable thead {
        display: none;
    }

    #cartTable tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 8px;
        background: #F8F4EC;
    }

    #cartTable td {
        display: flex;
        justify-content: space-between;
        border: none;
        text-align: right;
    }

    #cartTable td::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
    }
}

/* Mobil Versiya üçün Media Sorğuları */
@media screen and (max-width: 768px) {
    .header {
        padding: 0 1rem;
    }

    .hamburger {
        display: block !important;
        /* Hamburger düyməsini göstər */
        font-size: 2rem;
        background: none;
        border: none;
        cursor: pointer;
        color: olive;
        order: 2;
    }

    .header-right {
        display: none;
        /* Menyu ilkin olaraq gizli olsun */
        flex-direction: column;
        position: absolute;
        top: 5rem;
        left: 0;
        width: 100%;
        background: white;
        padding: 2rem;
        border-bottom: 1px solid lightgoldenrodyellow;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    }

    .header-right.active {
        display: flex;
        /* Hamburger klikləndə göstər */
    }

    .header-right a {
        margin: 10px 0;
        font-size: 1.2rem;
    }

    /* Kartlar və konteynerlərin mobil görünüşü */
    .container {
        width: 90% !important;
    }

    .bizim-container,
    .bizim3-container {
        flex-direction: column !important;
        /* Elementləri alt-alta yığ */
        width: 95%;
        gap: 2rem;
    }

    .bizim-text,
    .bizim-textsk,
    .bizim3-textsk {
        width: 100% !important;
        text-align: center;
    }

    .bizim-image img {
        max-width: 100%;
        height: auto;
    }

    .retritler h1,
    .heyatMektebi h1 {
        font-size: 2.5rem !important;
        margin-bottom: 5rem;
    }
}

/* * --- ADAPTIVITY (MEDIA QUERIES) --- */

@media screen and (max-width: 768px) {
    .bizim-container {
        flex-direction: column !important;
        /* Текст и фото встают друг под друга */
        text-align: center;
    }

    .bizim-image {
        order: -1;
        /* Картинка всегда будет над текстом на мобильных */
    }

    .bashliq {
        padding: 4rem 1rem;
        /* Уменьшаем отступы заголовков */
    }

    .bashliq h1 {
        font-size: 1.8rem;
    }

    .ichlik {
        flex-direction: column;
        /* Цифра над текстом */
        align-items: center;
        text-align: center;
    }

    .bulletPoint {
        margin-bottom: -1rem;
        z-index: 2;
    }

    .bulletPointText {
        width: 100%;
        padding: 2rem 1rem 1.5rem 1rem;
    }

    .proqrammi-container {
        width: 80%;
    }

    .bizim3 {
        height: 55rem;
    }

    .bizim3-container {
        width: 80%;
    }

    .heyat2 .selection-group {
        display: flex;
        flex-wrap: wrap;
    }

    .heyat1 .selection-group {
        display: flex;
        flex-wrap: wrap;
    }

    .bizim-text1,
    .bizim-text2,
    .bizim-text3,
    .bizim-text4,
    .bizim-text5,
    .bizim-text6 {
        width: 80%;
    }

    .bizim-container2 {
        display: flex;
        flex-wrap: wrap;
    }

    .retritler-container h1 {
        padding-top: 1rem;
    }

    .heyatMektebi-container h1 {
        padding-top: 1rem;
    }
}

/* FAQ */
*,
::before,
::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}

/*
! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
    box-sizing: border-box;
    /* 1 */
    border-width: 0;
    /* 2 */
    border-style: solid;
    /* 2 */
    border-color: #e5e7eb;
    /* 2 */
}

::before,
::after {
    --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
    line-height: 1.5;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -moz-tab-size: 4;
    /* 3 */
    -o-tab-size: 4;
    tab-size: 4;
    /* 3 */
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* 4 */
    font-feature-settings: normal;
    /* 5 */
    font-variation-settings: normal;
    /* 6 */
    -webkit-tap-highlight-color: transparent;
    /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
    margin: 0;
    /* 1 */
    line-height: inherit;
    /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
    height: 0;
    /* 1 */
    color: inherit;
    /* 2 */
    border-top-width: 1px;
    /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {

    font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
    color: inherit;
    text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* 1 */
    font-feature-settings: normal;
    /* 2 */
    font-variation-settings: normal;
    /* 3 */
    font-size: 1em;
    /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
    text-indent: 0;
    /* 1 */
    border-color: inherit;
    /* 2 */
    border-collapse: collapse;
    /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-feature-settings: inherit;
    /* 1 */
    font-variation-settings: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    font-weight: inherit;
    /* 1 */
    line-height: inherit;
    /* 1 */
    letter-spacing: inherit;
    /* 1 */
    color: inherit;
    /* 1 */
    margin: 0;
    /* 2 */
    padding: 0;
    /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
    text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
    -webkit-appearance: button;
    /* 1 */
    background-color: transparent;
    /* 2 */
    background-image: none;
    /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
    outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
    box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
}

legend {
    padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
    padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
    resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    /* 1 */
    color: #9ca3af;
    /* 2 */
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    /* 1 */
    color: #9ca3af;
    /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
    cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
    cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    /* 1 */
    vertical-align: middle;
    /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
    max-width: 100%;
    height: 100%;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
    display: none;
}

.visible {
    visibility: visible;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-10 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-8 {
    margin-top: 2rem;
}

.flex {
    display: flex;
}

.grid {
    display: grid;
}

.hidden {
    display: none;
}

.h-5 {
    height: 1.25rem;
}

.h-6 {
    height: 1.5rem;
}

.h-0 {
    height: 0px;
}

.max-h-0 {
    max-height: 0px;
}

.w-5 {
    width: 1.25rem;
}

.w-full {
    width: 100%;
}

.w-6 {
    width: 1.5rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.max-w-xl {
    max-width: 36rem;
}

.max-w-7xl {
    max-width: 80rem;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.items-start {
    align-items: flex-start;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-6 {
    gap: 1.5rem;
}

.space-y-4> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-y> :not([hidden])~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-gray-200> :not([hidden])~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}

.overflow-hidden {
    overflow: hidden;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.border-b {
    border-bottom-width: 1px;
}

.border-gray-200 {
    --tw-border-opacity: 1;
    border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

.bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

.p-6 {
    padding: 1.5rem;
}

.p-4 {
    padding: 1rem;
}

.py-16 {
    padding-top: 10rem;
    padding-bottom: 4rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.pb-4 {
    padding-bottom: 1rem;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500;
}

.font-extrabold {
    font-weight: 800;
}

.font-semibold {
    font-weight: 600;
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-gray-600 {
    --tw-text-opacity: 1;
    color: rgb(75 85 99 / var(--tw-text-opacity));
}

.text-gray-800 {
    --tw-text-opacity: 1;
    color: rgb(31 41 55 / var(--tw-text-opacity));
}

.text-gray-700 {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-gray-300 {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity));
}

.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity));
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-200 {
    transition-duration: 200ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .sm\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* FAQ end */