@import url(https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap);

.button-1:hover,
.button-2:hover {
    transform: translateY(-4px);
    transition: .5s
}

#service-carousel .owl-dots,
ul#tabs-nav li span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

:root {
    --color-white: #fff;
    --color-black: #000;
    --main-font: "Mulish", sans-serif;
    --para-color: #9F9F9F;
    --head-color: #3C3B3B
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth
}

body {
    font-family: var(--main-font);
    background-color: #f0f8ffa6;
}

a {
    text-decoration: none !important
}

img {
    max-width: 100% !important;
    height: auto
}

p {
    font-size: 19px;
    color: #282727;
    line-height: 35px
}

.container {
    max-width: 1600px
}

#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: .5s;
    z-index: 1000
}

#navbar .dark,
#navbar.scrolled .light,
#service-carousel .owl-nav {
    display: none
}

#navbar.scrolled .dark {
    display: block
}

#navbar.scrolled {
    box-shadow: 0 4px 13px 0 rgba(0, 0, 0, .07);
    margin-top: 0 !important;
    transition: .5s;
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 10px 0
}

#navbar img {
    width: 250px;
    transition: .5s;
    margin-top: 15px;
}

#navbar.scrolled img {
    width: 200px;
    transition: .5s;
    margin-top: 0px;
}

.banner-bg {
    height: 100vh;
    width: 100%;
    /* background-image: url(../img/banner-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.banner-bg-video{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.banner-bg-video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner-bg-video::after {
	background: rgba(0, 0, 0, 0.377);
	top: 0px;
	left: 0px;
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
}

.banner-cont{
    position: relative;
    z-index: 10;
}

.carousel-transition-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(128,128,128,0.4); 
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.5s;
}
.carousel-item.carousel-transitioning .carousel-transition-overlay {
  opacity: 1;
}

.gradient-text {
    background: linear-gradient(90deg, #ff61eb 38.26%, #ca31b6 70%);
    background-size: 600% 600%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 10s infinite gradientAnimation
}

@keyframes gradientAnimation {
    0%,
    100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}

.banner-cntnt {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-cntnt h2 {
    font-size: 45px;
    color: var(--color-white);
    line-height: 60px;
    font-weight: 800
}

.banner-cntnt img {
    width: 550px;
    display: block;
    margin: 0 auto;
    border: 12px solid #fff;
    /* border-bottom: 0; */
    border-radius: 70px;
    position: relative;
}

.right-banner-img{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner-img-sec{
    background-color: #7c4ee480;
    width: 76%;
    height: 100%;
    position: absolute;
    rotate: 168deg;
    border-radius: 50px;
}

.banner-btns {
    display: flex;
    gap: 20px;
    margin-top: 30px
}

.button-1 {
    padding: 15px 35px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    /* background: linear-gradient(98deg, #a207d3 23.51%, #f242fc 100%); */
    background: linear-gradient(90deg, #7f2ec3 0%, #d018b8 100%);
    background-size: 400% 400%;
    border: none;
    /* border-radius: 5px; */
    cursor: pointer;
    transition: .5s
}

.button-1:hover {
    animation: 3s infinite gradientHover
}

@keyframes gradientHover {

    0%,
    100% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 50%
    }
}

.button-2 {
    box-shadow: 0 4px 124px 0 rgba(0, 0, 0, .25);
    background: rgba(151, 147, 147, .34);
    border: 1px solid #fefbfb;
    transition: .5s
}

.banner-btns button {
    font-size: 17px;
    font-weight: 500;
    height: 55px;
    padding: 0 25px;
    border-radius: 0px;
    color: var(--color-white)
}
.banner-btns button span{
    margin-left: 5px;
}

.abt-section {
    padding: 90px 0
}

.logo-head {
    /* display: flex;
    align-items: center; */
    gap: 20px;
    margin-bottom: 20px
}

.logo-head h6 {
    font-size: 16px;
    background: rgba(124, 78, 228, 0.1);
    font-weight: 400;
    color: #7c4ee4;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 50px;
}

.logo-head img {
    width: 160px
}

.sec-head {
    color: var(--color-black);
    font-size: 35px;
    font-weight: bold;
    margin: 0
}

.abt-img {
    width: 700px
}

.serv-slider-img {
    height: 300px;
    width: 100%
}

.serv-slider-img img {
    border: 1px solid #fff;
    border-radius: 30px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
    height: 100%;
    width: 100%;
    object-fit: cover
}

#service-carousel .item {
    margin: 0 150px
}

