@font-face {
    font-family: "ReadexPro-Regular";
    src: url("../fonts/ReadexPro-Regular.ttf") format("truetype");
    font-weight: 400;
}
@font-face {
    font-family: "ReadexPro-Medium";
    src: url("../fonts/ReadexPro-Medium.ttf") format("truetype");
    font-weight: 500;
}
@font-face {
    font-family: "ReadexPro-SemiBold";
    src: url("../fonts/ReadexPro-SemiBold.ttf") format("truetype");
    font-weight: 600;
}
@font-face {
    font-family: "ReadexPro-Bold";
    src: url("../fonts/ReadexPro-Bold.ttf") format("truetype");
    font-weight: 700;
}
@font-face {
    font-family: "ReadexPro-ExtraLight";
    src: url("../fonts/ReadexPro-ExtraLight.ttf") format("truetype");
}

@media screen and (min-width: 912px) and (max-width: 912px) {
    .logo_avatar_rtl {
        top: -27%;
        right: 80%;
    }
    .logo_avatar_2_rtl {
        top: 22%;
        right: 80%;
    }
    .swiper-slide .image-slide {
        height: 31vh;
    }
    .circul_green {
        right: -14px;
    }
    .circul_white {
        right: -9px;
    }
    .card_one h4,
    .card_two h4,
    .card_three h4 {
        font-size: 12px;
    }
    .text_button {
        margin-inline-start: 245px;
    }
    .card_one p,
    .card_two p,
    .card_three p {
        font-size: 10px;
    }
    .about-hero_screen {
        min-height: 40vh;
    }
    .about-hero_image {
        height: 30rem;
        width: 30rem;
        top: 19rem;
    }
    .about-x {
        height: 2.7rem;
        top: 64.5%;
    }
    .about-y {
        height: 2.7rem;
        top: 60%;
    }
    .about-teal {
        margin-inline: 2rem;
    }
    .about-div {
        bottom: 1;
    }
}

@media screen and (min-width: 540px) and (max-width: 540px) {
    .logo_avatar_rtl {
        top: 50%;
        right: 75%;
    }
    .logo_avatar_2_rtl {
        top: 42%;
        right: 75%;
    }
    .swiper-slide .image-slide {
        height: 126vh;
    }
    .section_avatar {
        padding-inline: 70px;
    }
    .btn_avatar {
        justify-content: center;
        gap: 10px;
    }
    .about-hero_screen {
        min-height: 50vh;
    }
    .about-x {
        height: 1.7rem;
        top: 72.5%;
    }
    .about-teal {
        margin-inline: 1rem;
    }
    .about-y {
        height: 1.7rem;
        top: 59.5%;
    }
    .about-div {
        bottom: 0;
    }
    .services-h1 {
        margin-bottom: 1rem;
    }
    .service-1 {
        top: -30px;
    }
    .service-1-h3 {
        right: 80px;
        top: 100px;
        font-size: 16px;
    }
    .service-1-p {
        right: 0px;
        padding-inline: 60px;
        font-size: 12px;
    }
    .service-2 {
        top: -30px;
    }
    .service-2-h3 {
        right: 50px;
        top: 90px;
        font-size: 16px;
    }
    .service-2-p {
        right: 27px;
        top: 115px;
        padding-inline: 10px;
        font-size: 12px;
    }
    .service-3 {
        top: -30px;
    }
    .service-3-h3 {
        left: 210px;
        top: 90px;
        font-size: 16px;
    }
    .service-3-p {
        right: 35px;
        top: 115px;
        padding-inline: 10px;
        font-size: 12px;
    }
    .service-section-1 {
        height: 100vh;
    }
    /* .service-section-1 div {
        padding-top: 7.5rem;
    } */
    .service-section-1 div h2 {
        margin-top: 3.5rem;
    }
    .service-section-1 div p {
        font-size: 20px;
        margin-top: 10px;
        padding-inline: 10px;
    }
    .star {
        left: 5rem;
        top: 33rem;
    }
}
@media screen and (min-width: 412px) and (max-width: 412px) {
    .logo_avatar_rtl {
        top: 34%;
        right: 77%;
    }
    .logo_avatar_2_rtl {
        top: 41%;
        right: 77%;
    }
    .logo_avatar_ltr {
        top: 34%;
        left: 77%;
    }
    .logo_avatar_2_ltr {
        top: 41%;
        left: 77%;
    }
    .btn_avatar {
        justify-content: center;
        gap: 10px;
    }
    .about-hero_screen {
        min-height: 40vh;
    }
    .about-x {
        height: 1.7rem;
        top: 66.5%;
    }
    .about-y {
        height: 1.7rem;
        top: 56.5%;
    }
    .about-div {
        bottom: 0;
    }
    .service-1 {
        top: -55px;
    }
    .service-1-h3 {
        left: 10px;
    }
    .service-1-p {
        right: 18px;
        padding-inline: 20px;
    }
    .service-2 {
        top: -30px;
    }
    .service-2-h3 {
        left: 160px;
    }
    .service-2-p {
        right: 22px;
    }
    .service-3 {
        top: -25px;
    }
    .service-3-h3 {
        left: 167px;
    }
    .service-3-p {
        right: 25px;
        padding-inline: 7px;
    }
    .star {
        bottom: 10px;
        left: 3rem;
    }
}

