.wrapper {
    max-width: 80%;
    margin-inline: auto; /*  eqivalent to  margin-left: auto; & margin-right: auto; */
    padding-inline: 1rem;
    display: flex;
    
}
section { 
   margin-top: 10px;
}

.fimg_container {
   display: flex;
    align-self:center;
    justify-content: center;
    min-width: 40%;
    max-width: 50%;
}
.wrapper img {
    width: 100%;
    border-style:ridge;
    max-height: max-content;
}

.ftext_cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: justify;
    padding-inline: 10px;

   
}

.wrapper h1 {
   
    text-align: center;
}




.pg_title {
    font-size: calc(var(--font-base_sz) + 1.5vw);
    margin-top: 20px;
   
    transform: skewY(-3deg); 
   color: white;
   z-index: -1;
   width: max-content;
   letter-spacing: calc(4px + 1vw);
}
.sect_tille {
    font-size: calc(var(--font-base_sz) + 1.2vw);
}

section {
    padding-block:5vw;
    
}

.Ict_lab {
  /*  font-weight: 200; */
    position: relative;
    isolation: isolate;
    
}

.Ict_lab::after {
    content: "";
    background: linear-gradient(20deg, #12c2e9, #c471ed,#f64f59);
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: skewY(-3deg);
}

.lang_lab {
    position: relative;
    isolation: isolate;
    
}



.lang_lab::after {
    content: "";
    background: linear-gradient(20deg, #12c2e9, #c471ed,#f64f59);
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: skewY(3deg);
}






.Library {
    position: relative;
    isolation: isolate;
    
}



.Library::after {
    content: "";
    background: linear-gradient(to right, #00f260, #0575e6);
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: skewY(-3deg);
}








.common_rooms {
    position: relative;
    isolation: isolate;
    
}



.common_rooms::after {
    content: "";
    background: linear-gradient(to right, #0575e6,#00f260);
    position: absolute;
    z-index: -1;
    inset: 0;
    transform: skewY(3deg);
}


.sec_tt_spanE,.sec_cnt_spanE {
   /* font-weight: 200; */
    color: hsl(0 0% 80% /0.0);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    /*background-image: linear-gradient(90deg, yellow, rgb(255, 118, 141));*/
    background-image: linear-gradient(90deg, white, white);

    animation: txt_grd linear forwards;
    animation-timeline: view(y);
    
  }
  
  

.sec_tt_spanE {
    animation-range-start: contain;
    animation-range-end: contain 6vh;
}

.sec_cnt_spanE {
    line-height: 1.5;
    animation-range-start: cover 10vh;
    animation-range-end: contain 32vh;
}


/*
.sec_tt_spanOdd, .sec_cnt_spanOdd {

   font-weight: 600;
}
*/



@keyframes txt_grd {
    to { background-size: 100% 100%; }
  }
  
 

@media screen and  (max-width: 600px)
{
    .wrapper {
        flex-wrap: wrap;
    }

    .fimg_container {
        order: 1;
    }
    
    .ftext_cont {
        order: 2;
        width: 100%;
    }
    .wrapper {
        max-width: 100%;
     }
     .fimg_container {
        display: flex;
         align-self:center;
         justify-content: center;
         min-width: 80%;
         max-width: 100%;
     }

     .wrapper img {
        width: 80%;
    }
    
     
}