@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

::selection {
  background-color:  rgb(55, 15, 199);
  color: rgb(255, 255, 255); /* Optional: makes selected text white */
}

*{
    margin: 0;
    padding: 0;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    scroll-behavior: smooth;
    background-color: rgb(255, 255, 255);
}

body.bod-portal{
    background-image: url('assets/16eebd0d-53f1-4ac4-9b87-d37c21b37a54.jfif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Dark overlay directly */
  background-color: rgba(0, 0, 0, 0.5); /* 0.5 = 50% dark */
  background-blend-mode: multiply;
}

.header{
    background-color: rgb(63, 16, 236, 0.9);
    backdrop-filter: blur(2px);
    z-index: 1000;
    position: sticky;
    top: 0;
    padding: 10px;
}

.header-portal{
    background-color: rgb(63, 16, 236, 0.9);
    backdrop-filter: blur(2px);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-portal{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;  
}


.logo{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
    user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;  
}

.logo-img{
    height: 70px;
    width: 70px;
    border-radius: 50%;
    user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  border: 2px solid black;
 box-shadow: 1px 1px 2px black;
}

.logo-text{
    font-size: 2rem;
    font-weight: 700;
    color: rgb(255, 255, 255);
}

.menu-icon{
    cursor: pointer;
    font-size: 1.6rem;
    display: none;
    align-items: center;
     transition: color 0.5s ease;
     color: white;
}

.menu-icon:hover{
    color: rgb(5, 0, 24);
}


.nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.nav-menu{
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 1.2rem;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
    list-style: none;
    margin-right: 30px;
    align-items: center;
}

.nav-link{
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 1.2rem;
    font-weight: 500;
    list-style: none;
    transition: color 0.5s ease;
}

.nav-link:hover{
    color: rgb(6, 0, 29);
}

.hero{
    animation: changeBg 30s ease-in-out infinite;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Dark overlay directly */
  background-color: rgba(0, 0, 0, 0.5); /* 0.5 = 50% dark */
  background-blend-mode: multiply;
    padding: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    color: rgb(255, 255, 255);
}

   @keyframes changeBg {
        0%, 15% {
            background-image: url('assets/Nichiha-Commercial-Illumination-IndustrialBlock-ConcreteSeries-Gray-Blue-Yellow-Horizontal.jpg');
        }
        16%, 31% {
            background-image: url('assets/Les\ étudiants\ qui\ passent\ un\ examen\ avec….jfif');
        }
        32%, 47% {
            background-image: url('assets/561bdc2c-b4fa-44c6-b9bf-f994e8ff1ab3.jfif');
        }
         48%, 63% {
            background-image: url('assets/desktop-computers-in-computer-lab-on-high-school-HDKMP9.jpg');
        }
         64%, 79% {
            background-image: url('assets/16eebd0d-53f1-4ac4-9b87-d37c21b37a54.jfif');
        }
         80%, 95% {
            background-image: url('assets/2c6ab6bb-992c-41ec-a3ae-8cead17c9262.jfif');
        }
         100% {
            background-image: url('assets/Nichiha-Commercial-Illumination-IndustrialBlock-ConcreteSeries-Gray-Blue-Yellow-Horizontal.jpg');
        }
    }

.hero-title{
    font-weight: 700;
    font-size: 4rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0);
}

.sub-title{
    font-weight: 600;
    font-size: 1.4rem;
}

.cta{
    background-color: rgb(63, 16, 236);
    padding: 15px 40px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 20px;
    transition: 0.3s ease;
    box-shadow: 2px 2px 4px black;
}

.cta:hover{
    background-color: rgb(49, 13, 180);
    transform: scale(1.2);
}

.about{
    background-image: url('assets/Download\ this\ Free\ Photo\ about\ Low\ angle\ of….jfif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Dark overlay directly */
  background-color: rgba(0, 0, 0, 0.6); /* 0.5 = 50% dark */
  background-blend-mode: multiply;
    height: 600px;
    color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.about-text{
    margin-right: 200px;
    margin-left: 200px;
    font-size: 1.1rem;
}

.moto{
    height: 700px;
    background-color: rgb(227, 224, 236);
    color: rgb(0, 0, 0);
    font-size: 1.2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-equally;
    align-items: center;
}

.mt-img{
    transition: 0.3s ease;
    user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.mt-img:hover{
    transform: scale(1.05);
}

.gal-img{
    height: 260px;
    width: 260px;
    border-radius: 50%;
        transition: 0.3s ease;
    user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  border: 2px solid black;
 box-shadow: 2px 2px 7px black;
}

.gal-img:hover{
    transform: scale(1.05);
    box-shadow: 4px 4px 6px rgb(63, 16, 236);
    border: 2px solid rgb(63, 16, 236);
}

.gal-cont{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
}

.gallery{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 20px;
    height: 1070px;
        background-image: url('assets/16eebd0d-53f1-4ac4-9b87-d37c21b37a54.jfif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Dark overlay directly */
  background-color: rgba(0, 0, 0, 0.6); /* 0.5 = 50% dark */
  background-blend-mode: multiply;
}

.admission{
    height: 830px;
    background-color: rgb(227, 224, 236);
    color: rgb(55, 0, 255);
    font-size: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.ad-img{
    transition: 0.3s ease;
    user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: 45%;
}

.ad-div{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer{
    background-color: rgb(8, 0, 35);
    color: white;
    padding-top: 60px;
    padding-bottom: 60px;
}

.footer-content{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.footer-logo{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.footer-logo-img{
        width: 70px;
    height: 70px;
    user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid black;
}

.social-links{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    color: white;
    list-style: none;
}

.icon-footer{
    color: white;
    text-decoration: none;
    font-size: 2.1rem;
    transition: background 0.3s ease;
}

.icon-footer:hover{
    background: linear-gradient(90deg, rgb(55, 0, 255), rgb(255, 0, 166) );
    -webkit-background-clip: text; /* For Chrome, Safari */
    -webkit-text-fill-color: transparent;
    background-clip: text; /* For Firefox (with some prefixes) */
    color: transparent;
}

.portal{
    padding-top: 160px;
    padding-bottom: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.instr{
    color: rgb(255, 255, 255);
    font-size: 2rem;
}

.form-portal{
    background-color: rgb(8, 0, 39, 0.5);
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 150px;
    padding-right: 150px;
    border-radius: 10px;
    box-shadow: 1px 1px 10px black;
}

.form-label{
    color: white;
    font-size: 1.3rem;
}

.form-input{
    height: 35px;
    width: 400px;
    font-size: 1rem;
}

.form-input-message{
    width: 400px;
    border-radius: 5px;
    border: none;
    resize: none;
}
.form-button{
    padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 45px;
      padding-right: 45px;
      cursor: pointer;
      color: white;
      font-size: 1.2rem;
      font-weight: 600;
      border-radius: 10px;
      border: none;
      background-color: rgba(58, 15, 214, 0.9);
      margin-top: 20px;
      transition: 0.3s ease;

}

.form-button:hover{
    background-color: rgb(43, 11, 155);
    transform: scale(1.1);
}

.form-button-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 768px) {
    .nav-menu {
        position: absolute;
        top: 90px;
        left: 0;
        width: 100%;
        flex-direction: column;
        display: none;
        background-color: rgba(58, 15, 214, 0.9);
        backdrop-filter: blur(2px);
        transition: 0.3s ease;

    }

    .nav-menu.show {
        display: flex;
        transition: 0.3s ease;
    }

    .menu-icon {
        display: flex;
    }

    
.hero{
    padding: 110px;
    background-color: rgb(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 17px;
}

.hero-title{
    font-weight: 700;
    font-size: 2rem;
}

.sub-title{
    font-weight: 600;
    font-size: 1.2rem;
}

    .about{
    background-image: url('assets/Download\ this\ Free\ Photo\ about\ Low\ angle\ of….jfif');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* Dark overlay directly */
  background-color: rgba(0, 0, 0, 0.6); /* 0.5 = 50% dark */
  background-blend-mode: multiply;
    height: 990px;
    color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}



.about-text{
    margin-right: 30px;
    margin-left: 30px;
    font-size: 1rem;
}

.moto-text{
    margin-left: 20px;
    margin-right: 10px;
}
.mt-img{
    width: 90%;
    margin-top: 50px;
}

.moto{
    flex-direction: column;
    gap: 50px;
    height: 920px;
}

.gal-cont{
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gallery{
    height: 2200px;
    gap: 0;
}

.ad-div{
    margin-left: 30px;
    margin-right: 10px;
}
.ad-img{
    width: 80%
}

.admission{
    flex-direction: column;
    gap: 50px;
    height: 1260px;
}

.ad-text{
    font-size: 2.2rem;
}

.footer-content{
    flex-direction: column;
    align-items: center;
    gap: 70px;
}

.footer{
    padding-top: 150px;
    padding-bottom: 150px;
}

.form-portal{
    padding: 50px;
}

.instr{
    font-size: 1.3rem;
}

.form-input{
    width: 240px;
}

.form-input-message{
    width: 240px;

}
}


@media screen and (min-width: 768px) and (max-width: 1023px) {
    .logo-text{
        font-size: 1.3rem;
    }

    .hero{
        padding: 130px;
    justify-content: flex-start;
    align-items: flex-start;
    }
    .hero-title{
        font-size: 3rem;
    }

    .about{
        height: 700px;
    }

    .about-text{
        margin-right: 40px;
        margin-left: 40px;
        font-size: 1.1rem;
    }

    .moto{
        height: 600px;
    }
    .mt-img{
        width: 50%;
    } 

    .gal-cont{
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.gallery{
    height: 1800px;
    gap: 0;
}

.admission{
    height: 600px;
}

.ad-text{
    font-size: 2.5rem;
}
.footer-content{
    flex-direction: column;
    align-items: center;
    gap: 70px;
}

.footer{
    padding-top: 150px;
    padding-bottom: 150px;
}
.form-portal{
    padding: 50px;
}
}