body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
    background: linear-gradient(80deg, #01398b 13%, #001655 56%);

}

#resizable {
    width: 1080px;
    height: 1920px;
    text-align: center;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    overflow: hidden !important;
}

.centerpage {
    width: 1080px;
    height: 1920px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    overflow: hidden !important;
}

.back {
    position: absolute;
    left: 40px;
    top: 40px;
}

.back img {
    width: 100px;
    cursor: pointer;
}

.circelbackround {
    width: 100%;
    position: absolute;
    top: 21%;
}

.circelbackround img {}

.page_one {


    .shape {
        position: absolute;
        top: 520px;
        left: 30px;
    }

    .shape img {
        width: 950px;
    }

    .logo {
        position: absolute;
        top: 31%;
    }

    .logo img {
        width: 700px;
    }

    .discover {
        position: absolute;
        top: 51%;
        color: white;
        font-size: 80px;
    }

    .circels {
        position: absolute;
        top: 68%;
    }

    .circels .main {
        position: relative;
    }

    .circels .circaleimage img {
        width: 500px;
    }

    .circels .arrow {
        position: absolute;
        width: fit-content;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #696b74;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 10px solid #e0e2eb;
        cursor: pointer;
    }

    .circels .arrow img {
        width: 70px;
    }
}


.secound_page {
    .cards {
        display: flex;
        overflow: auto;
        width: 95%;
        height: 80%;
        position: absolute;
        top: 10%;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: space-between;
        align-items: flex-start;
        cursor: pointer;
    }

    .cards .card {
        width: calc((95% / 3) - 10px);

    }

    .cards .card img {
    height: 500px;
    object-fit: contain;

    }

    .cards .programe_name {
        bottom: 60px;
        background: #315cab87;
        position: relative;
        z-index: -1;
        color: white;
        font-size: 40px;
        font-family: system-ui;
        font-weight: 500;
        padding-bottom: 20px;
    }

    .cards .programe_name span,
    .cards .programe_name {
        width: 100%;
        min-height: 80px;
        height: auto;
        padding-top: 85px;
    }
}



/* page 2 */
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#resizable {
    animation: fade-in 1s 0.2s both;
    -webkit-animation: fade-in 1s 0.2s both;
}