/* UNIVERSAL ALIGNMENT*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: hidden;

}

body{
    height: auto;
    width:100%;
    overflow-x: hidden;
  
}

:root{
    --BG-COLOR:rgb(57, 149, 149);
    --BORDER:rgb(177, 174, 174);
}

/* Nav tag alignment */
.nav{
    height: 400px;
    position: sticky;
    top: 0;
}

/* HEADER ALIGNMENT*/

.header{
    height: auto;
    width: 100%;
    background-color: var(--BG-COLOR);
    top: 0;
    display: flex;
    flex-direction: column;
    user-select: none;
    
}
/* HEADER Contact bar*/

#con-btn{
    position: relative;
    top: 270px;
    background-color: transparent;
    border-radius: 50%;
    position: fixed;
    border: none;
}
#con-btn-2{
    position: relative;
    top: 330px;
    background-color: transparent;
    border-radius: 50%;
    position: fixed;
    border: none;
}
#con-btn-2 img{
    border-radius: 50%;
}
/* HEADER reachout Logo */
.logos{
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    border-bottom: 4px solid white;
    border-radius: 50%;    
}
.logos img{
    height: 20px;
    width: 20px;
    background-color: var(--BG-COLOR);  
    justify-content: center;  
}


.logos a{
    border-right: 2px solid var(--BORDER);
    padding-right: 30px;
    align-items: center;
    user-select: none;
   
}
/* HEADER CONTACT*/
.contact{
    height: 50px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
    
    
}

.contact a{
    
    text-decoration: none;
    font-size: 20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    border-right: 2px solid var(--BORDER);
    border-left: 2px solid var(--BORDER);
    box-shadow: 100px black;
    border-radius: 50%;
    padding: 10px;
    color: black;
    
}

/* HEADER Title*/
.title{
    width: 100%;
    height: 100px;
    border-top: 3px solid black;
    background-color: rgb(98, 96, 96);
    display: flex;
    justify-content: center;
    align-content: center; 
    color: azure;   
}

.title h2{
    display: flex;
    align-items: center;
    font-size: 12px;
}

.title h2 .span{
    font-family: "Lobster", sans-serif;
    font-weight: 500px;
    font-style: italic;
    font-size: 35px;   
}

.title img{
    height: 50px;
    width: 40px;
    position: relative;
    top: 10px;
} 

/* MAIN CONTENT DESIGNING */

.main{
    width: 100%;
    height: 360vh;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;;
    position: relative;
}
.nav{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-content: center;
    align-content: center;
    border-bottom: 1px slategray solid;
    background-color: rgb(255, 255, 255);
    height: 70px;
}

.main-box{
   padding-left: 30px;
}
.main-box .logo{
    display: flex;
}
.logo img{
    height: 50px;
    width: 40px;
    
    user-select: none;
    position: relative;
    top: 15px;
}

/* MAIN BAR nav*/
.nav-line{
    
    display: flex;
    justify-content:space-between;
    align-content: center;
    position: relative;   
    padding-top: 30px;
}
.nav-line a{
    text-align: center;
    
    text-decoration: none;
    color: black;
    padding: 10px;
    font-weight: 800;
    user-select: none;
}
.nav-line a:hover{
    color: rgb(19, 151, 151);
    font-size: 18px;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    transition: 0.3s;
    
}

.nav-title{
    font-family: "Lobster", sans-serif;
    font-weight: 500px;
    font-style: italic;
    font-size: 15px; 
    user-select: none; 
}
.logo h2{
    font-size: 10px;
    padding-left: 33px;
    top: 10px;
}

/* MAIN BAR content*/

.content{
    width: 100%;
    height: auto;
    z-index: -1;

}
.content img{
    width: 100%;
    height: 600px;
    position: relative;   
    z-index: -1; 
    position: relative;

}
.main-title{
    position: absolute;
    height: 400px;
    width: 90%;
    top: 200px;
    left: 60px;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 5px black;
    background-color: hsla(0,0%,0%,0.452);  
    display: flex;
    z-index: -1;
    flex-direction: column;
}
.main-title h1{
    font-size: 50px;
    font-weight: 800;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;

}
.main-title p{
    font-size: 20px;
    text-align: center;
}
.main-title button{
    display: none;
}
#title{
    z-index: -1;
}
#all-courses{
    z-index: -1;
}
#about-us{
    z-index: -1;
}
#faculties{
    z-index: -1;
}

/* MAIN BAR courses*/

