* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #020425;
    color: white;
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
}

.alert-danger {
    --bs-alert-color: #ffffffa8;
    --bs-alert-bg: var(--bs-danger-text-emphasis);
    --bs-alert-border-color: #e85867;
}

/* Navbar */
.navbarContainer{
    position: relative;
}
.navbar {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    background: rgba(255, 255, 255, 0.4) !important;
    padding: 10px;
    margin-top: 10px;
    border-radius: 15px;
    z-index: 999;
    transition: all 0.3s;
}
.navbar.open{
    background-color: #fff !important;
}

.navbar-brand {
    position: absolute;
    top: -1px;
    padding: 0;
    margin: 0;
}

.navbar-brand img{
    width: 59px;
    border: 1px solid #fff;
    border-radius: 50%;
}

.navbar-toggler{
    background: #79196c;
}

.nav-link {
    color: #fff !important;
    font-size: 13px;
    letter-spacing: .9px;
    font-weight: 600;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.navbar.open .nav-link{
    color: #000 !important;
}

.navbar-toggler{
    padding: 0;
    width: 45px;
    height: 32px;
}

.btn-get-started {
    background: #79196C !important;
    border: 2px solid #79196C !important;
    padding: 0.6rem 2rem;
    border-radius: 25px;
    color: white;
    font-weight: 600;
    font-size: 13px;
}

.btn-get-started.heroContactBtn{
    background-color: transparent !important;
    border: 2px solid #fff !important;
    margin-left: 15px;
}

.accountInfo{
    position: relative;
    margin-left: 8px;
}

.accountInfoInner{
    position: absolute;
    top: 50px;
    right: 0;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
    width: 260px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease-in-out;
}

.accountInfoInner.open{
    top: 45px;
    opacity: 1;
    visibility: visible;
}

.accountInfo .customShape{
    position: absolute;
    top: -5px;
    right: 20px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background-color: #fff;
}

.accountInfo .userDp{
    background: #79196c;
    display: block;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 35px;
    font-weight: 600;
    margin: 0 auto;
}

.accountInfo #accountInfoPopupBtn.userDp{
    border: none;
    outline: none;
    color: #fff;
    width: 45px;
    height: 32px;
    font-size: 25px;
    font-weight: 500;
    border-radius: 6px;
}

.accountInfo #accountInfoPopupBtn.userDp img{
    width: 12px;
    margin-left: 4px;
    transition: all .3s ease-in;
}

.accountInfo #accountInfoPopupBtn.userDp.open img{
    transform: rotate(180deg);
}

.accountInfoInner .userName{
    font-size: 20px;
    color: rgba(0 0 0 / 80%);
    font-weight: 600;
    display: block;
    margin-top: 8px;
}

.accountInfoInner .userEmail{
    display: block;
    color: rgba(0 0 0 / 60%);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
    margin-top: -2px;
}

.accountInfoInner a{
    display: block;
    border-radius: 8px;
}

/* Hero Section */
.hero-section {
    padding: 120px 0 80px;
    position: relative;
    background: linear-gradient(rgba(0 0 0 / 20%),rgba(0 0 0 / 20%)), url(images/banner.png) center center/cover no-repeat;
    z-index: 1;
}

.hero-section::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    z-index: -1;
}

.hero-content span{
    font-size: 22px;
    margin-bottom: 10px;
    display: flex;
}

.hero-content h1 {
    font-size: 50px;
    font-family: "Aclonica", sans-serif;
    text-transform: uppercase;
    text-shadow: -5px 1px 0px rgba(255 255 255 / 45%);
}

.hero-content h2{
    background: url(images/bannerShape.png) center center/cover no-repeat;
    padding: 10px;
    font-family: "Lato", sans-serif;
    margin-bottom: 20px;
}

.hero-content p {
    color: #ccc;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2rem;
}

.heroCharacter{
    width: 100%;
    height: 500px;
    /* background: radial-gradient(circle, #4a1f6f, transparent); */
    display: flex;
    align-items: center;
    justify-content: center;
}