#service-carousel {
    margin-top: 80px
}

.serv-slider-box h4 {
    text-align: center;
    margin-bottom: 30px
}

.serv-slider-cntnt {
    padding: 30px
}

#service-carousel .owl-dots {
    top: 40%;
    display: flex;
    flex-direction: column;
    transition: .5s;
    z-index: -1
}

#service-carousel .owl-dots span {
    background-color: #d9d9d9;
    height: 15px;
    width: 15px;
    margin: 5px
}

#service-carousel .owl-dots .owl-dot.active span {
    background: linear-gradient(0deg, #c819f8 0, #6206cd 100%) !important;
    transition: .5s;
    border: 1px dashed #6206cd
}

#service-carousel .owl-dot.active {
    border: 2px dashed #6206cd;
    border-radius: 50px;
    margin: 5px 0
}

.serv-slider-cntnt p {
    font-size: 17px;
    color: #201f1f
}

.event-list-section {
    padding: 80px 0
}

#event-carousel {
    margin-top: 60px
}

.event-list-section .event-slider-box {
    padding: 40px;
    min-height: 525px;
    text-align: center
}

.event-list-section .owl-item:nth-child(odd) .event-slider-box {
    border-radius: 20px 20px 0 0
}

.event-list-section .owl-item:nth-child(2n) .event-slider-box {
    border-radius: 0 0 20px 20px
}

.event-list-section .event-slider-box h4 {
    font-weight: 600;
    font-size: 30px;
    line-height: 170%;
    text-align: center;
    color: #fefbfb;
    margin: 0
}

.event-list-section .event-slider-box p {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #fefbfb;
    margin-top: 0;
    margin-bottom: 25px
}

.event-list-section .event-slider-box button {
    border: 1px solid #fefbfb;
    /* border-radius: 10px; */
    padding: 8px 20px;
    background: #fefbfb30;
    font-weight: 600;
    font-size: 18px;
    color: #fff;
}

.event-list-section .event-slider-box .event-image {
    width: 100%;
    height: 220px;
    margin-top: 32px
}

.event-list-section .event-slider-box .event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px
}

.event-list-section .event-slider-box.one {
    background: linear-gradient(180deg, #29072e 0, #110941 50%, #270b2e 100%)
}

.event-list-section .event-slider-box.two {
    background: linear-gradient(180deg, #3e19d0 0, #5b538a 50%, #708bb4 100%)
}

.event-list-section .event-slider-box.three {
    background: linear-gradient(180deg, #b5a0c0 0, #a17ba4 50%, #efe5e5 100%)
}

.event-list-section .event-slider-box.four {
    background: linear-gradient(180deg, #13b0b7 0, #4d466e 50%, #8099bf 100%)
}

ul#tabs-nav .owl-next,
ul#tabs-nav .owl-prev {
    position: absolute;
    top: 57%;
    transform: translateY(-50%);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px
}

footer ul li a:hover,
ul#tabs-nav .owl-nav i {
    color: #6416c2
}

ul#tabs-nav .owl-prev {
    left: -3px
}

ul#tabs-nav .owl-next {
    right: -3px
}

ul#tabs-nav .item {
    text-align: center
}

ul#tabs-nav .owl-next:hover,
ul#tabs-nav .owl-prev:hover {
    background: 0 0
}

ul#tabs-nav {
    list-style: none;
    margin: 0 0 80px;
    padding: 0;
    overflow: auto;
    display: flex;
    justify-content: center
}

ul#tabs-nav .owl-stage-outer {
    padding-top: 60px
}

ul#tabs-nav li {
    border-bottom: 1px solid;
    border-left: 3px solid;
    border-right: 3px solid;
    border-color: #909090;
    border-radius: 0 0 10px 10px;
    padding: 30px 15px;
    display: inline-block;
    cursor: pointer;
    margin-right: 30px;
    position: relative
}