.course{
    height: 300px;
    width:100%;
    position: absolute;
    top: 670px;
    z-index: -1;   
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}
.course img{
    opacity: 0.2;
    position: absolute;
    height: 100%;
    width: 100%;
    border-bottom-right-radius: 30%;
}
.course1{
    width: 390px;
    height: 300px;
    background-color:#1e529a;
    border-top-left-radius: 30%;
    text-align: center;
    top: 120px;
}
.course2{
    width: 400px;
    height: 300px;
    background-color:#cce320; 
    text-align: center;
}
.course3{
    width: 400px;
    height: 300px;
    background-color:#00eeff;   
    text-align: center;
}
.course4{
    width: 400px;
    height: 300px;
    background-color:brown;
    border-bottom-right-radius: 30%;
    text-align: center;
    
}

/* course 1 */
.core{
    position: absolute;
    width: 250px;
    height: 250px;
    top: 50px;

    align-items: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    position: relative;
    
    
}
.core img{
    opacity: 1;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 100px;
}
.core h3{
    font-size: 20x;
    font-family: "Pacifico", cursive;
    font-weight: 900;
    font-style: normal;
    position: absolute;
    top: 50px;
    width: 100%;
    border-bottom: 2px solid rgb(0, 0, 0);
    border-spacing: 2px;
    padding: 10px;  
    color: whitesmoke; 
}
.core p{
    text-align: justify;
    position: absolute;
    top: 130px;
    overflow: hidden;  
    color: whitesmoke;  
}
.core button{
    position: absolute;
    height: 40px;
    color: #1e529a;
    background-color: aliceblue;
    border-radius: 50%;
    bottom: 1px;
}

.core button,.core-2 button,.core-3 button,.core-4 button{
    animation-name: zoom;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}
@keyframes zoom{
    0%{
        transform: scale(100%);
    }
    50%{
        transform: scale(120%);
    }
    100%{
        transform: scale(100%);
    }
}

/* core 2 */
.core-2{
    position: absolute;
    width: 250px;
    height: 250px;
    top: 50px;

    align-items: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    position: relative;
    
    
}
.core-2 img{
    opacity: 1;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 100px;
}
.core-2 h3{
    font-size: 20x;
    font-family: "Pacifico", cursive;
    font-weight: 900;
    font-style: normal;
    position: absolute;
    top: 50px;
    width: 100%;
    border-bottom: 2px solid rgb(0, 0, 0);
    border-spacing: 2px;
    padding: 10px;  
    color: whitesmoke; 
}
.core-2 p{
    text-align: justify;
    position: absolute;
    top: 130px;
    overflow: hidden;  
    color: whitesmoke;  
}
.core-2 button{
    position: absolute;
    height: 40px;
    color: #1e529a;
    background-color: aliceblue;
    border-radius: 50%;
    bottom: 1px;
}
/* core 3 */
.core-3{
    position: absolute;
    width: 250px;
    height: 250px;
    top: 50px;

    align-items: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    position: relative;
    
    
}
.core-3 img{
    opacity: 1;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 100px;
}
.core-3 h3{
    font-size: 20x;
    font-family: "Pacifico", cursive;
    font-weight: 900;
    font-style: normal;
    position: absolute;
    top: 50px;
    width: 100%;
    border-bottom: 2px solid rgb(0, 0, 0);
    border-spacing: 2px;
    padding: 10px;  
    color: whitesmoke; 
}
.core-3 p{
    text-align: justify;
    position: absolute;
    top: 130px;
    overflow: hidden;  
    color: whitesmoke;  
}
.core-3 button{
    position: absolute;
    height: 40px;
    color: #1e529a;
    background-color: aliceblue;
    border-radius: 50%;
    bottom: 1px;
}


/* COre 4 */
.core-4{
    position: absolute;
    width: 250px;
    height: 250px;
    top: 50px;

    align-items: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    position: relative;
    
    
}
.core-4 img{
    opacity: 1;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 100px;
}
.core-4 h3{
    font-size: 20x;
    font-family: "Pacifico", cursive;
    font-weight: 900;
    font-style: normal;
    position: absolute;
    top: 50px;
    width: 100%;
    border-bottom: 2px solid rgb(0, 0, 0);
    border-spacing: 2px;
    padding: 10px;  
    color: whitesmoke; 
}
.core-4 p{
    text-align: justify;
    position: absolute;
    top: 130px;
    overflow: hidden;  
    color: whitesmoke;  
}
.core-4 button{
    position: absolute;
    height: 40px;
    color: #1e529a;
    background-color: aliceblue;
    border-radius: 50%;
    bottom: 1px;
}

/*  MAIN BAR ABOUT US */

