@font-face {
    font-family: "IranSans";
    font-weight: 400;
    font-display: swap;
    src: url("/Portal_assets/assets/fonts/Vazir.woff") format("woff"),
    url("/Portal_assets/assets/fonts/Vazir.woff") format("woff");
}

body {
    font-family: "IranSans", system-ui, sans-serif;
    font-weight: 400;
    font-size: var(--fs-300);
    color: var(--neutral-900);
    background-color: var(--neutral-000);
    line-height: 1.5;
}

.text-gray {
    color: hsl(0deg 1.98% 27.02%);
}

a {
    color: var(--neutral-1000);
}

a:is(:hover, :focus) {
    color: var(--neutral-500);
}

section {
    padding: clamp(4rem, 10vh, 7rem) clamp(5rem, 19vh, 10rem);
}

@media only screen and (max-width: 1024px) {
    section {
        padding: clamp(1rem, 1vh, 7rem) clamp(1rem, 5vh, 10rem);
    }
}

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

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

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

:root {
    --neutral-000: hsl(0, 0%, 100%);
    --neutral-100: hsl(0, 0%, 96%);
    --neutral-200: hsl(0, 0%, 82.5%);
    --neutral-300: hsl(0, 0%, 70%);
    --neutral-400: hsl(0, 0%, 60%);
    --neutral-500: hsl(0, 0%, 50%);
    --neutral-600: hsl(0, 0%, 40%);
    --neutral-700: hsl(0, 0%, 28%);
    --neutral-800: hsl(0, 0%, 17.5%);
    --neutral-900: hsl(0, 0%, 7.5%);
    --neutral-1000: hsl(0, 0%, 0%);
    --primary-500: hsl(202, 61%, 34%);
    --primary-600: hsl(202, 61%, 44%);
    --accent-400: hsl(36, 99%, 64%);
    --accent-500: hsl(36, 99%, 54%);
    --cyan-500: hsl(180, 100%, 34%);
    --red-500: hsl(354, 82%, 54%);
    --yellow-400: hsl(46, 100%, 64%);
    --yellow-500: hsl(46, 100%, 50%);
    --yellow-600: hsl(46, 100%, 44%);
    --footer-yellow-500: hsl(46, 100%, 62%);
    --footer-yellow-600: hsl(44, 88%, 77%);
    --sky-blue-500: hsl(209, 19%, 68%);
    --fs-900: 2.625rem;
    --fs-800: 2.25rem;
    --fs-750: 1.8rem;
    --fs-700: 1.5rem;
    --fs-650: 1.36rem;
    --fs-600: calc(15px + 0.2vw);
    --fs-400: 1.125rem;
    --fs-350: 1.08rem;
    --fs-300: calc(11px + 0.2vw);
    --fs-200: calc(10px + 0.1vw);
    --fs-100: calc(9px + 0.0vw);
}

@media screen and (min-width: 38em) {
    :root {
        --fs-900: 2.75rem;
        --fs-800: 2.5rem;
        --fs-750: 2.1rem;
        --fs-700: 1.6rem;
        --fs-650: 1.4rem;
        --fs-600: calc(17px + 0.2vw);
        --fs-400: 1.1125rem;
        --fs-350: 1.15rem;
        --fs-300: calc(13px + 0.2vw);
        --fs-200: calc(10px + 0.2vw);
    }
}

@media screen and (min-width: 45em) {
    :root {
        --fs-900: 3.75rem;
        --fs-800: 3rem;
        --fs-750: 2.5rem;
        --fs-700: 1.75rem;
        --fs-650: 1.6rem;
        --fs-600: calc(20px + 0.3vw);
        --fs-400: 1.3125rem;
        --fs-350: 1.25rem;
        --fs-300: calc(14px + 0.3vw);
        --fs-200: calc(13px + 0.2vw);
    }
}

@media screen and (min-width: 103em) {
    :root {
        --fs-900: 4.25rem;
        --fs-800: 3.5rem;
        --fs-750: 2.9rem;
        --fs-700: 2.25rem;
        --fs-650: 2.1rem;
        --fs-600: calc(24px + 0.3vw);
        --fs-400: 1.8125rem;
        --fs-350: 1.75rem;
        --fs-300: calc(18px + 0.3vw);
        --fs-200: calc(17px + 0.2vw);
    }
}

.about {
    width: 93%;
    margin: auto;
    height: min-content;
    /*aspect-ratio: 1;*/
    border-radius: 15px;
    background: #fff;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.25);
}


.accordion {
    width: 100%;
}

.accordion-item {
    padding: 0.8vw 10px;
    margin-bottom: 1rem;
    border-radius: 15px;
    border: 2px solid #b1b1b1;
}

.accordion-header {
    background-color: transparent;
    padding: 10px;
    cursor: pointer;
    display: grid;
    grid-template-columns: 5% 1fr 1fr;
    align-items: center;
}

.accordion-content {
    display: none;
    grid-template-columns: 5% 1fr;
    padding: 10px;
    transform-origin: top;
    animation: contentAnim 0.2s forwards;
}

@keyframes contentAnim {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

.accordion-text {
    grid-column: 2/-1;
    margin: 0;
}

.arrow {
    justify-self: end;
    font-size: var(--fs-200);
    grid-column: 3/-1;
}

.accordion-title {
    grid-column: 2/3;
}

.accordion-circle {
    grid-column: 1/2;
    width: 12px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #fdc100;
}

.benefits {
    padding: 1rem 0 1rem 1rem;
    height: min-content;
    border: 2px solid hsl(0, 0%, 85%);
    border-radius: 10px;

}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    font-family: "IranSans", system-ui, sans-serif;
    font-size: var(--fs-300);
    text-transform: uppercase;
    font-weight: 500;
    padding: 0.75rem 2rem;
    border: 0;
    border-radius: 0.5rem;
    white-space: nowrap;
    transition: 275ms ease;
}

.button[data-type="accent"] {
    background-color: var(--accent-400);
    color: var(--neutral-100);
}

.button[data-type="accent"]:is(:hover, :focus) {
    background-color: var(--accent-500);
    color: var(--neutral-100);
}

.button[data-type="primary"] {
    background-color: var(--accent-400);
    color: var(--neutral-1000);
    font-weight: 700;
}

.button[data-type="primary"]:is(:hover, :focus) {
    background-color: var(--accent-500);
    color: var(--neutral-100);
}

.button[data-type="primary-2"] {
    background-color: var(--accent-400);
    color: var(--neutral-1000);
    padding: 0.5rem 5rem;
    border-radius: 10rem;
}

.button[data-type="primary-2"]:is(:hover, :focus) {
    background-color: var(--accent-500);
    color: var(--neutral-100);
}

.button[data-type="icon"] {
    background-color: var(--cyan-500);
    color: var(--neutral-000);
    border-radius: 10rem;
    padding: 0.5rem 0.5rem;
    font-size: var(--fs-300);
}

.button[data-type="icon"] img {
    width: 30%;
}

.button[data-type="invest-icon"] {
    width: max-content;
    background-color: var(--cyan-500);
    color: var(--neutral-000);
    border-radius: 0.25rem;
    padding: 0.5rem 0.5rem;
    font-size: var(--fs-300);
}

.button[data-type="invest-icon"] img {
    width: clamp(20px, 2vw, 40px);
}

.button[data-type="map"] {
    max-width: 220px;
    height: max-content;
    color: rgba(0, 0, 0, 0.5882352941);
    padding: .6rem .5rem;
    background-color: #d9d9d9;
    border-radius: 20px;
}

.button[data-type="map"]:is(:hover, :focus) {
    background-color: var(--cyan-500);
    color: var(--neutral-000);
}

.button[data-type="detail"] {
    width: max-content;
    background-color: var(--cyan-500);
    color: var(--neutral-000);
    border-radius: 0.25rem;
    padding: 0.9rem 1.7rem;
    font-size: var(--fs-300);
}

@media only screen and (max-width: 945px) {
    .button[data-type="map"] {
        font-weight: 400;
        white-space: break-spaces;
    }
}

@media only screen and (max-width: 605px) {
    .button[data-type="map"] {
        height: unset;
    }
}

.card {
    text-align: right !important;
    display: grid !important;
    justify-items: center !important;
    overflow: hidden !important;
    gap: 0.5rem !important;
    background-color: var(--neutral-000);
    font-family: "IranSans", system-ui, sans-serif;
    color: var(--neutral-900);
    line-height: 1.25;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 1rem;
}

.card__heading {
    font-size: var(--fs-600);
    color: var(--neutral-900);
    font-family: "IranSans", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 700;
    line-height: 1.1;
}