ul#tabs-nav li::before {
    content: "";
    width: 100%;
    height: 5px;
    top: 0;
    left: 0;
    position: absolute;
    background: #909090
}

ul#tabs-nav li.active::before {
    background: linear-gradient(to right, #cf07ff, #6206cd)
}

ul#tabs-nav li.active {
    border-color: #6416c2;
    border-left: 3px solid #6416c2;
    border-right: 3px solid #6416c2
}

ul#tabs-nav li:last-child {
    margin: 0
}

#tabs-nav li a {
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    color: #909090
}

#tabs-nav li.active a {
    border-color: #6416c2
}

ul#tabs-nav li img {
    width: 30px;
    height: 30px
}

ul#tabs-nav li span {
    padding: 10px;
    border-radius: 50px;
    background-color: #fff;
    top: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #6416c2
}

ul#tabs-nav li.active span {
    border-color: #000
}

.tab-left-sec img {
    width: 100%;
    height: 100%;
    border-radius: 20px
}

.tab-right-sec {
    border-radius: 10px;
    padding: 20px 30px 30px;
    height: 100%
}

.tab-right-sec h3 {
    font-weight: 600;
    font-size: 40px;
    color: #1b1b1b;
    margin-bottom: 30px;
    margin-top: 30px
}

.tab-right-sec p {
    font-weight: 200;
    font-size: 20px;
    line-height: 170%;
    color: #1e1e1e;
    margin-bottom: 30px
}

/* .tab-right-sec button {
    border-radius: 40px
} */

.tab-content-wrapper {
    gap: 70px
}

.features-section {
    padding-bottom: 80px
}

.explore-section {
    padding: 60px 45px;
    background-image: url(../img/explore-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.explore-section .app-btn {
    display: flex;
    gap: 25px;
    justify-content: center
}

.explore-section .app-btn img {
    width: 250px;
    height: 70px
}

.explore-slider-box .right-sec img,
footer .logo img {
    width: 100%;
    height: 100%
}

.explore-slider-box .left-sec h2 {
    font-weight: 600;
    font-size: 56px;
    line-height: 114%;
    text-align: center;
    color: #fff
}

.explore-slider-box .left-sec p {
    font-weight: 600;
    font-size: 22px;
    line-height: 30px;
    margin: 20px 0 50px;
    text-align: center;
    color: #fefbfb
}

footer {
    padding: 50px 0 40px
}

footer .footer-top {
    padding-bottom: 30px;
    border-bottom: 1px solid #dfdfdf
}

footer .logo {
    width: 180px;
    height: auto;
    margin: 0 auto 24px
}

footer .footer-nav {
    margin-bottom: 24px
}

footer ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center
}

footer ul li {
    display: inline-block;
    margin-right: 24px
}

footer ul li a {
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    color: #3a3737
}

footer .social-icons a img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    margin-right: 22px;
    transition: .5s;
    filter: grayscale(100%)
}

footer .social-icons a img:hover {
    filter: grayscale(0%)
}

.footer-widget {
    padding-top: 22px
}

.footer-widget p {
    font-weight: 400;
    font-size: 14px;
    color: #3a3737;
    margin: 0
}

#tabs-nav::-webkit-scrollbar {
    width: 10px;
    height: 8px
}

#tabs-nav::-webkit-scrollbar-thumb {
    background-color: #6316c291;
    border-radius: 10px;
    cursor: grabbing
}

.content-sec {
    min-height: 150px
}

.hidden-iframe {
    display: none;
    visibility: hidden
}

