/* RESET */

*{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    /* outline: 1px solid red;; */

}



/* MAIN SECTION */

.shreya-home-about-main{

    width: 100%;

    background-color: #ffffff;

    position: relative;

    padding-top: 50px;
    

    /* IMPORTANT: Scrollbar Remove */

    /* overflow-x: clip !important;

    overflow-y: visible; */
    /* background-image: url(../../../images/home/about-section-home/aboutimg4.png); */
    /* background-repeat: no-repeat;
    background-position: right bottom; */
    /* animation: up-down 3s ease-in-out infinite alternate; */


}
/* @keyframes up-down{
    0% {
    transform: translateY(0px);
}
100% {
    transform: translateY(-20px);
}
} */



/* ------------------ ANIMATION SHAPES ------------------ */



.shreya-home-about-animation-1{

    position: absolute;

    width: 420px;

    height: 350px;

    top: 220px;

    right: 0px;                 /* FIXED */

    background-size: cover;

    background-image: url(/Marishda-Website/Assets/images/home/our-school/about-one-shape-2.png);

    animation: smoothMotion 8s ease-in-out infinite alternate;

}



.shreya-home-about-animation-2{

    position: absolute;

    width: 100px;

    height: 100px;

    top: 50px;

    right: 10px;

    background-size: cover;

    background-image: url(/Marishda-Website/Assets/images/home/our-school/graduation-download.png);

    animation: floatBurger 3s ease-in-out infinite alternate;

}



.shreya-home-about-animation-3{

    position: absolute;

    width: 180px;

    height: 180px;

    top: 450px;

    left: 0px;                  /* FIXED */

    background-size: cover;

    background-image: url(/Marishda-Website/Assets/images/home/our-school/global-download.png);

    animation: delivery-boy 3s ease-in-out infinite alternate;

}



/* Animations */

@keyframes smoothMotion {

      0% { transform: scale(1) rotate(0deg); }

      50% { transform: scale(1.05) rotate(2deg); }

      100% { transform: scale(1.1) rotate(-2deg); }

}



@keyframes floatBurger {

  0% { transform: translateY(0px); }

  100% { transform: translateY(-20px); }

}



@keyframes delivery-boy {

  0% { transform: translateX(0px); }

  100% { transform: translateX(25px); }

}



/* ------------------ MAIN CONTENT FLEX ------------------ */



.ashalata_home_about_sub{

    width: 85%;

    display: flex;

    align-items: center;

    justify-content: space-evenly;

    margin: auto;

    /* position: relative; */

    z-index: 2;

    height: auto;

  

}



/* ------------------ RIGHT SIDE CONTENT ------------------ */



.shreya-home-about-container-right{

    width: 45%;

    position: relative;

}



.shreya-home-about-container-right-header h5{
    font-size: 24px;

    color: #ef8f26;

    position: relative;

    display: inline-block;

    margin-left: 46px;

    margin-top: 20px;

    margin-bottom: 20px;

    font-weight: 600;

   font-family: 'Yantramanav', sans-serif;

    transition: .5s;

}

.shreya-home-about-container-right-header h5::before{

     position: absolute;

    content: "";

    top: 0;

    left: -45px;

    background: #ef8f26;

    height: 16px;

    width: 16px;

    transition: all 1000ms ease;

    animation: st__rotate 5s infinite linear;

    animation-play-state: running;

    z-index: 1;

}

