html, body{
    font-family: "DM Sans", serif;
}

@font-face {
    font-family: font_cd_bold;
    src: url(../fonts/ClashDisplay-Semibold.otf);
}

.fw_200{font-weight:200}
.fw_300{font-weight:300}
.fw_400{font-weight:400}
.fw_500{font-weight:500}
.fw_600{font-weight:600}
.fw_700{font-weight:700}
.fw_800{font-weight:800}
.fw_900{font-weight:900}
.f_11{font-size: 11px;}
.f_14{font-size: 14px;}
.f_18{font-size: 18px;}
.theme_color{color: #2A6790;}
.text_gray{color: #637381;}
:focus{outline: none !important; box-shadow: none !important;}
.heading_font{font-family: font_cd_bold;}

/* Header css starts */

header {
    background-color: #03101C;
}

header .nav-link, header .nav-link.active, footer .nav-link {
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    color: #FFFFFF !important;
    padding: 0px 14px !important;
}


/* Header css ends */

/* Banner css starts */

.contact_form {
    padding: 26px 30px;
    background: #FFFFFF;
    position: absolute;
    width: 500px;
    top: 0;
    bottom: 0;
    z-index: 3;
    right: 100px;
    height: max-content;
    margin: auto 0;
}

.banner_img {
    background-image: url(../images/banner_img.png);
    width: 100%;
    height: calc(100vh - 72px);
    background-size: cover;
    background-position: top left;
    color: white;
    padding: 50px 100px;
    position: relative;
    z-index: 9;
}

.banner_img .left_side h1 {
    font-family: font_cd_bold;
    font-weight: 600;
    font-size: 42px;
    line-height: 50px;
}

.banner_img .left_side p {
    font-weight: 400;
    width: 80%;
}

.banner_img:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 45.5%, rgba(0, 0, 0, 0.8) 100%);
    left: 0;
    top: 0;
    z-index: -1;
}

.contact_form {
    padding: 26px 30px;
    background: #FFFFFF;
}

.contact_form input, .contact_form textarea {
    padding: 15px;
    height: 48px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    order: 0;
    flex-grow: 0;
}

.contact_form input::placeholder, .contact_form textarea::placeholder{
    font-weight: 500;
    color: #111111;
    opacity: 0.5;
  }
  
  .contact_form input::-ms-input-placeholder, .contact_form textarea::-ms-input-placeholder { /* Edge 12 -18 */
    font-weight: 500;
color: #111111;
opacity: 0.5;
  }

  .contact_form button {
    width: 100%;
    height: 58px;
    background-color: #2A6790;
    border-color: #2A6790;
    border-radius: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #FFFFFF;
}



/* Banner css ends */

/* About us css starts */

.section_spacing {
    padding: 80px 0px;
}

.about_info h2 {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 38px;
    line-height: 48px;
    color: #111111;
}

.theme_btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13px 28px;
    height: 50px;
    background: #2A6790;
    border-color: #2A6790;
    border-radius: 6px;
}


.about_info p {
    font-family: 'DM Sans';
    font-weight: 400;
    color: #637381;
}




/* About us css ends */

/* Our Video css starts */

.video_bg {
    background-image: url(../images/Video_thumbnail.png);
    height: 600px;
    background-repeat: no-repeat;
    position: relative;
    z-index: 99;
    display: flex;
    align-items: center;
}


.video_bg:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/video_bg.png);
    left: 0;
    top: 0;
    z-index: -1;
    background-repeat: no-repeat;
}

.black_btn, .black_btn:hover, .black_btn:focus{
    padding: 13px 28px;
    height: 50px;
    background: #111111;
    border-color: #111111;
    border-radius: 6px;
}

.video_info p {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 28px;
    color: #FFFFFF;
}



/* Our Video css ends */

/* What we provide css starts */

.feature_icon{
    width: 70px;
    height: 70px;
    background: #4196C2;
    border-radius: 56px;
    margin: 0 auto 20px auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

}

.feature_card h4 {
    font-size: 20px;
}

.mb_6{margin-bottom: 60px;}







/* Platform css starts */

.platform_card {
    background: url(../images/Platform_bg.png);
    background-position: top center;
    background-size: 100%;
}

.platform_card .nav-tabs {
    width: max-content;
    margin: 0 auto;
    gap: 20px;
    border-bottom: none;
}

.platform_card .nav-item.show .nav-link, .platform_card .nav-link.active {
    background: #2A6790 !important;
    color: #FFFFFF !important;
}

.platform_card .nav-tabs .nav-link {
    height: 58px;
    background: #ffffff;
    border: 1px solid #2a6891;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #2a6891;
    padding: 0px 40px;
    text-transform: uppercase;
}

.laptop_mockup {
    position: absolute;
    left: 0;
    right: -3px;
    margin: 0 auto;
    top: -30px;
}

.laptop_slider .owl-carousel .owl-item img {
    width: max-content;
    margin: 0 auto;
    border-radius: 5px;
}

.laptop_slider {
    position: relative;
}

.ipad_mockup {
    position: absolute;
    left: 0;
    right: -2px;
    margin: 0 auto;
    top: -23px;
}

/* Platform css ends */

/* FAQ css starts */

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
    transition: all 0.5s;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}
.accordion-button::after {
    transition: all 0.5s;
}

.bg_light_blue{
    background-color: #ECF4FA;
}

.custom_collapse .accordion-item {
    margin-bottom: 20px;
    border: none;
}

.custom_collapse .accordion-button:not(.collapsed) {
    color: #111111;
    padding-bottom: 0;
    background: white;
    box-shadow: none !important;
}

.custom_collapse .accordion-button {
    margin: 0 auto;
    font-weight: 600;
    font-size: 18px;
    line-height: 130%;
    color: #111111;
}

.accordion-body {
    padding-top: 8px;
    font-weight: 300;
    font-size: 16px;
    line-height: 150.7%;
    color: #363049;
}


/* FAQ css ends */

/* Download banner css starts */

.download_btn, .download_btn:hover, .download_btn:focus, .download_btn:active {
    background: black !important;
    border-color: black !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    width: 180px;
}

.download_btn img {
    width: 42px;
    height: 42px;
}

.download_card {
    padding: 60px 0px;
    background-image: url(../images/Download_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Download banner css ends */


/* Footer css starts */


footer {
    background: #03101C;
    padding: 50px 0 10px;
}

.social_media span {
    background: hwb(0deg 100% 0% / 10%);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    margin-left: 4px;
}

hr.footer_divider {
    border-color: #ffffff;
    opacity: 5%;
    margin: 30px 0px;
}

/* Footer css ends */