.card[data-type="invest-info"] {
    aspect-ratio: 1;
    border-radius: 30px;
    max-width: 30rem;
    border: 1px solid rgba(173, 169, 187, 0.7);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.card[data-type="invest-info"] p {
    direction: rtl;
    font-size: var(--fs-300);
}

.card[data-type="invest-info"] .card__title {
    width: 100%;
    height: 4rem;
    display: flex;
    place-items: center;
    border-radius: 1rem 1rem 0 0;
    background-color: var(--cyan-500);
    font-size: var(--fs-350);
    font-weight: 350;
    color: var(--neutral-000);
    text-align: center;
    direction: rtl;
    padding: 1rem !important;
    justify-content: center;
}

.card[data-type="invest-info"] .card__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: var(--fs-100);
}

.card[data-type="invest-info"] .card__info p {
    font-size: var(--fs-200);
}

.card[data-type="invest-info"] .card__info-title {
    font-size: var(--fs-400);
    color: var(--red-500);
    font-weight: 500;
    direction: rtl;
}

.card[data-type="invest-info"] .card__info-header {
    font-size: var(--fs-400);
    color: #1C1C1CFF;
    font-weight: bold;
    direction: rtl;
    text-align: center;
    height: 7rem;
}

.card[data-type="invest-info"] .card__button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

.card[data-type="invest-info"] .card__package-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.card[data-type="invest-info"] .card__package-container img {
    height: 3rem !important;
    width: 3rem !important;
}

.card[data-type="sample"] {
    width: clamp(6rem, 12vw, 15rem);
    aspect-ratio: 1/1;
    border-radius: 20px;
}

.card[data-type="sample"]:hover {
    border: 1px solid var(--yellow-500);
}

.card[data-type="sample"]:hover span {
    color: var(--yellow-500);
}

.card[data-type="sample"]:hover img {
    filter: brightness(0) saturate(100%) invert(81%) sepia(29%) saturate(6365%) hue-rotate(5deg) brightness(107%) contrast(106%);
}

.card[data-type="sample"] .card__title {
    font-size: var(--fs-300);
    color: rgba(0, 0, 0, 0.55);
    font-weight: 700;
    text-align: center;
}

.card[data-type="sample"] .card__logo {
    width: 5.5vw;
    aspect-ratio: 1/1;
}

.card[data-type="news"] {
    direction: rtl;
    display: flex !important;
    border-radius: 30px;
    flex-direction: column;
    background-color: #f5f5f5;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    text-align: right;
    aspect-ratio: 10/10;
    height: min-content;
}

.card[data-type="news"] .card__image {
    height: 50%;
}

.card[data-type="news"] .card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card[data-type="news"] .card__text {
    padding: 1rem 2rem;
    font-size: var(--fs-200);
}

.card[data-type="company"] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgba(227, 223, 223, 0.3);
    padding: 1rem 1rem 0 1rem;
}

.card[data-type="company"] .card__title {
    font-size: var(--fs-300);
    font-weight: 700;
}

.card[data-type="company"] .card__bottom {
    padding: 1rem;
    border-top: 2px solid rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.card[data-type="company"] .card__icon {
    width: 2rem;
}

.card[data-type="company"] .card__icon:first-child {
    transform: rotate(180deg);
}

.card[data-type="data"] {
    display: flex!important;
    justify-content: space-between;
    padding-bottom: 1rem;
    box-shadow: none;
    border: 2px solid rgba(0, 0, 0, 0.15);
    flex-direction: row;
}

.card[data-type="data"] .card__container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card[data-type="data"] .card__container:nth-child(1) {
    margin: 1rem;
    gap: 1rem;
}

.card[data-type="data"] .card__container:nth-child(2) {
    align-items: center;
}

.card[data-type="data"] .card__title {
    color: hsla(0, 0%, 28%, 0.898);
    font-weight: 700;
}

.card[data-type="data"] .card__info {
    display: flex;
    gap: 1rem;
    font-weight: 700;
}

.card[data-type="data"] .card__info-title {
    color: hsla(0, 0%, 28%, 0.698);
}

.card[data-type="data"] .card__info-info {
    color: var(--cyan-500);
}

.card[data-type="data"] .card__image {
    width: clamp(155px, 25vw, 400px);
    height: clamp(110px, 12vw, 208px);
}

.card[data-type="data"] .card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card[data-type="statistics"] {
    width: clamp(150px, 23vw, 442px);
    padding: 20px 46px 43px 46px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-radius: 15px;
    background: #f5f5f5;
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.card[data-type="statistics"] .card__static {
    font-size: var(--fs-700);
    color: #00abaa;
    font-weight: 700;
}

.card[data-type="statistics"] .card__text {
    font-size: var(--fs-300);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.7);
}

@media only screen and (max-width: 915px) {
    .card[data-type="statistics"] {
        padding: 1rem;
    }
}

@media only screen and (max-width: 1020px) {
    .card[data-type="statistics"] .card__logo {
        width: clamp(3.5rem, 9vw, 5rem);
    }
}

@media only screen and (max-width: 522px) {
    .card[data-type="company"] .card__bottom {
        flex-direction: column;
        gap: 0;
    }
}

@media only screen and (max-width: 1270px) {
    .card[data-type="invest-info"] {
        aspect-ratio: unset;
    }
}

.carousel {
    font-family: Arial;
    display: block;
    margin: 0 auto;
}

.slick-dots {
    direction: rtl;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    display: flex;
    gap: 3vw;
    padding: 1rem 0;
}

.slick-next,
.slick-prev {
    transition: all 0.1s;
}

.slick-prev:active {
    transform: translate(5px, -50%);
}

.slick-next:active {
    transform: translate(-5px, -50%);
}

[dir="rtl"] .slick-next {
    right: auto;
    left: -25px;
}

.slick-prev::before,
.slick-next::before {
    color: var(--cyan-500);
    font-size: var(--fs-750);
    transition: all 0.1s;
}

.slick-slider {
    direction: ltr;
}

.contact {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    border-radius: 15px;
    border: 2px solid #b1b1b1;
    padding: 1.2rem 10px;
}

.contact__paraph {
    color: #000;
    text-align: right;
    /*font-size: var(--fs-200);*/
    font-size: 1.3rem;
    padding: 2rem 0;
    line-height: 2.3;
}

.contact__icon-phone {
    transform: rotate(-90deg);
}

.contact__address {
    width: max-content;
    max-width: 345px;
}

.contact__container {
    display: flex;
    flex-direction: column;
}

.contact__container img {
    margin-bottom: 0.5vw;
    width: 2.3rem;
}

.contact__title {
    /*font-size: var(--fs-300);*/
    font-size: 1.2rem;
    font-weight: bold;
    color: hsla(0, 0%, 0%, 0.8);
}

.contact__text {
    /*font-size: var(--fs-300);*/
    font-size: 1.1rem;
    color: hsla(0, 0%, 0%, 0.8);
}

.contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    border: 2px solid #b1b1b1;
}

.contact-form__container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 50%;
    padding: 3rem 0;
}

.contact-form__head {
    text-align: center;
    width: 100%;
    padding: 1.3rem 0;
    border-bottom: 1px solid #b1b1b1;
    font-size: var(--fs-200);
}

.contact-form__input {
    width: 50%;
    border-radius: 10px;
    border: 1px solid #b1b1b1;
    font-size: var(--fs-200);
    padding: 15px 14px;
    color: rgba(0, 0, 0, 0.7);
}

.contact-form__input::placeholder {
    color: rgba(0, 0, 0, 0.7);
    font-size: 16px!important;
}

.contact-form__input:focus {
    outline: none;
    border: 1px solid #feb74a;
}

.contact-form__area {
    border-radius: 10px;
    border: 1px solid #b1b1b1;
    padding: 17px 26px;
    color: rgba(0, 0, 0, 0.7);
}

.contact-form__area::placeholder {
    color: rgba(0, 0, 0, 0.7);
    font-size: 16px!important;

}

.contact-form__area:focus {
    outline: none;
    border: 1px solid #feb74a;
}

.contact-form__button {
    width: max-content;
    margin-right: calc(100% - 160px);
    max-width: 233px;
    max-height: 58px;
    border-radius: 10px;
    background: #feb74a;
    display: inline-flex;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    font-size: var(--fs-300);
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.7rem 3rem;
    border: 0;
    white-space: nowrap;
    transition: 275ms ease;
}

.contact-form__button:is(:hover, :focus) {
    background-color: var(--accent-500);
    color: var(--neutral-100);
}

@media only screen and (max-width: 770px) {
    .contact-form__input {
        width: 100%;
    }
}

@media only screen and (max-width: 570px) {
    .contact-form__container {
        width: 95%;
    }
}

