@font-face {
    font-family: "icomoon";
    src: url("../fonts/icomoon.eot?p0dpxj");
    src: url("../fonts/icomoon.eot?p0dpxj#iefix") format("embedded-opentype"),
    url("../fonts/icomoon.ttf?p0dpxj") format("truetype"),
    url("../fonts/icomoon.woff?p0dpxj") format("woff"),
    url("../fonts/icomoon.svg?p0dpxj#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "grundge-persian";
    src: url("../fonts/zangar.eot?p0dpxj");
    src: url("../fonts/zangar.eot?p0dpxj#iefix") format("embedded-opentype"),
    url("../fonts/zangar.ttf?p0dpxj") format("truetype"),
    url("../fonts/zangar.woff?p0dpxj") format("woff"),
    url("../fonts/zangar.svg?p0dpxj#zangar") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-lines:before {
    content: "\e900";
    color: #3c747f;
}

/* global styles */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: "IRANSans", sans-serif;
}

:root {
    --primary: #64a7db;
    --secondary: #1b262c;
    --text: #2e2e3a;
    --yellow: #fece2f;
    --bg-1: #fcfcfd;
    --gray-text: #8d9399;
    --gray-text-2: #88898a;
    --footer-bg-1: #15202b;
    --footer-bg-2: #2a3a4a;
    --footer-title-color: #3c747f;
    --box-bg: #f3f6fd;
    --ab-title: #237c6d;
    --border-color: #efeff9;
    --green: #22c55e;
    --highlight: #dff6f6;
}

.color-primary {
    color: var(--primary) !important;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    font-size: 62.5%;
    max-width: 100dvw;
    overflow-x: hidden !important;
}

.title,
.title h1,
.title h2,
.title h3,
.title h4,
.title h5,
.title h6,
.title .mbtiTitle,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "roosta", "IRANSans";
}

body {
    width: 100%;
    height: 100%;
    max-width: 100dvw;
    overflow-x: clip;
    background-color: #fff;
    font-size: 1.6rem;
}

img {
    display: block;
    max-width: 100%;
    object-fit: contain;
}

ul,
li {
    list-style: none;
}

