/* ============================= SECTION TWO ============================= */

.two-section {
    padding: 7.847vw 5.138vw 4.163vw 5.138vw;   
    background: #ebffe6;
    display: flex;
}
.two-section .left-ctn {
    display: flex;
    flex-direction: column;
    border-radius: 10px 0 0 10px;
    gap: 1vw;
    height: 36vw;
    background: #FFF;
    padding: 2.77vw;
    width: 41.211vw;
}
.two-section .left-ctn .title{
    font-family: var(--font-name);
    font-weight: 700;
    font-size: 3.33vw;
    line-height: 3.88vw;
    text-transform: capitalize;
    color: #0071BC;
}
.two-section .left-ctn .content,
.two-section .left-ctn .content p {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.66vw;
    line-height: 2.82vw;
    /* text-transform: capitalize; */
    color: black;
}
.two-section figure {
    position: relative;
    width: 48.75vw;
    height: 36vw;
    margin: 0;
}
.two-section figure::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 2vw 2vw 0;
    background: radial-gradient(118.36% 118.36% at 50% -18.36%, #1A1A1A 0%, rgba(14, 14, 14, 0.24) 47.6%, #040404 100%);
}
.two-section figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 2vw 2vw 0;
}

/* ============================= SECTION THREE ============================= */

.three-section {
    background: #ffffff;
    padding: 4.847vw 5.138vw 4.163vw 5.138vw;   
}
.three-section .content-details {
    /* background: linear-gradient(360deg, #2D2D2D 0%, rgba(26, 26, 26, 0.74) 100%); */
    background: linear-gradient(360deg, #ebffe6 0%, rgb(255 255 255 / 74%) 100%);
    padding: 4.16vw 7.22vw 4.16vw 7.22vw;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 1.94vw;
    justify-content: center;
    border: 1px solid #ffffff1a;
}
.three-section .content-details .title {
    font-family: var(--font-name);
    font-weight: 700;
    font-size: 3.33vw;
    line-height: 3.88vw;
    text-transform: none;
    /* color: #0071BC; */
    color: var(--secondary-color);
    text-align: center;
}
.three-section .content-details .descr {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.66vw;
    line-height: 2.22vw;
    text-align: center;
    text-transform: capitalize;
    color: white;
    width: 100%;
    padding: 0vw 5vw;
}
.three-section .content-details figure {
    width: 100%;
    height: 25.76vw;
    position: relative;
}
.three-section .content-details figure::after {
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: radial-gradient(118.36% 118.36% at 50% -18.36%, #1A1A1A 0%, rgba(14, 14, 14, 0.24) 47.6%, #040404 100%);
    border-radius: 10px;
}
.three-section .content-details figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.three-section .details {
    display: flex;
    gap: 8.81vw;
    width: 100%;
}
.three-section .details .left-ctn {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.69vw;   
}
.three-section .details .left-ctn .element {
    width: 100%;
    content: "";
    height: .21vw;
    background: var(--secondary-color);
    /* border-image-source: linear-gradient(50.27deg, #00A651 27.17%, #0071BC 72.83%); */
    /* background: linear-gradient(50.27deg, #00A651 27.17%, #0071BC 72.83%); */
    border: 1px solid;
    left: 0;
    position: relative;
}
.three-section .details .left-ctn .element::after {
    content: "";
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    background: var(--secondary-color);
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    display: block;
    position: absolute;
}
.three-section .details .left-ctn .top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1vw;
}
.three-section .details .left-ctn .top .icon {
    width: 4vw;
    height: 4vw;
}
.three-section .details .left-ctn .top .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.three-section .details .left-ctn .top .text {
    font-family: var(--font-name);
    font-weight: 900;
    font-size: 2.22vw;
    line-height: 2.77vw;
    text-transform: capitalize;
    color: #999999;
}
.three-section .details .left-ctn p.descr {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.411vw;
    line-height: 2.416vw;
    text-transform: initial;
    color: #000;
    text-align: left;
    padding: 0;
}

/* ============================= SECTION SERVICES ============================= */

.services {
    display: flex;
    flex-direction: column;
    background: white;
    gap: 4vw;
    padding: 4.916vw 5.138vw 4.163vw 5.138vw;      
}
.services .top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.4vw;
}
.services .top .title {
    font-family: var(--font-name);
    font-weight: 800;
    font-size: 4.44vw;
    line-height: 4.86vw;
    text-align: center;
    text-transform: capitalize;
    color: #0071BC;
}
.services .top .descr {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.66vw;
    line-height: 2.22vw;
    text-align: center;
    text-transform: initial;
    color: #999999;
    width: 70%;
}