@media screen and (min-width: 344px) and (max-width: 344px) {
    .logo_avatar_rtl {
        top: 21%;
        right: 75%;
    }
    .logo_avatar_2_rtl {
        top: 32%;
        right: 75%;
    }
    .logo_avatar_ltr {
        top: 21%;
        left: 75%;
    }
    .logo_avatar_2_ltr {
        top: 32%;
        left: 75%;
    }
    .user-avatar {
        width: 220px;
        height: 220px;
    }
    .user-avatar img {
        width: 130px;
    }
    .btn_avatar {
        justify-content: center;
        gap: 10px;
    }
    .circul_green_rtl {
        right: -14px;
    }
    .circul_white_rtl {
        right: -9px;
    }
    .circul_green_ltr {
        left: -14px;
    }
    .circul_white_ltr {
        left: -9px;
    }
    .card_one h4,
    .card_two h4,
    .card_three h4 {
        font-size: 14px;
    }
    .text_button {
        margin-inline-start: 40px;
    }
    .card_one p,
    .card_two p,
    .card_three p {
        font-size: 12px;
    }
    .about-hero_screen {
        min-height: 50vh;
    }
    .about-hero_image {
        top: 4rem;
    }
    .about-x {
        height: 1.7rem;
        top: 53.5%;
    }
    .about-y {
        height: 1.7rem;
        top: 46%;
    }
    .about-div {
        bottom: 1;
    }
    .about-h2-1 {
        font-size: 24px;
    }
    .about-h2-2 {
        font-size: 20px;
        margin-top: -1rem;
    }
    .service-1 {
        top: -70px;
    }
    .service-1-h3 {
        left: -20px;
    }
    .service-1-p {
        right: 25px;
        font-size: 7px;
    }
    .service-2 {
        top: -40px;
    }
    .service-2-h3 {
        left: 120px;
    }
    .service-2-p {
        right: 20px;
        font-size: 7px;
    }
    .service-3 {
        top: -40px;
    }
    .service-3-h3 {
        left: 127px;
        font-size: 9px;
    }
    .service-3-p {
        right: 23px;
    }
    .service-section-1 {
        height: 50vh;
    }
    /* .service-section-1 div {
        padding-top: 2.5rem;
    } */
    .service-section-1 div h2 {
        font-size: 18px;
        margin-top: -1.5rem;
    }
    .service-section-1 div p {
        font-size: 12px;
        margin-top: 4px;
    }
    .star {
        top: 20rem;
        left: 25px;
    }
}