@media screen and (max-width:1600px) {
    .container {
        max-width: 1380px
    }

    .left-banner{
        padding-left: 12%;
    }

    .banner-cntnt h2 {
        font-size: 36px;
        line-height: 45px
    }

    .banner-cntnt img {
        width: 410px
    }

    .sec-head {
        font-size: 32px
    }

    .logo-head {
        gap: 10px
    }

    .logo-head img {
        width: 170px
    }

    #service-carousel .item {
        margin: 0 50px
    }

    .abt-section {
        padding: 60px 0
    }

    #service-carousel {
        margin-top: 40px
    }

    .serv-slider-cntnt {
        padding: 15px
    }

    .event-list-section,
    .features-section {
        padding-bottom: 60px
    }

    .event-list-section {
        padding-top: 0
    }

    .event-list-section .event-slider-box h4 {
        font-size: 26px
    }

    ul#tabs-nav {
        padding-bottom: 20px;
        margin-bottom: 40px
    }

    ul#tabs-nav li {
        min-width: 195px;
        text-align: center;
        padding: 35px 15px 15px
    }

    #tabs-nav li a {
        font-size: 15px
    }

    .tab-right-sec h3 {
        margin: 0 0 10px;
        font-size: 28px
    }

    .tab-right-sec p {
        font-size: 16px;
        margin-bottom: 25px
    }

    .explore-slider-box .left-sec h2 {
        font-size: 42px
    }

    .explore-slider-box .left-sec p {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px
    }

    .explore-section .app-btn img {
        width: 200px;
        height: 60px
    }

    .explore-section .sec-head {
        margin-bottom: 15px;
        font-size: 40px
    }

    .explore-section .app-btn {
        justify-content: center
    }

    footer {
        padding: 50px 0
    }

    footer .logo {
        margin-bottom: 15px
    }

    footer ul li a {
        font-size: 18px
    }

    #navbar img,
    #navbar.scrolled img {
        width: 180px;
        margin-top: 20px
    }

    #navbar.scrolled img {
        margin: 0
    }

    .event-list-section .event-slider-box {
        padding: 22px
    }

    .explore-section {
        padding: 40px 20px
    }
}

@media screen and (max-width:1200px) {

    .explore-section .sec-head,
    .sec-head {
        font-size: 28px
    }

    .container {
        max-width: 1080px
    }
}

@media screen and (max-width:1025px) {
    .container {
        max-width: 960px
    }
}

@media screen and (max-width:992px) {
    .left-sec{
        margin-top: 30px;
    }
}