button {
    border: none;
    outline: none;
    background-color: transparent;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

:is(h1, h2, h3, h4, h5, h6, ul, li, p, a, span, div, input, address) {
    margin: 0px;
    padding: 0px;
}

/* swiper */
.swiper-container-1 {
    width: 100%;
    overflow-x: clip;
    position: relative;
}

.swiper-slide-active {
}

.swiper-slide-next {
}

.swiper-slide-prev {
}

.swiper-container-1 .swiper-slide {
    background: transparent;
    /*  border: 0.1rem solid rgb(231, 231, 235);*/
    border-radius: 10px;
    width: 38rem !important;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: white;
    padding-block: 0.5rem;
    padding-inline: 1rem;
}

.swiper-container-1 .controls {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.swiper-container-1 .swiper-slide .test-pages__box-image {
    flex: unset !important;
    display: grid;
    grid-template-columns: 1fr 1.5rem;
    grid-template-rows: 1.5rem 1fr;
    padding-inline-end: 0 !important;
    width: 100%;
}

.swiper-container-1 .swiper-slide .test-pages__box-image img {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    align-self: flex-start;
    justify-self: flex-end;
    border-right: var(--radius);
}

/* ----- */

header.header,
header.karamad-header {
    width: 100%;
    background-color: var(--bg);
    padding: 0.5rem 0;
    font-size: 14px;
}

header .marquee {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.typewriter-container {
    font-size: 14px;
    color: #fff;
    direction: rtl;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 5px;
    line-height: 16px;
    font-weight: 300;
}
.caret {
    display: inline-block;
    width: 2px;
    height: 16px;
    background-color: #fff;
    animation: blink 0.7s steps(1) infinite;
    vertical-align: bottom;
    margin-right: 5px;
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* navigation link's */
.navigation-links {
    margin-block: 1rem;
    background-color: var(--bg);
    padding: 1rem 4rem;
    border-radius: var(--radius);
}

.logo-wrapper {
    width: 50px;
    height: auto;
}

.navigation-menu {
    font-size: 1.6rem;
    flex: 1 0 auto;
    padding-right: 15px;
}

.navigation-menu ul li,
.navigation-menu ul li a {
    color: #fff;
}

.button-wrapper button,
.button-wrapper a {
    border: 2px solid #24b4fb;
    background-color: #24b4fb;
    border-radius: 0.5em;
    cursor: pointer;
    padding: 0.75rem 2rem;
    transition: all ease-in-out 0.2s;
    font-size: 16px;
    color: #fff;
}

.hero-section {
    background-color: transparent;
    width: 100%;
    height: 60rem;
    padding-block-start: 5rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;

    max-height: fit-content;
}

.introduction {
    gap: 1.5rem;
    padding-inline-end: 5rem;
}

.introduction span {
    --ind-width: 10rem;
    position: relative;
    margin-block: 0px;
    font-size: 1.9rem;
    font-weight: 700;
}

.introduction span::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0.5rem;
    width: var(--ind-width, 1rem);
    height: 1rem;
    background-color: var(--yellow);
    mix-blend-mode: darken;
    pointer-events: none;
}

.introduction p {
    text-align: justify;
    text-wrap: balance;
    line-height: 34px;
    font-size: 1.4rem;
    font-weight: 200;
    letter-spacing: -0.06rem;
}

.karasan-btn {
    width: var(--btn-width, 200px);
    height: var(--btn-height, 50px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    color: #fff;
    cursor: pointer;
    z-index: 100;
}

.karasan-btn:hover {
    color: white;
}

.karasan-btn-blue {
    background-color: var(--primary);
}

.karasan-btn-yellow {
    background-color: var(--yellow);
}

.roadmap-container img {
    width: 100%;
    margin-inline: auto;
}

.karasan-home-cards {
    margin-block: 18rem;
    gap: 3.5rem;
}

.karasan-home-cards.newStyles {
    max-height: fit-content !important;
    margin-block: 0rem;
    flex-wrap: wrap !important;
    gap: 0.25rem;
}

.karasan-home-cards.newStyles .karasan-card {
    background: white;
    padding-block-start: 2.75rem;
    width: 32rem;
    max-height: 21rem;
    padding-inline: 1.25rem;
}

.karasan-home-cards.newStyles .karasan-card .karasan-card-header {
    color: var(--text);
}

.karasan-home-cards .karasan-card {
    border-radius: 2rem;
    border: 1px solid #e6ebef;
    padding-inline: 4rem;
    padding-block: 1.6rem;
    width: 30rem;
}

.karasan-home-cards .karasan-card .karasan-card-header {
    font-size: 2rem;
    justify-content: flex-start;
    align-items: flex-end;
}

.karasan-home-cards .karasan-card .karasan-card-header span {
    font-size: 1.6rem;
    font-weight: 400;
}

.karasan-home-cards .karasan-card .karasan-card-header span:first-child {
    max-height: 2.5rem;
}

.karasan-home-cards .karasan-card .karasan-card-header span i {
    font-size: 2.5rem;
}

.karasan-home-cards
.karasan-card:nth-child(odd)
.karasan-card-header
span
i::before {
    filter: drop-shadow(0px 0px 10px #64a7db);
    color: var(--primary);
}
.karasan-home-cards
.karasan-card:nth-child(even)
.karasan-card-header
span
i::before {
    filter: drop-shadow(0px 0px 10px #fece2f);
    color: var(--yellow);
}
.karasan-home-cards
.karasan-card:nth-child(3)
.karasan-card-header
span
i::before {
    filter: drop-shadow(0px 0px 10px #64a7db);
    color: var(--primary);
}
.karasan-home-cards
.karasan-card:nth-child(4)
.karasan-card-header
span
i::before {
    filter: drop-shadow(0px 0px 10px #fece2f);
    color: var(--yellow);
}

.karasan-card {
    gap: 3rem;
}

.karasan-home-cards .karasan-card .karasan-card-body {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 24px;
    color: var(--gray-text);
}

.karasan-card-footer a {
    color: var(--primary);
}

.karasan-card-footer a span:first-child {
    font-size: 1.2rem;
}

.karasan-card-footer a span i {
    max-height: 1.5rem;
}

.info-section {
    padding-block: 18rem;
    margin-block-end: 4rem;
    /* padding-block: 4rem; */
    padding-inline: 1rem;
    width: 100%;
    min-height: 100vh;
    height: auto;
    background: url("assets/images/1.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #dff6f6;
    position: relative;
    display: grid;
    grid-template-columns: 65% 35%;
    isolation: isolate;
    color: white;
    place-content: center;
}

.info-section::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    inset: 0;
    background: var(--highlight, #dff6f6);
    opacity: 0.98;
    z-index: -1;
}

.info-section h6 {
    font-size: 1.2rem;
    font-weight: 200;
    line-height: 10px;
    color: #fff;
}

.info-section h2 {
    font-size: 2rem;
    font-weight: 900;
    line-height: 40px;
    color: #fff;
}

.info-section h4 {
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 22px;
    color: #fff;
}

.info-section p {
    text-align: justify;
}

.info-section-content {
    padding-inline-end: 8rem;
}

.karasan-box__container {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2rem);
    border-radius: 1rem;
    padding: 0.8rem;
}

.karasan-box__header {
    width: 100%;
}

.karasan-box__header button[data-btn-1] {
    width: 100%;
    background-color: var(--yellow);
    border-radius: 0.5rem;
    padding-block: 1.5rem;
    color: var(--text);
}

@supports (width: calc-size(auto, size)) {
    .karasan-box__container {
        width: calc-size(auto, size / 2);
    }
}

.karasan-box {
    margin-block-start: 4rem;
    margin-block-end: 2rem;
}

.info-section-popMask-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.info-section-popMask-image span {
    display: inline-block;
    width: 75%;
    margin-inline: auto;
}

.info-section-popMask-image span img {
    max-width: 100%;
}

.w-100.karasna-collaborators {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div[class^="karasna-collaborators__"] {
    text-align: center;
}

.karasna-collaborators__logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10rem;
    margin-block-start: 2rem;
}

.karasna-collaborators__logos span {
    flex: 0 0 5%;
}

.karasna-collaborators__logos span img {
    max-width: 100%;
    display: block;
    object-fit: contain;
    height: auto;
}

.karasna-collaborators__subTitle {
    font-size: 1.6rem;
    line-height: 24px;
    font-weight: 100;
    color: var(--primary);
}

.karasna-collaborators__content {
    font-size: 1.2rem;
    line-height: 3rem;
    font-weight: 100;
    color: var(--gray-text-2);
}

.karasna-collaborators__title {
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 500;
    color: var(--text);
}

.karasan-divider-300 {
    height: 30rem;
}

footer.footer {
    background-color: var(--footer-bg-1);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(200px, 1fr));
    padding-inline: 15rem;
    padding-block: 4rem;
}

.footer__row-1 {
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: auto 300px;
    position: relative;
    padding-block-end: 4rem;
}

.footer__row-2 {
    display: grid;
    grid-template-columns: auto 300px;
    padding-block-start: 4rem;
}

.footer__row-2--content h2 {
    color: #f0f0f0;
}

.footer__row-2--content p {
    color: #f0f0f0;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 18px;
}

.footer__row-2--content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer__row-2--content-text {
    padding-inline-end: 22rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer__row-1::before {
    content: "";
    position: absolute;
    bottom: 0rem;
    width: 100%;
    height: 0.11rem;
    background-color: #1b4048;
    opacity: 25%;
}

/* .footer__row-1 .footer__col-1 {
  grid-column: 1 / 2;
} */

.footer__row-1 .footer__col-2 {
    grid-column: 1 / 2;
    padding: 0rem 10rem;
}

.footer__row-1 .footer__col-3 {
    grid-column: 2 / 3;
}

.social-media-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.social-media-container > div:first-child {
    height: 50%;
}

.social-media {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.social-media__title {
    position: relative;
}

.social-media__title h2,
.footer-titles {
    position: relative;
    color: var(--footer-title-color);
    font-size: 1.4rem;
    line-height: 14px;
    font-weight: 500;
}

.footer-texts,
.footer-texts a {
    font-size: 12px;
    font-weight: 300;
    line-height: 14px;
    color: #f0f0f0;
}

.social-media__title .ico-moon-lines::after {
    content: "\e900";
    color: #3c747f;
    position: absolute;
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    top: -0.6rem;
}

.social-media-logos {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 1rem;
    /* justify-content: space-between; */
    align-items: center;
}

.about-us {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.about-us_list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer__col-3 {
    display: flex;
    flex-direction: row;
    gap: 10rem;
    /* padding-inline-start: 10rem; */
}

.footer__row-2 {
    grid-row: 2 / 3;
}

:is(.footer__row-2 i.bi, .footer__row-2 i) {
    color: var(--footer-title-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

:is(.course-detail-page__body i.fas[class*="fa-"]) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.communication-ways-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.communication-ways {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.address,
.phone-number,
.email {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    gap: 0.5rem;
    font-size: 1.2rem;
}

.communication-ways {
    color: #f0f0f0;
}

.footer__row-2--content-title {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4rem;
}

.copyright-footer {
    width: 100dvw;
    overflow: hidden;
    height: auto;
    padding: 2rem 15rem;
    background: var(--footer-bg-2);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.copyright-footer__text p {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4rem;
    color: #f0f0f0;
}

.copyright-footer__logo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.copyright-footer__logo img {
    filter: grayscale(1);
    width: 60px;
}

.copyright-footer__text {
    display: flex;
    justify-content: center;
    align-items: center;
}

.accordion-container {
    width: 100%;
    margin-inline: auto;
    /* margin-block: 5rem; */
}

.accordion {
    width: 80%;
    margin-inline: auto;
}

.accordion-item {
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
    border: none;
}

.accordion-header {
    width: 100%;
    background-color: white;
    color: #111;
    padding: 15px;
    text-align: right;
    cursor: pointer;
    border: none;
    outline: none;
    font-size: 18px;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid #cdcdfc;
    position: relative;
    padding-inline-end: 1.5rem;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    color: #7f7e82;
}

.arrow {
    position: absolute;
    top: 50%;
    left: 0.5rem;
    translate: 0 -50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 250ms;
}

.accordion-content p {
    padding: 15px;
    font-size: 16px;
    background-color: white;
}

.accordion-container .accordion .bi-chevron-compact-down::before {
    content: "\f279";
    display: grid;
    font-size: 2rem;
}

header.m-header {
    display: none;
    width: 0;
    height: 0;
}

#offcanvas-flip div.drawerMenu {
    margin-block-start: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
}

#offcanvas-flip div.drawerMenu img {
    width: 50%;
}

#offcanvas-flip .drawerMenu__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #4f565c;
}

#offcanvas-flip .drawerMenu__list :is(span, a) {
    font-size: 1.6rem;
    font-weight: 500;
    color: #4f565c;
    letter-spacing: -0.04rem;
}

.uk-offcanvas-bar.uk-offcanvas-bar-animation.uk-offcanvas-slide {
    background: #ffffff;
}

button.uk-offcanvas-close.uk-icon.uk-close {
    font-size: 2rem;
    color: black;
    display: none;
}

.ls-7 {
    letter-spacing: -0.1rem;
}

.frequently-questions {
    color: var(--primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;
}

.acc-header p {
    color: var(--gray-text);
}

@media (width <= 480px) {
    header.header,
    .navigation-links {
        display: none !important;
    }
    header.m-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 100dvw;
        overflow-x: clip;
        height: 60px;
    }
    .uk-button {
        border: none;
        outline: none;
        background-color: transparent;
        font-size: 3rem;
        padding: 1.5rem;
    }
    .signin-btn {
        padding: 1rem 1.5rem;
        font-size: 1.2rem;
        background-color: var(--primary);
        border-radius: 0.5rem;
        color: #fff;
    }
    .hero-section {
        max-width: 100dvw;
        /* overflow-x: clip; */
        height: 60rem;
        padding-block-start: 5rem;
        display: grid;
        grid-template-columns: 1fr;
        gap: 5rem;
        max-height: fit-content;
        height: fit-content;
    }
    .introduction {
        width: 100%;
        max-width: 100dvw;
        gap: 1.5rem;
        padding-inline-end: 1rem;
    }
    .introduction p {
        padding-inline-end: 0.5rem;
    }
    .karasan-home-cards {
        margin-block: 10rem;
        flex-direction: column !important;
        align-items: center;
    }
    .info-section {
        margin-block: 10rem;
        padding: 5rem 2rem;
        width: 100%;
        min-height: 100vh;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
    }
    .info-section-content {
        padding-inline-end: 0rem;
    }
    .info-section h2 {
        line-height: 28px;
    }
    .info-section h4 {
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 22px;
        color: #fff;
    }
    .info-section p {
        font-size: 1.6rem;
        font-weight: 100;
    }
    @supports (width: calc-size(auto, size)) {
        .karasan-box__container {
            width: calc-size(auto, size);
        }
    }
    .accordion {
        width: 100%;
    }
    .accordion-header {
        color: #5f6368;
        font-size: 1.4rem;
        letter-spacing: -0.07rem;
        font-weight: 500;
    }
    .accordion-content p {
        color: #4f565c;
        font-size: 14px;
        font-weight: 400;
        line-height: 26px;
        letter-spacing: -0.06rem;
    }
    .accordion-container .accordion .bi-chevron-compact-down::before {
        color: #5f6368;
    }
    .frequently-questions {
        color: var(--primary);
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.04em;
    }
    .acc-header p {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1.7;
        color: #4f565c;
        text-align: center;
        margin-block: 1em;
    }
    .karasan-divider-300 {
        height: 15rem;
    }
    .w-100.karasna-collaborators {
        overflow-x: clip;
    }
    .karasna-collaborators__logos span {
        flex: 0 0 10%;
    }
    .karasna-collaborators__logos {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        margin-block-start: 2rem;
        flex-wrap: wrap;
    }

    footer.footer {
        max-width: 100dvw;
        overflow-x: clip;
        padding-inline: 0rem;
        padding-block: 3rem;
    }
    .footer__row-1 {
        grid-template-columns: 1fr;
        grid-auto-rows: auto 1fr;
        row-gap: 3rem;
        width: 100%;
        max-width: 100dvw;
        overflow-x: hidden;
        padding-inline: 1.5rem;
        height: fit-content;
    }
    .footer__row-1 .footer__col-2 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        padding: 0rem 0rem;
    }
    .footer__row-1 .footer__col-3 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .footer__col-3 {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    footer.footer {
        grid-template-rows: 1fr;
    }
    .footer__row-2 {
        padding-inline: 1.5rem;
        grid-template-columns: 1fr;
        /* grid-auto-rows: 1fr; */
        row-gap: 3rem;
    }
    .footer__row-2--content-text {
        padding-inline-end: 0rem;
    }
    .copyright-footer {
        width: 100dvw;
        max-width: 100dvw !important;
        overflow: clip;
        height: auto;
        padding: 1rem 1.5rem;
        flex-direction: row;
        justify-content: space-between;
    }
    .copyright-footer__logo {
        flex: 1 1 70%;
    }
    .copyright-footer__text {
        flex: 0 0 0%;
        display: none;
    }
    .copyright-footer__logo img {
        width: 40px;
    }
    .social-media__title h2,
    .footer-titles {
        display: inline-block;
    }
}

@media (480px < width <= 768px) {
    header.header,
    .navigation-links {
        display: none !important;
    }
    header.m-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 100dvw;
        overflow-x: clip;
        height: 60px;
    }
    .uk-button {
        border: none;
        outline: none;
        background-color: transparent;
        font-size: 3rem;
        padding: 1.5rem;
    }
    .signin-btn {
        padding: 1rem 1.5rem;
        font-size: 1.2rem;
        background-color: var(--primary);
        border-radius: 0.5rem;
        color: #fff;
    }
    .hero-section {
        max-width: 100dvw;
        /* overflow-x: clip; */
        height: 60rem;
        padding-block-start: 5rem;
        display: grid;
        grid-template-columns: 1fr;
        gap: 5rem;
        max-height: fit-content;
        height: fit-content;
    }
    .introduction {
        width: 100%;
        max-width: 100dvw;
        gap: 1.5rem;
        padding-inline-end: 1rem;
    }
    .introduction p {
        padding-inline-end: 0.5rem;
    }
    .karasan-home-cards {
        margin-block: 10rem;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .info-section {
        margin-block: 10rem;
        padding: 5rem 2rem;
        width: 100%;
        min-height: 100vh;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
    }
    .info-section-content {
        padding-inline-end: 0rem;
    }
    .info-section h2 {
        line-height: 28px;
    }
    .info-section h4 {
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 22px;
        color: #fff;
    }
    .info-section p {
        font-size: 1.6rem;
        font-weight: 100;
    }
    .karasan-box {
        flex-flow: row wrap !important;
    }
    @supports (width: calc-size(auto, size)) {
        .karasan-box__container {
            width: calc-size(auto, size);
            min-width: 33rem;
            max-width: 36rem;
            flex: 1 0 35rem;
        }
    }
    .accordion {
        width: 100%;
    }
    .accordion-header {
        color: #5f6368;
        font-size: 1.4rem;
        letter-spacing: -0.07rem;
        font-weight: 500;
    }
    .accordion-content p {
        color: #4f565c;
        font-size: 14px;
        font-weight: 400;
        line-height: 26px;
        letter-spacing: -0.06rem;
    }
    .accordion-container .accordion .bi-chevron-compact-down::before {
        color: #5f6368;
    }
    .frequently-questions {
        color: var(--primary);
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -0.04em;
    }
    .acc-header p {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1.7;
        color: #4f565c;
        text-align: center;
        margin-block: 1em;
    }
    .karasan-divider-300 {
        height: 15rem;
    }
    .w-100.karasna-collaborators {
        overflow-x: clip;
    }
    .karasna-collaborators__logos span {
        flex: 0 0 10%;
    }
    .karasna-collaborators__logos {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        margin-block-start: 2rem;
        flex-wrap: wrap;
    }

    footer.footer {
        max-width: 100dvw;
        overflow-x: clip;
        padding-inline: 0rem;
        padding-block: 3rem;
    }
    .footer__row-1 {
        grid-template-columns: 1fr;
        grid-auto-rows: auto 1fr;
        row-gap: 3rem;
        width: 100%;
        max-width: 100dvw;
        overflow-x: hidden;
        padding-inline: 1.5rem;
        height: fit-content;
    }
    .footer__row-1 .footer__col-2 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        padding: 0rem 0rem;
    }
    .footer__row-1 .footer__col-3 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .footer__col-3 {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    footer.footer {
        grid-template-rows: 1fr;
    }
    .footer__row-2 {
        padding-inline: 1.5rem;
        grid-template-columns: 1fr;
        /* grid-auto-rows: 1fr; */
        row-gap: 3rem;
    }
    .footer__row-2--content-text {
        padding-inline-end: 0rem;
    }
    .copyright-footer {
        width: 100dvw;
        max-width: 100dvw !important;
        overflow: clip;
        height: auto;
        padding: 1rem 1.5rem;
        flex-direction: row;
        justify-content: space-between;
    }
    .copyright-footer__logo {
        flex: 1 1 70%;
    }
    .copyright-footer__text {
        flex: 0 0 0%;
        display: none;
    }
    .copyright-footer__logo img {
        width: 40px;
    }
    .social-media__title h2,
    .footer-titles {
        display: inline-block;
    }
}

.karasan-box__header i.bi::before {
    display: inline-block;
}

/* test-pages styles */
.test-pages-body {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: auto 30rem;
    margin-block: 10rem;
    gap: 2rem;
}

.test-pages__content {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    gap: 10rem;
}

.test-pages__sidebar {
    grid-column: 2 / 3;
    position: relative;
}

.sticky-box {
    position: sticky;
    top: 20px;
    padding: 10px;
    border-radius: 5px;
}

.test-pages__boxes-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding-inline: 5rem;
}

.test-pages__box {
    height: 200px;
    overflow: clip;
    border: 1px solid rgb(231, 231, 235);
    position: relative;
    border-radius: 1rem;
    display: flex;
    flex-direction: row;
}

.test-pages__box-image {
    padding: 10px;
}

/*.test-pages__box:last-child .test-pages__box-image {*/
/*    justify-content: end;*/
/*    padding-inline-end: 5rem;*/
/*}*/

.test-pages__box-text {
    flex: 0 0 65%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-inline-start: 2rem;
    padding-block-start: 1rem;
}

.test-pages__box-text a {
    color: black;
    font-family: "roosta";
    font-size: 1.7rem;
}

.test-pages__box-text h2 {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.6;
    letter-spacing: -0.06rem;
    color: #0d0c1b;
}

.test-pages__box-text p {
    font-weight: 200;
    font-size: 1.4rem;
    line-height: 2.2rem;
    letter-spacing: -0.08rem;
    color: #98989d;
}

/*.test-pages__box-image {*/
/*    flex: 0 0 35%;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/

.test-pages__box::before {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    border-top: 1px solid rgba(215, 215, 220, 0.885);
    border-left: 1px solid rgba(215, 215, 220, 0.885);
    border-top-left-radius: 0.5rem;
}

.test-pages__description-mbti {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.test-pages__description-mbti h2 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.06rem;
    color: var(--secondary);
}

.test-pages__description-mbti h3 {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.06rem;
    color: var(--secondary);
}

.test-pages__description-mbti h4 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.06rem;
    color: var(--secondary);
}

.test-pages__description-mbti p {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: -0.08rem;
    color: var(--text);
}

.test-pages__description-mbti li {
    gap: 0.5rem;
    position: relative;
}

.test-pages__description-mbti li::before {
    content: "\2713";
    position: absolute;
    right: -1.5rem;
    top: 0;
    /* font-size: 1.2rem; */
    /* translate: 0 -50%; */
}

.test-pages__description-mbti li span {
    line-height: 1.6;
    letter-spacing: -0.08rem;
}

.test-pages__description-mbti li span:first-child {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text);
    min-width: max-content;
}

.test-pages__description-mbti li span:last-child {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--gray-text-2);
}

.test-pages__description {
    display: flex;
    flex-direction: column;
    gap: 15rem;
}

.sticky-box-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sticky-box-contact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    padding-block: 1.5rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6;
    color: #656565;
}
.sticky-box-contact a {
    color: #fff;
    background-color: var(--primary);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
}

.sticky-box-contact span {
    text-align: center;
}

@media (width <= 480px) {
    .test-pages-body {
        grid-template-columns: 1fr;
    }
    .test-pages-body > :is(div, aside) {
        grid-column: 1/2;
    }
    .test-pages__box {
        flex: 0 0 30rem;
    }
    .test-pages__content {
        gap: 8rem;
    }
    .test-pages__boxes-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-inline: 0.5rem;
    }
    .test-pages__boxes-container > .test-pages__box {
        grid-column: 1 / 2;
    }
    /*.test-pages__box:last-child .test-pages__box-image {*/
    /*    justify-content: center;*/
    /*    padding-inline-end: 0rem;*/
    /*}*/
}

@media (width > 480px) and (width <= 768px) {
    .test-pages__box:nth-child(even)::before {
        left: unset;
        right: 0.7rem;
        border-top: 1px solid rgba(215, 215, 220, 0.885);
        border-right: 1px solid rgba(215, 215, 220, 0.885);
        border-left: none;
        border-top-left-radius: 0rem;
        border-top-right-radius: 0.5rem;
    }

    /* .test-pages-body {
      grid-template-columns: 1fr 30rem;
    }
    .test-pages__content {
      gap: 8rem;
    } */
}

/* advertisements page styles */
.advertisements-page-body {
    margin-block-start: 5rem;
    padding-block-end: 10rem;
    display: grid;
    grid-template-columns: 35rem auto;
    gap: 4rem;
    position: relative;
}

.advertisements-search {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-wrapper {
    border-radius: 1rem;
    background-color: var(--search-area-bg);
    padding-inline-end: 12px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 485px;
    color: var(--light-font);
    box-shadow: 0 2px 6px 0 rgba(136, 148, 171, 0.2),
    0 24px 20px -24px rgba(71, 82, 107, 0.1);
    overflow: hidden;
}

.search-input {
    border: none;
    flex: 1;
    outline: none;
    height: 100%;
    padding: 0 20px;
    font-size: 16px;
    background-color: var(--search-area-bg);
    color: var(--main-color);
}

svg:not(:root) {
    overflow: hidden;
}

.advertisements-page-body aside.advertisements-sidebar {
    grid-column: 1/2;
}

.advertisements-content {
    grid-column: auto / span 1;
}

.advertisements-content .test-pages__boxes-container {
    padding-inline: 2rem;
    gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(auto, 42.7rem));
    place-content: center;
}

.filter-section {
    position: sticky;
    top: 0.5rem;
    /*  flex-shrink: 0;*/
    padding-bottom: 32px;
    background-color: #ffffff;
    margin-left: 24px;
    flex: 1 0;
    width: 100%;
    border-radius: 1rem;
    /* position: relative; */
    overflow: auto;
    height: fit-content;
    max-height: 150rem;
    transition: all 300ms cubic-bezier(0.19, 1, 0.56, 1);
    border: 0.1rem solid #f4f4f4;
    box-shadow: rgba(0, 0, 0, 0.08) 0 4px 12px;
}

.filter-section .filter-section-header {
    padding: 2rem 0;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    color: var(--text);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.08rem;
}

.filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.filters-row {
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 1rem;
}

/*.filters-row:nth-child(1) {*/
/*  border-top: 1px solid #e9ebf0;*/
/*}*/

.filters-row label {
    /* text-align: center; */
}

.choices__input {
    width: fit-content !important;
}

.choices[data-type*="select-multiple"] .choices__button,
.choices[data-type*="text"] .choices__button {
    margin: 0 8px 0 0px;
    padding-right: 16px;
    padding-left: 0px;
    border-right: 1px solid #003642;
    width: 8px;
    border-left: unset;
}

.choices__list--multiple .choices__item {
    padding: 4px 5px;
}

.filters-row .choices {
    flex: 1 1 100%;
    width: 100%;
}

.choices__inner {
    background-color: transparent;
    border-radius: 0.75rem;
}

.choices[data-type*="select-one"]::after {
    border-color: #c7c7d0 transparent transparent;
}

.choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent #c7c7d0;
}

.choices__input {
    background-color: transparent;
}

.advertisements-content .test-pages__box-text h2 {
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2rem;
    color: var(--secondary);
}

.advertisements-content .test-pages__box-text {
    padding-block-start: 2rem;
}

.advertisements-box-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.advertisements-box-info span {
    font-size: 1.4rem;
    font-weight: 200;
    color: var(--text);
    min-width: max-content;
    line-height: 1.4;
}
.advertisements-box-info span:first-child {
    font-size: 1.4rem;
    font-weight: 200;
    color: var(--ab-title);
    min-width: max-content;
    line-height: 1.4;
}

/*.advertisements-content .test-pages__box-image {*/
/*    justify-content: end;*/
/*    align-items: baseline;*/
/*    padding-block-start: 1.6rem;*/
/*    padding-inline-end: 1.6rem;*/
/*}*/

.send-resume-btn {
    position: absolute;
    bottom: -4.1rem;
    left: -2.2rem;
    background-color: var(--yellow);
    border-radius: 50%;
    width: 10rem;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-block-start: 2.5rem;
    padding-inline-start: 1.2rem;
}

.send-resume-btn a {
    font-size: 1.3rem;
    color: #fff;
    transition: all 100ms ease;
    text-decoration: none;
}

.send-resume-btn a:hover {
    font-weight: 900;
}

.advertisements-content .test-pages__box:last-child {
    grid-column: auto / span 1;
}

.advertisements-content .test-pages__box-text {
    gap: 1.25rem;
}

.advertisements-content .test-pages__box {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.advertisements-banners {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-block-start: 3rem;
    padding-inline: 1rem;
}

.advertisements-banner {
    width: 100%;
    flex: 1 1 100%;
    padding-block: 2rem;
    border-radius: 0.5rem;
    padding-inline: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-image: url("./assets/images/Shapes.svg");
    background-repeat: repeat;
    background-size: 170px;
    background-position: center;
}

.advertisements-banner span:first-child {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4rem;
    letter-spacing: -0.08rem;
}
.advertisements-banner span:last-child {
    font-size: 1.8rem;
    font-weight: 500;
}

.advertisements-banner.blue {
    background-color: var(--primary);
    color: #fff;
    background-size: 220px;
}

.advertisements-banner.yellow {
    background-color: var(--yellow);
    color: var(--primary);
    background-size: 270px;
}

.advertisements-banner.darkBlue {
    background-color: var(--footer-bg-1);
    color: #fff;
}

/*.advertisements-page-body .advertisements-content .test-pages__box:last-child .test-pages__box-image {*/
/*    justify-content: end;*/
/*    padding-inline-end: 1.6rem;*/
/*}*/

@media (width <= 480px) {
    .advertisements-banner span {
        color: var(--gray-text);
    }
    .advertisements-page-body {
        width: 100%;
        max-width: 100dvw;
        overflow-x: hidden;
    }
    .advertisements-page-body {
        margin-block-start: 2.5rem;
        padding-block-end: 10rem;
        padding-inline: 0.5rem;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .advertisements-content .test-pages__boxes-container {
        padding-inline: 0;
        gap: 2rem;
    }
    :is(.modern-shadow) {
        box-shadow: rgba(17, 17, 26, 0.1) 0 0.2rem 0 !important;
        border: 1px solid rgb(231 231 235 / 29%) !important;
    }
    .advertisements-banner:is(.blue, .yellow, .darkBlue) {
        background-color: #ffffff;
        color: var(--text);
        background-size: 170px;
    }
    /*.advertisements-content .test-pages__box-image img {*/
    /*    width: 5rem;*/
    /*}*/
    /*.advertisements-content .test-pages__box-image {*/
    /*    flex: 0 0 20%;*/
    /*    justify-content: center;*/
    /*    align-items: baseline;*/
    /*    padding-block-start: 1.6rem;*/
    /*    padding-inline-end: 0.5rem;*/
    /*}*/
}

@media (340px <= width <= 480px) {
    .advertisements-content .test-pages__box-image {
        width: 100%;
        max-width: 100%;
        justify-content: flex-end;
        container-name: my-c;
        container-type: inline-size;
        padding-inline-end: 1.5rem;
    }
    :is(
            .advertisements-content .test-pages__box-image,
            .advertisements-content .test-pages__box-text
        ) {
        flex: unset !important;
    }
    .advertisements-content .test-pages__box-image img {
        min-width: 5rem;
        width: 50cqw;
        max-width: 7rem;
    }
    .advertisements-content .test-pages__box {
        width: 100%;
        max-width: 100%;
    }
}

@media (480px < width <= 768px) {
    .advertisements-page-body {
        margin-block-start: 2.5rem;
        padding-block-end: 10rem;
        padding-inline: 0.5rem;
        grid-template-columns: 100%;
        gap: 2rem;
    }
    .advertisements-content .test-pages__boxes-container {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .advertisements-content .test-pages__box-image {
        width: 100%;
        max-width: 100%;
        justify-content: flex-end;
        container-name: my-c;
        container-type: inline-size;
        padding-inline-end: 1.5rem;
        display: flex;
    }
    .advertisements-banner span {
        color: var(--gray-text);
    }
    .advertisements-page-body {
        width: 100%;
        max-width: 100dvw;
        overflow-x: hidden;
    }
    .advertisements-content .test-pages__boxes-container {
        padding-inline: 0;
        gap: 2rem;
    }
    :is(.modern-shadow) {
        box-shadow: rgba(17, 17, 26, 0.1) 0 0.2rem 0 !important;
        border: 1px solid rgb(231 231 235 / 29%) !important;
    }
    .advertisements-banner:is(.blue, .yellow, .darkBlue) {
        background-color: #ffffff;
        color: var(--text);
        background-size: 170px;
    }
    :is(
            .advertisements-content .test-pages__box-image,
            .advertisements-content .test-pages__box-text
        ) {
        flex: unset !important;
    }
    .advertisements-content .test-pages__box-image img {
        min-width: 5rem;
        width: 50cqw;
        max-width: 7rem;
    }
}

@media (768px < width <= 992px) {
    .advertisements-page-body {
        grid-template-columns: 40% 60%;
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        margin-block-start: 5rem;
        padding-block-end: 10rem;
        display: grid;
        gap: 4rem;
        position: relative;
    }
    .advertisements-content .test-pages__boxes-container {
        grid-template-columns: repeat(auto-fill, minmax(auto, 38rem));
        place-content: start;
        padding-inline: 0;
    }
}

.more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 2rem;
    margin-block-start: 2rem;
}

.more-btn button {
    padding: 1rem 4rem;
    background: var(--primary);
    color: #ffffff;
    border-radius: 0.5rem;
}

/* advertisement details page styles */

.advertisement-details-banner {
    position: relative;
    width: 100%;
    height: 450px;
    background-repeat: no-repeat;
    background-size: cover;
    padding-block-end: 2rem;
    padding-inline: 10rem;
}

.advertisement-details-banner::before {
    position: absolute;
    content: "";
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(0.6rem);
    z-index: -1;
}

.advertisement-details-banner-title {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 2;
    color: var(--yellow);
}

.advertisement-details-banner-company {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.6;
    color: #ffffff;
}

.advertisement-details-banner-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
}

.advertisement-details-content {
    width: 100%;
    display: grid;
    grid-template-columns: calc(100% - 30rem) 300px;
    gap: 2rem;
    padding-block: 4rem;
}

.advertisement-details-leftSidebar {
    grid-column: 2 / 3;
    position: relative;
}

.advertisement-details-rightSidebar {
    grid-column: 1 / 2;
    overflow-x: clip;
}

.sticky {
    position: sticky;
    top: 0.5rem;
}

.card {
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid rgb(231 231 235 / 100%);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 2rem 3rem;
}

.general-specifications {
    box-shadow: none !important;
    gap: 3rem;
}

.general-specifications :is([class^="advertisement-details-page-"]) h2 {
    position: relative;
    padding-inline-start: 4rem;
}
.general-specifications :is([class^="advertisement-details-page-"]) h2::before {
    position: absolute;
    content: "";
    width: 5rem;
    aspect-ratio: 1/1;
    top: 50%;
    translate: 0% -50%;
    right: -2rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
}

.general-specifications .advertisement-details-page-description h2::before {
    background-image: url("/assets/images/cooperation-2.png");
}

.general-specifications
:is([class*="-general-info"], [class*="-specific-specifications"])
h2::before {
    background-image: url("/assets/images/lists.png");
}

.title-head {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.06rem;
    color: var(--secondary);
}

:is(
        .advertisement-details-page-description,
        .advertisement-details-page-general-info,
        .advertisement-details-page-specific-specifications
    ) {
    gap: 1.5rem;
}

:is(
        .advertisement-details-page-description,
        .advertisement-details-page-general-info,
        .advertisement-details-page-specific-specifications
    )
:is(p, ul) {
    padding-inline-start: 4rem;
    font-size: 1.4rem;
    line-height: 1.7;
    font-weight: 300;
    color: var(--text);
    letter-spacing: -0.06rem;
}

.advertisement-details-banner__logoSection {
    position: absolute;
    bottom: -1.5rem;
    right: 0;
    left: 0;
    height: auto;
    background: transparent;
}

.advertisement-details-banner__information {
    padding-block-end: 2rem;
}

.advertisement-details-banner__logo {
    width: 10rem;
    aspect-ratio: 1/1;
    border-radius: 0.5rem;
}

.advertisement-details-banner__logo img {
    border-radius: var(--radius);
}

.advertisement-details-banner__company-name {
    font-size: 2rem;
    font-weight: 500;
    line-height: 2;
    color: #fff;
}

.advertisement-details-banner__company-info {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}

:is(
        .advertisement-details-page-description,
        .advertisement-details-page-general-info,
        .advertisement-details-page-specific-specifications
    )
ul {
    counter-reset: section;
}

:is(
        .advertisement-details-page-description,
        .advertisement-details-page-general-info,
        .advertisement-details-page-specific-specifications
    )
ul
> li {
    counter-increment: section;
}

:is(
        .advertisement-details-page-description,
        .advertisement-details-page-general-info,
        .advertisement-details-page-specific-specifications
    )
ul
> li::before {
    content: counter(section, decimal);
    direction: rtl;
    unicode-bidi: bidi-override;
    margin-right: 8px;
}

:is(
        .advertisement-details-page-description,
        .advertisement-details-page-general-info,
        .advertisement-details-page-specific-specifications
    )
ul
> li::before {
    content: counter(section) " - ";
}

.advertisement-details-card__tag {
    padding-inline: 0.5rem;
    padding-block: 0.5rem;
    background-color: var(--gray-text-2);
    color: white;
    flex: 1 1 fit-content;
    border-radius: 0.5rem;
    max-width: max-content;
}

.advertisement-details-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.advertisement-details__sw-card--image {
    width: 80%;
    margin-inline: auto;
    aspect-ratio: 1 / 1;
}

.advertisement-details__sw-card--content span:first-child {
    font-size: 1.4rem;
    font-weight: 200;
    color: var(--ab-title);
    min-width: max-content;
    line-height: 1.4;
}

.advertisement-details__sw-card--content span:last-child {
    font-size: 1.4rem;
    font-weight: 200;
    color: var(--text);
    /*  min-width: max-content;*/
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.advertisement-details__sw-card {
    height: 100%;
    padding-block: 0.75rem;
}

.highlight-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2c3e50;
    background-color: #e8f6f3;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border: 2px solid #a2d9ce;
    border-radius: 8px;
    margin: 20px auto;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.highlight-text:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(44, 62, 80, 0.2);
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    --swiper-pagination-bottom: -3rem;
}

.related-jobs {
    margin-block: 5rem;
}

.swiper-card {
    width: 100%;
}

@media (width <= 768px) {
    .advertisement-details-banner {
        width: 100%;
        max-width: 100dvw;
        overflow: clip;
        height: 70dvh;
        padding-block-end: 10rem;
        padding-inline: 1rem;
    }
    .advertisement-details-banner__logoSection {
        position: absolute;
        bottom: unset;
        right: unset;
        left: 0;
        top: 50%;
        /*    translate: 0 -50%;*/
        width: 100%;
        height: auto;
        background: transparent;
    }
    .advertisement-details-banner__company-name {
        text-align: center;
    }
    .advertisement-details-banner-buttons {
        justify-content: space-between;
        gap: 0;
        position: absolute;
        top: 50%;
        translate: 0 -50%;
        width: 100%;
        height: fit-content;
        right: 0;
        left: 0;
    }
    .advertisement-details-banner-buttons .karasan-btn {
        font-size: 1.3rem;
        font-weight: 400;
        letter-spacing: -0.08rem;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        --btn-width: 40px !important;
        --btn-height: 140px !important;
        transform: rotate(180deg);
        border-radius: 0.3rem;
    }
    .advertisement-details-content {
        max-width: 100dvw;
        overflow-x: clip;
        grid-template-columns: 1fr;
    }
    .advertisement-details-leftSidebar {
        grid-column: 1/2;
    }
    .general-specifications
    :is([class^="advertisement-details-page-"])
    h2::before {
        background-image: unset;
        width: 0.4rem;
        aspect-ratio: 1/10;
        top: 50%;
        translate: 0% -50%;
        right: -2rem;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        background-color: var(--yellow);
    }
    :is(
            .advertisement-details-page-description,
            .advertisement-details-page-general-info,
            .advertisement-details-page-specific-specifications
        ) {
        gap: 1rem;
    }
    .general-specifications :is([class^="advertisement-details-page-"]) h2 {
        padding-inline-start: 0;
    }
    :is(
            .advertisement-details-page-description,
            .advertisement-details-page-general-info,
            .advertisement-details-page-specific-specifications
        )
    :is(p) {
        padding-inline-start: 0;
    }
    :is(
            .advertisement-details-page-description,
            .advertisement-details-page-general-info,
            .advertisement-details-page-specific-specifications
        )
    :is(ul) {
        padding-inline-start: 1.5rem;
        text-indent: -2.5rem;
    }
    .swiper-slide {
        width: 30rem !important;
    }
    .swiper-slide .test-pages__box-image img {
        display: none;
    }
}

/* Company Profile Page
 */

.company-profile__page-body {
    display: grid;
    grid-template-columns: calc(100% - 40rem) 40rem;
    margin-block: 5rem;
}

.company-profile__page--left-sidebar {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    gap: 4rem;
}

.company-profile__page--right-sidebar {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    gap: 4rem;
}

.company-profile__page--left-sidebar .map-box {
    height: 30rem;
    background-image: url("assets/images/ir.png");
    background-repeat: no-repeat;
    background-size: 32rem;
    background-position: center;
    overflow: clip;
}

.company-profile__page--left-sidebar .address {
    height: fit-content;
    padding-block: 2rem;
    padding-inline: 1.5rem;
}

.company-profile__page--left-sidebar .address span.title-head {
    font-size: 1.6rem;
    font-weight: 500;
}

.company-profile__page--left-sidebar .address span.address-text {
    color: var(--text);
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: -0.08rem;
    line-height: 1.6;
}

.company-profile__page--left-sidebar :is(.map-box, .address) {
    width: 94%;
    border: 1px solid #efeff9;
    border-radius: 1rem;
    box-shadow: 0 0px 10px -4px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

:is(.about-company, .company-status, .establishment-year, .company-services) {
    box-shadow: 0 0px 10px -4px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
    width: 98%;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding-block: 2rem;
    padding-inline: 3rem;
    gap: 3rem;
}

.company-profile__page-body .company-profile__title {
    position: relative;
    font-size: 1.6rem;
    line-height: 1.7;
    letter-spacing: -0.06rem;
    color: var(--secondary);
    font-weight: 600;
    padding-inline-start: 2rem;
}

.company-profile__page-body .company-profile__title::before {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    content: "";
    right: -2rem;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("assets/images/brain.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.company-profile__page-body .company-profile__text {
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: -0.08rem;
    color: var(--text);
    font-weight: 300;
}

.company-profile__list {
    padding-inline-start: 2rem;
}

.company-profile__list li {
    position: relative;
}

.company-profile__list li:after {
    position: absolute;
    content: "";
    width: 0.2rem;
    height: 1.5rem;
    top: 50%;
    translate: 0 -50%;
    right: -1rem;
    background: var(--primary);
}

@media (width <= 768px) {
    .company-profile__page-body {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    .company-profile__page--right-sidebar {
    }
    .company-profile__page--left-sidebar {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .company-profile__page--left-sidebar .map-box {
        background-size: 24rem;
    }
    .company-profile__page-body .company-profile__title {
        padding-inline: 0rem;
    }
    .company-profile__page-body .company-profile__title::before {
        background-image: unset;
        width: 0.4rem;
        aspect-ratio: 1/10;
        top: 50%;
        translate: 0% -50%;
        right: -2rem;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        background-color: var(--yellow);
    }
    .company-profile__list li:after {
        top: 0.25rem;
        translate: 0 0;
    }
}

/* CSS Card */

.card-test {
    --card-bg: white;
    --card-radius: 1.55rem;
    --curve-radius: 3rem;
    width: 29.4rem;
    height: 43rem;
    background: var(--card-bg);
    overflow: hidden;
    border-radius: var(--card-radius);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.bottom {
    position: relative;
    width: 100%;
    margin-top: calc(var(--curve-radius) * -1);
}
.content {
    padding: 2rem 1.75rem 1.7rem 1rem;
    z-index: 2;
    position: relative;
    gap: 1rem;
}

.card-footer {
    padding-inline: 1.75rem;
}

.top {
    width: 100%;
    height: 250px;
    /*  background: url("https://images.unsplash.com/photo-1601682633973-a76aa17a7844?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")*/
    /*    no-repeat center / cover;*/
    position: relative;
}
.top img {
    max-width: 100%;
    height: 100%;
    /* object-fit: cover; */
    object-fit: fill;
    object-position: top;
}
.bottom::after,
.bottom::before {
    content: "";
    position: absolute;
    width: 100%;
    height: var(--curve-radius);
}
.bottom:before {
    background-color: transparent;
    border-bottom-left-radius: var(--curve-radius);
    box-shadow: 0 calc(var(--curve-radius) * 1) 0 var(--card-bg);
    bottom: calc(100%);
    left: 0;
    z-index: 1;
    height: calc(var(--curve-radius) * 2);
    width: var(--curve-radius);
}
.bottom::after {
    background-color: var(--card-bg);
    border-top-right-radius: var(--curve-radius);
    top: 0;
    right: 0;
    z-index: 1;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fs-16 {
    font-size: 1.6rem;
    line-height: 1.7;
}

.fs-14 {
    font-size: 1.4rem;
    line-height: 1.5;
}
.fs-12 {
    font-size: 1.2rem;
    line-height: 1.3;
}
.fs-18 {
    font-size: 1.8rem;
    line-height: 1.9;
}
.fs-20 {
    font-size: 2rem;
    line-height: 2.2;
}

.fs-22 {
    font-size: 2.2rem;
    line-height: 2.5;
}

.le-8 {
    letter-spacing: -0.08rem;
}

.le-7 {
    letter-spacing: -0.07rem;
}

.le-6 {
    letter-spacing: -0.06rem;
}

.le-5 {
    letter-spacing: -0.05rem;
}

.le-4 {
    letter-spacing: -0.04rem;
}

.le-2 {
    letter-spacing: -0.02rem;
}

.fw-sb {
    font-weight: 500;
}
.fw-b {
    font-weight: 600;
}
.fw-xb {
    font-weight: 700;
}
.fw-black {
    font-weight: 900;
}
.fw-l {
    font-weight: 300;
}
.fw-xl {
    font-weight: 200;
}
.fw-r {
    font-weight: 400;
}
.color-gray-1 {
    color: var(--gray-text);
}
.color-gray-2 {
    color: var(--gray-text-2);
}
.color-gray-3 {
    color: #00000050;
}
.line-through {
    text-decoration: line-through;
}

/* Courses Page Styles */

.curses-page__body {
    --gap: 2rem;
    --sidebar: 28rem;
    --colect-sizes: calc(var(--gap) + var(--sidebar));
    display: grid;
    grid-template-columns: var(--sidebar) calc(100% - var(--colect-sizes));
    gap: var(--gap);
    margin-block-end: 10rem;
}

.courses-page__sidebar {
    grid-column: 1 / 2;
    position: relative;
}

.course-filters {
    position: sticky;
    top: 0.25rem;
    margin-block-end: 0.75rem;
    width: 100%;
    height: fit-content;
    border-radius: 0.5rem;
    border: 0.1rem solid var(--border-color);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
    padding-block: 2rem;
    padding-inline: 1.5rem;
}

.curses-page__content {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.filters-container {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    padding-block-start: 2rem;
}

.courses-page__course-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(29.4rem, 1fr));
    row-gap: 4rem;
}

.course-type {
    padding-block-end: 2rem;
    border-bottom: 0.1rem solid var(--border-color);
}

.course-category:not(:last-child) {
    padding-block-end: 2rem;
    border-bottom: 0.1rem solid var(--border-color);
}

/*.select2-container--default .select2-selection--single {*/
/*    background-color: #fff;*/
/*    border: 0.1rem solid var(--border-color);*/
/*    border-radius: 4px;*/
/*    height: fit-content;*/
/*    padding-block: 1rem;*/
/*}*/

/*.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {*/
/*    left: 0.1rem;*/
/*    top: 50%;*/
/*    translate: 0 -50%;*/
/*}*/
/*.select2-container--default .select2-selection--single .select2-selection__clear {*/
/*    margin-left: 2.2rem;*/
/*    color: #00000050;*/
/*}*/

.bb-1 {
    border-bottom: 0.1rem solid var(--border-color);
}

@media (width <= 768px) {
    .curses-page__body {
        grid-template-columns: 1fr;
        margin-block-start: 5rem;
    }
    .curses-page__content {
        grid-column: 1 / 2;
    }
    .filters-container {
        flex-wrap: wrap;
    }
}

/* courses detail page */

.course-detail-page__body {
}

.course-detail-head {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.25rem;
}

.course-detail-head__video {
    overflow: hidden;
    border-radius: 0.75rem;
}

.course-detail-head__content {
    gap: 5rem;
}

.students-counter {
    padding-inline: 1rem;
    padding-block: 1rem;
    background-color: var(--yellow);
    border-radius: 0.7rem;
    color: #ffffff;
}

#coupen-code {
    width: 30rem;
    border: none;
    background: var(--border-color);
    line-height: 2;
    font-size: 1.6rem;
    padding-block: 0.5rem;
    padding-inline-start: 0.75rem;
    padding-inline-end: 0.25rem;
    border-radius: 0.75rem;
    color: var(--secondary);
    outline: none;
}

.signIn-btn {
    padding-inline: 3rem;
    padding-block: 1rem;
    background-color: var(--primary);
    border-radius: 100vw;
    display: flex;
    gap: 0.5rem;
    color: #ffffff;
    cursor: pointer;
}

.signIn-btn:hover {
    opacity: 0.9;
}

.course-detail__content {
    --sidebar-width: 40rem;
    --gap: 4rem;
    display: grid;
    --colect-sizes: calc(var(--sidebar-width) + var(--gap));
    grid-template-columns: calc(100% - var(--colect-sizes)) var(--sidebar-width);
    column-gap: var(--gap);
    margin-top: 10rem;
}

.course-detail-page__content {
    grid-column: 1 / 2;
    gap: 5rem;
    margin-block-end: 10rem;
}

.course-detail-page__left-sidebar {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.course-detail__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

:is(.course-detail__features--box, .course-detail__progress--box) {
    border-radius: 0.75rem;
    display: flex;
    flex-direction: row;
    height: 8rem;
}

.course-detail__features--box {
    background: var(--bg-1);
}

.course-detail__progress {
    grid-column: 1 / -1;
    background: var(--bg-1);
    height: fit-content;
    padding: 1.5rem;
    gap: 2rem;
}

.br-\.75 {
    border-radius: 0.75rem;
}

.course-detail__progress--box {
    background: #ffffff;
}

.course-detail__progress--info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.course-detail__progressbar progress {
    display: block;
    height: 1rem;
    width: 100%;
    direction: ltr;
}

progress {
    appearance: none;
    background-color: #f0f0ff;
    border: none;
    border-radius: 10px;
    overflow: hidden;
}

progress::-webkit-progress-bar {
    background-color: #f0f0ff;
    border-radius: 10px;
}

progress::-webkit-progress-value {
    background-color: var(--primary);
    border-radius: 10px;
}

.teacher-box {
    background-color: var(--bg-1);
    width: 100%;
    border-radius: 12px;
    /*  box-shadow: 0 1px 6px var(--border-color);*/
    text-align: center;
    padding: 20px;
    max-height: fit-content;
}

.teacher-box img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 5px solid #fff;
    background-color: #e63946;
    margin-top: -50px;
}

.teacher-box h2 {
    color: var(--secondary);
    margin: 10px 0;
}

.teacher-box p {
    margin-bottom: 20px;
}

.teacher-box a {
    display: inline-block;
    text-decoration: none;
    color: var(--primary);
    background-color: transparent;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.2s linear;
    border: 1px solid var(--primary);
}

.teacher-box a:hover {
    background-color: var(--primary);
    color: #ffffff;
}

.bg-cloud {
    background: var(--bg-1);
}

.course-detail__description {
    position: relative;
    padding-inline: 0.5rem;
}

.course-detail__description .nav-tabs .nav-link {
    color: var(--secondary);
    height: 5rem;
    border-bottom: 0.2rem solid transparent;
}

.course-detail__description .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background-color: transparent;
    border: 0 solid transparent;
    border-bottom: 0.2rem solid var(--yellow);
    color: var(--yellow);
}

.nav-tabs {
    border-bottom: 0 solid transparent;
}

.course-detail__description .nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    isolation: isolate;
    border: 0 solid transparent;
    border-bottom: 0.2rem solid var(--yellow);
    color: var(--yellow);
    filter: opacity(0.7);
}

.course-detail__description .nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active:hover {
    isolation: isolate;
    border-bottom: 0.2rem solid var(--yellow);
}

.course-detail__description .nav-link:focus,
.nav-link:hover {
    color: var(--yellow);
}

.course-detail__description ul.nav.nav-tabs .nav-item {
    flex: 1 1 auto;
}

/*.course-detail__description--content-tab {*/
/*  margin-block-start: 3rem;*/
/*  padding-inline: 1.5rem;*/
/*}*/

.course-detail__description .accordion {
    width: 100%;
    margin: 0;
}

.course-detail__description .accordion-button::after {
    position: absolute;
    left: 1rem;
}

.course-detail__description .accordion-item {
    border: none;
    border-radius: 8px;
    margin-bottom: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.course-detail__description .accordion-header {
    font-weight: bold;
}
.course-detail__description .accordion-button {
    font-size: 16px;
    color: #333;
    background: none;
    border: none;
    padding: 12px 16px;
}
.course-detail__description .accordion-button:focus {
    box-shadow: none;
}
.course-detail__description .accordion-body {
    font-size: 14px;
    color: var(--text);
}
.info {
    font-size: 14px;
    color: var(--secondary);
}

.course-detail__description .tab-content {
    margin-block: 3rem;
    padding-inline: 2rem;
}

.course-detail__description .accordion-button {
    padding-inline-end: 3rem;
}

.course-detail__description .accordion-button:not(.collapsed) {
    color: var(--secondary);
    background-color: var(--primary);
    box-shadow: none;
}

.course-detail__description .accordion-button:not(.collapsed) span {
    color: var(--secondary);
}

.course-detail__description .accordion-header {
    border-bottom: none;
    padding: 0;
}

ol.accordion-body {
    list-style-type: persian;
    counter-reset: list-counter;
}

ol.accordion-body li {
    counter-increment: list-counter;
}

ol.accordion-body ol.accordion-body li::marker {
    content: counter(list-counter, persian);
}

ol.accordion-body {
    list-style: none;
    counter-reset: list-counter;
    gap: 2rem;
}

ol.accordion-body li {
    counter-increment: list-counter;
    position: relative;
    padding-right: 2.5rem;
}

ol.accordion-body li::before {
    content: counter(list-counter);
    direction: rtl;
    unicode-bidi: bidi-override;
    position: absolute;
    right: 0;
    color: #333;
    background-color: #ffffff;
    width: 2rem;
    height: 2rem;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
}

.color-secondary {
    color: var(--secondary);
}

.course-detail__comments {
    padding: 2rem;
}

.comment-box {
    width: 100%;
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: 0.75rem;
    background-color: #ffffff;
    /*  box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.1);*/
    font-family: "IRANSans", Tahoma, Arial, sans-serif;
    color: var(--secondary);
    direction: rtl;
    text-align: right;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.user-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
}

.user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.comment-date {
    margin-top: 0.3rem;
}

.divider {
    border: none;
    height: 0.1rem;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 1rem 0;
}

.comment-body {
    padding-block: 1.5rem;
    padding-inline-start: 1rem;
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--text);
    font-weight: 300;
}

.starrating > input {
    display: none;
}

.starrating > label:before {
    /* content: "\f005"; */
    margin: 2px;
    font-size: 2rem;
    /* font-family: FontAwesome; */
    display: inline-block;
}

.starrating > label {
    color: #ccc;
    cursor: pointer;
}

.starrating > input:checked ~ label {
    color: #ffca08;
}

.starrating > input:hover ~ label {
    color: #ffca08;
}

.form-control {
    padding: 0.6rem 1.2rem;
    font-size: 1.4rem;
    color: var(--secondary);
    border-radius: 0.75rem;
}

.modal-footer {
    border-top: none;
}

.modal-header {
    border-bottom: none;
    padding-block-end: 0;
}

.modal-content {
    background-color: var(--bg-1);
}

.modal-body {
    padding-block-start: 0;
}

.modal-dialog {
    display: grid;
    place-content: center;
}

.modal-content {
    width: clamp(30rem, 50rem, 100dvw);
}

@media (width < 768px) {
    .course-detail-head {
        max-width: 100dvw;
        grid-template-columns: 100%;
    }
    :is(.course-detail-head__video, .course-detail-head__content) {
        grid-column: 1 / 2;
    }
    #coupen-code {
        width: 25rem;
    }
    .course-detail__content {
        --gap: 4rem;
        max-width: 100dvw;
        grid-template-columns: 100%;
        column-gap: 0;
        row-gap: var(--gap);
    }
    .course-detail-page__left-sidebar {
        grid-column: 1/2;
        margin-block-end: 5rem;
    }
    .course-detail__features {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        gap: 2rem;
    }
    .course-detail-page__content {
        margin-block-end: 0;
    }
}

/* Teacher Profile Page */

.teacher-information__box {
    width: 100%;
    height: fit-content;
    padding-block: 2rem;
    padding-inline: 1.5rem;
}

.mt-6 {
    margin-block-start: 6rem;
}

.chart-title {
    color: #4f4f4f;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.chart-description {
    color: #4f4f4f;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: -0.18px;
    margin: 10px 0;
}

.chart {
    position: relative;
    width: 100%;
    height: fit-content;
    margin-block: 1rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chart-info-percentage {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

div[class^="chart-info-percentage__"] {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 0 10px;
}

div[class^="chart-info-percentage__"]::before {
    content: "";
    position: absolute;
    top: -2px;
    width: 20px;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

div[class^="chart-info-percentage__front"]::before {
    background: #43bc1e;
    right: -15px;
}
div[class^="chart-info-percentage__back"]::before {
    background: #d7d7d7;
    left: -15px;
}

div[class^="chart-info-percentage__"] .number {
    font-weight: 900;
    line-height: 20px;
    font-size: 18px;
}

div[class^="chart-info-percentage__"] .text {
    font-size: 12px;
    font-weight: 400;
    color: #3a3a3a;
    line-height: 2;
}

.chart-line {
    position: relative;
    width: 100%;
    background-color: #d7d7d7;
    height: 6px;
    border-radius: 5px;
}

.chart-line__front {
    position: absolute;
    top: 0;
    height: 100%;
    right: 0;
    background-color: #43bc1e;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.chart-line__front::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 0;
    height: 100%;
    width: 1rem;
    background-color: #43bc1e;
    clip-path: polygon(50% 0%, 100% 0%, 50% 50%, 100% 100%, 50% 100%, 0% 50%);
}

.chart-container {
    margin-block: 1rem;
    display: grid;
    row-gap: 1.5rem;
    column-gap: 4rem;
    margin-inline: auto;
}

.color-success {
    color: var(--green);
}
/* University Page Styles */

.university-page__body {
    --gap: 2rem;
    display: grid;
    grid-template-columns: 60% calc(40% - var(--gap));
    grid-template-rows: 50px 400px;
    gap: 2rem;
    /*  overflow: clip;*/
    padding-inline: 0 !important;
/*  margin-block: 5rem;*/
/*  max-height: 40rem;*/
/*  overflow-y: clip;*/

& .swiper {
      width: 100%;
      height: 100%;
  }

& .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
  }

& .swiper-slide img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
}

.university-page__header--slider {
    grid-column: 1/2;
}

.university-page__header--news {
    grid-column: auto/span 1;
}

.news-box {
}

.news-tab {
    cursor: pointer;
    font-size: 1.5rem;
    margin: 10px;
    color: #007bff;
    transition: color 0.3s ease;
    font-family: "IRANSans", sans-serif;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.07;
}
.icon-tab:hover {
    color: #0056b3;
}
.tab-content {
    margin-top: 20px;
    /* display: none; */
}
.tab-content.active {
    display: flex;
}
.active-tab {
    color: var(--yellow);
}

.vertical-tab-container {
    max-width: 100%;
    grid-column: 1 / -1;
    margin-block-start: 2rem;
    margin-block-end: 5rem;
}
.vertical-tab-buttons {
    grid-column: 1 / 2;
    gap: 10px;
}
.vertical-tab-button {
    padding: 10px 15px;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    border: 1px solid #007bff;
    border-radius: 5px;
    background-color: #f8f9fa;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.vertical-tab-button:hover,
.vertical-tab-button.active-vertical-tab {
    background-color: #007bff;
    color: white;
}
.vertical-tab-content {
    grid-column: 2 / 3;
    padding: 0 2rem 2rem 2rem;
    border-radius: 5px;
    display: none;
    min-height: max-content;
}
.vertical-tab-content.active-vertical-content {
    display: block;
}

.online-courses {
    margin-block: 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(29.4rem, 1fr));
    place-items: center;
    gap: 5rem;
}

.swiper-slide-description {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding-block: 2rem;
    padding-inline: 1.5rem;
    color: white;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.05) 0%,
        #180081 90%,
        #2200b6 100%
    );
}

.vertical-tab-content .swiper {
    width: 100%;
    height: 100%;
}

.vertical-tab-content .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vertical-tab-content .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tab-content .info-box {
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
}

.tab-content .event-image {
    width: 20%;
}

.tab-content .event-image img {
    width: 70%;
    display: block;
}

.tab-content .text-container {
    padding: 15px;
}

.tab-content :is(.title, .description) {
    margin: 0 0 10px;
}

.tab-content .date {
    font-size: 0.8em;
    color: #999;
    display: block;
    margin-top: 10px;
}

.text-right {
    text-align: right !important;
}

.karasan-home-cards.university-page__cards {
    margin-block: 0;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

footer.footer.university-page__footer {
    grid-template-rows: 1fr;
}

footer.footer.university-page__footer .footer__row-1 {
    padding-block-end: 0;
}

footer.footer.university-page__footer .footer__row-1::before {
    content: none;
}

.custom-g {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    background: var(--yellow);
    color: var(--secondary);
    border-radius: 100dvw;
    border: none;
    padding-block: 1rem;
}

.leading15 {
    line-height: 1.5 !important;
}

.mySwiper2 .swiper-slide {
    height: fit-content !important;
}

.w-max {
    width: max-content;
}

.custom-g img {
    width: 2rem;
}

.custom-a {
    color: #fff;
    background-color: var(--primary);
    border-radius: 10px;
    padding: 15px;
    font-weight: bold;
    position: relative;
    margin-bottom: 10px;
    border: 1px solid #829ba9;
    padding-inline-start: 5rem;
}

.custom-a::before {
    content: "";
    width: 25px;
    height: 25px;
    display: block;
    position: absolute;
    background-color: #fff;
    border: 6px solid #829ba9;
    border-radius: 50%;
    top: 50%;
    right: 10px;
    translate: 0 -50%;
}

.custom-a.active-vertical-tab::before {
    border: 6px solid #ffd60a;
}

.vertical-tab-container .vertical-tab-content .card-test {
    height: 36rem;
    width: 28rem;
}

.vertical-tab-container .vertical-tab-content .top {
    height: 20rem;
}

.university-page__body .vertical-tab-buttons {
    translate: 0 5rem;
}

.cursor-pointer {
    cursor: pointer;
}

.university-page__card--container {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(1px, 1fr));
}

.university-page__card--container {
    position: relative;
    isolation: isolate;
    margin-block-start: 15rem;
    margin-block-end: 10rem;
}

.university-page__card--container::before {
    content: "";
    position: absolute;
    inset: -10rem -15rem;
    background: var(--bg-1);
    z-index: -1;
    /*  transform: scaleX(2);*/
}

.about-university {
    padding-inline-start: 1rem;
    padding-inline-end: 3rem;
}

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

@media (width <= 768px) {
    .university-page__body {
        grid-template-columns: 100%;
    }
    .university-page__card--container {
        margin-block-start: 10rem;
        margin-block-end: 10rem;
    }
    .university-page__card--container {
        grid-template-columns: 100%;
    }
    .about-university {
        padding-inline-start: 1rem;
        padding-inline-end: 0;
    }
    .karasan-home-cards.university-page__cards {
        margin-block: 2rem;
        grid-template-columns: 1fr;
    }
    .university-page__body .vertical-tab-buttons {
        translate: 0 0;
    }
    .university-page__card--container::before {
        inset: -5rem 0;
        width: 100%;
    }
    .vertical-tab-content {
        padding: 0;
    }
}

.about-us-page__body {
    --gap: 3rem;
    display: grid;
    grid-template-columns: calc(70% - var(--gap)) 30%;
    gap: var(--gap);
}
.about-us__content {
    grid-column: 1 / 2;
}
.about-us__sidebar {
    grid-column: auto / span 1;
    background: var(--bg-1);
}

@media (width <= 768px) {
    .about-us-page__body {
        grid-template-columns: 100%;
    }
}

.test-pages__box-image.job-opportunities-page__card-image {
    flex: 1 1 auto;
    display: flex;
    justify-content: end;
    align-items: baseline;
    padding: 1.5rem 1.5rem;
}

.test-pages__box-image.job-opportunities-page__card-image img {
    width: 130px;
    height: 130px;
    border-radius: var(--radius);
    object-fit: fill;
}

.expired {
    position: relative;
    overflow: clip;
}

.expired::after {
    position: absolute;
    content: "";
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.expired::before {
    position: absolute;
    font-family: "grundge-persian", sans-serif;
    content: "منقضی شده است";
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    rotate: -45deg;
    font-size: 2rem;
    color: var(--gray-text);
    border: none;
    outline: none;
}

@media (width <= 768px) {
    .test-pages__box.job-opportunities-box {
        flex: 0 0 16rem;
    }
}

/****************************      my styles           ****************************/

.testRequire ul li a {
    color: #000;
    font-size: 13px;
}

#testForm {
    background-color: var(--bg-1);
    border-radius: var(--radius);
    padding: 8px;
    margin: 20px 0;
}

#testForm .tab {
    display: none;
    /*min-height: 430px;*/
    /*border: 1px solid var(--first-200);*/
    border-radius: var(--radius);
    background-color: var(--white);
    padding: 10px;
    margin-right: 0;
    margin-left: 0;
}

#testForm .tab button {
    font-size: 16px;
    font-width: 600px;
}

#testForm .tab [type="radio"] {
    display: none;
}

#testForm .tab p,
#testForm .bottomData {
    line-height: 25px;
}

#testForm .bottomData {
    text-align: center;
}

