@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');

* {
    box-sizing: border-box;
    transition: all .5s .0s ease;
    text-decoration: none;
    font-family: 'Vazirmatn';
}

body {
    background-color: #615f5f;
    margin: 0;
    padding: 0;
    direction: rtl;
    overflow-x: hidden;
}

p {
    font-size: 22px;
}

h2 {
    font-size: 30px;
}

a {
    font-size: 25px;
    color: #000;
}

.container {
    margin: 0 auto;
    width: 1600px;
}

.container-fluide {
    margin: 0 auto;
    width: 1900px;
}

header {
    background-color: #fff;
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    box-shadow: #000 0px 0px 20px 1px;
    border-radius: 0px 0px 10% 10%;
}

header .menu {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

header .menu_t h2 {
    position: absolute;
    left: calc(50% - 31rem);
    top: calc(0% + -5px);
}

header .menu_t span {
    display: none;
    background-color: #ccc;
    position: absolute;
    top: 10px;
    padding: 5px;
    border-radius: 50%;
    left: 390px;
    text-align: center;
}

header .menu .menu_o ul li {
    display: inline-block;
    margin-left: 40px;
    font-size: 25px;
}

header .menu .logo h2 {
    padding: 0;
    margin: 0;
}

header .menu .logo h2 span {
    color: #8a8c8a;
}

header .menu .logo h2 a {
    color: #000;
    font-size: 60px !important;
}

header .menu .menu_o ul li:hover {
    text-shadow: 0px 0px 20px #000000;
}

header .menu .menu_t i {
    font-size: 50px;
}

@media(min-width:1048px) {
    header .bx-menu {
        display: none;
    }
}

.background-m {
    background-color: #0000004d;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.background-m {
    display: none;
}

.background-m.active {
    display: inline;
}

.modal {
    margin: 0 auto;
    margin-top: 12rem;
    background-color: #ccc;
    width: 50%;
    padding: 30px;
    min-height: 500px;
}

.modal i {
    font-size: 2.5rem;
}

.modal .text-log {
    margin-top: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 5rem;
    align-items: center;
    width: 100%;
}

.accept {
    background-color: #176117;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
}

.modal button[type=submit] {
    border: none;
    background-color: #008000;
    font-size: 1.7rem;
    border-radius: .5rem;
    color: #fff;
}

.modal .pass a {
    margin-top: 20px;
}

.modal .pass p {
    margin-top: 45px;
}

.modal button[type=submit]::before {
    position: absolute;
    content: '';
    text-align: center;
    display: inline-block;
    background-color: #333;
    width: 0;
    height: 3px;
    transition: all .2s .0s ease;
}

.modal button:hover::before {
    width: 4.2%;
}

.modal input,
.modal button {
    margin-top: 1rem;
}

.modal input {
    padding: .5rem;
    font-size: 1rem;

}

.background {
    background: linear-gradient(to bottom, transparent, #000), url(../image/background_main.png);
    background-size: cover;
    height: 700px;
    filter: blur(3px);
}

.background-main {
    position: relative;
}

.background-main .text-bg {
    position: absolute;
    top: calc(600px - 50%);
    left: 0;
    right: 0;
    color: #fff !important;
    margin-top: -50px;
    text-align: center;
}

.background-main .text-bg h2 {
    margin: 0;
}

.background-main .text-bg a,
.button-bg-black {
    color: #000;
    padding: 10px;
    font-size: 25px;
    background-color: #ffffff;
    border-radius: 8px;
}

.background-main .text-bg a:hover,
.button-bg-black:hover {
    background-color: #8a8c8a;
    border-radius: 11px;
}

.background-main .text-bg h2 {
    font-size: 4rem;
}

.boxes {
    margin-top: 40px;
}

.boxes .title {
    color: #fff;
}

.button-course {
    border: #000 solid 3px;
    padding: 6px;
    border-radius: 12px;
    margin-left: 10px;
}

.button-s-course {
    border: none;
    padding: 6px;
    border-radius: 12px;
    margin-left: 10px;
}

.button-course:hover,
.button-s-course:hover {
    border: #6c4949 solid 3px;
    background-color: #6c4949;
    color: #fff;
}

.boxes .box {
    background-color: #fff;
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
    border-radius: 50px 15px 50px 15px;
    min-height: 450px;
}

.box .text-box {
    position: relative;
    margin-right: 10px;
}

.box .text-box .i-shoppingy {
    display: inline-block;
    position: absolute;
    margin-right: 20px;
    margin-top: -10px;
}

.box .text-box .i-shoppingy::before {
    content: "";
    display: inline-block;
    background-color: #000;
    width: 5px;
    height: 40px;
    position: absolute;
    margin-top: 10px;
    margin-right: -20px;
}

.box .text-box .i-shoppingy i {
    font-size: 50px !important;
    cursor: pointer;
}

.box .img-box img {
    width: 300px;
    object-fit: cover;
    border-radius: 25px;
}

.boxes .box button {
    border: none;
    background: transparent;
}

.background-sidebar {
    background: url(../image/background-sidebar.png) no-repeat;
    background-size: cover;
    height: 800px;
    margin-top: 50px;
    filter: blur(10px);
}

.box .custom-img img {
    border-radius: 100px;
    width: 150px;
}

.back-sidebar {
    position: relative;
}

.parent-box {
    display: flex;
    text-align: center;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    border-radius: 30px 0 30px 0;
    position: absolute;
    height: 500px;
    top: calc(50% - 200px);
    left: 0;
    right: 0;
}

.parent-box .box {
    width: 25%;
    background-color: #fff;
    padding: 25px;
    border-radius: 30px 0 30px 0;
    border-top: 10px solid #8a8c8a;
    cursor: pointer;
}

.parent-box .box:hover {
    transform: translateY(-10px);
    box-shadow: #fff 0px 0px 20px 3px, #fff 0px 0px 20px 6px;
    background: linear-gradient(to top, #2b2b2b, #fff);
    perspective: 2500px;
    color: #fff;
}

.custom-h2 {
    text-align: center;
    font-size: 50px;
    color: #fff;
}

.pos-h2-custom {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 2;
}

.justify-around {
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;
}

.info {
    margin-top: 100px;
    background-color: #00cdde;
    padding: 50px;
    border-radius: 30% 5rem 30% 5rem;
}

.info .box {
    padding: 20px;
    border: #3b3434 solid 4px;
    min-width: 300px;
    border-radius: 250px;
}

.info .box:hover {
    background-color: #f9f9f9;
    box-shadow: #f9f9f9 0px 0px 20px 10px;
}

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    text-align: center;
    margin-top: 30px;
    gap: 20px;
}

.subjects h2 {
    color: #fff;
    font-size: 30px;
}

.grid .box {
    background-color: #d1d0d0;
    border-radius: 30px 0px 30px 0px;
    margin: 0 auto;
    width: 250px;
    padding: 15px;
}

.grid .box:hover {
    box-shadow: #000000 0px 0px 20px 5px;
}

.teachers {
    margin-top: 100px;
}

.teachers h2 {
    color: #fff;
}

.teachers .flex-wrap-c img {
    width: 200px;
    object-fit: cover;
    border-radius: 300px;
    padding: 6px;
    background-color: #00cdde;
}

.flex-wrap-c {
    display: flex;
    flex-direction: column;
}

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

.flex-AI {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.teachers button {
    background: transparent;
    border: none;
    cursor: pointer;
}

.teachers {
    position: relative;
}

.teachers .box-tech {
    visibility: hidden;
    transition: left .2s 0s ease;
    position: absolute;
    left: -100%;
    flex-direction: row;
    text-align: center;
    background-color: #fff;
    min-width: 1300px;
    padding: 30px;
    border-radius: 30px 0 30px 0;
}

.teachers .box-tech .text-teach h2 {
    color: #000;
}

.teachers .box-tech .text-teach {
    min-width: 600px;
    line-height: 50px;
}

.teachers .box-tech .text-teach a {
    background-color: #2b2b2b;
    color: #FFF;
    padding: 10px;
    border-radius: 20px;
}

.teachers .box-tech .text-teach a:hover {
    background-color: #6c5d5d;
}

.teachers .box-tech img {
    width: 512px;
}

.box.show {
    visibility: visible;
    display: flex;
    left: 0%;
}

.active {
    border: #000 solid 6px;
}

.aboutU {
    background-color: #2b2b2b;
    margin-top: 200px;
    border-radius: 400px 40% 500px 50%;
    animation: 2s infinite alternate side-in;
    color: #fff;
}

@keyframes side-in {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(20px);
    }
}

.input {
    max-width: 190px;
    padding: 0.875rem;
    font-size: 1rem;
    border: 1.5px solid #000;
    border-radius: 0.5rem;
    box-shadow: 2.5px 3px 0 #000;
    outline: none;
    transition: ease 0.25s;
}

.input:focus {
    box-shadow: 5.5px 7px 0 black;
}

.styButton {
    border: none;
    background-color: #FFF;
    padding: 6px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
}

.aboutU .text-about h2 {
    font-size: 5.5rem;
}

.justify-no-c {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

footer {
    margin-top: 200px;
    background-color: #333;
    border-radius: 50px 50px 0 0;
    padding: 30px;
}

footer .box a {
    color: #fff;
}

footer .box a:hover {
    color: #8a8c8a;
}

footer .box h2 {
    color: #ccc;
}

footer .box textarea {
    min-width: 400px;
    padding: 0.875rem;
    font-size: 1rem;
    border: 1.5px solid #000;
    border-radius: 0.5rem;
    box-shadow: 2.5px 3px 0 #000;
    outline: none;
    transition: ease .25s;
}

footer .box textarea:focus {
    box-shadow: 5.5px 7px 0 black;
}

footer .box .social {
    margin-top: 50px;
}

footer .box .social img {
    border-radius: 50px;
    background-color: #fff;
    padding: 10px;
    width: 60px;
}

footer .box .social img:hover {
    background-color: #b1e1b6;
    transform: rotateY(180deg);
}

@media(min-width: 728px)  (max-width: 998px){
    header .bx-menu {
        cursor: pointer !important;
    }

    header {
        background: #fff;
    }

    header .menu {
        position: absolute;
        display: block;
        width: 45%;
        right: -25rem;
        top: 4rem;
        z-index: 55;
        background-color: #fff;
        text-align: right;
        padding: 2rem;
        border-radius: 2.5rem 0 0 2.5rem;
    }

    .active {
        right: 0 !important;
    }

    header .menu .menu-t {
        display: flex;
        flex-wrap: wrap;
    }

    .boxes h2.title {
        text-align: right;
    }

    .boxes {
        text-align: center;
        margin: 0 auto;
    }

    .boxes .box {
        max-width: 43%;
        text-align: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap !important;
    }
}