*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'JetBrains Mono';
    background-color: rgb(0, 0, 0);
    scroll-behavior: smooth;

}


.navbar{
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    box-shadow: 0 5px 15px rgb(0, 0, 0);
    z-index: 999;
    top: 0;
    left: 0;
}
.navItems{
    display: flex;
    align-items: center;
    justify-content: space-evenly;  
    padding-top: 2rem;
    width: 100%;
}

.navItems li{
    list-style: none;
}

.navItems li a{
    color: rgb(255, 255, 255);
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: .5s;
    text-decoration: none;
}

.navItems li a:hover{
    color:rgba(2, 8, 14, 0.993);
}

.navBtn{
    display: none;
}




/*common shit*/
.heading{
    display: flex;
    justify-content: center;
}
.heading h1{
    color:white;
    font-size: 8rem;
    margin-bottom: 3rem;
}

p{
    display: flex;
    color:aliceblue;
    justify-content: center;
    font-size: 1.2rem;
}

h5{
    font-size: 2rem;
    font-weight: 700;
    color: rgb(255, 255, 255);
}

h5 span{
    color:rgb(228, 123, 82);
}

h6{
    font-size: 2rem;
    font-weight: 700;
    color: rgb(255, 255, 255);
    text-align: center;
}



/*Hero Section*/


.hero{
    display: flex;
    margin: 5rem 5rem 20rem 5rem;
    justify-content: center;
    animation: fadeUp 1.5s;
}
.logoText{
    display: flex;
    align-items: center;
}
.hero h1{
    font-size: 10rem;
    color: rgb(255, 255, 255);
    font-weight: 400;
}
.logo{
    width: 30%;
    display: block;
}
.hero img{

    scroll-margin-top: 10rem;
    display: flex;
    padding-top: 2rem;
    width: 100%;
}


@keyframes fadeUp{
    0% {
        opacity:0;
        filter: blur(20px);
    }
    100%{
        opacity:1;
        filter: blur(0px);
    }
}


/*About*/
.sections, .abtSection{
    margin: 40rem 5rem 20rem 5rem;
    justify-content: center;
    animation: fadeUp 1.5s;
}
.sections h1,.abtSection h1{
    scroll-margin-top: 15rem;
}

.sideImgs{
    align-items:center;
    justify-content: center;
    display: flex;
    margin-top: 5rem;
    animation: fadeUp 3s;
    cursor: pointer;
}

.sideImgs img:hover{
    
    transform: scale(1.1);
    transition: 2s;
}

.sideImgs img{
    max-width: 40rem;
    object-fit: cover;
    border-radius: 3rem;
    padding: 1rem;
}

.reveal{
    position:relative;
    transform: translateY(150px);
    opacity: 0;
    transition: all 2s ease;
}
.reveal.active{
    transform: translateY(0px);
    opacity: 1;
}

.card{
    display: flex;
    width: 20rem;
    margin: 5rem 2rem 1rem 2rem;
    transition: all ease 3s;
    padding: .5rem;
    max-height: 25rem;
}
.card:hover{
    transform: scale(1.1);
}

.desc{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;

}


.desc img{
    width: 100%;
    border-radius: 1.4rem;
    object-fit: cover;
    max-height: 25rem;
}

.map{
    margin-top: 4rem;
    display: flex;
    justify-content: center;
}

.homeBtn{
    display: none;
}

.subheading{
    color:rgb(255, 255, 255);
    font-size: 3rem;
    padding-bottom: .2rem;
}
.timeoptns{
    color:rgb(187, 120, 196);
}

h5 span{
    color:rgb(169, 73, 182);
}


@media (max-width: 1000px){
    h5{
        font-size: 1rem;
    }
    p{
        font-size: 1rem;
    }   
    .abtSection{
        margin:0rem 2rem 0rem 2rem;
        display: block;
    }
    .abtSection img{
        width: 100%;
    }

    .sections{
        margin: 20rem 2rem 10rem 2rem;
    }

    .heading{
        text-align: center;
    }
    
    .hero{
        display: block;
        margin: 0 2rem 30rem 2rem;
    }
    .logoText h1{
        font-size: 21vw;
        text-align: center;
    }

    .logo{
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0;
    }
    .logo img{
        display: flex;
        padding: 1rem;
        justify-content: center;
        width: 80%;
        border-radius: 20rem;
        /*border-style: solid;
        border-color: aliceblue;*/
    }
    .logoText{
        justify-content: center;
        margin: 0 2rem 0 2rem;
    }
  
    .heading h1{
        font-size: 3rem;
    }
    

    .sideImgs{
        align-items:center;
        justify-content: center;
        display: flex;
        margin-top: 2rem;
        animation: fadeUp 1s;
        cursor: pointer;
    }
    
    .sideImgs img:hover{
        border-style: dotted;
        border-color: rgb(255, 255, 255);
        transition: 1s;
    }
    
    .sideImgs img{
        display: flex;
        max-width: 40vh;
        object-fit: cover;
        padding: 1rem;
        justify-content: center;
    }
    .card{
        margin:2rem 0 0 0;
        width: 100%;
        max-height: 38vw;
        max-width: 40vw;
    }
    .card img{
        object-fit: cover;
    }
    
    .navbar{
        padding-top: 1rem;
        display: block;
        position: sticky;
        padding-bottom: 2rem;
        margin-bottom: 10vh;
        background:rgb(0, 0, 0);
    }

    .navItems{
        margin: 2rem 1rem 0rem 0rem;
        display: none;
        padding: 0rem;
        position: absolute;
        background: rgba(255, 0, 0, 0);
    }

    .navItems li{
        display: flex;
        justify-content: right;
        margin: 0rem 1rem 0rem 0rem;
        background: transparent;
    }

    .navItems li:nth-child(1){
        display: none;
    }
    .navItems li a{
        color: black;
        background: rgb(255, 255, 255);
        padding: .1rem .8rem .1rem .8rem;
        font-size: 2vh;
        min-width: 20vh;
    }

    .navBtn, .homeBtn{
        display: block;
        color: rgb(255, 255, 255);
        border-radius: 2rem;
        position:absolute;
        padding: 0rem 1rem 0rem 1rem;
        font-size: 2vh;
        border-style: solid;
        border-color: white;
        text-decoration: none;
        transition: 0.1s;
    }

    .navBtn{
        right: 1px;
        margin-right: 1rem;
    }
    .homeBtn{
        left: 1px;
        margin-left: 1rem;
    }
    .navBtn:hover, .homeBtn:hover{
        background-color: aliceblue;
        color:black;
    }
    .display{
        display: block;
    }
    .subheading{
        color:rgb(255, 255, 255);
        font-size: 1.5rem;
        padding-bottom: .2rem;
    }
}