#testForm .tab img {
    border-radius: var(--radius);
}

#testForm .questionImg {
    width: 400px;
}

#testForm .answerImg {
    width: 150px;
}

#testForm .tabContent {
    display: flex;
    justify-content: center;
    min-height: 430px;
    border-radius: var(--radius);
    background-color: var(--white);
    padding: 10px;
}

#testForm .tabResult {
    display: flex;
    justify-content: center;
    min-height: 430px;
}

#testForm .tabResult .boxResult {
    border-radius: var(--radius);
    background-color: var(--white);
    padding: 10px;
    margin: 10px 0;
}

#testForm .tabResult .boxResult ul li {
    font-size: 18px;
    margin: 10px 0;
    display: flex;
    align-items: center;
}

#testForm .tabResult .boxResult ul.correct li i {
    color: limegreen;
    font-size: 32px;
    margin-left: 10px;
}

#testForm .tabResult .boxResult ul.wrong li i {
    color: darkred;
    font-size: 32px;
    margin-left: 10px;
}

#testForm .tabResult .boxResult .imgdiv {
    padding: 10px;
    position: relative;
    overflow: hidden;
& img {
      border-radius: var(--radius);
      width: 100%;
      object-fit: fill;
  }
}

#testForm .tabResult .boxResult .imgdiv .grad {
}

