*{
    margin: 0;
    padding: 0;
}


  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');

.hero_container{
    position: absolute;
  width: 1440px;
height: 850px;
left: 0px;
top: 0px;
background: #004729;
}

.header{
    position: absolute;
    width: 1440px;
    height: 90px;
    left: 0px;
    top: 1px;
    display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
gap: 83px;
}

.header_logo{
    position: absolute;
width: 105px;
height: 46px;
left: 60px;
top: 22px;
}

.header_logo_content{
    font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 40px;
line-height: 46px;
color: #FFFFFF;
}

.header_link{
    width: 854px;
height: 20px;
position: relative;
Top: 2px;
Left: 173.5px
}

.header_links{
    display: flex;
flex-direction: row;
align-items: flex-start;
padding: 0px;
gap: 34px;
}

.header_links_content{
    font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 20px;
color: #EEEDE3;
text-decoration: none;
list-style: none;
}

.dropdown_sticky{
    position: static;
}

.school_link{
    color: #CCFF00;
    position: relative;
    top: -11px;
}

.header_text_btn{
    width: 249px;
height: 38px;
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 22px;
margin-right: 20px;
}

.header_text{
    font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 20px;
color: #FFFFFF;
display: flex;
align-items: center;
letter-spacing: 0.02em;
text-transform: uppercase;
flex: none;
order: 0;
flex-grow: 0;
margin-top: 18px;
}

.header_btn{
    font-family: "Montserrat";
    font-weight: 500;
    font-size: medium;
    display: flex;
flex-direction: row;
align-items: center;
padding: 5px 20px 6px;
background: #EDF0C4;
border-radius: 40px;
flex: none;
order: 1;
flex-grow: 0;
}

.hero_img{
    box-sizing: border-box;
position: absolute;
width: 1634px;
height: 791px;
left: -194px;
top: 82px;
border: 1px solid #000000;
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.hero_text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    position: absolute;
width: 374px;
height: 176px;
left: 1026px;
top: 330px;
}

.hero_text_content{
    width: 374px;
height: 114px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-size: 48px;
line-height: 38px;
/* or 79% */

display: flex;
align-items: center;
text-transform: uppercase;
color: #EDF0C4;
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}

.hero_btn{
    display: flex;
flex-direction: row;
align-items: center;
padding: 5px 24px 8px;
font-family: "Montserrat";
font-weight: 600;
font-size: medium;
width: 249px;
height: 38px;
background: #CCFF00;
border-radius: 40px;
flex: none;
order: 1;
flex-grow: 0;
}

.school{
    position: relative;
    max-width: 1450px;
    height: 580px;
    left: 0px;
    top: 80px;    
    box-shadow: 10px 14px 40px #C4C7A6;
}

.school_length{
    position: relative;
    top: -7px;
    width: 1440px;
    height: 580px;
    background-color: #F3F5D9;
}

.school_left{
    display: flex;
    flex: 1;
}

.school_detail{
    display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 28px;

position: absolute;
width: 440px;
height: 170px;
left: 60px;
top: 78px;
}

.school_detail_1{
    width: 440px;
height: 26px;

font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
font-size: 32px;
line-height: 26px;

text-transform: uppercase;


color: #004729;

flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}

.school_detail_2{
    width: 440px;
height: 46px;

/* paragraph/p1/recoleta */

font-family: 'Recoleta';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 23px;
/* or 144% */


/* Primary/Charcoal */

color: #282829;


/* Inside auto layout */

flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
}

.school_detail_3{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 24px;
    
    width: 331px;
    height: 42px;
    
    
    /* Inside auto layout */
    
    flex: none;
    order: 1;
    flex-grow: 0;
}

.school_detail_3_btn_1{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7px 20px 10px;
    font-weight: 700;
    width: 119px;
    height: 42px;
    color: #004729;
    /* Primary/Lime */
    
    background: #CCFF00;
    border-radius: 40px;
    
    /* Inside auto layout */
    
    flex: none;
    order: 0;
    flex-grow: 0;
}

.school_detail_3_btn_2{
    box-sizing: border-box;

/* Auto layout */

display: flex;
flex-direction: row;
align-items: center;
padding: 12px 20px 10px;
font-weight: 700;
width: 199px;
height: 42px;
color: #004729;

/* Primary/Forest */

border: 1px solid #004729;
border-radius: 40px;

/* Inside auto layout */

flex: none;
order: 1;
flex-grow: 0;
}

.school_detail_4{
    display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;

position: absolute;
width: 375px;
height: 216px;
left: 0px;
top: 226px;
}


