:root {
    --cbp-color-main: #e06161;
    --cbp-color-main-darken: #dc4c4c;
    --cbp-color-background: rgba(136, 136, 136, 0.1);
    --cbp-color-green: #3aca47;
    --cbp-color-red: #ff6868;
    --cbp-color-grey: #cfcfcf;
    --cbp-border-radius: 0.15em;
    --cbp-archives__border-radius: var(--cbp-border-radius);
    --cbp-blocks-margin-bottom: 2em;
    --cbp-transition-duration: 0.15s;
    --cbp-transition-easing: ease-in-out;
}

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

:root {
    --gkt-color-brand: #2e1645;
    --gkt-color-dark-gray: #32373c;
    --gkt-color-light-gray: #f3f4f5;
    --gkt-color-light-gray-darken: #d7dbde;
    --gkt-color-primary: #0366d6;
    --gkt-color-success: #4ab866;
    --gkt-color-danger: #d94f4f;
    --gkt-color-warning: #f0b849;
    --gkt-color-info: #2ebef5;
    --gkt-border-radius: 5px;
    --gkt-blocks-margin-bottom: 28px;
    --gkt-transition-duration: 0.2s;
    --gkt-transition-easing: ease-in-out;
}

.ghostkit-custom-1ML7kj {
    margin-top: 30px;
}

.ghostkit-grid {
    --gkt-grid__gap: 15px;
    --gkt-grid__gap-vertical: var(--gkt-grid__gap);
    --gkt-grid__justify-content: flex-start;
    --gkt-grid--column__align-self: flex-start;
    --gkt-grid--column__size: 100%;
    --gkt-grid--column__size-with-gap: calc(var(--gkt-grid--column__size) - var(--gkt-grid__gap));
    --gkt-grid--column__order: initial;
    --gkt-grid--column__flex: 0 0 var(--gkt-grid--column__size-with-gap);
    --gkt-grid--column__width: var(--gkt-grid--column__size-with-gap);
    --gkt-grid--column__max-width: var(--gkt-grid--column__size-with-gap);
    --gkt-grid--column-sticky__offset: 0;
}

.ghostkit-grid,
.ghostkit-col {
    padding-top: 0.02px;
}

.ghostkit-grid-gap-md {
    --gkt-grid__gap: 30px;
}

.ghostkit-grid-inner {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--gkt-grid__gap-vertical);
    justify-content: var(--gkt-grid__justify-content);
    margin-left: calc(-1* var(--gkt-grid__gap));
}

.ghostkit-col {
    position: relative;
    display: flex;
    flex: var(--gkt-grid--column__flex);
    flex-wrap: wrap;
    order: var(--gkt-grid--column__order);
    width: var(--gkt-grid--column__width);
    max-width: var(--gkt-grid--column__max-width);
    min-height: 1px;
    margin-left: var(--gkt-grid__gap);
}

.ghostkit-col {
    --gkt-grid--column__flex: 0 0 auto;
    --gkt-grid--column__width: auto;
    --gkt-grid--column__max-width: 100%;
}

.ghostkit-col-4 {
    --gkt-grid--column__size: calc(100%*(4 / 12));
    --gkt-grid--column__size-with-gap: calc(var(--gkt-grid--column__size) - var(--gkt-grid__gap));
    --gkt-grid--column__flex: 0 0 var(--gkt-grid--column__size-with-gap);
    --gkt-grid--column__width: var(--gkt-grid--column__size-with-gap);
    --gkt-grid--column__max-width: var(--gkt-grid--column__size-with-gap);
}

.ghostkit-col-content {
    align-self: var(--gkt-grid--column__align-self);
    width: 100%;
}

.ghostkit-custom-Z1caIr8 {
    --gkt-icon-box--icon__font-size: 62px;
    --gkt-icon-box--icon__color: #eeeeee;
}