#testForm .tabResult .boxResult .imgdiv:hover .grad {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 10px;
    border-radius: var(--radius);
    position: absolute;
    background: rgb(100, 167, 219);
    background: linear-gradient(
        180deg,
        rgba(100, 167, 219, 0) 0%,
        rgba(100, 167, 219, 0.47222216523328087) 50%,
        rgba(100, 167, 219, 1) 100%
    );
}

#testForm .tabResult .boxResult .imgdiv:hover span {
    bottom: 20px;
}

#testForm .tabResult .boxResult .imgdiv span {
    position: absolute;
    right: 0;
    left: 0;
    bottom: -60px;
    color: black;
}

#testForm .tabResult .boxResult .title {
    border-bottom: 1px solid var(--first-200);
    align-items: center;
}

#testForm .tabResult .boxResult h4 {
    font-size: 24px;
    font-width: 600;
}

#testForm .tabResult .boxResult .titleBox {
    text-align: center;
    border-bottom: 1px solid var(--first-200);
    font-size: 20px;
}

#testForm .tabResult .boxResult h6 {
    font-size: 18px;
    font-width: 600;
}

#testForm .tabResult .boxResult ul li {
    font-size: 16px;
}

#testForm .tabResult .boxResult ul li i {
    color: var(--first-200);
}

#testForm .tabResult a {
    font-size: 16px;
}

#testForm .tabResult .mbtiTitle {
    font-size: 70px;
    opacity: 0.7;
    color: var(--green);
    transform: rotate(-15deg);
}

#testForm .tabResult p {
    line-height: 30px;
    text-align: justify;
}

#testForm .box {
    background-color: var(--white);
    width: 100%;
    padding: 15px;
    border-radius: var(--radius);
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#testForm .box i {
    font-size: 60px;
    height: 80px;
    padding: 5px 0;
    color: var(--gray-400);
}

.table-kaarasan {
    border-spacing: 10px;
    border-collapse: separate;
}

.table-kaarasan thead tr th {
    background-color: var(--first-100);
    border-radius: var(--radius);
}

.table-kaarasan tbody tr th {
    background-color: var(--first-200);
    border-radius: var(--radius);
}

.table-kaarasan tbody .active th {
    background-color: var(--terittory) !important;
}

.chart-z {
    position: relative;
    overflow: hidden;
}

.chart-z .back .progress-v {
    position: absolute;
    left: 0;
    top: 0;
    height: calc(100% - 30px);
    background: var(--first-100);
    z-index: 0;
}

.chart-z .back .progress-v::after {
    content: "";
    height: 100%;
    width: 2px;
    border-right: 3px dashed var(--terittory);
    position: absolute;
    right: -3px;
}

.chart-z .back img {
    z-index: 1;
    position: relative;
    width: 100%;
}

.chart-z .front {
    position: absolute;
    left: 0;
    top: 0;
    height: 70%;
    width: 100%;
    z-index: 1;
}

.chart-z .front .value {
    position: absolute;
    z-index: 2;
    color: white;
    background: var(--terittory);
    font-size: 11px;
    padding: 2px 8px 0;
    border-radius: 35px;
}

.counselorModel {
    display: flex;
    justify-content: center;
    padding: 15px;
}

.counselorUl li {
    border-radius: var(--radius);
    border: 1px solid var(--primary);
    margin: 10px 0;
    padding: 5px;
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

.counselorUl li button::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 0px;
    background-color: var(--primary);
    border-radius: 0 0 90% 90%;
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
}

.counselorUl li button:hover::before {
    height: 100%;
}

.counselorUl li button {
    width: 100%;
    height: 100%;
    color: black;
    display: flex;
    justify-content: space-between;
    background-color: transparent;
}

.counselorUl li button span {
    z-index: 1;
}

.custom-control {
    padding-right: 0.5rem;
    padding-left: 0;
}

.custom-control {
    position: relative;
    display: block;
    height: 70px;
    padding-left: 1.5rem;
    padding-top: 7px;
    padding-bottom: 7px;
    box-shadow: 0px 0px 10px -5px var(--first-100);
    -webkit-box-shadow: 0px 0px 10px -5px var(--first-100);
    -moz-box-shadow: 0px 0px 10px -5px var(--first-100);
    margin: 8px 0;
    border-radius: 4px;
    /*max-height: 90px;*/
    max-width: 100%;
}