@media only screen and (max-width: 606px) {
    .contact__container img {
        width: 2rem;
    }
}

.details__first {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid hsl(0, 0%, 69%);
    padding: 0 1rem 2rem 0;
}

.details__first-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.details__title {
    font-size: 1.5rem;
    font-weight: bold;
    transform: translateX(-45px);
}

.details__type {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.details__type-icon {
    width: 2rem;
}

.details__type-text {
    font-size: 1rem;
}

.details__type-info {
    color: hsla(152, 39%, 47%, 0.7);
}

.details__address {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.details__address-icon {
    width: 2rem;
}

.details__address-address {
    font-size: 1rem;
}

.details__second {
    padding-top: 2rem;
    display: grid;
    grid-template-columns: 55% 5% 40%;
}

.details__second-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.details__second-left {
    grid-column: 3/-1;
    width: 100%;
}

.details__second-explanation {
    display: flex;
    flex-direction: column;
    gap: 1rem;

}

.details__second-paragraph {
    color: hsla(0, 0%, 30%, 0.8);
    font-size: 1rem;
    line-height: 2rem;
}

.details__box {
    padding: 1.2rem;
    display: flex;
    justify-content: space-around;
    gap: 5px;
    align-items: center;
    border: 2px solid hsl(0, 0%, 85%);
    border-radius: 10px;
}

.details__box-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.details__box-line {
    height: 3rem;
    width: 1px;
    background-color: hsl(0, 0%, 69%);
}

.details__box-title {
    color: hsla(0, 0%, 0%, 0.5);
    font-size: 1rem;
    text-align: center;
}

.details__box-info {
    color: var(--cyan-500);
    font-size: 1rem;
    text-align: center;
}

@media screen and (max-width: 570px) {
    .details__first {
        flex-direction: column;
        align-items: unset;
        gap: 1rem;
    }
}

@media screen and (max-width: 880px) {
    .details__second {
        grid-template-columns: 1fr 89vw 1fr;
        row-gap: 1rem;
        justify-content: center;
    }

    .details__second-right {
        grid-column: 1/-1;
    }

    .details__second-left {
        grid-column: 2/3;
    }
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown input[type="text"] {
    padding: 0.5rem 1.5rem;
    border: 2px solid hsl(0, 0%, 69%);
    border-radius: 5px;
    width: 100%;
}

.dropdown input[type="text"]::placeholder {
    color: hsl(0, 0%, 69%);
}

.dropdown input[type="text"]:focus {
    outline: none;
    border: 2px solid var(--cyan-500);
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: hsl(0, 0%, 98%);
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    padding: 12px 16px;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.show {
    cursor: pointer;
    display: block;
    width: 100%;
}

.form {
    display: grid;
}

.form-label {
    color: var(--neutral-900);
    font-family: "IranSans", system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-300);
}

.form-input:not(.button) {
    font-size: var(--fs-300);
    font-weight: 500;
    color: var(--neutral-900);
    background-color: var(--neutral-100);
    padding: 0.75rem;
    border: 3px solid var(--primary-500);
    border-radius: 0.5rem;
}

::placeholder {
    color: var(--primary-500);
    font-weight: 500;
    font-family: "IranSans", system-ui, sans-serif;
}

/*.footer {*/
/*    text-align: right;*/
/*    display: grid;*/
/*    grid-template-columns: 35% 65%;*/
/*    grid-column-gap: 1rem;*/
/*    grid-row-gap: 2rem;*/
/*    padding: 3rem;*/
/*    background-color: var(--sky-blue-500);*/
/*}*/

/*.footer__right {*/
/*    grid-column: 1/2;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 2rem;*/
/*}*/

/*.footer__right-container {*/
/*    width: 70%;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

/*.footer__left {*/
/*    grid-column: 2/-1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 2rem;*/
/*}*/

/*.footer__left-container {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

/*.footer__bottom {*/
/*    padding-top: 2rem;*/
/*    grid-column: 1/-1;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    border-top: 1px solid var(--footer-yellow-500);*/
/*}*/

/*.footer__bottom-text {*/
/*    color: var(--neutral-000);*/
/*    font-size: var(--fs-200);*/
/*}*/

/*.footer__title {*/
/*    margin-bottom: 10px;*/
/*    color: var(--footer-yellow-500);*/
/*    font-size:1.3rem;*/
/*    font-weight: 700;*/
/*}*/

/*.footer__text {*/
/*    color: var(--neutral-000);*/

/*    font-size: 1.15rem!important;*/
/*    font-weight: 600;*/

/*}*/

/*.footer__link {*/
/*    text-decoration: none;*/
/*    !*color: var(--footer-yellow-500);*!*/
/*    color: var(--neutral-000);*/

/*    font-weight: 600;*/
/*    font-size: 1.15rem!important;*/
/*}*/

/*.footer__link:hover {*/
/*    color: var(--footer-yellow-600);*/
/*    font-weight: bolder;*/
/*}*/

/*.footer__icons-container {*/
/*    display: flex;*/
/*    gap: 10px;*/
/*}*/

/*.footer__icon {*/
/*    width: 1.5rem;*/
/*    aspect-ratio: 1/1;*/
/*}*/

.footer {
    text-align: right;
    display: grid;
    grid-template-columns: 35% 25% 40%; /* Updated grid column template */
    grid-column-gap: 1rem;
    grid-row-gap: 2rem;
    padding: 3rem;
    background-color: var(--sky-blue-500);
}

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

.footer__right-container {
    width: 70%;
    display: flex;
    flex-direction: column;
}

.footer__left {
    grid-column: 2/3; /* Updated grid column placement */
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer__left-container {
    width: 70%;  /* Adjusted width to decrease the length size */
    display: flex;
    flex-direction: column;
}

.footer__center {
    grid-column: 3/4; /* Updated grid column placement */
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer__center-container {
    display: flex;
    flex-direction: column;
}

.footer__bottom {
    padding-top: 2rem;
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--footer-yellow-500);
}

.footer__bottom-text {
    color: var(--neutral-000);
    font-size: 1.25rem;
    /*font-size: var(--fs-200);*/
}

.footer__title {
    margin-bottom: 10px;
    color: var(--footer-yellow-500);
    font-size: 1.3rem;
    font-weight: 700;
}

.footer__text {
    color: var(--neutral-000);
    font-size: 0.95rem!important;
    font-weight: 600;
}

.footer__link {
    text-decoration: none;
    color: var(--neutral-000);
    font-weight: 600;
    font-size: 0.95rem!important;
}

.footer__link:hover {
    color: var(--footer-yellow-600);
    opacity: 0.6;
    font-weight: bolder;
}

.footer__icons-container {
    display: flex;
    gap: 10px;
}

.footer__icon {
    width: 1.5rem;
    aspect-ratio: 1/1;
}

.gallery {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 67% 5% 28%;
}

.gallery__main {
    grid-column: 1/-1;
    grid-row: 1/2;
    position: relative;
}

.gallery__main img {
    border-radius: 10px;
    object-fit: cover;
}

.gallery__small--1 {
    grid-column: 1/2;
    grid-row: 3/-1;
}

.gallery__small--1 img {
    border-radius: 10px;
    object-fit: cover;
}

.gallery__small--2 {
    grid-column: 2/3;
    grid-row: 3/-1;
}

.gallery__small--2 img {
    border-radius: 10px;
    object-fit: cover;
}

.gallery__small--3 {
    grid-column: 3/4;
    grid-row: 3/-1;
}

.gallery__small--3 img {
    border-radius: 10px;
    object-fit: cover;
}

.gallery__button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    border-radius: 5px;
    border: none;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    background-color: hsl(0, 0%, 85%);
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.2s;
}

.gallery__button:hover {
    background-color: rgb(201, 201, 201);
}

.modal {
    display: none;
    position: fixed;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
    overflow: auto;
}

.modal .modal-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
}

.modal img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.modal .close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.modal .modal__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
}

.modal .modal__prev {
    left: 15px;
    transition: all 0.2s;
    z-index: 1;

}

.modal .modal__prev:active {
    transform: translateY(-50%) translateX(-5px);
}

.modal .modal__next {
    right: 15px;
    transition: all 0.2s;
    z-index: 1;
}

.modal .modal__next:active {
    transform: translateY(-50%) translateX(5px);
}

.header {
    height: 88vh;
    display: grid;
    grid-template-rows: min-content clamp(3rem, 6vw, 7rem) 1fr;
    background-color: var(--neutral-000);
}

.header__register {
    color: var(--primary-500);
}

.header__register:is(:hover, :focus) {
    color: var(--primary-600);
}

.header__menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
}

@media screen and (min-width: 45em) {
    .header__menu {
        justify-content: space-between;
    }
}

