body .main-body{
    color: black;
    font-family: 'Poppins', sans-serif !important;
}

body .main-body .banner{
    position: relative;
}

body .main-body .newadmission{
    position: absolute;
    top: 25rem;
    left: 36rem;
    z-index: 99;
}

body .main-body .newadmission .text{
    font-size:x-large;
    animation: color-change 1.2s infinite linear;
}

body .main-body .newadmission .btn{
    border: 3px solid red;
    border-radius: 9px;
    animation: btn-color-change 1.2s infinite linear;
    padding: 0.6rem;
    font-size: large;
    cursor: pointer;
}

@keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}

@keyframes btn-color-change {
    0% {
        background-color: red; 
        border: 3px solid red;
        color: white; 
    }
    50% { 
        background-color: blue; 
        border: 3px solid blue;
        color: white; 
    }
    100% { 
        background-color: red; 
        border: 3px solid red;
        color: white; 
    }
  }

body .main-body .banner center img{
    display: block;
    width: 100%;
    height:24rem;
    margin-bottom: 2rem;
}

body .main-body .welcome {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
    width: 60%;       /* A defined width is required */
    margin-left: auto;
    margin-right: auto;
}

body .main-body .welcome .img{
    animation: pulse-size 1s ease-in-out;
}

body .main-body .welcome .text{
    opacity: 1;
    animation: fade-out 3s ease-in;
}

body .main-body .welcome .img img{
    width: 60vh;
}

li::marker {
    color: rgb(7, 136, 249);
}

body .main-body .motivation{
    display: grid;
    grid-template-columns: auto auto auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 90%;
    justify-content: space-between;
    gap: 2rem;
}

body .main-body .motivation .m1{
    background-color: #EBAC8F;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 12px;
    animation: pulse-size 2s ease-in-out;
}
body .main-body .motivation .m2{
    background-color: #5eeb7a;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 12px;
    animation: pulse-size 2s ease-in-out;
}
body .main-body .motivation .m3{
    background-color: #5abbe5ba;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: 12px;
    animation: pulse-size 2s ease-in-out;
}

body .main-body .About-school-classes{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

body .main-body .About-school-classes .class-box{
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
    width: 60%;       /* A defined width is required */
    margin-left: auto;
    margin-right: auto;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

body .main-body .About-school-classes .class-box .img img{
    width: 60vh;
}

@keyframes pulse-size {
    0% {
      transform: scale(1); /* Original size */
    }
    50% {
      transform: scale(1.5); /* 1.5 times the size */
    }
    100% {
      transform: scale(1); /* Back to original size */
    }
}

@keyframes fade-out {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 600px) {
    body .main-body .newadmission{
        top: 44%;
        left: 4%;
    }

    body .main-body .newadmission .text{
        font-size: large;
    }

    body .main-body .newadmission .btn{
        font-size:small;
    }

    body .main-body .welcome{
        grid-template-columns: auto;
    }

    body .main-body .welcome .text{
        margin-left: auto;
        margin-right: auto;
    }

    body .main-body .welcome .img img{
        width: 30vh;
    }

    body .main-body .motivation{
        grid-template-columns: auto;
    }
}