* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    
}

html,
body {
    height: 100%;
    width: 100%;
   overflow-x: hidden;
}

.side_note {
    width: 30%;
    height: 44px;
    background: #FFE6E6;
    border-radius: 0px 20px 20px 0px;
    display: flex;
    align-items: center;
    justify-content: start;
    text-align: left;
    font-weight: bold;
    font-size: 20px;
    padding-left: 2%;
    letter-spacing: 0.05rem;
}

/* section_1 */
.section_1{
    min-height:50dvh ;
    background-image: url(./images/Group%208.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow-x: hidden;
}
.section_1 h1{
font-style: normal;
font-weight: 800;
font-size: 100px;
line-height: 234px;
letter-spacing: 0.13em;
color: #002C4F;
text-shadow: 5px 8px 10px rgba(0, 0, 0, 0.5);
}
.sec1_img{
    height: 500px;
}
.sec1_img img{
    height: 100%;
}
.sec1_line1{
    width: 100%;
    background-color:#005C93;
    height: 1rem;
}
.sec1_line2{
    width: 100%;
    background-color:#60BADE;
    height: 0.5rem;
}

/* section_2 & section_3*/
.section_2,
.section_3,
.section_8 {
    padding: 4%;
}

.section_2 p,
.section_3 p,
.sec15_content p {
    font-size: 18px;
}

/* section_4 & section_6*/
.section_4,
.section_6,
.section_8 ,
.section_12,
.section_15{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.sec4_img,
.sec6_img ,
.sec12_img,
.sec15_img{
    height: 320px;
}

.sec4_img img,
.sec6_img img,
.sec12_img img ,
.sec15_img img{
    height: 100%;
}

.sec4_content ol li {
    font-size: 18px;
}

/* section_5 */
.section_5 {
    min-height: 70dvh;
    background-image: url(./images/sec_5bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 7% 15% 4% 15%;
}

/* section_6 */
.sec6_content {
    width: 60%;
    padding: 5%;
}

/* section_7 */
.section_7,
.section_9,
.section_11,
.section_12 ,
.section_13,
.section_14,
.section_15,
.section_16{
    padding: 4% 10% 4% 10%;
}

/* section_8 */
.sec8_color{
    display: flex;
    align-items: center;
    gap: 40px;
}
.color1 {
    background: #FFE6E6;
    border-radius: 30px;
    width: 100px;
    height: 250px;
    writing-mode: vertical-lr;
    padding-top: 40%;
    padding-left: 2%;
}
.color2 {
    background: #72ABFF;
    border-radius: 30px;
    width: 100px;
    height: 250px;
    writing-mode: vertical-lr;
    padding-top: 40%;
    padding-left: 2%;
}
.color3 {
    background: #D9D9D9;
    border-radius: 30px;
    width: 100px;
    height: 250px;
    writing-mode: vertical-lr;
    padding-top: 40%;
    padding-left: 2%;
}

/* MEDIA */
@media (min-width:280px) and (max-width:575px) {
    .sec1_img {
        height: 350px;
    }
    .sec8_color {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .color1,
    .color2,
    .color3{
        width: 70px;
        height: 200px;
    }
    .section_1 h1{
        font-size: 40px
    }
    .side_note {
        width: 80% ;
    }
    .section_2, .section_3, .section_8 {
        padding: 4%;
    }
    .section_2 p,
     .section_3 p,
     .sec4_content ol li,
     .section_5 ul li,
     .sec6_content ul li,
     .section_7 ol li,
     .section_9 ol li,
     .section_11 ol li,
     .sec15_content p {
        font-size: 14px;
    }
   
    .section_4, .section_6, .section_8,.section_12, .section_15  {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        justify-content: space-around;
    }
    .sec4_img, .sec6_img, .sec12_img, .sec15_img{
        height: 220px;
    }
    .section_5 ,
    .sec6_content,
    .section_7, .section_9, .section_11 {
        width: 100%;
        padding: 4%;
    }
}
@media (min-width:360px) and (max-width:575px) {
    .sec1_img {
        height: 400px;
    }
    .sec8_color {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .color1,
    .color2,
    .color3{
        width: 90px;
        height: 240px;
    }
    .section_1 h1{
        font-size: 50px
    }
    .side_note {
        width: 80% ;
    }
    .section_2, .section_3, .section_8 {
        padding: 4%;
    }
    .section_2 p,
    .section_3 p,
    .sec4_content ol li,
    .section_5 ul li,
    .sec6_content ul li,
    .section_7 ol li,
    .section_9 ol li,
    .section_11 ol li,
    .sec15_content p {
       font-size: 14px;
   }
    .section_4, .section_6, .section_8 ,.section_12, .section_15 {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        justify-content: space-around;
    }
    .sec4_img, .sec6_img, .sec12_img, .sec15_img {
        height: 220px;
    }
    .section_5 ,
    .sec6_content,
    .section_7, .section_9, .section_11 {
        width: 100%;
        padding: 4%;
    }
}
@media (min-width:576px) and (max-width:767px) {
    .section_1 h1{
        font-size: 70px
    }
    .side_note {
        width: 40% ;
    }
    .section_2, .section_3, .section_8 {
        padding: 2%;
    }
    
    .section_2 p,
    .section_3 p,
    .sec4_content ol li,
    .section_5 ul li,
    .sec6_content ul li,
    .section_7 ol li,
    .section_9 ol li,
    .section_11 ol li,
    .sec15_content p {
        font-size: 16px;
   }
    .section_4, .section_6, .section_8,.section_12, .section_15  {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        justify-content: space-around;
    }
    .sec4_img, .sec6_img, .sec12_img, .sec15_img {
        height: 250px;
    }
    .section_5 ,
    .sec6_content,
    .section_7, .section_9, .section_11 {
        width: 100%;
        padding: 4%;
    }
}
@media (min-width:768px) and (max-width:991px) {
    .section_4, .section_6, .section_8, .section_12, .section_15 {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column-reverse;
    }
    .sec6_content {
        width: 60%;
        padding: 0%;
    }
    .side_note {
        width: 40% ;
    }
   
}