* {
    margin: 0;
    padding: 0;
}

::selection {
    color: white;
    background-color: black;
}

body,
html {
    background-color: black;
    overflow-x: hidden;
    font-family: lato;
    height: 100%;
    width: 100%;

}

a {
    text-decoration: none;
    color: white;
}

/* Translate */

.skiptranslate iframe {
    display: none;
}

.VIpgJd-ZVi9od-l4eHX-hSRGPd {
    display: none;
}

.goog-te-gadget {
    color: transparent !important;
}

.goog-te-combo {
    background-color: transparent;
    border: solid 1px white;
    color: white;
    height: 30px;
}

.goog-te-combo option {
    color: black;
    background-color: transparent;
}



.loader {
    height: 100vh;
    width: 100%;
    background-color: black;
    position: fixed;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav,
nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    width: 100%;
    height: 150px;
}

nav li {
    margin-right: 50px;
    font-size: 20px;
    list-style: none;

}

.main {
    height: 100vh;
    width: 100%;
    display: flex;
    color: white;
}

.main .left {
    height: 100%;
    width: 40%;
    position: relative;

}

.main .left h2 {
    font-size: 55px;
    letter-spacing: 3px;
    line-height: 60px;
    position: absolute;
    top: 200px;
    left: 100px;
    color: #ebebeb;
}

.main .left button {

    position: absolute;
    top: 400px;
    left: 100px;
    color: white;
    background-color: rgb(66, 66, 103);
    width: 200px;
    height: 40px;
    font-size: 15px;
    border-radius: 8px;
}

.main .left h1 {
    font-size: 20px;
    letter-spacing: 3px;
    position: absolute;
    top: 170px;
    left: 102px;
    color: #a29e78;
}

.main .right {
    height: 95vh;
    width: 60%;
}

.main .right video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 30px 0px 0px 30px;
}

.hpage1 {
    height: 90vh;
    width: 100%;
    display: flex;
    background-color: #ebebeb;
}

.hpage1 .left {
    height: 70vh;
    width: 50%;
    padding: 0px 80px;
    padding-top: 200px;

}

.hpage1 .left h1 {
    font-size: 65px;
    line-height: 60px;
}

.hpage1 .left button {
    height: 45px;
    width: 200px;
    margin-top: 30px;
    justify-content: end;
    background-color: #a29e78;
    border: none;
    font-size: 17px;
}

.hpage1 .left img {
    margin-left: 500px;
}

.hpage1 .left #content {
    margin-top: 50px;
    line-height: 25px;
    text-align: justify;
}

.hpage1 .right {
    height: 70vh;
    width: 60%;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    margin: 150px 0px;

}

.hpage1 .right .lgrid {
    margin: 0px 10px;
    padding: 0px 50px;
    padding-top: 40px;
    background-color: black;
    height: 72%;
    border-radius: 15px;

}

.hpage1 .right .lgrid:hover {
    transform: scale(1.3);
}

.hpage1 .right .lgrid:nth-last-child(-n+2) {
    margin-top: -10px;
}

.lgrid h1 {
    font-size: 22px;
}

.lgrid p {
    font-size: 17px;
    line-height: 20px;
    margin-top: 15px;
    color: #e1d8c1;
    text-align: justify;
}

.hpage2,
.hpage3 {
    height: 80vh;
    width: 100%;
    display: flex;
}

.hpage2 .vision {
    margin-top: 100px;
    height: 60%;
    width: 60%;
    background-color: white;
    border-radius: 0px 80px 0px 0px;
    padding: 0px 100px;
    padding-top: 80px;
    display: flex;

}

.hpage2 .quote {
    height: 70%;
    width: 40%;
}


.hpage3 .mission {
    margin-top: 0px;
    height: 60%;
    width: 60%;
    background-color: white;
    border-radius: 0px 0px 0px 80px;
    padding: 0px 100px;
    padding-top: 80px;
    display: flex;

}

.hpage3 .quote {
    height: 70%;
    width: 40%;
}

.hpage2 h1,
.hpage3 h1 {
    color: #757040;
}

.hpage2 p,
.hpage3 p {
    margin-top: 40px;
    line-height: 25px;
    text-align: justify;
    margin-right: 40px;
    font-size: 17px;
}

.image video {
    height: 250px;
    width: 200px;
}

.registeration {
    height: 90vh;
    width: 100%;
    display: flex;
}

.regleft {
    width: 40%;
    height: 100%;
}

.regright {
    width: 60%;
    height: 100%;
    padding: 100px 100px;
    color: white;
}

.regright p {
    font-size: 40px;
    margin-bottom: 60px;
    font-family: monospace;

}

.regright span {
    color: #c2aa30;
}

