/*!
Theme Name: Optimasi.ai
Theme URI: http://underscores.me/
Author: Iskak Purnomo
Author URI: https://www.instagram.com/iskfm_
Description: Theme for Optimasi.ai
Version: 1.0.1
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: optimasiai
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Optimasi.ai is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* General */
body,
html {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	background: #ffffff;
    color: #505F79;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 15px 0px;
}
a {
	color: inherit;
	-webkit-text-decoration: none;
	text-decoration: none;
}
button:focus,
input:focus {
	outline: none;
}
img {
	max-width: 100%;
}
.bg-blue {
    background: #EFF7F6;
}
.bg-blue-soft {
    background: #FAFBFC!important;
}
.relative {
    position: relative;
}

/* Spacing */
.pt-56 {
    padding-top: 56px !important;
}
.pt-84 {
    padding-top: 84px !important;
}
.pb-32 {
    padding-bottom: 32px !important;
}
.pb-40 {
    padding-bottom: 40px !important;
}
.pb-48 {
    padding-bottom: 48px !important;
}
.pb-132 {
    padding-bottom: 132px !important;
}
.py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}
.py-32 {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}
.py-56 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}
.py-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}
.py-72 {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}
.py-128 {
    padding-top: 128px !important;
    padding-bottom: 128px !important;
}

.mb-0 {
    margin-bottom: 0px !important;
}
.mb-8 {
    margin-bottom: 8px !important;
}
.mt-16 {
    margin-top: 16px !important;
}
.mt-64 {
    margin-top: 64px !important;
}
.mb-16 {
    margin-bottom: 16px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.mb-24 {
    margin-bottom: 24px !important;
}
.mb-28 {
    margin-bottom: 28px !important;
}
.mb-64 {
    margin-bottom: 64px !important;
}
.mb-40 {
    margin-bottom: 40px !important;
}
.mb-48 {
    margin-bottom: 48px !important;
}
.mr-16 {
    margin-right: 16px !important;
}
.ml-16 {
    margin-left: 16px !important;
}
.ml-auto {
    margin-left: auto !important;
}
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 768px) {
    .mb-md-16 {
        margin-bottom: 16px !important;
    }
    .mb-md-24 {
        margin-bottom: 24px !important;
    }
    .mb-md-32 {
        margin-bottom: 32px !important;
    }
}

