* {
    margin: 0;
    padding: 0;
}

.header{
    background-color: rgb(50, 51, 51);
    display: flex;
    justify-content: space-between;
    border-radius: 30px;
    box-shadow: 0  10px 25px  4px rgba(0, 0, 0, 0.397); 
}

.main {
    margin: 10px;   
}

body {
    background: linear-gradient(to right, purple, blue, cyan);
    background-size: 300% 100%;
    animation: bg 15s ease infinite;
} 

/* ================================================ */


@keyframes bg{
    0% { background-position: 0% 50%;}
    50% { background-position: 100% 100%;}
    100% { background-position: 0% 50%;}
}


/* this is for the back button, the triangle buttons */
.fa-bars{
    color: white;
    font-size: 30px;
    margin: 25px 0 0 50px;
}

.header #dextr{
    width: 130px;
    height:40px;
    margin: 20px 40px 20px 0;
}

/* ======================= M E N U ============================*/ 

.menu a {
    text-decoration: none;
    color: white;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;    
    font-size: 14px;
    border-radius: 20px;
}

/* ---------------------------------*/
#comm h1{
    background-color: white;
    border-radius: 15px;
    color: rgb(50,51,51);
}
/* ---------------------------------*/


.menu h1{
    padding: 10px 20px;
    text-align: center;
} 

.menu h1:hover{
    background-color: gray;
    border-radius: 15px;
} 

.menu_option{
        padding: 10px 30px;
}

.menu {
    background-color: rgb(50, 51, 51);
    position: absolute;
    border-radius: 30px;
    margin-top: 7px;
    box-shadow: 5px  8px 15px 3px rgba(0, 0, 0, 0.397); 
    display: none;
}

.menu.open-menu{
    display: block;
    animation: dropdown 0.5s ease-in-out;
}