#about-us{
    top: 300px;
    position: relative;
    display: grid;
    grid-template-rows: repeat(2,1fr);
    margin: 50px;
    margin-left: 250px;
    align-content: center;
    justify-content: space-between;
    z-index: -1;
}
.all-about{
    background-color:ghostwhite;
    text-align: justify;
    width: 500px;

}
.all-about h4{
    padding: 10px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 500;
    border-bottom: 2px solid rgb(255, 255, 0);
    width: 90px;
}
.all-about h1{
    font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  text-align: center;
}
.about-us-ul{
    list-style: none;
    
}
.about-us-ul li{
    padding-top: 20px;
    font-family: 'Times New Roman', Times, serif;
}
.about-us-button{
    padding: 10px;
    color: black;
    position: relative;
    top: 70px;
    left: 150px;

}
.ach-img{
    background-image: url(dollar-gill-QKb25xDmxxA-unsplash.jpg);
    background-size: cover;
    background-position: top;
    opacity: 0.2;
    border-radius: 10%;
    width: 500px;
    height: 500px;
    position: relative;
    top: 100px;
}

/* MAIN BAR  achievements*/

.achivement{
    position: absolute;
    right: 160px;
    width: 500px;
    height: 200px;
    top: 500px;
    left: 10px;

}
.achivement h2{
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}
.achivement h4{
    padding-top: 50px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.612);
    border-spacing: 2;
    text-align: center;
}

/* FACULTIES SECTION */

.fac-title{
 

    top:350px;
    z-index: -1;
    position: relative;
    left: 10px;
    font-family: "Kalam", cursive;
    font-weight: 700;
    font-style: normal; 
}
#faculties{

    width: 100%;
    height: auto;
    background: rgb(238,174,212);
    background: linear-gradient(335deg, rgba(238,174,212,1) 11%, rgba(204,187,187,1) 62%, rgba(191,163,160,1) 80%);
    position: relative;
    top: 400px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-content: center;
    align-content: center; 
    z-index: -1;
    border-radius: 10%; 
}

.teacher-1{
    width: 250px;
    text-align: center;
    display: block;   
}

.teacher-1 img{
    width: 15vw;
    height: 10vh;
    border-radius: 30%;
}

.teacher-2{
    width: 250px;

    text-align: center;
    display: block;
    
}
.teacher-2 img{
    width: 15vw;
    height: 10vh;
    border-radius: 30%;
}


.teacher-3{
    width: 250px;

    text-align: center;
    display: block;
    
}
.teacher-3 img{
    width: 15vw;
    height: 10vh;
    border-radius: 30%;
}
.teacher-4{
    width: 250px; 
    text-align: center;
    display: block;   
}
.teacher-4 img{
    width: 15vw;
    height: 10vh;
    border-radius: 30%;
}

.teacher-5{
   display: none;
}

.teacher-5 img{
    width: 15vw;
    height: 10vh;
    border-radius: 30%;
}

/* MAIN BAR faculty section animation*/


.animation-1{
    animation-name: show;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 4s;
    animation-direction: normal;
}
@keyframes show{
    0%{
        transform: scale(0%);
    }
    15%{
        transform: scale(50%);
    }
    50%{
        transform: scale(100%);
    }
    50%{
        transform: scale(120%);
    }
    100%{
        transform: scale(50%);
    }

}

.animation-2{
    animation-name: show-2;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite;
    animation-delay: 4s;
    animation-direction: normal;
}
@keyframes show-2{
    0%{
        transform: scale(0%);
    }
    15%{
        transform: scale(50%);
    }
    50%{
        transform: scale(100%);
    }
    50%{
        transform: scale(120%);
    }
    100%{
        transform: scale(50%);
    }

}


.animation-3{
    animation-name: show-3;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 4s;
    animation-direction: normal;
}
@keyframes show-3{
    0%{
        transform: scale(0%);
    }
    15%{
        transform: scale(50%);
    }
    50%{
        transform: scale(100%);
    }
    50%{
        transform: scale(120%);
    }
    100%{
        transform: scale(50%);
    }

}

.animation-4{
    animation-name: show-4;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: 4s;
    animation-direction: normal;
}
@keyframes show-4{
    0%{
        transform: scale(0%);
    }
    15%{
        transform: scale(50%);
    }
    50%{
        transform: scale(100%);
    }
    50%{
        transform: scale(120%);
    }
    100%{
        transform: scale(50%);
    }

}


.animation-5{
    animation-name: show-5;
    animation-duration: 8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay:4s;
    animation-direction: normal;
}
@keyframes show-5{
    0%{
        transform: scale(0%);
    }
    15%{
        transform: scale(50%);
    }
    50%{
        transform: scale(100%);
    }
    50%{
        transform: scale(120%);
    }
    100%{
        transform: scale(50%);
    }
}

/*FOOTER BAR*/ 

