/* ✅ mobile: width 320–480 and aspect ≤ 0.5 */
/* ✅ mobile: width 481–1024 and aspect ≤ 0.5 */
/* ✅ mobile: width > 1024 and aspect ≤ 0.5 */

@media 
  (min-width: 320px) and (max-width: 480px) and (max-aspect-ratio: 57/100),
  (min-width: 481px) and (max-width: 1024px) and (max-aspect-ratio: 57/100),
  (min-width: 1025px) and (max-aspect-ratio: 1.12/2) {
  
  body {
    --device-size: mobile;
  }
  
    /* Page1 */

    body #logoFull {
        width: 80%;
    }
    body #normalSlogan {
        font-size: 6vw; 
    }

    /* body[data-size="mobile"] #navbar a:hover {
        color: #11CBCB; 
    } */

    body #menu-icon{
        font-size: 6vw;
        right: 0;
        left: auto; 

    }
    body .icon {
        width: 7.8vw;    
        height: 7vh;  
    }
    #section1{
    background-image: url("../images/mobile_arabic_day.svg");
    }
    body #section2 h1,
    body #section3 h1,
    body #section4 h1 {
        text-align: center;
        /* color: #181360; */
        font-weight: bold;
        padding-top: 4vh;
        font-size: 7vw;
    }
    /* Page2     ->    services   */

    body .container {
        width: 100%;
        height: 99vh;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: #4e4b4b;  */
    }

    body .testimonial {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        /* max-width: 100vw; */
        width: 99%;
        max-height: 100vh;
        height: 90vh;
        padding: 2vh 0;
        overflow: hidden;
        /* background-color: rgb(177, 181, 194);  */
    }
    body .testimonial .slide {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        row-gap: 1vw;

    }
    body .testimonial .slide .image {
        display: flex;
        flex: 1;
        width: 100%;
        align-content: center;
        align-items: center;
        justify-content: center;
        height: 100vh; 
        /* background-color: bisque; */
    }
    body .slide .disc {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        column-gap: 0.4vh; 
        padding: 0vh 3% 0vh 3%;
        overflow-y: auto;

    }
    body .slide .disc p {
        text-align: center; 
        /* padding: 0 50px;*/
        font-size: 4.2vw;
        font-weight: 400;
    }
    body .slide .disc #titleai,
    body .slide .disc #titleapp,
    body .slide .disc #titleui,
    body .slide .disc #titletech{
        font-size: 4.4vw;
    }

    body .testimonial .image1 {
        height: 100%;
        width:100%;
    }

    body .testimonial .image2 {
        height: 100%;
        width: 100%;

    }

    body .testimonial .image3 {
        height: 100%;
        width: 100%;

    }

    body .testimonial .image4 {
        height: 95%;
        width: 90%;
    }
    body .nav-btn{
        display: none;
    }

    /* page3      -> about us   */

    body #section3 {
        height: 100vh;
        width: 99%;
        align-items: center; 
        justify-content: center; 
        padding: 10vh 0 0 0;
        background-size: cover;
        background-position: center;
        background-image: url("../images/mobile_background_sec3.svg");
    }

    body .about-me {
        /* position: relative; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 90%;
        height: 100vh; 
        overflow: hidden;
        /* padding-left: 1vw; */

    }

    body .image-about-me {
        flex: 1;
        display: flex;
        order: 2;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        padding: 0 0 35% 0;
        /* background-color: bisque; */
    }

    body .text_about-me {
        flex: 1;
        order: 1;
        display: flex;
        text-align: center;
        padding: 0 3% 0 3%;
        font-size: 4.2vw;
        line-height: 1.7;
        width:100%;
    }

    body #image2 {
        width:90%;
        height: 80%;
        z-index: 0; 
    }

    body #section4 {
        height: 100vh;
        padding: 10vh 0 10vh 0;
        background-image: url('../images/mobile_background_sec3.svg');
        background-size: cover;
        background-position: center;
        /*direction: rtl;*/
        /*text-align: rtl;*/
    }
    body #section5{
        height: 50%;
    }
    body .container-social-media{
        height: 30%;
    }

    body footer {
        display: flex;
        flex-direction: column;
        row-gap: 10vh;
        height: 100vh;
        align-content:center; 
        align-items: center; 
        justify-content: center;
    }
    body footer p {
        font-size: 5vw;
        font-weight: 500;
    } 
    body .icon-social-media a i {
        color: #ffffff;
        font-size: 4vw;
    }
    body .icon-social-media a i:hover{
        color: #11cbcb;
    }
    body .icon-social-media{
        column-gap: 2vw;
    }
    body .txt{
        flex: 1;
        display: flex;
        order: 2;
        align-items: center;
        justify-items: center;
        justify-content: center;
        color:#fff;
        font-size: 4vw;
    }
    body #image-logo{
        width: 25%;
        height: 100%;
    }
}