.ghostkit-icon-box {
    --gkt-icon-box__padding-v: 1.5em;
    --gkt-icon-box__padding-h: 1.5em;
    --gkt-icon-box__border-width: 1px;
    --gkt-icon-box__border-color: var(--gkt-color-light-gray-darken);
    --gkt-icon-box__border-radius: var(--gkt-border-radius);
    --gkt-icon-box--icon__offset: 1.5em;
    --gkt-icon-box--icon__font-size: 1.5em;
    --gkt-icon-box--icon__color: var(--gkt-color-primary);
    --gkt-icon-box__transition-duration: var(--gkt-transition-duration);
    --gkt-icon-box__transition-easing: var(--gkt-transition-easing);
}

.ghostkit-icon-box {
    display: flex;
    flex-wrap: wrap;
    padding: var(--gkt-icon-box__padding-v) var(--gkt-icon-box__padding-h);
    border: var(--gkt-icon-box__border-width) solid var(--gkt-icon-box__border-color);
    border-radius: var(--gkt-icon-box__border-radius);
}

.ghostkit-icon-box {
    --gkt-icon-box__border-width: 0;
    --gkt-icon-box__padding-v: 1.06em;
    --gkt-icon-box__padding-h: 1.06em;
    --gkt-icon-box--icon__offset: 0;
    background-color: #292e38;
}

.ghostkit-icon-box-icon {
    padding: 0 0.39em;
}

.ghostkit-icon-box-icon {
    display: flex;
    font-size: var(--gkt-icon-box--icon__font-size);
    color: var(--gkt-icon-box--icon__color);
    transition: var(--gkt-icon-box__transition-duration) color var(--gkt-icon-box__transition-easing);
}

.ghostkit-custom-Z1caIr8 {
    --gkt-icon-box--icon__font-size: 62px;
    --gkt-icon-box--icon__color: #eeeeee;
}

.ghostkit-icon-box-icon~.ghostkit-icon-box-content {
    padding-left: var(--gkt-icon-box--icon__offset);
}

.ghostkit-icon-box-content {
    flex: 1;
}

.ghostkit-custom-Z1TdVt6 {
    margin-left: 15px;
    padding-top: 6px;
}

.nk-feature-title {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    color: var(--white-color);
}

.ghostkit-custom-8lyq2 {
    margin-left: 15px;
}

.squadforce-decoration-none,
.squadforce-decoration-none a:hover {
    text-decoration: none;
}

.text-main-1 {
    color: #dd163b !important;
}

.nk-feature-title a {
    color: inherit;
    text-decoration: none;
}

.squadforce-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

svg {
    overflow: hidden;
    vertical-align: middle;
}

.ghostkit-custom-Z11HzSx {
    --gkt-icon-box--icon__font-size: 62px;
    --gkt-icon-box--icon__color: #eeeeee;
}

.ghostkit-custom-ZN3lsw {
    --gkt-icon-box--icon__font-size: 62px;
    --gkt-icon-box--icon__color: #eeeeee;
}

.ghostkit-custom-Z2ivI4T {
    margin-left: 15px;
    padding-top: 6px;
}

.ghostkit-custom-ZJPY1r {
    margin-left: 15px;
    padding-top: 6px;
}
.ghostkit-col-2 {
    --gkt-grid--column__size: calc(100%*(6 / 12));
    --gkt-grid--column__size-with-gap: calc(var(--gkt-grid--column__size) - var(--gkt-grid__gap));
    --gkt-grid--column__flex: 0 0 var(--gkt-grid--column__size-with-gap);
    --gkt-grid--column__width: var(--gkt-grid--column__size-with-gap);
    --gkt-grid--column__max-width: var(--gkt-grid--column__size-with-gap);
}

.clear {
    clear: both;
}

img {
    max-width: 100%;
    border: 0px;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

a:focus,
a:active,
a:visited,
a:hover {
    text-decoration: none;
    outline: none;
}

a:hover {
    color: #e73700;
}

h2 {
    margin-bottom: 48px;
    padding-bottom: 16px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    position: relative;
    text-transform: capitalize;
}

h3 {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 36px;
}

button {
    outline: none !important;
}

/******* Common Element CSS End *********/

/* -------- title style ------- */
.line-title {
    position: relative;
    width: 400px;
}

.line-title::before,
.line-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    border-radius: 2px;
}