.footer{
    height: 300px;
    width: 100vw;
    background: rgb(216, 172, 195);
    background: radial-gradient(circle, rgb(244, 170, 208) -3%, rgb(143, 229, 224) 46%, rgba(252,69,190,1) 90%);;
    position:relative;
    top: 400px;
    display: flex;
    flex-direction: column;
    top: 200px;
    align-content: center;

}
.foot-cont{
    display: grid;
    grid-template-rows: repeat(4,1fr);
    justify-content: center;
    align-content: center;
    border-top: 2px solid rgb(0, 0, 0,50%);
}
.foot-cont h1{
    font-size: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.foot-cont h1 span{
    font-size: 40px;
    font-weight: 800;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.foot-cont address{
    border: 2px solid hsl(0, 59%, 41%,50%);
}
.foot-cont h1 h4{
    border-top: 2px double rgb(0, 0, 0,70%);
}
.foot-cont h1{
    font-family: monospace;
    font-weight: 900;
    padding: 20px;
    left: 10px;
    position: relative;
}
.foot-cont h4{
    position: absolute;
    top: 220px;
    left: 666px;
    font-size: 15px;

}
.ani-3{
    display: none;
}


/* RESPONSIVE DESIGN */

@media screen and (max-width:576px){
    .main{
        margin: 0%;
        width: 100%;
        height:500vh;
    }
    .main-box .logo{
        position:relative;
    }
    .main-box.logo img{ 
        position: absolute;
        top: 10px;
        
    }
    .main-box.logo h2{
        position: relative;
        top: 16px;
        left: 4px;
    }
    .nav-line{
        display: none;
    }
   
    .hamburger-2{
        background-color: transparent;
        width: 45px;
        height: 40px;
        border: none;
        display: flex;
        justify-content: center;
        align-content: center;
        position: relative; 
        left: 280px;      
    }
    .nav{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        justify-content: space-evenly;
        position: relative;
    }

    .hamburger-icon,.hamburger-icon::before,.hamburger-icon::after{
        width: 40px;
        height: 3px;
        border-radius: 10px;
        background-color: rgb(0, 0, 0);
        position: absolute;
        top: 10px;

    }
    .hamburger-icon::before,.hamburger-icon::after{
        content: "";
    }
    .hamburger-icon::after{
        transform: translateY(-1px);
    }
    .hamburger-icon::before{
        transform: translateY(8px);
    } 
    .side-nav{

        background: rgb(94,98,94);
        background: linear-gradient(232deg, rgba(94,98,94,1) 52%, rgba(100,214,113,1) 100%, rgba(12,0,255,1) 100%);
        display: grid;
        place-content: center;
        border-bottom: 3px solid white;
        display: none;
        text-align: center;
        animation-name: slide;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 0.2ms;
        
    
    }
    .side-nav ul{
        text-decoration: none;
        list-style: none;
    }
    
    .side-nav ul li a{
        
        font-size: 20px;
        color: rgb(255, 0, 0);
        border: 3px double blue;
        border-bottom: 2px solid gray;
        text-align: center;
        align-items: center;
        
    }
    .side-nav ul li a:hover{
        background-color: azure;
        color: black;

    }

    .side-nav.active{
        display: flex;
    }
    @keyframes slide{
        0%{
            transform: scaleY(0);
        }
        50%{
            transform: scaleY(1.2);
        }
    
        100%{
            transform: scaleY(1);
        }
    }

    .side-nav ul li{
        border-top: 2px solid white;
        padding: 20px;

    }



    /* title bar */

    #title{
        width: 100%;
        
    }
    .content img{
        position: relative;
    }
    .main-title{
        width: 80%;
        position: absolute;
    }
    .main-title.move{
        position: absolute;
        top: 500px;
    }
    .main-title button{
        display: none;
    }
    .main-title h1{
        font-family: "Permanent Marker", cursive;
            font-weight: 400;
            font-style: normal;
    }
    .main-title p{
        color: aqua;
    }
    
    
    /* course */
    .course{
        height: 800px;
        width:100%;
        position: absolute;
        top: 670px;
        z-index: -1;   
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        top: 1px;
        position: relative;

    }
    
    /* courses indi */ 
    .course1{
        width: 100vw;
        height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        background-color:#1e529a;
        border-top-left-radius: 30%;
        text-align: center;
    }
    .core{
        position: absolute;
        width: 400px;
        height: 200px;
        top: 4px;
        left: 60px;
        align-items: center;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        position: relative;
        
        
    }
    .core img{
        opacity: 1;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0px;
        left: 190px;
        
 
    }
    .core h3{
        font-size: 20x;
        font-family: "Pacifico", cursive;
        font-weight: 900;
        font-style: normal;
        position: absolute;
        top: 50px;
        border-bottom: 2px solid rgb(0, 0, 0);
        border-spacing: 2px;
        padding: 10px;  
        color: whitesmoke; 
    }
    .core p{
        text-align: justify;
        position: absolute;
        left: 120px;
        top: 110px;
        overflow: hidden;  
        color: whitesmoke;  
    }
    .core button{
        position: absolute;
        height: 40px;
        color: #1e529a;
        background-color: aliceblue;
        border-radius: 50%;
    }

/* core 2 */
.course2{
    width:  100vw;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-color:#cce320; 
    text-align: center;
}

    .core-2{
        position: relative;
        width: 400px;
        height: 200px;
        top: 5px;
        align-items: center;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        position: relative;
        
        
    }
    .core-2 img{
        opacity: 1;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0px;
        left: 240px;
        
 
    }
    .core-2 h3{
        font-size: 20x;
        font-family: "Pacifico", cursive;
        font-weight: 900;
        font-style: normal;
        position: absolute;
        top: 50px;
        left: 80px;
        border-bottom: 2px solid rgb(0, 0, 0);
        border-spacing: 2px;
        padding: 10px;  
        color: whitesmoke; 
    }
    .core-2 p{
        text-align: justify;
        position: absolute;
        left: 120px;
        top: 100px;
        overflow: hidden;  
        color: whitesmoke; 
    }
    .core-2 button{
        position: absolute;
        height: 40px;
        color: #1e529a;
        background-color: aliceblue;
        border-radius: 50%;
        top: 155px;
        left: 210px;
    }

/* core 3 */
.course3{
    width:  100vw;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-color:#00eeff;   
    text-align: center;
}

.core-3{
    position: relative;
    width: 400px;
    height: 200px;
    top: 5px;
    align-items: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    position: relative;

    
    
}
.core-3 img{
    opacity: 1;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 250px;
    

}
.core-3 h3{
    font-size: 20x;
    font-family: "Pacifico", cursive;
    font-weight: 900;
    font-style: normal;
    position: absolute;
    top: 50px;
    left: 100px;
    border-bottom: 2px solid rgb(0, 0, 0);
    border-spacing: 2px;
    padding: 10px;  
    color: whitesmoke; 
}
.core-3 p{
    text-align: justify;
    position: absolute;
    left: 120px;
    top: 100px;
    overflow: hidden;  
    color: whitesmoke; 
}
.core-3 button{
    position: absolute;
    height: 40px;
    color: #1e529a;
    background-color: aliceblue;
    border-radius: 50%;
    top: 155px;
    left: 240px;
}



/* COre 4 */
.course4{
    width:  100vw;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-color:brown;
    border-bottom-right-radius: 30%;
    text-align: center;
    
}
.core-4{
    position: relative;
    width: 400px;
    height: 200px;
    top: 5px;
    align-items: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    position: relative;
    left: 40px;
    
    
}
.core-4 img{
    opacity: 1;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 210px;
    

}
.core-4 h3{
    font-size: 20x;
    font-family: "Pacifico", cursive;
    font-weight: 900;
    font-style: normal;
    position: absolute;
    top: 50px;
    left: 50px;
    border-bottom: 2px solid rgb(0, 0, 0);
    border-spacing: 2px;
    padding: 10px;  
    color: whitesmoke; 
}
.core-4 p{
    text-align: justify;
    position: absolute;
    left: 120px;
    top: 100px;
    overflow: hidden;  
    color: whitesmoke; 
}
.core-4 button{
    position: absolute;
    height: 40px;
    color: #1e529a;
    background-color: aliceblue;
    border-radius: 50%;
    right: 100px;
    top: 155px;
}

    
    /* course */ 


    #about-us{
        margin: 0px;
       display: flex;
       flex-direction: column;
       width: 100vw;
       position: 0px;
       justify-content: center;
       align-content: center;
       top: 80px;
       left: 10px;
      background-color: azure;
    }

    .about-us-button{
        top: 20px;
    }
 
    .fac-title{
       position: relative;
       text-align: center;
       top: 580px;
    }
    #faculties{
       position: relative;
       top: 600px;
       display: grid;
       grid-template-columns: repeat(2,1fr);
    }
    .teacher-1 img{
        width: 15vw;
        height: 20vh;
        border-radius: 30%;
    }
    .teacher-2 img{
        width: 15vw;
        height: 20vh;
        border-radius: 30%;
    }
    .teacher-3 img{
        width: 15vw;
        height: 20vh;
        border-radius: 30%;
    }
    .teacher-4 img{
        width: 15vw;
        height: 20vh;
        border-radius: 30%;
    }
    .teacher-5 {
        display: none;

    }
    .all-about{
        background-color: transparent;
    }


    .ani{
        position: absolute;
        opacity: 1;
        top: 980px;
        left: 100px;
        z-index: -1;
 }
    .ani-2{
        position: absolute;
        opacity: 0.7;
        top: 60px;
        left: 100px;
        z-index: -1;
    }
    .footer{
        top: 20px;
    }
    .foot-cont h4{
        left: 230px;

    }
}