/* ✅ tablet2: width 320–480 and 0.5 < aspect < 1 */
/* ✅ tablet2: width 481–1024 and 0.5 < aspect < 1 */
/* ✅ tablet2: width > 1024 and 0.5 < aspect < 1 */
@media 
  (min-width: 320px) and (max-width: 480px) and (min-aspect-ratio: 57/100) and (max-aspect-ratio: 9/10),
  (min-width: 481px) and (max-width: 1024px) and (min-aspect-ratio: 57/100) and (max-aspect-ratio: 9/10),
  (min-width: 1025px) and (min-aspect-ratio: 57/100) and (max-aspect-ratio: 9/10) {
  
  body {
    --device-size: tablet2;
  }
    /* Page1 */

    body #logoFull {
        width: 80%;
    }
    body #normalSlogan {
        font-size:5vw; 
    }

    body #navbar a {
        font-size: 3.5vw;
    }
    body #navbar a:hover {
        color: #11CBCB; /* تغيير اللون عند مرور الفأرة */
    }
    body .icon {
        width: 6.2vw; 
        height: 5vh;   
    }
    body[data-size="tablet2"]  #menu-icon {
        font-size: 5vw;
        right: 0;
        left: auto; 
    }
    #section1{
    background-image: url("../images/tablet_arabic_day.svg");
    }

    body #section2 h1,
    body #section3 h1, 
    body #section4 h1{
        text-align: center;
        /* color: #181360; */
        font-weight: bold;
        /* padding-top: 4vh; */
        font-size: 4.5vw;
    }
    /* Page2     ->    services   */

    body .container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: #4e4b4b;  */
    }

    body .testimonial {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        /* padding: 1vh 0; */
        overflow: hidden;
        /* background-color: rgb(177, 181, 194);  */
    }
    body .testimonial .slide {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        row-gap: 0;
        height: 99%;

    }
    body .testimonial .slide .image {
        display: flex;
        flex: 1;
        width: 100%;
        align-content: center;
        align-items: center;
        justify-content: center;
        /* background-color: bisque; */
    }
    body .slide .disc {
        display: flex;
        flex: 1;
        position: relative;
        /* padding-top: 0; */
        align-items: center;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        row-gap: 1%;
        padding-right: 3%;
        padding-left: 3%;
        overflow-y: auto;
        /* background-color: aqua; */
         

    }
    body .slide .disc p {
        /* text-align: center; */
        font-size: 3.6vw;
        font-weight: 400;
    }
    body .slide .disc #titleai,
    body .slide .disc #titleapp,
    body .slide .disc #titleui,
    body .slide .disc #titletech{
        font-size: 3.8vw;       
    }


    body .testimonial .image1 {
        height: 90%;
        width:90%;
    }

    body .testimonial .image2 {
        height: 100%;
        width: 100%;
    }

    body .testimonial .image3 {
        height: 100%;
        width: 100%;
    }

    body .testimonial .image4 {
        height: 80%;
        width: 70%;
    }
    body .nav-btn{
        display: none;
    }

    /* page3      -> about us   */

    body #section3 {
        height: 100vh;
        width: 100%;
        padding: 10vh 0 0 0;
        background-size: cover;
        background-position: center;
        background-image: url("../images/background_se3_tablet.svg");
    }
    body .about-me {
        /* position: relative; */
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100vh; 
        overflow: hidden;

    }

    body .image-about-me {
        flex: 1;
        display: flex;
        order: 2;
        /* flex-direction: column;  */
        /* align-items: center; 
        justify-content: center; */
        width: 100%;
        height: 100%;
        padding: 0 0 25% 25%;
        /* background-color: rgb(196, 255, 205); */
    }

    body .text_about-me {
        flex: 1;
        order: 1;
        display: flex;
        flex-direction: column;
        /* align-items: center;
        justify-content: center;*/
        text-align: center; 
        font-size: 3.6vw;
        line-height: 1.5;
        width: 95%;
        height: 100%;
        padding: 0 15% 0 15%;
        /* background-color: rgb(202, 83, 32); */
    }

    body #image2 {
        width:80%;
        height: 70%;
    }

    body #section4 {
        height: 100vh;
        padding: 10vh 0 10vh 0;
        background-image: url('../images/background_se3_tablet.svg');
        background-size: cover;
        background-position: center;
        /*direction: rtl;*/
        /*text-align: rtl;*/
    }
    body footer {
        display: flex;
        flex-direction: column;
        row-gap: 10vw;
        height: 100vh;
        align-content:center; 
        align-items: center; 
        justify-content: center;
    }
    body footer p {
        font-size: 4vw;
        font-weight: 500;
    } 
    body .icon-social-media a i {
        color: #ffffff;
        font-size: 4vw;
    }
    body .icon-social-media a i:hover{
        color: #11cbcb;
    }
    body .icon-social-media{
        column-gap: 2vw;
    }
    body .txt{
        flex: 1;
        display: flex;
        order: 2;
        align-items: center;
        justify-items: center;
        justify-content: center;
        color:#fff;
        font-size: 4vw;
    }
    body #image-logo{
        width: 25%;
        height: 100%;
    }

}