.custom-control:hover {
    box-shadow: 0px 0px 15px -1px var(--first-100);
    -webkit-box-shadow: 0px 0px 15px -1px var(--first-100);
    -moz-box-shadow: 0px 0px 15px -1px var(--first-100);
}

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.custom-control-label {
    padding-right: 2rem;
    width: 100%;
    height: 100%;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #71b6f9;
    border-color: #71b6f9;
    background-color: #71b6f9;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 0.25rem;
}

.custom-control-label::before {
    left: auto;
    right: 0.5rem;
}

.custom-control-label::after {
    left: auto;
    right: 0.5rem;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
    -webkit-transition: background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    -webkit-box-shadow 0.15s ease-in-out;
}

.custom-control-label::before {
    position: absolute;
    top: 9px;
    left: -1.5rem;
    display: block;
    width: 16px;
    height: 16px;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
}

.custom-control-label::after {
    position: absolute;
    top: 9px;
    left: -1.5rem;
    display: block;
    width: 16px;
    height: 16px;
    content: "";
    background: no-repeat 50%/50% 50%;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-label::before {
    border-radius: 50%;
}

.bg-realistic {
    background-color: darkred !important;
}

.bg-investigative {
    background-color: darkorange !important;
}

.bg-artistic {
    background-color: darkgreen !important;
}

.bg-social {
    background-color: royalblue !important;
}

.bg-enterprising {
    background-color: deepskyblue !important;
}

.bg-conventional {
    background-color: rebeccapurple !important;
}

.c-realistic {
    color: darkred !important;
}

.c-investigative {
    color: darkorange !important;
}

.c-artistic {
    color: darkgreen !important;
}

.c-social {
    color: royalblue !important;
}

.c-enterprising {
    color: deepskyblue !important;
}

.c-conventional {
    color: rebeccapurple !important;
}

/* Pricing Page */

.pricing-header h2 {
    font-family: "IRANSans", sans-serif;
}

.newkarasan-btn {
    padding: 0.5rem 2.5rem;
    background-color: var(--bg-1);
    border-radius: 100dvw;
    transition: color 250ms ease-out, box-shadow 200ms ease-out;
}

.newkarasan-btn:hover {
    color: var(--secondary);
    box-shadow: 0 0 6px rgba(41, 74, 99, 0.1);
}

.pricing-table__container {
    box-shadow: 0 0 6px rgba(87, 120, 132, 0.08);
}

.font-irsans {
    font-family: "IRANSans", sans-serif;
}

.pricing-table__container {
    margin-block-start: 2rem;
    padding: 1rem 2rem;
}

.pricing-table__container .select2-container {
    width: 30rem !important;
}

@media (width <= 769px) {
    .pricing-table__container {
        margin-block: 2rem;
        padding-inline: 0.75rem;
        padding-block: 1.5rem;
    }
    .pricing-table__container .select2-container {
        width: 100% !important;
    }
    .pricing-header h2.fs-20 {
        font-size: 1.5rem;
    }
    .newkarasan-btn {
        font-size: 1.4rem;
        padding-block: 0.8rem;
    }
    [data-sm-fs14] {
        font-size: 1.4rem;
    }
    [data-sm-fs16] {
        font-size: 1.6rem;
    }
    [data-sm-fs18] {
        font-size: 1.8rem;
    }
    [data-sm-fs12] {
        font-size: 1.2rem;
    }
    [data-sm-fs13] {
        font-size: 1.3rem;
    }
    [data-sm-fs11] {
        font-size: 1.1rem;
    }
    [data-sm-fs15] {
        font-size: 1.5rem;
    }
    [data-sm-fw-l] {
        font-weight: 200;
    }
    .pricing-table__row button.newkarasan-btn {
        grid-column: 1 / -1;
    }
}

.leading-15 {
    line-height: 1.5 !important;
}

.leading-17 {
    line-height: 1.7 !important;
}

.pricing-table {
    margin-block-start: 3rem;
    gap: 1.25rem;
}

.pricing-table .pricing-table__row {
    display: grid;
    grid-template-columns: 80% 20%;
    grid-auto-rows: 4rem;
}

.certificate {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
    padding: 2rem;
}

@media (width <= 768px) {
    .certificate {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        padding: 0;
    }
}

label {
    margin-bottom: 0.5rem;
}

.select2-container {
    width: 100% !important;
}
.select2-container .select2-selection--single {
    border: 1px solid #ced4da !important;
    height: 38px !important;
    outline: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-left: 12px;
}
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 34px;
    width: 34px;
    right: 3px;
}
.select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: #c0d2db transparent transparent transparent;
    border-width: 6px 6px 0 6px;
}

.select2-container--open
.select2-selection--single
.select2-selection__arrow
b {
    border-color: transparent transparent #c0d2db transparent !important;
    border-width: 0 6px 6px 6px !important;
}

.select2-results__option {
    padding: 6px 12px;
}
.select2-results__option .select2-results__group {
    color: #323a46;
}

.select2-dropdown {
    border: 1px solid #e1e9ee;
    -webkit-box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
    box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
}

.select2-container--default .select2-search--dropdown {
    padding: 10px;
    background-color: white;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e1e9ee;
    outline: none;
}

.select2-container--default
.select2-results__option--highlighted[aria-selected] {
    background-color: #71b6f9;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #f1f5f7;
    color: #323a46;
}
.select2-container--default
.select2-results__option[aria-selected="true"]:hover {
    background-color: #71b6f9;
    color: #fff;
}

.select2-container .select2-selection--multiple {
    min-height: 38px;
    border: 1px solid #ced4da !important;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
    padding: 1px 10px;
}
.select2-container .select2-selection--multiple .select2-search__field {
    border: 0;
}
.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: #71b6f9;
    border: none;
    color: #fff;
    border-radius: 3px;
    padding: 0 7px;
    margin-top: 7px;
}
.select2-container
.select2-selection--multiple
.select2-selection__choice__remove {
    color: #fff;
    margin-right: 5px;
}
.select2-container
.select2-selection--multiple
.select2-selection__choice__remove:hover {
    color: #fff;
}

.map-icon {
    position: absolute;
    z-index: 2;
    font-size: 30px;
    right: 5px;
}

.currentIconLocation {
    font-size: 30px;
}

.leaflet-popup span {
    font-family: "IRANSans";
}

.advertisements-content .test-pages__box-image img {
    width: 130px;
    height: 130px;
    border-radius: var(--radius);
    object-fit: fill;
}

[class*=" dripicons-dot"]:before,
[class^="dripicons-dot"]:before {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (width <= 480px) {
    .course-detail__description .tab-content {
        padding-inline: 0;
    }
    .karasan-home-cards .karasan-card {
        paddifs-16ng-inline: 1.5rem;
        box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px,
        rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
    }
}

.news-box .tab-content {
    display: none;
}

.news-box .tab-content.active {
    display: flex !important;
}

.counselorCard {
    background-color: var(--gray-200);
    border-radius: var(--radius);
}

.counselorCard .card-box {
    padding: 10px 30px;
}

.remove-img-bg {
    mix-blend-mode: darken;
    position: relative;
    z-index: 2;
}

.circle-shape-rotate {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    animation: circleRotate 15s linear forwards infinite;
    z-index: 1;
}

@keyframes circleRotate {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}

.karasan-key-features-wrapper {
    width: 100%;
    max-width: 100dvw;
    overflow: hidden;
    height: fit-content;
    min-height: 100vh;
    height: auto;
    display: grid;
    grid-template-columns: 35% 30% 35%;
    grid-template-rows: 4rem auto;
& .section-1 {
      grid-column: 1 / 2;
  }

& .section-3 {
      grid-column: 3 / 4;
  }

& .section-2 {
      grid-column: 2 / 3;
      display: flex;
      justify-content: center;
      align-items: center;
& img {
      width: 100%;
      max-width: 100%;
      display: inline-block;
      height: auto;
      object-fit: contain;
  }
}
}

.karasan-key-features-boxe-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    height: 100%;
    counter-reset: list-counter;
    justify-content: space-evenly;
    padding-inline: 6rem;

& .karasan-key-features-box {
      width: min(100%, 40rem);
      height: 8rem;
      background: var(--footer-bg-1);
      border-radius: 2rem;
      position: relative;
      color: #fff;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      counter-increment: list-counter;
      overflow: visible;
  }
& .karasan-key-features-box::before {
      --width: 8rem;
      content: "";
      direction: rtl;
      unicode-bidi: bidi-override;
      position: absolute;
      right: calc(var(--width) / -2);
      width: var(--width);
      aspect-ratio: 1/1;
      background-color: var(--yellow);
      border-radius: 2rem;
      rotate: 45deg;
  }
& .karasan-key-features-box::after {
      --width: 8rem;
      content: counter(list-counter);
      direction: rtl;
      unicode-bidi: bidi-override;
      position: absolute;
      right: calc(var(--width) / -2);
      width: var(--width);
      aspect-ratio: 1/1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 3rem;
      font-weight: bold;
      color: var(--text);
  }

& .karasan-key-features-box:nth-child(odd) {
      translate: -70px;
  }
}

.karasan-key-features-boxe-wrapper.left-orientation {
    counter-reset: list-counter 3;
    padding-inline-start: 0rem;
    padding-inline-end: 6rem;

& .karasan-key-features-box:nth-child(odd) {
      translate: 0px;
  }

& .karasan-key-features-box:nth-child(even) {
      translate: -70px;
  }

& .karasan-key-features-box::before {
      --width: 8rem;
      content: "";
      direction: rtl;
      unicode-bidi: bidi-override;
      position: absolute;
      right: unset;
      left: calc(var(--width) / -2);
      width: var(--width);
      aspect-ratio: 1/1;
      background-color: var(--yellow);
      border-radius: 2rem;
      rotate: 45deg;
  }
& .karasan-key-features-box::after {
      --width: 8rem;
      content: counter(list-counter);
      direction: rtl;
      unicode-bidi: bidi-override;
      position: absolute;
      right: unset;
      left: calc(var(--width) / -2);
      width: var(--width);
      aspect-ratio: 1/1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 3rem;
      font-weight: bold;
      color: var(--text);
  }
}

span.heading {
    color: hsl(from #000 1 1 15% / 1);
    display: inline-block;
    text-align: var(--ta, center);
}

.faq-section {
    margin-block-start: 10rem;
}

@media (width <= 425px) {
    .karasan-key-features-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: 4rem;
        grid-auto-rows: auto;
        overflow: unset !important;

& :is(.section-1, .section-2, .section-3) {
      grid-column: 1 / -1;
  }
& .section-2 {
      display: none;
  }
}
:is(
            .karasan-key-features-boxe-wrapper,
            .karasan-key-features-boxe-wrapper.left-orientation
        ) {
    padding: 0px;
    align-items: center;
    margin-block: 5rem;

& .karasan-key-features-box:nth-child(odd) {
      translate: 0px;
  }
& .karasan-key-features-box:nth-child(even) {
      translate: 0px;
  }

& .karasan-key-features-box {
      width: min(100%, 26rem);
      max-width: 100dvw;
      border-radius: 0.5rem;
  }

& .karasan-key-features-box::before {
      --width: 6rem;
      content: "";
      direction: rtl;
      unicode-bidi: bidi-override;
      position: absolute;
      right: calc(var(--width) / -2.5);
      width: var(--width);
      aspect-ratio: 1/1;
      background-color: var(--yellow);
      border-radius: 2rem;
  }

& .karasan-key-features-box::after {
      right: calc(var(--width) / -2);
      left: unset;
  }

& .karasan-key-features-box p {
      padding-inline-start: 5.5rem !important;
      padding-inline-end: 1rem !important;
  }
}
}

@media (425px < width <= 768px) {
    .karasan-key-features-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: 4rem;
        grid-auto-rows: auto;
        overflow: unset !important;

& :is(.section-1, .section-2, .section-3) {
      grid-column: 1 / -1;
  }
& .section-2 {
      display: none;
  }
}
:is(
            .karasan-key-features-boxe-wrapper,
            .karasan-key-features-boxe-wrapper.left-orientation
        ) {
    padding: 0px;
    align-items: center;
    margin-block: 5rem;

& .karasan-key-features-box:nth-child(odd) {
      translate: 0px;
  }
& .karasan-key-features-box:nth-child(even) {
      translate: 0px;
  }

& .karasan-key-features-box {
      width: min(80%, 40rem);
      max-width: 100dvw;
      border-radius: 0.5rem;
  }

& .karasan-key-features-box::before {
      --width: 6rem;
      content: "";
      direction: rtl;
      unicode-bidi: bidi-override;
      position: absolute;
      right: calc(var(--width) / -2.5);
      width: var(--width);
      aspect-ratio: 1/1;
      background-color: var(--yellow);
      border-radius: 2rem;
  }

& .karasan-key-features-box::after {
      right: calc(var(--width) / -2);
      left: unset;
  }

& .karasan-key-features-box p {
      padding-inline-start: 5.5rem !important;
      padding-inline-end: 1rem !important;
  }
}
}

@media (768px < width <= 1024px) {
    .karasan-key-features-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: 4rem;
        grid-auto-rows: auto;
        overflow: unset !important;

& :is(.section-1, .section-2, .section-3) {
      grid-column: 1 / -1;
  }
& .section-2 {
      display: none;
  }
}
:is(
            .karasan-key-features-boxe-wrapper,
            .karasan-key-features-boxe-wrapper.left-orientation
        ) {
    padding: 0px;
    align-items: center;
    margin-block: 5rem;

& .karasan-key-features-box:nth-child(odd) {
      translate: 0px;
  }
& .karasan-key-features-box:nth-child(even) {
      translate: 0px;
  }

& .karasan-key-features-box {
      width: min(80%, 40rem);
      max-width: 100dvw;
      border-radius: 0.5rem;
  }

& .karasan-key-features-box::before {
      --width: 6rem;
      content: "";
      direction: rtl;
      unicode-bidi: bidi-override;
      position: absolute;
      right: calc(var(--width) / -2.5);
      width: var(--width);
      aspect-ratio: 1/1;
      background-color: var(--yellow);
      border-radius: 2rem;
  }

& .karasan-key-features-box::after {
      right: calc(var(--width) / -2);
      left: unset;
  }

& .karasan-key-features-box p {
      padding-inline-start: 5.5rem !important;
      padding-inline-end: 1rem !important;
  }
}
}

@media (1024px < width <= 1480px) {
    .karasan-key-features-wrapper {
        padding-inline: 4rem;
        grid-template-columns: 30% 40% 30%;
    }
    :is(
            .karasan-key-features-boxe-wrapper,
            .karasan-key-features-boxe-wrapper.left-orientation
        ) {
        padding-inline: 0px;

& .karasan-key-features-box {
      width: max(100%, 30rem);
  }

& .karasan-key-features-box:nth-child(odd) {
      translate: -70px;
  }
& .karasan-key-features-box:nth-child(even) {
      translate: 0px;
  }

& .karasan-key-features-box::before {
      --width: 7rem;
      right: calc(var(--width) / -3.5);
  }
& .karasan-key-features-box::after {
      right: calc(var(--width) / -3);
  }
}

.karasan-key-features-boxe-wrapper.left-orientation {
& .karasan-key-features-box:nth-child(odd) {
      translate: 70px;
  }
& .karasan-key-features-box::before {
      --width: 7rem;
      right: unset;
      left: calc(var(--width) / -3.5);
  }
& .karasan-key-features-box::after {
      right: unset;
      left: calc(var(--width) / -3);
  }
}
}

.navigation-header {
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 6rem;
}

.navigation-menu {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    height: 100%;
}

.navigation-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.navigation-menu li {
    position: relative;
}

.navigation-menu a {
    text-decoration: none;
    color: #000 !important;
    font-weight: 500;
    padding: 5px 10px;
    transition: color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.navigation-menu a:hover {
    color: #007bff;
}

.navigation-menu .dropdown-menu {
    min-width: fit-content;
    display: none;
    opacity: 0;
    position: absolute;
    top: 95%;
    right: 0.5rem;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    padding: 0;
    border-radius: 0.4rem;
    width: fit-content;
    z-index: 1000;
    border: none;
    overflow: hidden;
    transition: opacity 0.3s ease, display 0.3s ease allow-discrete;
}

@supports (width: calc-size(auto, size)) {
    .navigation-menu .dropdown-menu {
        min-width: calc-size(calc-size(fit-content, size), size + 5rem);
    }
}

.navigation-menu .dropdown-menu li {
    padding: 0;
}

.navigation-menu .dropdown-menu a {
    padding: 1rem 0.8rem 1rem 6rem;
    display: block;
    color: #000;
    white-space: nowrap;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: "IRANSans", sans-serif;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: -0.08rem;
}

.navigation-menu .dropdown-menu a:hover {
    background-color: #f0f0f0;
}

.navigation-menu li:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    min-width: fit-content;
}

@supports (width: calc-size(auto, size)) {
    .navigation-menu li:hover > .dropdown-menu {
        min-width: calc-size(calc-size(fit-content, size), size + 5rem);
    }
}

@starting-style {
    .navigation-menu li:hover > .dropdown-menu {
        opacity: 0;
    }
}

.navigation-menu li i {
    transition: all 100ms linear;
}

.navigation-menu li:hover i {
    transform: rotate(-90deg);
}

.navigation-header {
    position: relative;
}

.job-seekers-page-wrapper {
    width: 100%;
    max-width: 100dvw;
    overflow-x: clip;
}

/* job seekers styles */

.scroller-container {
    height: 100dvh;
    overflow: auto;
    scroll-snap-type: y mandatory;
}

/* .scroller-container::-webkit-scrollbar {
    display: none;
} */

.scroller-area {
    height: fit-content;
    min-height: 100dvh;
}

.job-seeker__section {
    height: fit-content;
    min-height: 100dvh;
}

.scroller-area:has(> .job-seeker__section-3) {
    padding-block: 4rem;
}

.job-seeker__section-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.job-seeker__section-right-side {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding-inline: 4rem;
}

.job-seeker__section-left-side {
    mask-repeat: no-repeat;
    mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGZpbGw9IiNGRjAwNjYiIGQ9Ik02MC4xLC0yMC4zQzY2LjYsMC41LDUyLjgsMjcuMiwzMy45LDM5LjJDMTUsNTEuMiwtOS4yLDQ4LjUsLTIzLjgsMzYuOUMtMzguNSwyNS4zLC00My42LDQuNywtMzguMSwtMTQuOEMtMzIuNSwtMzQuMywtMTYuMywtNTIuNyw1LjMsLTU0LjRDMjYuOCwtNTYuMSw1My41LC00MS4xLDYwLjEsLTIwLjNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDAgMTAwKSIgLz4KPC9zdmc+Cg==");
}

.job-seeker__section-2 {
    background: var(--highlight);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
}

.job-seeker__boxes-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-inline: 4rem;
    gap: 0.3rem;

& .karasan-card {
      background: white;
      width: max(100%, 22rem);
      max-height: 21rem;
      border-radius: 2rem;
      border: 1px solid #e6ebef;
      padding-inline: 4rem;
      padding-block: 2rem;
      gap: 2rem;

& span {
      font-size: 1.6rem;
      font-weight: 400;
  }

& .karasan-card-header span i {
      font-size: 2.5rem;
  }
}

