* {
    box-sizing: border-box;
    margin: 0;
}

::placeholder {
    color: rgb(163, 162, 184);
}

#nav-bar {
    width: 100%;
    height: 10vh;
    position: fixed;
    top: 0;
    background: linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255), rgb(239, 242, 248), rgb(195, 203, 219) );
    box-shadow: -1px 6px 3px 0px rgb(218, 222, 224);
    z-index: 1;
}

#CIFE-logo {
    width: 9%;
    height: 100%;
    margin-left: 10rem;
}

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

#social-media {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    z-index: 1;
}

button {
    width: 3rem;
    height: 3rem;
    border: none;
    border-radius: 10rem;
    color: white;
    font-size: 1.5rem;
}

.instagram {
    background: linear-gradient(20deg,rgb(255, 149, 135), rgb(223, 49, 138), rgb(113, 6, 162));
}

.instagram:hover {
    opacity: 70%;
    cursor: pointer;    
}

.instagram:active {
    opacity: 85%;    
}

.facebook {
    background:rgb(58, 87, 157);  
}

.facebook:hover {
    opacity: 70%;
    cursor: pointer;    
}

.facebook:active {
    opacity: 85%;    
}

.whatsapp {
    background: rgb(37, 185, 62);
}

.whatsapp:hover {
    opacity: 70%;
    cursor: pointer;    
}

.whatsapp:active {
    opacity: 85%;    
}

.mySlidesImgs {
    width: 100%;
    margin-top: 4rem;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 14%;
    width: 5%;
    height: 74vh !important; 
    display: flex;
    align-items: center;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.486), rgba(0, 0, 0, 0)) ;
  }

  .next:hover {
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0.486), rgba(0, 0, 0, 0)) ;
  }
  
  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }


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

#first-zone {
    margin-top: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#first-zone-text {
    width: 75%;
    height: 55rem;
    color: rgb(13, 31, 70);
    font-family: "Poppins", sans-serif;
}

#first-zone-text h1 {
    margin-top: 5rem;
    margin-left: 10rem;
}

#first-zone-text p {
    margin-top: 2rem;
    margin-left: 10rem;
    text-align:start;
    font-size: 1.5rem;
    width: 30rem;
}

#first-zone-image {
    width: 100%;
}

                                /*-----------------------------------------------------------------------------------*/
#formsubmit {
    display: flex;
    margin: 15rem auto;
    width: 70rem;
    height: 60rem;
}


#formitems {
    background: linear-gradient(30deg,rgb(55, 89, 161), rgb(13, 31, 70));
    width: 35rem;
    height: 100%;
    padding: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#formitems h1 {
    width: 30rem;
    color: white;
    font-family: "Poppins", sans-serif;
}

#name, #email, #text, #subject, #phone {
    width: 30rem;
    margin-top: 4rem;
    background-color: transparent;
    color: white;
    border: none;
    border-bottom: 1px solid white;
} 

#text {
    height: 10rem;
}

#submit {
    width: 10rem;
    height: 3rem;
    margin-top: 1rem;
    background-color: rgb(0, 3, 39);
    border: none;
    border-radius: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 1rem;
    font-weight: bold;
    color: white;
}

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


#contact {
    background: rgb(255, 255, 255);
    width: 35rem;
    height: 100%;
    padding: 0 5rem 10rem 5rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5rem;
}

#contact h1 {
    margin-top: -8rem;
    align-items: center;
    text-transform: uppercase;
    font-family: "Poppins", sans-serif;
    border-bottom: 5px solid rgb(0, 3, 39);
}

#contact p {
    font-weight: 600;
}

.contact-span {
    font-weight: lighter;
    color: rgb(66, 66, 71);
}


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

.footer {
    width: 100%;
    height: 12vh;
    background: linear-gradient( rgb(23, 47, 100), rgb(9, 19, 43));

}                                

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

@media screen and (min-width: 320px) and (max-width: 480px) { /*finished*/
    /* This media query is for small phones */
    body {
        min-width: 320px;
        max-width: 480px;  
    }
    
    #nav-bar {
        background: white;
    }

    #CIFE-logo {
        width: 35%;
        height: 100%;
        margin-left: 6.2rem;
    }

    .prev, .next {
        height: 86vh !important;
    }
    
    button {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.2rem;
    }

    #formsubmit {
        max-width: 320px;
        margin: 4rem 0;
        padding-left: 1.5rem;
        display: block;
    }

    #formitems {
        width: 17rem;
        height: 70%;
        padding: 5rem;
    }
    
    #formitems h1 {
        width: 12rem;
        text-align: center;
        font-size: 1.3rem;    
    }
    
    #name, #email, #text, #subject, #phone {
        width: 12rem;
        margin-top: 1rem;
    } 
    
    #submit {
        margin-left: 1rem;
    }

    #contact {
        width: 17rem;
        height: 70%;
        padding: 0 5rem;
        margin-top: 5rem;
    }

    #contact h1 {
        text-align: center;
        font-size: 1.3rem; 
    }
    
    #contact p {
        text-align: center; 
    }

    .footer {
        min-width: 320px;
        max-width: 480px;
        position: absolute;
        top: 131.5rem;
    }
}