/* ✅ square: width 320–480 and aspect 1–1.3 */
/* ✅ square: width 481–1024 and aspect 1–1.3 */
/* ✅ square: width > 1024 and aspect 1–1.5 */
@media 
  (min-width: 320px) and (max-width: 480px) and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 13/10),
  (min-width: 481px) and (max-width: 1024px) and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 13/10),
  (min-width: 1025px) and (min-aspect-ratio: 9/10) and (max-aspect-ratio: 13/10) {
  
  body {
    --device-size: square;
  }
    /* Page1 */

    body #logoFull {
        width:60%;
    }
    body #normalSlogan {
        font-size: 4vw; 
    }   
    body .icon {
        width: 4.3vw;    
        height: 5.8vh;   
    }
    body #menu-icon {
        font-size: 4vw;
        right: 0;
        left: auto; 
    }
    #section1{
        background-image: url("../images/squar_arabic_day.svg")
    }
    body #section2 h1,
    body #section3 h1,
    body #section4 h1 {
        text-align: center;
        /* color: #181360; */
        font-weight: bold;
        /* padding-top: 5vh; */
        font-size: 4vw;
    }
    /* Page2     ->    services   */
    body #section2,
    body #section3,
    body #section4{
        padding: 15vh 0 0 0;
    }

    body .container {
        width: 100%;
        height: 99vh;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: #4e4b4b; */
        
    }

    body .testimonial {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
        /* padding: 3vh 1vw 0vh 1vw; */
        overflow: hidden;
        /*background-color: rgb(177, 181, 194);*/
    }
    body .testimonial .slide .image {
        flex: 1.2;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        align-content: center;
        justify-content: center;
        /* background-color: rgb(5, 19, 37, 0.5); */

    }
    body .testimonial .image1 {
        height: 90%;
        width: 100%;
    }

    body .testimonial .image2 {
        height: 75%;
        width: 120%;
    }

    body .testimonial .image3 {
        height: 100%;
        width: 100%;
    }

    body .testimonial .image4 {
        height: 65%;
        width: 95%;
    }


    body .testimonial .slide {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        /* column-gap: 1vw; */
        height: 95%;

    }

    body .slide .disc {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        column-gap: 0.5vw;
        padding: 0 3% 0 3%;
        height: 100%; 
        width: 100%;
        /* background-color: rgb(255, 228, 196, 0.5); */
    }

    body .slide .disc p {
        text-align: center;
        /* padding: 0 50px;*/
        font-size: 2.3vw;
        font-weight: 400;
    }
    body .slide .disc #titleai,
    body .slide .disc #titleapp,
    body .slide .disc #titleui,
    body .slide .disc #titletech{
        font-size: 2.5vw;
    }

    body .nav-btn {
         display: none;
    }



    /* page3      -> about us   */
    body #section3 {
        height: 100vh;
        background-size: cover;
        background-position: center;
        background-image: url("../images/square_background_sec3.svg");
    }
    body .about-me {

        display: flex;
        flex-direction: row;
        align-items: center;
        width: 99%;
        height: 99%;
        overflow: hidden;
        /* padding: 1vh 1vw 1vh 1vw; */
    }

    body .image-about-me {
        flex: 1;
        display: flex; 
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        height: 100%;
        /* background-color: brown;  */
        /* padding:7vh 0vw 0vh 0vw; */
    }

    body .text_about-me {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0vh 2% 0 1%;
        font-size: 2.3vw;
        line-height: 1.5;
        height: 100%;
    }



    body #image2 {
        width:50vw;
        height: 50vh;
        z-index: 0; 
        /* margin-top: -33%; */
    }



    /* Page4      -> footer  */
    body #section4 {
        height: 100vh;
        background-image: url('../images/square_background_sec3.svg');
        background-size: cover;
        background-position: center;
        /*direction: rtl;*/
        /*text-align: rtl;*/
    }

    body footer {

        display: flex;
        flex-direction: row;
        column-gap: 10vw;
        height: 100vh;
        background-size: cover;
        align-content:center; 
        align-items: center; 
        justify-content: center;
    }

    body footer p {
        font-size: 2.7vw;
    } 

    body .icon-social-media a i {
        color: #ffffff;
        font-size: 2.3vw;
    }
    body .icon-social-media a i:hover{
        color: #11cbcb;
    }
    body .txt{
        flex: 1;
        display: flex;
        order: 2;
        align-items: center;
        justify-items: center;
        justify-content: center;
        color:#fff;
        font-size: 2.2vw;
    }
    body #image-logo{
        width: 15%;
        height: 100%;
    }
}