@media screen and (max-width:986px) {
    .left-sec img{
        margin-top: 30px;
    }
    .banner-btns button {
        padding: 0 10px;
    }

    .abt-section .left-sec,
    .tab-right-sec,
    .tab-right-sec h3 {
        text-align: center
    }

    #navbar img,
    #navbar.scrolled img {
        width: 115px
    }

    .content-sec {
        min-height: 125px
    }

    .explore-slider-box .top-text {
        margin-bottom: 10px
    }

    .explore-slider-box .left-sec h2 br,
    .sec-head br {
        display: none
    }

    ul#tabs-nav .item {
        margin-right: 20px
    }

    #service-carousel .owl-dot.active {
        margin: 0 5px
    }

    .banner-cntnt h2,
    .explore-section .sec-head,
    .sec-head {
        font-size: 26px;
        line-height: 32px
    }

    .banner-btns button {
        font-size: 14px;
        height: 38px
    }

    #service-carousel,
    .banner-btns,
    .explore-slider-box .right-sec img {
        margin-top: 20px
    }

    #navbar {
        padding-top: 20px
    }

    .banner-cntnt img {
        width: 80%;
        margin: 0
    }

    .banner-bg {
        height: 100vh
    }

    .abt-section,
    .event-list-section {
        padding: 50px 0
    }

    .abt-img {
        width: 75%;
        margin-bottom: 16px
    }

    .logo-head img {
        width: 110px
    }

    .logo-head {
        gap: 10px;
        margin-bottom: 10px
    }

    .abt-section p,
    .serv-slider-cntnt p {
        font-size: 16px;
        line-height: 24px
    }

    .button-1 {
        padding: 8px 20px;
        font-size: 14px
    }

    #service-carousel .item {
        margin: 0
    }

    .serv-slider-box h4 {
        margin-bottom: 16px;
        font-size: 20px
    }

    #service-carousel .owl-dots {
        position: absolute;
        left: 50%;
        top: 95%;
        flex-direction: row
    }

    .serv-slider-cntnt {
        padding: 15px
    }

    #service-carousel .owl-dots span {
        height: 10px;
        width: 10px;
        margin: 5px
    }

    #event-carousel {
        margin-top: 30px
    }

    .event-list-section .event-slider-box h4 {
        font-size: 22px;
        line-height: 35px
    }

    .event-list-section .event-slider-box p {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 16px
    }

    .event-list-section .event-slider-box button {
        font-size: 14px;
        padding: 6px 16px
    }

    .event-list-section .event-slider-box .event-image {
        margin-top: 22px
    }

    .event-list-section .owl-item:nth-child(2n) .event-slider-box,
    .event-list-section .owl-item:nth-child(odd) .event-slider-box {
        border-radius: 20px
    }

    .event-list-section .event-slider-box {
        padding: 20px;
        min-height: 450px
    }

    ul#tabs-nav {
        padding-top: 40px;
        justify-content: start;
        padding-bottom: 15px;
        margin-bottom: 10px
    }

    ul#tabs-nav li {
        padding: 23px 20px 15px;
        margin-right: 15px
    }

    #tabs-nav li a,
    footer ul li a {
        font-size: 14px
    }

    ul#tabs-nav li img {
        width: 20px;
        height: 20px
    }

    ul#tabs-nav li span {
        padding: 6px;
        top: -15px
    }

    .tab-content-wrapper {
        flex-direction: column-reverse;
        gap: 15px
    }

    .tab-right-sec {
        border: none;
        border-radius: 0;
        padding: 15px;
        background: 0 0
    }

    .tab-right-sec h3 {
        font-size: 18px;
        color: #6416c2;
        margin-bottom: 10px;
        margin-top: 0
    }

    .tab-right-sec p {
        font-size: 16px;
        margin-bottom: 15px
    }

    .features-section {
        padding-bottom: 50px
    }

    .explore-section {
        padding: 50px 15px 40px
    }

    .explore-slider-box .left-sec h2 {
        font-size: 20px
    }

    .explore-slider-box .left-sec p {
        font-size: 16px;
        line-height: 22px;
        margin: 10px 0 30px
    }

    .explore-section .app-btn img {
        width: 190px;
        height: 55px
    }

    .explore-section .app-btn {
        justify-content: center
    }

    footer .logo {
        width: 125px;
        margin: 0 auto 10px
    }

    footer ul li {
        margin-right: 0
    }

    footer ul {
        display: flex;
        gap: 20px;
        justify-content: center
    }

    .footer-widget {
        padding-top: 15px
    }
}

@media screen and (max-width:768px) {
    /* .banner-bg {
        height: 45vh
    } */
    .banner-btns {
        gap: 5px;
    }
    .button-1 svg,
    .button-2 svg {
        width: 12px;
    }
    .banner-cntnt img {
        border: 3px solid #fff;
    }
}

@media screen and (max-width:700px) {
    .left-banner, .right-banner{
        width: 100%;
    }
    .banner-img-sec{
        display: none;
    }
    .banner-cntnt img {
        margin: 30px auto 40px;
        width: 370px
    }

    .banner-btns button {
        padding: 0 18px
    }

    .abt-img {
        width: 100%
    }

    #navbar {
        padding-top: 0
    }

    /* .banner-bg {
        height: 95vh
    } */

    .event-list-section .event-slider-box {
        min-height: auto
    }

    .explore-section .app-btn img {
        width: 145px;
        height: 40px
    }
}

@media screen and (max-width:480px) {
    .banner-wrapper {
        flex-direction: column-reverse
    }

    /* .banner-bg {
        height: 90vh
    } */

    .explore-section .sec-head,
    .sec-head {
        font-size: 24px;
        line-height: 28px
    }

    .banner-cntnt h2 {
        font-size: 24px;
        line-height: 30px
    }

    .banner-btns button {
        padding: 0 8px
    }
}

@media screen and (max-width:380px) {
    /* .banner-bg {
        height: 95vh
    } */
    .banner-btns button span {
        display: none;
    }
}

/* @media screen and (max-width:325px) {
    .banner-bg {
        height: 100vh
    }
} */