/*================================================
Preloader Area CSS
=================================================*/
.preloader {
    position: fixed; width: 100%; height: 100%; z-index: 99999; background: #fc5a1b; top: 0; left: 0;
    .loader { position: absolute; top: 42%; left: 0; right: 0; transform: translateY(-42%); text-align: center; margin: 0 auto; width: 50px; height: 50px; }
    .box { width: 100%; height: 100%; background: #fff; animation: animate .5s linear infinite; position: absolute; top: 0; left: 0; border-radius: 3px; }
    .shadow { width: 100%; height: 5px; background: #0523a5; opacity: 0.1; position: absolute; top: 59px; left: 0; border-radius: 50%; animation: shadow .5s linear infinite; }
}
@keyframes loader {
    0% {left: -100px}
    100% {left: 110%;}
}
@keyframes animate {
    17% { border-bottom-right-radius: 3px;} 
    25% {transform: translateY(9px) rotate(22.5deg);} 
    50% { transform: translateY(18px) scale(1,.9) rotate(45deg); border-bottom-right-radius: 40px; } 
    75% { transform: translateY(9px) rotate(67.5deg); } 
    100% { transform: translateY(0) rotate(90deg); }
}
@keyframes shadow {
    50% {transform: scale(1.2,1);}
}
section {width: 100%; float: left; padding: 100px 0;}
.headerContainer{width: 100%; float: left;}
.headerContainer .topBarContainer{width: 70%;height: 70px;position: absolute;top: 70px;left: 15%;z-index: 9;display: flex;justify-content: space-between;gap: 70px; transition: all .3s ease-in-out;}
.headerContainer .topBarContainer .logoCont{height: 88px;background: #ffffff;border-radius: 50px 0 0 50px;position: relative;display: flex;align-items: center;justify-content: space-between;padding: 0 10px;}
.headerContainer .topBarContainer .logoCont img{border-radius: 20px;}
.headerContainer .topBarContainer .logoCont:before{content: "";position: absolute;right: -55px;top: 0;width: 0;height: 0;border-top: 70px solid #ffffff;border-right: 55px solid transparent;}
.headerContainer .topBarContainer .logoCont:after{content: "";position: absolute;right: -14px;bottom: 0;width: 0;height: 0;border-bottom: 18px solid #ffffff;border-right: 14px solid transparent;}
.headerContainer .topBarContainer .rightCont{width: 80%;height: 70px;background: #9914CB;border-radius: 0 50px 50px 0;position: relative;color: #fff;display: flex;align-items: center;justify-content: flex-end;padding: 0 10px 0 0;}
.headerContainer .topBarContainer .rightCont:before{content: "";position: absolute;top: 0;left: -56px;width: 0;height: 0;border-bottom: 70px solid #9914CB;border-left: 56px solid transparent;}
.headerContainer .topBarContainer .rightCont:after{content: ""; position: absolute; bottom: -18px; left: -56px; width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 18px solid #B839E7;}
.headerContainer .topBarContainer .rightCont span{font-size: 20px;width: 314px;line-height: 23px;font-style: italic;text-shadow: 2px 2px 5px #000000bd;}
.headerContainer .topBarContainer .rightCont a{background: white;border-radius: 50px;padding: 0px 26px;height: 78%;display: flex;align-items: center;text-decoration: none;color: #000;font-size: 16px;line-height: 10px;margin-left: 30px;text-transform: uppercase;font-weight: 600; position: relative; overflow: hidden;}
.headerContainer .topBarContainer .rightCont a strong{font-weight: 500;z-index: 9; transition: all ease-in-out 0.3s;}
.headerContainer .topBarContainer .rightCont a:before {content: ""; position: absolute; top: 0; right: 0; width: 0; border-radius: 50px; height: 100%; background-color: tomato; transition: all .3s ease;}
.headerContainer .topBarContainer .rightCont a:hover:before {width: 100%;right: auto;left: 0;}
.headerContainer .topBarContainer .rightCont a:hover strong{color: #fff;transition: all ease-in-out 0.3s;}
.topBarFxd{display: block;top: 0 !important;transition: all .3s ease;position: fixed !important;width: 100% !important;left: 0 !important;transition: all .3s ease-in-out;z-index: 99 !important;}
.topBarFxd .logoCont, .topBarFxd .rightCont{border-radius: 0!important;}

.slider {width: 100%; float: left; position: relative;}
.slider:before{content: '';background: url(../images/banner-layer.png) no-repeat left bottom;position: absolute;width: 50%;height: 100%;top: 0;left: 0;bottom: 0;z-index: 2;}
.slider .topslider .item{position: relative;}
.slider .topslider .item:before{content: '';background: #0000007a;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.slider .topslider .item img{height: 100vh; object-fit: cover;}
.slider .notes{position: absolute;top: 0;right: 0;bottom: 0;left: 0;display: flex;z-index: 9;align-items: center;justify-content: center;pointer-events: none;}
.slider .notes > div{text-align: center;font-size: 18px;}
.slider .notes > div strong{display: block;font: 400 55px "Federo", serif;line-height: 50px;margin-bottom: 13px;overflow: hidden;padding-top: 10px;}
.slider .notes > div strong u {text-decoration: none;font-size: 100px;}
.slider .notes > div strong em{display: block;text-align: right;font: 400 30px inharit;}

.aboutSection{
    img{border-radius: 10px;}
    .about-text-wrap {background-color: #172b3b;text-align: center;border-radius: 15px;padding: 25px;color: #fff;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;}
    .about-text-wrap img {display: inline-block;height: 70px;width: 70px;line-height: 70px;background-color: #ffede5;color: #fc5a1b;font-size: 45px;text-align: center;transition: 0.6s;border-radius: 50%;margin-bottom: 6px;}
    .heading{ font-size: 38px; margin-bottom: 15px; line-height: 1.5; font: 500 32px "Federo", serif; }
    .textWrap{width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;}
}

.experience-area {
    padding: 100px 0; width: 100%; float: left; position: relative; z-index: 1;

    &::before { position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 50%; background-color: #fc5a1b; z-index: -1; }
    &::after {position: absolute;content: "";right: 0;top: 0;height: 100%;width: 50%;background: url(../images/experience.jpg) no-repeat center center;z-index: -1;background-size: cover;}
}
.experience-content {
    padding-right: 70px;

    span {
        font-size: 15px;
        font-weight: 500;
        display: inline-block;
        margin-bottom: 15px;
        font-family: "Federo", serif;
        color: #fff;
    }
    h3 {
        font-size: 38px;
        margin-bottom: 15px;
        color: #fff;
        line-height: 1.4;
    }
    p {
        color: #fff;
    }
}
.fun-fact-inner-box {
    margin-left: -45px;    
    .fun-fact-box {
        background-color: #fff; padding: 35px 30px 35px 112px; position: relative; border-radius: 10px; margin-bottom: 25px;
        &.bottom-0 {margin-bottom: 0;}
        .icon {
            position: absolute; left: 30px; top: 50%; transform: translateY(-50%);
            i { display: inline-block; height: 65px; width: 65px; line-height: 65px; background-color: #ffede5; color: #fc5a1b; font-size: 35px; text-align: center; border-radius: 50px; }
        }
        h3 { font-size: 30px; margin-bottom: 5px; }
        p { font-weight: 500; margin-bottom: 0; }
        &:hover {
            .icon {
                i { background-color: #fc5a1b; color: #fff; }
            }
        }
    }
}

.rules{position: relative;}
.rules .eachRules{height: 100%;}
.rules .eachRules ul{position: sticky; top: 150px;}
.rules .eachRules ul li{margin-bottom: 10px;list-style-type: none;position: relative;padding: 0 0 0 40px;}
.rules .eachRules ul li:before{content: '\e2ca';font: 400 20px 'Font Awesome 7 Pro';position: absolute;top: 7px;left: 0;}
.rules:before{content: '';position: absolute;background: url('../images/shape-one.webp') no-repeat top left;width: 30%;height: 100%;top: 0;left: 0;z-index: -1;}
.rules:after{ content: ''; position: absolute; background: url('../images/shape-two.webp') no-repeat left top; width: 30%; height: 100%; top: 0; right: 0; z-index: -1; -webkit-transform: scale(1, -1); -moz-transform: scale(1, -1); -o-transform: scale(1, -1); transform: scale(1, -1); }
.section-title {text-align: center;margin-bottom: 38px;}
.section-title span {font-size: 16px;font-weight: 500;display: inline-block;margin-bottom: 0;color: #fc5a1b;font-family: "Federo", sans-serif;}
.section-title h2 {font-size: 38px;margin-bottom: 15px;}

.eventContainer{width: 100%; float: left;}
.eventContainer .eachEvntCont{width: 100%;float: left;border-radius: 5px;border:1px solid #efefef;transition: all ease-in-out 0.3s;box-shadow: 0 0 30px #0000000d;font-size: 18px;}
.eventContainer .eachEvntCont:hover{background: tomato; color: white; transition: all ease-in-out 0.3s; border-color: tomato;}
.eventContainer .eachEvntCont a{ background: tomato; display: block; border-radius: 5px; text-align: center; text-transform: uppercase; text-decoration: none; color: white; padding: 5px 0px; font-size: 14px; font-weight: 500;  transition: all ease-in-out 0.3s;}
.eventContainer .eachEvntCont:hover a{background: white;color: tomato;transition: all ease-in-out 0.3s;box-shadow: 2px 2px 5px #00000030;}
.eventContainer .eachEvntCont span{border-radius: 50px;background: tomato;background: tomato; color: white;width: 40px;height: 40px;float: left;display: flex;align-items: center;justify-content: center;font-weight: 600;}
.eventContainer .eachEvntCont .date{font: 500 17px 'Federo';margin-bottom: 2px;}
.eventContainer .eachEvntCont .time{font: 500 24px 'Federo';text-transform: uppercase;letter-spacing: 2px;}

.banner-soon-content{display: flex;margin-bottom: 10px;}
.banner-soon-content #timer{color: white;font-size: 16px;display: flex;}
.banner-soon-content #timer div {width: 130px;height: 110px;font-size: 36px;font-weight: bolder;display: flex;justify-content: center;align-items: center;margin-right: 16px;flex-direction: column;background-color: #0000004d;border: 1px solid rgba(255, 255, 255, .2);border-radius: 10px;}
.banner-soon-content #timer div span {font-size: 16px;font-weight: normal; }

.overview-area {
    background-image: url(../../assets/images/overview-bg.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative; z-index: 1;
    &::before { position: absolute; content: ""; height: 100%; width: 100%; background-color: #0523a5; left: 0; right: 0; top: 0; z-index: -1; opacity: .77; }
}
.overview-content {
    span { font-size: 16px; font-weight: 500; display: inline-block; margin-bottom: 15px; color: #ffffff; font-family: 'Federo'; }
    h3 { font-size: 38px; margin-bottom: 15px; color: #ffffff; }
    p { color: #ffffff; margin-bottom: 0; }
}
.overview-btn {text-align: right;}

.default-btn {
    border: none; position: relative; display: inline-block; text-align: center; overflow: hidden; z-index: 1; color: #ffffff; background-color: #fc5a1b; transition: 0.6s; border-radius: 5px; padding: 15px 25px 15px 50px; font-weight: 500; font-size: 16px; margin-bottom: -5px; text-decoration: none;
    
    span { position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background-color: #000; transition: width 0.5s ease-in-out, height 0.5s ease-in-out; transform: translate(-50%, -50%); z-index: -1; border-radius: 5px; }
    i { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); font-size: 15px; }
    &:hover {
        color: #ffffff;
        span { width: 225%; height: 562.5px; }
    }
    &:focus { color: #ffffff;}
}
.footer{text-align: center; width: 100%; float: left; padding: 10px 0;}
.footer a{text-decoration: none; color: inherit;transition: all .3s ease;}
.footer a:hover{color: tomato;transition: all .3s ease; }
.bmk{width: 100%; float: left;}

.ml6 {position: relative;}
.ml6 .text-wrapper {position: relative;display: inline-block;overflow: hidden;}
.ml6 .letter {display: inline-block;}

.ml9 {position: relative;}
.ml9 .text-wrapper {position: relative;display: inline-block;padding-top: 0.2em;padding-right: 0.05em;padding-bottom: 0.1em;overflow: hidden;}
.ml9 .letter {transform-origin: 50% 100%;display: inline-block;}



@media (max-width: 576px) {
    section{padding: 20px 0;}
    .section-title {margin-bottom: 15px;}    
    .slider:before{background-size: cover;}
    .slider .topslider .item img{height: 25vh;object-fit: cover;}
    .slider .notes{padding: 55px 30px 0px 70px;}
    .slider .notes > div{font-size: 12px;}
    .slider .notes > div strong{font: 400 34px "Federo", serif;margin-bottom: 0;}

    .aboutSection {
        img {object-fit: cover;}
        .heading {font: 500 30px "Federo", serif;}
    }
    .banner-soon-content {
        #timer{display: flex;justify-content: space-between;width: 100%;}
        #timer div{width: 90px;height: 90px;margin-right: 0px;}
        #timer div:last-child{margin-right: 0px;}
    }
    .rules:before{width: 60%;height: 200px; background-size: cover;}
    .rules:after{width: 60%;height: 200px;background-size: cover;top: inherit;bottom: 0;}
    .rules img{width: 80%;}
    .rules .eachRules ul {padding: 0; }
    .eachEvntCont .title{margin: 15px 0;}
    .experience-area {
        padding: 20px 0 0px;
        .experience-content{
            padding: 0;
            & h3 {font-size: 30px;line-height: 30px;}
            & span{margin-bottom: 0;}
        }

        .fun-fact-inner-box {
            margin-left: 0px;
            .fun-fact-box {
                background-color: #fff;
                padding: 35px 15px 20px;
                position: relative;
                border-radius: 10px;
                margin-bottom: 25px;
                text-align: center;
                & .icon{position: relative;left: 0;top: 20px;text-align: center;
                    & i { height: 50px; width: 50px; line-height: 50px; font-size: 25px; }
                }
            }
        }
    }
    .footer{font-size: 12px; padding: 10px 20px;}
    .mobHeader{
        position: fixed;
        z-index: 9;
        border-radius: 50px;
        overflow: hidden;
        top: 12px;
        left: 0;
        right: 0;
        width: 60%;
        margin: 0 0 0 14%;
        padding: 9px 23px 9px 9px;
        background: #fff;
        
        
        
        & img{max-width: 100%;height: auto;/* padding: 9px 23px 9px 9px; */background: #fff;}
    }
    .topBarFxd{width: 100% !important;margin: 0;border-radius: 0;box-shadow: 0px 0px 30px #00000070;position: fixed !important;}
}