@media screen and (min-width: 360px) and (max-width: 360px) {
    .logo_avatar_rtl {
        top: 24%;
        right: 75%;
    }
    .logo_avatar_2_rtl {
        top: 33%;
        right: 75%;
    }
    .logo_avatar_ltr {
        top: 24%;
        left: 75%;
    }
    .logo_avatar_2_ltr {
        top: 33%;
        left: 75%;
    }
    .swiper-slide .image-slide {
        height: 105vh;
    }
    .user-avatar {
        width: 220px;
        height: 220px;
    }
    .user-avatar img {
        width: 130px;
    }
    .btn_avatar {
        justify-content: center;
        gap: 10px;
    }
    .circul_green_rtl {
        right: -14px;
    }
    .circul_white_rtl {
        right: -9px;
    }
    .circul_green_ltr {
        left: -14px;
    }
    .circul_white_ltr {
        left: -9px;
    }
    .card_one h4,
    .card_two h4,
    .card_three h4 {
        font-size: 14px;
    }
    .text_button {
        margin-inline-start: 45px;
    }
    .card_one p,
    .card_two p,
    .card_three p {
        font-size: 12px;
    }
    .about-hero_screen {
        min-height: 50vh;
    }
    .about-hero_image {
        top: 4rem;
    }
    .about-x {
        height: 1.7rem;
        top: 64.5%;
    }
    .about-y {
        height: 1.7rem;
        top: 56%;
    }
    .about-div {
        bottom: 1;
    }
    .about-h2-1 {
        font-size: 24px;
    }
    .about-h2-2 {
        font-size: 20px;
        margin-top: -1rem;
    }
    .service-1 {
        top: -65px;
    }
    .service-1-h3 {
        left: -20px;
    }
    .service-1-p {
        right: 25px;
    }
    .service-2 {
        top: -40px;
    }
    .service-2-h3 {
        left: 130px;
    }
    .service-2-p {
        right: 16px;
    }
    .service-3 {
        top: -35px;
    }
    .service-3-h3 {
        left: 132px;
    }
    .service-3-p {
        right: 25px;
        padding-inline: 7px;
    }
    .star {
        bottom: 35px;
        left: 25px;
    }
}
@media screen and (min-width: 430px) and (max-width: 430px) {
    .logo_avatar_rtl {
        top: 38%;
        right: 75%;
    }
    .logo_avatar_2_rtl {
        top: 40%;
        right: 75%;
    }
    .logo_avatar_ltr {
        top: 38%;
        left: 75%;
    }
    .logo_avatar_2_ltr {
        top: 40%;
        left: 75%;
    }
    .btn_avatar {
        justify-content: center;
        gap: 10px;
    }
    .about-hero_screen {
        min-height: 40vh;
    }
    .about-x {
        height: 1.7rem;
        top: 66.5%;
    }
    .about-y {
        height: 1.7rem;
        top: 56.5%;
    }
    .about-div {
        bottom: 0;
    }
    .service-1 {
        top: -50px;
    }
    .service-1-h3 {
        right: 100px;
    }
    .service-1-p {
        right: 18px;
        padding-inline: 25px;
    }
    .service-2 {
        top: -30px;
    }
    .service-2-h3 {
        left: 160px;
    }
    .service-2-p {
        right: 26px;
        padding-inline: 10px;
    }
    .service-3 {
        top: -25px;
    }
    .service-3-h3 {
        left: 167px;
    }
    .service-3-p {
        right: 25px;
        padding-inline: 10px;
    }
    .star {
        bottom: 10px;
        left: 3.5rem;
    }
}
@media screen and (min-width: 390px) and (max-width: 390px) {
    .logo_avatar_rtl {
        top: 32%;
        right: 75%;
    }
    .logo_avatar_2_rtl {
        top: 41%;
        right: 75%;
    }
    .logo_avatar_ltr {
        top: 32%;
        left: 75%;
    }
    .logo_avatar_2_ltr {
        top: 41%;
        left: 75%;
    }
    .swiper-slide .image-slide {
        height: 95vh;
    }
    .btn_avatar {
        justify-content: center;
        gap: 10px;
    }
    .circul_green_rtl {
        right: -14px;
    }
    .circul_white_rtl {
        right: -9px;
    }
    .circul_green_ltr {
        left: -14px;
    }
    .circul_white_ltr {
        left: -9px;
    }
    .card_one h4,
    .card_two h4,
    .card_three h4 {
        font-size: 14px;
    }
    .text_button {
        margin-inline-start: 45px;
    }
    .card_one p,
    .card_two p,
    .card_three p {
        font-size: 12px;
    }
    .about-hero_screen {
        min-height: 50vh;
    }
    .about-hero_image {
        top: 4rem;
    }
    .about-x {
        height: 1.7rem;
        top: 58.5%;
    }
    .about-y {
        height: 1.7rem;
        top: 50%;
    }
    .about-div {
        bottom: 1;
    }
    .about-h2-1 {
        font-size: 24px;
    }
    .about-h2-2 {
        font-size: 20px;
        margin-top: -1rem;
    }
    .service-1 {
        top: -60px;
    }
    .service-1-h3 {
        left: -10px;
    }
    .service-1-p {
        right: 24px;
        padding-inline: 10px;
    }
    .service-2 {
        top: -34px;
    }
    .service-2-h3 {
        left: 152px;
    }
    .service-2-p {
        right: 20px;
        padding-inline: 10px;
    }
    .service-3 {
        top: -30px;
    }
    .service-3-h3 {
        left: 158px;
    }
    .service-3-p {
        right: 20px;
        padding-inline: 10px;
    }
    .star {
        bottom: 10px;
    }
}
@media screen and (min-width: 414px) and (max-width: 414px) {
    .logo_avatar_rtl {
        top: 35%;
        right: 75%;
    }
    .logo_avatar_2_rtl {
        top: 41%;
        right: 75%;
    }
    .logo_avatar_ltr {
        top: 35%;
        left: 75%;
    }
    .logo_avatar_2_ltr {
        top: 41%;
        left: 75%;
    }
    .swiper-slide .image-slide {
        height: 89vh;
    }
    .btn_avatar {
        justify-content: center;
        gap: 10px;
    }
    .about-hero_screen {
        min-height: 40vh;
    }
    .about-x {
        height: 1.7rem;
        top: 66.5%;
    }
    .about-y {
        height: 1.7rem;
        top: 56.5%;
    }
    .about-div {
        bottom: 0;
    }
    .service-1 {
        top: -55px;
    }
    .service-1-h3 {
        left: 0;
    }
    .service-1-p {
        right: 25px;
        padding-inline: 20px;
    }
    .service-2 {
        top: -34px;
    }
    .service-2-h3 {
        left: 152px;
    }
    .service-2-p {
        right: 25px;
    }
    .service-3 {
        top: -30px;
    }
    .service-3-h3 {
        left: 158px;
    }
    .service-3-p {
        right: 25px;
    }
    .star {
        bottom: 10px;
        left: 3rem;
    }
}