.shreya-home-about-container-right-header h5::after{

     position: absolute;

    content: "";

    top: 0;

    left: -39px;

    background: linear-gradient(#0b7e9b, #084252);

    height: 16px;

    width: 16px;

    transition: all 1000ms ease;

    animation: st__rotate 5s infinite linear;

    animation-play-state: running;

    z-index: 1;

}

@keyframes st__rotate{

    0% {

   

    transform: rotate(0deg);

}

100% {

    

    transform: rotate(360deg);

}

}
 .shreya-home-about-container-right-header .rotat{

    display: inline-block;

    position: relative;

}

.shreya-home-about-container-right-header .rotat::before{

 position: absolute;

    content: "";

    top: -18px;

    left: 20px;

    background: #ef8f26;

    height: 16px;

    width: 16px;

    transform: rotate(45deg);

    transition: all 1000ms ease;

   

    animation: st__rotate 5s infinite linear;

    

    animation-play-state: running;

    z-index: 1;



}

.shreya-home-about-container-right-header .rotat::after{

    position: absolute;

    content: "";

        top: -14px;
    left: 23px;

    background: linear-gradient(#0b7e9b, #084252);

    height: 16px;

    width: 16px;

    transform: rotate(45deg);

    transition: all 1000ms ease;

    animation: st__rotate 5s infinite linear;

    animation-play-state: running;

    z-index: 1;

}

.sunanda_headmasterdesk_main .shreya-home-headmaster-main-heading h5::after{

     position: absolute;

    content: "";

    top: 10px;

    left: -39px;

    background: linear-gradient(#0b7e9b, #084252);

    height: 16px;

    width: 16px;

    transition: all 1000ms ease;

    animation: st__rotate 5s infinite linear;

    animation-play-state: running;

    z-index: 1;

}


.shreya-home-about-container-right-header h3{

    color: #19232B;

    /* color: #222; */

    font-family: 'Poppins', sans-serif !important;

    font-size: 30px;

    font-weight: 500;

}.shreya-home-about-container-right-header h3 span{
    color:#ef8f26;
}
.shreya-home-about-container-right-header .shreya-about-text{

      font-family: 'Poppins', sans-serif !important;

    color: #757F95;

    line-height: 25px;

    margin-top: 25px;

    font-size: 15px;

    margin-bottom: 25px;
    letter-spacing: 0.5px;
    text-align: justify;

}

.shreya-home-about-container-right-header .shreya-home-about-icon{

    height: 80px;

    margin-top: 10px;

    width: 90%;

    /* padding: 5px; */

    display: flex;

}

 .shreya-home-about-icon-fast{

    width: 100px;

     height: 100%;

  border: 1px solid #bbb;

  /* border-radius: 10px; */

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

  font-size: 35px;

  color: #003e4d;

  transition: 0.4s ease;

  z-index: 1;
    padding: 0px 50px;
    

}

.shreya-home-about-icon-fast::before{

   content: "";

    height: 300px;

    width: 300px;

    background: #003e4d;

    border-radius: 50%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0);

    transition: 0.5s cubic-bezier(0.25,0.46,0.45,0.94);

    z-index: -1;

}



.shreya-home-about-icon-fast:hover::before {

   transform: translate(-50%, -50%) scale(1);

}



/* Icon changes on hover */

.shreya-home-about-icon-fast:hover {

    color: #fff;

  border-color: transparent;

}







.shreya-home-about-container-right-header .about-btn{

    width: 120px;

    height: 45px;

    border: none;

    outline: none;

    display: inline-block;

    background-color: #ef8f26;

    color: #fff;

    font-weight: bold;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    overflow: hidden;

    z-index: 1;

    text-decoration: none;

    top: 35px;

}

.shreya-home-about-container-right-header .about-btn::before{

    position: absolute;

    content: "";

    top: 0;

    left: -12px;

    width: 30px;

    height: 100%;

    background: #003e4d;

    z-index: -1;

    transform: skew(22deg);

    transition: 0.8s;

}

.shreya-home-about-container-right-header .about-btn:hover::before{

    /* top: -10%; */

    width: 110px;

    transition: 0.8s;

    /* left: 50%; */

}

/* ------------------ ICON BOXES ------------------ */



/* .shreya-home-about-container-right-header .shreya-home-about-icon{

    height: 80px;

    margin-top: 10px;

    width: 80%;

   

    display: flex;

} */

 .shreya-home-about-icon-fast{

    width: 100px;

     height: 100%;

  border: 1px solid #bbb;

  /* border-radius: 10px; */

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

  font-size: 35px;

  color: #003e4d;

  transition: 0.4s ease;

  z-index: 1;

    

}

.shreya-home-about-icon-fast::before{

   content: "";

    height: 300px;

    width: 300px;

    /* background: #003e4d; */
    background: linear-gradient(#0b7e9b, #084252);

    border-radius: 50%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0);

    transition: 0.5s cubic-bezier(0.25,0.46,0.45,0.94);

    z-index: -1;

}



.shreya-home-about-icon-fast:hover::before {

   transform: translate(-50%, -50%) scale(1);

}



/* Icon changes on hover */

.shreya-home-about-icon-fast:hover {

    color: #fff;

  border-color: transparent;

}

.shreya-home-about-container-right-header .shreya-home-about-icon .shreya-home-about-text-fast{

    margin-left: 8px;



}

.shreya-home-about-container-right-header .shreya-home-about-icon .shreya-home-about-text-fast h2{

    color: #19232B;
    /* color: #222; */
    font-family: 'Poppins', sans-serif !important;
    font-size: 25px;
    font-weight: 500;


}

.shreya-home-about-container-right-header .shreya-home-about-icon .shreya-home-about-text-fast p{
    font-family: 'Poppins', sans-serif !important;

    color: #757F95;

    line-height: 23px;

    font-size: 15px;
letter-spacing: 0.5px;
text-align:justify;
}

.shreya-home-about-container-right-header .about-btn{

    width: 120px;

    height: 45px;

    border: none;

    outline: none;

    display: inline-block;

    background-color: #ef8f26;

    color: #fff;

    font-weight: bold;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    overflow: hidden;

    z-index: 1;

    text-decoration: none;

    top: 35px;

}

.shreya-home-about-container-right-header .about-btn::before{

    position: absolute;

    content: "";

    top: 0;

    left: -12px;

    width: 30px;

    height: 100%;

    background: #003e4d;

    z-index: -1;

    transform: skew(22deg);

    transition: 0.8s;

}

.shreya-home-about-container-right-header .about-btn:hover::before{

    /* top: -10%; */

    width: 110px;

    transition: 0.8s;

    /* left: 50%; */

}



/* ------------------ ABOUT BUTTON ------------------ */



.shreya-home-about-container-right-header .about-btn{

    width: 130px;

    height: 50px;

    border: none;

    background-color: #ef8f26;

    color:#fff;

    font-weight: bold;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top: 35px;

    position: relative;

    overflow: hidden;

    text-decoration: none;

        margin: 20px 0px

}



.about-btn::before{

    content: "";

    position: absolute;

    top: 0;

    left: -20px;

    width: 35px;

    height: 100%;

    background:#003e4d;

    transform: skew(22deg);

    transition: .8s;

}



.about-btn:hover::before{

    width: 130px;

}



/* ------------------ LEFT IMAGE SHAPES ------------------ */



/* ------------------ LEFT IMAGE GRID (Corrected & Overflow Free) ------------------ */



.ambika_school_history_section1_left{

    width: 600px;

    height: 550px;

    position: relative;

    display: flex;

    /* justify-content: center; */

    /* align-items: center; */

    overflow: visible;

}



/* Top-left small box */

.ambika_school_history_section1_main_left_f1_div{
    position: absolute;
    height: 260px;
    width: 220px;
    /* border: 4px solid white; */
    top: 0px;
    left: 28px;
    z-index: 3;
      border: 2px solid white;    
       overflow: hidden;
}



/* Main big vertical box */

.ambika_school_history_section1_main_left_f2_div{

    position: absolute;

    height: 480px;

    width: 58%;

    border: 2px solid white;
    right: 0px;

    /* top: 40px; */

    z-index: 2;
 overflow: hidden;

}
.ambika_school_history_section1_main_left_f1_div img{
width:100%;
height:100%;
  transition: 1.2s ease;
}
.ambika_school_history_section1_main_left_f1_div:hover img{
transform: scale(1.2);
}
.ambika_school_history_section1_main_left_f2_div img{
width:100%;
height:100%;
  transition: 1.2s ease;
}
.ambika_school_history_section1_main_left_f2_div:hover img{
transform: scale(1.2);
}


/* Bottom-right small box */

.ambika_school_history_section1_main_left_f3_div{

    position: absolute;

    height: 120px;

    width: 140px;

    border: 2px solid white;
    bottom: 0px;

    right: 9px;

    z-index: 4;
     overflow: hidden;
}
.ambika_school_history_section1_main_left_f3_div img{
    width:100%;
height:100%;
  transition: 1.2s ease;
}
.ambika_school_history_section1_main_left_f3_div:hover img{
transform: scale(1.2);
}

/* Shapes on background */

.ambika_school_history_section1_left_shape1{



    /* height: 360px; */

    position: absolute;

    left: 26px;

    top: 107px;

    background-repeat: no-repeat;

    background-size: cover;

    z-index: 1;

}



.ambika_school_history_section1_left_shape2{

      width: 224px;

    height: 230px;

    position: absolute;

    left: 56px;

    top: 233px;

    background-repeat: no-repeat;

    background-size: cover;

    z-index: 0;

      background-image: url(../../../images/home/about-section-home/about-shape-1.png);

}



.ambika_school_history_section1_left_shape3{

    width: 90px;

    height: 90px;

    position: absolute;

    right: -31px;

    top: -13px;

    background-repeat: no-repeat;

    background-size: cover;

    z-index: 5;

       background-image: url(../../../images/home/about-section-home/about-shape-3.png);

}

.ambika_about_section_left_left{

    width: 43%;

    position: relative;

    height: 383px;

}
.ambika_school_history_section1_main_left_f2_div:before{
      content: "";
  position: absolute;
  top: 0;
  right: 0; 
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(13px);
  transform: skewX(-25deg);
  
  opacity: 0; 
  transition: 0.9s ease;
  z-index: 2;
}
.ambika_school_history_section1_main_left_f2_div:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0; 
  width: 50%;
  height: 100%;
   background: rgba(255,255,255,0.55);
  backdrop-filter: blur(13px);
  transform: skewX(-25deg);
  
  opacity: 0;
  transition: 0.9s ease;
  z-index: 2;
}
.ambika_school_history_section1_main_left_f2_div:hover::after {
  opacity: 1;
  left: -120%;
}


.ambika_school_history_section1_main_left_f2_div:hover::before {
  opacity: 1;
  right: -120%;
}
.ambika_school_history_section1_main_left_f3_div:before{
      content: "";
  position: absolute;
  top: 0;
  right: 0; 
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(13px);
  transform: skewX(-25deg);
  
  opacity: 0; 
  transition: 0.9s ease;
  z-index: 2;
}
.ambika_school_history_section1_main_left_f3_div:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0; 
  width: 50%;
  height: 100%;
   background: rgba(255,255,255,0.55);
  backdrop-filter: blur(13px);
  transform: skewX(-25deg);
  
  opacity: 0;
  transition: 0.9s ease;
  z-index: 2;
}
.ambika_school_history_section1_main_left_f3_div:hover::after {
  opacity: 1;
  left: -120%;
}


