* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    scrollbar-width: none;
}

/* this code for seaction number 1 */

.header {
    background-color: orange;
    width: 70%;
    height: 40px;
    margin-left: 15%;
    position: relative;
}

.header span {
    position: absolute;
    text-decoration: underline;
    top: 10px;

}

.header .number {
    right: 80px;
    font-size: 20px;

}

.header .user {
    right: 260px;
    font-size: 20px;
}

.header .email {
    font-size: 20px;

    right: 450px;
}

/* div up header */
.div_seaction_1 {
    width: 70%;
    height: 85vh;
    margin-left: 15%;
    position: relative;
}

.div_seaction_1 h1 {
    position: absolute;
    color: white;
    font-size: 50px;
    top: 10%;
    left: 20px
}

.div_seaction_1 p {
    font-size: 33px;
    color: white;
    position: absolute;
    width: 90%;
    height: 50%;

    top: 30%;
    left: 20px;
    line-height: 45px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    white-space: normal;
    overflow: hidden;
}


.div_seaction_1 a {
    /* text-decoration: none; */
    color: white;
    background-color: orange;
    border-radius: 10px;
    padding: 20px;
    position: absolute;
    bottom: 40px;
    left: 40%;
}

/* fin code for section  number 2 */
.section_number_2 {
    position: relative;
    width: 70%;
    margin-left: 15%;

}

.section_numbre_2_div_1 {
    width: 50%;
}

.section_number_2_div_has_2_div {
    position: relative;
}

.image_for_section_number_2_img_1 {
    width: 132px;
    height: 130px;
}

.image_for_section_number_2_img_2 {
    width: 200px;
    height: 170px;
}

.image_for_section_number_2,
.image_for_section_number_3 {
    margin-left: -4px;
}

.image_for_section_number_5 {
    margin-left: -8px;
}

.image_for_section_number_5,
.image_for_section_number_4 {
    position: relative;
    top: -4px;
}
/* this code for div number 2 ha section 2 */
.section_number_2_div_2{
    position: absolute;
    right:20px;
    width: 50%;
    top:0px;
}

.section_number_2_span_5{
    color:greenyellow;
}
.section_number_2_div_2 ul{
    margin-left: 30px;
}

.section_number_2_div_4{
    text-align: center;
}
.section_number_2_div_4 h2{
    color: orange;
}
.section_number_2_div_4 a{
    background-color: orange;
    color: white;
    padding: 20px 30px;
    border-radius: 4px;
}

footer{
    position: relative;
}
.div_footer_number_1,.div_footer_number_2, .div_footer_number_3{
    position: absolute;  
}
.div_footer_number_1{
    margin-left: 10%;
}
.div_footer_number_2{
    margin-left: 40%;
}
.div_footer_number_3{
    margin-left: 70%;
}
.div_footer_number_2 ul a{
    color: black;
}
.div_footer_number_2 ul{
    list-style-type: none;
}

.div_footer_number_3 ul{
    margin-left: 15px;
}
/* ============================================ */
/* RESPONSIVE STYLES */
/* ============================================ */

/* Tablets and smaller laptops (max-width: 1024px) */
@media (max-width: 1024px) {
    .header {
        width: 90%;
        margin-left: 5%;
    }

    .header .email {
        right: 350px;
        font-size: 18px;
    }

    .header .user {
        right: 200px;
        font-size: 18px;
    }

    .header .number {
        right: 50px;
        font-size: 18px;
    }

    .div_seaction_1 {
        width: 90%;
        margin-left: 5%;
    }

    .div_seaction_1 h1 {
        font-size: 40px;
    }

    .div_seaction_1 p {
        font-size: 28px;
        line-height: 40px;
    }
}