@media screen and (min-width: 375px) and (max-width: 375px) {
    .logo_avatar_rtl {
        top: 28%;
        right: 75%;
    }
    .logo_avatar_2_rtl {
        top: 33%;
        right: 75%;
    }
    .logo_avatar_ltr {
        top: 28%;
        left: 75%;
    }
    .logo_avatar_2_ltr {
        top: 33%;
        left: 75%;
    }
    .swiper-slide .image-slide {
        height: 119vh;
    }
    .section_avatar {
        padding-inline: 20px;
    }
    .user-avatar {
        width: 220px;
        height: 220px;
    }
    .user-avatar img {
        width: 130px;
    }
    .btn_avatar {
        justify-content: center;
        gap: 10px;
    }
    .circul_green_rtl {
        right: -14px;
    }
    .circul_white_rtl {
        right: -9px;
    }
    .circul_green_ltr {
        left: -14px;
    }
    .circul_white_ltr {
        left: -9px;
    }
    .card_one h4,
    .card_two h4,
    .card_three h4 {
        font-size: 14px;
    }
    .text_button {
        margin-inline-start: 45px;
    }
    .card_one p,
    .card_two p,
    .card_three p {
        font-size: 12px;
    }
    .about-hero_screen {
        min-height: 57vh;
    }
    .about-hero_image {
        top: 4rem;
    }
    .about-x {
        height: 1.7rem;
        top: 64.5%;
    }
    .about-y {
        height: 1.7rem;
        top: 56%;
    }
    .about-h2-1 {
        font-size: 24px;
    }
    .about-h2-2 {
        font-size: 20px;
        margin-top: -1rem;
    }
    .star {
        bottom: 10px;
    }
}
@media screen and (min-width: 853px) and (max-width: 853px) {
    .logo_avatar_rtl {
        top: -30%;
        right: 80%;
    }
    .logo_avatar_2_rtl {
        top: 22%;
        right: 80%;
    }
    .circul_green_rtl {
        right: -14px;
        top: 1.5rem;
    }
    .circul_white_rtl {
        right: -9px;
        top: 1.9rem;
    }
    .logo_avatar_ltr {
        top: -30%;
        left: 80%;
    }
    .logo_avatar_2_ltr {
        top: 22%;
        left: 80%;
    }
    .circul_green_ltr {
        left: -14px;
        top: 1.5rem;
    }
    .circul_white_ltr {
        left: -9px;
        top: 1.9rem;
    }
    .card_one h4,
    .card_two h4,
    .card_three h4 {
        font-size: 12px;
    }
    .text_button {
        margin-inline-start: 245px;
    }
    .text_pahragraph {
        margin: 0;
    }
    .card_one p,
    .card_two p,
    .card_three p {
        font-size: 10px;
    }
    .about-hero_screen {
        min-height: 40vh;
    }
    .about-hero_image {
        height: 30rem;
        width: 30rem;
        top: 19rem;
    }
    .about-x {
        height: 2.7rem;
        top: 66.5%;
    }
    .about-y {
        height: 2.7rem;
        top: 60%;
    }
    .about-teal {
        margin-inline: 2rem;
    }
    .about-div {
        bottom: 1;
    }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
    .swiper-slide .image-slide {
        height: 41vh;
    }
    .circul_green_rtl {
        right: -14px;
    }
    .circul_white_rtl {
        right: -9px;
    }
    .circul_green_ltr {
        left: -14px;
    }
    .circul_white_ltr {
        left: -9px;
    }
    .card_one h4,
    .card_two h4,
    .card_three h4 {
        font-size: 14px;
    }
    .text_button {
        margin-inline-start: 245px;
    }
    .card_one p,
    .card_two p,
    .card_three p {
        font-size: 12px;
    }
    .about-hero_screen {
        min-height: 55vh;
    }
    .about-hero_image {
        height: 30rem;
        width: 30rem;
        top: 19rem;
    }
    .about-x {
        height: 2.7rem;
        top: 57.5%;
    }
    .about-y {
        height: 2.7rem;
        top: 53%;
    }
    .about-teal {
        margin-inline: 1rem;
    }
    .about-h2-1 {
        font-size: 50px;
    }
    .about-h2-2 {
        font-size: 44px;
    }
    .about-div {
        bottom: 1;
    }
}