.sharks-section{
    background: linear-gradient(rgba(2, 4, 37, .9),rgba(2, 4, 37, .9)), url(images/fridaySharkSaleBG.png) center center/cover no-repeat;
    padding: 80px 0;
}

.sharks-section .offer-box{
    position: relative;
    background-color: #fff;
    padding: 10px;
    height: 100%;
}
.sharks-section .offer-box .purchased-badge{
    position: absolute;
    top: 0;
    right: 0;
    background: #79196c;
    font-size: 14px;
    padding: 5px;
    z-index: 2;
}
.sharks-section .offer-box.purchased{
    cursor: not-allowed;
}
.sharks-section .offer-box.purchased::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255 255 255 / 50%);
    z-index: 1;
}
.sharks-section .offer-box .txtBox{
    padding-top: 15px;
    background: linear-gradient(rgba(121, 25, 108, .5),rgba(121, 25, 108, .5)), url(images/sharkBoxBg.png);
}
.sharks-section .offer-box .txtBox .cusTitle{
    font-size: 30px;
    text-transform: uppercase;
    font-family: "Aclonica", sans-serif;
    background: linear-gradient(80deg, #fff 0%, #2E3381 77%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(80deg, #fff 0%, #2E3381 77%);
    -webkit-background-clip: text;
    text-shadow: -3px -3px rgba(0 0 0 / 13%);
    text-align: center;
    margin-bottom: 5px;
}
.sharks-section .offer-box .txtBox .cutPrice{
    display: block;
    color: #000;
    font-weight: 900;
    text-align: center;
    font-size: 50px;
    line-height: 1;
    margin-bottom: 5px;
}
.sharks-section .offer-box .txtBox .cutPrice span{
    position: relative;
}
.sharks-section .offer-box .txtBox .cutPrice span::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%) rotate(-16deg);
    background-color: #fff;
    width: 100%;
    height: 2px;
}
.sharks-section .offer-box .txtBox .offerTxt{
    font-family: "Aclonica", sans-serif;
    font-size: 30px;
    text-transform: uppercase;
    display: block;
    text-align: center;
    text-shadow: -3px -1px #000;
}
.sharks-section .offer-box .txtBox .offerPrice{
    display: block;
    text-align: center;
    font-size: 60px;
    font-weight: 900;
    text-shadow: -8px 0 #000;
}
.sharks-section .offer-box .imgBox{
    position: relative;
}
.sharks-section .offer-box .imgBox img{
    height: 250px;
    width: 100%;
    object-fit: cover;
}
.sharks-section .offer-box .imgBox img.sharkImg-2{
    height: 286px;
}
.sharks-section .offer-box .imgBox button{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding-left: 26px;
    padding-right: 26px;
}
.sharks-section .offer-box.purchased .imgBox button{
    padding-left: 15px;
    padding-right: 15px;
    opacity: 1;
}

.sectionTitle{
    font-family: "Aclonica", sans-serif;
    text-align: center;
    text-transform: uppercase;
}
.sectionTitle span{
    color: #79196C;
}
.sharks-section .sectionTitle{
    background: url(images/sharkIcon.png) center right/70px no-repeat;
    padding-right: 90px;
    width: fit-content;
    margin: 0 auto 10px;
}
.sectionSubtitle{
    text-align: center;
    text-transform: capitalize;
    font-size: 12px;
    max-width: 500px;
    margin: 0 auto 16px;
}
.sectionSubtitle span{
    color: #F8B91A;
    text-transform: uppercase;
}

.digitalServicesSec{
    position: relative;
    padding: 80px 0;
    z-index: 1;
    overflow: hidden;
}