& .karasan-card:nth-child(odd) .karasan-card-header span i::before {
      filter: drop-shadow(0px 0px 10px #64a7db);
      color: var(--primary);
  }
& .karasan-card:nth-child(even) .karasan-card-header span i::before {
      filter: drop-shadow(0px 0px 10px #fece2f);
      color: var(--yellow);
  }
}

.job-seeker__section-3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5rem;

& .job-seeker__cards-wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(1px, 300px));
      justify-content: center;
      column-gap: 11rem;
      row-gap: 2rem;
  }

& .flip-card {
      background-color: transparent;
      width: 300px;
      height: 300px;
      perspective: 1000px;
      border-radius: 1rem;
  }

& .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      border-radius: 1rem;
  }

& .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
  }

& .flip-card-front,
  .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
  }
& .flip-card-front {
      background-color: #fff;
      color: black;
      border-radius: 1rem;
  }

& .flip-card-back {
      background-color: #2980b9;
      color: #000;
      transform: rotateY(180deg);
      border-radius: 1rem;
  }

& .job-seeker__card {
      position: relative;
      width: fit-content;

& .text {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      pointer-events: none;
      padding-inline: 1rem;
      color: #000;

& p {
      text-align: justify;
      text-wrap: pretty;
  }

& .icon-wrapper {
      width: 5rem;
      height: 5rem;
      border-radius: 100%;
      background-color: var(--primary);
      display: flex;
      justify-content: center;
      align-items: center;
  }
}
}
}

.job-seeker__section-4 {
    background: var(--highlight);
    display: grid;
    grid-template-columns: 1fr 1fr;

& .job-seeker__section--right-side {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #000;

& .sign-btn {
      align-self: flex-end;
      background: var(--yellow);
      color: var(--text);
      padding-inline: 2rem;
      padding-block: 1.2rem;
      border-radius: 0.5rem;
      margin: 2rem;
  }
}

& .job-seeker__section--left-side {
      display: flex;
      justify-content: center;
      align-items: center;

& img {
      width: 50rem;
      height: 50rem;
  }
}
}

@media (width <= 768px) {
    .job-seeker__section-1 {
        grid-template-columns: 1fr;

& .job-seeker__section-right-side {
      /* display: flex;
      flex-flow: column wrap;
      justify-content: center;
      align-items: center;
      gap: 1rem; */
      padding-inline: 1rem;
  }
}
}

@media (width <= 768px) {
    .navigation-header,
    .header-container {
        display: none;
    }
}

@media (width <= 425px) {
    .job-seeker__boxes-wrapper {
        grid-template-columns: 1fr;
        padding-inline: 1rem;
        /* padding-block-end: 5rem; */
    }

    .scroller-area:nth-child(2) {
        height: fit-content;
    }

    .job-seeker__section.job-seeker__section-2 {
        padding-block: 5rem;
    }

    .job-seeker__section-3 {
        gap: 0rem;
    }

    .job-seeker__section-4 {
        grid-template-columns: 1fr;
        padding-block: 1rem;
        height: fit-content;
    }

& .sign-btn {
      align-self: center;
  }

    .job-seeker__boxes-wrapper {
& .karasan-card {
      padding-block: 2rem;
      padding-inline: 2rem;
  }
}

.scroller-area:has(> .job-seeker__section-3) {
    padding-block: 5rem;
}

.job-seeker__section-4 {
    padding-inline: 1rem;
    padding-block: 2rem;

& div:first-child > span {
      /* text-align: justify; */
      text-wrap: balance;
  }

& .job-seeker__section--right-side {
& .sign-btn {
      align-self: center;
  }
}
}
}

@media (768px < width <= 1280px) {
    .scroller-area:has(> .job-seeker__section-3) {
        padding-block: 2rem;
    }
    .job-seeker__section-left-side {
        mask-image: unset;
        display: grid;
        place-content: center;

& img {
      width: 100%;
      height: auto;
      display: inline-block;
      mask-repeat: no-repeat;
      mask-image: url(data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/LS0+CiAgICAgICAgICAgICAgPHN2ZyBpZD0ic3ctanMtYmxvYi1zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+CiAgICAgICAgICAgICAgICAgICAgPGRlZnM+IAogICAgICAgICAgICAgICAgICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9InN3LWdyYWRpZW50IiB4MT0iMCIgeDI9IjEiIHkxPSIxIiB5Mj0iMCI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8c3RvcCBpZD0ic3RvcDEiIHN0b3AtY29sb3I9InJnYmEoMjQ4LCAxMTcsIDU1LCAxKSIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHN0b3AgaWQ9InN0b3AyIiBzdG9wLWNvbG9yPSJyZ2JhKDI1MSwgMTY4LCAzMSwgMSkiIG9mZnNldD0iMTAwJSI+PC9zdG9wPgogICAgICAgICAgICAgICAgICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgICAgICAgICAgICAgIDwvZGVmcz4KICAgICAgICAgICAgICAgIDxwYXRoIGZpbGw9InVybCgjc3ctZ3JhZGllbnQpIiBkPSJNMzEuMSwtMTguNEMzNS45LC05LjUsMzIuNiwzLjcsMjYsMTUuM0MxOS41LDI3LDkuNywzNy4xLC0xLjgsMzguMUMtMTMuNCwzOS4yLC0yNi44LDMxLjIsLTMzLjcsMTkuM0MtNDAuNyw3LjUsLTQxLjIsLTguMywtMzQuNSwtMTguMkMtMjcuOCwtMjguMiwtMTMuOSwtMzIuMywtMC40LC0zMi4xQzEzLjEsLTMxLjksMjYuMiwtMjcuMywzMS4xLC0xOC40WiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTAgNTApIiBzdHJva2Utd2lkdGg9IjAiIHN0eWxlPSJ0cmFuc2l0aW9uOiAwLjNzOyIgc3Ryb2tlPSJ1cmwoI3N3LWdyYWRpZW50KSI+PC9wYXRoPgogICAgICAgICAgICAgIDwvc3ZnPg==);
  }
}

.navigation-menu ul {
    gap: 10px;
}

.navigation-menu a {
    font-size: 1.2rem;
    padding: 0 0.5rem;
    gap: 0.5rem;

& i {
      font-size: 0.7rem;
  }
}

.job-seeker__section-right-side {
    padding-inline: 2rem;

& p {
      text-align: justify;
  }
}

.job-seeker__boxes-wrapper {
    padding-inline: 2rem;
& .karasan-card {
      padding-inline: 2rem;
      padding-block: 2rem;
      gap: 1rem;

& .karasan-card-header {
      align-items: center;
& span i {
      font-size: 1.8rem;
  }
}
}
}

footer.footer {
    grid-template-rows: auto auto;
    padding-inline: 4rem;
    padding-block: 2rem;
}
.footer__row-1 .footer__col-2 {
    padding-inline-start: 0rem;
    padding-inline-end: 2rem;
}

.footer__row-2--content-text {
    padding-inline-end: 4rem;

& p {
      text-align: justify;
  }
}

.copyright-footer {
    padding: 2rem 6rem;
    gap: 2rem;

& .copyright-footer__text p {
      line-height: 2rem;
  }
}

.job-seeker__section-4 {
& .job-seeker__section--right-side {
      padding-inline: 2rem;
      gap: 1rem;

& p {
      text-align: justify !important;
  }

& .sign-btn {
      align-self: center;
      margin: 0rem;
  }
}

& .job-seeker__section--left-side {
      padding-inline: 4rem;
  }
}
}

.header-container {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 500;
    transition: all 0.5s ease-in-out;
}

.header-container.scroll-up {
    top: -34px;
}

.header-container.scroll-down {
    top: 0;
}

.job-seeker__section--right-side.emploerys__section {
    display: grid;
    place-content: center;
    gap: 5rem;
}

.job-seeker__section--right-side.emploerys__section
.karasan-key-features-boxe-wrapper {
    justify-content: center;
    gap: 4rem;
    align-items: center;
    margin: 0;
    padding-inline-start: 2rem;

& .karasan-key-features-box:nth-child(odd) {
      translate: 0;
  }

& .karasan-key-features-box {
      height: 7rem;
      border-radius: 1rem;
  }
& .karasan-key-features-box::before {
      --width: 6.5rem;
      right: calc(var(--width) / -2.5);
  }
& .karasan-key-features-box::after {
      --width: 6.5rem;
      right: calc(var(--width) / -2.5);
  }
}

@media (width <= 425px) {
    .job-seeker__section--left-side.emploerys__section {
        display: none;
    }
}

@media (425px < width < 1024px) {
    .job-seeker__section-2 {
        padding-block: 2rem;
    }
    .job-seeker__boxes-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(1px, 30rem));
    }

    .job-seeker__boxes-wrapper {
        padding-inline: 1rem;
        place-content: center;

& .karasan-card {
      padding-inline: 2rem;
  }
}
}

.job-seeker__section.job-seeker__section-5.employers-section {
    display: grid;
    grid-template-columns: 1fr 1fr;

& .job-seeker__section--right-side {
      display: grid;
      place-content: center;
      padding-inline: 1rem;

& span {
      text-align: center;
  }

& .sign-btn {
      justify-self: flex-end;
      padding: 1rem 2rem;
      background: var(--yellow);
      border-radius: 0.8rem;
      margin-block-start: 2rem;
  }
}
& .job-seeker__section--left-side {
      display: grid;
      place-content: center;
  }
}

@media (width <= 425px) {
    .job-seeker__section.job-seeker__section-5.employers-section {
        grid-template-columns: 1fr;

& .job-seeker__section--right-side {
      padding-inline: 1.5rem;
& p {
      text-align: justify !important;
  }

& .sign-btn {
      justify-self: center;
  }
}
}
}

.job-seeker__section-left-side.emploerys {
    mask-image: unset;
    mask-repeat: no-repeat;
    /* display: grid;
    place-content: center; */
}

.blob-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

& img {
      --width: 400px;
      width: var(--width);
      height: var(--width);
      overflow: clip;
      object-fit: cover;
      animation: blob 15s ease-in-out infinite alternate forwards;
      transition: all 1s ease-in-out;
      /* filter: drop-shadow(2px 4px 6px black); */
      box-shadow: 0px 2px 2px 6px rgba(165, 222, 245, 0.5);
  }
}

@media (width <= 425px) {
    .blob-container {
& img {
      --width: 300px;
  }
}
}

@media (425px < width <= 768px) {
    .blob-container {
& img {
      --width: min(60dvw, 400px);
  }
}
}

@keyframes blob {
    0% {
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    }
    15% {
        border-radius: 55% 45% 45% 55% / 47% 52% 48% 53%;
        /* object-position: 50% 100%; */
    }
    30% {
        border-radius: 55% 45% 51% 49% / 47% 47% 53% 53%;
    }
    45% {
        border-radius: 59% 41% 46% 54% / 41% 47% 53% 59%;
    }
    60% {
        border-radius: 53% 47% 48% 52% / 50% 47% 53% 50%;
    }
    75% {
        border-radius: 43% 57% 45% 55% / 54% 53% 47% 46%;
    }
    100% {
        border-radius: 62% 38% 50% 50% / 40% 52% 48% 60%;
    }
}

@keyframes objPos {
    0% {
        object-position: 0% 100%;
    }
    100% {
        object-position: 100% 100%;
    }
}

.scroller-consultants {
    margin-block-start: 20rem;
}

.consultants__section {
    width: 100%;
    height: 100%;
    overflow-x: clip;

&.consultants__section--1 {
     display: grid;
     grid-template-columns: 60% 40%;
     gap: 4rem;

& .consultants__section--1__right {
      grid-column: 1 / 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;

& .consultants__section--1__right--content-wrapper {
      width: 80%;
      display: flex;
      flex-direction: column;
      gap: 2rem;
  }

& .consultants__section--1__right-tabs {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 2rem;

& .consultants__section--1__right-buttons {
      width: 35rem;
      height: 6rem;
      background: transparent;
      border: 1px solid #d2dbe8;
      border-radius: 100dvw;
      display: flex;
      padding: 0.4rem;

& span {
      flex: 1 1 auto;
      border-radius: 100dvw;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

&.active {
     background: var(--primary);
     color: #fff;
 }
}
}

& .consultants__section--1__right-tab-content {
& p {
      font-size: 1.4rem;
      line-height: 2;
      font-weight: 300;
      letter-spacing: 0.04rem;
      color: #333;
  }
}
}

& .consultants__section--1__right--content {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

& .consultants__section--1__right--content__title {
      font-size: 1.4rem;
      line-height: 1.5;
      letter-spacing: -0.08rem;
      font-weight: 400;
      color: var(--gray-text);
  }
& .consultants__section--1__right--content__text {
      font-size: 1.8rem;
      line-height: 2;
      font-weight: 600;
      color: var(--text);
  }
}
}
& .consultants__section--1__left {
      grid-column: 2 / 3;

& img {
      width: 80%;
      height: auto;
      display: inline-block;
      object-fit: cover;
  }
}
& .types-of-consultations {
      grid-column: 1 / -1;
      padding-inline: 5rem;

& .consultations-box-wrapper {
      margin: 5rem 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

& .consultations-box {
      width: 48%;
      margin: 2rem 0;
      padding: 3.5rem 3.5rem 2.6rem;
      background: #fff;
      border-radius: 1.5rem;
      box-shadow: 0.8rem 0.8rem 3rem 0 rgb(42 67 113 / 15%);
      position: relative;
      display: flex;

& .consultations-content {
      padding-right: 2rem;

& p {
      color: var(--gray-text-2);
  }
}

& .consultations-num {
      min-width: 45px;
      height: 45px;
      border-radius: 100%;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #0160e7;
      background: -moz-linear-gradient(
          130deg,
          #0160e7 0,
          #0bbfd0 70%
      );
      background: -webkit-linear-gradient(
          130deg,
          #0160e7 0,
          #0bbfd0 70%
      );
      background: linear-gradient(
          130deg,
          #0160e7 0,
          #0bbfd0 70%
      );
  }

& .consultations-backnum {
      color: rgba(165, 183, 210, 0.2);
      font-size: 3.6rem;
      position: absolute;
      bottom: 0;
      left: 2rem;
  }
}
}
}
}

&.consultants__section--2 {
     margin-top: 50px;
     padding: 70px 0 50px;
     text-align: center;

& > span {
      display: inline-block;
      font-size: 30px;
      font-weight: 700;
      line-height: 45px;
      padding: 0 50px;
      margin-bottom: 60px;
  }

& .switch-content {
      display: flex;
      justify-content: center;
      position: relative;

& .switch-col {
      width: 25%;
      margin: 0 10px;
      padding-top: 70px;
      background: #fff;
      border-radius: 15px;
      display: grid;
      position: relative;

& .switch-content-num {
      margin-block-end: 2.5rem;

& p {
      font-size: 30px;
      font-weight: 700;
  }
}

&:nth-child(1) {
& .switch-content-num p {
      color: #fe4c1c;
  }
}
&:nth-child(2) {
& .switch-content-num p {
      color: #2677ee;
  }
}
&:nth-child(3) {
& .switch-content-num p {
      color: #00c3ff;
  }
}

& span {
      font-size: 26px;
      line-height: 45px;
      margin-bottom: 60px;
      padding: 0 10px;
  }
}
}
}

&.consultants__section--3 {
& .our-team {
/* margin: 50px 0; */

.our-team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;

& span {
      display: inline-block;

&:first-child {
     color: #a5b7d2;
     line-height: 40px;
 }

&:nth-child(2) {
     line-height: 40px;
     font-weight: 700;
     font-size: 2.3rem;
 }

&:last-child {
     font-size: 16px;
     line-height: 40px;
 }
}
}

/* & . {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;

    & .personnel {
        flex-basis: 20%;
        margin-bottom: 20px;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;

        & .personnel-image {
            width: 100%;
            height: 250px;
            overflow: hidden;
            border-radius: 15px;

            & img {
                display: block;
                max-width: 100%;
                object-fit: cover;
                -webkit-transform: scale(1);
                transform: scale(1);
                -webkit-transition: 0.5s ease-in-out;
                transition: 0.5s ease-in-out;
                border-radius: 15px;
            }
        }

        & .personnel-info {
            width: 80%;
            margin-top: -50px;
            padding: 5px 15px 20px;
            background: #fff;
            box-shadow: rgba(42, 67, 113, 0.15) 8px 8px 30px 0;
            line-height: 30px;
            border-radius: 15px;
            text-align: center;
            z-index: 1;
            position: relative;
        }

        & h4 {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        & h5 {
            font-size: 13px;
            color: #a5b7d2;
            display: initial;
        }
    }
} */

& .contact-personnel {
      position: absolute;
      bottom: 0;
      left: 35px;
      transform: translate(-50%, 50%);
      z-index: 100;

& .contact-menu {
      position: relative;
      width: 220px;
      height: 120px;
  }

& .contact-menu .contact-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 35px;
      height: 35px;
      background: #00c3ff;
      color: #fff;
      box-shadow: 0 0 0 3px rgba(0, 95, 255, 0.1);
      font-size: 30px;
      text-align: center;
      line-height: 35px;
      border-radius: 50%;
      cursor: pointer;
  }
}
}

& .sessioncontentbox {
      margin-block-start: 4rem;
& h2 {
      margin-bottom: 25px;
      font-size: 30px;
      font-weight: 700;
      line-height: 45px;
  }

& p {
      color: #606060;
      font-size: 1.5rem;
      font-weight: 300;
      line-height: 2.2;
  }

& ul {
      margin: 10px 25px 10px 0;

& li {
      list-style: disc !important;
      margin-block-end: 1rem;
  }
}

/* & .consult-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    & .consult-col-1 {
        width: 55%;
    }

    & .consult-col-2 {
        width: 45%;
    }
} */
}
}
}
.scroller-area.consultants {
    background: var(--highlight);
}

.scroller-area :is(h1, h2, h3, h4, h5, h6) {
    font-family: "IRANSans", sans-serif;
}

@media (width <= 768px) {
    .scroller-consultants {
        margin-block-start: 5rem;
    }

    .consultants__section {
&.consultants__section--1 {
     grid-template-columns: 1fr;
     gap: 0;
     max-width: 100%;

& .consultants__section--1__left {
      display: none;
  }
& .consultants__section--1__right {
      grid-column: 1 / -1;
      align-items: flex-start;

& .consultants__section--1__right--content-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 2rem;
  }

& .consultants__section--1__right-tabs {
& .consultants__section--1__right-buttons {
      width: min(36rem, 98%);
      height: 12rem;
      border-radius: 3rem;
      flex-direction: column;
      margin-inline: auto;
  }
& .consultants__section--1__right-tab-content {
& p {
      padding-inline-end: 1rem;
      text-align: justify;
  }
}
}
}
& .types-of-consultations {
      padding-inline: 1rem;

& .consultations-box-wrapper {
& .consultations-box {
      flex: 1 0 100%;
  }
}
}
}

&.consultants__section--2 {
& .switch-content {
      flex-direction: column;
      align-items: center;
      gap: 1rem;

& .switch-col {
      width: min(94%, 34rem);
  }
}
}

&.consultants__section--3 {
.our-team .personnel {
    flex-basis: 28rem !important;
.personnel-image {
    height: 300px;
}
}
.sessioncontentbox p {
    text-align: justify;
}
}
}
}

