html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

#banner {
    width: 100%;
    height: 50px;
    background: #111439;
    display: table;
    float: left;

    #bannercont {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        color: aliceblue;
        padding: auto;
    }

    #logo {
        float: left;
        margin-left: 30px;
    }
   
    #button {
        color: aliceblue;
        text-decoration: none;
        font-family: inherit;
        font-size: inherit;
        border: none;
        background: #111439;
    }
    #button:hover {
        text-decoration: underline;
    }

    span {
        margin: 10px;
    }
}

#main {
    background: aliceblue;
    width: 100%;
    float: left;
    h1 {
        color: #111439;
        font-size: 30px;
    }
    p {
        width: 50%;
        font-size: large;
    }
}

.sec {
    display: flex;               
    align-items: flex-start;     
    justify-content: flex-start; 
    padding: 40px;              
    width: 100%;                
    gap: 20px;                  
    border-bottom: 1px solid #ccc;
}

.sec #sec-cont {
    flex: 1;
}

.sec img {
    max-width: 20%;
    width: 100%;
    height: auto;
    margin-left: 20px;
    margin-right: 80px;
    border-radius: 8px;

    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease-out;
}

.sec img.show {
    opacity: 1;
    transform: translateX(0);
}

#footer {
    text-align: center; 
    width: 100%;
    padding-top: 20px;
    height: 50px;
    float: left;
    background: rgb(214, 221, 230);
}