.ambika_school_history_section1_main_left_f3_div:hover::before {
  opacity: 1;
  right: -120%;
}
.ambika_school_history_section1_main_left_f1_div:before{
      content: "";
  position: absolute;
  top: 0;
  right: 0; 
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(13px);
  transform: skewX(-25deg);
  
  opacity: 0; 
  transition: 0.9s ease;
  z-index: 2;
}
.ambika_school_history_section1_main_left_f1_div:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0; 
  width: 50%;
  height: 100%;
   background: rgba(255,255,255,0.55);
  backdrop-filter: blur(13px);
  transform: skewX(-25deg);
  
  opacity: 0;
  transition: 0.9s ease;
  z-index: 2;
}
.ambika_school_history_section1_main_left_f1_div:hover::after {
  opacity: 1;
  left: -120%;
}


.ambika_school_history_section1_main_left_f1_div:hover::before {
  opacity: 1;
  right: -120%;
}


/* ----------------------------------------------btn----------------------- */
.shreya_about_main_right_fourdiv{
    /* border:1px solid black; */
     padding: 10.5px 25px;
    width:30%;
    height:65px;
    transform: skewX(-12deg);
    padding: 20px 0px;
   position: relative; 
   overflow: hidden;
   /* background: rgba(255, 255, 255, 0.08); */
    /* backdrop-filter: blur(15px); */
    transition: 0.5s ease;
    /* border: 1px solid rgba(255,255,255,0.15); */
}
.shreya-about-glass-layer{
     position: absolute;
    top: 0;
    left: -30%;
    width: 13%;
    height: 100%;
    background: linear-gradient(
        110deg,
        rgba(255,255,255,0.1) 0%,
        rgba(255, 255, 255, 0.13) 50%,
        rgba(255,255,255,0.1) 100%
    );
    box-shadow: 2px 0px 5px 1px  rgba(255, 255, 255, 0.13);
    transform: skewX(-20deg);
    transition: 1s ease;
}
.shreya_about_main_right_fourdiv:hover .shreya-about-glass-layer {
    left: 120%;
}
.shreya_about_main_right_fourdiv .headm-btn{
    padding: 10.5px 25px;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    line-height: 1.5;
    align-items: center;
    transition: all 0.2s;
    
    /* transform: skewX(-12deg); */
}
.shreya_about_main_right_fourdiv .btn-color{
    background: linear-gradient(#0b7e9b, #084252);
}
.shreya_about_main_right_fourdiv .headm-btn .btn-skew{
        border: 0;
    margin-left: 5px;
    margin-right: 12px;
    
    /* background-color: #003e4d; */
}

.shreya_about_main_right_fourdiv a::before{
    content: "";
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    height: 100%;
    width: 0%;
    top: 0;
    left: 0px;
    transition-timing-function: ease-in-out;
    z-index: -1;
    
}
.shreya_about_main_right_fourdiv a{
    color: #fff;
    font-family: 'Roboto', sans-serif;
    
    
}

.shreya_about_main_right_fourdiv a span{
    padding: 0;
    transform: skewX(12deg);
    display: inline-block;
    /* font-weight: 600; */
    font-size: 14px;
}
.shreya_about_main_right_fourdiv a::after{
        content: "";
    position: absolute;
    background: linear-gradient(#0b7e9b, #084252);
    height: 100%;
    width: 7px;
    right: -12px;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
}