@keyframes dropdown {
    0%{
        transform: translateX(-80px);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================================== */

#servicesWeOffer{
    font-family: "Zilla Slab", serif;
    font-weight: 700;
    font-style: normal;
    font-size: 70px;
    text-align: center;
    color: white;
    margin: 70px 0px;
}


.the-body {
    background-color: white;
    background-position: center;
    background-size: auto;
    padding: 50px;
    margin: 0px -10px -300px -10px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    padding-bottom: 200px;
}

/* ==================== COMMUNITY REVIEWS ================== */

.review-section h3{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 40px;
    background: linear-gradient(to right, purple, blue, cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

.review-section {
    text-align: center;
}

.review {
    position: relative;
    width: 340px;
    height: 260px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px  5px 22px 3px rgba(0, 0, 0, 0.164);
    border-radius: 30px;
    padding: 20px;
    margin-top: 100px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    margin-right: 20px;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.5s ease-out;
    animation: pop-up 0.8s forwards;
  }
  
  @keyframes pop-up {
    from {
      opacity: 0;
      transform: scale(0.9) translateY(30px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  
  .review.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
  }


.cover {
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    scroll-snap-align: center;
}

#review-cards {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
 


.review h4{
    font-size: 20px;
    padding: 50px 0 15px 0;
}

.review p{
    font-size: 17px;
    padding: 10px 0;
}


.review img {
    border: 5px solid blue;
    width: 100px;
    top: -50px; /* Move image up */
    left: 50%;
    position: absolute;
    border-radius: 50%; /* For circular image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateX(-50%);
} 


/* ==================== Instagram  ================== */

#ig-post h3{
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 50px;
    background: linear-gradient(to right, purple, blue, cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-bottom: 50px;
}

/* ----------------- smileys ad -----------------*/
.smileys {
    background-color: white;
    margin:0 -10px;
}

#ad {
    margin-top: 140px;
    padding-top: 140px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: white;
    color: rgb(35, 36, 36);
    padding-bottom: 140px;
    border-top-left-radius: 30px;
    border-top-right-radius: 9%;

}



.image_container img {
    width: 400px;
    box-shadow: 0px  5px 22px 3px rgba(0, 0, 0, 0.164); 
    border-radius: 20px;
    display: block;
}


.image_container {
    position: relative;
    display: inline-block;
    margin:0 auto;
    opacity: 0; /* Start hidden */
    transform: translateY(170px); /* Start below initial position */
    transition: all 0.8s ease-out; /* Smooth animation */
}

.image_container.fly-up {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Fly up to its original position */
}


.smileys-text {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 50px;
    background: linear-gradient(to right, purple, blue, cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ad p {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 19px;
    padding: 40px 80px 40px 0px;
}



#ad a {
    position: relative;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    font-size: 18px;
    color: white;
    padding: 10px 20px;
    background: linear-gradient(to right, rgb(17, 1, 156), rgb(0, 217, 255), purple);
    border-radius: 10px;
    background-size: 200% 100%;
    transition: 0.4s;
    top: 0;
}

#ad a:hover {
    animation: join 2s ease;
    font-size: 19px;
}

@keyframes join{
    0% { background-position: 0% 50%;}
    50% { background-position: 100% 100%;}
    100% { background-position: 0% 50%;}
}


/* ----------------- community calls -----------------*/

.community-call-section{
    padding: 100px 0;
}

#comm-calls{
    display: flex;
    justify-content: space-between;
}

#comm-calls h1{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 50px;
    background: linear-gradient(to right, purple, blue, cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 70px;
}

.call_image{
    width: 500px;
    padding-right: 70px;
    position: relative;
    display: inline-block;
    opacity: 0; /* Start hidden */
    transform: translateY(170px); /* Start below initial position */
    transition: all 0.8s ease-out; /* Smooth animation */
}

.call_image.fly-up {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Fly up to its original position */
}


#comm-calls p{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 19px;
    padding: 50px 70px 0px 70px;
}

/* ==================== COUNTER  ================== */

.comm-mem-counter {
    text-align: center;
    padding-top: 100px;
}


.comm-mem-counter h3{
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 50px;
    background: linear-gradient(to right, purple, blue, cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.comm-mem-counter h4 {
    font-size: 30px;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 30px;
    color:rgb(43, 43, 43);

}

.counter {
    font-size: 100px;
    color: rgb(43, 43, 43);
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 130px;
    padding: 40px 0;
}

/* ----------------- Join the community button -----------------*/

#join-btn {
        background: linear-gradient(to right, blue, red, blue);
        display: flex;  /* Use flexbox */
        align-items: center;  /* Vertically center */
        justify-content: center;  /* Horizontally center */
        margin: 70px auto;
        padding: 10px 40px;
        border-radius: 20px;
        transition: 0.7s;
        animation: txtbtn 7s ease infinite;
        background-size: 300% 100%;
        width: max-content; /* Ensures the div wraps around the content */
} 



@keyframes txtbtn {
    0% { background-position: 0% 50%;}
    50% { background-position: 100% 100%;}
    100% { background-position: 0% 50%;}
}



#join-btn a{
    text-decoration: none;
    font-family: "Zilla Slab", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 130px;
    font-size: 30px;
    color: white;
    transition: 0.7s;
}

#join-btn:hover{
    background: linear-gradient(to right, purple, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----------------- FOOTER -----------------*/

.footer {
    color: white;
    margin-left: -10px;
    margin-right: -10px;
    background-color: rgb(50, 51, 51);
}
.footer .footer-text h1{
    font-family: "Zilla Slab", serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    padding-top: 30px;
}

.footer-text h2 {
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
}

.footer-text p{
    text-align: center;
    margin-top: 150px; 
    margin-bottom: -200px; 
    font-size: 17px;
}

.footer .footer-text {
    margin: 200px 100px;
}


#link {
    padding-bottom: 20px;
}

.links {
    padding-top: 70px;
}

.links a{
    font-family: "Montserrat", sans-serif;
    font-weight: bolder;
    text-decoration: none;
    color: white;
    font-size: 17px;
}

.footer .upperhalf {
    padding-bottom: 30px;
}

.quicklink a{
    color: white;
}

.quicklink {
    padding: 10px 0 0 0;
}


/* size of the icons on the footer */

.fa-instagram {font-size: 20px;}
.fa-telegram {font-size: 20px;}
.fa-whatsapp {font-size: 20px;}
.fa-envelope {font-size: 20px;}



/* ------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1300px){

    .fa-bars{
        font-size: 25px;
        margin: 22px 0 0 50px;
    }
    .header #dextr{
        width: 80px;
        height:27px;
        margin: 20px 50px 20px 20px;
    }


    #servicesWeOffer{
        font-size: 50px;
    }
    
    /*      THIS IS FOR THE TEXT*/
    
    .review-section h3{
        font-weight: 700;
        font-size: 4vw;
    }
    /*      THIS IS FOR THE reviews */
    
    .review p{
        font-size: 1.4vw;
        padding: 10px 0;
    }
    
    .review {
        position: relative;
        width: 340px;
        height: 220px;
    }

    /*      THIS IS FOR smileys */
    
    #ad p {
        font-size: 1.5vw;
            padding: 40px 0px 40px 0px;
    }
    .smileys-text {
        font-size: 3.7vw;
    }
    
    .image_container img {
        width: 37vw;
    }
    
    #ad a {
        font-size: 1.7vw;
    }
    
    /*      THIS IS FOR Weekly community */
    
    #comm-calls h1{
        font-size: 3.7vw;
            margin-left: 0px;
    }
    
    
    #comm-calls p{
        font-size: 1.5vw;
        padding: 50px 70px 0px 24px;
        text-align: left
    }
    
    
    
    .call_image{
        width: 37vw;
        padding-right: 0px;
    }
    
    
    
    
    
    
    
    
    
    
    .comm-mem-counter h3{
        font-size: 4.7vw;
    }
    .comm-mem-counter h4 {
        font-size: 3vw;
    }
    #ig-post h3{
        font-size: 4.7vw;
    }
    
    
    /*      THIS IS FOR THE FOOOOOOOOOOOOOTER*/
    
    
    .footer {
        margin-top: -200px;
    }
    
    .footer .footer-text {
        margin: 200px 50px;
    }
    .footer .footer-text h1{
        font-size: 40px;
    }
    .footer-text h2 {
        font-size: 16px;
    }
    .links {
        display: block;
    }
    .links a{
        font-size: 15px;
    }

    .footer-text p{
        font-size: 13px;
    }
    
    .fa-instagram {font-size: 20px;}
    .fa-facebook {font-size: 19px;}
    .fa-whatsapp {font-size: 20px;}
    .fa-envelope {font-size: 20px;}
}