@media (768px < width <= 1024px) {
    .container.consultants-page-wrapper {
        margin-block-start: 8rem;
    }

    .scroller-consultants {
        margin-block-start: 5rem;
    }

    .consultants__section {
&.consultants__section--1 {
     grid-template-columns: 1fr;
     gap: 0;
     max-width: 100%;

& .consultants__section--1__left {
      display: none;
  }
& .consultants__section--1__right {
      grid-column: 1 / -1;
      align-items: flex-start;

& .consultants__section--1__right--content-wrapper {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 2rem;
  }

& .consultants__section--1__right-tabs {
& .consultants__section--1__right-buttons {
      width: min(36rem, 98%);
      height: 12rem;
      border-radius: 3rem;
      flex-direction: column;
      margin-inline: auto;
  }
& .consultants__section--1__right-tab-content {
& p {
      padding-inline-end: 1rem;
      text-align: justify;
  }
}
}
}
& .types-of-consultations {
      padding-inline: 1rem;

& .consultations-box-wrapper {
& .consultations-box {
      flex: 1 0 100%;
  }
}
}
}

&.consultants__section--2 {
& .switch-content {
      flex-direction: column;
      align-items: center;
      gap: 1rem;

& .switch-col {
      width: min(94%, 34rem);
  }
}
}

&.consultants__section--3 {
.our-team .personnel {
    flex-basis: 28rem !important;
.personnel-image {
    height: 300px;
}
}
.sessioncontentbox p {
    text-align: justify;
}
}
}
}

@media (1024px < width <= 1280px) {
    .consultants__section.consultants__section--3 .our-team .personnel {
        flex-basis: 25%;
& .personnel-image {
      height: 255px;
  }
}
}

.modal-content:has(.consultants-page__pricing-table) {
    width: calc(clamp(31rem, 43.125vw + 17.2rem, 100rem));
}

@supports (width: calc-size(calc-size(fit-content, size), size + 5rem)) {
    .modal-content:has(.consultants-page__pricing-table) {
        /* width: calc(clamp(31rem, 43.125vw + 17.2rem, 100rem)); */
        width: calc-size(calc-size(fit-content, size), size + 5rem);
    }
}

.modal-title[data-consultants-modal] {
    margin-inline-start: 2rem;
}

.consultants-plans {
    margin-block-start: 3rem;
    margin-block-end: 2rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
}

.consultants-plans-item {
    display: flex;
    flex-flow: row-reverse nowrap;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    gap: 2rem;
    border: 1px solid transparent;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    border-radius: 1rem;
    width: calc-size(calc-size(max-content, size), size + 2rem);
    height: auto;
    cursor: pointer;
    transition: border 300ms ease;

& > * {
      cursor: pointer;
  }

& label {
      height: calc-size(calc-size(max-content, size), size + 2rem);
      margin: 0px !important;
      display: flex;
      justify-content: center;
      align-items: center;
  }

@supports (width: calc-size(auto, size)) {
& label {
    height: fit-content;
}
}

&:has(input:checked) {
     border: 1px solid var(--primary);
 }

& .form-check-input {
      float: unset;
      margin: 0px;
      padding: 0px;
  }
}

@supports (width: calc-size(auto, size)) {
    .consultants-plans-item {
        width: fit-content;
    }
}

@media (768px < width) {
    body > main.container:first-of-type {
        margin-block-start: 10rem;
    }
}

.mobile-dropdown-menu {
    height: 0;
    overflow: clip;
    transition: height 300ms;
    interpolate-size: allow-keywords;
    padding-inline-start: 2rem;
    padding-block: 1rem 0rem;

& li {
      height: 4rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
  }

& li a {
      font-size: 1.4rem !important;
      font-weight: 400 !important;
      letter-spacing: 0.07rem !important;
      color: var(--bs-gray-500) !important;
  }
}

.mobile-dropdown-menu-container.active {
& .mobile-dropdown-menu {
      height: fit-content;
  }

@supports (width: calc-size(auto, size)) {
& .mobile-dropdown-menu {
    height: calc-size(calc-size(max-content, size), size);
}
}

& i.fa-chevron-left {
      rotate: -90deg;
  }
}

.nav-link {
    width: max-content;
}

.tab-content.consultants-tab {
    max-width: 100%;
}

.consultants__tabs--wrapper {
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, auto));
    gap: 3rem;

& > .nav-pills {
      grid-column: 1 / 2;
      grid-row: 1 / -1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 3rem;
  }

& > .tab-content {
      grid-column: 2 / 3;
  }

.consultants-slider {
.swiper {
    width: 100%;
    /* padding: 20px; */
}

.swiper-slide {
    background: transparent;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;

& .personnel {
      width: 100%;
      margin-bottom: 20px;
      border-radius: 15px;
      display: flex;
      flex-direction: column;
      align-items: center;

& .personnel-image {
      width: 100%;
      height: 29rem;
      overflow: hidden;
      border-radius: 15px;

& img {
      display: block;
      max-width: 100%;
      object-fit: cover;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transition: 0.5s ease-in-out;
      transition: 0.5s ease-in-out;
      border-radius: 15px;
  }
}

& .personnel-info {
      width: 80%;
      margin-top: -50px;
      padding: 5px 15px 20px;
      background: #fff;
      box-shadow: rgba(42, 67, 113, 0.15) 0px 5px 12px 0;
      line-height: 30px;
      border-radius: 15px;
      text-align: center;
      z-index: 1;
      position: relative;
  }

& h4 {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 5px;
  }

& h5 {
      font-size: 13px;
      color: #a5b7d2;
      display: initial;
  }
}

.contact-personnel {
    position: absolute;
    bottom: 0;
    left: 35px;
    transform: translate(-50%, 50%);
    z-index: 100;

& .contact-menu {
      position: relative;
      width: 220px;
      height: 120px;
  }

& .contact-menu .contact-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 35px;
      height: 35px;
      background: #00c3ff;
      color: #fff;
      box-shadow: 0 0 0 3px rgba(0, 95, 255, 0.1);
      font-size: 30px;
      text-align: center;
      line-height: 35px;
      border-radius: 50%;
      cursor: pointer;
  }
}
}

.swiper-wrapper {
    padding: 0 0;
}
}

.nav-pills .nav-link {
    min-width: 100%;
}

.nav-link:hover {
    scale: 1.05;
}

.nav-pills .nav-link {
    color: var(--yellow);
    background-color: color-mix(in srgb, currentColor 20%, #fff 80%);
    transition: background 300ms ease, scale 200ms ease;
    padding-block: 1.3rem;
}

.nav-pills .nav-link.active {
    color: var(--primary);
    background-color: color-mix(in srgb, currentColor 15%, #fff 85%);
}

.nav-pills .nav-link.active:hover {
    color: var(--primary);
    background-color: color-mix(in srgb, currentColor 15%, #fff 85%);
}
}

.consultants-page__pricing-table.pricing-table-container {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1rem;

.price-card {
    width: 25rem;
    height: 40rem;
    border-radius: 2rem;
    background: rgba(232, 234, 246, 0.6);
    transition: all 300ms;

& *:not(i) {
      font-family: "IRANSans", sans-serif;
  }

&:hover {
     background: #e8eaf6;
     transform: scale(1.05);
 }

.price-card--top {
    height: 35%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #8d3af3;
    padding: 15px;

h3 {
    font-size: 1.6rem;
    font-weight: 200;
    color: #8d3af3;
}

h5 {
    font-weight: 500;
    font-size: 1.6rem;
    position: relative;
    top: 2rem;
    margin: 0;
    letter-spacing: -0.09rem;
    text-align: center;
    line-height: 1.6;
    text-wrap: pretty;
}

span {
    font-size: 2.5rem;
    position: relative;
    top: 5px;
    margin: 0 5px;
}

hr {
    width: 90%;
    color: rgba(245, 245, 245, 0.7);
    margin-top: 30px;
}
}

.price-card--bottom {
    height: 65%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;

li {
    font-size: 1.4rem;
    color: var(--gray-text-2);
    display: flex;
    align-items: center;
    gap: 1rem;

i {
    font-size: 1.2rem;
    margin-right: 15px;
    color: #8d3af3;
}
}
}
.btn {
    display: block;
    padding: 10px 65px;
    margin: 30px auto;
    font-size: 1.2rem;
    border: none;
    border-radius: 100px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    background: #8d3af3;
    transition: background 500ms;

&:hover {
     cursor: pointer;
     background: #c235bf;
 }
}
}

.price-text {
    font-size: 1.2rem !important;
}
}
}

.modal {
    overscroll-behavior: contain;
}

@media (width <= 768px) {
    .consultants__tabs--wrapper {
        grid-template-columns: 100%;
        grid-template-rows: auto 1fr;
        padding-block-start: 5rem;
        gap: 1rem;

    .nav-pills,
    .tab-content {
        grid-column: 1 / 2;
    }

    .nav-pills {
        grid-row: 1 / 2;
        flex-flow: row wrap !important;
        gap: 1rem;

    .nav-link {
        min-width: fit-content;
        max-width: max-content;
        font-size: 1.2rem;
    }
}

.tab-content {
    grid-row: 2 / 3;
}

.our-team .our-team-header {
    margin-bottom: 2.5rem !important;
}

.our-team .our-team-header span {
&:first-child {
     font-size: 1.2rem !important;
     line-height: 15px !important;
 }
&:nth-child(2) {
     font-size: 1.8rem !important;
     line-height: 35px !important;
 }
&:last-child {
     font-size: 1.4rem !important;
     line-height: 25px !important;
 }
}
}

.modal-content:has(.consultants-page__pricing-table) {
    max-width: 100dvw;
}
.modal-title[data-consultants-modal] {
    margin-inline-start: 0;
}

.consultants-page__pricing-table.pricing-table-container {
    flex-wrap: wrap;
}
}

@media (768px < width <= 1024px) {
    /* .consultants__tabs--wrapper {
        grid-template-columns: 100%;
        grid-template-rows: auto 1fr;
        padding-block-start: 5rem;
        gap: 1rem;

        .nav-pills,
        .tab-content {
            grid-column: 1 / 2;
        }

        .nav-pills {
            grid-row: 1 / 2;
            flex-flow: row wrap !important;
            gap: 1rem;

            .nav-link {
                min-width: fit-content;
                max-width: max-content;
                font-size: 1.2rem;
            }
        }

        .tab-content {
            grid-row: 2 / 3;
        }

        .our-team .our-team-header {
            margin-bottom: 2.5rem !important;
        }

        .our-team .our-team-header span {
            &:first-child {
                font-size: 1.2rem !important;
                line-height: 15px !important;
            }
            &:nth-child(2) {
                font-size: 1.8rem !important;
                line-height: 35px !important;
            }
            &:last-child {
                font-size: 1.4rem !important;
                line-height: 25px !important;
            }
        }
    } */

    .modal-content:has(.consultants-page__pricing-table) {
        width: 90dvw;
    }
    .modal-title[data-consultants-modal] {
        margin-inline-start: 0;
    }

    .consultants-page__pricing-table.pricing-table-container {
        flex-wrap: wrap;
    }
}

.about-us-container {
.about-us-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));

&.section-1 {
     margin-block-start: 14rem;
 }

.about-us-description h2.title {
    color: var(--primary);
    font-family: "IRANSans", sans-serif;
    line-height: 1.8;
    font-weight: 600;
}

p.section-1__first-desc {
    color: var(--text);
    font-weight: 400;
}
p.section-1__second-desc {
    color: var(--gray-text);
    font-weight: 400;
}

&.section-2 {
     margin-block-start: 15rem;

.about-us-description {
    gap: 0;

h2.title {
    line-height: 1.8;
}
}

p.section-2__subtitle {
    font-weight: 400;
}

& .our-goals {
      margin-block-start: 1rem;

li {
    font-weight: 300;
    position: relative;
    padding-inline-start: 0.5rem;
    padding-block: 0.5rem;

&::after {
     --width: 0.8rem;
     content: "";
     position: absolute;
     right: calc(var(--width) * -1.5);
     top: calc(50% - (var(--width) / 2));
     width: var(--width);
     height: var(--width);
     border-radius: 100%;
     background-color: var(--primary);
 }
}
}

.our-goals__image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block-start: -10rem;

img {
    width: 80%;
    margin-inline: auto;
}
}
}
}
}

.font-clamp-title-1 {
    font-size: clamp(1.25rem, 4vw, 2.5rem);
}

.font-clamp-title-2 {
    font-size: clamp(2rem, 1.786vw + 1.429rem, 4rem);
}

.font-clamp-title-3 {
    font-size: clamp(1.4rem, 1.607vw + 0.886rem, 3.2rem);
}

.font-clamp-title-4 {
    font-size: clamp(1.4rem, 1.429vw + 0.943rem, 3rem);
}

.font-clamp-title-5 {
    font-size: clamp(1.6rem, 1.429vw + 1.143rem, 3.2rem);
}

.font-clamp-text-1 {
    font-size: clamp(1.4rem, 0.536vw + 1.229rem, 2rem);
}

.font-clamp-text-2 {
    font-size: clamp(1.6rem, 0.714vw + 1.371rem, 2.4rem);
}

.font-clamp-text-3 {
    font-size: clamp(1rem, 0.536vw + 0.829rem, 1.6rem);
}

.font-clamp-text-4 {
    font-size: clamp(1.2rem, 0.357vw + 1.086rem, 2rem);
}

.font-clamp-text-5 {
    font-size: clamp(1.2rem, 1.071vw + 0.857rem, 2.4rem);
}

.font-clamp-text-6 {
    font-size: clamp(1.2rem, 0.536vw + 1.029rem, 1.8rem);
}

.about-us-description {
    padding-inline: 5rem;
    gap: 0.8rem;
}

.timeline-container {
    --start-box-size: 18rem;
    --arrow-size: 4rem;
    width: 100%;
    min-height: 100dvh;
    height: fit-content;
    margin-block-start: 10rem;
    position: relative;

:is(.start-box, .logo-box) {
    position: relative;
    width: var(--start-box-size);
    height: var(--start-box-size);

& > div:first-child {
      border: 2px dashed var(--primary);
  }
}

.point {
    margin-block-start: -0.8rem;
}

:is(.point):has(+ .logo-box),
.logo-box {
    margin-block-start: -0.4rem;
}

.logo-box {
img {
    width: 50%;
    display: block;
    margin-inline: auto;
    height: auto;
}
h1 {
    font-family: "IRANSans", sans-serif;
    font-weight: 600;
    color: var(--primary);
}
}

.line {
    margin-block-start: -0.4rem;
    height: 130rem;
    width: 0.1rem;
    border-left: 0.2rem dashed var(--primary);
}
.timeline-box {
    --height: 14.5rem;
    --gap: 4rem;
    --i: 1;
    position: absolute;
    top: calc(
        (var(--start-box-size) + var(--arrow-size)) +
        ((var(--height) + var(--gap)) * var(--i))
    );
    width: 45rem;
    height: var(--height);
    overflow: clip;
    gap: 1rem;

.timeline-box__image {
    display: flex;
    flex-direction: row-reverse;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;

img {
    --square: 14rem;
    min-width: var(--square);
    width: var(--square);
    height: var(--square);
    object-fit: cover;
    border-radius: 1rem;
}
}

&:nth-child(odd) {
.timeline-box__image {
    flex-direction: row;
}
}

.timeline-box__title {
span {
    font-weight: 400;
    text-align: center;
    line-height: 1.6;
}

.timeline-box__title--line {
    min-width: 10rem;
    width: 10rem;
    height: 0.1rem;
    background: var(--primary);
    position: relative;
&::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 0;
     translate: 0 -50%;
     width: 0.8rem;
     height: 0.8rem;
     border-radius: 100%;
     background: var(--primary);
 }
}
}
&:nth-child(even) {
     right: 50%;
 }
&:nth-child(odd) {
     left: 50%;
.timeline-box__title {
.timeline-box__title--line {
&::after {
     left: unset;
     right: 0;
 }
}
}
}
}
}

.our-technical-team {
    padding-block: 10rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    margin-block: 10rem;

.our-technical-team__title {
    font-weight: 500;
    color: var(--primary);
}

.technical-member-box {
    border-radius: 2rem;
    background: #eef3ee;
    padding-inline: 0.8rem;
    padding-block-start: 0.8rem;
    padding-block-end: 1.4rem;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
    gap: 2rem;

.image-wrapper {
    border-radius: 2rem;
    height: 20rem;

img {
    margin-block-start: 0.8rem;
    border-radius: 2rem;
    height: 100%;
    object-fit: cover;
    margin-inline: auto;
}
}
}
}

.contact-us-container {
.contact-us-form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-block: 2rem;
    gap: 4rem;

.contact-form-container {
    width: 100%;
    padding: 2rem;
    border-radius: 2rem;
    background: #fdfdfd;
    box-shadow: 0px 0px 5px #f2efef, 0px 0px 2px #fdfdfd;
    height: max-content;

.form-control {
    line-height: 2;
}
}
.contact-us-logo {
    position: relative;
    z-index: 2;
    padding: 0;
    display: flex;

& > div:first-child {
      width: 100%;
      border-radius: 2rem;
      padding-block: 1rem;
      padding-inline: 2rem;
      background: #fdfdfd;
      box-shadow: 0px 0px 5px #f2efef, 0px 0px 2px #fdfdfd;
  }

img {
    width: 4rem;
}
}
.contact-us-text {
    grid-column: 2/5;
    position: relative;
    z-index: 1;
    grid-row: 1 / 2;
    padding: 0;
    background: color-mix(in srgb, var(--yellow) 55%, white 90%);
    border: 1px solid var(--yellow);
    border-radius: 2rem;
    box-shadow: 0px 0rem 0.5rem 0.1rem rgba(0, 0, 0, 0.1);
}
}
}

.vertical-text {
    position: absolute;
    bottom: -8%;
    left: 54%;
    transform: rotate(-90deg);
    transform-origin: left top;
    display: inline-block;

span {
    display: flex;
    width: max-content;
    margin-inline: auto;
}
}