@media screen and (min-width: 375px) and (max-width: 424px) {

    #CIFE-logo {
        width: 30%;
        margin-left: 8rem;
    }

     .prev, .next {
        height: 101vh !important;
    }

    #formsubmit {
        padding-left: 3.5rem;
    }

     .footer {
        top: 138rem;
    }
}

@media screen and (min-width: 425px) and (max-width: 480px) {

    #CIFE-logo {
        width: 29%;
        margin-left: 9.5rem;
    }

     .prev, .next {
        height: 114.9vh !important;
    }

    #formsubmit {
        padding-left: 5rem;
    }

     .footer {
        top: 144rem;
    }
}

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

@media screen and (min-width: 481px) and (max-width: 767px) { /*finished*/
    /* This media query is for small laptops and large phones */
    body {
        min-width: 481px;  
        max-width: 767px;  
    } 

    

    .mySlides {
        width: 75rem;
    }

    #formsubmit {
        margin: 14rem 5rem;
    }

    #formitems {
        width: 30rem;
        height: 100%;
        padding: 5rem;
    }
    
    #formitems h1 {
        width: 20rem;
        font-size: 1.3rem;    
    }
    
    #name, #email, #text, #subject, #phone {
        width: 20rem;
        margin-top: 4rem;
    } 
    
    #contact {
        width: 30rem;
        height: 100%;
        padding: 0 5rem 10rem 5rem;
    }

}

@media screen and (min-width: 768px) and (max-width: 1023px) { /*finished*/
    /* This media query is for tablets and small laptops */
    body {
        min-width: 768px;
        max-width: 1024px;
    }   

     .prev, .next {
        height: 59.9vh !important;
    }

    .prev {
        padding-right: 5rem;
    }

    .next {
        padding-left: 5rem;
        padding-right: 1.7rem;
        left: 63.3rem !important;
    }

    .mySlides {
        width: 70rem;
    }

    .next {
        left: 67.7rem;
    }

    .prev, .next {
        height: 77.5vh;
    }

    #dots {
        margin-left: 25rem;
    }

    #formsubmit {
        margin: 5rem 0;
        padding-left: 7rem;
    }

    #formitems {
        width: 30rem;
        height: 100%;
        padding: 5rem;
    }
    
    #formitems h1 {
        width: 20rem;
        font-size: 1.3rem;    
    }
    
    #name, #email, #text, #subject, #phone {
        width: 20rem;
        margin-top: 4rem;
    } 
    
    #contact {
        width: 30rem;
        height: 100%;
        padding: 0 5rem 10rem 5rem;
    }

    .footer {
        width: 70rem;
    }
}

@media screen and (width: 1024px) { /*finished*/
    /* This media query is for tablets and small laptops */
    body {
        min-width: 768px;
        max-width: 1024px;
    }   

    .prev, .next {
        height: 60vh !important;
    }

    .mySlides {
        width: 70rem;
    }

    .next {
        left: 66.8rem;
    }

    .prev, .next {
        height: 54.5vh;
    }

    #dots {
        margin-left: 10rem;
    }

    #formsubmit {
        margin: 5rem 0;
        padding-left: 7rem;
    }

    #formitems {
        width: 30rem;
        height: 100%;
        padding: 5rem;
    }
    
    #formitems h1 {
        width: 20rem;
        font-size: 1.3rem;    
    }
    
    #name, #email, #text, #subject, #phone {
        width: 20rem;
        margin-top: 4rem;
    } 
    
    #contact {
        width: 30rem;
        height: 100%;
        padding: 0 5rem 10rem 5rem;
    }

    .footer {
        width: 70rem;
    }
}


@media screen and (min-width: 1281px) and (max-width: 1440px) { /*finished*/
    /* This media query is for large desktops */
    body {
        min-width: 1281px;
        max-width: 1440px;
    }   

    .prev, .next {
        margin-top: 0.4rem;
        height: 71vh !important;
    }

     .mySlides {
        margin-top: 3rem;
    }

    
    .prev, .next {
        height: 53vh;
    }

}

@media screen and (width: 2560px) { /*finished*/
    /* This media query is for large desktops */
    
    .mySlidesImgs {
        margin-top: 10.6rem;
    }

    .prev, .next {
        height: 69.9vh !important;
    }
}