.digitalServicesSec::before,
.charactersSec::before,
.digitalServicesSec::after,
.charactersSec::after{
    content: "";
    position: absolute;
    width: 350px;
    height: 100%;
    z-index: -1;
}
.digitalServicesSec::before,
.charactersSec::before{
    left: 0;
    bottom: -95px;
    background: url(images/bgEllipsePurple.png) center center / cover no-repeat;
}
.digitalServicesSec::after,
.charactersSec::after{
    right: 0;
    top: -95px;
    background: url(images/bgEllipseBlue.png) center center / cover no-repeat;
}
.digiServiceBox{
    background-color: #040961;
    border: 1px solid #79196C;
    padding: 15px;
    height: 100%;
}
.digiServiceBox .imgBox img{
    height: 300px;
    width: 100%;
    object-fit: cover;
}
.digiServiceBox .txtBox h2{
    font-family: "Aclonica", sans-serif;
    font-size: 18px;
    margin-top: 20px;
}
.digiServiceBox .txtBox p{
    font-size: 12px;
}
.digiServiceBox .txtBox a{
    font-size: 12px;
    margin-top: 10px;
    color: #fff;
    text-decoration: none;
}

.aboutSec{
    padding: 80px 0;
    background: linear-gradient(rgba(2, 4, 37, .7),rgba(2, 4, 37, .7)), url(images/aboutSecBg.png) center center/cover no-repeat;
}
.aboutSec h2,
.aboutSec p{
    text-align: left !important;
    max-width: 100% !important;
}
.aboutSubHeading{
    background: #311043;
    border: 1px solid #fff;
    border-radius: 40px;
    padding: 2px 25px;
    display: inline-block;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.charactersSec{
    position: relative;
    padding: 80px 0;
    z-index: 1;
    overflow: hidden;
}
.characterBox{
    overflow: hidden;
}
.characterBox .imgBox{
    text-align: center;
    position: relative;
    z-index: 1;
}
.characterBox .imgBox::before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #030751;
    border-radius: 20px 20px 0 0;
    z-index: -1;
}
.characterBox .imgBox img{
    width: 140px;
    animation: bounce 2.4s infinite;
}
.characterBox .imgBox1 img{
    animation-delay: 0s;
}
.characterBox .imgBox2 img{
    width: 160px;
    animation-delay: 0.6s;
}
.characterBox .imgBox3 img{
    width: 110px;
    animation-delay: 1.2s;
}
.characterBox .imgBox4 img{
    width: 200px;
    animation-delay: 1.8s;
}
.characterBox .txtBox{
    position: relative;
    z-index: 1;
}
.characterBox .txtBox h2{
    background-color: #79196C;
    padding: 0 10px;
    text-align: center;
    margin-bottom: 0;
    border-radius: 0 0 20px 20px;
    font-family: "Aclonica", sans-serif;
    font-size: 16px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;

}

@keyframes bounce {
    0% { transform: translateY(0); }
    30% { transform: translateY(35px); }
    50% { transform: translateY(0); }
    65% { transform: translateY(15px); }
    80%, 100% { transform: translateY(0); }
}