@media screen and (min-width: 820px) and (max-width: 820px) {
    .logo_avatar_2_rtl {
        right: 82%;
    }
    .logo_avatar_2_ltr {
        left: 82%;
    }
    .swiper-slide .image-slide {
        height: 36vh;
    }
    .circul_green_rtl {
        right: -14px;
    }
    .circul_white_rtl {
        right: -9px;
    }
    .circul_green_ltr {
        left: -14px;
    }
    .circul_white_ltr {
        left: -9px;
    }
    .card_one h4,
    .card_two h4,
    .card_three h4 {
        font-size: 14px;
    }
    .text_button {
        margin-inline-start: 245px;
    }
    .card_one p,
    .card_two p,
    .card_three p {
        font-size: 12px;
    }
    .about-hero_screen {
        min-height: 50vh;
    }
    .about-hero_image {
        height: 30rem;
        width: 30rem;
        top: 19rem;
    }
    .about-x {
        height: 2.7rem;
        top: 57.5%;
    }
    .about-y {
        height: 2.7rem;
        top: 53%;
    }
    .about-teal {
        margin-inline: 2rem;
    }
    .about-div {
        bottom: 1;
    }
}

@media screen and (min-width: 1024px) and (min-height: 1366px) and (max-width: 1024px) and (max-height: 1366px) {
    .swiper-slide .image-slide {
        height: 39vh;
    }
    .logo_avatar_2_rtl {
        top: 25%;
    }
    .circul_green_rtl {
        right: -14px;
    }
    .circul_white_rtl {
        right: -9px;
    }
    .logo_avatar_2_ltr {
        top: 25%;
    }
    .circul_green_ltr {
        left: -14px;
    }
    .circul_white_ltr {
        left: -9px;
    }
    .card_one h4,
    .card_two h4,
    .card_three h4 {
        font-size: 16px;
    }
    .text_button {
        margin-inline-start: 345px;
    }
    .card_one p,
    .card_two p,
    .card_three p {
        font-size: 14px;
    }
    .left_image,
    .right_image {
        height: 30rem;
    }
    .about-hero_screen {
        min-height: 50vh;
    }
    .about-hero_image {
        height: 40rem;
        width: 30rem;
        top: 25rem;
    }
    .about-x {
        height: 2.7rem;
        top: 66.5%;
    }
    .about-y {
        height: 2.7rem;
        top: 56%;
    }
    .about-teal {
        margin-inline: 1rem;
    }
    .about_card {
        height: 22.7rem;
    }
    .about-card_div_1 {
        padding: 2rem 1rem;
    }
    .about-card_div_2 {
        padding: 1.9rem 0.6rem;
    }
    .about-card_div_3 {
        padding: 1.9rem 0.6rem;
    }
    .about-h2-1 {
        font-size: 70px;
    }
    .about-h2-2 {
        font-size: 60px;
    }
    .about-div {
        bottom: 2rem;
    }
}
:root {
    --swiper-pagination-color: var(--color-secondary);
    --swiper-pagination-bullet-size: 10px;
    --swiper-pagination-bullet-width: 10px;
    --swiper-pagination-bullet-height: 10px;
}