@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Bitter");

/* layouts */
@import url("layouts/grids.css");
@import url("layouts/flex.css");

/* component */
/*=========================================*/
/*================ NAVBAR =================*/
/*=========================================*/
@import url("components/navbars.css");

/*=========================================*/
/*=============== HOME PAGE ===============*/
/*=========================================*/
@import url("components/hero_home.css");
@import url("components/blob.css");
@import url("components/about_section.css");
@import url("components/services.css");
@import url("components/experience.css");
@import url("components/video-card.css");
@import url("components/wave.css");
@import url("components/footer.css");

/*================================================*/
/* ============== Before & After Page ============*/
/*================================================*/
@import url("components/page_header_hero.css");
@import url("components/gender_selector.css");
@import url("components/service_selection.css");
@import url("components/operation_selection_card.css");
@import url("components/operation_slider.css");
@import url("components/no_result.css");

/*=================================================*/
/* =============== Contact Page ================== */
/*=================================================*/
@import url("components/contact_detail.css");
@import url("components/message_form.css");

/*=================================================*/
/* =============== About Page ==================== */
/*=================================================*/
@import url("components/marquee.css");

/*================================================*/
/* ================= Login Page ==================*/
/*================================================*/
@import url("components/authentication_card.css");

/*================================================*/
/* ==================== Table ====================*/
/*================================================*/
@import url("components/table.css");

/* inputs */
@import url("components/forms.css");

/* constants */
@import url("constants/colors.css");
@import url("components/heading.css");

/* persian font */
@font-face {
    font-family: Tanha;
    src: url("../fonts/Tanha.woff") format("woff"),
        url("../fonts/Tanha.woff2") format("woff2"),
        url("../fonts/Tanha.ttf") format("ttf"),
        url("../fonts/Tanha.eot") format("eop");
}

/*=============== WHOLE ===============*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: Tanha, "Spartan", sans-serif;
}

/*=============== REUSABLE CSS CLASSES ===============*/

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

/*=============== PRE SETTING ===============*/
html {
    overflow-x: hidden;
}

.section-p1 {
    padding: 40px 80px;
}

.section-m1 {
    margin: 40px 0;
}

body {
    width: 100%;
    background-color: var(--primary-color);
    color: var(--inverse-primary-color);
}

.btn-n {
    font-size: 16px;
    font-weight: 600;
    padding: 15px 25px;
    margin-left: 10px;
    background-color: #fbc421;
    text-transform: uppercase;
    color: var(--primary-color);
    cursor: pointer;
    border: none;
    border-radius: 5px;
    outline: none;
    transition: 0.2s;
}

.btn-b {
    font-size: 16px;
    font-weight: 600;
    padding: 15px 25px;
    margin-left: 10px;
    background-color: var(--blue);
    text-transform: uppercase;
    color: var(--primary-color);
    cursor: pointer;
    border: none;
    border-radius: 5px;
    outline: none;
    transition: 0.2s;
}

.btn-n:hover {
    background-color: #82d021;
}

.btn-n2 {
    font-size: 13px;
    font-weight: 600;
    padding: 11px 18px;
    margin-left: 10px;
    color: var(--primary-color);
    background-color: transparent;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid var(--primary-color);
    outline: none;
    transition: 0.2s;
}

.btn-b:hover {
    background-color: var(--yellow);
    color: var(--white);
}

.btn-delete:hover {
    background-color: #ec644b;
}

.alert {
    text-align: center;
    margin-bottom: 0;
    border-radius: 0;
}

/*=============== Language selector ===============*/
.language-from {
    display: inline-block;
}

.language-select {
    display: inline-block;
    background-color: transparent;
    border: none;
    color: #e8e7e8;
    font-size: 16px;
    padding: 0px;
}

option {
    border-radius: 5px;
}

/* After & Before Section */

/*================================================*/
/* ============== About Section ==================*/
/*================================================*/

#about-head {
    padding: 10%;
    display: flex;
    align-items: center;
}

#about-head .des {
    width: 45%;
}

#about-head img {
    width: 50%;
    height: auto;
}

#about-head div {
    padding-left: 5%;
}

#more-azimi {
    padding: 0 20%;
    margin: auto;
}

/*=================================================*/
/*=============== STRAT MEDIA QUERY ===============*/
/*=================================================*/

@media (max-width: 799px) {
    .prev,
    .next {
        top: 80%;
    }

    #about {
        flex-direction: column;
    }

    #about .about-img img {
        width: 70vw;
        margin-top: 4rem;
    }

    /* after & before */
    .mySlides img {
        width: 100%;
    }

    .prev,
    .next {
        top: 60%;
        font-size: 12px;
    }

    #comments {
        margin: 0 80px;
    }

    /* Contact Page */

    /* search form */
    .search .search-form {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    /* amal */
    #amal-shoda .amal {
        margin: 15px 27px;
    }
}

@media (max-width: 447px) {
    h2 {
        font-size: 32px;
    }

    #about {
        flex-direction: column;
        gap: 1rem;
        margin: 1rem;
    }

    #about .about-img img {
        width: 85vw;
        margin-top: 2rem;
    }

    .bottom-wave svg {
        height: 50px;
    }

    /* After before page */
    #comments {
        padding: 20px;
        margin: 0 50px;
    }

    /* About Page */

    /* Login Page */

    /* search form */
    .search .search-form {
        grid-template-columns: repeat(auto-fit, minmax(21 0px, 1fr));
    }

    /* .search .search-inputs {
    width: calc(100% / 1 - 20px);
  } */

    /* amal */
    #amal-shoda .amal {
        margin: 15px;
    }

    .section-p1 {
        padding: 40px 50px;
    }
}