/* ******************************************** Font Family Start ****************************************** */
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Black.eot');
    src: url('../fonts/DMSans-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DMSans-Black.woff2') format('woff2'),
        url('../fonts/DMSans-Black.woff') format('woff'),
        url('../fonts/DMSans-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Bold.eot');
    src: url('../fonts/DMSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DMSans-Bold.woff2') format('woff2'),
        url('../fonts/DMSans-Bold.woff') format('woff'),
        url('../fonts/DMSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-ExtraBold.eot');
    src: url('../fonts/DMSans-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DMSans-ExtraBold.woff2') format('woff2'),
        url('../fonts/DMSans-ExtraBold.woff') format('woff'),
        url('../fonts/DMSans-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-ExtraLight.eot');
    src: url('../fonts/DMSans-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DMSans-ExtraLight.woff2') format('woff2'),
        url('../fonts/DMSans-ExtraLight.woff') format('woff'),
        url('../fonts/DMSans-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Light.eot');
    src: url('../fonts/DMSans-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DMSans-Light.woff2') format('woff2'),
        url('../fonts/DMSans-Light.woff') format('woff'),
        url('../fonts/DMSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Medium.eot');
    src: url('../fonts/DMSans-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DMSans-Medium.woff2') format('woff2'),
        url('../fonts/DMSans-Medium.woff') format('woff'),
        url('../fonts/DMSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Regular.eot');
    src: url('../fonts/DMSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DMSans-Regular.woff2') format('woff2'),
        url('../fonts/DMSans-Regular.woff') format('woff'),
        url('../fonts/DMSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-SemiBold.eot');
    src: url('../fonts/DMSans-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DMSans-SemiBold.woff2') format('woff2'),
        url('../fonts/DMSans-SemiBold.woff') format('woff'),
        url('../fonts/DMSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/DMSans-Thin.eot');
    src: url('../fonts/DMSans-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DMSans-Thin.woff2') format('woff2'),
        url('../fonts/DMSans-Thin.woff') format('woff'),
        url('../fonts/DMSans-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jersey 25';
    src: url('../fonts/Jersey25-Regular.eot');
    src: url('../fonts/Jersey25-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Jersey25-Regular.woff2') format('woff2'),
        url('../fonts/Jersey25-Regular.woff') format('woff'),
        url('../fonts/Jersey25-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ******************************************** Font Family End ****************************************** */
/* ******************************************** Custom Style Start ****************************************** */

:root {
    --body-color: #010314;
    --primary-color: #9713E8;
    --primary-bg-color: #0B0E37;
    --secondary-bg-color: #9713E8;
    --text-grey: #B2B3B8;
    --text-white: #fff;
    --font-para: "DM Sans", sans-serif;
    --heading-font: "Jersey 25";
    --primay-btn-bgcolor: linear-gradient(90deg, #5735D9 0%, #2E1C73 100%);
    --primary-btn-color: #fff;
    --primary-btn-bordercolor: #fff;
    --border-color: #1C2162;


    --bg-secondary--dark:#0B0E37;
    --btn-primary-bgcolor : linear-gradient(90deg, #5735D9 0%, #2E1C73 100%);
    --btn-primary-border: #fff;
    --btn-primary-bgcolor-hover:linear-gradient(90deg, #2E1C73 0%, #5735D9 100%);
    --btn-primary-color-hover: #fff;

}

html {
    margin: 0;
}

body {
    font-family: var(--font-para);
    overflow-x: hidden;
    background-color: var(--body-color) !important;
}

a,
button {
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    white-space: normal;
    word-break: break-word;
    color: var(--heading-color);
    font-family: var(--heading-font);
    font-weight: 700;
    line-height: 1.1;
}

h1 {
    font-size: 60px;
}

h2 {
    font-size: 68px;
}

h3,
.h3 {
    font-size: 38px;
}

h4,
.h4 {
    font-size: 25px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

a,
p,
button,
span {
    white-space: normal;
    word-break: break-word;
}

a {
    text-decoration: none;
    display: inline-block;
}

a:hover {
    text-decoration: none;
}

a:focus-visible {
    outline: transparent;
}

.page-link:focus {
    box-shadow: none;
}

.file>input[type='file'] {
    display: none;
}

p {
    font-size: 16px;
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

button {
    transition: all 0.5s;
}

button:focus {
    box-shadow: none !important;
    outline: transparent;
}

.form-control:focus,
input {
    outline: 0;
    box-shadow: none !important;
}

.formfield {
    position: relative;
    width: 100%;
}

.form-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.form-group label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid green;
    accent-color: green;
}

.form-group {
    margin-bottom: 15px;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    border: 1px solid;
    transition: all 0.3s;
    font-size: 22px;
    line-height: 30px;
    border-radius: 5px;
    padding: 18px 34px;
    text-align: center;
    font-style: normal;
    font-weight: 600;
    border-radius: 5px;
}

.primary-btn {
    background: var(--primay-btn-bgcolor);
    color: var(--primary-btn-color);
    border-color: var(--primary-btn-bordercolor);
}

.primary-btn:hover {
    background: linear-gradient(90deg, #2E1C73 0%, #5735D9 100%);
    color: var(--text-white);
    border-color: #fff;
}

.small-btn {
    font-size: 15px;
    /* min-width: 112px; */
    /* min-height: 45px; */
    padding: 11px 13px !important;
    font-size: 18px;
    line-height: 23px;
}

.secondary-btn {
    border: 1px solid #9AACFF;
    background: #E8ECFF;
    color: #324DC7;
    font-size: 18px;
}

.dark-btn {
    background: #263238;
    color: #FACD60;
}

.btn-center {
    justify-content: center;
}

.full-btn {
    width: 100%;
    min-width: auto;
}

.form-control::placeholder {
    color: var(--text-white);
}

.form-control {
    padding: 16px 23px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #FFF;
    background: #fff;
}

.form-group:has(.form-icon) .form-control {
    padding-right: 48px;
}

img {
    max-width: 100%;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background: #CECECE;
}

::-webkit-scrollbar-track {
    background: #F7F7F7;
    border-radius: 100px;
}

.container {
    max-width: 1600px;
    padding: 0 40px;
}

.game-btn {
    padding: 7px 24px;
    font-size: 20px;
    color: #e8e8f0;
    border-radius: 30px;
    border: 1px solid transparent;
    background: linear-gradient(#0b0f2a, #0b0f2a) padding-box,
        linear-gradient(90deg, #7a2cff, #b026ff, #ffffff) border-box;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    line-height: 32px;
    text-transform: capitalize;
}

.heading-title {
    text-align: center;
    margin-bottom: 30px;
}

.heading-title h2 {
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 68px;
    line-height: 76px;
    line-height: 100%;
    letter-spacing: -3%;
    text-align: center;
    color: var(--text-white);
    margin-bottom: 15px;
    margin-top: 5px;
}

.heading-title p {
    font-family: var(--font-para);
    font-weight: 400;
    font-size: 26px;
    line-height: 34px;
    letter-spacing: -3%;
    text-align: center;
    color: var(--text-grey);
}

ul.end-list a.button.primary-btn.small-btn:hover {
    color: var(--text-white);
}


/* ******************************************** Custom Style End ****************************************** */
header {
    padding: 20px 0;
    position: fixed;
    top: 0;
    z-index: 99999;
    width: 100%;
    background: #010314;
}

.main-header-sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.header-right-sec {
    display: flex;
    margin-bottom: 0;
    align-items: center;
}

.header-right-sec {
    padding-left: 0;
    list-style: none;
}

.header-right-sec a,
ul.end-list a {
    color: var(--text-white);
    font-size: 14px;
    padding: 22px;
    font-weight: 700;
    display: flex;
    gap: 10px;
    align-items: center;
}

ul.sub-menu {
    list-style: none;
    position: absolute;
    padding: 20px 0;
    z-index: 9999;
    width: 200px;
    background: #fff;
    visibility: hidden;
    opacity: 0;
    border-top: 3px solid #2ea3f2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    text-align: left;
    top: 100px;
}

.main-header-sec li:hover ul.sub-menu {
    transform-origin: 0 0;
    animation: submenu .4s ease-in-out;
    visibility: visible;
    opacity: 1;
}

@keyframes submenu {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

ul.end-list {
    display: flex;
    align-items: center;
}

.header-right-sec li a:hover,
ul.end-list a:hover {
    color: var(--primary-color);
}

.main-header-left-bx {
    display: flex;
    align-items: center;
}

.header-right-sec li a,
ul.end-list a {
    font-weight: 700;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: -3%;
    color: var(--text-white);
}

/* ************************************************************************ Banner section Start ************************************************************************ */
.banner-sec {
    background-image: url(../images/home-banner.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* padding: 257px 0; */
    padding: 177px 0;
}

.banner-bx {
    position: relative;
}

/* .banner-bx::after {
    content: "";
    background-image: url("../images/banner-lines.png");
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
} */
.banner-left-bx {
    text-align: center;
}

.banner-left-bx .button-bx {
    margin-top: 30px;
}

.banner-left-bx h1 {
    font-family: var(--heading-font);
    font-weight: 400;
    font-size: 120px;
    line-height: 128px;
    letter-spacing: -3%;
    text-align: center;
    color: var(--text-white);
}

.banner-left-bx span {
    font-family: var(--font-para);
    font-weight: 700;
    font-size: 73px;
    line-height: 79px;
    letter-spacing: -1%;
    color: hsla(277, 85%, 49%, 1);
}

.banner-left-bx span sub {
    font-family: var(--font-para);
    font-weight: 200;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -1%;

}

.banner-left-bx p {
    font-family: var(--font-para);
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    letter-spacing: -3%;
    text-align: center;
    color: #C4B5FF;
    margin-top: 30px;
}

/* ************************************************************************ Banner section End ************************************************************************ */

/* ************************************************************************ Our Game Partner section Start ************************************************************************ */
.our-game-partner-sec {
    /* background-image: url(../images/bgc-linear.png); */
    /* background-size: cover;
    background-position: center; */
    /* background-repeat: no-repeat; */
    margin-top: -100px;
    position: relative;
    padding: 0;
    z-index: 1;
}

/* .our-game-partner-sec::after {
    content: "";
    background-image: url(../images/bgc-linear.png);
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    bottom: 0;
    width: 100%;
    height: 343px;
    z-index: -1;
} */


.game-partner-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1160px;
    width: 100%;
    margin: 0 auto;
}

.game-partner-box img {
    filter: grayscale(100%);
    opacity: 0.6;
}

.game-partner-box img:hover {
    filter: unset;
    opacity: 1;
}

/* ************************************************************************ Our Game Partner section End ************************************************************************ */
/* ************************************************************************ Control-panel section Start ************************************************************************ */
.control-panel-crd {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    margin-top: 30px;
}

.control-panel-crd .card {
    background: #0B0E37;
    border-radius: 30px;
    border: 1px solid var(--border-color);
}

.control-panel-crd .card .card-body {
    padding-top: 40px;
}

.control-panel-crd .card .card-body h4 {
    font-weight: 700;
    font-style: Bold;
    font-size: 35px;
    line-height: 43px;
    letter-spacing: 0%;
    color: var(--text-white);
    font-family: var(--font-para);
}

.control-panel-crd .card .card-body p {
    color: #ffffffb3;
    font-family: var(--font-para);
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 0%;
    margin-top: 11px;
    margin-bottom: 30px;
    max-width: 618px;
    width: 100%;
}

.gamer-card-btn {
    display: flex;
    gap: 20px;
    align-items: center;
}

.control-panel-crd .card .card-body .price {
    text-align: left;
}

.control-panel-crd .card .card-body .amount {
    display: block;
    font-weight: 700;
    font-size: 34px;
    line-height: 42px;
    letter-spacing: -1%;
    color: var(--primary-color);
}

.control-panel-crd .card .card-body .period {
    font-family: var(--font-para);
    font-weight: 400;
    font-size: 25px;
    line-height: 33px;
    letter-spacing: -1%;
    color: var(--text-white);
}

/* ************************************************************************ Control-panel section End ************************************************************************ */
/* ************************************************************************ section End ************************************************************************ */
/* ************************************************************************ Why-choose-us section Start ************************************************************************ */
.why-choose-left-bx {
    text-align: left !important;
}

.why-choose-left-bx .heading-title,
.why-choose-left-bx .heading-title h2,
.why-choose-left-bx .heading-title p {
    text-align: left;
}

.why-choose-left-bx .heading-title h2 {
    max-width: 770px;
    width: 100%;
}

.why-choose-content {
    padding-top: 30px;
}

.small-inner-box {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    max-width: 442px;
    width: 100%;
    align-items: flex-start;
}

.small-inner-box h4 {
    font-family: var(--font-para);
    font-weight: 700;
    font-size: 25px;
    line-height: 33px;
    letter-spacing: 0%;
    color: var(--text-white);
}

.small-right-box p {
    font-family: var(--font-para);
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    margin-top: 16px;
    color: var(--text-grey);
}

.why-choose-content {
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
}

/* ************************************************************************ Why-choose-us section End ************************************************************************ */
/* ************************************************************************ Hero-banner section Start ************************************************************************ */
.hero-banner-sec {
    background-image: url(../images/hero-banner.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* padding: 177px 0; */
}

ul.end-list a.button {
    /* border: 1px solid #fff; */
    padding: 8px 30px;
    line-height: 23px !important;
}

/* ul.end-list a.button:hover {
    background: #fff;
    color: var(--primary-color);
} */

.gamer-card-img {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 100%;
}

.gamer-card-content .gamer-card-btn a img,
.newsletter-form button img,
ul.end-list a.button img {
    transition: 0.5s ease;
}

.gamer-card-content .gamer-card-btn a:hover img,
.newsletter-form button:hover img,
ul.end-list a.button.primary-btn.small-btn:hover img {
    transform: translateX(10px);
}

.gamer-card-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gamer-card-content {
    position: absolute;
    bottom: 0;
    padding: 25px;
}

.gamer-card-box {
    position: relative;
    border: 2px solid rgba(21, 26, 80, 1);
    overflow: hidden;
    border-radius: 15px;
}

.gamer-card-content .gamer-card-btn {
    flex-direction: row-reverse;
    justify-content: space-between;
    border-top: 1px solid rgb(255 255 255 / 20%);
    padding-top: 18px;
}

.gamer-card-content .gamer-card-btn a {
    padding: 12px 13px;
    font-size: 18px;
    line-height: 23px;
}

.gamer-card-content h3 {
    color: var(--text-white);
    font-family: var(--font-para);
    font-weight: 700;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: -3%;
    margin-bottom: 10px;
}

.gamer-card-content p {
    color: var(--text-grey);
    padding-bottom: 10px;
    font-family: var(--font-para);
    font-weight: 400;
    font-size: 17px;
    line-height: 23px;
    letter-spacing: -3%;

}

.gamer-card-content span.amount {
    font-family: DM Sans;
    font-weight: 700;
    font-size: 43px;
    line-height: 51px;
    letter-spacing: -3%;
    color: rgba(255, 255, 255, 1);
}

.gamer-card-content span.period {
    font-family: var(--font-para);
    font-weight: 400;
    font-size: 18px;
    line-height: 23px;
    letter-spacing: -3%;
    color: rgba(255, 255, 255, 1);
    margin-left: 10px;
}


.gamer-card-content .rating-container {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding-bottom: 10px;
}

.gamer-card-content .stars {
    color: #FFD700;
    font-size: 20px;
}

.gamer-card-content .rating-text {
    color: var(--text-white);
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -3%;
}

.gamer-card-content .rating-text span {
    font-size: 16px;
    opacity: 0.8;
}

.gamer-card-content .hero-banner-cards .col-md-4 {
    margin-bottom: 20px;
    margin-top: 20px;
}

.hero-banner-cards {
    padding-top: 40px;
}

.hero-banner-cards .col-md-4 {
    padding-bottom: 20px;
}

.view-all {
    text-align: center;
}

.view-all a {
    display: inline-block;
    margin: 0 auto;
    color: rgba(255, 255, 255, 1);
    background: transparent;
    border: unset;
    font-family: DM Sans;
    font-weight: 700;
    font-style: Bold;
    font-size: 22px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -3%;
    text-align: center;
}

.view-all a:hover {
    background: transparent;
}

.view-all a:hover img {
    transform: translateX(10px);
}

.view-all a img {
    transition: 0.5s ease;
}

/* ************************************************************************ Hero-banner section End ************************************************************************ */



/* pooja css start */
.v-spacing {
    padding-top: 80px;
    padding-bottom: 80px;
}

footer {
    background: var(--primary-bg-color);
    padding: 60px 0px;
}

.newsletter-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ffffff0f;
    padding-bottom: 35px;
    margin-bottom: 35px;
}

.newsletter-section h3 {
    font-size: 50px;
    color: var(--text-white);
    letter-spacing: 0.5px;
    font-weight: 500;
    max-width: 540px;
    font-family: 'Jersey 25';
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding: 30px 0px;
}

.footer-right {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 50px;
}

ul.footer-icons {
    display: flex;
    gap: 10px;
}

.footer-column :is(a, span, h4) {
    color: var(--text-white);
}

.footer-column h4 {
    font-size: 18px;
    --heading-font: var(--font-para);
    font-weight: 400;
}

.footer-column a {
    text-decoration: none;
    font-size: 16px;
}

ul.footer-links li {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
}

ul.footer-links {
    margin-top: 20px;
}

ul.footer-links li img {
    margin-right: 8px;
}

.footer-left p {
    font-size: 18px;
    color: var(--text-grey);
    max-width: 400px;
    margin: 20px 0px;
}

.newsletter-form button {
    padding: 14px 24px;
    font-size: 18px;
    border-radius: 10px;
    /* border: transparent;
    background: var(--secondary-bg-color);
    color: var(--text-white); */
}

.newsletter-form input {
    border: 1px solid #454867;
    background: transparent;
    min-height: 55px;
    border-radius: 10px;
    padding: 10px;
    width: 450px;
    color: var(--text-grey);
    margin-right: 10px;
    padding-left: 45px;
}

.copyright-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #ffffff0f;
}

ul.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.copyright-section p,
ul.footer-bottom-links a {
    color: var(--text-white);
    font-size: 16px;
}

/* .accordion .card-header h2 button::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078";
    float: right;
    -webkit-transition: all 0.25s linear;
    transition: all 0.25s linear;
} */
.accordion .card-header h2 button::after {
    font-family: "Font Awesome 6 pro";
    font-weight: 900;
    content: "\f078";
    float: right;
    -webkit-transition: all 0.25s linear;
    background: linear-gradient(90deg, #5735D9 0%, #2E1C73 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.accordion .card-header h2 button[aria-expanded="true"]::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.faq .accordion button {
    font-size: 20px;
    color: var(--text-white);
    font-family: 'DM Sans';
}

.faq .accordion .card {
    background: var(--primary-bg-color);
    border: 1px solid #fff;
    border-radius: 10px !important;
    margin-bottom: 20px;
    border-bottom: 1px solid #fff !important;
}

.faq .accordion>.card>.card-header {
    padding: 20px !important;
}
.faq.faq-gmaing .card-header .collapsed:before{
    content: "";
}
.faq.faq-gmaing .card-header {
    background: #0b0e35;
}

.faq .card-body {
    color: var(--text-white);
    font-size: 16px;
    border-top: 1px solid #ffffff1a;
    line-height: 25px;
}

.faq {
    padding: 80px 0px;
    background-image: url(../images/faq-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

.faq:before {
    content: "";
    background: url(../images/faq-after.png);
    width: 100%;
    height: 28px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    z-index: -1;
}

.feature-box-main .feature-box {
    position: relative;
    padding: 30px 40px;
    width: 650px;
    color: white;
    background: #050b3d;
    clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 60px, 100% 100%, 0 100%);
}

.feature-box-main .card-border {
    width: 760px;
    padding: 2px;
    background: linear-gradient(272deg, #8990EB, #4249AA, #010314);
    clip-path: polygon(0 0, 90% 0, 100% 40%, 100% 100%, 0 100%);
    margin-bottom: 22px;
}

.feature-box-main .card {
    background: var(--body-color);
    padding: 30px;
    color: var(--text-white);
    clip-path: polygon(0 0, 90% 0, 100% 40%, 100% 100%, 0 100%);
    font-size: 25px;
    flex-direction: unset;
}

.feature-box-main p {
    font-size: 22px;
    color: var(--text-grey);
}

.feature-box-main h4 {
    font-size: 30px;
    font-family: 'DM Sans';
}

/* .ddos-protection-right img {
    position: absolute;
    right: 0;
    top: 60%;
    width: 100%;
    max-width: 590px;
    transform: translatey(-50%);
} */
.ddos-protection-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ddos-card-img {
    margin-right: 15px;
}

.ddos-card-img img {
    width: 100%;
    max-width: 50px;
}

.ddos-protection {
    background: url("../images/ddos-bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding: 120px 0;
}

/* map css start*/
.location-map-img img {
    width: 100%;
}

.cstm-map-section {
    padding-bottom: 0;
    text-align: center;
}

.cstm-map-wrapper {
    position: relative;
}

.cstm-loaction-counter {
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-shadow: 0 15px 70px rgba(0, 0, 0, .1);
    border-radius: 100%;
    overflow: hidden;
    position: absolute;
    z-index: 5;
    margin: 0;
    left: auto;
    right: 35px;
    top: -12px;
}

.map-location-dot:after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -5px 0 0 -5px;
    border-radius: 100%;
    transition: all .3s cubic-bezier(.51, .23, .37, .89);
    color: var(--primary-color);
    font-size: 28px;
    animation: flipY 2s infinite;
    content: "\f3c5";
    font-family: "Font Awesome 6 pro";
    font-weight: 900;
}

@keyframes flipY {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.location-content-img {
    margin-bottom: 8px;
    width: 40px;
}

.cstm-map-wrapper {
    position: relative;
    max-width: 1110px;
    margin: 0 auto;
}

.map-location-content {
    width: 230px;
    background: var(--body-color);
    padding: 16px;
    box-shadow: 0 4px 32px 0 rgba(10, 14, 29, .02), 0 8px 64px 0 rgba(10, 14, 29, .08);
    border-radius: 50px;
    position: absolute;
    left: 50%;
    margin-left: -107px;
    bottom: 38px;
    display: none;
    align-items: center;
    cursor: pointer;
    border: 1px solid #fff;
}

.location-content-img img {
    width: 20px;
}

.location-map-content h6 {
    color: var(--text-white);
    font-family: 'DM Sans';
    font-size: 22px;
}

.map-location-content::before {
    z-index: -1;
    content: "";
    width: 0;
    height: 0;
    border-color: #fff transparent transparent;
    border-style: solid;
    border-width: 8px 8px 0;
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
}

.map-location-dot-box {
    position: absolute;
    display: flex;
    top: 149px;
    left: 730px;
}

.map-location-dot-box.map-hover {
    z-index: 999;
}

.map-hover .map-location-content {
    display: flex;
}

.map-hover .map-location-dot:after {
    transform: scale(2);
}

.cstm-loaction-counter p {
    display: block;
    width: 100%;
    line-height: 20px;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 4px;
}

.cstm-loaction-counter span {
    color: #6e6d7a;
}

.map-location-btn-box {
    margin-top: -56px;
    display: flex;
    justify-content: center;
}

.map-location-btn-box {
    margin-top: -44px;
    display: flex;
    justify-content: center;
}

/* map css end */
.testimoniaal-inner-sec {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.testimonial-card {
    padding: 40px;
    background: var(--primary-bg-color);
    border-radius: 10px;
    opacity: 0.5;
}

.testimonial-title {
    font-size: 35px;
    color: var(--text-white);
    font-family: 'DM Sans';
    font-style: italic;
    margin-bottom: 20px;
}

.testimonial-text {
    font-size: 18px;
    color: var(--text-grey);
    margin-bottom: 40px;
}

.testimonial-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-info {
    display: flex;
    align-items: flex-start;
}

.user-info img {
    border-radius: 50px;
    margin-right: 15px;
}

.testimonial-card h4 {
    font-size: 30px;
    color: var(--text-white);
    margin-bottom: 8px;
}

.testimonial-card span {
    font-size: 16px;
    color: var(--text-white);
}

.stars {
    font-size: 20px;
    color: var(--text-white);
}

.quote-icon {
    font-size: 60px;
    color: var(--primary-color);
}

.testimonial-card.active {
    opacity: 1;
}

.newsletter-form {
    display: flex;
}

.newsletter-group {
    position: relative;
}

.newsletter-group i {
    position: absolute;
    left: 17px;
    top: 18px;
    color: var(--text-grey);
    font-size: 20px;
    font-family: 'Font Awesome 6 pro';
}

.incredible-feature-box-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.incredible-feature-sec {
    background-image: url(../images/newone.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 90px 0;
}

.ddos-protection-left .heading-title,
.ddos-protection-left .heading-title h2,
.ddos-protection-left .heading-title p {
    text-align: left;
}

.ddos-protection-left {
    padding-left: 200px;
}

.ddos-protection-sec {
    padding: 120px 0;
    background-color: #0B0E37;
}

.incredible-feature-box-content .box h4 {
    color: #fff;
    font-weight: 500;
    font-family: var(--font-para);
    font-size: 20px;
    line-height: 38px;
}

.incredible-feature-box-content .box p {
    color: var(--text-grey);
}