.school_detail_4_2{
    box-sizing: border-box;

/* Auto layout */

display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 16px 30px;
gap: 6px;
font-weight: 700;
color: #004729;

width: 375px;
height: 54px;

border-bottom: 1px solid #C2C598;

/* Inside auto layout */

flex: none;
order: 1;
flex-grow: 0;
}

.school_line{
    
position: absolute;
width: 580px;
height: 0px;
left: 182px;
    top: 210px;

border: 1px solid #D0D2B3;
transform: rotate(90deg);
}

.school_right_img{
    position: absolute;
width: 805px;
height: 450px;
left: 592px;
    top: 61px;

border-radius: 10px;
}

.preschool_length{
    width: 500px;
    height: 500px;
    background-color: #004729;
}


  

@media screen and (max-width:840px){
    .hero_container{
        position: absolute;
        height: 1500px;
        }
        .header {
            display: flex;
            flex-direction: column;
          }
          .header_logo{
              position: relative;
              left: -334px;
          }
          .header_logo_content{
            font-size: 40px;
          }
          .header_links{
            display: flex;
            flex-direction: column;
            gap: 35px;
            justify-content: center;
            align-items: center;
        }
        .header_link{
            position: relative;
            left: -346px;
        }
        .school_link{
            margin-left: -10px;
        }
        .header_links_content{
            font-size: 27px;
        }
        .dropdown{
            top: 17px;
        }
        .header_text_btn{
            position: relative;
            left: -370px;
            top: 303px;
        }
        .header_text{
            font-size: 25px;
        }
        .header_btn{
            padding: 10px 28px 12px;
        }
        .hero_img{
            border: none;
            position: relative;
            left: 0px;
            top: 682px;
        }
        .hero_img_content{
            width: 800px;
            height: 500px;
        }
        .hero_text{
            position: relative;
            left: 32rem;
            top: 5rem;
            gap: 0px;
          }
          .hero_text_content{
            font-size: 31px;
            line-height: 26px;
          }
          .hero_btn{
              padding: 7px 24px 7px;
              font-weight: 600;
              font-size: 13px;
              width: 212px;
              position: relative;
              top: -1rem;
          }
          .school_length{
            max-width: 810px;
            height: 1150px;
            position: relative;
            left: 0px;   
            display: flex;     
            flex-direction: column;
        }
        .school_detail{
            left: 217px;
            gap: 37px;
            align-items: center;
        }
        .school_detail_1{
          margin-left: 1rem;
        }
        .school_detail_3{
            margin-right: 2rem;
        }
        .school_detail_4{
            top: 268px;
        }
        .school_right{
            position: relative;
            left: 60px;
            top: 5rem;
        }
        .school_right_img{
            width: 552px;
            left: 74px;
            height: 370px;
            top: -32rem;
          }
          .school_line{
            width: 900px;
            left: -222px;
            top: 35rem;
            transform: rotate(0deg);
          }
        



}

@media only screen and (max-width: 508px) {
    .hero_container{
    position: absolute;
    height: 1000px;
    }
    .header {
      display: flex;
      flex-direction: column;
    }
    .header_logo{
        position: relative;
        left: -467px;
    }
    .header_links{
        display: flex;
        flex-direction: column;
        gap: 30px;
        justify-content: center;
        align-items: center;
    }
    .header_link{
        position: relative;
        left: -476px;
        
    }
    .school_link{
        margin-left: -10px;
    }
    .header_links_content{
        font-size: 25px;
    }
    .dropdown{
        top: 15px;
    }
    .header_text_btn{
        position: relative;
        left: -507px;
        top: 263px;
    }
    .header_text{
        font-size: 22px;
    }
    .header_btn{
        padding: 7px 25px 9px;
    }
    .hero_img{
        border: none;
        position: relative;
        left: 0px;
        top: 600px;
    }
    .hero_img_content{
        width: 482px;
        height: 300px;
    }
    .hero_text{
      position: relative;
      left: 14rem;
      top: -5rem;
      gap: 0px;
    }
    .hero_text_content{
       font-size: 27px;
       line-height: 25px;
    }
    .hero_btn{
        padding: 7px 24px 7px;
        font-weight: 600;
        font-size: 13px;
        width: 212px;
        position: relative;
        top: -1rem;
    }
    .school_length{
        max-width: 509px;
        height: 1005px;
        position: relative;
        left: 0px;   
        display: flex;     
        flex-direction: column;
    }
    .school_right{
        position: relative;
        left: 0px;
        top: 10rem;
    }
    .school_right_img{
        width: 352px;
        left: 74px;
        height: 270px;
        top: -32rem;
      }
      .school_line{
        width: 509px;
        left: -60px;
        top: 32rem;
        transform: rotate(0deg);
      }

    }