.services .list-details {
    display: flex;
    gap: 1.666vw;
    height: 52.70vw;
    width: 100%;
}
.services .list-details .details-col {
    display: flex;
    flex-direction: column;
    gap: 1.666vw;
    width: 30%;
}
.services .list-details .details-col.inverse {
    flex-direction: column-reverse;
    width: 40%;
}
.services .list-details .details-col figure {
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.services .list-details .details-col figure::after {
    position: absolute;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 10px;
    background: linear-gradient(180.3deg, rgba(0, 113, 188, 0.69) 0.26%, rgba(0, 166, 81, 0.69) 99.74%);
}
.services .list-details .details-col figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transform: scale(1);
    transition: all .5s ease-in-out;
}
.services .list-details .details-col:hover figure img {
    border-radius: 10px;
    transform: scale(1.2);
    transition: all .5s ease-in-out;
}
.services .list-details .details-col .details {
    display: flex;
    flex-direction: column;
    gap: 0.972vw;
    padding: 2.77vw 3.68vw;
    background: linear-gradient(360deg, rgba(26, 26, 26, 0.74) 0%, #2D2D2D 100%);
    border-radius: 10px;
}
.services .list-details .details-col .details .title {
    font-family: var(--font-name);
    font-weight: 900;
    font-size: 2.22vw;
    line-height: 2.77vw;
    text-transform: initial;
    color: white;
}
.services .list-details .details-col .details .content {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.11vw;
    line-height: 1.666vw;
    text-transform: initial;
    color: white;
}

/*===================== RESPONSIVE OF HEADER__WEBSITE ===========================*/

@media (max-width:768px) {
   
    .two-section {
        padding: 7.847vw 5.138vw 4.163vw 5.138vw;
        flex-direction: column;
    }
    .two-section .left-ctn {
        gap: 3vw;
        height: auto;
        padding: 3.77vw;
        width: 100%;
        border-radius: 10px 10px 0px 0px;
    }
    .two-section .left-ctn .title {
        font-weight: 700;
        font-size: 6.33vw;
        line-height: normal;
    }
    .two-section .left-ctn .content, .two-section .left-ctn .content p {
        font-weight: 300;
        font-size: 4.66vw;
        line-height: 8vw;
    }
    .two-section figure {
        width: 100%;
        height: 65.61vw;
    }
    .two-section figure img {
        object-fit: cover;
        border-radius: 0 0 10px 10px;
    }
    .three-section .content-details {
        padding: 4.16vw .22vw 4.16vw .22vw;
    }
    .three-section .content-details .title {
        font-weight: 300;
        font-size: 6.33vw;
        line-height: normal;
        text-transform: capitalize;
    }
    .three-section .content-details .descr,
    .three-section .content-details .descr p {
        font-family: var(--font-name);
        text-align: left;

        font-weight: 300;
        font-size: 4.66vw;
        line-height: normal;
    }
    .three-section .content-details figure {
        width: 100%;
        height: 50.76vw;
    }
    .three-section .details {
        flex-direction: column;
        gap: 8.81vw;
        width: 100%;
        padding: 2vw;
    }
    .three-section .details .left-ctn {
        gap: 2.69vw;
    }
    .three-section .details .left-ctn .top .icon {
        width: 10vw;
        height: 10vw;
    }
    .three-section .details .left-ctn .top .text {
        font-weight: 500;
        font-size: 5.22vw;
        line-height: normal;
    }
    .three-section .details .left-ctn p.descr {
        font-weight: 400;
        font-size: 4.11vw;
        line-height: normal;
    }
    .three-section .details .left-ctn .element::after {
        width: 4vw;
        height: 4vw;
    }


    .services .top .title {
        font-weight: 800;
        font-size: 6.44vw;
        line-height: normal;
    }
    .services .top .descr {
        font-weight: 400;
        font-size: 3.66vw;
        line-height: normal;
        width: 100%;
    }
    .services .list-details {
        flex-direction: column;
        gap: 1.666vw;
        height: auto;
    }
    .services .list-details .details-col.inverse,
    .services .list-details .details-col {
        flex-direction: column-reverse;
        gap: 2.666vw;
        width: 100%;
    }
    .services .list-details .details-col figure {
        width: 100%;
        height: 65vw;
        margin: 0;
    }
    .services .list-details .details-col .details {
        gap: 1.972vw;
        padding: 3.77vw 5.68vw;
    }
    .services .list-details .details-col .details li {
        color: white;
        font-size: 4vw;
    }
    .services .list-details .details-col .details .title {
        font-weight: 500;
        font-size: 6.22vw;
        line-height: normal;
    }
    .services .list-details .details-col .details .content {
        font-family: var(--font-name);
        font-weight: 100;
        font-size: 4.11vw;
        line-height: normal;
    }

}