@media screen and (min-width:360px) {
    .main{
        height: 430vh;
    }
}



/* MINIMUM 768 PX */

@media screen and (min-width:576px) and (max-width:779px){
    .main{
        margin: 0%;
        width: 100%;
        height:350vh;
    }
    
    .main-box .logo{
        position:relative;
    }
    .main-box.logo img{ 
        position: absolute;
        top: 10px;
        
    }
    .main-box.logo h2{
        position: relative;
        top: 16px;
        left: 4px;
    }
    .nav-line{
        display: none;
    }
   
    .hamburger-2{
        background-color: transparent;
        width: 45px;
        height: 40px;
        border: none;
        display: flex;
        justify-content: center;
        align-content: center;
        position: relative; 
        left: 280px;      
    }
    .nav{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        justify-content: space-evenly;
        position: relative;
    }
    
    .hamburger-icon,.hamburger-icon::before,.hamburger-icon::after{
        width: 40px;
        height: 3px;
        border-radius: 10px;
        background-color: rgb(0, 0, 0);
        position: absolute;
        top: 10px;

    }
    .hamburger-icon::before,.hamburger-icon::after{
        content: "";
    }
    .hamburger-icon::after{
        transform: translateY(-1px);
    }
    .hamburger-icon::before{
        transform: translateY(8px);
    } 
    .side-nav{

        background: rgb(94,98,94);
        background: linear-gradient(232deg, rgba(94,98,94,1) 52%, rgba(100,214,113,1) 100%, rgba(12,0,255,1) 100%);
        display: grid;
        place-content: center;
        border-bottom: 3px solid white;
        display: none;
        text-align: center;
        animation-name: slide;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 0.2ms;
    }

    .side-nav ul{
        text-decoration: none;
        list-style: none;
    }
    
    .side-nav ul li a{
        
        font-size: 20px;
        color: rgb(255, 0, 0);
        border: 3px double blue;
        border-bottom: 2px solid gray;
        text-align: center;
        align-items: center;
        
    }
    .side-nav ul li a:hover{
        background-color: azure;
        color: black;
    }

    .side-nav.active{
        display: flex;
    }
    @keyframes slide{
        0%{
            transform: scaleY(0);
        }
        50%{
            transform: scaleY(1.2);
        }
    
        100%{
            transform: scaleY(1);
        }
    }

    .side-nav ul li{
        border-top: 2px solid white;
        padding: 20px;
    }


    #title{
        width: 100%;
        justify-content: center;
        align-content: center;
    }
    .main-title{
        width: 70%;
        justify-content: center;
        left: 80px;

    }
    .main-title button{
        display: none;
    }
    .main-title.move{
        position: absolute;
        top: 500px;
        left: 100px;
    }
    .main-title h1{
        font-family: "Bebas Neue", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-weight: 900;
    }
    .main-title p{
        color: white;
        padding-top: 5px;
    }

    /* course */
    .course{
        height: 800px;
        width:100%;
        position: absolute;
        top: 670px;
        z-index: -1;   
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        top: 1px;
        position: relative;

    }
    
    /* courses indi */ 
    .course1{
        width: 100vw;
        height: 500px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        background-color:#1e529a;
        border-top-left-radius: 30%;
        text-align: center;
    }
    .core{
        position: absolute;
        width: 500px;
        height: 200px;
        top: 4px;
        left: 70px;
        align-items: center;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        position: relative;   
    }
    .core img{
        opacity: 1;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0px;
        left: 230px;
    }
    .core h3{
        font-size: 20x;
        font-family: "Pacifico", cursive;
        font-weight: 900;
        font-style: normal;
        position: absolute;
        top: 50px;
        border-bottom: 2px solid rgb(0, 0, 0);
        border-spacing: 2px;
        padding: 10px;  
        color: whitesmoke; 
    }
    .core p{
        text-align: justify;
        position: absolute;
        left: 120px;
        top: 110px;
        overflow: hidden;  
        color: whitesmoke;  
    }
    .core button{
        position: absolute;
        height: 40px;
        color: #1e529a;
        background-color: aliceblue;
        border-radius: 50%;
    }