.header__menu-logo {
    width: 7rem;
}

.header__menu-home {
    width: 1.75rem;
}

.header__menu-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header__title {
    background-color: var(--primary-500);
    color: var(--neutral-000);
}

.header__banner {
    position: relative;
    background-image: url("../assets/img/banner.png");
    background-position: center;
    background-size: cover;
}

.header__search {
    position: absolute;
    width: 85%;
    height: 5rem;
    bottom: 0;
    right: 50%;
    transform: translateY(50%) translateX(50%);
    display: flex;
    align-items: center;
    background-color: var(--neutral-000);
    border-radius: 1rem;
}

@media only screen and (max-width: 776px) {
    .header__search {
        position: unset;
        width: 63vw;
        height: 5rem;
        display: flex;
        align-items: center;
        transform: none;
        background-color: transparent;
    }

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

.heading-1 {
    font-size: var(--fs-600);
    color: var(--neutral-000);
    font-family: "IranSans", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 700;
    line-height: 1.1;
}

.heading-2 {
    font-size: var(--fs-400);
    color: hsla(0, 0%, 28%, 0.9);
    font-family: "IranSans", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 700;
    line-height: 1.1;
}

.heading-3 {
    font-size: var(--fs-300);
    color: hsla(0, 0%, 28%, 0.9);
    font-family: "IranSans", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 700;
    line-height: 1.1;
}

.invest {
    display: grid;
    gap: 1rem;
    grid-template-columns: 35% 65%;
}

.invest__image {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

.invest__image img {
    border-radius: 10px;
}

@media only screen and (max-width: 950px) {
    .invest {
        grid-template-columns: unset;
        grid-template-columns: 30% 20% 50%;
        grid-template-rows: 1fr 190px;
        justify-content: center;
    }

    .invest__image {
        width: 246px;
        height: 183px;
        grid-column: 1/-1;
        justify-self: center;
    }

    .invest__card {
        grid-column: 1/-1;
        grid-row: 1/2;
    }
}

.investment {
    display: grid;
    grid-template-columns: 23% 7% 70%;
    margin-top: 1.5rem;
}

.investment__left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-column: 3/-1;
}

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

.investment__right-label {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0.5rem 1.5rem;
    margin-bottom: 1rem;
    background-color: rgba(217, 217, 217, 0.44);
    color: hsla(0, 0%, 28%, 0.6);
    font-weight: 700;
    border-radius: 5px;
}

.investment__right-label img {
    width: 25px;
}

.investment__right-checkbox {
    display: flex;
    gap: 1.5rem;
    color: hsl(0, 0%, 69%);
    align-items: center;
}

.investment__right-checkbox input[type="checkbox"] {
    position: relative;
    cursor: pointer;
    appearance: none;
    width: 20px;
    height: 20px;
    padding: 5px;
    border-radius: 50%;
    border: 2px solid hsl(0, 0%, 69%);
    outline: none;
}

.investment__right-checkbox input[type="checkbox"]:checked {
    background-color: transparent;
}

.investment__right-checkbox input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--cyan-500);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.investment__right-categories {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.investment__right-range {
    display: flex;
    flex-direction: column;
}

.investment__right-range span {
    margin-bottom: 1rem;
}

.investment__right-range-amount {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: 5% 1fr;
    gap: 1rem;
}

.investment__right-range-amount label {
    color: hsl(0, 0%, 69%);
}

.investment__right-range-amount input {
    width: 100%;
    outline: none;
    border: 1px solid hsl(0, 0%, 69%);
    border-radius: 5px;
    padding: 0.5rem 0.7rem;
    color: hsla(0, 0%, 28%, 0.6);
}

.investment__right-range-amount input:focus {
    border: 2px solid var(--cyan-500);
}

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

.investment__cards-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.investment__cards-pagination {
    direction: ltr;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.investment__cards-pagination-number {
    width: clamp(20px, 2vw, 3vw);
    aspect-ratio: 1;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
}

.investment__cards-pagination-number:hover {
    background-color: hsla(163, 37%, 57%, 0.541);
}

.investment__cards-pagination-number--active {
    background-color: hsla(163, 37%, 57%, 0.82);
}

.investment__cards-pagination-right {
    cursor: pointer;
    transition: all 0.2s;
}

.investment__cards-pagination-right img {
    width: 1.3rem;
}

.investment__cards-pagination-right:active {
    transform: translateX(5px);
}

.investment__cards-pagination-left {
    cursor: pointer;
    transition: all 0.2s;
}

.investment__cards-pagination-left img {
    transform: rotate(180deg);
    width: 1.3rem;
}

.investment__cards-pagination-left:active {
    transform: translateX(-5px);
}

.filter-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 50;
}

.filter-icon {
    width: 50px;
    display: none;
    cursor: pointer;
    width: max-content;
    background-color: rgba(217, 217, 217, 0.44);
    color: black;
    border-radius: 0.25rem;
    padding: 0.5rem 0.5rem;
    font-size: var(--fs-300);
    font-weight: 700;
}

.filter-icon img {
    width: 20px;
}

@media screen and (max-width: 715px) {
    .investment__right {
        display: none;
        flex-direction: column;
        text-align: center;
        z-index: 100;
    }

    .investment__right.show-filter {
        display: flex;
        position: absolute;
        right: 0;
        background-color: white;
        padding: 1rem;
        animation: showFilter 0.5s forwards;
        animation-fill-mode: both;
    }

    .filter-icon {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .investment__left {
        grid-column: 1/-1;
    }
}

@keyframes showFilter {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}

.locations {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 1px rgba(71, 71, 71, 0.2);
}

.locations__right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.locations__title {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: var(--fs-300);
    color: hsla(0, 0%, 30%, 0.9);
}

.locations__info {
    color: hsla(0, 0%, 30%, 0.8);
    font-size: 1rem!important;
}

.locations__map {
    width: 40vw;
    max-width: 817px;
    max-height: 518px;
    aspect-ratio: 1/0.7;
    border-radius: 5px;
}

.locations__map img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
}

@media screen and (max-width: 885px) {
    .locations {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .locations__map {
        width: 60vw;
        justify-self: center;
    }

    .locations__left {
        grid-column: 1/-1;
        justify-self: center;
    }
}

.menu-icon {
    display: none;
    cursor: pointer;
}

.nav {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    font-family: "IranSans", system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--fs-300);
}

.nav a {
    text-decoration: none;
    color: var(--neutral-1000);
}

.nav a:is(:hover, :focus) {
    color: var(--primary-500);
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 50;
}

@media only screen and (max-width: 60em) {
    .nav {
        font-size: var(--fs-200);
    }
}

@media screen and (max-width: 870px) {
    .nav {
        display: none;
        flex-direction: column;
        text-align: center;
        z-index: 100;
    }

    .nav.show {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        background-color: hsl(180, 100%, 34%);
        padding: 1rem;
        animation: showMenu 0.5s forwards;
        animation-fill-mode: both;
    }

    .nav.show a {
        color: white;
        font-weight: 700;
        font-size: var(--fs-300);
    }

    .nav.show a:hover {
        transform: scale(1.1);
    }

    .menu-icon {
        display: block;
    }
}

@keyframes showMenu {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

.opportunities__container {
    display: grid;
    justify-items: center;
    gap: var(--grid-gap, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(18.4375rem, 1fr));
}

/*.offers {*/
/*  background: linear-gradient(*/
/*      rgba(126, 126, 126, 0.71),*/
/*      rgba(143, 143, 143, 0.71)*/
/*    ),*/
/*    url("../assets/img/tehran.png");*/
/*  background-position: center;*/
/*  background-repeat: no-repeat;*/
/*  background-size: cover;*/
/*}*/
.offers__title {
    margin-bottom: 1.5rem;
    color: hsla(0, 0%, 28%, 0.9);
    text-align: center;
    font-size: var(--fs-700);
    font-weight: 700;
    line-height: normal;
}

.project {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: 0.8rem;
}

.project .title {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

.project__card {
    padding: 14px 0;
    border: 2px solid hsl(0, 0%, 85%);
    border-radius: 10px;
}

.project__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4px, 1fr));
    gap: 1rem;
}

.project__details-container {
    display: flex;
    /*justify-content: space-evenly;*/
    padding: 0.6rem 0;
    margin-right: 4.5rem;
}

.project__details-right,
.project__details-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project__details-feature {
    display: flex;
    gap: 10px;
    align-items: center;
}

.project__details-feature img {
    width: 1.6rem;
}

.project__details-feature img[src$=".svg"] {
    width: 1.6rem;
    filter: invert(95%) sepia(0%) saturate(1%) hue-rotate(179deg) brightness(93%) contrast(90%);
}