.pricingSec{
    background: linear-gradient(rgba(2, 4, 37, .9),rgba(2, 4, 37, .9)), url(images/pricingBg.png) center center/cover no-repeat;
    padding: 80px 0;
}
.pricingBox{
    position: relative;
    border-radius: 20px;
    background: rgba(255 255 255 / 50%);
    padding: 20px;
    height: 350px;
}
.pricingBox.purple{
    background-color: rgba(121, 25, 107, .5);
}
.pricingBox h2{
    font-size: 20px;
    font-family: "Aclonica", sans-serif;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.pricingBox .priceSpan{
    font-size: 40px;
    border-bottom: 2px solid #fff;
    display: block;
    padding-left: 12px;
}
.pricingBox ul{
    padding: 0;
    margin: 20px 0;
}
.pricingBox ul li{
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 5px;
}
.pricingBox ul li .icon{
    background-color: #040961;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pricingBox ul li .icon i{
    font-size: 8px;
}
.pricingBox button{
    position: absolute;
    bottom: 20px;
}

.custReviewsSec{
    position: relative;
    padding: 80px 0;
}
.rewiewBox{
    position: relative;
    background: url(images/customerReviews-1.png) center center/contain no-repeat;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.rewiewBox.rewiewBox2{
    background: url(images/customerReviews-2.png) center center/contain no-repeat;
}
.rewiewBox.rewiewBox3{
    background: url(images/customerReviews-3.png) center center/contain no-repeat;
}
.rewiewBox .imgBox{
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}
.rewiewBox .imgBox img{
    width: 80px;
}
.rewiewBox h2{
    font-size: 16px;
    margin-top: 30px;
}
.rewiewBox .ratingBlock{
    display: flex;
    gap: 7px;
    align-items: center;
}
.rewiewBox .ratingBlock span{
    font-size: 13px;
}
.rewiewBox .ratingBlock ul{
    margin: 10px 0;
    padding: 0;
    display: flex;
    gap: 3px;
}
.rewiewBox .ratingBlock ul li{
    list-style: none;
    font-size: 13px;
}
.rewiewBox .ratingBlock ul li i{
    color: #F8B91A;
}
.rewiewBox .ratingBlock ul li:last-child i{
    color: #fff;
}
.rewiewBox p{
    font-size: 12px;
    padding: 0 20px;
    text-align: center;
    margin-top: 10px;
}

.blogBox{
    margin-bottom: 20px;
}
.blogBox .imgBox img{
    object-fit: cover;
    width: 100%;
    height: 300px;
}
.blogBox .contentWrap{
    background-color: #fff;
    border-bottom: 3px solid #79196C;
    padding: 0 20px 20px;
}
.blogBox .contentWrap ul{
    position: relative;
    margin: -20px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 12px 6px;
    background-color: #79196C;
}
.blogBox .contentWrap ul li{
    list-style: none;
    font-size: 13px;
}
.blogBox .contentWrap ul li span{
    margin-left: 5px;
}
.blogBox .contentWrap h2{
    font-size: 16px;
    font-family: "Aclonica", sans-serif;
    text-transform: uppercase;
    color: #000;
    margin: 20px 0 30px;
}
.blogBox .contentWrap .btnBlock{
    position: relative;
    border-top: 1px solid #79196c;
    padding-top: 20px;
    text-align: center;
}
.blogBox .contentWrap .btnBlock::before,
.blogBox .contentWrap .btnBlock::after{
    content: "";
    position: absolute;
    top: -3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #79196C;
}
.blogBox .contentWrap .btnBlock::before{
    left: 0;
}
.blogBox .contentWrap .btnBlock::after{
    right: 0;
}

/* Contact */
.contact-section {
    padding: 80px 0;
}
.contactFormWrap{
    background-color: #030757;
    border-radius: 20px;
    padding: 50px;
}
.contact-section .contact-form label{
    font-size: 13px;
    margin-bottom: 5px;
}
.contact-form input,
.contact-form textarea {
    background: #fff;
    border: none;
    color: white;
    padding: 10px;
    font-size: 14px;
    border-radius: 8px;
    margin-bottom: 1rem;
    width: 100%;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.contact-info {
    background: rgba(255 255 255 / 50%);
    padding: 2rem;
    border-radius: 15px;
}
.contact-info h2{
    font-size: 20px;
}

.info-banner {
    width: 100%;
    height: 200px;
    border-radius: 15px;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contactFormWrap p{
    max-width: 100%;
}
.contact-info .contactDetailsWrap{
    margin: 0;
    padding: 0;
}
.contact-info .contactDetailsWrap li{
    list-style: none;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.contact-info .contactDetailsWrap li .right{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 32%;
}
.contact-info .contactDetailsWrap li .left a{
    color: #fff;
    text-decoration: none;
}
.contact-info .contactDetailsWrap li .icon{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #79196C;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.contact-info .contactDetailsWrap li .icon i{
    font-size: 14px;
}
.socialWrap{
    display: flex;
    align-items: center;
}
.socialWrap span{
    width: 32%;
}
.socialWrap ul{
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.socialWrap ul li{
    list-style: none;
    width: 30px;
    height: 30px;
}
.socialWrap ul li a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: #fff;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}
.socialWrap ul li a i{
    font-size: 16px;
    color: #79196C;
}


.aboutBanner{
    padding: 180px 0 90px;
}

.aboutBanner h1{
    font-family: "Aclonica", sans-serif;
    text-transform: uppercase;
    font-size: 45px;
}


.sharksBanner{
    padding: 100px 0 0;
    background: linear-gradient(rgba(0 0 0 / 75%),rgba(0 0 0 / 75%)), url(images/sharksPageBanner.png) center center/cover no-repeat;
}

.sharksBanner.hero-section::after{
    content: none;
}

.sharksBanner img{
    width: 260px;
    display: block;
    margin-left: auto;
}

.sharks-page .sectionSubtitle{
    max-width: 100%;
    font-size: 11px;
}

.sharks-page ul{
    margin: 0;
    padding: 0;
}

.sharks-page ul li{
    font-size: 12px;
    margin-bottom: 10px;
    list-style: none;
}

.sharks-page ul li img{
    width: 12px;
    margin-right: 5px;
}

/* Footer */
footer {
    background: linear-gradient(rgb(121 25 108 / 80%), rgb(121 25 108 / 80%)), url(images/banner.png);
    padding: 70px 0 0;
}
footer .sectionSubtitle{
    max-width: 100%;
}
footer .sectionTitle{
    font-size: 20px;
    text-align: start;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer ul li {
    margin-bottom: 8px;
}
footer ul li .fa-chevron-right{
    font-size: 10px;
}

footer a {
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}

footer a:hover {
    color: #fff;
}

.footer-bottom {
    margin-top: 50px;
    text-align: center;
    color: #fff;
    background-color: #020425;
    padding: 5px 10px;
}
.footer-bottom p{
    margin: 0;
    font-size: 13px;
}
.newsLetterWrap{
    border-bottom: 1px solid rgba(255 255 255 / 30%);
    padding-bottom: 45px;
    margin-bottom: 45px;
}
.newsLetterWrap p{
    margin-bottom: 0;
}
.newsLetterField form{
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 50px;
    padding: 8px 8px 8px 15px;
    gap: 10px;
}
.newsLetterField form .icon i{
    display: block;
    color: rgba(0 0 0 / 60%);
    font-size: 20px;
    margin-right: 10px;
}
.newsLetterField form input{
    flex: 1 0 0;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 13px;
}
.newsLetterField form button{
    padding: 6px 22px;
}
.footerMoreContactInfoWrap li{
    display: flex;
    align-items: center;
    gap: 10px;
}
.footerMoreContactInfoWrap li span{
    display: block;
}
.footerMoreContactInfoWrap li .txt{
    display: flex;
    align-items: center;
    gap: 5px;
}

@media screen and (max-width: 992px) {
    .navbar-brand img{
        width: 55px;
    }
}

@media screen and (max-width: 768px) {
    .hero-section{
        padding: 80px 0;
    }
    .sharksBanner{
        padding: 100px 0 0;
    }
    .hero-content span{
        font-size: 18px;
    }
    .hero-content h1{
        font-size: 25px;
        text-shadow: -2px 0px 0px rgba(255 255 255 / 45%);
    }
    .hero-content h2{
        font-size: 15px;
    }
    .heroCharacter{
        display: none;
    }
    .sharks-section .sectionTitle{
        padding-right: 55px;
    }
    .sectionTitle{
        font-size: 20px;
    }
    .cusBoxesMargin{
        margin-bottom: 20px;
    }
    .contact-info{
        padding: 2rem 15px;
    }
    .contactFormWrap{
        padding: 50px 15px;
    }
    .contact-info .contactDetailsWrap li{
        flex-direction: column;
        align-items: flex-start;
    }
    .contact-info .contactDetailsWrap li .right{
        width: auto;
        margin-bottom: 10px;
    }
    .newsLetterField form button {
        padding: 6px 8px;
    }
    footer{
        padding: 45px 0 0;
    }
    .newsLetterField form .icon{
        display: none;
    }
    .footer-bottom{
        margin-top: 20px;
        padding: 8px 10px;
    }
}