@charset "utf-8";
/* CSS Document */

/******* Fonts Face CSS Start **********/
@font-face {
    font-family: 'CircularStd Black';
    src: url('../fonts/CircularStd-Black.woff2') format('woff2'),
        url('../fonts/CircularStd-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Circular Std Medium';
    src: url('../fonts/CircularStd-Medium.woff2') format('woff2'),
        url('../fonts/CircularStd-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CircularStd Bold';
    src: url('../fonts/CircularStd-Bold.woff2') format('woff2'),
        url('../fonts/CircularStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CircularStd Book';
    src: url('../fonts/CircularStd-Book.woff2') format('woff2'),
        url('../fonts/CircularStd-Book.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/********* Fonts Face CSS End **********/

:root {
    --primary-color: #6A25F4;
    --secondary-color: #1B1A1E;
    --dark-color: #1B1A1E;
    --secondary-rgb: 27, 26, 30;
    --info-dark: #F4C725;
    --info-color: #FFF8DB;
    --info-rgb: 255, 248, 219;
    --light-color: #FFF;
    --mute-color: #A6A2AF;
    --mute-rgb: 195, 192, 201;
}
/******* Common Element CSS Start ******/
* 						{ margin: 0px; padding: 0px;}
body 					{ font-family: 'CircularStd Book'; font-size: 18px; line-height: 28px; }
.clear 					{ clear:both;}
img 					{ border: 0px;}
ul,ol 					{ list-style: none;}
a 						{ text-decoration: none; outline: none; color: inherit; }
a:focus, a:active, a:visited, a:HOVER	{ text-decoration: none; outline: none; transition: all 0.24s ease-in-out; -webkit-transition: all 0.24s ease-in-out;}
a:HOVER					{ color: var(--primary-color); }
h1 						{ margin: 0px 0px 32px; font-size: 80px; line-height: 96px; font-family: 'CircularStd Black'; color: var(--secondary-color); }
h2 						{ margin: 0px 0px 24px; font-size: 56px; line-height: 68px; font-family: 'Circular Std Medium'; color: var(--secondary-color); }
h3 						{ margin: 0px 0px 24px; font-size: 30px; line-height: 44px; font-family: 'Circular Std Medium'; color: var(--secondary-color); }
h4 						{ margin: 0px 0px 16px; font-size: 24px; line-height: 30px; font-family: 'Circular Std Medium'; color: var(--secondary-color); }
h5 						{ margin: 0px 0px 12px; font-size: 20px; line-height: 28px; }
/* h6 						{ } */
p 						{ color: var(--mute-color); }
button 					{ transition: all 0.24s ease-in-out; -webkit-transition: all 0.24s ease-in-out; }
img                     { max-width: 100%; height: auto; }
.l-space                { margin-bottom: 60px; }
.muted-text             { color: var(--mute-color);}
/******* Common Element CSS End *********/

/* -------- Title Style ------- */
/* -------- Button Style ------- */
.theme-btn { padding: 12px 24px; min-width: 130px; display: inline-block; font-size: 16px; line-height: 24px; background: var(--primary-color); color: var(--light-color); font-family: 'CircularStd Bold'; border: 2px solid transparent; border-radius: 16px; }
.theme-btn:hover,
.theme-btn:focus { background: var(--secondary-color); color: var(--light-color);}
.theme-btn.outline-btn { background: transparent; color: var(--primary-color); border-color: var(--primary-color);}
.theme-btn.outline-btn:hover,
.theme-btn.outline-btn:focus { background: var(--primary-color);}
.theme-btn.dark-btn { background: var(--secondary-color); }
.theme-btn.dark-btn:hover,
.theme-btn.dark-btn:focus { background: var(--primary-color); }
.theme-btn.outline-dark { background: transparent; color: var(--secondary-color); border-color: var(--secondary-color);} 

/******* Header Section CSS Start *******/
header { z-index: 11; background: var(--light-color); }
.navbar { padding: 16px 0;}
.navbar .navbar-nav .nav-link { margin: 0px 24px; padding: 0; }
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus { color: var(--secondary-color);}

/******* Header Section CSS End *********/

/******* Banner Section CSS Start *******/
.banner-section { background: url(../images/banner-bg.svg) no-repeat center center; }
.banner-section .container { min-height: calc(100vh - 138px);}
.banner-section .game-bg { height: 30%; background: var(--info-dark) url(../images/banner-game-bg.jpg) no-repeat center center / cover; }
.banner-section .mockup { z-index: 2; max-width: 90%; max-height: 60vh; width: auto; }
.pattern-scroll { padding: 12px 0; background: var(--secondary-color); }
.pattern-scroll p { color: var(--light-color); }
.pattern-scroll p::after { margin: 0px 16px; content: ""; width: 14px; height: 14px; background: var(--light-color); border-radius: 50%; }
.pattern-scroll p:last-child:after { display: none; }
.pattern-scroll .inner { animation: bouncing-text 10s linear infinite alternate; }

.tickets            { display: grid; grid-template-columns: repeat(12,minmax(0,1fr));  flex-wrap: wrap; gap: 24px;justify-content: center; }
.tickets > *        { grid-column: span 4/span 4 }
.tickets table td   { padding: 4px 12px; width: 24px; font-size: 14px; border: 1px solid var(--info-dark); font-weight: 600;}
#theme { display: block; height: 64px; width: 64px; border-radius: 16px; border: none; }

@-webkit-keyframes bouncing-text {
    0% {
        transform: translateX(-10%);
    }
    50% {
        transform: translateX(10%);
    }
    100% {
        transform: translateX(-10%);
    }
}             
/******* Banner Section CSS End *********/

/******* Middle Section CSS Start ******/
.common-section { padding: 90px 0; }
.light-bg       { background: var(--info-color); }
/* -------- Inner Page ------- */
/* Solutions Section  */
.accordion-item { border: none !important; border-bottom: 1px solid rgba(var(--mute-rgb), 0.5) !important; border-radius: 0 !important; }
.accordion-header button { padding: 16px 0; font-size: inherit; line-height: inherit; border: none !important; background: transparent !important; box-shadow: none !important; }
.accordion-button:not(.collapsed) { color: var(--primary-color);}
.accordion-body { padding: 0 0 12px; }
.accordion-header button::after { width: 20px; height: 20px; background: url(../images/plus-icon.svg) no-repeat center center / cover;}
.accordion-header button:not(.collapsed)::after { background-image: url(../images/minus-icon.svg); }
.solutions-section .accordion-header button::after { display: none; margin-left: 16px; width: 32px; height: 32px; background-image: url(../images/bulb-icon.svg); }
.solutions-section .accordion-header button:not(.collapsed)::after { display: block;}
/* Function Section  */
.function-list .item { min-height: 100%; padding: 40px 32px; background: var(--light-color); border: 2px solid var(--dark-color); border-radius: 24px; }
.function-list img { margin: 40px 0; }

/* Features Section  */
.features-section .item { margin-bottom: 60px; }
.features-section .item:last-child { margin-bottom: 0px; }
.features-section .item img { max-width: 90%; }

.win-patterns { max-width: 112%; }
.download-section .inner-block { background: var(--info-dark); border-radius: 40px; }
.contact-list .item ~ .item { border-left: 1px solid rgba(var(--mute-rgb), 0.5);}
.contact-list .icon { width: 64px; height: 64px; background: var(--info-dark); }
.contact-list .icon img { width: 66%; }

.privacy-policy-section { background: rgba(var(--info-rgb), 0.4); }
.privacy-policy { background: var(--light-color); border-radius: 32px; color: var(--mute-color); }
.privacy-policy ul { list-style: disc; }
.privacy-policy .main-content > ul { list-style: none; padding-left: 0; }
.privacy-policy .main-content ul h3,
.privacy-policy .main-content ul h4,
.privacy-policy .main-content ul h5 { }
.privacy-policy .main-content ul ul { list-style: disc; margin-bottom: 24px; }
.privacy-policy .main-content a { color: var(--primary-color); }


.error-page { min-height: calc(100vh - 166px); background: url(../images/404-bg.png) no-repeat center center / 80% auto;}
/******** Middle Section CSS End *******/

/***** Bottom Section CSS Start *******/
.footer-logo { width: 169px; }
.footer-main p { color: var(--secondary-color); font-size: 16px; }
.footer-inner { border-top: 1px solid rgba(var(--mute-rgb), 0.5);}
/* -------- Footer Inner Section ------- */
/****** Bottom Section CSS End *******/

/***** Responsive CSS Start ******/

@media (min-width: 1200px) and (max-width: 1399px) {
    h1 						{ font-size: 72px; line-height: 88px; }
    h2 						{ font-size: 48px; line-height: 60px; }
    h3 						{ font-size: 28px; line-height: 40px; }
    h4 						{ font-size: 22px; line-height: 28px; }

    .function-list img      { margin: 32px 0; width: 110px; }
}	

@media (min-width: 992px) and (max-width: 1199px) {
    body 					{ font-size: 17px; line-height: 26px; }
    h1 						{ font-size: 64px; line-height: 80px; }
    h2 						{ font-size: 42px; line-height: 54px; }
    h3 						{ font-size: 26px; line-height: 36px; }
    h4 						{ font-size: 21px; line-height: 28px; }
    h5 						{ font-size: 19px; line-height: 28px; }
    .l-space                { margin-bottom: 48px; }

/******* Middle Section CSS Start ******/
    .common-section         { padding: 80px 0; }

    .accordion-header button { padding: 14px 0; }
    .function-list .item    { padding: 32px 24px;}
    .function-list img      { margin: 28px 0; width: 100px; }
    .app-list img           { height: 50px; width: auto;}
	
}

@media (min-width: 768px) and (max-width: 991px) {
    body 					{ font-size: 16px; line-height: 24px; }
    h1 						{ margin: 0px 0px 20px; font-size: 48px; line-height: 60px; }
    h2 						{ margin: 0px 0px 20px; font-size: 32px; line-height: 44px; }
    h3 						{ margin: 0px 0px 20px; font-size: 22px; line-height: 30px; }
    h4 						{ margin: 0px 0px 12px; font-size: 20px; line-height: 26px; }
    h5 						{ margin: 0px 0px 10px; font-size: 18px; line-height: 26px; }
    .l-space                { margin-bottom: 36px; }
    .theme-btn              { padding: 8px 20px; font-size: 15px; line-height: 22px; }

    .navbar-brand       { width: 180px; }
    .navbar .navbar-nav .nav-link { margin: 0px 12px; }

/******* Middle Section CSS Start ******/
    .common-section         { padding: 70px 0; }

    .pattern-scroll { padding: 10px 0; }
    .accordion-header button { padding: 12px 0; }
    .function-list .item    { padding: 20px 14px; border-radius: 16px;}
    .function-list img      { margin: 20px 0; width: 80px; }
    .app-list img { height: 40px; width: auto;}
    .contact-list .icon { width: 54px; height: 54px;}
    .footer-main p { font-size: 14px; }
}

@media (max-width: 767px) {
    body 					{ font-size: 15px; line-height: 22px; }
    h1 						{ margin: 0px 0px 20px; font-size: 36px; line-height: 44px; }
    h2 						{ margin: 0px 0px 16px; font-size: 28px; line-height: 40px; }
    h3 						{ margin: 0px 0px 16px; font-size: 22px; line-height: 30px; }
    h4 						{ margin: 0px 0px 12px; font-size: 20px; line-height: 26px; }
    h5 						{ margin: 0px 0px 10px; font-size: 18px; line-height: 26px; }
    .l-space                { margin-bottom: 28px; }
    .theme-btn              { padding: 8px 20px; font-size: 15px; line-height: 22px; border-radius: 12px; }

    .navbar-brand       { width: 160px; }
    .navbar .navbar-nav .nav-link { margin: 0px 0px 8px; font-size: 18px; line-height: 24px; }
    .navbar-toggler     { border: none !important; padding: 0; order: 3; box-shadow: none !important;}
    .navbar-toggler .navbar-toggler-icon { background-image: url(../images/menu-icon.svg); width: 32px; height: 24px;}
    .navbar .theme-btn      { padding: 7px 10px; font-size: 14px; border-radius: 8px; }
    .navbar .navbar-collapse { position: absolute; top: 100%; left: 0; width: 100%; background-color: rgba(255,255,255,0.96); z-index: 5;}
    .navbar .navbar-nav  { padding: 16px 12px 36px; }
/******* Middle Section CSS Start ******/
    .common-section         { padding: 50px 0; }

    .banner-section .container { height: calc(100vh - 110px) !important; min-height: initial; max-height: 460px;}
    .pattern-scroll { padding: 10px 0; }
    .accordion-header button { padding: 12px 0; }
    .function-list .item    { min-height: initial; padding: 20px 14px; border-radius: 16px;}
    .function-list img      { margin: 20px 0; width: 80px; }
    .features-section .item { margin-bottom: 40px; }
    .win-patterns { max-width: 640px; }
    .download-section .inner-block { border-radius: 24px; }
    .download-section .mockup { max-width: 70%; }
    .contact-list .item ~ .item { margin-top: 24px; border: none; }
    .contact-list .icon { width: 54px; height: 54px;}
    .app-list img { height: 40px; width: auto;}
    .footer-main p { font-size: 14px; }


    .privacy-policy { border-radius: 16px; }
    .privacy-policy .main-content ul ul { padding-left: 16px;}

    .error-page { min-height: calc(100vh - 220px); background-size: 150% auto; }

}
@media (max-width: 340px) {
    .navbar-brand       { width: 150px; }
    .navbar .theme-btn      { padding: 6px 8px; font-size: 13px; }

}