body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background-image: url(images/ensign-background-image.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.container {
    width: 1300px;
    margin: auto;
}

.logo {
    width: 100%;
    text-align: center;
}

.logo img {
    width: 200px;
    background-color: #000000;
    border-radius: 0px 0px 20px 20px;
    padding: 0px 10px 20px 10px;
}

.video-section {
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-section .container {
    display: flex;
    gap: 50px;
    z-index: 1;
}

.video-left {
    width: 25%;
    text-align: right;
}

.btn-section,
.btn-section1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-direction: column;
    width: 35%;
}

.btn-section a,
.btn-section1 a {
    font-family: "Roboto", Sans-serif;
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
    background-color: #3993E3;
    border-radius: 10px;
    padding: 20px 30px 20px 30px;
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
    text-align: center;
    display: block;
    width: 90%;
}

.btn-section a:hover {
    background-color: #063C63;
    transition: 0.3s;
    padding: 25px 35px;
    font-size: 24px;
    width: 95%;
}

.btn-section1 a {
    background-color: #ffffff;
    color: #000000;
}

.btn-section1 a:hover {
    background-color: #063C63;
    color: #ffffff;
    transition: 0.3s;
    padding: 25px 35px;
    font-size: 24px;
    width: 95%;
}

#video-container {
    overflow: hidden;
}

#video {
    width: 100%;
    animation: fadeInAnimation2 ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation2 {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

.video-main {
    width: 100%;
    animation: videoanimation ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes videoanimation {
    0% {
        opacity: 1;
        height: 100vh;
        width: 100%;
    }

    90% {
        opacity: 1;
        height: 100vh;
        width: 100%;
    }

    100% {
        opacity: 0;
        height: 0px;
        display: none;
        width: 100%;
    }
}

#main-section {
    animation: contentsection ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes contentsection {
    0% {
        opacity: 0;
        height: 0px;
        display: none;
        overflow: hidden;
    }

    90% {
        opacity: 0;
        height: 0px;
        display: none;
    }

    100% {
        opacity: 1;
        height: auto;
        display: block;
    }
}


@media only screen and (min-width: 768px) and (max-width:1023px) {

    .container {
        width: auto;
        margin: auto;
    }

    .btn-section a {
        padding: 20px;
        width: 88%;
        font-size: 18px;
    }

    .video-section .container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .video-left {
        width: 100%;
        text-align: right;
    }

    .inner-logo {
        width: 100%;
    }

    .btn-section {
        align-items: center;
    }

    .video-section {
        padding: 40px 20px;
    }

    .video-main {
        display: none;
    }

    .btn-section {
        width: 100%;
        text-align: center;
        overflow: hidden;
        order: 3;
        padding-bottom: 40px;
    }

    .btn-section1 {
        width: 100%;
        text-align: center;
        overflow: hidden;
        order: 2;
    }

    .video-left {
        width: 100%;
        text-align: center;
        overflow: hidden;
        order: 1;
    }

    .btn-section a,
    .btn-section1 a {
        width: 100%;
        font-size: 16px;
        padding: 15px 50px;
    }

    @keyframes contentsection {
        0% {
            opacity: 1;
            display: block;
        }

        90% {
            opacity: 1;
            display: block;
        }

        100% {
            opacity: 1;
            display: block;
        }
    }


}


@media only screen and (max-width:767px) {

    .container {
        width: auto;
        margin: auto;
    }

    .btn-section a {
        padding: 20px;
        width: 88%;
        font-size: 18px;
    }

    .video-section .container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .video-left {
        width: 100%;
        text-align: right;
    }

    .inner-logo {
        width: 100%;
    }

    .btn-section {
        align-items: center;
    }

    .video-section {
        padding: 40px 20px;
    }

    /* .video-main {
        display: none;
    } */

    .btn-section {
        width: 100%;
        text-align: center;
        overflow: hidden;
        order: 3;
        padding-bottom: 40px;
    }

    .btn-section1 {
        width: 100%;
        text-align: center;
        overflow: hidden;
        order: 2;
    }

    .video-left {
        width: 100%;
        text-align: center;
        overflow: hidden;
        order: 1;
    }

    .btn-section a,
    .btn-section1 a {
        width: 100%;
        font-size: 16px;
        padding: 15px 50px;
    }

    /* @keyframes contentsection {
        0% {
            opacity: 1;
            display: block;
        }
    
        90% {
            opacity: 1;
            display: block;
        }
    
        100% {
            opacity: 1;
            display: block;
        }
    } */


    .btn-section1 a:hover {
        font-size: 16px !important;
        padding: 15px 50px !important;
    }

    .btn-section1 a:hover {
        background-color: #063C63;
        color: #ffffff;
        transition: 0.3s;
        padding: 15px 50px;
        ;
        font-size: 16px;
        width: 100%;
    }

    .video-main {
        display: flex;
        justify-content: center;
        align-items: center;
    }


}