.regleft video {
    margin-top: 100px;
    width: 90%;

}

#main_form {
    display: grid;
    grid-template-columns: 50% 50%;
}

.rgrid {
    height: 100px;
}

.rgrid input {
    margin-top: 7px;
    width: 300px;
    height: 30px;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #3e3b32;
    color: white;

}

.regright #btn,
.eright .top #btn {
    width: 200px;
    height: 40px;
    background-color: #c2aa30;
    color: black;
    border: none;

}

/*event page*/
#event {
    text-decoration: none;
    color: aliceblue;
}

.rgrid select {
    margin-top: 15px;
}

#event {
    text-decoration: none;
    color: white;
}

.estart {
    width: 100%;
    height: 80%;
    position: relative;

}

.estart video {
    width: 100vw;
    height: 70vh;
    object-fit: cover;
}

.estart h1 {
    position: absolute;
    top: 200px;
    left: 100px;
    font-size: 90px;
    color: white;
}

.emain {
    width: 100%;
    height: 160vh;
    display: flex;
}

.eleft {
    width: 70%;
    height: 150vh;
    background-color: black;
}

.eright {
    width: 30%;
    height: 150vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.eleft .etop,
.eleft .edown {
    width: 80%;
    height: 39.5%;
    background-color: #c0bcb4;
    padding: 0px 50px;
    padding-top: 50px;
    margin: 50px 50px;
    border-radius: 20px;
}

.edown .ebox {
    width: 45%;
    height: 270px;
    background-color: #ebebeb;
    margin-right: 20px;
    margin-top: 50px;
    border-radius: 25px;
}

.etop .esubmain,
.edown .epast {
    display: flex;

}

.etop .eevent {
    width: 30%;
    height: 245px;
    background-color: #ebebeb;
    margin-right: 20px;
    margin-top: 50px;
    border-radius: 25px;
    padding: 0px 30px;
    padding-top: 30px;
    transition: all ease-in 1s;
}

.ebox:hover,
.eevent:hover {
    transform: rotate(360deg);
    scale: 1.8;

}

.etop .eevent h1 {
    font-size: 18px;
    color: #5f5e5e;
}

.etop .eevent span {
    font-size: 35px;
    color: black;
}

.etop .eevent h2 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 20px;
}

.etop .eevent p {
    color: #5f5e5e;
    margin-bottom: 15px;
}

.eevent #img1,
#img2,
#img3 {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin-left: 70px;
}

.eevent a,
.footer a {
    color: black;
}

.ebox img {
    height: 60%;
    width: 100%;
    border-radius: 25px 25px 0px 0px;

}

.ebox h1 {
    font-size: 19px;
    padding: 5px 15px;
}

.ebox p {
    font-size: 16px;
    padding-left: 15px;
    color: #7d7a7a;
}

.ebox h2 {
    font-size: 16px;
    padding: 15px 15px;
    color: rgb(27, 36, 69);
}

.emain #arrow {
    height: 50px;
    width: 50px;
    margin-top: 20px;
}

.footer {
    width: 100%;
    height: 300px;
    background-color: #ebebeb;
    display: flex;
    padding: 40px 40px;
}

.footer .c1 {
    width: 33%;
    height: 100%;
}

.footer #logo {
    height: 300px;
    width: 350px;
    border-radius: 25px;
    transition: all ease-in 1s;
}

.footer #logo:hover {
    transform: rotate(360deg);
}

.c1 h2,
.c2 h2 {
    font-size: 25px;
    margin-bottom: 30px;
    color: #67633b;
}

.c2 li,
.c1 p {
    list-style: none;
    line-height: 35px;
    font-size: 18px;

}

.c1 h1,
.c2 h1 {
    font-size: 20px;
    margin-top: 30px;
    color: #67633b;

}

.social {
    display: flex;
}

.social img {
    height: 35px;
    width: 35px;
    margin-right: 15px;
    margin-top: 20px;
}

.bottomcopy {
    width: 100%;
    height: 35px;
    background-color: #000;
    color: white;
    text-align: center;

}

.footer hr {
    margin-right: 80px;
    border: solid 1px black;
}

.footer .c2 {
    width: 21%;
}

.eright .top {
    height: 39.5%;
    width: 100%;
    background-color: #272626;
    padding-top: 60px;
    padding-left: 40px;
    margin-top: 50px;
    border-radius: 20px;
}

.eright .top textarea,
.eright .top input {
    margin-top: 7px;
    width: 300px;
    height: 30px;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #3e3b32;
    margin-bottom: 20px;
    color: white;

}

.eright .top h1 {
    margin-bottom: 40px;
    color: white;
}

.eright .top select {
    margin-right: 20px;
    height: 30px;
    width: 140px;
}