.line-title::before {
    width: 100%;
    background: #f2f2f2;
}

.line-title::after {
    width: 32px;
    background: #e73700;
}

/******* Middle section CSS Start ******/
/* -------- Landing page ------- */
.game-section {
    padding: 60px 50px;
}

.game-section .owl-stage {
    margin: 15px 0;
    display: flex;
    display: -webkit-flex;
}

.game-section .item {
    margin: 0 15px 60px;
    width: 320px;
    height: 400px;
    display: flex;
    display: -webkit-flex;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    background: #343434 no-repeat center center / cover;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    cursor: pointer;
}

.game-section .item.active {
    width: 500px;
    box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 12px 40px 40px rgba(0, 0, 0, 0.25);
}

.game-section .item:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.game-section .item-desc {
    padding: 0 24px 12px;
    color: #fff;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transform: translateY(calc(100% - 54px));
    -webkit-transform: translateY(calc(100% - 54px));
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

.game-section .item.active .item-desc {
    transform: none;
    -webkit-transform: none;
}

.game-section .item-desc p {
    opacity: 0;
    -webkit-transform: translateY(32px);
    transform: translateY(32px);
    transition: all 0.4s ease-in-out 0.2s;
    -webkit-transition: all 0.4s ease-in-out 0.2s;
}

.game-section .item.active .item-desc p {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.game-section .owl-theme.custom-carousel .owl-dots {
    margin-top: -20px;
    position: relative;
    z-index: 5;
}

/******** Middle section CSS End *******/

/***** responsive css Start ******/

@media (min-width: 992px) and (max-width: 1199px) {
    h2 {
        margin-bottom: 32px;
    }

    h3 {
        margin: 0 0 8px;
        font-size: 24px;
        line-height: 32px;
    }

    /* -------- Landing page ------- */
    .game-section {
        padding: 50px 30px;
    }

    .game-section .item {
        margin: 0 12px 60px;
        width: 260px;
        height: 360px;
    }

    .game-section .item.active {
        width: 400px;
    }

    .game-section .item-desc {
        transform: translateY(calc(100% - 46px));
        -webkit-transform: translateY(calc(100% - 46px));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    h2 {
        margin-bottom: 32px;
    }

    h3 {
        margin: 0 0 8px;
        font-size: 24px;
        line-height: 32px;
    }

    .line-title {
        width: 330px;
    }

    /* -------- Landing page ------- */
    .game-section {
        padding: 50px 30px 40px;
    }

    .game-section .item {
        margin: 0 12px 60px;
        width: 240px;
        height: 330px;
    }

    .game-section .item.active {
        width: 360px;
    }

    .game-section .item-desc {
        transform: translateY(calc(100% - 42px));
        -webkit-transform: translateY(calc(100% - 42px));
    }
}

@media (max-width: 767px) {
    body {
        font-size: 14px;
    }

    h2 {
        margin-bottom: 20px;
        line-height: 40px;
    }

    h3 {
        margin: 0 0 8px;
        font-size: 19px;
        line-height: 24px;
    }

    .line-title {
        width: 250px;
    }

    /* -------- Landing page ------- */
    .game-section {
        padding: 30px 15px 20px;
    }

    .game-section .item {
        margin: 0 10px 40px;
        width: 200px;
        height: 280px;
    }

    .game-section .item.active {
        width: 270px;
        box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25);
        -webkit-box-shadow: 6px 10px 10px rgba(0, 0, 0, 0.25);
    }

    .game-section .item-desc {
        padding: 0 14px 5px;
        transform: translateY(calc(100% - 42px));
        -webkit-transform: translateY(calc(100% - 42px));
    }
    .ghostkit-grid-inner {
        flex-direction: column;
    }
    .ghostkit-col-2 {
        --gkt-grid--column__size: calc(100%*(12 / 12));
    }
}
@media (max-width: 550px) {
    .social {
    border-left: 0px solid #454c54;
    }
    .col-md-2 {
    flex: 0 0 50%;
    max-width: 100%;
    }
    .col-6, .col-md-2, .social{
        flex: 0 0 100%;
    }
}