@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@1,200&display=swap');
                                * {
                                    box-sizing: border-box;
                                }
                                
                                .header,
                                .section {
                                    overflow-x: hidden;
                                }
                                
                                 :root {
                                    --Snigle-font: "Sniglet", cursive;
                                    --Rubik: "Rubik", cursive;
                                    --Patua: "Patua One", cursive;
                                    --Lobster: "Lobster", cursive;
                                    --light-black: "#2e2c2caf";
                                    /* --bggradient: linear-gradient(to bottom, #470342, #f104b9); */
                                    --bggradient: linear-gradient(to bottom, #020007, #050124);
                                    --light-gray: rgb(255, 255, 255);
                                }
                                
                                header a {
                                    font-family: var(--Snigle-font);
                                    font-size: 0.9em;
                                    color: whitesmoke;
                                }
                                
                                #maintitle:hover {
                                    color: #00aeff;
                                    box-shadow: 0 0 10px 10px rgba(255, 133, 218, 0.1), 0 0 20px 20px rgba(255, 133, 218, 0.3);
                                }
                                /* #maintitle2 {
                                color: #7e025d;
                                font-weight: 600;
                            } */
                                
                                #maintitle2 {
                                    font-weight: 600;
                                    background: -webkit-linear-gradient(30deg, #0004ff, #088cf1, #1d44f5, #0683e3, #021454);
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                    -webkit-text-stroke: 2px #34012c;
                                    animation: titleanim;
                                    animation-duration: 0.1s;
                                    animation-iteration-count: infinite;
                                    animation-direction: alternate-reverse;
                                }
                                /* @keyframes titleanim {
                                0% {
                                    background: -webkit-linear-gradient(30deg, #ff00a6, #ffc4e5, #ff4bae, #9f015a, #ff00dd);
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                    -webkit-text-stroke: 2px #34012c;
                                }
                                100% {
                                    background: -webkit-linear-gradient(30deg, #ff4bae, #9f015a, #ff00dd, #ff00a6, #ffc4e5);
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                    -webkit-text-stroke: 2px #34012c;
                                }
                            } */
                                
                                #btnjoin:hover {
                                    color: #cce0f0;
                                    box-shadow: 0 0 10px 10px rgba(33, 3, 203, 0.1), 0 0 20px 20px rgba(3, 129, 232, 0.3);
                                    background: linear-gradient(30deg, rgb(4, 205, 241), rgb(12, 1, 53));
                                    font-weight: 600;
                                    border-bottom: 2px #0066ff;
                                }
                                
                                #btnjoin {
                                    background: linear-gradient(30deg, rgb(1, 1, 39), rgb(2, 162, 236));
                                    font-weight: 600;
                                    color: #fff;
                                }
                                /* #btnjoin:hover {
                                background: linear-gradient(30deg, rgb(228, 227, 227), grey);
                            } */
                                
                                header {
                                    background: #8504a9;
                                    background: var(--bggradient);
                                }
                                /* header {
                                background: linear-gradient(rgb(232, 116, 8), rgb(247, 195, 26));
                            }
                             */
                                
                                .title {
                                    color: whitesmoke;
                                    font-family: var(--Lobster);
                                    font-size: 8vmin;
                                    text-shadow: 0px 0 4px 4px rgba(0, 0, 0, 1);
                                }
                                
                                .dropdown-content {
                                    display: none;
                                    position: absolute;
                                    background: #fff;
                                    min-width: 160px;
                                    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
                                    z-index: 1;
                                }
                                
                                .dropdown-content a {
                                    color: #000;
                                    padding: 12px 16px;
                                    text-decoration: none;
                                    display: block;
                                }
                                
                                .dropdown-content a:hover {
                                    background: #000;
                                    text-decoration: none;
                                    color: #f104b9;
                                }
                                
                                .dropdown:hover .dropdown-content {
                                    display: block;
                                }
                                
                                header .nav-item:last-child {
                                    padding-right: 0.2em;
                                }
                                
                                header.nav-item {
                                    padding-right: 0.9em;
                                }
                                
                                header.navbar-brand {
                                    padding-left: 8em;
                                }
                                
                                header.nav-link:hover {
                                    color: #000;
                                }
                                
                                header.row.col-md-5 {
                                    padding: 4.2vmin 1vmin;
                                }
                                
                                #prof {
                                    position: relative;
                                    top: 50px;
                                    right: 50px;
                                    left: 8%;
                                    border-radius: 10%;
                                }
                                
                                .prof img {
                                    width: 50px;
                                }
                                
                                #prof img {
                                    width: 120%;
                                    margin-left: -30px;
                                }
                                
                                .pic {
                                    /* border-top-left-radius: 30%;
                                border-bottom-right-radius: 30%; */
                                    border: 3px solid #fff;
                                    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1), 0 0 4px 4px rgba(0, 0, 0, 0.2), 0 0 8px 10px rgba(0, 0, 0, 0.2);
                                }
                                
                                header.row .col-md-7 {
                                    padding: 22vmin 1vmin;
                                    padding-bottom: 35vmin;
                                    font-family: var(--Rubik);
                                }
                                
                                header .row .col-md-5 {
                                    width: 50%;
                                }
                                
                                header.container.col-md-7 h4 {
                                    padding: 1vmin;
                                    letter-spacing: 4px;
                                }
                                
                                header.container.col-md-7 h1 {
                                    padding: 1vmin;
                                    font-size: 8em;
                                }
                                
                                header .container .col-md-7 button {
                                    border-radius: 30x;
                                    font-weight: bold;
                                }
                                
                                a {
                                    text-decoration: none;
                                    color: #fff;
                                }
                                
                                header nav-link {
                                    color: #fff;
                                }
                                
                                #lecturer {
                                    margin: 15% auto;
                                }
                                
                                .navbar-nav {
                                    text-align: right;
                                }
                                /*section1*/
                                
                                .row .section-1 {
                                    padding: 20vmin 0;
                                }
                                
                                .section-1 .row .col-md-6 .pray img {
                                    margin: 100px auto;
                                    margin-top: 110px;
                                    margin-left: -200px;
                                    opacity: 0.8;
                                    width: 100%;
                                    height: 100%;
                                    border-radius: 50%;
                                    box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.3);
                                    border: 5px solid rgb(255, 255, 255);
                                }
                                
                                .section-1 .row .col-md-6:last-child {
                                    position: relative;
                                }
                                
                                .section-1 .row .col-md-6 .panel {
                                    position: absolute;
                                    top: 10vmin;
                                    left: -10vmin;
                                    width: 750px;
                                    height: 600px;
                                    background: #fff;
                                    border-radius: 3px;
                                    text-align: left;
                                    padding: 13vmin 5vmin 20vmin 10vmin;
                                    box-shadow: 20px 25px 20px rgba(0, 0, 0, 0.1);
                                    font-family: var(--Rubik);
                                    z-index: 1;
                                    border-radius: 30px;
                                    border-right: 15px solid rgb(224, 224, 224);
                                    border-bottom: 15px solid rgb(223, 223, 223);
                                    border-left: 3px solid rgb(227, 227, 227);
                                    border-top: 3px solid rgb(228, 228, 228);
                                }
                                
                                .section-1 .row .col-md-6 .panel p {
                                    font-size: 1.2em;
                                    color: rgba(0, 0, 0, 0.5);
                                    text-align: justify;
                                }
                                
                                .section-1 .row .col-md-6 .panel h1 {
                                    margin-top: -50px;
                                    background-color: rgb(240, 236, 236);
                                    padding: 5px;
                                    border-radius: 30px;
                                }
                                /*section-2*/
                                
                                .cover {
                                    width: 100%;
                                    height: 50vmin;
                                    background: url("images/banner2.jpg");
                                    background-position: center;
                                    background-repeat: no-repeat;
                                    background-size: 100%;
                                    position: relative;
                                }
                                
                                .cover .content {
                                    /* background: rgba(0, 0, 0, 0.7); */
                                    width: 100%;
                                    height: 100%;
                                    padding-top: 3vmin;
                                    /* transition: 2s; */
                                    animation: banneranim linear 10s infinite alternate;
                                }
                                
                                @keyframes banneranim {
                                    0% {
                                        background: rgba(0, 0, 0, 0.2);
                                    }
                                    30% {
                                        background: rgba(0, 0, 0, 0.4);
                                    }
                                    60% {
                                        background: rgba(0, 0, 0, 1);
                                    }
                                    90% {
                                        background: rgba(0, 0, 0, 0.5);
                                    }
                                }
                                
                                .cover .content>h1 {
                                    color: whitesmoke;
                                    font-family: var(--Patua);
                                    font-size: 8vmin;
                                }
                                
                                .cover .content>h3 {
                                    font-family: var(--Patua);
                                    color: bisque;
                                    font-size: 6vmin;
                                }
                                
                                .cover .content>p {
                                    font-family: var(--Rubik);
                                    font-size: 3vmin;
                                    color: aliceblue;
                                }
                                
                                .numbers .rect {
                                    position: relative;
                                    z-index: 1;
                                    background: white;
                                    width: 15rem;
                                    height: 15rem;
                                    padding-top: 3.5vmin;
                                    margin: 1rem;
                                    border-radius: 100%;
                                    box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2);
                                    margin-top: -35vmin;
                                    /* margin-left: 10vmin; */
                                    border: 3px solid rgb(255, 255, 255);
                                }
                                
                                .numbers .rect1 {
                                    position: relative;
                                    z-index: 1;
                                    background-image: url("images/present/cement1.jpg");
                                    background-size: 100%;
                                    width: 15rem;
                                    height: 15rem;
                                    padding-top: 3.5vmin;
                                    margin: 1rem;
                                    border-radius: 100%;
                                    box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2);
                                    margin-top: -35vmin;
                                    /* margin-left: 10vmin; */
                                    border: 3px solid rgb(255, 255, 255);
                                }
                                
                                .numbers .rect2 {
                                    position: relative;
                                    z-index: 1;
                                    background-image: url("images/present/watercolor2.jpg");
                                    background-size: 100%;
                                    width: 15rem;
                                    height: 15rem;
                                    padding-top: 3.5vmin;
                                    margin: 1rem;
                                    border-radius: 100%;
                                    box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2);
                                    margin-top: -35vmin;
                                    /* margin-left: 10vmin; */
                                    border: 3px solid rgb(255, 255, 255);
                                }
                                
                                .numbers .rect3 {
                                    position: relative;
                                    z-index: 1;
                                    background-image: url("images/present/wood1.jpg");
                                    background-size: 100%;
                                    width: 15rem;
                                    height: 15rem;
                                    padding-top: 3.5vmin;
                                    margin: 1rem;
                                    border-radius: 100%;
                                    box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2);
                                    margin-top: -35vmin;
                                    /* margin-left: 10vmin; */
                                    border: 3px solid rgb(255, 255, 255);
                                }
                                
                                .numbers .rect4 {
                                    position: relative;
                                    z-index: 1;
                                    background-image: url("images/present/cement2.jpg");
                                    background-size: 100%;
                                    width: 15rem;
                                    height: 15rem;
                                    padding-top: 3.5vmin;
                                    margin: 1rem;
                                    border-radius: 100%;
                                    box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2);
                                    margin-top: -35vmin;
                                    /* margin-left: 10vmin; */
                                    border: 3px solid rgb(255, 255, 255);
                                }
                                
                                .numbers .rect h1 {
                                    padding-top: 6vmin;
                                    font-size: 4vmin;
                                    flex-wrap: wrap;
                                    color: rgb(235, 168, 12);
                                    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
                                }
                                
                                .results {
                                    margin-top: 50px;
                                }
                                
                                .results h1 {
                                    font-family: var(--Lobster);
                                    background-color: rgb(194, 193, 193);
                                    padding: 5px;
                                }
                                
                                .results p {
                                    font-family: var(--Sniglet);
                                    font-size: 4vmin;
                                }
                                
                                .results .cards .card {
                                    width: 10erm;
                                    margin: 3vmin;
                                }
                                
                                .cards div {
                                    padding: 0;
                                    margin: 0;
                                }
                                
                                .cards div {
                                    border-top-left-radius: 20px;
                                    border-top-right-radius: 20px;
                                }
                                
                                .cards .title {
                                    background: rgba(173, 175, 175, 0.2);
                                    padding: 1.4rem 2.5rem;
                                    font-size: 2vmin;
                                }
                                
                                .card .card-text1 {
                                    padding: 2.5rem 3rem;
                                    color: var(--light-black);
                                    background: url("images/present/cement1.jpg");
                                    background-size: 100%;
                                    width: 340px;
                                    height: 300px;
                                    box-shadow: 4px 2px 6px 3px rgba(0, 0, 0, 0.05);
                                }
                                
                                .card .card-text2 {
                                    padding: 2.5rem 3rem;
                                    color: var(--light-black);
                                    background: url("images/present/cement2.jpg");
                                    background-size: 100%;
                                    width: 340px;
                                    height: 300px;
                                    box-shadow: 4px 2px 6px 3px rgba(0, 0, 0, 0.05);
                                }
                                
                                .card .card-text3 {
                                    padding: 2.5rem 3rem;
                                    color: var(--light-black);
                                    background: url("images/present/watercolor1.jpg");
                                    background-size: 100%;
                                    width: 340px;
                                    height: 300px;
                                    box-shadow: 4px 2px 6px 3px rgba(0, 0, 0, 0.05);
                                }
                                
                                .card .card-text4 {
                                    padding: 2.5rem 3rem;
                                    color: var(--light-black);
                                    background: url("images/present/watercolor2.jpg");
                                    background-size: 100%;
                                    width: 340px;
                                    height: 300px;
                                    box-shadow: 4px 2px 6px 3px rgba(0, 0, 0, 0.05);
                                }
                                
                                .card .card-text5 {
                                    padding: 2.5rem 3rem;
                                    color: var(--light-black);
                                    background: url("images/present/watercolor3.jpg");
                                    background-size: 100%;
                                    width: 340px;
                                    height: 300px;
                                    box-shadow: 4px 2px 6px 3px rgba(0, 0, 0, 0.05);
                                }
                                
                                .card .card-text6 {
                                    padding: 2.5rem 3rem;
                                    color: var(--light-black);
                                    background: url("images/present/wood1.jpg");
                                    background-size: 100%;
                                    width: 340px;
                                    height: 300px;
                                    box-shadow: 4px 2px 6px 3px rgba(0, 0, 0, 0.05);
                                }
                                
                                .card-body .pricing {
                                    background: rgba(255, 255, 255, 0.4);
                                    box-shadow: 4px 2px 6px 3px rgba(0, 0, 0, 0.05);
                                    height: 130px;
                                }
                                
                                .card-body .pricing a {
                                    margin-top: 8px;
                                }
                                
                                .section-3 {
                                    height: 70vmin;
                                    margin-top: 15vmin;
                                    background: var(--bggradient);
                                }
                                
                                .section-3 .col-md-12>h1 {
                                    padding: 2em 0 0.5em 0;
                                    color: whitesmoke;
                                    font-size: 6vmin;
                                }
                                
                                .section-3 .col-md-12>p {
                                    padding: 0 4em;
                                    padding-bottom: 2em;
                                    color: var(--light-gray);
                                    font-size: 4vmin;
                                }
                                /* #prof {
                                width: 50%;
                            } */
                                
                                .container-fluid .row .col-md-5 {
                                    margin: 10px auto;
                                }
                                
                                .container-fluid .row .col-md-2 {
                                    margin-top: 10px;
                                }
                                
                                @media only screen and (max-width: 720px) {
                                    #prof {
                                        position: relative;
                                        top: -35px;
                                        left: 10px;
                                    }
                                }
                                
                                #cont1 {
                                    text-align: center;
                                }
                                
                                #cont2,
                                #cont3 {
                                    position: relative;
                                    left: -12%;
                                    text-align: center;
                                }
                                
                                #cont2 p {
                                    position: relative;
                                    top: -15%;
                                }
                                
                                @media only screen and (max-width: 720px) {
                                    .section-1 .row .col-md-6 .panel {
                                        position: absolute;
                                        top: 5vmin;
                                        left: 1vmin;
                                        margin-top: -100px;
                                        width: 520px;
                                        height: 730px;
                                        background: #fff;
                                        border-radius: 3px;
                                        text-align: left;
                                        padding: 13vmin 5vmin 20vmin 10vmin;
                                        box-shadow: 20px 25px 20px rgba(0, 0, 0, 0.1);
                                        font-family: var(--Rubik);
                                        z-index: 1;
                                        border-top-left-radius: 20px;
                                        border-bottom-left-radius: 20px;
                                        background-color: rgb(223, 219, 219);
                                        color: rgb(68, 43, 1);
                                        transition: 2s;
                                    }
                                }
                                
                                @media only screen and (max-width: 720px) {
                                    .section-1 .row .col-md-6 .pray img {
                                        margin: 100px auto;
                                        margin-left: -10px;
                                        margin-top: 15px;
                                        opacity: 0.8;
                                        width: 100%;
                                        height: 100%;
                                        border-radius: 50%;
                                        box-shadow: 6px 6px 4px rgba(0, 0, 0, 0.3);
                                        border: 5px solid rgb(255, 255, 255);
                                        transition: 2s;
                                    }
                                }
                                
                                @media only screen and (max-width: 720px) {
                                    .results {
                                        margin-top: 80px;
                                    }
                                }
                                
                                @media only screen and (max-width: 720px) {
                                    .cover {
                                        margin-top: 700px;
                                        width: 100%;
                                        height: 50vmin;
                                        background: url("images/banner2.jpg");
                                        background-position: center;
                                        background-repeat: no-repeat;
                                        background-size: 100%;
                                        position: relative;
                                    }
                                }
                                
                                @media only screen and (max-width: 720px) {
                                    .numbers .rect1,
                                    .numbers .rect2,
                                    .numbers .rect3,
                                    .numbers .rect4 {
                                        display: none;
                                    }
                                }
                                
                                @media only screen and (max-width: 720px) {
                                    #cont1 {
                                        text-align: center;
                                    }
                                    #cont2,
                                    #cont3 {
                                        position: relative;
                                        left: 0;
                                        text-align: center;
                                    }
                                    #cont2 p {
                                        position: relative;
                                        top: 0;
                                    }
                                }
                                
                                @media only screen and (max-width: 720px) {
                                    #maintitle:hover {
                                        color: #009dff;
                                        box-shadow: 0 0 0 0;
                                    }
                                }
                                
                                @media(max-width: 991px) {
                                    #prof img {
                                        width: 80%;
                                        margin-left: -30px;
                                    }
                                }
                                
                                .quli {
                                    color: rgb(221, 223, 223);
                                }