/* core 2 */

.course2{
    width:  100vw;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-color:#cce320; 
    text-align: center;
}

    .core-2{
        position: relative;
        width: 400px;
        height: 200px;
        top: 5px;
        align-items: center;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        position: relative;
        left: 70px;
        
        
    }
    .core-2 img{
        opacity: 1;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0px;
        left: 230px;
        
 
    }
    .core-2 h3{
        font-size: 20x;
        font-family: "Pacifico", cursive;
        font-weight: 900;
        font-style: normal;
        position: absolute;
        top: 50px;
        left: 80px;
        border-bottom: 2px solid rgb(0, 0, 0);
        border-spacing: 2px;
        padding: 10px;  
        color: whitesmoke; 
    }
    .core-2 p{
        text-align: justify;
        position: absolute;
        left: 120px;
        top: 100px;
        overflow: hidden;  
        color: whitesmoke; 
    }
    .core-2 button{
        position: absolute;
        height: 40px;
        color: #1e529a;
        background-color: aliceblue;
        border-radius: 50%;
        top: 155px;
        left: 210px;
    }

/* core 3 */

.course3{
    width:  100vw;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-color:#00eeff;   
    text-align: center;
}

.core-3{
    position: relative;
    width: 400px;
    height: 200px;
    top: 5px;
    align-items: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    position: relative;
    left: 50px;
    
    
}
.core-3 img{
    opacity: 1;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 250px;
    

}
.core-3 h3{
    font-size: 20x;
    font-family: "Pacifico", cursive;
    font-weight: 900;
    font-style: normal;
    position: absolute;
    top: 50px;
    left: 100px;
    border-bottom: 2px solid rgb(0, 0, 0);
    border-spacing: 2px;
    padding: 10px;  
    color: whitesmoke; 
}
.core-3 p{
    text-align: justify;
    position: absolute;
    left: 120px;
    top: 100px;
    overflow: hidden;  
    color: whitesmoke; 
}
.core-3 button{
    position: absolute;
    height: 40px;
    color: #1e529a;
    background-color: aliceblue;
    border-radius: 50%;
    top: 155px;
    left: 240px;
}



