*{

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    scroll-behavior: smooth;
}



body{

    direction: rtl;

    font-family: Arial, sans-serif;

    background: linear-gradient(
        135deg,
        #F5F9F8,
        #EAF4F4,
        #FFFFFF
    );

    overflow-x: hidden;
}



/* NAVBAR */

nav{

    position: fixed;

    top: 20px;
    left: 50%;

    transform: translateX(-50%);

    width: 95%;

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 20px 50px;

    background: rgba(255,255,255,0.5);

    backdrop-filter: blur(15px);

    border-radius: 25px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

    z-index: 1000;
}



/* LOGO */

.logo{

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 32px;

    font-weight: bold;

    color: #7FA7A6;
}


.logo img{

    width: 70px;
    height: 70px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #7FA7A6;
}



/* MENU */

nav ul{

    display: flex;

    list-style: none;

    gap: 40px;
}


nav a{

    text-decoration: none;

    color: #2F3E46;

    font-size: 20px;

    transition: 0.3s;
}


nav a:hover{

    color: #7FA7A6;
}



/* SECTIONS */

.section{

    min-height: 100vh;

    padding-top: 150px;
}



/* HERO */

.hero{

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-right: 100px;
    padding-left: 100px;

    position: relative;

    overflow: hidden;
}



/* HERO TEXT */

.hero-text{

    width: 50%;
}


.hero-text h1{

    font-size: 110px;

    color: #7FA7A6;

    margin-bottom: 20px;
}


.hero-text p{

    font-size: 32px;

    line-height: 1.7;

    color: #2F3E46;

    margin-bottom: 40px;
}



/* BUTTON */

.hero button{

    padding: 18px 50px;

    border: none;

    border-radius: 50px;

    background: #7FA7A6;

    color: white;

    font-size: 24px;

    cursor: pointer;

    transition: 0.3s;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}


.hero button:hover{

    transform: scale(1.05);

    background: #6D9695;
}



/* HERO IMAGE */

.hero-image{

    width: 40%;

    display: flex;

    justify-content: center;
}


.hero-image img{

    width: 450px;
    height: 450px;

    border-radius: 50%;

    object-fit: cover;

    border: 5px solid #7FA7A6;

    padding: 20px;

    background: rgba(255,255,255,0.4);

    backdrop-filter: blur(10px);

    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}



/* WAVE */

.wave{

    position: absolute;

    bottom: -120px;
    left: 0;

    width: 100%;
    height: 300px;

    background: #CFE7E6;

    border-radius: 50% 50% 0 0;

    opacity: 0.6;

    z-index: -1;
}



/* SERVICES */

.services{

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 30px;

    flex-wrap: wrap;

    padding-right: 20px;
    padding-left: 20px;
}



/* CARDS */

.card{

    width: 320px;

    padding: 40px 30px;

    border-radius: 30px;

    background: rgba(255,255,255,0.6);

    backdrop-filter: blur(10px);

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

    transition: 0.3s;

    text-align: center;
}


.card:hover{

    transform: translateY(-10px);
}


.card h2{

    color: #7FA7A6;

    margin-bottom: 20px;

    font-size: 32px;
}


.card p{

    color: #5C6B73;

    line-height: 2;

    font-size: 18px;
}



/* ABOUT */

.about{

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 80px;

    padding-right: 100px;
    padding-left: 100px;

    flex-wrap: wrap;
}


.about-image{

    flex: 1;

    display: flex;

    justify-content: center;
}


.about-image img{

    width: 350px;

    border-radius: 50%;

    border: 4px solid #7FA7A6;

    padding: 20px;

    background: rgba(255,255,255,0.5);

    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}


.about-text{

    flex: 1;
}


.about-text h2{

    font-size: 60px;

    color: #7FA7A6;

    margin-bottom: 30px;
}


.about-text p{

    font-size: 24px;

    line-height: 2;

    color: #5C6B73;
}



/* ARTICLES */

.articles{

    text-align: center;

    padding-right: 100px;
    padding-left: 100px;
}


.articles h2{

    font-size: 60px;

    color: #7FA7A6;

    margin-bottom: 60px;
}


.articles-container{

    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;
}


.article-card{

    width: 320px;

    padding: 35px;

    border-radius: 25px;

    background: rgba(255,255,255,0.6);

    backdrop-filter: blur(10px);

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

    transition: 0.3s;
}


.article-card:hover{

    transform: translateY(-10px);
}


.article-card h3{

    color: #7FA7A6;

    margin-bottom: 20px;

    font-size: 28px;
}


.article-card p{

    color: #5C6B73;

    line-height: 2;

    font-size: 18px;
}



/* CONTACT */

.contact{

    text-align: center;

    padding-right: 20px;
    padding-left: 20px;
}


.contact h2{

    font-size: 60px;

    color: #7FA7A6;

    margin-bottom: 20px;
}


.contact p{

    color: #5C6B73;

    font-size: 22px;

    margin-bottom: 40px;
}



/* CONTACT BOX */