.eright .top form {
    margin-top: 35px;
    margin-left: 40px;
}

.eright .top #btn {
    width: 300px;
}

/*gallery*/
#gallery {
    text-decoration: none;
    color: white;
}

.g_start {
    height: 50%;
    width: 50%;
    position: relative;
}

.g_start h1 {
    position: absolute;
    top: 100px;
    left: 200px;
    font-size: 90px;
    color: white;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
    width: 80%;
    margin: auto;
}

.image-grid img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease;

}

.image-grid img:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    margin-top: 100px;
}

.image-grid img:nth-child(2) {
    margin-top: 100px;
}

.image-grid img:nth-child(4) {
    margin-top: 100px;
}

.image-grid img:nth-child(3) {
    grid-column: span 2;
    grid-row: span 2;
    margin-top: 100px;
}

.image-grid img:nth-child(7) {
    grid-column: span 3;
    grid-row: span 3;
}

.image-grid img:nth-child(9) {
    grid-column: span 2;
    grid-row: span 2;
}

.image-grid img:nth-child(11) {
    grid-column: span 3;
    grid-row: span 3;
}

.image-grid img:nth-child(13) {
    grid-column: span 2;
    grid-row: span 2;
}

.image-grid img:hover {
    transform: scale(1.05);
}

/* Modal1 Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Modal2 Styles */

.modal2 {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content2 {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.close2 {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.close2:hover,
.close2:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/*hightlight*/
.high {
    display: block;
    height: 70%;
    background-color: rgb(196, 212, 213);
    margin-top: 10px;
    margin-left: 100px;
    margin-right: 100px;
    animation: gradientChange 3s ease infinite;
    border-radius: 30px;
}

#marquee {
    margin-top: 80px;
    margin-bottom: 40px;
}

@keyframes gradientChange {
    0% {
        background: linear-gradient(90deg, #a1bdc3, #7bc7fe);
    }

    50% {
        background: linear-gradient(90deg, #86a8e7, #91eae4);
    }

    100% {
        background: linear-gradient(90deg, #a1bdc3, #7bc7fe);
    }
}

/*highlights div block*/
.g_block3 {
    display: flex;
    height: 80%;
    margin-top: 20px;
    box-sizing: border-box;
    padding: 100px 100px;
    padding-bottom: 100px;
    margin-bottom: 100px;
}

.container {
    position: relative;
    border-radius: 20px;
    width: 50%;
    max-width: 300px;
    margin: auto;
}

.image {
    display: block;
    width: 100%;
    height: auto;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.overlay {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 87%;
    transition: .5s ease;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    opacity: 0;
    color: rgb(6, 0, 0);
    font-size: 18px;
    padding: 20px;
    text-align: center;
    background-color: white;
}

.container:hover .overlay {
    opacity: 1;
}

/* Photo gallery */
.pics {
    align-items: center;
    height: 210%;
    width: 100%;
    margin-top: 200px;
    padding-bottom: 100px;
    padding-top: 80px;
    animation: bg_change 3s ease infinite;
}

.pics h1 {
    font-size: 50px;
    text-align: center;
    font-family: sans-serif;
}

.pics h1:hover {
    letter-spacing: 7px;
    transition: all ease-in 1s;
}

@keyframes bg_change {
    0% {
        background: linear-gradient(90deg, #d7c270, #dcab6b);
    }

    50% {
        background: linear-gradient(90deg, #dcab6b, #d7c270);
    }

    100% {
        background: linear-gradient(90deg, #d7c270, #dcab6b);
    }
}

.cpage2 {
    height: 100%;
    width: 100%;
    padding-left: 200px;
    padding-top: 100px;
    background-color: white;
    margin-bottom: 100px;
}

.contactdiv1,
.contactdiv2 {
    display: flex;
    width: 100%;
    height: 30%;
}

.cpage2 p {
    font-size: 25px;
    margin-bottom: 30px;
}

.cpage2 h1 {
    font-size: 60px;
    line-height: 55px;
    margin-bottom: 100px;
}

.contactbox {
    height: 160px;
    width: 350px;
    background: url('Images/detail_back.jpeg');
    background-position: cover;
    margin-right: 50px;
    margin-bottom: 70px;
    border-radius: px;
    display: flex;
}

.contactbox .cleft {
    width: 30%;
    height: 100%;
    padding: 0px 20px;
}

.contactbox .cleft #person {
    height: 100px;
    width: 100px;
    border-radius: 20px;

}

.contactbox .cleft img {
    height: 25px;
    width: 25px;
}

.contactbox .cright #post {
    font-size: 18px;
    color: #5f5e5e;
}

.contactbox .cright p {
    font-size: 16px;
    color: #2e2e2e;
    line-height: 20px;

}