/* COre 4 */

.course4{
    width:  100vw;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-color:brown;
    border-bottom-right-radius: 30%;
    text-align: center;
    
}
.core-4{
    position: relative;
    width: 400px;
    height: 200px;
    top: 5px;
    align-items: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    position: relative;
    left: 100px;
    
    
}
.core-4 img{
    opacity: 1;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 210px;
    

}
.core-4 h3{
    font-size: 20x;
    font-family: "Pacifico", cursive;
    font-weight: 900;
    font-style: normal;
    position: absolute;
    top: 50px;
    left: 50px;
    border-bottom: 2px solid rgb(0, 0, 0);
    border-spacing: 2px;
    padding: 10px;  
    color: whitesmoke; 
}
.core-4 p{
    text-align: justify;
    position: absolute;
    left: 120px;
    top: 100px;
    overflow: hidden;  
    color: whitesmoke; 
}
.core-4 button{
    position: absolute;
    height: 40px;
    color: #1e529a;
    background-color: aliceblue;
    border-radius: 50%;
    right: 100px;
    top: 155px;
}


/* about us*/

    #about-us{
       display: flex;
       flex-direction: column;
       width: 50%;
       height: 700px;
       justify-content: center;
       align-content: center;
       align-items: center;
       margin: 0px;
       left: 150px;
       top: 130px;
      background-color: azure;
    }
    .about-us-button{
        top: 30px;
    }
    .ach-img{
        display: none;

    }
    .achivement{
        height: 700px;
        width:400px;
        border-radius: 20%;
        text-align: center;
        position: relative;
        top: 100px;
        left: 8px;
    }
    .achivement h4{
        padding-top: 50px;
        border-top: none;
        border-spacing: 2;
    }
    .achivement h2{
        font-family: "Permanent Marker", cursive;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        position: relative;
        
    }   
    .fac-title{
       position: relative;
       text-align: center;
       top: 200px;
    }

    #faculties{
       position: relative;
       top: 250px;
       width: 100vw;
       display: grid;
       left: 45px;
       grid-template-columns: repeat(2,1fr);
    }
   
    .teacher-1 img{
        width: 15vw;
        height: 10vh;
        border-radius: 30%;
    }
    .teacher-2 img{
        width: 15vw;
        height: 10vh;
        border-radius: 30%;
    }
    .teacher-3 img{
        width: 15vw;
        height: 10vh;
        border-radius: 30%;
    }
    .teacher-4 img{
        width: 15vw;
        height: 10vh;
        border-radius: 30%;
    }
    .teacher-5 {
        display: none;

    }
    .all-about{
        background-color: transparent;
    }


    .ani{
        position: absolute;
        opacity: 0.5;
        top: 400px;
        z-index: -1;
 }
    .ani-2{
        position: absolute;
        opacity: 0.7;
        top: 60px;
        left: 100px;
        z-index: -1;
    }
    .footer{
        top: 20px;
    }
    .foot-cont h4{
        left: 230px;

    }
}


/* min 780 px */

