@import url('./header.css');
@import url('./footer.css');
@import url('./banner.css');
@import url('./sidebar.css');
@import url('./blogs.css');

@font-face {
    font-family: "Outfit-Regular";
    src: url(../fonts/Outfit-Regular.ttf);
}

@font-face {
    font-family: "Outfit-Medium";
    src: url(../fonts/Outfit-Medium.ttf);
}

@font-face {
    font-family: "Outfit-SemiBold";
    src: url(../fonts/Outfit-SemiBold.ttf);
}

/* Variables for color and font family Start */

:root {
    /* Colors */
    --whiteText: #fff;
    --blackText: #000;
    --blackText2: #061B29;
    --primaryText: #632CBA;
    --lightBlueText: #EBEFF7;
    --headingText: #1B1921;
    --descriptionText: #00000099;
    --contentText: #3D4050;
    --themeColor: #5B93FF;
    --commonGradient: linear-gradient(to right, #632CBA 0%, var(--themeColor) 51%, #632CBA 100%);
    --commonGradient2: linear-gradient(to right, #752AFF 0%, #4A00D3 51%, #752AFF 100%);
    --commonGradient3: linear-gradient(to right, #632CBA 0%, var(--themeColor) 100%);


    /* Font Family */
    --regularFont: "Outfit-Regular";
    --mediumFont: "Outfit-Medium";
    --semiboldFont: "Outfit-SemiBold";
}

/* Variables for color and font family End */

body {
    color: var(--blackText);
    font-family: var(--regularFont);
}

/* .container{
    max-width: 100%;
    padding: 0 100px;
} */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

button,
a {
    transition: all 0.35s ease;
}

button {
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

button:focus {
    outline: none;
    box-shadow: none;
}

a {
    outline: none;
    text-decoration: none;
    color: var(--linkColor);
}

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


/* Common CSS Start*/
.boxs {
    width: 100%;
    display: block;
    float: left;
}

.banner_fit {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.text_60 {
    font-size: 60px;
}

.text_52 {
    font-size: 52px;
    line-height: 62px;
    letter-spacing: -0.32px;
}

.text_45 {
    font-size: 45px;
    line-height: 46px;
}

.text_36 {
    font-size: 36px;
    line-height: 46px;
}

.text_28 {
    font-size: 28px;
    line-height: 33.6px;
}

.text_22 {
    font-size: 22px;
}

.text_20 {
    font-size: 20px;
}

.text_18 {
    font-size: 18px;
}

.text_17 {
    font-size: 17px;
}

.text_16 {
    font-size: 16px;
}

.text_14 {
    font-size: 14px;
}

.white_text {
    color: var(--whiteText);
}

.regular_font {
    font-family: var(--regularFont);
}

.medium_font {
    font-family: var(--mediumFont);
}

.semiboldFont {
    font-family: var(--semiboldFont);
}

.section_space {
    padding: 80px 0 80px;
}

.light_bg {
    background: var(--lightBlueText);
}

/* Common Heading Section Start */
.common_heading_box {
    margin-bottom: 60px;
}

.common_heading {
    margin-bottom: 12px;
}

.common_description {
    color: var(--descriptionText);
}

.half_section {
    width: min(100%, 590px);
}

.common_description_text_list {
    padding-left: 20px;
    margin-top: 25px;
}

.common_description_text_list_item {
    position: relative;
    color: var(--descriptionText);
}

.common_description_text_list_item:not(:last-child) {
    margin-bottom: 10px;
}

.common_description_text_list_item::before {
    position: absolute;
    content: '';
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: var(--primaryText);
    left: -20px;
    top: 9px;
}

.common_heading_button {
    margin-top: 50px;
}

/* Common CSS End*/

/* Custom Buttons Start */
.custom_button {
    font-size: 17px;
    line-height: 17px;
    font-family: var(--mediumFont);
    padding: 5px 5px 5px 30px;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 200px;
    /* min-width: 230px; */
}

.custom_button_text {
    padding-right: 30px;
}

.custom_button .custom_button_icon {
    height: 49px;
    width: 49px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--whiteText);
}

.custom_button.custom_button_white {
    background: var(--whiteText);
    color: var(--blackText);
}

.custom_button.custom_button_white .custom_button_icon {
    background: var(--commonGradient3);
}

.custom_button {
    background-size: 300% 100% !important;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.custom_button:hover {
    background-position: 100% 0 !important;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

/* Blue Gradient Button */
.custom_button.custom_button_blue {
    background: var(--commonGradient2);
    color: var(--whiteText);
}

.custom_button.custom_button_blue .custom_button_icon {
    background: var(--whiteText);
}

/* Transparent Button */
.custom_button.custom_button_transparent {
    background: #ffffff26;
    color: var(--whiteText);
}

.custom_button.custom_button_transparent .custom_button_icon {
    background: var(--whiteText);
}

/* Gradient Button */
.custom_button.custom_button_gradient {
    background: var(--commonGradient);
    color: var(--whiteText);
}

.custom_button.custom_button_gradient .custom_button_icon {
    background: var(--whiteText);
}

/* Custom Buttons End */


/* Power Section Start */
.power_cards_grid {
    gap: 20px;
}

.power_cards_grid_1 {
    align-items: center;
}

.power_cards_grid_item {
    flex-direction: column;
    gap: 20px;
}

.power_cards_grid_item_3 {
    margin-top: -12%;
}

.power_card_item {
    padding: 30px;
    border-radius: 30px;
    border: 1px solid #FFFFFF80;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: #FFFFFFAD;
}

.power_card_image {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: 1px solid var(--primaryText);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.power_card_image_child {
    height: 60px;
    width: 60px;
    background: var(--whiteText);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.power_card_content_box .power_card_heading {
    margin-bottom: 16px;
}

.power_card_content_box .power_card_text {
    margin-bottom: 16px;
    color: var(--contentText);
}

.power_card_feature_list {
    padding-left: 30px;
}

.power_card_feature_list_item {
    position: relative;
    color: var(--contentText);
}

.power_card_feature_list_item:not(:last-child) {
    margin-bottom: 5px;
}

.power_card_feature_list_item::before {
    position: absolute;
    content: '';
    height: 4px;
    width: 4px;
    background: var(--contentText);
    left: -13px;
    top: 10px;
    border-radius: 50%;
}

/* Power Section End */

/* Stats Section Start */
.stats_section {
    background: linear-gradient(90deg, #632CBA 0%, #5B93FF 100%);
}

.stats_child__grid {
    grid-template-columns: 1fr 300px 1fr;
}

.stats_child_grid_box {
    padding: 45px 0;
}

.stats_user_box {
    height: 52px;
    display: inline-block;
}

.stats_user_box img {
    height: 100%;
}

.stats_user_grid {
    gap: 0 20px;
    align-items: center;
}

.stats_child_grid_1 {
    padding-right: 50px;
}

.stats_child_grid_1 .stats_grid_box_child {
    gap: 40px 0;
    flex-direction: column;
}

.stats_child_grid_2 {
    border: 1px solid #FFFFFF1A;
    backdrop-filter: blur(42px);
    -webkit-backdrop-filter: blur(42px);
    background: #FFFFFF1A;
    padding: 40px 40px;
}

.stats_child_grid_3 {
    padding-left: 50px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.stats_grid_child_heading {
    margin-bottom: 30px;
}

.industries_grid_section {}

.industries_grid_item {
    color: #131420;
    font-size: 16px;
    line-height: 28px;
    font-family: var(--mediumFont);
    padding: 10px 40px;
    background: var(--whiteText);
    border-radius: 30px;
    min-width: fit-content;
    display: inline-block;
    margin: 7px 7px;
}

.industries_grid_item:nth-child(2),
.industries_grid_item:nth-child(3),
.industries_grid_item:nth-child(6) {
    border: 1px solid #FFFFFF33;
    background: #FFFFFF40;
    color: var(--whiteText);
}

.stats_count_top {
    align-items: center;
    gap: 0 10px;
}

.stats_count_top_icon i {
    font-size: 30px;
}

.stats_counts_section {
    flex-direction: column;
    gap: 40px 0;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.image_with_content_section {
    grid-template-columns: 1fr 1fr;
    gap: 50px 150px;
    align-items: center;
}

/* Stats Section End */

/* Reveal Brands Section Start */
.brands_slider,
.brands_section_slider {
    position: relative;
}

.brands_section_slider .brands_section_overlay {
    position: absolute;
    z-index: 0;
}

.common_heading_box__child_flex {
    grid-template-columns: 1fr 1fr;
    gap: 40px 110px;
}

.brands_slide__container {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.brands_slide_image {
    padding: 16px 16px;
    border-radius: 20px;
    background: var(--whiteText);
}

.brands_slide_image img {
    border-radius: 10px;
    width: 100%;
}

.brands_slide_content {
    padding: 40px 40px;
    background: var(--whiteText);
    border-radius: 20px;
    border: 1px solid #FFFFFF33;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    background: #FFFFFFAD;
}

.brand_qr_image_container {
    width: 144px;
    height: 144px;
    border-radius: 5px;
    background: var(--whiteText);
    display: inline-block;
}

.brand_qr_image {
    margin-top: 40px;
}

/* Reveal Brands Section End */

/* In Action Slider Section Start */
.in_actiion_section {
    padding: 0 20px;
}

.in_actiion_section_child {
    background: var(--whiteText);
    border-radius: 40px;
    position: relative;
}

.in_action_slider_container {
    padding: 0 100px;
}

.in_action_slide_content {
    margin-top: 50px;
    padding: 0 150px;

}

.in_action_slide_content .in_action_slide_content_heading {
    margin-bottom: 15px;
}

.in_action_slide_content_text {
    color: var(--descriptionText);
}

/* About Users Section Start */
.about_users_slider {
    display: flex;
    gap: 1rem;
}

.about_users_slide {
    flex: 1;
    transition: flex 0.3s ease;
}

.about_users_slide.active_slide {
    flex: 3;
}

.about_users_slide_container {
    border-radius: 16px;
    overflow: hidden;
    height: 500px;
    position: relative;
}

/* .about_users_slide_container, */
.about_users_slide_image {
    height: 100%;
}

.about_users_slide_image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.about_users_slide_content {
    position: absolute;
    bottom: 0;
    padding: 10px 10px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.about_users_slide_content_child {
    padding: 20px;
    background: var(--whiteText);
    border-radius: 10px;
    width: 100%;
}

.about_users_slide_content_heading {
    letter-spacing: -0.72px;
    padding-bottom: 5px;
}

.about_users_slide_content_text {
    letter-spacing: -0.48px;
    color: #494949;
    line-height: 20px;
}

.about_users_slide.active_slide .about_users_slide_content {
    opacity: 1;
    visibility: visible;
    transition: all 0.6s ease;
}

/* About Users Section End  */

/* Immersive Section Start */
.common_description_text_list_item.white_text,
.common_description.white_text {
    color: var(--whiteText);
}

.immersive_modal_section {
    position: relative;
}

.immersive_modal_container {
    padding: 223px 0;
}

.immersive_modal_banner {
    position: absolute;
    width: 45%;
    right: 0;
    height: 100%;
    /* padding: 50px 50px 20px; */
}

.modal_banner_content {
    padding: 50px 50px;
}

.modal_banner_scanner {
    position: absolute;
    right: 20px;
    bottom: 20px;
    height: 100px;
    width: 100px;
}

.modal_banner_content_heading {
    padding-bottom: 10px;
}

/* Immersive Section End */

/* Partners Slider Section Start */
.partners_section {
    padding: 40px 0;
}

.partners_slider {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.partners_track {
    width: max-content;
    /* animation: scroll-marquee 1s linear infinite; */
    width: fit-content;
    gap: 0 50px;
}

.partners_slide {
    flex: 0 0 auto;
    padding: 0 20px;
}

.partners_slider .partners_slide img {
    height: 38px;
    width: 100%;
    object-fit: contain;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@keyframes scroll-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-1 * var(--scroll-width, 1000px)));
    }
}

/* Partners Slider Section End */

.immersive_modal_container {
    width: 50%;
}

.head-side {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

/* ----------------- */
.navbar-toggler {
    display: none !important;
}

.hero_banner_caption_icon img,
.hero_banner_bottom_caption_icon img {
    display: inline-block;
    float: left;
}

.custom_modal_header {
    padding: 25px 50px 20px;
    text-align: center;
    border-bottom: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.custom_modal_header .modal_close {
    position: absolute;
    right: 25px;
    padding: 0;
    top: 25px;
    font-size: 30px;
    line-height: 20px;
}

/* .custom_button_new{
    position: relative;
    padding: 21px 55px 21px 30px;
}
.custom_button_new .custom_button_icon{
    position: absolute;
    right: 5px;
    top: 5px;
}
.custom_button_new:hover .custom_button_icon{
    opacity: 0;
    transition: opacity 0.2s ease;
} */

.footer_social_container {
    display: flex !important;
    justify-content: center;
    gap: 0 10px;
}

.footer_social_link svg {
    width: 26px;
    height: 26px;
}

.footer_social_link:hover svg path {
    fill: var(--primaryText);
}

.custom_button_new .custom_button_icon {
    position: relative;
    overflow: hidden;
}

.frontIcon,
.hoverFrontIcon {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    height: 100%;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* .hoverFrontIcon {
    transform: translateX(-60px);
    opacity: 0;
    pointer-events: none;
}

.frontIcon {
    transform: translateX(0);
    opacity: 1;
}

.custom_button_new:hover .custom_button_icon .frontIcon {
    transform: translateX(60px);
    opacity: 0;
}

.custom_button_new:hover .custom_button_icon .hoverFrontIcon {
    transform: translateX(0);
    opacity: 1;
} */

.custom_button_new .slide-in {
  animation: slideIn 0.4s forwards;
  opacity: 1;
}

.custom_button_new .slide-out {
  animation: slideOut 0.4s forwards;
  opacity: 0;
}
.in_action_slide_image{
	border-radius: 12px;
	overflow: hidden;
}

@keyframes slideIn {
  from {
    transform: translateX(-60px);
    opacity: 0;
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0px);
    opacity: 1;
  }
  to {
    transform: translateX(60px);
    opacity: 0;
  }
}