/* WHATSAPP CONTACT */

.whatsapp-contact{

    margin-bottom: 50px;
}


.whatsapp-contact a{

    text-decoration:none;

    color:white;

    background:#25D366;

    padding:18px 35px;

    border-radius:50px;

    display:inline-block;

    font-size:22px;

    transition:0.3s;

    box-shadow: 0 10px 25px rgba(37,211,102,0.3);
}


.whatsapp-contact a:hover{

    transform:scale(1.05);
}



/* SOCIALS */

.socials{

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;
}


.socials a{

    text-decoration: none;

    padding: 15px 30px;

    border-radius: 50px;

    background: rgba(255,255,255,0.6);

    color: #2F3E46;

    font-size: 18px;

    transition: 0.3s;

    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}


.socials a:hover{

    background: #7FA7A6;

    color: white;
}
/* QUOTE SECTION */

.quote-section{

    padding: 100px 20px;

    display: flex;

    justify-content: center;
}


.quote-box{

    width: 900px;

    padding: 60px;

    border-radius: 40px;

    text-align: center;

    background: rgba(255,255,255,0.6);

    backdrop-filter: blur(15px);

    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}


.quote-box h2{

    font-size: 55px;

    color: #7FA7A6;

    margin-bottom: 30px;
}


.quote-box p{

    font-size: 34px;

    color: #5C6B73;

    line-height: 2;
}
/* FOOTER */

footer{

    margin-top: 100px;

    background: rgba(255,255,255,0.5);

    backdrop-filter: blur(15px);

    padding: 70px 50px 30px;

    border-top-left-radius: 50px;

    border-top-right-radius: 50px;

    box-shadow: 0 -10px 30px rgba(0,0,0,0.05);
}



/* FOOTER CONTENT */

.footer-content{

    display: flex;

    justify-content: space-between;

    gap: 50px;

    flex-wrap: wrap;
}



/* FOOTER LOGO */

.footer-logo{

    max-width: 350px;
}


.footer-logo img{

    width: 100px;
    height: 100px;

    border-radius: 50%;

    border: 4px solid #7FA7A6;

    margin-bottom: 20px;
}


.footer-logo h2{

    color: #7FA7A6;

    font-size: 40px;

    margin-bottom: 20px;
}


.footer-logo p{

    color: #5C6B73;

    line-height: 2;

    font-size: 18px;
}



/* FOOTER LINKS */

.footer-links,
.footer-socials{

    display: flex;

    flex-direction: column;

    gap: 15px;
}


.footer-links h3,
.footer-socials h3{

    color: #7FA7A6;

    font-size: 30px;

    margin-bottom: 15px;
}


.footer-links a,
.footer-socials a{

    text-decoration: none;

    color: #5C6B73;

    font-size: 18px;

    transition: 0.3s;
}


.footer-links a:hover,
.footer-socials a:hover{

    color: #7FA7A6;
}



/* FOOTER BOTTOM */

.footer-bottom{

    text-align: center;

    margin-top: 60px;

    padding-top: 30px;

    border-top: 1px solid rgba(0,0,0,0.08);

    color: #5C6B73;

    font-size: 18px;
}
/* TEST SECTION */

.test-section{

    padding: 120px 20px;

    text-align: center;
}


.test-section h2{

    font-size: 60px;

    color: #7FA7A6;

    margin-bottom: 20px;
}


.test-description{

    color: #5C6B73;

    font-size: 24px;

    margin-bottom: 50px;
}



/* TEST BOX */

.test-box{

    max-width: 800px;

    margin: auto;

    padding: 50px;

    border-radius: 40px;

    background: rgba(255,255,255,0.6);

    backdrop-filter: blur(15px);

    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}



/* QUESTION */

.question{

    margin-bottom: 40px;

    text-align: right;
}


.question h3{

    color: #2F3E46;

    margin-bottom: 15px;

    font-size: 28px;
}



/* SELECT */

select{

    width: 100%;

    padding: 18px;

    border: none;

    border-radius: 20px;

    background: rgba(255,255,255,0.8);

    font-size: 18px;

    outline: none;
}



/* BUTTON */

.test-box button{

    padding: 18px 40px;

    border: none;

    border-radius: 50px;

    background: #7FA7A6;

    color: white;

    font-size: 22px;

    cursor: pointer;

    transition: 0.3s;

    margin-top: 20px;
}


.test-box button:hover{

    background: #6D9695;

    transform: scale(1.05);
}



/* RESULT */

#result{

    margin-top: 40px;

    font-size: 28px;

    color: #2F3E46;

    line-height: 2;
}
/* DARK MODE BUTTON */

#darkModeBtn{

    border: none;

    width: 55px;
    height: 55px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 24px;

    background: rgba(255,255,255,0.7);

    transition: 0.3s;

    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}


#darkModeBtn:hover{

    transform: scale(1.08);
}



/* DARK MODE */

.dark-mode{

    background: linear-gradient(
        135deg,
        #111827,
        #1F2937,
        #0F172A
    );

    color: white;
}