@media screen and (min-width:780px) and (max-width:1070px){
    #about-us{
        margin: 0px;
       display: flex;
       flex-direction: column;
       width: 700px;
       position: 0px;
       justify-content: center;
       align-content: center;
       position: absolute;
       top: 300px;
       left: 10px;
      background-color: azure;
    }

    .main{
        height: 300vh;
    }
    #about-us{
        margin-left: 0;
        position: relative;
        left: 200px;
    }
    .course{
        width: 100vw;
        display:flex;
        justify-content: center;
        align-content: center;
            
    }
    .ach-img{
        position: absolute;
        height: 400px;
        top: 400px;
    }
    .course4,.course1,.course2,.course3{
        width: 230px;
    }
    .core,.core-2,.core-3,.core-4{
        width: 230px;
    }
    .fac-title{
        align-items: center;
        text-align: center;
    }
    .fac-title{
        top: 900px;
    }
    #faculties{
        top: 950px;
    }
    .all-about{
        background-color: transparent;
    }

    .ani{
        display: none;
  
    }
    .ani-2{
        position: absolute;
        opacity: 0.7;
        top: 60px;
        left: 100px;
        z-index: -1;
    }
    .ani-3{
        display: block;
        position: absolute;
        right: 600px;
        top: 400px;
        z-index: -2;
        opacity: 0.8;
    }
    .footer{
        display: block;
        top: 20px;

    }
    .side-nav{
        display: none;
    }
}

/* Media querry Min-1080px*/


@media screen and (min-width:1080px) {
    .main{
        height: 300vh;
    }
    #about-us{
        top: 300px;
        position: relative;
        display: grid;
        grid-template-rows: repeat(2,1fr);
        margin: 50px;
        align-content: center;
        justify-content: space-between;
        z-index: -1;
        padding-left: 330px;
        position: relative;
      
    }
    .all-about{
        background-color: transparent;
    }
    .ani{
        position: absolute;
        left: 30px;
        top: 300px;
    }
    .ani-2{
        position: absolute;
        left: 700px;
        z-index: -1;
    }
    .ach-img{
        position: absolute;
        top: 500px;
        height: 400px;
        left: 330px;
    }
    .achivement{
        left: 330px;
    }
 
    .fac-title{
        text-align: center;
        padding-top: 300px;
    }
    #faculties{
        width: 80vw;
        padding-left: 100px;
        left: 100px;
    }
    .footer{
        top: 100px;
    }
    .side-nav{
        display: none;
    }

}


/* Media querry Max-1400px*/


@media screen and (min-width:1090px) and (max-width:1400px) {
    .main{
        height: 300vh;
    }
    .main-box.logo{
        position: sticky;
        top: 0;
    }
    #about-us{
        
        top: 300px;
        position: relative;
        display: grid;
        grid-template-rows: repeat(2,1fr);
        margin: 50px;
        align-content: center;
        justify-content: space-between;
        z-index: -1;
        padding-left: 330px;
        position: relative;
      
    }

    .all-about h4{
        background-color: transparent;
        font-size: 25px;
        width: 130px;
    }
    .all-about h1{
        background-color: transparent;
        font-size: 35px;

    }
    .about-us-ul li{
        font-size: 19px;
    }
    .achivement{
        font-size: 25px;
    }
    .ani{
        position: absolute;
        left: 30px;
        top: 300px;
        z-index: -1;
    }
    .ani-2{
        position: absolute;
        left: 700px;
        z-index: -1;
    }
    .fac-title{
        font-size: 30px;
        top: 180px;
    }
    #faculties{
        top: 200px;
    }
    .ach-img{
        position: absolute;
        top: 500px;
        height: 400px;
        left: 330px;
    }
    .achivement{
        left: 330px;
    }
 
    .fac-title{
        text-align: center;
        padding-top: 300px;
    }
    #faculties{
        width: 80vw;
        padding-left: 100px;
        left: 100px;
    }
    .footer{
        top: 100px;
    }
     .side-nav{
        display: none;
    }

}


/* Media querry Min-1400px*/


@media screen and (min-width:1400px) {
    .ani-3{
        display: block;
        position: absolute;
        left: 1000px;
        top: 600px;
    }
    .main{
        height: 380vh;
    }
    .all-about h4{
        background-color: transparent;
        font-size: 25px;
        width: 130px;
    }
    .all-about h1{
        background-color: transparent;
        font-size: 35px;

    }
    .about-us-ul li{
        font-size: 19px;
    }
    .achivement{
        font-size: 25px;
    }
}
@media (prefers-color-scheme:light) {
    body{
        background: rgb(94,98,94);
        background: linear-gradient(299deg, rgba(94,98,94,1) 28%, rgba(228,167,212,1) 52%, rgba(201,184,50,1) 100%);
    }
    #faculties{
        background: rgb(106,150,106);
        background: linear-gradient(196deg, rgba(106,150,106,1) 20%, rgba(204,193,195,1) 53%, rgba(159,50,201,1) 86%);
    }
    
}


/* This is my first project on Front-end-development. I carried out my atmost knowledge that were i learned for last 6 months if there is any mistakes in my language please kind towards me and i will assure that I become an proper codre soon.
    ==> THANK YOU <==  */