@media screen and (max-width: 850px){
        /* ------------ the header ------------- */

        .fa-bars{
            font-size: 20px;
            margin: auto 30px;
        }
        
        .header #dextr{
            width: 70px;
            height:24px;
            padding-top: 2px;
            margin: 10px 25px 10px 0;
        }
    
        /* =========== M E N U ===========*/

    .menu a {
        font-size: 12px;
    }
    
    .menu_option{
        padding: 10px 15px;
    }

    
        /* ----------------------------------- */
        
    .the-body {
        text-align: center;
        padding: 40px 25px 200px 25px;
        background-position: center;
        background-size: auto;
    }

    #servicesWeOffer{
        font-size: 40px;
    }
    
    /* ================== Reviews ====================== */    
    
    .review-section h3{
        font-weight: 700;
        font-size: 3vw;
    }
    
    .cover {
        display: flex;
        justify-content: center;
    }

    #review-cards {
        width: 100%;
        height: auto;
        display: block;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }
    
    .review p{
        font-size: 2.3vw;
        padding: 10px 0;
    }
    
    .review {
        position: relative;
        width: 50vw;
        height: 220px;
        margin: 80px auto;
    }
    
    .review img {
        width: 80px; 
        border: 3px solid blue;
    }
    
    /* ================== smileys ====================== */    
    

    #ad {
        margin-top: 20px;
        padding-top: 20px;
        display: block;
        padding-bottom: 40px;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }
    
    #ad img{
        width: 50vw;
        margin-bottom: 40px;
        margin-top: 40px;
    }
    
    #ad h1 {
        font-size: 5vw;
    }
    
    #ad p{
        font-size: 2.5vw;
    }
    
    #ad a{
        font-size: 3vw;
    }
    
    #ig-post h3{
        font-size: 9vw;
    }

    /* ================== COMMUNITY  CALLS====================== */    

    #comm-calls{
        display: block;
    }
    #comm-calls h1{
        font-size: 5vw;
    }
    #comm-calls p{
        font-size: 2.5vw;
        text-align: center;
        padding: 50px 0px 50px 0px;
    }
    #comm-calls img{
        width: 50vw;
        margin-bottom: 40px
    }
    
    /* ================== COMMUNITY ====================== */    
    
    .comm-mem-counter h3{
        font-size: 7vw;
    }
    .comm-mem-counter h4 {
        font-size: 3vw;
    }
    #join-btn a{
        font-size: 5vw;
    }
    
    /* F000000000000000000000000TER */

    .footer .footer-text h1{
        font-size: 27px;
    }
    .footer-text h2 {
        font-size: 14px;
    }
}