/* Tablets portrait mode (max-width: 768px) */
@media (max-width: 768px) {
    .header {
        width: 95%;
        margin-left: 2.5%;
        height: auto;
        padding: 15px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .header span {
        position: static;
        font-size: 16px;
    }

    .div_seaction_1 {
        width: 95%;
        margin-left: 2.5%;
        height: auto;
        min-height: 85vh;
        padding: 20px 10px;
    }

    .div_seaction_1 h1 {
        font-size: 32px;
        top: 5%;
        left: 10px;
    }

    .div_seaction_1 p {
        font-size: 22px;
        line-height: 32px;
        top: 20%;
        left: 10px;
        width: 95%;
    }

    .div_seaction_1 a {
        left: 50%;
        transform: translateX(-50%);
        bottom: 30px;
        padding: 15px 25px;
        font-size: 16px;
    }
}

/* Mobile devices (max-width: 480px) */
@media (max-width: 480px) {
    .header {
        width: 100%;
        margin-left: 0;
        padding: 12px 8px;
        gap: 8px;
    }

    .header span {
        font-size: 14px;
    }

    .div_seaction_1 {
        width: 100%;
        margin-left: 0;
        padding: 15px 8px;
    }

    .div_seaction_1 h1 {
        font-size: 24px;
        top: 3%;
        left: 8px;
    }

    .div_seaction_1 p {
        font-size: 18px;
        line-height: 26px;
        top: 15%;
        left: 8px;
        width: 95%;
    }

    .div_seaction_1 a {
        padding: 12px 20px;
        font-size: 14px;
        bottom: 20px;
    }
}

/* Very small mobile devices (max-width: 360px) */
@media (max-width: 360px) {
    .header span {
        font-size: 12px;
    }

    .div_seaction_1 h1 {
        font-size: 20px;
    }

    .div_seaction_1 p {
        font-size: 16px;
        line-height: 24px;
    }

    .div_seaction_1 a {
        padding: 10px 15px;
        font-size: 13px;
    }
}

/* this code css for respenseve for section number 2 */
/* Tablet and smaller screens */
@media screen and (max-width: 1024px) {
    .section_number_2_div_2 {
        width: 55%;
        right: 15px;
    }
    
    .section_numbre_2_div_1 {
        width: 40%;
    }
}

/* Mobile landscape and smaller tablets */
@media screen and (max-width: 768px) {
    .section_number_2_div_has_2_div {
        position: relative;
    }
    
    .section_number_2_div_2 {
        position: relative;
        width: 100%;
        right: 0;
        top: 0;
        margin-top: 20px;
        padding: 0 15px;
    }
    
    .section_numbre_2_div_1 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    
    .section_numbre_2_div_1 img {
        width: calc(50% - 5px);
        height: auto;
    }
    
    .section_number_2_div_2 h2 {
        font-size: 24px;
    }
    
    .section_number_2_div_2 ul {
        margin-left: 20px;
    }
    
    .section_number_2_div_3 h2 {
        font-size: 28px !important;
    }
    
    .section_number_2_div_3 h3 {
        font-size: 20px;
    }
}

/* Mobile portrait */
@media screen and (max-width: 480px) {
    .section_number_2_div_2 {
        padding: 0 10px;
    }
    
    .section_numbre_2_div_1 img {
        width: 100%;
    }
    
    .section_number_2_div_2 h2 {
        font-size: 20px;
    }
    
    .section_number_2_div_2 ul {
        margin-left: 15px;
        font-size: 14px;
    }
    
    .section_number_2_span_1,
    .section_number_2_span_2,
    .section_number_2_span_3,
    .section_number_2_span_4,
    .section_number_2_span_5 {
        font-size: 14px;
    }
    
    .section_number_2_div_3 h2 {
        font-size: 22px !important;
    }
    
    .section_number_2_div_3 h3 {
        font-size: 18px;
    }
    
    .section_number_2_div_3 p {
        font-size: 14px;
    }
    
    .section_number_2_div_4 h2 {
        font-size: 18px;
    }
    
    .section_number_2_div_4 a {
        font-size: 14px;
        padding: 10px 15px;
    }
}