/* NAVBAR */

.dark-mode nav{

    background: rgba(20,20,20,0.5);
}



/* TEXT */

.dark-mode p,
.dark-mode h3,
.dark-mode a,
.dark-mode li{

    color: #E5E7EB;
}



/* CARDS */

.dark-mode .card,
.dark-mode .article-card,
.dark-mode .quote-box,
.dark-mode .test-box,
.dark-mode .contact-box,
.dark-mode footer{

    background: rgba(30,30,30,0.6);
}



/* SELECT */

.dark-mode select{

    background: rgba(50,50,50,0.8);

    color: white;
}



/* INPUTS */

.dark-mode input,
.dark-mode textarea{

    background: rgba(50,50,50,0.8);

    color: white;
}
/* ICONS */

.service-icon{

    font-size: 55px;

    color: #7FA7A6;

    margin-bottom: 25px;
}



/* SOCIAL ICONS */

.socials a i{

    margin-left: 10px;

    font-size: 20px;
}



/* BUTTON ICONS */

button i,
.whatsapp-contact i{

    margin-left: 10px;
}
/* ========================= */
/* RESPONSIVE DESIGN */
/* ========================= */

@media(max-width: 992px){

    nav{

        padding: 20px;

        flex-direction: column;

        gap: 20px;
    }


    nav ul{

        gap: 20px;

        flex-wrap: wrap;

        justify-content: center;
    }


    .hero{

        flex-direction: column-reverse;

        text-align: center;

        padding-right: 30px;
        padding-left: 30px;

        padding-top: 220px;
    }


    .hero-text,
    .hero-image{

        width: 100%;
    }


    .hero-text h1{

        font-size: 70px;
    }


    .hero-text p{

        font-size: 24px;
    }


    .hero-image img{

        width: 300px;
        height: 300px;

        margin-bottom: 40px;
    }



    /* ABOUT */

    .about{

        flex-direction: column;

        text-align: center;

        padding-right: 30px;
        padding-left: 30px;
    }


    .about-text h2{

        font-size: 45px;
    }


    .about-text p{

        font-size: 20px;
    }


    .about-image img{

        width: 250px;
    }



    /* ARTICLES */

    .articles{

        padding-right: 20px;
        padding-left: 20px;
    }


    .articles h2{

        font-size: 45px;
    }



    /* CONTACT */

    .contact h2{

        font-size: 45px;
    }


    .contact p{

        font-size: 20px;
    }



    /* QUOTE */

    .quote-box{

        width: 100%;

        padding: 40px 25px;
    }


    .quote-box h2{

        font-size: 40px;
    }


    .quote-box p{

        font-size: 24px;
    }



    /* TEST */

    .test-box{

        padding: 35px 20px;
    }


    .test-section h2{

        font-size: 45px;
    }


    .question h3{

        font-size: 22px;
    }



    /* FOOTER */

    .footer-content{

        flex-direction: column;

        text-align: center;

        align-items: center;
    }


    .footer-links,
    .footer-socials{

        align-items: center;
    }

}



/* ========================= */
/* MOBILE */
/* ========================= */

@media(max-width: 600px){

    nav{

        width: 95%;

        top: 10px;

        border-radius: 20px;
    }


    .logo{

        font-size: 24px;
    }


    .logo img{

        width: 55px;
        height: 55px;
    }


    nav ul{

        gap: 12px;
    }


    nav a{

        font-size: 16px;
    }



    /* HERO */

    .hero{

        padding-top: 250px;
    }


    .hero-text h1{

        font-size: 50px;
    }


    .hero-text p{

        font-size: 20px;
    }


    .hero button{

        width: 100%;

        font-size: 20px;
    }


    .hero-image img{

        width: 220px;
        height: 220px;
    }



    /* SERVICES */

    .card{

        width: 100%;
    }



    /* ABOUT */

    .about-text h2{

        font-size: 38px;
    }


    .about-text p{

        font-size: 18px;
    }



    /* ARTICLES */

    .article-card{

        width: 100%;
    }



    /* ARTICLE PAGE */

    .article{

        padding: 180px 20px 80px;
    }


    .article h1{

        font-size: 40px;
    }


    .article p{

        font-size: 18px;
    }


    .article h2{

        font-size: 30px;
    }


    .article-image{

        height: 250px;
    }



    /* CONTACT */

    .socials{

        flex-direction: column;
    }


    .socials a{

        width: 100%;
    }



    /* TEST */

    .test-section h2{

        font-size: 38px;
    }


    .test-description{

        font-size: 18px;
    }


    .test-box button{

        width: 100%;
    }



    /* QUOTE */

    .quote-box h2{

        font-size: 32px;
    }


    .quote-box p{

        font-size: 20px;
    }



    /* FOOTER */

    footer{

        padding: 50px 20px 20px;
    }


    .footer-logo h2{

        font-size: 30px;
    }


    .footer-links h3,
    .footer-socials h3{

        font-size: 24px;
    }

}