/* ✅ small_laptop: width 320–480 and aspect > 1.3 */
/* ✅ small_laptop: width 481–1024 and aspect > 1.3 */
/* ✅ small_laptop: width > 1024 and aspect > 1.5 */
@media 
  (min-width: 320px) and (max-width: 480px) and (min-aspect-ratio: 13/10),
  (min-width: 481px) and (max-width: 1024px) and (min-aspect-ratio: 13/10),
  (min-width: 1025px) and (min-aspect-ratio: 13/10) {
  
  body {
    --device-size: small_laptop;
  }
    /* Page1 */

    body #logoFull {
        width: 50%;
    }
    body #normalSlogan {
        font-size: 2.5vw;
    }

    body #navbar a {
        font-size: 1.5vw;
    }
    body #navbar a :hover {
        color: #11CBCB; /* تغيير اللون عند مرور الفأرة */
    }

    body #menu-icon {
        font-size: 2.5vw;
        right: 0;
        left: auto; 
        /* padding-left: 2vw; */
    }

    body .icon {
        width: 3.3vw;    /* ضبط عرض الصورة */
        height: 4.8vh;   /* ضبط ارتفاع الصورة */
    }
    #section1{
        background-image: url("../images/tab_arabic_day.svg");
    }
    body #section2 h1,
    body #section3 h1,
    body #section4 h1 {
        text-align: center;
        /* color: #181360; */
        font-weight: bold;
        padding-top: 4vh;
        font-size: 2.5vw;
    }
    /* Page2     ->    services   */

    body .container {
        width: 100%;
        height: 99vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: #4e4b4b; */
        
    }

    body .testimonial {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
        /* padding: 0 1% 0 1%; */
        overflow: hidden;
        
        /* background-color: rgb(177, 181, 194);  */
    }

    body .testimonial .image1 {
        height: 100%;
        width: 100%;
    }

    body .testimonial .image2 {
        height: 90%;
        width: 110%;
    }

    body .testimonial .image3 {
        height: 100%;
        width: 100%;
    }

    body .testimonial .image4 {
        height: 85%;
        width: 90%;

    }



    body .testimonial .slide .image {
        display: flex;
        flex: 1.2;
        width: 100%;
        height: 100%;
        align-content: center;
        align-items: center;
        justify-content: center;
        /* background-color: rgb(17, 203, 203, 0.6); */
        
    }

    body .testimonial .slide {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        /* background-color: bisque; */
        height: 90%;
    }

    body .slide .disc {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        column-gap: 0.5vw;
        padding: 0 5% 0 5%;
        height: 100%; 
        width: 100%;
        /* background-color: rgba(123, 126, 126, 0.6); */
    

    }

    body .slide .disc p {
        text-align: center;
        /* padding: 0 50px;*/
        font-size: 1.7vw;
        font-weight: 400;
    }
    body .slide .disc #titleai,
    body .slide .disc #titleapp,
    body .slide .disc #titleui,
    body .slide .disc #titletech{
        font-size: 1.9vw;
    }

    /*swiper button css */
    /*swiper button css */
    body .nav-btn {
        height: 6vh;
        width: 2.5vw;
        padding: 0.5vw;
        border-radius: 50%;
        transform: translateY(3vw);
        background-color: rgb(17, 203, 203, 0.3);
        transition: 0.2s;
    }

    body .nav-btn:hover {
        background-color: rgb(17, 203, 203, 0.6);
    }

    body .nav-btn::after,
    body .nav-btn::before {
        font-size: 1vw;
        font-weight: 600;
        color: #051325;
    }

    /* page3      -> about us   */
    body #section3 {
        height: 100vh;
        background-size: cover;
        background-position: center;
        padding: 15vh 0 0 0;
        background-image: url("../images/tab_background_sec3.svg");
    }
    body .about-me {
        display: flex;
        flex-direction: row;
        align-items: center;
        /* max-width: 100vw; */
        width: 99%;
        height: 99%;
        overflow: hidden;
        /* padding: 1vh 1vw 1vh 1vw; */
        /* background-color: rgb(17, 203, 203, 0.6); */
    }

    body .image-about-me {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        /* background-color: rgb(17, 203, 203, 0.6);  */
        /* padding-top: 20vh; */

    }

    body .text_about-me {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0vh 5% 0 5%;
        font-size: 1.7vw;
        line-height: 1.5;
        height: 100%;
        /* background-color: rgb(170, 203, 203, 0.6) */
    }

    body #image2 {
        width:50vw;
        height: 55vh;
        z-index: 0; 
    }


    /* Page4      -> footer  */

    body #section4 {
        height: 100vh;
        background-image: url('../images/tab_background_sec3.svg');
        background-size: cover;
        background-position: center;
        padding-top: 10vh;
        padding-bottom: 20vh;
        /*direction: rtl;*/
        /*text-align: rtl;*/
    }

    body footer {
        display: flex;
        flex-direction: row;
        column-gap: 10vw;
        height: 100vh;
        background-size: cover;
        align-content:center; 
        align-items: center; 
        justify-content: center;
        padding-bottom: 20vw;        
    }

    body footer p {
        font-size: 1.9vw;
    } 
    body .icon-social-media a i {
        color: #ffffff;
        font-size: 1.7vw;
    }
    body .icon-social-media a i:hover{
        color: #11cbcb;
    }
    body .txt{
        flex: 1;
        display: flex;
        order: 2;
        align-items: center;
        justify-items: center;
        justify-content: center;
        color:#fff;
        font-size: 1.7vw;
    }
    body #image-logo{
        width: 15%;
        height: 100%;
    }
}