.project__info-box {
    height: min-content;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 3rem 2rem 1rem;
}

.project__info-container {
    display: flex;
    gap: 10px;
}

.project__info-area-value {
    color: var(--cyan-500);
}

.project__info-meter-value {
    color: var(--cyan-500);
}

.project__contact-container {
    padding: 1rem 3rem 1rem 1rem;
    display: flex;
    gap: 4rem;
}

#icon-active {
    filter: invert(46%) sepia(94%) saturate(1597%) hue-rotate(110deg) brightness(96%) contrast(107%);
}

@media screen and (max-width: 520px) {
    .project__contact-container {
        padding: 10px;
        display: grid;
        gap: 5px;
    }
}

.section-sample {
    height: 45vh;
    background-color: var(--sky-blue-500);
}

.search {
    width: 100%;
    padding: 0 1rem;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
}

.select2-container .select2-selection--single {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 45px;
    border-radius: 10px;
}

.select2 {
    flex-grow: 2;
}

.select2-container--default
.select2-selection--single
.select2-selection__placeholder {
    color: rgba(0, 0, 0, 0.3);
}

@media only screen and (max-width: 988px) {
    .select2-container .select2-selection--single {
        font-size: var(--fs-200);
    }
}

@media only screen and (max-width: 825px) {
    .select2-container .select2-selection--single {
        font-size: 12px;
    }
}

@media only screen and (max-width: 776px) {
    .search {
        flex-direction: column;
        gap: 1rem;
    }

    .select2-container {
        width: 100% !important;
    }
}

.select2-container .select2-selection__arrow {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 0 !important;
}

.section-invest {
    padding-bottom: 2rem;
}

@media only screen and (max-width: 1024px) {
    .section-invest {
        padding: clamp(1rem, 10vh, 7rem) clamp(1rem, 5vh, 10rem);
    }
}

@media only screen and (max-width: 780px) {
    .section-invest {
        padding: clamp(1rem, 1vh, 7rem) clamp(1rem, 5vh, 10rem);
    }
}

@media only screen and (max-width: 1024px) {
    .section-investments {
        padding: clamp(1rem, 10vh, 7rem) clamp(1rem, 5vh, 10rem);
    }
}

@media only screen and (max-width: 775px) {
    .section-investments {
        padding: clamp(1rem, 1vh, 7rem) clamp(1rem, 1vh, 10rem);
    }
}

.section-map {
    display: grid;
    grid-template-columns: 30% 70%;
    justify-items: center;
}

.section-map[data-type="ostan"] {
    height: min-content;
    padding: clamp(4rem, 3vh, 7rem) clamp(5rem, 19vh, 10rem);
    padding-top: 0;
}