@media screen and (max-width: 500px){
    /* ------------ the header ------------- */

    .fa-bars{
        font-size: 20px;
        margin: auto 30px;
    }
    
    .header #dextr{
        width: 70px;
        height:24px;
        padding-top: 2px;
        margin: 10px 25px 10px 0;
    }

    /* =========== M E N U ===========*/

    .menu a {
        font-size: 12px;
    }

    .menu_option{
        padding: 10px 15px;
    }


    /* ----------------------------------- */
    
    .the-body {
        text-align: center;
        padding: 40px 25px 200px 25px;
        background-position: center;
        background-size: auto;
    }

    #servicesWeOffer{
        font-size: 40px;
    }

/* ================== Reviews ====================== */    

    .review-section h3{
        font-weight: 700;
        font-size: 4.7vw;
    }

    .cover {
        display: flex;
        justify-content: center;
    }

    #review-cards {
        width: 100%;
        height: auto;
        display: block;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .review p{
        font-size: 3.5vw;
        padding: 10px 0;
    }

    .review {
        position: relative;
        width: 70vw;
        height: 220px;
        margin: 80px auto;
    }

    .review img {
        width: 80px; 
        border: 3px solid blue;
    }

    /* ================== smileys ====================== */    


    #ad {
        margin-top: 20px;
        padding-top: 20px;
        display: block;
        padding-bottom: 40px;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }

    #ad img{
        width: 80vw;
        margin-bottom: 40px;
        margin-top: 40px;
    }

    #ad h1 {
        font-size: 7vw;
    }

    #ad p{
        font-size: 4.2vw;
    }

    #ad a{
        font-size: 4.4vw;
    }

    #ig-post h3{
        font-size: 9vw;
    }

    /* ================== COMMUNITY  CALLS====================== */    

    #comm-calls{
        display: block;
    }
    #comm-calls h1{
        font-size: 7vw;
    }
    #comm-calls p{
        font-size: 4.2vw;
        text-align: center;
        padding: 50px 0px 50px 0px;
    }
    #comm-calls img{
        width: 60vw;
        margin-bottom: 40px
    }

    /* ================== COMMUNITY ====================== */    

    .comm-mem-counter h3{
        font-size: 7vw;
    }
    .comm-mem-counter h4 {
        font-size: 4.3vw;
    }
    #join-btn a{
        font-size: 5.5vw;
    }


    /* F000000000000000000000000TER */

    .footer .footer-text h1{
        font-size: 27px;
    }
    .footer-text h2 {
        font-size: 14px;
    }
}