.map-container {
    margin-block: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.social-media-container:has(.social-media-logos) {
    display: flex;
    align-items: self-start;
    gap: 1.25rem;
.social-media-logos {
    flex-flow: row wrap;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

img {
    width: 3rem !important;
}
}
}

@media (max-width: 768px) {
    .about-us-container .about-us-section {
        grid-template-columns: 1fr;
    }
    .about-us-description {
        padding-inline: 0.8rem;
        gap: 0.5rem;
    }

    .about-us-container {
& .about-us-section {
&.section-1 {
     margin-block-start: 2rem;
 }
}
}

.timeline-container {
    --start-box-size: 10rem;
    margin-block: 5rem;
.timeline-box {
    --height: 16rem;
    justify-content: flex-end !important;
    width: 15rem;

& .timeline-box__title {
.timeline-box__title--line {
    min-width: 4rem;
    width: 4rem;
}
}

& .timeline-box__image {
      display: flex;
      flex-direction: column !important;
      gap: 1rem;
img {
    --square: 10rem;
}

span {
    font-weight: 600;
}
}
}
/* --arrow-size: 4rem;
width: 100%;
min-height: 100dvh;
height: fit-content;
margin-block-start: 10rem;
position: relative; */
}

.timeline-container {
.line {
    height: 140rem;
}
}

.about-us-container {
& .about-us-section {
&.section-2 {
     margin-block-start: 5rem;

.our-goals__image-container {
    margin-block-start: 0;
}
}
}
}

.our-technical-team {
    padding-block: 5rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.contact-us-container {
.contact-us-form-container {
    display: grid;
    grid-template-columns: 1fr;
    padding-block: 0;
    grid-auto-rows: auto;
    gap: 1.25rem;
    margin-block-end: 10rem;

.contact-us-logo {
    order: 2;

& > div:first-child {
      gap: 3rem;
  }
}

.contact-form-container {
    order: 1;
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
}
}
}
}

@media (768px < width < 1024px) {
    .about-us-container .about-us-section {
        grid-template-columns: 55% 45%;
    }
    .about-us-description {
        padding-inline: 1rem;
        gap: 1rem;
    }
    .timeline-container {
        --start-box-size: 15rem;
    .timeline-box {
        --height: 16rem;
        width: 35rem;
    }
}
.timeline-container {
.line {
    height: 135rem;
}
}
.about-us-container {
& .about-us-section {
&.section-2 {
.our-goals__image-container {
    margin-block-start: -2rem;
img {
    width: 100%;
    margin-inline: auto;
}
}
}
}
}
.our-technical-team {
    padding-block: 5rem;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.5rem;
}

.contact-us-container {
& .contact-us-form-container {
      gap: 1rem;
& .contact-us-logo {
      grid-column: 1/2;
  }
.contact-form-container {
    grid-column: 2/3;
    width: 100%;
    padding: 1rem;
    border-radius: 2rem;
}
}
}
}

.submit-btn {
    margin-inline: auto;
    padding-inline: 5rem;
}

/* Karamad Home Page Styles - Start  */

[class*="karamad-"] {
    --primary-color: #004c9a;
}

/* .karamad-header-container {
    position: sticky;
    top: 0;
} */

header.karamad-header {
    background: white url("../img/header-webp_1.webp") no-repeat center
    center/cover;
    height: fit-content;
    min-height: 120px;
& .karamad-logos {
      display: flex;
      justify-content: space-between;
      align-content: center;

& .karamad-year-slogan {
      display: flex;
      justify-content: center;
      align-items: center;

img {
    max-width: 15rem;
    height: auto;
    display: block;
}
}

& .karamad-logo {
      display: flex;
      align-items: center;
img {
    max-width: 20rem;
    height: auto;
    object-fit: cover;
    display: block;
}
}

& .karamad-social-media {
      display: flex;
      gap: 1rem;
      align-items: center;
& a img {
      max-width: 3rem;
      height: auto;
      object-fit: cover;
      display: block;
  }
}
}
}

.navigation-header.karamad-header-2 {
    background-color: var(--primary-color);
    padding-inline: 2rem;
    border-radius: 1rem;
    margin-block-start: 1rem;
}

.navigation-menu.karamad-header {
    padding-inline: 0px;
}

.navigation-menu.karamad-header > .h-100 > li > a {
    color: #fff !important;
}

@media (768px < width) {
    body main.container.dfa {
        margin-block-start: 2rem;
    }
}

.featured-news-slider {
    width: 100%;
    height: auto;
    aspect-ratio: 16/7.5;
    border-radius: 1rem;
    overflow: clip;

& img {
      width: 100%;
      height: auto;
      object-fit: fill !important;
  }
}

.swiper.featured-swiper {
    width: 100%;
    height: 100%;

& .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
  }

& .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

& .swiper-pagination {
      bottom: 2rem;
  }
}

.swiper:is(
        .karamad-advertisement-swiper,
        .karamad-popular-courses-swiper,
        .companions-swiper
    ) {
    width: 100%;
    height: 100%;

& .swiper-slide {
      text-align: center;
      font-size: 18px;
      /* background: #fff; */
      display: flex;
      justify-content: center;
      align-items: center;
  }

& .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

& .swiper-pagination {
      bottom: 2rem;
  }
}

.swiper.karamad-popular-courses-swiper {
    padding-block-end: 3rem;

& .swiper-pagination {
      bottom: 1rem;
  }
}

.karamad-cards-wrapper {
    margin-block-start: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: row wrap;

& a:hover {
      color: #fff !important;
  }
}

.karamad-card {
    width: 15rem;
    height: 15rem;
    background: var(--primary-color);
    border-radius: 2rem;
    color: white;

& img {
      width: 70% !important;
      object-fit: contain !important;
  }
}

:is(div.introduction .introduction-karamad) {
    text-align: justify;
    text-wrap: unset;
    line-height: 34px;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.06rem;
    color: var(--gray-300);
}

.karamad-roadmap-container img {
    width: 70%;
    margin-inline: auto;
}

.hero-section.karamad {
    /* margin-block-start: 2rem; */
    height: 45rem;
}

.karamad-popular-courses {
    margin-block-start: 5rem;
    width: 100%;
    max-width: 100dvw;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.companions {
    width: 100%;
    padding-block: 2rem;
    margin-block-start: 1rem;

& .companions-box {
      width: 100%;
      aspect-ratio: 1/1;
      /* background-color: color-mix(in srgb, #2cda09 50%, white 50%); */
      background-color: #fff;
      border-radius: 1rem;
      box-shadow: 0px 2px 15px -3px rgba(0, 0, 0, 0.1);
      padding: 0.5rem;

/* &.blue-bg {
    background-color: color-mix(in srgb, #090cda 25%, white 55%);
} */

& img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain !important;
  }
}
}

footer.karamad-footer {
    width: 100%;
    max-width: 100dvw;
    overflow-x: clip;
    background-image: linear-gradient(to top, #00264d, var(--primary-color));
    padding-block-start: 6rem;
    padding-block-end: 2rem;

& .footer__head {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 40px;
  }

& .footer__head::after {
      content: "";
      width: 55px;
      height: 5px;
      border-radius: 3px;
      background-color: #fff;
      margin: 0 10px 0 0;
  }

& .contact__item {
      font-size: 16px;
      line-height: 26px;
      color: #fff;
      margin-bottom: 10px;

a {
    color: #fff;
}
}

& .contact__item svg {
      width: 1.5rem;
  }

& .footer-logo-box {
      margin-bottom: 40px;
      width: 100%;
      display: flex;
      justify-content: flex-end;
  }

& .footer-logo-box a {
      width: fit-content;
  }
}

#karamad-header-container.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    margin-block-start: 0;

& .navigation-header.karamad-header-2 {
      padding-inline: 2rem;
      border-radius: 0;
      margin-block-start: 0;
  }
}

.companions-wrapper {
    margin-block-start: 5rem;
    background-color: #f4f5fa;
    padding-block: 4rem;
    padding-inline: 2rem;
}

.companions-wrapper .nav-link:not(.active):hover {
    color: #004c9a;
}

.karamad-header-container
.karamad-header-2
.button-wrapper
.btn-secondary:hover {
    background-color: color-mix(in srgb, #24b4fb 80%, #fff 20%);
}

.transparent-blue-bg {
    height: 15rem;
    background: linear-gradient(
        to top,
        rgba(0, 74, 150, 1),
        rgba(34, 97, 162, 0.9),
        rgba(136, 173, 215, 0)
    );
}

@media (width <= 768px) {
    .featured-news-slider {
        aspect-ratio: 1/1;
    }
    .swiper.featured-swiper {
& .swiper-slide {
      width: inherit !important;
  }
}

.karamad-cards-wrapper {
    row-gap: 0.5rem;
}

.karamad-card {
    width: 10rem;
    height: 10rem;
    font-size: calc(clamp(1rem, 1.339vw + 0.571rem, 1.6rem));
}

.karamad-card {
& img {
      width: 60% !important;
      object-fit: contain !important;
  }
}

.hero-section.karamad {
    height: fit-content;
    gap: 2rem;
}

.karamad-roadmap-container img {
    width: 98%;
    margin-inline: auto;
}

.karamad-popular-courses {
    gap: 2rem;
}

.swiper:is(
            .karamad-advertisement-swiper,
            .karamad-popular-courses-swiper,
            .companions-swiper
        ) {
& .swiper-slide {
      width: inherit !important;
  }
}

.companions-wrapper .nav.nav-pills {
    row-gap: 2rem;
}

.featured-news-slider .featured-swiper div {
    font-size: calc(clamp(1.1rem, 1.339vw + 0.571rem, 1.6rem));
}

.transparent-blue-bg {
    height: 50%;
}

.karamad-header {
    max-width: 100dvw;
}

header.karamad-header {
    margin-block-end: 4rem;
& .karamad-logos {
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
& .karamad-year-slogan {
img {
    max-width: 10rem;
}
}

& .karamad-logo {
img {
    max-width: 12rem;
}
}

#date {
    text-align: center;
}
}
}
}

@media (768px < width < 1024px) {
    .karamad-cards-wrapper {
        row-gap: 2rem;
        justify-content: start;
        column-gap: 2rem;
    }

    .karamad-card {
        width: 12rem;
        height: 12rem;
        font-size: calc(clamp(1.2rem, 3.125vw - 1.2rem, 2rem));
    }

    .karamad-card {
& img {
      width: 60% !important;
      object-fit: contain !important;
  }
}

.karamad .introduction {
    padding-inline: 0px;
}

.karamad-roadmap-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.karamad-roadmap-container img {
    width: 98%;
}

.hero-section.karamad {
    height: fit-content;
}

footer.karamad-footer {
& .footer-logo-box a {
      width: fit-content;
  }
}
}
/* Karamad Home Page Styles - End  */

/* Karamad Incentive Page - Strat */
.page-title-area {
    position: relative;
    z-index: 1;
    background: transparent url(../img/incentive-banner.png) no-repeat;
    text-align: center;
    background-size: cover;
    width: 100%;
    height: 200px;
    display: grid;
    place-content: center;
}

.btns-login2.banner-btns {
    background-image: url("../img/incentive-banner-btns.jpg");
}

.banner-btns {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
    margin: 100px auto 40px auto;
    background-repeat: no-repeat;
    background-size: cover;

& .btn {
      font-weight: 600;
      font-size: 14px;
      border: none;
      padding: 15px 40px;
      position: relative;
      border-radius: 4px;
      z-index: 1;
      text-transform: uppercase;
      -webkit-transition: 0.5s;
      transition: 0.5s;
      width: fit-content;
  }

@supports (width: calc-size(auto, size)) {
& .btn {
    width: calc-size(calc-size(max-content, size), size);
}
}

& .btn-request {
      background: #ffff32;
      color: #004975;
      border: 2px solid #ffff32;
      border-radius: 15px;
      box-shadow: 0 0 10px rgba(72, 69, 224, 0.1);
      opacity: 1 !important;
  }
}

.section-title-incentive {
    margin-bottom: 20px;
}

.section-title .bar {
    height: 5px;
    width: 90px;
    background: #bfdeef;
    margin: 12px 0;
    position: relative;
    border-radius: 30px;
}

.area-txt-incentive p {
    text-align: justify;
    font-size: 16px;
    color: #222222;
    line-height: 1.9;
}

.area-txt-incentive h4 {
    font-size: 18px;
}

.students-signin-form {
& .btn-close {
      margin-inline: auto 0px !important;
  }

& .btn-primary {
      width: calc-size(calc-size(max-content, size), size);
      margin-inline: auto;
      padding-block: 1rem;
      padding-inline: 2rem;
      font-size: 1.4rem;
      font-weight: 400;
  }

@supports (width: calc-size(auto, size)) {
& .btn-primary {
    width: fit-content;
}
}

}
/* Karamad Incentive Page - End */

/* Karamad Service Page - Start */
.single-box {
    display: block;
    padding: 7px;
    position: relative;
    z-index: 1;
    border-radius: 10px;
    background: #dcf2ff;
    -webkit-box-shadow: 0 0 10px rgba(72, 69, 224, 0.1);
    box-shadow: 0 0 10px rgba(72, 69, 224, 0.1);
    -webkit-transition: 0.5s;
    transition: 0.5s;
    margin-bottom: 20px;
    height: 100px;
}

.single-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-radius: 10px;
    height: 100%;
    background: #0c6ba6;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.single-box .icon {
    display: inline-flex;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 55px;
    background: #004875;
    border-radius: 50%;
    color: #ffff52;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    align-items: center;
    justify-content: center;
}

.single-box .icon i {
    font-size: 20px;
}

.single-box h3 {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 3px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    line-height: 1.2;
}

.single-box:hover {
    -webkit-transform: translateY(-9px);
    transform: translateY(-9px);
    border-color: transparent;
}

.single-box:hover::before {
    opacity: 1;
    visibility: visible;
}

.single-box:hover .icon {
    background: #0682ca;
    color: #ffffff;
}

.single-box:hover h3,
.single-box:hover p {
    color: #fff;
}

/* Karamad Service Page - End */

/* Karamad About Us Page - Start */
.about-area {
    position: relative;
    z-index: 1;
}

.ptb-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.about-image img {
    width: 100%;
    border-radius: 20px;
    margin-bottom: 40px;
}

.about-content .section-title {
    text-align: start;
    margin-bottom: 18px;
}

.section-title h2 {
    margin-bottom: 0;
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 600;
}

.section-title .bar {
    height: 5px;
    width: 90px;
    background: #bfdeef;
    margin: 12px 0;
    position: relative;
    border-radius: 30px;
}

.about-inner-area {
    margin-top: 20px;
}

.our-visions {
    list-style-type: auto;
}

.our-visions li {
    margin-bottom: 8px;
}

.about-inner-area .about-text h3 {
    font-size: 18px;
    margin-bottom: 15px;
}
/* Karamad About Us Page - End */

/* Karamad Contact Us Page - Start */
.contact-info-box {
    text-align: center;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    background: #dcf2ff;
    padding: 30px;
    border-radius: 20px;
    height: 100%;
}
.contact-info-box .icon {
    display: inline-block;
    width: 65px;
    height: 65px;
    line-height: 62px;
    background: #004975;
    border-radius: 50%;
    font-size: 30px;
    color: #ffff58;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}
.contact-info-box h3 {
    font-size: 18px;
    margin: 25px 0 15px;
}
.contact-info-box p {
    margin-bottom: 0;
}

.contact-info-box:hover {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

.contact-info-box:hover .icon {
    color: #fff;
    background: #ffdd59;
}

@media only screen and (max-width: 767px) {
    .contact-info-box {
        padding: 30px 20px;
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact-info-box {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 992px) {
    .contact-info-box {
        height: auto;
    }
}
/* Karamad Contact Us Page - End */

/* Karamad Visit Page - Start */
.single-virtual-visit {
    background-image: url(../img/cta-shape.png);
    background-color: #f8f8f8;
    padding: 30px 8px;
    background-size: auto;
    text-align: center;
    border-radius: 15px;
    margin-bottom: 25px;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.single-virtual-visit .virtual-visit-content h3 {
    font-size: 18px;
    margin-bottom: 10px;
    margin-top: 20px;
}
.karamad-aparat-videos {
    height: 330px;
}
@supports (height: calc-size(auto, size)) {
    .karamad-aparat-videos {
        height: calc-size(auto, size);
    }
}

@media (width < 768px) {
    .karamad-aparat-videos {
        height: 300px;
    }
    @supports (height: calc-size(auto, size)) {
        .karamad-aparat-videos {
            height: calc-size(auto, size);
        }
    }
}
@media (768px < width <= 1024px) {
    .karamad-aparat-videos {
        height: 300px;
    }
    @supports (height: calc-size(auto, size)) {
        .karamad-aparat-videos {
            height: calc-size(auto, size);
        }
    }
}
/* Karamad Visit Page - End */

/* Karamad Internship Page - Start */
.text-personology {
h5 {
    font-size: 18px;
    font-weight: 600;
}
p {
    font-size: 15px;
    line-height: 1.8;
    font-weight: 400;
}
}

.intership-boxx {
    background-color: #f8f8f8;
    padding: 5px 15px;
    height: 150px;
}

.intership-boxx .icon-number {
    background: #d5f3ff;
}

.icon-number {
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff94;
    padding: 5px 12px;
    display: inline-block;
    font-size: 13px;
    border-radius: 10px 0 10px 0;
    color: #004975;
    font-family: inherit !important;
}

.intership-boxx div {
    margin-top: 20px;
    border: 1px dashed #5585a2;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
}

.intership-boxx:hover div {
    border-color: #fff;
}

.intership-boxx div img {
    width: 40px;
}

.intership-boxx span:last-child {
    display: inline-block;
    font-size: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.intership-boxx span:last-child {
    color: #11121f;
}

.intership-boxx:hover span:last-child {
    color: #fff;
}

.karamad-internship-wrapper {
    height: fit-content;
    position: relative;
    /* display: flex;
    flex-direction: column; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 4rem;
    margin-block-end: 20rem;

& > div {
      min-height: 8rem;
      height: fit-content;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      border-inline-start: .5rem solid var(--primary-color);
      padding-inline-start: .5rem;
      gap: 1rem;
      border-radius: 1rem;
      background-color: color-mix(in srgb, var(--primary-color) 3%, #fff 97%);
  }

& > div:nth-child(1) {
      grid-column: 1 / 2;
  }
& > div:nth-child(2) {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
  }
& > div:nth-child(3) {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
  }
& > div:nth-child(4) {
      grid-column: 2 / 3;
      grid-row: 4 / 5;
  }
& > div:nth-child(5) {
      grid-column: 1 / 2;
      grid-row: 5 / 6;
  }
& > div:nth-child(6) {
      grid-column: 2 / 3;
      grid-row: 6 / 7;
  }
& > div:nth-child(7) {
      grid-column: 1 / 2;
      grid-row: 7 / 8;
  }
& > div:nth-child(8) {
      grid-column: 2 / 3;
      grid-row: 8 / 9;
  }

@supports (height: calc-size(calc-size(fit-content, size), size + 2rem)) {
& > div {
    min-height: calc-size(calc-size(fit-content, size), size + 2rem);
    height: calc-size(calc-size(fit-content, size), size + 2rem);
}
}

h3 {
    font-family: "IRANSans", sans-serif !important;
    font-size: 18px;
    font-weight: 600;
}

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
}
}

@media (width <= 768px) {
    .karamad-internship-wrapper {
& > div {
      grid-column: 1 / span 2 !important;
      grid-row: auto / span 1 !important;
      border-radius: 1rem;
      background-color: color-mix(in srgb, #000 3%, #fff 97%);
  }
}
}

/* Karamad Internship Page - End */