.section-map__left {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-map__left[data-type="ostan"] {
    direction: ltr;
}

.section-map__left-map {
    width: 100%;
}

.section-map__left-map[data-type="ostan"] {
    justify-self: end;
    width: 70%;
}

.section-map__left-map[data-type="ostan"] img {
    border-radius: 10px;
}

.section-map__right {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
}

.section-map__right-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media only screen and (max-width: 945px) {
    .section-map {
        grid-template-columns: none;
        row-gap: 1rem;
        padding: 1rem;
    }

    .section-map__left {
        grid-row: 1/2;
    }

    .section-map__right-buttons {
        gap: 10px;
    }
}

@media only screen and (max-width: 1250px) {
    .section-map {
        padding: clamp(1rem, 1vh, 7rem) clamp(1rem, 5vh, 10rem);
    }
}

@media only screen and (max-width: 1024px) {
    .section-opportunities {
        padding: clamp(1rem, 10vh, 7rem) clamp(1rem, 5vh, 10rem);
    }
}

@media only screen and (max-width: 740px) {
    .section-opportunities {
        padding: clamp(1rem, 1vh, 7rem) clamp(1rem, 5vh, 10rem);
    }
}

.section-sample {
    height: max-content;
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    row-gap: 1rem;
}

@media only screen and (max-width: 430px) {
    .section-sample {
        padding: 2rem 1rem;
    }
}

.section-slider {
    padding-top: 1rem;
}

@media only screen and (max-width: 776px) {
    .section-statistics {
        padding: 2rem 1rem;
    }
}

.search-form {
    width: 100%;
    display: flex;
    justify-content: space-around;
    gap: var(--flex-gap, 1rem);
    padding: 0 1.75rem;
}

.site-footer {
    background-color: var(--sky-blue-500);
    color: var(--footer-yellow-500);
}

.site-footer a {
    color: var(--neutral-100);
    text-decoration: none;
    font-family: "IranSans", system-ui, sans-serif;
    letter-spacing: 0;
}

.site-footer a:is(:hover, :focus) {
    color: var(--primary-500);
}

.slider {
    display: flex;
    align-items: center;
    direction: ltr;
}

.slider__container {
    width: 100%;
    overflow: hidden;
}

.slider__cards {
    display: flex;
    gap: 1rem;
    padding: 10px;
    transition: transform 0.5s ease-in-out;
}

.slider__card {
    flex: 0 0 32.3%;
}

.slider__button {
    cursor: pointer;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    font-size: 4rem;
    color: var(--cyan-500);
    transition: all 0.2s;
}

.slider__button--next:active {
    transform: translateX(5px);
}

.slider__button--prev:active {
    transform: translateX(-5px);
}

.statistics {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.title__line {
    flex-grow: 1;
    height: 2px;
    background-color: var(--accent-500);
}

.title[data-type="with-line"] {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 1rem;
    color: hsla(0, 0%, 30%, 0.9);
    font-weight: bold;
    font-size: 1rem;
}

.title[data-type="with-line"] div {
    width: 2rem;
    height: 6px;
    background-color: var(--cyan-500);
}

@media screen and (max-width: 520px) {
    .title[data-type="with-line"] {
        margin-bottom: 0;
    }
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.even-columns {
    display: grid;
    gap: var(--grid-gap, 3rem);
    justify-items: center;
}

@media screen and (min-width: 45em) {
    .even-columns {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.flex-column {
    display: flex;
    flex-direction: column;
    gap: var(--gap, 0.5rem);
}

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

.grid-auto-fit {
    display: grid;
    justify-items: center;
    gap: var(--grid-gap, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

.border-radius-1 {
    border-radius: 0.5rem;
}

.border-radius-2 {
    border-radius: 1rem;
}

.box-shadow-1 {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.box-shadow-2 {
    box-shadow: 0px 4px 4px 0px var(--yellow-500);
}

.grid-center {
    display: grid;
    place-items: center;
}

.clr-neutral-000 {
    color: var(--neutral-000);
}

.bg-neutral-000 {
    background-color: var(--neutral-000);
}

.clr-neutral-100 {
    color: var(--neutral-100);
}

.bg-neutral-100 {
    background-color: var(--neutral-100);
}

.clr-neutral-200 {
    color: var(--neutral-200);
}

.bg-neutral-200 {
    background-color: var(--neutral-200);
}

.clr-neutral-300 {
    color: var(--neutral-300);
}

.bg-neutral-300 {
    background-color: var(--neutral-300);
}

.clr-neutral-400 {
    color: var(--neutral-400);
}

.bg-neutral-400 {
    background-color: var(--neutral-400);
}

.clr-neutral-500 {
    color: var(--neutral-500);
}

.bg-neutral-500 {
    background-color: var(--neutral-500);
}

.clr-neutral-600 {
    color: var(--neutral-600);
}

.bg-neutral-600 {
    background-color: var(--neutral-600);
}

.clr-neutral-700 {
    color: var(--neutral-700);
}

.bg-neutral-700 {
    background-color: var(--neutral-700);
}

.clr-neutral-800 {
    color: var(--neutral-800);
}

.bg-neutral-800 {
    background-color: var(--neutral-800);
}

.clr-neutral-900 {
    color: var(--neutral-900);
}

.bg-neutral-900 {
    background-color: var(--neutral-900);
}

.clr-neutral-1000 {
    color: var(--neutral-1000);
}

.bg-neutral-1000 {
    background-color: var(--neutral-1000);
}

.clr-primary-500 {
    color: var(--primary-500);
}

.bg-primary-500 {
    background-color: var(--primary-500);
}

.clr-primary-600 {
    color: var(--primary-600);
}

.bg-primary-600 {
    background-color: var(--primary-600);
}

.clr-accent-400 {
    color: var(--accent-400);
}

.bg-accent-400 {
    background-color: var(--accent-400);
}

.clr-accent-500 {
    color: var(--accent-500);
}

.bg-accent-500 {
    background-color: var(--accent-500);
}

.clr-cyan-500 {
    color: var(--cyan-500);
}

.bg-cyan-500 {
    background-color: var(--cyan-500);
}

.clr-red-500 {
    color: var(--red-500);
}

.bg-red-500 {
    background-color: var(--red-500);
}

.clr-yellow-400 {
    color: var(--yellow-400);
}

.bg-yellow-400 {
    background-color: var(--yellow-400);
}

.clr-yellow-500 {
    color: var(--yellow-500);
}

.bg-yellow-500 {
    background-color: var(--yellow-500);
}

.clr-yellow-600 {
    color: var(--yellow-600);
}

.bg-yellow-600 {
    background-color: var(--yellow-600);
}

.clr-footer-yellow-500 {
    color: var(--footer-yellow-500);
}

.bg-footer-yellow-500 {
    background-color: var(--footer-yellow-500);
}

.clr-footer-yellow-600 {
    color: var(--footer-yellow-600);
}

.bg-footer-yellow-600 {
    background-color: var(--footer-yellow-600);
}

.clr-sky-blue-500 {
    color: var(--sky-blue-500);
}

.bg-sky-blue-500 {
    background-color: var(--sky-blue-500);
}

.container {
    --padding: 1rem *2;
    --max-width: 64rem;
    width: min(100% - var(--padding), var(--max-width));
    margin-inline: auto;
}

.container[data-type="narrow"] {
    --max-width: 40rem;
}

.container[data-type="wide"] {
    --max-width: 75rem;
}

.container[data-type="full-bleed"] {
    --max-width: 100%;
}

.decoration-none {
    text-decoration: none;
}

.flex-group {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--flex-column-gap, 1rem);
    row-gap: var(--flex-row-gap, 0.5rem);
    width: fit-content;
}

.flex-group.mx-auto {
    justify-content: center;
}

.flow > *:where(:not(:first-child)) {
    margin-top: var(--flow-spacer, 1em);
}

.ff-base {
    font-family: "IranSans", system-ui, sans-serif;
}

.ff-accent {
    font-family: "IranSans", system-ui, sans-serif;
}

.fs-900 {
    font-size: var(--fs-900);
}

.fs-800 {
    font-size: var(--fs-800);
}

.fs-750 {
    font-size: var(--fs-750);
}

.fs-700 {
    font-size: var(--fs-700);
}

.fs-650 {
    font-size: var(--fs-650);
}

.fs-600 {
    font-size: var(--fs-600);
}

.fs-400 {
    font-size: var(--fs-400);
}

.fs-350 {
    font-size: var(--fs-350);
}

.fs-300 {
    font-size: var(--fs-300);
}

.fs-200 {
    font-size: var(--fs-200);
}

.fw-regular {
    font-weight: 400;
}

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

.padding-bot-1 {
    padding-bottom: 1rem;
}

.padding-top-bot-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.round {
    border-radius: 50%;
    aspect-ratio: 1/1;
}

.section {
    padding-block: clamp(4rem, 10vh, 7rem) clamp(5rem, 19vh, 10rem);
}

.mx-auto {
    margin-inline: auto;
}

.margin-1 {
    margin: 0.25rem;
}

.margin-block-start-1 {
    margin-block-start: 0.25rem;
}

.margin-block-end-1 {
    margin-block-end: 0.25rem;
}

.margin-block-1 {
    margin-block: 0.25rem;
}

.margin-inline-start-1 {
    margin-inline-start: 0.25rem;
}

.margin-inline-end-1 {
    margin-inline-end: 0.25rem;
}

.margin-inline-1 {
    margin-inline: 0.25rem;
}

.padding-1 {
    padding: 0.25rem;
}

.padding-block-start-1 {
    padding-block-start: 0.25rem;
}

.padding-block-end-1 {
    padding-block-end: 0.25rem;
}

.padding-block-1 {
    padding-block: 0.25rem;
}

.padding-inline-start-1 {
    padding-inline-start: 0.25rem;
}

.padding-inline-end-1 {
    padding-inline-end: 0.25rem;
}

.padding-inline-1 {
    padding-inline: 0.25rem;
}

.margin-2 {
    margin: 0.5rem;
}

.margin-block-start-2 {
    margin-block-start: 0.5rem;
}

.margin-block-end-2 {
    margin-block-end: 0.5rem;
}

.margin-block-2 {
    margin-block: 0.5rem;
}

.margin-inline-start-2 {
    margin-inline-start: 0.5rem;
}

.margin-inline-end-2 {
    margin-inline-end: 0.5rem;
}

.margin-inline-2 {
    margin-inline: 0.5rem;
}

.padding-2 {
    padding: 0.5rem;
}

.padding-block-start-2 {
    padding-block-start: 0.5rem;
}

.padding-block-end-2 {
    padding-block-end: 0.5rem;
}

.padding-block-2 {
    padding-block: 0.5rem;
}

.padding-inline-start-2 {
    padding-inline-start: 0.5rem;
}

.padding-inline-end-2 {
    padding-inline-end: 0.5rem;
}

.padding-inline-2 {
    padding-inline: 0.5rem;
}

.margin-3 {
    margin: 0.75rem;
}

.margin-block-start-3 {
    margin-block-start: 0.75rem;
}

.margin-block-end-3 {
    margin-block-end: 0.75rem;
}

.margin-block-3 {
    margin-block: 0.75rem;
}

.margin-inline-start-3 {
    margin-inline-start: 0.75rem;
}

.margin-inline-end-3 {
    margin-inline-end: 0.75rem;
}

.margin-inline-3 {
    margin-inline: 0.75rem;
}

.padding-3 {
    padding: 0.75rem;
}

.padding-block-start-3 {
    padding-block-start: 0.75rem;
}

.padding-block-end-3 {
    padding-block-end: 0.75rem;
}

.padding-block-3 {
    padding-block: 0.75rem;
}

.padding-inline-start-3 {
    padding-inline-start: 0.75rem;
}

.padding-inline-end-3 {
    padding-inline-end: 0.75rem;
}

.padding-inline-3 {
    padding-inline: 0.75rem;
}

.margin-4 {
    margin: 1rem;
}

.margin-block-start-4 {
    margin-block-start: 1rem;
}

.margin-block-end-4 {
    margin-block-end: 1rem;
}

.margin-block-4 {
    margin-block: 1rem;
}

.margin-inline-start-4 {
    margin-inline-start: 1rem;
}

.margin-inline-end-4 {
    margin-inline-end: 1rem;
}

.margin-inline-4 {
    margin-inline: 1rem;
}

.padding-4 {
    padding: 1rem;
}

.padding-block-start-4 {
    padding-block-start: 1rem;
}

.padding-block-end-4 {
    padding-block-end: 1rem;
}

.padding-block-4 {
    padding-block: 1rem;
}

.padding-inline-start-4 {
    padding-inline-start: 1rem;
}

.padding-inline-end-4 {
    padding-inline-end: 1rem;
}

.padding-inline-4 {
    padding-inline: 1rem;
}

.margin-5 {
    margin: 1.25rem;
}

.margin-block-start-5 {
    margin-block-start: 1.25rem;
}

.margin-block-end-5 {
    margin-block-end: 1.25rem;
}

.margin-block-5 {
    margin-block: 1.25rem;
}

.margin-inline-start-5 {
    margin-inline-start: 1.25rem;
}

.margin-inline-end-5 {
    margin-inline-end: 1.25rem;
}

.margin-inline-5 {
    margin-inline: 1.25rem;
}

.padding-5 {
    padding: 1.25rem;
}

.padding-block-start-5 {
    padding-block-start: 1.25rem;
}

.padding-block-end-5 {
    padding-block-end: 1.25rem;
}

.padding-block-5 {
    padding-block: 1.25rem;
}

.padding-inline-start-5 {
    padding-inline-start: 1.25rem;
}

.padding-inline-end-5 {
    padding-inline-end: 1.25rem;
}

.padding-inline-5 {
    padding-inline: 1.25rem;
}

.margin-6 {
    margin: 1.5rem;
}

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

.margin-block-end-6 {
    margin-block-end: 1.5rem;
}

.margin-block-6 {
    margin-block: 1.5rem;
}

.margin-inline-start-6 {
    margin-inline-start: 1.5rem;
}

.margin-inline-end-6 {
    margin-inline-end: 1.5rem;
}

.margin-inline-6 {
    margin-inline: 1.5rem;
}

.padding-6 {
    padding: 1.5rem;
}

.padding-block-start-6 {
    padding-block-start: 1.5rem;
}

.padding-block-end-6 {
    padding-block-end: 1.5rem;
}

.padding-block-6 {
    padding-block: 1.5rem;
}

.padding-inline-start-6 {
    padding-inline-start: 1.5rem;
}

.padding-inline-end-6 {
    padding-inline-end: 1.5rem;
}

.padding-inline-6 {
    padding-inline: 1.5rem;
}

.margin-7 {
    margin: 1.75rem;
}

.margin-block-start-7 {
    margin-block-start: 1.75rem;
}

.margin-block-end-7 {
    margin-block-end: 1.75rem;
}

.margin-block-7 {
    margin-block: 1.75rem;
}

.margin-inline-start-7 {
    margin-inline-start: 1.75rem;
}

.margin-inline-end-7 {
    margin-inline-end: 1.75rem;
}

.margin-inline-7 {
    margin-inline: 1.75rem;
}

.padding-7 {
    padding: 1.75rem;
}

.padding-block-start-7 {
    padding-block-start: 1.75rem;
}

.padding-block-end-7 {
    padding-block-end: 1.75rem;
}

.padding-block-7 {
    padding-block: 1.75rem;
}

.padding-inline-start-7 {
    padding-inline-start: 1.75rem;
}

.padding-inline-end-7 {
    padding-inline-end: 1.75rem;
}

.padding-inline-7 {
    padding-inline: 1.75rem;
}

.margin-8 {
    margin: 2rem;
}

.margin-block-start-8 {
    margin-block-start: 2rem;
}

.margin-block-end-8 {
    margin-block-end: 2rem;
}

.margin-block-8 {
    margin-block: 2rem;
}

.margin-inline-start-8 {
    margin-inline-start: 2rem;
}

.margin-inline-end-8 {
    margin-inline-end: 2rem;
}

.margin-inline-8 {
    margin-inline: 2rem;
}

.padding-8 {
    padding: 2rem;
}

.padding-block-start-8 {
    padding-block-start: 2rem;
}

.padding-block-end-8 {
    padding-block-end: 2rem;
}

.padding-block-8 {
    padding-block: 2rem;
}

.padding-inline-start-8 {
    padding-inline-start: 2rem;
}

.padding-inline-end-8 {
    padding-inline-end: 2rem;
}

.padding-inline-8 {
    padding-inline: 2rem;
}

.margin-9 {
    margin: 2.5rem;
}

.margin-block-start-9 {
    margin-block-start: 2.5rem;
}

.margin-block-end-9 {
    margin-block-end: 2.5rem;
}

.margin-block-9 {
    margin-block: 2.5rem;
}

.margin-inline-start-9 {
    margin-inline-start: 2.5rem;
}

.margin-inline-end-9 {
    margin-inline-end: 2.5rem;
}

.margin-inline-9 {
    margin-inline: 2.5rem;
}

.padding-9 {
    padding: 2.5rem;
}

.padding-block-start-9 {
    padding-block-start: 2.5rem;
}

.padding-block-end-9 {
    padding-block-end: 2.5rem;
}

.padding-block-9 {
    padding-block: 2.5rem;
}

.padding-inline-start-9 {
    padding-inline-start: 2.5rem;
}

.padding-inline-end-9 {
    padding-inline-end: 2.5rem;
}

.padding-inline-9 {
    padding-inline: 2.5rem;
}

.margin-10 {
    margin: 3rem;
}

.margin-block-start-10 {
    margin-block-start: 3rem;
}

.margin-block-end-10 {
    margin-block-end: 3rem;
}

.margin-block-10 {
    margin-block: 3rem;
}

.margin-inline-start-10 {
    margin-inline-start: 3rem;
}

.margin-inline-end-10 {
    margin-inline-end: 3rem;
}

.margin-inline-10 {
    margin-inline: 3rem;
}

.padding-10 {
    padding: 3rem;
}

.padding-block-start-10 {
    padding-block-start: 3rem;
}

.padding-block-end-10 {
    padding-block-end: 3rem;
}

.padding-block-10 {
    padding-block: 3rem;
}

.padding-inline-start-10 {
    padding-inline-start: 3rem;
}

.padding-inline-end-10 {
    padding-inline-end: 3rem;
}

.padding-inline-10 {
    padding-inline: 3rem;
}

.margin-11 {
    margin: 4rem;
}

.margin-block-start-11 {
    margin-block-start: 4rem;
}

.margin-block-end-11 {
    margin-block-end: 4rem;
}

.margin-block-11 {
    margin-block: 4rem;
}

.margin-inline-start-11 {
    margin-inline-start: 4rem;
}

.margin-inline-end-11 {
    margin-inline-end: 4rem;
}

.margin-inline-11 {
    margin-inline: 4rem;
}

.padding-11 {
    padding: 4rem;
}

.padding-block-start-11 {
    padding-block-start: 4rem;
}

.padding-block-end-11 {
    padding-block-end: 4rem;
}

.padding-block-11 {
    padding-block: 4rem;
}

.padding-inline-start-11 {
    padding-inline-start: 4rem;
}

.padding-inline-end-11 {
    padding-inline-end: 4rem;
}

.padding-inline-11 {
    padding-inline: 4rem;
}

.margin-12 {
    margin: 5rem;
}

.margin-block-start-12 {
    margin-block-start: 5rem;
}

.margin-block-end-12 {
    margin-block-end: 5rem;
}

.margin-block-12 {
    margin-block: 5rem;
}

.margin-inline-start-12 {
    margin-inline-start: 5rem;
}

.margin-inline-end-12 {
    margin-inline-end: 5rem;
}

.margin-inline-12 {
    margin-inline: 5rem;
}

.padding-12 {
    padding: 5rem;
}

.padding-block-start-12 {
    padding-block-start: 5rem;
}

.padding-block-end-12 {
    padding-block-end: 5rem;
}

.padding-block-12 {
    padding-block: 5rem;
}

.padding-inline-start-12 {
    padding-inline-start: 5rem;
}

.padding-inline-end-12 {
    padding-inline-end: 5rem;
}

.padding-inline-12 {
    padding-inline: 5rem;
}

.margin-13 {
    margin: 6rem;
}

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

.margin-block-end-13 {
    margin-block-end: 6rem;
}

.margin-block-13 {
    margin-block: 6rem;
}

.margin-inline-start-13 {
    margin-inline-start: 6rem;
}

.margin-inline-end-13 {
    margin-inline-end: 6rem;
}

.margin-inline-13 {
    margin-inline: 6rem;
}

.padding-13 {
    padding: 6rem;
}

.padding-block-start-13 {
    padding-block-start: 6rem;
}

.padding-block-end-13 {
    padding-block-end: 6rem;
}

.padding-block-13 {
    padding-block: 6rem;
}

.padding-inline-start-13 {
    padding-inline-start: 6rem;
}

.padding-inline-end-13 {
    padding-inline-end: 6rem;
}

.padding-inline-13 {
    padding-inline: 6rem;
}

.margin-14 {
    margin: 8rem;
}

.margin-block-start-14 {
    margin-block-start: 8rem;
}

.margin-block-end-14 {
    margin-block-end: 8rem;
}

.margin-block-14 {
    margin-block: 8rem;
}

.margin-inline-start-14 {
    margin-inline-start: 8rem;
}

.margin-inline-end-14 {
    margin-inline-end: 8rem;
}

.margin-inline-14 {
    margin-inline: 8rem;
}

.padding-14 {
    padding: 8rem;
}

.padding-block-start-14 {
    padding-block-start: 8rem;
}

.padding-block-end-14 {
    padding-block-end: 8rem;
}

.padding-block-14 {
    padding-block: 8rem;
}

.padding-inline-start-14 {
    padding-inline-start: 8rem;
}

.padding-inline-end-14 {
    padding-inline-end: 8rem;
}

.padding-inline-14 {
    padding-inline: 8rem;
}

.margin-15 {
    margin: 10rem;
}

.margin-block-start-15 {
    margin-block-start: 10rem;
}

.margin-block-end-15 {
    margin-block-end: 10rem;
}

.margin-block-15 {
    margin-block: 10rem;
}

.margin-inline-start-15 {
    margin-inline-start: 10rem;
}

.margin-inline-end-15 {
    margin-inline-end: 10rem;
}

.margin-inline-15 {
    margin-inline: 10rem;
}

.padding-15 {
    padding: 10rem;
}

.padding-block-start-15 {
    padding-block-start: 10rem;
}

.padding-block-end-15 {
    padding-block-end: 10rem;
}

.padding-block-15 {
    padding-block: 10rem;
}

.padding-inline-start-15 {
    padding-inline-start: 10rem;
}

.padding-inline-end-15 {
    padding-inline-end: 10rem;
}

.padding-inline-15 {
    padding-inline: 10rem;
}

.margin-16 {
    margin: 12rem;
}

.margin-block-start-16 {
    margin-block-start: 12rem;
}

.margin-block-end-16 {
    margin-block-end: 12rem;
}

.margin-block-16 {
    margin-block: 12rem;
}

.margin-inline-start-16 {
    margin-inline-start: 12rem;
}

.margin-inline-end-16 {
    margin-inline-end: 12rem;
}

.margin-inline-16 {
    margin-inline: 12rem;
}

.padding-16 {
    padding: 12rem;
}

.padding-block-start-16 {
    padding-block-start: 12rem;
}

.padding-block-end-16 {
    padding-block-end: 12rem;
}

.padding-block-16 {
    padding-block: 12rem;
}

.padding-inline-start-16 {
    padding-inline-start: 12rem;
}

.padding-inline-end-16 {
    padding-inline-end: 12rem;
}

.padding-inline-16 {
    padding-inline: 12rem;
}

.margin-17 {
    margin: 14rem;
}

.margin-block-start-17 {
    margin-block-start: 14rem;
}

.margin-block-end-17 {
    margin-block-end: 14rem;
}

.margin-block-17 {
    margin-block: 14rem;
}

.margin-inline-start-17 {
    margin-inline-start: 14rem;
}

.margin-inline-end-17 {
    margin-inline-end: 14rem;
}

.margin-inline-17 {
    margin-inline: 14rem;
}

.padding-17 {
    padding: 14rem;
}

.padding-block-start-17 {
    padding-block-start: 14rem;
}

.padding-block-end-17 {
    padding-block-end: 14rem;
}

.padding-block-17 {
    padding-block: 14rem;
}

.padding-inline-start-17 {
    padding-inline-start: 14rem;
}

.padding-inline-end-17 {
    padding-inline-end: 14rem;
}

.padding-inline-17 {
    padding-inline: 14rem;
}

.margin-18 {
    margin: 15rem;
}

.margin-block-start-18 {
    margin-block-start: 15rem;
}

.margin-block-end-18 {
    margin-block-end: 15rem;
}

.margin-block-18 {
    margin-block: 15rem;
}

.margin-inline-start-18 {
    margin-inline-start: 15rem;
}

.margin-inline-end-18 {
    margin-inline-end: 15rem;
}

.margin-inline-18 {
    margin-inline: 15rem;
}

.padding-18 {
    padding: 15rem;
}

.padding-block-start-18 {
    padding-block-start: 15rem;
}

.padding-block-end-18 {
    padding-block-end: 15rem;
}

.padding-block-18 {
    padding-block: 15rem;
}

.padding-inline-start-18 {
    padding-inline-start: 15rem;
}

.padding-inline-end-18 {
    padding-inline-end: 15rem;
}

.padding-inline-18 {
    padding-inline: 15rem;
}

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

.uppercase {
    text-transform: uppercase;
}

.profile {
    display: flex;
    gap: 1rem;
}

.profile__content {
    flex-grow: 1;
}

.profile__menu {
    width: 28vw;
    padding: 1.5rem;
    border: 1px solid hsl(0, 0%, 69%);
    border-radius: 10px;
    height: fit-content;
}

.profile__menu ul {
    list-style-type: none;
    padding: 0;
}

.profile__menu ul li {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 8px;
    margin-bottom: 5px;
}

.profile__menu ul li img {
    width: 2.9vw;
    min-width: 15px;
    filter: brightness(0) saturate(100%) invert(35%) sepia(0%) saturate(2383%)
    hue-rotate(139deg) brightness(68%) contrast(78%);
}

.profile__menu ul li {
    color: var(--neutral-700);
    transition: background-color 0.3s, color 0.2s;
    border-radius: 10px;
}

.profile__menu ul li:hover {
    background-color: #e2e2e2;
}

.profile__menu ul li.active {
    color: var(--cyan-500);
}

.profile__menu ul li.active > img {
    filter: brightness(0) saturate(100%) invert(41%) sepia(97%) saturate(2054%)
    hue-rotate(151deg) brightness(99%) contrast(101%);
}

.profile__content-item {
    display: none;
}

.profile__content-item.active {
    display: block;
}

.button__edit {
    display: flex;
    gap: 5px;
    color: hsla(0, 0%, 0%, 0.5);
    font-size: var(--fs-200);
    font-weight: 500;
    background-color: hsla(0, 0%, 85%, 0.38);
    transition: all 0.2s;
}

.button__edit:hover {
    background-color: hsla(0, 0%, 85%, 0.6);
}

.button__edit img {
    width: 1.75vw;
}

/********** Form elements **********/
.contact-form__input {
    font-size: calc(10px + 0.1vw);
    font-size: var(--fs-200);
}

.profile-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form__input {
    padding: 15px 14px;
    width: 50%;
    border: 1px solid #b1b1b1;
    border-radius: 10px;
    color: rgba(0, 0, 0, 0.7);
    font-size: calc(10px + 0.1vw);
    font-size: var(--fs-200);
    margin-top: 5px;
}
.form__input::-moz-placeholder {
    color: hsla(0, 0%, 0%, 0.5);
}
.form__input::placeholder {
    color: hsla(0, 0%, 0%, 0.5);
}
.form__input:focus {
    border: 1px solid #feb74a;
    outline: none;
}

.form__area {
    border: 1px solid #b1b1b1;
    border-radius: 10px;
    color: rgba(0, 0, 0, 0.7);
    padding: 17px 26px;
}
.form__area::-moz-placeholder {
    color: hsla(0, 0%, 0%, 0.5);
}
.form__area::placeholder {
    color: hsla(0, 0%, 0%, 0.5);
}
.form__area:focus {
    border: 1px solid #feb74a;
    outline: none;
}

.form__button {
    background: #feb74a;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: calc(11px + 0.2vw);
    font-size: var(--fs-300);
    font-weight: 700;
    line-height: 1;
    max-height: 58px;
    max-width: 233px;
    padding: 0.7rem 3rem;
    -webkit-text-decoration: none;
    text-decoration: none;
    text-transform: uppercase;
    transition: 275ms ease;
    white-space: nowrap;
    width: -moz-max-content;
    width: max-content;
}
.form__button:focus,
.form__button:hover {
    background-color: #fea116;
    background-color: var(--accent-500);
    color: #f5f5f5;
    color: var(--neutral-100);
}

.form-double {
    display: flex;
    gap: 1rem;
}

.form-double-right-big {
    width: 100%;
    display: grid;
    gap: 1rem;
    grid-template-columns: calc(60% - 0.5rem) calc(40% - 0.5rem);
}

.form-double-left-big {
    width: 100%;
    display: grid;
    gap: 1rem;
    grid-template-columns: calc(40% - 0.5rem) calc(60% - 0.5rem);
}

.form__input-100 {
    width: 100%;
    /*height: 2.7rem;*/
}

.form-wide {
    width: 120%;
}

.form-button {
    width: 100%;
    display: flex;
    justify-content: center;
}

.form__tab {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.form__title {
    font-size: var(--fs-350);
    font-weight: 700;
}

.file-upload-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.file-upload {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.file-upload::before {
    content: "";
    background-image: url("../../assets/img/icons/profile/Upload-File.svg");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 2.9vw;
    height: 2.9vw;
}
.file-upload input[type="file"] {
    display: none;
}
.file-upload__info {
    display: flex;
    gap: 10px;
}
.file-name {
    display: none;
    margin-left: 40px;
}
.delete-btn {
    cursor: pointer;
    display: none;
}

.file-upload-text {
    margin-left: 40px;
}

/********** User-Info **********/

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

.user-info__top {
    display: flex;
    gap: 2.3rem;
    align-items: center;
    border: 1px solid hsl(0, 0%, 69%);
    border-radius: 10px;
    padding: 0.1rem 1.5rem;
}

.user-info__top img {
    width: 3.4vw;
    min-width: 15px;
}

.user-info__bot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 2rem 6rem;
    border: 1px solid hsl(0, 0%, 69%);
    border-radius: 10px;
}

/********** User-Info Form **********/

/********** Investment-submit **********/

.investment-submit {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.investment-submit__menu {
    display: flex;
    justify-content: space-around;
}

.investment-submit__button {
    outline: none;
    background-color: hsl(0, 0%, 96%);
    color: hsla(0, 0%, 0%, 0.6);
    font-size: var(--fs-200);
    font-weight: bold;
    padding: 1rem 4.65vw;
}

.investment-submit__button:hover {
    background-color: hsl(0, 0%, 90%);
}

.investment-submit__button.active {
    border: 1px solid hsl(0, 0%, 69%);
}

.investment-submit__content {
    padding: 2rem 6rem;
    border: 1px solid hsl(0, 0%, 69%);
    border-radius: 10px;
}

.error-container {
    color: darkred;
    font-size: 12px;
    padding: 8px;
}