@media (max-width: 576px) {
    .pb-sm-0 {
        padding-bottom: 0px !important;
    }
    .pt-sm-32 {
        padding-top: 32px !important;
    }
    .py-sm-16 {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
	.py-sm-24 {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
	.py-sm-32 {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    .py-sm-48 {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
    .py-sm-56 {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
    .py-sm-90 {
        padding-top: 90px !important;
        padding-bottom: 90px !important;
    }

    .mb-sm-16 {
        margin-bottom: 16px !important;
    }
    .mb-sm-40 {
        margin-bottom: 40px !important;
    }
	
}

/* Typography */
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.section-title {
    color: #1A417F;
    font-weight: 800;
    font-size: 48px;
    line-height: 72px;
}
.section-title-blog {
    color: #1A417F;
    font-weight: 800;
    font-size: 48px;
    line-height: 56px;
}
@media (max-width: 576px) {
    .section-title-blog {
        font-weight: bold;
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 40px;
        text-align: center;
    }
    .section-btn-blog {
        display: table!important;
        margin: auto auto 48px;
    }
}
.section-description {
    color: #505F79;
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
}
.related-title {
    font-weight: bold;
    font-size: 36px;
    line-height: 44px;
    color: #172B4D;
}

@media (max-width: 576px) {
    .section-title{
        font-weight: bold;
        font-size: 24px;
        line-height: 28px;
    }
}

/* Component */
.btn {
    padding: 14px 24px;
    border-radius: 32px;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.05px;
    display: inline-block;
    outline: none;
    cursor: pointer;
}
.btn-primary {
    background: #ec6513;
    color: #fff;
    border: 1px solid #408BD0;
}
.btn-primary:hover,
.btn-primary:focus {
    background: #1A417F;
}
.btn-secondary {
    border: 1px solid #408BD0;
    color: #408BD0;
    background: #fff;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background: #408BD0;
    color: #fff;
}

/* Header */
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
}
.site-header {
    background: white;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #172B4D;
    padding: 16px;
    border-bottom: 1px solid #EFF5FB;
}
.site-navigation ul{
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
.site-navigation ul li{
    display: inline-block;
    padding: 12px 7px;
}
@media (max-width: 576px) {
    .mobile-menu {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: white;
        height: 100%;
        z-index: 10;
        display: none;
    }
    .mobile-menu .close-menu {
        padding: 16px 1px;
        margin-left: auto;
    }
    .site-navigation ul {
        text-align: left;
    }
    .site-navigation ul li {
        display: block;
        padding: 16px 1px;
    }
    .switch {
        margin: 16px 1px!important;
    }
}
/* Navbar */
.breadcrumb-section {
    padding: 30px 0;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.05px;
    color: #408BD0;
}
.breadcrumb {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb .breadcrumb-item {
    margin: 0 8px;
    position: relative;
}
.breadcrumb .breadcrumb-item:first-child {
    margin-left: 0;
}
.breadcrumb .breadcrumb-item.active {
    color: #1A417F;
}
@media (max-width: 420px) {
.breadcrumb .breadcrumb-item {
        margin: 0 12px;
        position: relative;
    }}
.navbar-category {
    list-style: none;
    padding: 0;
    display: flex;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #313f4e;
    border-bottom: 1px solid #d7dbdf;
}

/* @media (max-width: 1024px) {
    .navbar-category {
        width: 100vw;
    }
} */
.navbar-category li {
    padding: 14px;
}
.navbar-category li.active {
    color: #006fe6;
    border-bottom: 2px solid #006fe6;
}

.navbar-social-media {
    list-style-type: none;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    padding: 16px 0;
    margin: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    text-transform: uppercase;
    transition: all 0.3s ease;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    width: 100%;
}
.navbar-social-media.fixed {
    position: fixed;
    top: "";
}
@media (min-width: 1024px) {
    .navbar-social-media.fixed {
        top: 120px;
    }
}
@media (min-width: 1024px) {
    .navbar-social-media {
        position: absolute;
        left: auto;
        bottom: auto;
        display: block;
        background: transparent;
        width: auto;
        padding: 0;
        z-index: 2;
    }
}
.navbar-social-media li {
    margin: 0px 6px;
    margin-bottom: 0;
    position: relative;
}
@media (min-width: 1024px) {
    .navbar-social-media li:last-child:before {
        content: "Share";
        white-space: nowrap;
        position: absolute;
        text-align: left;
        transform-origin: bottom;
        transform: rotate(270deg);
        left: 5px;
    }
}
.navbar-social-media li:last-child,
.navbar-social-media li:nth-last-child(2) {
    display: none;
}
@media (min-width: 1024px) {
    .navbar-social-media li:last-child,
    .navbar-social-media li:nth-last-child(2) {
        display: block;
    }
}
.navbar-social-media li:first-child:before {
    content: "Share";
    white-space: nowrap;
    text-align: left;
    transform-origin: bottom;
}
@media (min-width: 1024px) {
    .navbar-social-media li:first-child:before {
        content: none;
    }
}
.navbar-social-media li:first-child,
.navbar-social-media li:nth-child(2) {
    display: block;
}
@media (min-width: 1024px) {
    .navbar-social-media li:first-child,
    .navbar-social-media li:nth-child(2) {
        display: none;
    }
}
@media (min-width: 1024px) {
    .navbar-social-media li {
        margin: 0px;
        margin-bottom: 12px;
    }
}
.navbar-social-media li a {
    display: flex;
    padding: 0px;
}
@media (min-width: 1024px) {
    .navbar-social-media li a {
        padding: 4px;
    }
}
.navbar-social-media li a:hover {
    background: #ebedef;
    border-radius: 100%;
}
.navbar-social-media li .border {
    height: 24px;
    width: 1px;
    border-right: 1px solid #89949f;
    margin: auto;
}

/* Footer */
.site-footer {
	background: #FAFBFC;
	color: #1A417F;
	padding: 72px 0 48px;
}
.site-footer h4 {
	font-weight: bold;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: -0.05px;
}
.site-footer .list {
	list-style: none;
	font-size: 14px;
	line-height: 24px;
	margin: 0;
	padding: 0;
}
.site-footer .list li {
	margin-bottom: 8px;
}
.site-footer .address {
	text-align: center;
}
.site-footer .address h4 {
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
}
.site-footer .address p {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.05px;
}
.site-copyright {
	background: #EBECF0;
	color: #313F4E;
	padding: 20px 0;
}
.site-copyright .list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 14px;
	line-height: 24px;
}
.site-copyright .list li,
.site-copyright .social li {
	display: inline-block;
}
.site-copyright .list li:not(:last-child) {
	margin-right: 48px;
}
.site-copyright .social {
	text-align: right;
	list-style: none;
	padding: 0;
	margin: 0;
	height: 24px;
}
.site-copyright .social li a {
	display: block;
	height: 24px;
}
.site-copyright .social li:not(:last-child) {
	margin-right: 16px;
}

/* Card */
.card-blog,
.card-blog-latest,
.card-blog-list {
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 1;
}
@media (max-width: 576px) {
    .card-blog,
    .card-blog-latest,
    .card-blog-list {
        margin-bottom: 40px;
        height: auto;
    }
}
.card-blog-latest:hover,
.card-blog-list:hover,
.card-blog:hover {
    background: #f7f8f9;
    position: relative;
}
.card-blog-latest:hover:before,
.card-blog-list:hover:before,
.card-blog:hover:before {
    z-index: -1;
    content: "";
    position: absolute;
    background: #f7f8f9;
    left: -12px;
    right: -12px;
    top: -12px;
    bottom: -12px;
    border-radius: 6px;
}
.card-blog-latest:hover .card-image,
.card-blog-list:hover .card-image,
.card-blog:hover .card-image {
    border-radius: 4px;
}
.card-blog-latest:hover img,
.card-blog-list:hover img,
.card-blog:hover img {
    transform: scale(1.1);
    transition: 0.3s all;
}
.card-blog-latest:focus,
.card-blog-list:focus,
.card-blog:focus {
    background: #e7f1fc;
    position: relative;
    outline: none;
}
.card-blog-latest:focus:before,
.card-blog-list:focus:before,
.card-blog:focus:before {
    z-index: -1;
    content: "";
    position: absolute;
    background: #e7f1fc;
    border: 2px solid #5ca3ef;
    left: -12px;
    right: -12px;
    top: -12px;
    bottom: -12px;
    border-radius: 6px;
}
.card-blog-latest .card-image,
.card-blog-list .card-image,
.card-blog .card-image {
    height: 200px;
    overflow: hidden;
}
.card-blog-latest .card-image img,
.card-blog-list .card-image img,
.card-blog .card-image img {
    border-radius: 4px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-blog-latest .card-body,
.card-blog-list .card-body,
.card-blog .card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding-top: 24px;
    padding-bottom: 12px;
}
@media (min-width: 1024px) {
    .card-blog-latest .card-body,
    .card-blog-list .card-body,
    .card-blog .card-body {
        padding-top: 16px;
        padding-bottom: 24px;
    }
}
.card-blog-latest .card-body .card-category,
.card-blog-list .card-body .card-category,
.card-blog .card-body .card-category {
    font-size: 12px;
    line-height: 16px;
    display: inline-block;
    margin-bottom: 12px;
    color: #006fe6;
    font-weight: 600;
    text-transform: uppercase;
}
.card-blog-latest .card-body .card-title,
.card-blog-list .card-body .card-title,
.card-blog .card-body .card-title {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: -0.05px;
}
@media (min-width: 1024px) {
    .card-blog-latest .card-body .card-title,
    .card-blog-list .card-body .card-title,
    .card-blog .card-body .card-title {
        font-size: 20px;
        line-height: 24px;
        font-weight: 500;
        letter-spacing: -0.05px;
    }
}
.card-blog-latest .card-body .card-title a:before,
.card-blog-list .card-body .card-title a:before,
.card-blog .card-body .card-title a:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
}
.card-blog-latest .card-footer,
.card-blog-list .card-footer,
.card-blog .card-footer {
    display: flex;
    align-items: center;
}
.card-blog-latest .card-footer .card-avatar,
.card-blog-list .card-footer .card-avatar,
.card-blog .card-footer .card-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 24px;
    height: 24px;
    border: 1px solid #ffffff;
    border-radius: 24px;
    background-color: #8b97c9;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    width: 24px;
    height: 24px;
    margin-right: 16px;
}
@media (min-width: 1024px) {
    .card-blog-latest .card-footer .card-avatar,
    .card-blog-list .card-footer .card-avatar,
    .card-blog .card-footer .card-avatar {
        width: 32px;
        height: 32px;
    }
}
.card-blog-latest .card-footer .card-avatar img,
.card-blog-list .card-footer .card-avatar img,
.card-blog .card-footer .card-avatar img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-blog-latest .card-footer .card-author,
.card-blog-list .card-footer .card-author,
.card-blog .card-footer .card-author {
    font-size: 14px;
    line-height: 20px;
    display: inline-block;
    color: #62707f;
}
.card-blog-latest,
.card-blog-list {
    display: flex;
    flex-direction: row;
    flex: 1;
    padding: 44px 92px;
}
@media (max-width: 576px) {
    .card-blog-latest,
    .card-blog-list {
        padding: 0;
    }
}
.card-blog-latest:focus,
.card-blog-list:focus {
    border: 2px solid #5ca3ef;
    border-radius: 6px;
}
.card-blog-latest:focus,
.card-blog-latest:hover,
.card-blog-list:focus,
.card-blog-list:hover {
    border-radius: 8px;
}
.card-blog-latest:focus:before,
.card-blog-latest:hover:before,
.card-blog-list:focus:before,
.card-blog-list:hover:before {
    content: none;
}
.card-blog-latest section,
.card-blog-list section {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
@media (max-width: 576px) {
    .card-blog-latest section,
    .card-blog-list section {
        width: calc(100% - 98px);
    }
}
.card-blog-latest .card-image,
.card-blog-list .card-image {
    height: 160px;
    width: 276px;
    margin-left: 40px;
}
@media (max-width: 576px) {
    .card-blog-latest .card-image,
    .card-blog-list .card-image {
        height: 88px;
        width: 86px;
        margin-left: 12px;
    }
}
.card-blog-latest .card-body,
.card-blog-list .card-body {
    padding: 0;
}
.card-blog-latest .card-body .card-title,
.card-blog-list .card-body .card-title {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 32px;
}
@media (max-width: 576px) {
    .card-blog-latest .card-body .card-title,
    .card-blog-list .card-body .card-title {
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
@media (max-width: 576px) {
    .card-blog-latest .card-body .card-category,
    .card-blog-list .card-body .card-category {
        margin-bottom: 8px;
    }
}
.card-blog-latest .card-footer,
.card-blog-list .card-footer {
    margin-bottom: 8px;
}
@media (max-width: 576px) {
    .card-blog-latest .card-footer,
    .card-blog-list .card-footer {
        margin-bottom: 0;
    }
}
@media (max-width: 576px) {
    .card-blog-list .card-footer .card-avatar {
        display: none;
    }
}
@media (max-width: 576px) {
    .card-blog-latest .card-footer .card-author,
    .card-blog-list .card-footer .card-author {
        font-size: 12px;
        line-height: 16px;
    }
}
.card-blog-latest {
    background: #ffffff;
    align-items: center;
    border-radius: 8px;
    padding: 0;
    z-index: 1;
}
@media (max-width: 576px) {
    .card-blog-latest {
        margin-bottom: 0;
        display: block;
    }
}
.card-blog-latest:hover {
    background: #ffffff;
    filter: drop-shadow(0px 4px 8px rgba(137, 148, 159, 0.32));
}
.card-blog-latest:hover .card-image {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
@media (max-width: 576px) {
    .card-blog-latest:hover .card-image {
        border-top-left-radius: 8px;
        border-bottom-left-radius: 0;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 0;
    }
}
.card-blog-latest:focus {
    background: #ffffff;
    border: none;
    border-radius: 0;
}
.card-blog-latest:focus:before {
    content: none;
}
.card-blog-latest:focus .card-image {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
@media (max-width: 576px) {
    .card-blog-latest section {
        width: 100%;
    }
}
.card-blog-latest .card-image {
    height: 306px;
    width: 528px;
    margin-right: 40px;
    margin-left: 0;
}
@media (max-width: 576px) {
    .card-blog-latest .card-image {
        width: auto;
        margin: 0;
        height: 200px;
    }
}
.card-blog-latest .card-image img {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
@media (max-width: 576px) {
    .card-blog-latest .card-image img {
        border-radius: 8px 8px 0 0;
    }
}
.card-blog-latest .card-body {
    padding: 0;
}
@media (max-width: 576px) {
    .card-blog-latest .card-body {
        padding: 24px 16px 12px;
    }
    .card-blog-latest .card-footer {
        padding: 0 16px ;
    }
}
.card-blog-latest .card-body .card-title {
    font-size: 24px;
    line-height: 28px;
    margin-bottom: 24px;
}
@media (max-width: 576px) {
    .card-blog-latest .card-body .card-title {
        margin-bottom: 0;
        font-size: 16px;
        line-height: 20px;
        white-space: normal;
        overflow: unset;
        text-overflow: unset;
    }
}
.card-blog-latest .card-footer {
    margin-bottom: 0;
}
.card-feature {
    background: rgba(239, 245, 251, 0.5);
    border-radius: 24px;
    padding: 56px 22px;
    text-align: center;
    height: 100%;
}
.card-feature img {
    height: 64px;
    width: 64px;
    object-fit: contain;
    margin-bottom: 32px;
}
.card-feature .card-title {
    font-size: 20px;
    line-height: 32px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #1A417F;
}
.card-feature .card-description {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #505F79;
}
.card-feature-list {
    margin-bottom: 40px;
    display: flex;
}
.card-feature-list img {
    height: 48px;
    width: 48px;
    object-fit: contain;
    margin-right: 24px;
}
.card-feature-list .card-title {
    font-weight: bold;
    font-size: 20px;
    line-height: 24px;
    margin-bottom: 8px;
    color: #1A417F;
}
.card-feature-list .card-description {
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    color: #505F79;
}
.card-team {
    padding: 24px 22px;
    text-align: center;
    height: 100%;
}
.card-team img {
    height: 160px;
    width: 160px;
    object-fit: contain;
    margin-bottom: 48px;
    border-radius: 50%;
}
.card-team .card-title {
    font-weight: bold;
    font-size: 29px;
    line-height: 32px;
    margin-bottom: 12px;
    color: #1A417F;
}
.card-team .card-position {
    background: #EFF5FB;
    border-radius: 32px;
    padding: 4px 12px;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: #408BD0;
    margin-bottom: 12px;
    display: inline-block;
}
.card-team .card-description {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #505F79;
}
.border-step {
    border-bottom: 2px solid #DDE7F8;
    width: 80%;
    position: absolute;
    top: 28px;
    z-index: -1;
    left: 10%;
    right: 10%;
}
.card-step {
    padding: 0 12px 12px;
    text-align: center;
    height: 100%;
    width: calc(100% / 5);
}
.card-step img {
    padding: 12px;
    height: 56px;
    width: 56px;
    object-fit: contain;
    margin-bottom: 24px;
    border-radius: 50%;
    background: #1A417F;
}
.card-step .card-title {
    font-weight: bold;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 16px;
    color: #1A417F;
}
.card-step .card-description {
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
    color: #505F79;
}
@media (max-width: 768px) {
    .border {
        display: none;
    }
    .card-step {
        width: 100%;
        margin-bottom: 24px;
    }
    .card-step:last-child {
        margin-bottom: 0;
    }
    .card-step img {
        margin-bottom: 16px;
    }
}
.card-case .count {
    font-weight: bold;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 1px;
    color: #408BD0;
    display: inline-block;
    margin-bottom: 8px;
}
.card-case .label-count {
    font-weight: bold;
    font-size: 14px;
    line-height: 28px;
    color: #505F79;
}
.card-case .card-title {
    font-weight: bold;
    font-size: 40px;
    line-height: 48px;
    color: #1A417F;
}
.card-case .card-strategy {
    font-weight: bold;
    font-size: 24px;
    line-height: 32px;
    color: #1A417F;
}
.card-case .card-strategy ul {
    margin-top: 8px;
    margin-bottom: 0;
    padding-left: 20px;
    font-weight: normal;
    font-size: 16px;
    line-height: 28px;
    color: #505F79;
}
@media (max-width: 768px) {
    .card-case .count {
        font-size: 24px;
        line-height: 32px;
    }
    .card-case .label-count {
        line-height: normal;
    }
    .card-case .card-title {
        font-size: 32px;
        line-height: normal;
    }
}
.card-info .badge {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #408BD0;
    text-transform: uppercase;
    display: inline-block;
}
.card-info .card-title {
    font-weight: 800;
    font-size: 40px;
    line-height: 48px;
    color: #1A417F;
}
.card-info .card-description {
    font-weight: normal;
    font-size: 18px;
    line-height: 28px;
    color: #505F79;
}
@media (max-width: 576px) {
    .card-info .badge {
        font-weight: 500;
        font-size: 12px;
        line-height: 16px;
    }
    .card-info .card-title {
        font-weight: bold;
        font-size: 24px;
        line-height: 28px;
    }
    .card-info .card-description {
        font-weight: normal;
        font-size: 14px;
        line-height: 24px;
    }
}
.card-partner {
    display: flex;
    align-items: center;
}
.card-partner img {
    height: 64px;
    width: calc((100% - (16px * 4)) / 5);
    object-fit: contain;
    margin-left: 8px;
    margin-right: 8px;
}
.card-partner img:first-child {
    margin-left: 0;
}
.card-partner img:last-child {
    margin-right: 0;
}
@media (max-width: 576px) {
    .card-partner {
        flex-wrap: wrap;
        justify-content: center;
    }
    .card-partner img {
        width: 100%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        margin: 0;
    }
}

/* Content Detail */
.content,
.content li,
.content p,
.content span {
    font-size: 20px !important;
    line-height: 34px !important;
    color: #313f4e;
}
@media (max-width: 576px) {
    .content,
    .content li,
    .content p,
    .content span {
        font-size: 18px !important;
        line-height: 28px !important;
    }
}
.info .avatar {
    /* display: inline-flex; */
    align-items: center;
    justify-content: center;
    position: relative;
    width: 24px;
    height: 24px;
    border: 1px solid #ffffff;
    border-radius: 24px;
    background-color: #8b97c9;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1;
    vertical-align: middle;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    width: 24px;
    height: 24px;
    margin-right: 16px;
}
@media (min-width: 1024px) {
    .info .avatar {
        width: 32px;
        height: 32px;
    }
}
.info .avatar img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.info .author {
    font-size: 14px;
    line-height: 20px;
    display: inline-block;
    color: #62707f;
}
.info .category {
    font-size: 14px;
    line-height: 24px;
    display: inline-block;
    margin-bottom: 12px;
    color: #408BD0;
    font-weight: 600;
    text-transform: uppercase;
}
.info .title {
    font-weight: bold;
    font-size: 42px;
    line-height: 50px;
    color: #172B4D;
}

/* Template Home */
.banner {
    position: relative;
    z-index: 1;
}
.bg-gradient {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}
.bg-gradient:before {
    content: '';
    position: absolute;
    background: linear-gradient(149.94deg, #7543E1 -1.76%, #007093 121.94%);
    filter: blur(200px);
    width: 200px;
    height: 200px;
    right: 300px;
    top: 100px;
}
.bg-gradient:after {
    content: '';
    position: absolute;
    background: linear-gradient(153.7deg, #AED8FF -4.26%, #009393 96.23%);
    filter: blur(150px);
    width: 250px;
    height: 250px;
    right: 48px;
    top: 0;
}
.banner .title {
    font-weight: 800;
    font-size: 64px;
    line-height: 72px;
    color: #172B4D;
}
.banner .description {
    font-size: 18px;
    line-height: 28px;
    font-weight: normal;
}
@media (max-width: 768px) {
    .banner .title,
    .banner .description {
        text-align: center;
    }
    .banner .btn {
        display: block;
        margin: auto;
    }
}
@media (max-width: 576px) {
    .banner .title {
        font-weight: 800;
        font-size: 40px;
        line-height: 44px;
        text-align: center;
    }
    .banner .description {
        font-weight: normal;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
    }
}
.mySwiper .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.mySwiper .swiper-slide .d-flex {
    width: 100%;
}
.mySwiper .swiper-slide .d-flex .width-2 {
    width: 50%;
}
@media (max-width: 1023px) {
    .mySwiper .swiper-slide .generate-width {
        flex-direction: column;
    }
    .mySwiper .swiper-slide .d-flex .width-2 {
        width: 100%;
    }
}
.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next {
    background: #FFFFFF;
    border-radius: 32px;
    width: 48px;
    height: 48px;
}
.mySwiper .swiper-button-next:after,
.mySwiper .swiper-button-prev:after {
    font-size: 20px;
    width: 8px;
}
.mySwiper .swiper-pagination {
    position: relative;
    bottom: 0;
    margin-top: 64px;
}
@media (max-width: 1023px) {
    .mySwiper .swiper-pagination {
        margin-top: 32px;
    }
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    background: #FFFFFF;
    box-shadow: 0px 16px 40px rgba(38, 95, 186, 0.2);
    border-radius: 16px;
    /* margin: 5% auto; */
    width: 80%;
    max-width: 1080px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 95%;
}
.modal-content .quotes {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    background: #1A417F;
    padding: 100px 100px 76px;
    max-width: 45%;
    text-align: center;
    overflow: auto;
}
.modal-content .quotes .icon {
    display: block;
    margin: auto;
}
.modal-content .quotes p {
    margin: 48px 0 32px;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
}
.modal-content .quotes .profile img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 100%;
}
.modal-content .quotes .profile h4 {
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
}
.modal-content .quotes .profile h5 {
    font-weight: normal;
    font-size: 14px;
    line-height: 16px;
    color: #DDE7F8;
}
.modal-content .form {
    padding: 80px 84px 64px;
    width: 55%;
    position: relative;
    overflow: auto;
}
.modal-content .form .form-title {
    font-weight: 800;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 24px;
}
.modal-content .close {
    width: 32px;
    height: 32px;
    object-fit: contain;
    position: absolute;
    top: 22px;
    right: 42px;
    cursor: pointer;
}
@media (max-width: 1024px) {
    .modal-content .form {
        padding: 80px 64px 64px;
    }
    .modal-content .quotes {
        padding: 100px 72px 76px;
    }
}
@media (max-width: 768px) {
    .modal-content {
        width: 90%;
    }
    .modal-content .form {
        padding: 80px 32px 64px;
    }
    .modal-content .quotes {
        padding: 100px 36px 76px;
    }
    .modal-content .close {
        right: 32px;
    }
}
@media (max-width: 576px) {
    .modal-content {
        display: block;
        width: 100%;
        border-radius: 0;
        margin: 0;
        height: 100%;
    }
    .modal-content .close {
        right: 16px;
    }
    .modal-content .quotes {
        display: none;
    }
    .modal-content .form {
        width: 100%;
        padding: 80px 16px 28px;
    }
    .modal-content .form .form-title {
        font-size: 24px;
        line-height: 28px;
        text-align: center;
    }
}

/* Form */
.form-group {
    margin-bottom: 24px;
}
.form-group label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.05px;
    color: #1A417F;
}
.form-control {
    background: #FFFFFF;
    border: 1px solid #1A417F;
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.05px;
    width: 100%;
}
.form-control::placeholder {
    color: rgba(80, 95, 121, 0.5);
}
label.checkbox input {
    border: 1px solid #1A417F;
    border-radius: 2px;
    margin: 0 8px 0 0;
}
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #CEE1F3;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "EN";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: #EB5757;
    -webkit-transition: .4s;
    transition: .4s;
    font-size: 10px;
    line-height: 16px;
    color: white;
    padding: 2px 0;
    text-align: center;
}
.switch input:checked + .slider::before {
    content: "ID";
}
.switch input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}
.slider.round {
    border-radius: 24px;
}
.slider.round:before {
    border-radius: 50%;
}
.wpml-ls-legacy-list-horizontal {
    display: none;
}