* {
    box-sizing: border-box;
    font-family: "PT Serif Caption", serif;
    scroll-behavior: smooth;
}

.pt-serif-caption-regular {
    font-family: "PT Serif Caption", serif;
    font-weight: 400;
    font-style: normal;
}

.pt-serif-caption-regular-italic {
    font-family: "PT Serif Caption", serif;
    font-weight: 400;
    font-style: italic;
}

.nav-section {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    transition: background-color ease 0.5s, box-shadow ease 0.5s;
    background-color: rgba(255, 255, 255, 0);
}

.nav-section.menu-opened {
    background-color: #FFF !important;
}

.nav-section.mobile-menu-opened {
    background-color: #FFF !important;
}

.nav-section.scrolled {
    background-color: rgba(255, 255, 255, 0.65);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nav--area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0px !important;
    width: 100%;
}

.nav-logo-area {
    position: relative;
}

.nav-logo-area .nav--logo {
    width: 115px;
}

.nav-header-link-area .nav-header-link-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 0;
}

.nav-header-link-area .nav-header-link-list li .nav-header-link.font-assistant {
    font-family: "Assistant", sans-serif !important;
}

.nav-header-link-area .nav-header-link-list li .nav-header-link {
    font-size: 18px;
    color: #000;
    text-decoration: none;
    transition: ease 0.3s;
    font-weight: 600;

}

.nav-header-link-area .nav-header-link-list li {
    list-style: none;
}

.nav-header-link-area .nav-header-link-list li .nav-header-link:hover {
    color: #58C3FB;
}

.nav-header-link-sub {
    position: relative;
}


.nav-header-link.has-underline {
    font-weight: 500 !important;
}

.nav-header-link.has-sub-menu::after {
    content: "\f282";
    display: inline-block;
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    font-weight: 600 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 16px;
    vertical-align: -.200em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: 10px;
}

.nav-header-link.active.has-sub-menu::after {
    content: "\f286" !important;
}

.nav-header-link.has-underline::after {
    content: '';
    display: block;
    background-color: #000;
    width: 100%;
    height: 1px;
    margin-top: 0px;
    padding: 0 !important;
    transition: ease 0.3s;
}

.nav-header-link.has-underline:hover::after {
    background-color: #58C3FB !important;
}

.nav-header-link.is-button {
    border: 1px solid #000;
    padding: 10px 30px;
    text-wrap: nowrap;
    border-radius: 27px;
    font-size: 17px !important;
    transition: ease 0.3s, box-shadow ease 0.3s;
}

.nav-header-link.is-button.type1 {
    background-color: #FFFFFF !important;
    color: #000 !important;
    box-shadow: 0px 3px 0px 0px #000;
    font-weight: 500 !important;
}

.nav-header-link.is-button.type2 {
    background-color: #58C3FB !important;
    color: #000 !important;
    box-shadow: 4px 4px 0px 0px #000;
}

.nav-header-link.active {
    color: #58C3FB !important;
}

.nav-header-link.is-button.type1:hover {
    background-color: #58C3FB !important;
    box-shadow: none;
}

.nav-header-link.is-button.type1.active {
    background-color: #58C3FB !important;
}

.nav-header-link.is-button.type2:hover {
    background-color: #FFFF !important;
    box-shadow: none;
}

.nav-header-sub-menu.solutions {
    width: 100%;
    height: 100%;
    background-color: #FFF;
    position: fixed;
    top: 85px;
    left: 0;
    z-index: 9999;
    padding-top: 60px;
    padding-bottom: 150px;
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
    transition: visibility 0.5s ease, opacity 0.5s ease;
}

.nav-header-sub-menu.pricing,
.nav-header-sub-menu.signup,
.nav-header-sub-menu.signin {
    width: 100%;
    height: max-content;
    background-color: #FFF;
    position: fixed;
    top: 85px;
    left: 0;
    z-index: 9999;
    padding-top: 80px;
    padding-bottom: 80px;
    box-shadow: 0px 5px 6px #00000029;
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
    transition: visibility 0.5s ease, opacity 0.5s ease;
}

.nav-header-sub-menu.solutions.active,
.nav-header-sub-menu.pricing.active,
.nav-header-sub-menu.signup.active,
.nav-header-sub-menu.signin.active {
    visibility: visible;
    opacity: 1;
}

.sqill-price-menu-article {
    background-color: #FAFAFA;
    border-radius: 10px;
    padding: 40px 30px;
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: ease 0.5s;
}

.sqill-price-menu-article::after {
    content: '';
    position: absolute;
    right: 0;
    top: 35%;
    flex-shrink: 0;
    transform-origin: center;
    transform: scale(0);
    transition: transform 0.8s ease-in-out, visibility 0.8s ease-in-out;
    border-radius: 50%;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.sqill-price-menu-article.green::after {
    background-color: #58C3FB;
}

.sqill-price-menu-article.purple::after {
    background-color: #8A62F6;
}

.sqill-price-menu-article.blue::after {
    background-color: #58C3FB;
}

.sqill-price-menu-article.scaled::after {
    transform: scale(4);
    visibility: visible;
}

.sqill-price-menu-article.scaled {
    transform: translateY(-5px);
}

.sqill-price-menu-article img {
    width: 150px;
    object-fit: contain;
    margin-bottom: 40px;
    transition: ease 0.8s;
}

.sqill-price-menu-article.scaled img {
    filter: brightness(1) invert(1) grayscale(1);
    /* mix-blend-mode: lighten; */
}

.sqill-price-menu-article h6 {
    color: #000;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 15px;
    text-align: center;
    transition: ease 0.8s;
}

.sqill-price-menu-article.scaled h6 {
    color: #FFF !important;
}

.sqill-price-menu-article p {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 40px;
    text-align: center;
    font-family: "Assistant", sans-serif !important;
    line-height: 1.8em;
    transition: ease 0.8s;
}

.sqill-price-menu-article.scaled p {
    color: #FFF !important;
}

.sqill-price-menu-article .sqill-button {
    color: #FFF !important;
}

.sqill-price-menu-article .sqill-button:hover {
    color: #000 !important;
}

.solution-head {
    color: #000;
    font-size: 25px;
    font-weight: 500;
}

.custom-col-border {
    border-right: 1px solid rgba(0, 0, 0, 0.26);
}

.solution-nav-link {
    width: 100% !important;
    background-color: #FAFAFA !important;
    border: 1px solid #FAFAFA !important;
    transition: ease-in 0.3s;
    border-radius: 10px !important;
    position: relative;
    display: block;
    padding: 20px 24px !important;
    text-align: left;
    outline: none;
}

.solution-nav-link:focus,
.solution-nav-link:hover {
    outline: none;
}

.solution-nav-link img {
    width: 150px !important;
    object-fit: contain;
    transition: ease-in 0.3s;
}

.solution-nav-item {
    margin-top: 24px;
}

.solution-nav-link h6 {
    color: #000 !important;
    margin-top: 20px;
    font-size: 20px !important;
    font-weight: 500 !important;
    transition: ease-in 0.3s;
}

.solution-nav-link.active {
    background-color: #58C3FB !important;
    box-shadow: 0px 0px 4px #88888857;
    border: 1px solid #58C3FB;
}

.solution-nav-link.active img {
    filter: brightness(1) invert(1) grayscale(1);
    mix-blend-mode: lighten;
}

.solution-nav-link.active h6,
.solution-nav-link.active p {
    color: #FFF !important;
}

.solution-nav-link p {
    color: #000 !important;
    margin-top: 5px;
    font-size: 16px !important;
    margin-bottom: 0;
    font-weight: 500 !important;
    font-family: "Assistant", sans-serif !important;
    line-height: 1.8em !important;
    transition: ease-in 0.3s;
}

.solution-tab-article {
    position: relative;
    overflow: hidden;
    padding: 70px 36px;
    border-radius: 20px;
}

.solution-tab-article.green {
    background-color: #E1FFFF;
}

.solution-tab-article.purple {
    background-color: #E7ECFF;
}

.solution-tab-article.blue {
    background-color: #E5F7FE;
}


.solution-tab-article h5 {
    font-size: 25px;
    font-weight: 500;
    color: #000;
    z-index: 1;
    margin-bottom: 24px;
}

.solution-tab-article p {
    font-size: 18px;
    font-weight: 400;
    color: #000;
    line-height: 1.8rem;
    margin-bottom: 40px;
    width: 70%;
    z-index: 1;
    font-family: "Assistant", sans-serif !important;
}

.solution-tab-article img {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 35%;
    max-height: 70%;
    z-index: 0;
}

.sqill-button {
    text-decoration: none;
    font-weight: 500;
    border: 1px solid #000;
    padding: 12px 30px;
    text-wrap: nowrap;
    font-size: 17px !important;
    transition: ease 0.3s, box-shadow ease 0.3s;
    z-index: 1;
    color: #000 !important;
    box-shadow: 4px 4px 0px 0px #000;
}

.sqill-button.type1 {
    background-color: #58C3FB !important;
    color: #000 !important;
    box-shadow: 4px 4px 0px 0px #000;
}

.sqill-button.type1:hover {
    background-color: #FFF !important;
    box-shadow: none;
}

.sqill-button.green {
    background-color: #58C3FB !important;
}

.sqill-button.purple {
    background-color: #8A62F6 !important;
}

.sqill-button.blue {
    background-color: #58C3FB !important;
}

.sqill-button.green:hover,
.sqill-button.purple:hover,
.sqill-button.blue:hover {
    background-color: #FFF !important;
    box-shadow: none;
}

.solution-content-tab {
    position: relative;
}

.solution-content-tab::before {
    content: '';
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #FBF6BF;
    position: absolute;
    top: -30%;
    left: 20%;
}

.solution-content-tab::after {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #A5D99F;
    position: absolute;
    bottom: -20%;
    right: -10%;
}

.footer-section {
    background-color: #F2F9FD;
    padding: 60px 0 0 0;
    position: relative;
}

.footer-section * {
    font-family: "Assistant", sans-serif !important;
}

.footer-para {
    color: #000;
    font-size: 14px;
    text-align: left;
    letter-spacing: 0px;
    font-weight: 500;
    max-width: 80%;
}

.footer-link-section {
    padding: 10px 0 30px;
}

.footer-link-section .footer-head {
    font-size: 14px;
    font-weight: 600 !important;
    color: #000 !important;
    font-family: "PT Serif Caption", serif !important;
    margin-bottom: 0;
}

.footer-link-section .footer-link-area {
    padding-left: 0;
}

.footer-link-section .footer-link-area li {
    list-style: none;
    padding-top: 12px;
}

.footer-link-section .footer-link-area li .footer-link {
    color: #000 !important;
    font-size: 14px;
    text-decoration: none;
    transition: 0.3s ease;
    font-weight: 600;
}

.footer-link-section .footer-link-area li span {
    color: #000 !important;
    font-size: 14px;
    font-weight: 600;
}

.footer-link-section .footer-link-area li .footer-link:hover {
    color: #58C3FB !important;
}

.footer-bottom-area {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 30px;
}

.footer-bottom-area .footer-social-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-social-area a {
    text-decoration: none;
    position: relative;
}

.sub-footer {
    background-color: transparent;
    padding: 15px 12px;
    border-top: 1px solid #DDD;
    color: #000;
    font-weight: 600 !important;
    font-size: 14px;
}

.sub-footer i {
    font-size: 12px;
}

.sub-footer a {
    text-decoration: none;
    font-size: 14px;
    transition: ease 0.3s;
    color: #000;
}

.sub-footer a:hover {
    color: #58C3FB !important;
}

.scrollToTopBtn {
    background-color: #58C3FB;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    line-height: 48px;
    width: 48px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
    opacity: 0;
    border-radius: 10px;
    transform: translateY(100px);
    transition: all .5s ease
}

.scrollToTopBtn:hover {
    background-color: #000;
    color: #58C3FB;
}

.scrollToTopBtn:focus {
    outline: 0;
}

.showBtn {
    opacity: 1;
    transform: translateY(0)
}

.text-left {
    text-align: left !important;
}

.nav-toggle-btn {
    background-color: transparent !important;
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
}

.nav-toggle-btn:focus {
    outline: none;
    border: none;
}

.nav-toggle-btn i {
    font-size: 40px;
    line-height: 0;
}

.nav-mobile-menu {
    background-color: #FFF;
    border-radius: 0px;
    padding: 30px 20px 20px 20px;
    padding-top: 30px !important;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 62px;
    left: 0;
    z-index: 9999;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s ease, opacity 0.5s ease;
}

.nav-mobile-menu.active {
    visibility: visible;
    opacity: 1;
}

.nav-mobile-menu-area {
    padding: 0 0 150px 0;
}

.nav-mobile-menu-list {
    background-color: #f2faff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    list-style: none;
    border: 1px solid #58C3FB;
}

.nav-mobile-menu-link {
    font-size: 18px !important;
    display: flex;
    width: 100%;
    color: #000;
    text-decoration: none;
    transition: ease 0.3s;
    font-weight: 600;
    font-family: "Assistant", sans-serif !important;
}

.nav-mobile-menu-link.has-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-mobile-menu-link.has-menu.active {
    color: #58C3FB !important;
}

.nav-mobile-menu-link.has-menu::after {
    content: "\f282";
    display: inline-block;
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    font-weight: 600 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 16px;
    vertical-align: -.200em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: 10px;
}

.nav-mobile-menu-link.active.has-menu::after {
    content: "\f286" !important;
}

.nav-mobile-menu-link.active,
.nav-mobile-menu-link:hover {
    color: #58C3FB !important;
}

.nav-mobile-menu-link.is-button {
    border: 1px solid #000;
    padding: 12px 30px;
    text-wrap: nowrap;
}

.nav-mobile-menu-link.btn-type-1 {
    background-color: #FFF !important;
    box-shadow: 4px 4px 0px 0px #000;
}

.nav-mobile-menu-link.btn-type-1:hover {
    background-color: #58C3FB !important;
    box-shadow: none;
    color: #000 !important;
}

.nav-mobile-menu-link.btn-type-2 {
    background-color: #58C3FB !important;
    box-shadow: 4px 4px 0px 0px #000;
}

.nav-mobile-menu-link.btn-type-2:hover {
    background-color: #FFF !important;
    color: #000 !important;
    box-shadow: none;
}

.nav-mobile-menu-acc-btn-area {
    width: 100%;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.05);
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-mobile-menu-acc-btn-area ul {
    padding: 0;
}

.mobile-sub-menu-article {
    position: relative;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid;
}

.nav-mobile-menu-list.has-bg {
    background-color: #58C3FB !important;
}

.nav-mobile-menu-list.has-bg .nav-mobile-menu-link.has-menu.active {
    color: #FFF !important;
}

.nav-mobile-menu-list.has-bg .mobile-sub-menu-article {
    background-color: #FFF !important;
    border: none !important;
}

.nav-mobile-menu-list.has-bg .nav-mobile-menu-link:hover {
    color: #FFF !important;
}

.mobile-sub-menu-section {
    margin-top: 0px;
    max-height: 0;
    overflow: hidden;
    transition: margin-top ease 0.5s, max-height ease 0.5s;
}

.mobile-sub-menu-section.active {
    margin-top: 20px !important;
    max-height: 350px !important;
}

.mobile-sub-menu-article.green {
    background-color: #E1FFFF !important;
    border-color: #58C3FB !important;
}

.mobile-sub-menu-article.purple {
    background-color: #E7ECFF !important;
    border-color: #8A62F6 !important;
}

.mobile-sub-menu-article.blue {
    background-color: #E5F7FE !important;
    border-color: #58C3FB !important;
}

.sub-menu-nav-link {
    display: flex;
    border-radius: 10px;
    padding: 10px 15px;
    width: 100%;
    text-decoration: none;
    color: #000;
    font-size: 18px;
    font-family: "Assistant", sans-serif !important;
    transition: ease 0.5s;
    align-items: center;
    background-color: #e7f6ff;
    font-weight: 600;
    border: 2px solid #FFF;
}

.sub-menu-nav-link:hover {
    color: #58C3FB !important;
    background-color: #FFF !important;
}

.sub-menu-nav-link i {
    font-size: 18px;
    vertical-align: middle;
}

.mobile-sub-menu-article .goto-link-button {
    font-size: 14px !important;
}

.mobile-sub-menu-article .goto-link-button::after {
    font-size: 15px !important;
}

.mobile-sub-menu-article.green .goto-link-button,
.mobile-sub-menu-article.green .goto-link-button::after {
    color: #58C3FB !important;
}

.mobile-sub-menu-article.purple .goto-link-button,
.mobile-sub-menu-article.purple .goto-link-button::after {
    color: #8A62F6 !important;
}

.mobile-sub-menu-article.blue .goto-link-button,
.mobile-sub-menu-article.blue .goto-link-button::after {
    color: #58C3FB !important;
}

.mobile-sub-menu-article img {
    width: 100px;
    object-fit: contain;
    margin-bottom: 20px;
}

.mobile-sub-menu-article h6 {
    font-size: 15px;
    color: #000;
    font-weight: 500;
    height: 40px;
    overflow: hidden;
}

.mobile-sub-menu-article p {
    color: #000;
    font-size: 14px;
    line-height: 1.6em;
    font-family: "Assistant", sans-serif !important;
    height: 45px;
    overflow: hidden;
}

.loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: ease 0.5s;
}

.loader {
    width: 60px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(farthest-side, #58C3FB 94%, #0000) top/10px 10px no-repeat,
        conic-gradient(#0000 30%, #58C3FB);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 0);
    animation: spin 1s infinite linear;
}

@keyframes spin {
    100% {
        transform: rotate(1turn)
    }
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

.form-error-msg {
    color: red;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.text-green {
    color: #58C3FB !important;
}

::selection {
    background: #58C3FB;
    color: #fff;
}

::-webkit-scrollbar {
    background-color: #f5f5f5;
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background-color: #58C3FB;
    border-radius: 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.nav-header-sub-menu.solutions::-webkit-scrollbar-thumb,
.nav-mobile-menu::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
}

.sqillup-mobile-app-link-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sqillup-mobile-app-link-area .sqillup-mobile-app-link {
    text-decoration: none;
}

.sqillup-mobile-app-link-area .sqillup-mobile-app-link img {
    width: 150px;
    transition: ease 0.3s;
}

.sqillup-mobile-app-link-area .sqillup-mobile-app-link:hover img {
    filter: opacity(0.8);
}

/* /////////////////////home */
.home--hero-section {}

.home--hero-area {
    position: relative;
    background-color: #D8F1FD !important;
}

.home--hero-area .home--hero-img {
    max-width: 95%;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* padding-top: 300px; */
}

.hero-area-title-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.home-author-right-area {
    position: relative;
}

.home-author-right-area::before {
    content: '';
    display: block;
    position: absolute;
    width: 34px;
    height: 34px;
    background-color: #A8DAF4;
    flex-shrink: 0;
    border-radius: 50%;
    bottom: 15%;
    left: 0%;
    z-index: 0;
}

.home-author-right-area::after {
    content: '';
    display: block;
    position: absolute;
    top: -10%;
    right: -7%;
    width: 46px;
    height: 46px;
    background-color: #A5D99F;
    flex-shrink: 0;
    border-radius: 50%;
    z-index: 0;
}

.hero-area-title {
    /* font-size: 50px; */
    font-size: clamp(22px, 2.5vw, 48px);
    margin-bottom: 15px;
    text-align: center;
    font-weight: 500;
}

.hero-area--sub-title {
    /* font-size: 30px; */
    text-align: center;
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 500;
    line-height: 1.7em;
}

.home-decorate-img-sun {
    position: absolute;
    top: 20%;
    left: 10%;
    z-index: 1;
    width: clamp(50px, 8vw, 144px);
}

.home-decorate-img-rocket {
    position: absolute;
    top: 10%;
    left: 18%;
    z-index: 1;
    width: clamp(100px, 12vw, 160px);
}

.home-decorate-img-parachute {
    position: absolute;
    top: 12%;
    left: 35%;
    z-index: 1;
    width: clamp(80px, 12vw, 130px);
}

.home-decorate-img-bird {
    position: absolute;
    top: 30%;
    right: 30%;
    z-index: 1;
    width: clamp(60px, 12vw, 100px);
}

.home-decorate-img-clouds {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    height: clamp(90px, 15vw, 134px);
}


.home-decorate-img-cloud-1 {
    position: absolute;
    top: 10%;
    left: 20%;
    z-index: 1;
}

.home-decorate-img-cloud-2 {
    position: absolute;
    top: 10%;
    right: 20%;
    z-index: 1;
}

.home-decorate-img-think {
    position: absolute;
    top: 25%;
    right: 15%;
    z-index: 1;
    width: clamp(40px, 6vw, 120px);
}

.home-decorate-img-tube {
    position: absolute;
    bottom: 20%;
    left: 32%;
    z-index: 1;
    width: clamp(40px, 6vw, 115px);
}

.section-padding {
    padding: 100px 0;
}

.home-solution-section {
    position: relative;
}

.home-solution-head {
    color: #000;
    text-align: center;
    font-size: clamp(20px, 5vw, 33px);
    line-height: normal;
    line-height: 1.6em;
}

.home-solution-card-area {
    margin-top: 120px;
}

.home-solution-card {
    border-radius: 12px;
    position: relative;
    padding: 0 35px 35px 35px;
    transition: ease 0.5s;
}

.home-solution-card:hover {
    transform: translateY(-5px);
}

.home-solution-card.green {
    background-color: #E1FFFF !important;
}

.home-solution-card.green .home-solution-card-top-icon {
    background-color: #58C3FB !important;
}

.home-solution-card.green .home-solution-btn {
    background-color: #58C3FB !important;
}

.home-solution-card.purple {
    background-color: #E7ECFF !important;
}

.home-solution-card.purple .home-solution-card-top-icon {
    background-color: #BCCCFF !important;
}

.home-solution-card.purple .home-solution-btn {
    background-color: #BCCCFF !important;
}

.home-solution-card.blue {
    background-color: #E5F7FE !important;
}

.home-solution-card.blue .home-solution-card-top-icon {
    background-color: #A8DAF4 !important;
}

.home-solution-card.blue .home-solution-btn {
    background-color: #A8DAF4 !important;
}

.home-solution-card-top-icon-area {
    width: 100%;
    display: flex;
    align-self: center;
    justify-content: center;
    top: -50px;
    position: relative;
}

.home-solution-card-top-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.home-solution-card-top-icon img {
    width: 50px;
    object-fit: contain;
}

.home-solution-card-content-area {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: -15px;
}

.home-solution-card-content-area h3 {
    font-size: 23px;
    font-weight: 500;
    color: #000;
    margin-bottom: 0;
    text-align: center;
}

.home-solution-card-content-area p {
    text-align: center;
    font-size: 18px;
    color: #000;
    margin-top: 20px;
    line-height: 1.7em;
    font-family: "Assistant", sans-serif !important;
    margin-bottom: 0;
    height: 90px;
    overflow: hidden;
}

.home-solution-btn {
    margin-top: 30px;
    outline: none;
    border: 1px solid #000;
    color: #000;
    font-size: 18px;
    padding: 12px 20px;
    transition: filter ease 0.3s;
}

.home-solution-btn:focus {
    outline: none;
}

.home-solution-btn:hover {
    outline: none;
    filter: brightness(0.95);
}

.solution-secton-oval1 {
    position: absolute;
    left: 10%;
    bottom: 15%;
    opacity: 0.8;
}

.solution-secton-oval2 {
    position: absolute;
    right: 15%;
    top: 20%;
}

.home-features-section {
    position: relative;
    background-color: #FCFCFC;
}

.home-features-img-area {
    position: relative;
}

.home-features-img-area::before {
    content: '';
    display: block;
    border-radius: 50%;
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background-color: #B6E9EA;
    position: absolute;
    left: -5%;
    bottom: 35%;
    z-index: 1;
}

.home-features-img-area::after {
    content: '';
    display: block;
    border-radius: 50%;
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    background-color: #45A4D0;
    position: absolute;
    right: 15%;
    top: 12%;
}

.home-features-img-area img {
    max-width: 90%;
    object-fit: contain;
}

.home-feature-head {
    color: #000;
    font-size: clamp(20px, 5vw, 33px);
    font-weight: 500;
    line-height: 1.7em;
}

.home-feature-content-area {
    margin-top: 50px;
}

.home-feature-content-dropdown {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.home-feature-icon-area {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    position: relative;
    width: 40px;
    height: 40px;
}

.home-feature-icon-area::before {
    content: '';
    display: block;
    position: absolute;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.7;
    z-index: 0;
}

.home-feature-icon-area.first::before {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background-color: #FFAF7D;
    bottom: -0%;
    right: -20%;
}

.home-feature-icon-area.second::before {
    width: 23px;
    height: 23px;
    background-color: #BBE0F3;
    top: -10%;
    left: -20%;
}

.home-feature-icon-area.third::before {
    width: 21px;
    height: 21px;
    background-color: #A5D99F;
    top: 50%;
    transform: translateY(-50%);
    right: 0%;
}

.home-feature-icon-area.fourth::before {
    width: 26px;
    height: 26px;
    background-color: #fbf6bf;
    bottom: 0;
    left: -10%;
}

.home-feature-icon-area.first img {
    max-width: 85% !important;
}

.home-feature-icon-area img {
    object-fit: contain;
    z-index: 1;
}

.home-feature-collapse-toggle {
    font-size: 20px;
    color: #000;
    transition: ease 0.3s;
    background-color: transparent !important;
    padding: 25px 0;
    border-bottom: 1px solid #ddd !important;
    border-radius: 0 !important;
    gap: 70px !important;
    line-height: 1.6em !important;
}

.home-feature-collapse-toggle:focus {
    box-shadow: none !important;
}

/* .home-feature-collapse-toggle:hover {
    color: #58C3FB !important;
} */

.home-feature-collapse-area {
    font-size: 18px;
    color: #000;
    font-weight: 500;
    font-family: "Assistant", sans-serif !important;
    padding: 20px 0;
}

.home-feature-collapse-toggle.collapsed {
    background-color: transparent !important;
}

.home-feature-collapse-toggle:not(.collapsed) {
    border-bottom: 1px solid #000 !important;
    color: #58C3FB !important;
    box-shadow: none !important;
}

.home-feature-collapse-toggle:not(.collapsed)::after {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzYxRDRENSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS42NDYgNC42NDZhLjUuNSAwIDAgMSAuNzA4IDBMOCAxMC4yOTNsNS42NDYtNS42NDdhLjUuNSAwIDAgMSAuNzA4LjcwOGwtNiA2YS41LjUgMCAwIDEtLjcwOCAwbC02LTZhLjUuNSAwIDAgMSAwLS43MDh6Ii8+PC9zdmc+") !important;
}

.home-feature-collapse-toggle-sub {
    width: 100%;
    margin-bottom: 0;
}

.home-feature-content-dropdown .home-feature-collapse-toggle-area {
    width: 100%;
    border: none !important;
    border-radius: 0;
    padding: 0;
    background: transparent !important;
}

.home-feature-collapse-toggle img {
    transition: ease 0.3s;
}

.home-author-section {
    background: #135CB7 0% 0% no-repeat padding-box;
    position: relative;
}

.home-author-head {
    color: #FFF;
    font-size: 33px;
    font-weight: 500;
    margin-bottom: 0;
}

.home-author-para {
    color: #FFF;
    font-size: 18px;
    margin-top: 20px;
    font-family: "Assistant", sans-serif !important;
    font-weight: 500;
    line-height: 1.7em;
}

.home-author-card {
    background-color: #FFF;
    padding: 12px;
    z-index: 2;
    box-shadow: 0px 0px 6px #00000029;
}

.home-author-img-area {
    position: relative;
    overflow: hidden;
}

.home-author-img-area img {
    object-fit: cover;
    max-width: 100%;
    width: 100%;
    height: 200px;
    object-position: top center;
}

.home-author-name-area {
    margin-top: 12px;
    padding: 6px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #58C3FB;
}

.home-author-name-area h6 {
    margin-bottom: 0;
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

.home-author-name-area.blue {
    background-color: #C4E3F5;
}

.home-author-name-area.light-green {
    background-color: #B2D49F;
}

.home-author-name-area.green {
    background-color: #87C8BD;
}

.home-author-decor-oval1 {
    position: absolute;
    width: 34px;
    height: 34px;
    background-color: #A8DAF4;
    flex-shrink: 0;
    border-radius: 50%;
    top: 65%;
    left: 41%;
    z-index: 0;
}

.home-author-decor-oval2 {
    position: absolute;
    top: 22%;
    right: 10%;
    width: 46px;
    height: 46px;
    background-color: #A5D99F;
    flex-shrink: 0;
    border-radius: 50%;
    z-index: 0;
}

.home-sqill-section {
    position: relative;
}

.home-sqill-head {
    text-align: center;
    font-size: clamp(20px, 5vw, 33px);
    color: #000;
    font-weight: 500;
    margin-bottom: 90px;
}

.home-sqill-area {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    row-gap: 20px;
}

.home-sqill-img-area {
    position: relative;
}

.home-sqill-img-area.green .green-oval {
    width: 78px;
    height: 78px;
    background: #A5D99F 0% 0% no-repeat padding-box;
    opacity: 1;
    border-radius: 50%;
    flex-shrink: 0;
    position: absolute;
    bottom: 0;
    z-index: 0;
    right: -50%;
}

.home-sqill-img-area.green .yellow-oval {
    width: 78px;
    height: 78px;
    background: #F2A166 0% 0% no-repeat padding-box;
    opacity: 0.68;
    border-radius: 50%;
    flex-shrink: 0;
    position: absolute;
    top: 15px;
    z-index: 0;
    left: -35%;
}

.home-sqill-img-area.green .blue-oval {
    width: 78px;
    height: 78px;
    background: #64D4D5 0% 0% no-repeat padding-box;
    opacity: 0.71;
    border-radius: 50%;
    flex-shrink: 0;
    position: absolute;
    top: 15px;
    z-index: 0;
    right: -35%;
}


.home-sqill-img-area img {
    width: 80px;
    mix-blend-mode: darken;
}

.home-why-sqill-title {
    font-size: 25px;
    font-weight: 500;
    color: #000;
    margin-bottom: 0;
    text-align: center;
}

.home-why-sqill-para {
    color: #000;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7em;
    text-align: center;
    font-family: "Assistant", sans-serif !important;
}

.home-testimonial-section {
    position: relative;
    background-color: #F4FDFE;
    padding-bottom: 0;
}

.home-testimonial-slider-area {
    padding-bottom: 100px;
}

.home-testimonial-card {
    position: relative;
    background-color: #FFF;
    box-shadow: 0px 5px 15px #0000000b;
    padding: 30px;
    border-radius: 10px;
}

.home-test-review {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    font-family: "Assistant", sans-serif !important;
    padding-top: 20px;
    text-align: center;
}

.home-test-prof-img-area {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    margin: auto;
}

.home-test-prof-img-area img {
    object-fit: cover;
    object-position: top center;
    width: 80px;
    height: 80px;
}

.home-test-prof-about {
    padding-top: 20px;
    padding-bottom: 20px;
}

.home-test-prof-name {
    color: #000;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1.85px;
    text-align: center;
}

.home-test-prof-location {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
    margin-bottom: 0;
    text-align: center;
}

.home-testimonial-card .quote-mark {
    font-size: 200px;
    position: absolute;
    bottom: 15px;
    right: 40px;
    color: #00000021;
    margin-bottom: 0;
    line-height: 0;
    font-family: "DM Serif Text", serif !important;
}

.swiper-pagination {
    padding-bottom: 80px;
}

.swiper-pagination-area {
    padding: 0 0 60px 0;
}

.swiper-pagination-bullet {
    background-color: #000;
    opacity: 0.5;
    width: 12px;
    height: 12px;
    margin: 0 20px;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(1);
    background-color: transparent;
    border: 1px solid #000;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

.home-accreditation-section {
    background: rgba(252, 252, 252, 1) 0% 0% no-repeat padding-box;
}

.home-accreditation-area {
    /* position: relative;
    width: 100%; */
    /* display: flex;
    align-items: center;
    justify-content: center;
    gap: 70px;
    flex-wrap: wrap; */
}

/* .accreditations-slider .swiper-wrapper{
    justify-content: center !important;
} */

.home-accreditations-slide {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 10px;
}

.home-accreditation-img {
    object-fit: contain;
    height: 75px;
    max-width: 100%;
}

/* /////////////////about page */
.about-init-section {
    padding-top: 150px;
    background-color: #F2F9FD;
    padding-bottom: 0;
}

.signin-init-section {
    padding-top: 130px;
}

.about-sqill-head {
    font-size: clamp(20px, 2.8vw, 45px);
    font-weight: 500;
    color: #000;
}

.about-sqill-para {
    margin-top: 13px;
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1.7em;
    font-weight: 500;
    font-family: "Assistant", sans-serif !important;
    color: #000;
}

.about-init-image-area {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

.about-init-image-area .ab-img {
    flex-shrink: 0;
    position: relative;
    display: block;
    max-width: 75%;
    object-fit: contain;
}

.about-course-section {
    background-color: #FCFCFC;
}

.about-init-image-area .ab-dec-img {
    flex-shrink: 0;
    position: relative;
    display: block;
    max-width: 23%;
    object-fit: contain;
    align-self: flex-end;
    margin-bottom: -30px;
    margin-right: -20px;
}

.head-padding-top {
    padding-top: 80px;
}

.about-init-image-area div {
    position: relative;
}

.home-sqill-section.about {
    background-color: #F4FDFE;
}

.about-sqill-sub-section {
    position: relative;
}

.about-sqill-sub-section.with-bg {
    background-color: #fbfbfb;
}

.about-sqill-sub-image-area {
    position: relative;
}

.about-sqill-sub-image-area img {
    width: 380px;
    height: 380px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.about-sqill-sub-image-area {
    display: flex;
    justify-content: center;
}

.about-sqill-sub-image-area div {
    position: relative;
}

.about-sqill-sub-image-area div::before {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #A8DAF4;
    flex-shrink: 0;
    position: absolute;
    left: 0%;
    bottom: 0%;
}

.about-sqill-sub-content-area {
    padding: 20px 0;
}

.about-sqill-sub-head {
    font-size: clamp(20px, 5vw, 33px);
    color: #000;
    font-weight: 500;
    line-height: 1.6em;
}

.about-sqill-sub-para {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7em;
    color: #000;
    font-family: "Assistant", sans-serif !important;
}

.about-sqill-sub-list-head {
    margin-top: 20px;
    color: #000;
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 0;
}

.about-sqill-sub-list {
    margin-top: 22px;
    margin-bottom: 0;
    padding-left: 25px;
}

.about-sqill-sub-list li {
    margin-bottom: 10px;
    font-family: "Assistant", sans-serif !important;
    font-size: 18px;
    line-height: 1.7em;
    color: #000;
    font-weight: 500;
}

.about-sqill-sub-list li::marker {
    font-size: 25px;
    line-height: 0;
}

.about-sqill-sub-image-area2 {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.about-sqill-sub-image-area2 img {
    border-radius: 10px;
    flex-shrink: 0;
    position: relative;
    object-fit: cover;
    width: 80%;
    height: 100%;
}

.about-sqill-achieve-section {
    position: relative;
}

.about-sqill-achieve-para {
    font-size: 18px;
    font-family: "Assistant", sans-serif !important;
    color: #000;
    font-weight: 400;
    text-align: center;
    margin-top: 10px;
}

/* ////// */
.about-course-card-section {
    margin-top: 60px;
}

.about-course-card {
    position: relative;
    border-radius: 12px;
    box-shadow: 0px 3px 6px #00000024;
    padding: 10px;
    transition: ease-in-out 0.5s;
}

.course-image-area {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.course-image-area img {
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    transition: ease-in-out 0.5s;
    object-position: center;
}

.ab-course-content-area {
    padding-right: 10px;
}

.ab-course-title {
    color: #000;
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 20px;
}

.ab-course-para {
    color: #000;
    font-size: 18px;
    font-family: "Assistant", sans-serif !important;
    font-weight: 500;
    line-height: 1.6em;
    margin-bottom: 0;
}

.about-course-card:hover .course-image-area img {
    transform: scale(1.05);
}

/* ////// */

.get-in-touch-section {
    position: relative;
    background-color: #FCFCFC;

}

.get-in-touch-head {
    font-size: 45px;
    font-size: clamp(30px, 3vw, 43px);
    color: #000000;
    font-weight: 500;
    text-align: center;
}

.get-in-touch-para {
    text-align: center;
    color: #000000;
    font-size: 18px;
    line-height: 1.7em;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
    margin-top: 13px;
}

.get-in-touch-button-area {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.get-in-touch-button {
    background: #58C3FB 0% 0% no-repeat padding-box;
    border: 1px solid #000000;
    box-shadow: 4px 4px 0px #000;
    padding: 12px 20px;
    font-size: 18px;
    outline: none;
    transition: ease-in-out 0.5s;
    text-decoration: none;
    color: #000000 !important;
    border-radius: 50px;
}

.get-in-touch-button:focus {
    outline: none;
}

.get-in-touch-button:hover {
    box-shadow: 0px 0px 0px #000;
    transform: translateY(5px);
}

/* /////////contact page */
.contact-init-section {
    padding-top: 200px;
    background-color: #F2F9FD;
}

.contact-head {
    text-align: left;
    color: #000;
    font-size: 50px;
    font-size: clamp(20px, 2.8vw, 48px);
    font-weight: 500;
    margin-bottom: 0;
}

.contact-para {
    color: #000;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7em;
    font-family: "Assistant", sans-serif !important;
    margin-top: 20px;
}

.contact-img-area {
    position: relative;
    padding-top: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-img-area img {
    max-width: 70%;
}

.contact-form-question-group {
    margin-bottom: 40px;
}

.contact-form-question-group .contact-form-group {
    padding-left: 15px;
}

.contact-form-question {
    color: #000;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
}

.contact-form-select-input-area {
    position: relative;
    width: 100%;
}

.contact-form-select-input-area::after {
    content: "\f282";
    display: none;
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    font-weight: 600 !important;
    font-variant: normal;
    text-transform: none;
    color: #000;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.contact-form-label {
    color: #000;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.contact-form-input {
    background-color: #FCFCFC;
    border: 1px solid #58C3FB;
    border-radius: 6px;
    height: 48px;
    font-family: "Assistant", sans-serif !important;
    font-size: 16px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

.contact-form-select-input-area .nice-select {
    float: none !important;
    border: 1px solid #58C3FB !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    height: 48px !important;
    line-height: normal !important;
    display: flex;
    align-items: center;
}

.contact-form-select-input-area .nice-select .list {
    width: 100% !important;
    box-shadow: 0px 2px 15px #d3f0fea7;
    border-radius: 8px;
    border: 1px solid #d3f0fe;
    margin-top: 4px;
    max-height: 282px;
    overflow-y: auto;
}

.contact-form-select-input-area .nice-select .list .option:hover {
    background-color: #d3ecfa !important;
}

.contact-form-select-input-area .nice-select * {
    font-family: "Assistant", sans-serif !important;
}

.contact-form-select-input-area .nice-select .list::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent !important;
}

.contact-form-select-input-area .nice-select .list::-webkit-scrollbar-thumb {
    background-color: #d9eefa;
}

.contact-form-select-input-area .nice-select .list::-webkit-scrollbar-track {
    background-color: transparent;
}

select.contact-form-input option {
    font-size: 16px !important;
    font-family: "Assistant", sans-serif !important;
}

.contact-form-input:focus {
    border-color: #58C3FB !important;
    box-shadow: 0px 0px 0px 5px #58c2fb44 !important;
}

.contact-form-group {
    margin-bottom: 20px;
}

textarea.contact-form-input {
    height: 224px;
}

.contact-check-label {
    font-size: 18px;
    color: #000;
    font-weight: 500;
    font-family: "Assistant", sans-serif !important;
    margin-left: 17px;
    vertical-align: top;
}

.contact-check-label a {
    color: #000 !important;
    transition: ease 0.3s;
    font-family: "Assistant", sans-serif !important;
}

.contact-check-label a:hover {
    color: #58C3FB !important;
}

.contact-check-group {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}

.contact-check-input {
    width: 25px;
    height: 25px;
    border: 1px solid #58C3FB;
    border-radius: 5px;
}

.contact-check-input:checked {
    background-color: #58C3FB;
    border-color: #58C3FB;
}

.contact-check-input:focus {
    border-color: #58C3FB;
    box-shadow: 0px 0px 0px 5px #61d3d541 !important;
}

.contact-link-area {
    position: relative;
    background: #F5F5F5 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 6px #00000029;
    border-radius: 10px;
    padding: 30px 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: ease-in-out 0.5s;
}

.contact-link-area img {
    width: 48px;
    object-fit: contain;
}

.contact-link-area div h6 {
    letter-spacing: 0.54px;
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    margin-bottom: 3px;
}

.contact-link-area div a {
    font-size: 24px;
    color: #000;
    font-weight: 500;
    transition: ease 0.3s;
    text-decoration: none;
}

.contact-link-area div a:hover {
    color: #64D4D5 !important;
}

.m-t-28 {
    margin-top: 28px;
}

.contact-area {
    position: relative;
}

/* ///////////career page */
.career-init-image-area {
    position: relative;
}

.career-init-image-area img {
    width: 380px;
    height: 380px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.career-init-image-area {
    display: flex;
    justify-content: center;
}

.career-init-image-area div {
    position: relative;
}

.career-init-image-area div::before {
    content: '';
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #FBF6BF;
    flex-shrink: 0;
    position: absolute;
    left: -20%;
    bottom: 10%;
}

.career-init-image-area div::after {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #A5D99F;
    flex-shrink: 0;
    position: absolute;
    right: -15%;
    top: 10%;
}

.career-roles-section {
    background-color: #E9FEFF;
}

.carrer-role-area {
    position: relative;
    margin-top: 60px;
}

.carrer-role-card {
    background-color: #FFF;
    padding: 25px 20px;
    position: relative;
    box-shadow: 4px 4px 0px #58C3FB;
    transition: ease-in-out 0.5s;
    margin-bottom: 30px;
}

.carrer-role-card:hover {
    background-color: #58C3FB;
    box-shadow: 0px 0px 0px 2px #FFF;
}

.carrer-role-card:hover .carrer-role-department,
.carrer-role-card:hover .carrer-role-position,
.carrer-role-card:hover .carrer-role-location {
    color: #000;
}

.carrer-role-department {
    color: #000;
    font-size: 18px;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
    margin-bottom: 15px;
}

.carrer-role-position {
    color: #000;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0;
    text-decoration: none;
}

.carrer-role-location {
    color: #000;
    font-size: 18px;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
    margin-top: 15px;
    margin-bottom: 0;
    text-align: right;
}

.carrer-role-card a {
    text-decoration: none;
    cursor: pointer;
}

.carrer-role-area::before {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #A5D99F;
    position: absolute;
    top: -15%;
    left: -3%;
}

.carrer-role-area::after {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #C0E4F7;
    position: absolute;
    bottom: -10%;
    right: -4%;
}

.contact-form-file-area {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 10px;
}

.contact-form-input[type=file] {
    display: none;
}

.resume-upload-label {
    background-color: #FCFCFC;
    border: 1px solid #58C3FB;
    border-radius: 4px;
    height: 54px;
    font-size: 15px;
    display: flex;
    font-weight: 500;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    padding: 15px;
}

.resume-upload-label i {
    font-size: 25px;
    vertical-align: middle;
}

.contact-form-file-label {
    color: #000;
    font-weight: 400;
    font-size: 16px;
    font-family: "Assistant", sans-serif !important;
}

.career-job-form-area {
    position: relative;
}

.career-job-form-area::before {
    content: '';
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #FBF6BF;
    position: absolute;
    bottom: 10%;
    left: -20%;
}

.career-job-form-area::after {
    content: '';
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #A5D99F;
    position: absolute;
    top: 20%;
    right: -20%;
}

/* ////////////faq page */
.faq-init-section {
    padding-top: 150px;
    padding-bottom: 150px;
    background-color: #F2F9FD;
}

.search-input-area {
    position: relative;
    margin-top: 20px;
}

.form-search-input {
    background-color: #FCFCFC;
    border: 1px solid #58C3FB;
    border-radius: 0px;
    height: 54px;
    font-family: "Assistant", sans-serif !important;
    font-size: 18px;
    padding-left: 30px;
    padding-right: 30px;
}

.form-search-input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.form-search-input[type="search"]::-webkit-search-decoration,
.form-search-input[type="search"]::-webkit-search-results-button,
.form-search-input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.form-search-input::placeholder {
    color: #000000;
    opacity: 0.22;
}

.form-search-input:focus {
    border-color: #58C3FB !important;
    box-shadow: 0px 0px 0px 5px #58c2fb44 !important;
}

.search-input-area::after {
    content: "\f52a";
    display: inline-block;
    color: #58C3FB;
    font-size: 25px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.faq-nav-tab-content-section {
    position: relative;
    margin-top: 80px;
}

.faq-container {
    margin-top: -80px;
}

.faq-nav-tab-container {
    background-color: #FFFFFF;
    box-shadow: 3px 3px 13px #00000029;
    border-radius: 10px;
}

.faq-nav-tabs {
    justify-content: center !important;
    gap: 0 !important;
    border: none !important;
}

.faq-nav-link {
    display: flex;
    align-items: center;
    flex-direction: column;
    row-gap: 15px;
    text-align: center;
    font-size: 18px !important;
    color: #000 !important;
    font-weight: 500 !important;
    padding: 35px 40px 25px 40px !important;
    border-radius: 0 !important;
    border: none !important;
    width: 100% !important;
    outline: none;
}

.faq-nav-link:focus {
    outline: none;
}

.faq-nav-link img {
    height: 55px !important;
    object-fit: contain;
}

.faq-nav-link.active {
    border-bottom: #000 2px solid !important;
}

.faq-nav-tab-content {
    position: relative;
}

.faq-accordion-item {
    border-radius: 0 !important;
    border: none !important;
    margin-bottom: 25px;
}

.faq-accordion-button {
    border: none !important;
    color: #000 !important;
    background-color: #DBF3FF !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding: 30px 50px !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: space-between;
    gap: 60px;
    align-items: center !important;
}

.faq-accordion-button.collapsed {
    border-radius: 5px !important;
}

.faq-accordion-button:after {
    background: none !important;
    transform: none !important;
    height: auto !important;
    width: auto !important;
    display: inline-block;
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 0 !important;
    vertical-align: middle;
    color: #000 !important;
    font-size: 25px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.faq-accordion-button:not(.collapsed):after {
    content: "\f2e6" !important;
}

.faq-accordion-button.collapsed::after {
    content: "\f4fa" !important;
}

.faq-accordion-button:not(.collapsed) {
    border-radius: 5px 5px 0px 0px !important;
}

.faq-accordion-body {
    padding: 30px 50px !important;
    color: #000 !important;
    font-size: 16px !important;
    line-height: 1.7em;
    font-weight: 400 !important;
    font-family: "Assistant", sans-serif !important;
}

/* ///////privacy page */
.privacy-init-section {
    padding-top: 150px;
    padding-bottom: 0;
    background-color: #FFF8F6;
    background-image: url('../images/terms/term-bg.svg');
    background-repeat: no-repeat;
    background-position: right;
    background-blend-mode: multiply;
}

.privacy-link {
    position: relative;
    display: block;
    width: 100% !important;
    padding: 20px 30px;
    color: #000;
    text-decoration: none;
    font-size: 17px;
    line-height: 1.6em;
    font-weight: 500;
    background-color: #FFF;
    box-shadow: 0px 0px 4px #0000001A;
    transition: ease 0.3s;
}

.privacy-list-area {
    padding: 0 !important;
    width: 100%;
    position: sticky;
    top: 140px;
}

.privacy-list {
    list-style: none;
    margin-bottom: 20px;
    width: 100%;
}

.privacy-content-section {
    background-color: #FCFCFC;
}

.privacy-link:hover,
.privacy-link.active {
    color: #58C3FB !important;
}

.term-content {
    margin-bottom: 30px;
}

.term-content .term-content-head {
    color: #000;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 20px;
}

.term-content p {
    color: #000;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
    font-size: 16px;
    line-height: 1.7em !important;
}

.term-content ul {
    padding-left: 20px;
}

.term-content ul li {
    list-style: disc;
    color: #000;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
    line-height: 1.7em !important;
    font-size: 16px;
    margin-bottom: 20px;
}

.term-content ul li::marker {
    font-size: 20px;
}

.privacy-head-section {
    position: relative;
    padding-bottom: 100px;
}

.privacy-head-section::before {
    content: '';
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #C0E4F7;
    position: absolute;
    top: -5%;
    left: 7%;
}

.privacy-head-section::after {
    content: '';
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #A5D99F;
    position: absolute;
    bottom: 25%;
    right: 7%;
}

/* /////////////////blog page */
.blog-init-section {
    padding-top: 150px;
    background-color: #F2F9FD;
}

.blog-head-area {
    position: relative;
    overflow: hidden;
}

.blog-head-area:after {
    content: '';
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #FBF6BF;
    position: absolute;
    top: 5%;
    right: 20%;
}

.blog-head-img {
    padding-top: 20px;
    width: 100%;
    object-fit: contain;
}

.blog-tabs-section {
    background-color: #FCFCFC;
    position: relative;
    padding-top: 60px;
}

.blog-tabs-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    row-gap: 20px;
}

.blog-nav-item {
    padding: 0 40px;
}

.blog-nav-link {
    background-color: transparent !important;
    border-radius: 0px !important;
    padding: 15px 30px !important;
    font-size: 20px !important;
    color: #000 !important;
    outline: none !important;
}

.blog-nav-link:focus {
    outline: none !important;
}

.blog-nav-link.active {
    background-color: transparent !important;
    color: #58C3FB !important;
    border-bottom: 2px solid #58C3FB;
}

.tab-divide-line {
    height: 34px;
    display: block;
    width: 2px;
    background-color: #707070;
    border-radius: 2px;
}

.blog-tab-content-area {
    margin-top: 50px;
    position: relative;
}

.blog-tab-content .blog-article-card:first-child {
    border-top: 1px solid #707070 !important;
}

.blog-article-card {
    position: relative;
    padding: 40px 60px;
    border-bottom: 1px solid #707070;
}

.blog-article-card .blog-img-area {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.blog-article-card .blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.5s ease, transform ease-in-out 0.8s;
    transform: scale(1);
    filter: blur(10px);
}

.blog-article-card .blog-img.loaded {
    filter: none;
}

.blog-article-card:hover .blog-img {
    transform: scale(1.05);
}

.blog-article-card .blog-date-name {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    font-family: "Assistant", sans-serif !important;
    margin-bottom: 15px;
}

.blog-article-card .blog-title {
    color: #000;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 15px;
    line-height: 1.6em;
}

.blog-article-card .blog-content {
    color: #000;
    font-size: 16px;
    font-family: "Assistant", sans-serif !important;
    font-weight: 400;
    line-height: 1.8em;
    height: 80px;
    overflow: hidden;
}

.goto-link-button {
    text-decoration: none;
    color: #58C3FB !important;
    font-size: 18px;
    font-weight: 500;
}

.goto-link-button::after {
    content: "\f138";
    display: inline-block;
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    font-weight: 600 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.200em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #58C3FB;
    margin-left: 9px;
    font-size: 20px;
    transition: ease 0.3s;
}

.goto-link-button:hover::after {
    transform: translateX(4px);
}

.blog-pagination-area {
    padding-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-pagination .blog-page-item .blog-page-link {
    border: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    color: #000 !important;
    font-size: 20px !important;
    padding: 0 15px !important;
    font-weight: 500 !important;
}

.blog-pagination .blog-page-item.disabled>.blog-page-link,
.blog-page-link.disabled {
    color: #b1b1b1 !important;
    pointer-events: none !important;
}

.blog-pagination .blog-page-item .blog-page-link:focus {
    box-shadow: none !important;
}

.blog-pagination .blog-page-item.active .blog-page-link {
    color: #58C3FB !important;
}

.blog-pagination .blog-page-item .blog-page-link.prev i,
.blog-pagination .blog-page-item .blog-page-link.next i {
    font-weight: 600 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}

/* /////////////////blog detail page */
.blog-detail-init-section {
    padding-top: 150px;
    padding-bottom: 0;
    background-color: #F2F9FD;
}

.goto-back-button-area {
    margin-bottom: 20px;
}

.goto-back-button {
    text-decoration: none;
    color: #58C3FB !important;
    font-size: 16px;
    font-weight: 500;
}

.goto-back-button::before {
    content: "\f12f";
    display: inline-block;
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    font-weight: 600 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.200em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #58C3FB;
    margin-right: 9px;
    font-size: 20px;
    transition: ease 0.3s;
}

.goto-back-button:hover::before {
    transform: translateX(-4px);
}

.blog-detail-head-section {
    position: relative;
    padding-bottom: 100px;
}

.blog-det-date-name {
    color: #000;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
}

.blog-det-para {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
    line-height: 1.7em;
    margin-bottom: 20px;
}

.blog-det-img-area {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    width: 100%;
    height: 380px;
    margin: 20px 0 30px 0;
}

.blog-det-img-area img {
    width: 100%;
    object-position: center;
    height: 100%;
    object-fit: cover;
    filter: blur(10px);
    transition: filter 0.5s ease;
}

.blog-det-img-area img.loaded {
    filter: none;
}

.blog-share-container {
    position: relative;
    margin-top: 40px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.blog-share-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.blog-share-area h6 {
    color: #000;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
}

.blog-social-area {
    display: flex;
    align-items: center;
    gap: 20px;
}

.blog-social-area .blog-social-link {
    border-radius: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background-color: #000;
    position: relative;
    text-decoration: none;
    color: #FFF !important;
    transition: ease 0.3s;
}

.blog-social-area .blog-social-link:hover {
    background-color: #58C3FB !important;
    color: #000 !important;
}

.blog-social-area .blog-social-link i {
    font-size: 20px;
}

.blog-social-area .blog-social-link i.fa-facebook {
    font-size: 23px;
}

.next-article-btn-area {
    text-align: center;
    padding: 40px 0;
}

.blog-article-card.recomend {
    border: none !important;
    background-color: #FFF8F6;
}

/* /////////////career detail page */
.career-detail-init-section {
    padding-top: 150px;
    padding-bottom: 0;
    background-color: #fafafa;
    background-image: url('../images/terms/term-bg.svg');
    background-repeat: no-repeat;
    background-position: right;
    background-blend-mode: multiply;
}

.career-detail-head-section {
    position: relative;
    padding-bottom: 100px;
}

.career-detail-head-section::before {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #A5D99F;
    position: absolute;
    top: -5%;
    left: 45%;
}

.career-detail-head-section::after {
    content: '';
    display: block;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #C0E4F7;
    position: absolute;
    bottom: 25%;
    left: 30%;
}

.about-career-area {
    margin-top: 20px;
}

.about-career {
    margin-bottom: 10px;
}

.about-career-area h6,
.about-career-area span {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    font-family: "Assistant", sans-serif !important;
}

.career-detail-content-section {
    background-color: #FFF8F6;
    position: relative;
    padding: 40px;
}

.term-content {
    margin-bottom: 25px;
}

.career-detail-content-section h4 {
    color: #000;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 20px;
    margin-top: 30px;
}

.career-detail-content-section p {
    color: #000;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
    font-size: 16px;
    line-height: 1.7em !important;
    margin-bottom: 20px;
}

.career-detail-content-section ul {
    padding-left: 20px;
}

.career-detail-content-section ul li {
    list-style: disc;
    color: #000;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
    line-height: 1.7em !important;
    font-size: 16px;
    margin-bottom: 15px;
}

.career-detail-content-section ul li::marker {
    font-size: 18px;
}

.career-job-form-section {
    background-color: #fafafa;
}

.career-job-form-section.with-bg {
    background-color: #fafafa !important;
}

.file-clear-button {
    background-color: rgb(255, 255, 255);
    margin: 0;
    padding: 5px 10px;
    color: red;
    font-size: 15px;
    font-weight: 500;
    outline: none;
    border-radius: 5px;
    border: 1px solid red;
    transition: ease 0.3s;
}

.file-clear-button:hover {
    background-color: rgb(235, 5, 5) !important;
    color: #FFF !important;
}

.file-clear-button:focus,
.file-clear-button:hover {
    outline: none;
}

/* //////////////////////////////////////// */
.sqillup-number-area {
    padding-top: 60px;
}

.sqillup-number-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.number-icon-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-bottom: 30px;
}

.number-icon-area.blue {
    background-color: #CAE7F9;
}

.number-icon-area.pink {
    background-color: #FCD9CE;
}

.number-icon-area.green {
    background-color: #EAF5E2;
}

.number-icon-area.yellow {
    background-color: #FEF2C8;
}

.number-icon-area img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.sqillup-number-container .sqillup-num {
    font-size: 40px;
    color: #000;
    font-weight: 500;
    margin-bottom: 5px;
}

.sqillup-number-container .sqillup-num-title {
    color: #000;
    font-weight: 500;
    font-size: 18px;
}

.home-subject-section {
    position: relative;
}

.home-subject-card-section {
    padding-top: 60px;
    position: relative;
}

.home-subject-card {
    position: relative;
    border-radius: 0px;
    border: 1px solid #000;
    background-color: #FFF;
    overflow: hidden;
    transition: ease 0.5s;
}

.home-subject-card:hover {
    transform: translateY(-5px);
}

.home-subject-card.green .home-subject-card-header {
    background: linear-gradient(37deg, #BCDFA2 0%, #EBF8E1 15%) !important;
}


.home-subject-card.yellow .home-subject-card-header {
    background: linear-gradient(37deg, #fad961 0%, #fef2c8 15%) !important;
}

.home-subject-card.blue .home-subject-card-header {
    background: linear-gradient(37deg, #75C1F2 0%, #CAE7F9 15%) !important;
}


.home-subject-card.pink .home-subject-card-header {
    background: linear-gradient(37deg, #FDDACF 0%, #FFF5F2 15%) !important;
}


.home-subject-card.pink .home-subject-card-header {
    background: linear-gradient(37deg, #FDDACF 0%, #FFF5F2 15%) !important;
}

.home-subject-card-header {
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    height: 85px;
    padding: 0 40px;
    gap: 25px;
    transition: ease 0.5s;
}

.home-subject-card-header img {
    width: 40px;
    object-fit: contain;
    z-index: 1;
    transition: ease 0.5s;
    display: block;
}

.home-subject-card:hover .home-subject-card-header img {
    transform: scale(1.1) !important;
}

.home-subject-card-header .subject-card-title {
    font-size: 20px;
    color: #000;
    font-weight: 500;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    z-index: 1;
    margin-bottom: 0;
}

.home-subject-card-body {
    padding: 35px;
}

.home-subject-para-area {
    overflow: hidden;
    margin-bottom: 30px;
    height: 120px;
}

.home-subject-para {
    color: #000;
    font-size: 18px;
    line-height: 1.7em;
    font-family: "Assistant", sans-serif !important;
    margin-bottom: 0;
}

.home-subject-list-area {
    padding-left: 0;
}

.home-subject-list-area .home-subject-list {
    list-style: none;
    color: #000;
    font-size: 18px;
    font-family: "Assistant", sans-serif !important;
    margin-bottom: 13px;
}

.home-subject-list-area .home-subject-list::before {
    content: "\f26e";
    display: inline-block;
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    font-weight: 300 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 12px;
    flex-shrink: 0;
    color: #000;
    border-radius: 50%;
    text-align: center;
    width: 20px;
    height: 20px;
}

.home-subject-card.green .home-subject-list-area .home-subject-list::before {
    background-color: #58C3FB;
}

.home-subject-card.yellow .home-subject-list-area .home-subject-list::before {
    background-color: #FEF2C8;
}

.home-subject-card.blue .home-subject-list-area .home-subject-list::before {
    background-color: #A8DAF4;
}

.home-subject-card.pink .home-subject-list-area .home-subject-list::before {
    background-color: #FFF5F2;
}

.home-subject-list-area .home-subject-list:last-child {
    margin-bottom: 0;
}

.know-more-btn {
    text-decoration: none;
    transition: ease 0.3s;
    font-weight: 500;
    outline: none;
    color: #000 !important;
    border: 1px solid #000;
    padding: 10px 20px;
    text-wrap: nowrap;
    border-radius: 27px;
    font-size: 17px !important;
    transition: ease 0.3s, box-shadow ease 0.3s;
    display: block;
    width: max-content;
    box-shadow: 0px 3px 0px 0px #000;
}

.subject-btn-area {
    margin-top: 40px;
}

.home-subject-card.green .know-more-btn {
    background-color: #58C3FB;
}

.home-subject-card.yellow .know-more-btn {
    background-color: #FEF2C8;
}

.home-subject-card.blue .know-more-btn {
    background-color: #A8DAF4;
}

.home-subject-card.pink .know-more-btn {
    background-color: #FFF5F2;
}

.home-subject-card-head {
    padding-bottom: 20px;
}

.home-subject-card-head-icon-area {
    position: relative;
    display: inline-block;
    margin-bottom: 18px;
}

.home-subject-card-head-icon-area img {
    width: 40px;
    mix-blend-mode: multiply;
    display: block;
    z-index: 2;
    position: relative;
}

.home-subject-card-head-title {
    color: #000;
    font-weight: 500;
    margin-bottom: 0;
    font-size: 23px;
}

.home-subject-card-head-icon-area::after {
    content: '';
    width: 40px;
    height: 40px;
    display: block;
    position: absolute;
    bottom: 0;
    right: -20px;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.7;
    z-index: 1;
}

.home-subject-card.green .home-subject-card-head-icon-area::after {
    background-color: #C3EEEE;
}

.home-subject-card.blue .home-subject-card-head-icon-area::after {
    background-color: #C6E7F8;
}

.know-more-btn:hover {
    background-color: #fff !important;
    box-shadow: none;
    outline: none;
}

.know-more-btn:focus {
    outline: none;
}

.home-subject-slider-area {
    position: relative;
}

.swiper-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-weight: 700;
    z-index: 2;
}

.swiper-nav-button i {
    color: #000;
    font-size: 30px;
}

.swiper-nav-button.prev {
    left: -80px;
}

.swiper-nav-button.next {
    right: -80px;
}

.home-lession-slider-section {
    background-color: #3F3A62;
    position: relative;
}

.home-lession-slider-area {
    padding-top: 60px;
    position: relative;
}

/* for pricing page */
.pricing-init-section {
    padding-top: 150px;
    background-color: #F2F9FD;
}

.pricing-quantity-container {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    border-radius: 10px;
    box-shadow: 0px 0px 3px #00000029;
    overflow: hidden;
    max-width: max-content;
}

.pricing-quantity-btn {
    padding: 0px 40px;
    height: 50px;
    background-color: #58C3FB;
    text-align: center;
    color: #FFF;
    font-weight: 800;
    font-size: 25px;
    box-shadow: inset 0px 0px 3px #00000029;
    transition: ease 0.3s;
}

.pricing-quantity-btn:hover {
    background-color: #3eaeeb;
}

.pricing-quantity-input {
    text-align: center;
    padding: 0px 40px;
    height: 50px;
    color: #000;
    font-size: 20px;
    width: 120px;
}

.pricing-quantity-btn,
.pricing-quantity-btn:hover,
.pricing-quantity-btn:focus,
.pricing-quantity-input,
.pricing-quantity-input:hover,
.pricing-quantity-input:focus {
    border: none !important;
    outline: none !important;
}

.pricing-detail-card-section {
    padding-top: 90px;
    padding-bottom: 30px;
}

.all-feature-button-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pricing-detail-card {
    position: relative;
    border-radius: 10px;
    background-color: #F2F9FD;
    border-bottom: 3px solid #58C3FB;
    transition: ease 0.5s;
}

.pricing-detail-card:hover {
    transform: translateY(-5px);
}

.pricing-detail-card-header {
    background-color: #58C3FB;
    padding: 20px;
    text-align: center;
    position: relative;
    border-radius: 10px 10px 0px 0px;
    height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pricing-detail-card-header h6 {
    font-size: 20px;
    font-weight: 500;
    color: #000;
}

.pricing-detail-card-header h2,
.pricing-detail-card-header span {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    font-family: "Montserrat", sans-serif !important;
    margin-bottom: 2px;
}

.pricing-detail-card-header p {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    font-family: "Assistant", sans-serif !important;
    margin-bottom: 0;
    width: 70%;
}

.pricing-detail-card-header .price-label {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: #FFF;
    text-wrap: nowrap;
    font-family: "Assistant", sans-serif !important;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    padding: 2px 14px 2px 18px;
    line-height: 0;
    height: 32px;
    display: flex;
    align-items: center;
}

.pricing-detail-card-header .price-label.pro {
    background-color: #FFCA3A !important;
}

.pricing-detail-card-header .price-label.pro::after {
    border-left-color: #FFCA3A !important;
}

.pricing-detail-card-header .price-label::after {
    content: "";
    display: inline;
    position: absolute;
    right: -17px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-radius: 2px;
    border-top: 17px solid transparent;
    border-left: 17px solid #fff;
    border-bottom: 17px solid transparent;
}

.pricing-detail-card-body {
    padding: 35px 40px 40px 40px;
}

.pricing-detail-list {
    padding: 10px 0;
    margin-bottom: 0;
    list-style: none;
}

.pricing-detail-list li {
    color: #000;
    font-weight: 400;
    font-size: 18px;
    font-family: "Assistant", sans-serif !important;
    margin-bottom: 18px;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.pricing-detail-list li::before {
    content: "\f26a";
    display: inline-block;
    font-family: 'bootstrap-icons' !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.135em;
    margin-right: 15px;
    color: #135CB7;
    font-size: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pricing-detail-btn-area {
    display: flex;
    justify-content: center;
    width: 100%;
}

.know-more-btn.pricing {
    background-color: #FFF !important;
}

.know-more-btn.pricing:hover {
    background-color: #58C3FB !important;
}

.price-offer-container {
    position: absolute;
    top: -25px;
    right: -25px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #135CB7;
    box-shadow: 0px 3px 6px #ffffff29;
    z-index: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.price-offer-container span {
    color: #FFF;
    font-size: 18px;
    font-family: "Assistant", sans-serif !important;
    font-weight: 400;
    line-height: 1.2em;
}

.price-detail-card-container {
    padding: 0 32px;
}

.pricing-detail-content {
    height: 100px;
    overflow: hidden;
    margin-bottom: 30px;
}

.pricing-detail-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 100px;
    object-fit: contain;
}

.pricing-faq-section {
    background-color: #FCFCFC;
    position: relative;
}

.pricing-faq-container {
    padding-top: 50px;
}

/*  */
.grades-section {
    background-color: #135CB7;
}


.grades-content-section {
    margin-top: 60px;
}

.about-sqill-achieve-card {
    position: relative;
    border-radius: 17px;
    padding: 40px 30px;
    transition: ease-in-out 0.5s;
}

.about-sqill-achieve-card:hover {
    transform: translate(5px);
}

.about-sqill-achieve-icon-area {
    border-radius: 50%;
    flex-shrink: 0;
    width: 67px;
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.about-sqill-achieve-icon-area img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.about-sqill-achieve-card.green {
    background-color: #EAF5E2;
    box-shadow: 5px 5px 0px #ACDCA7;
}

.about-sqill-achieve-card.green:hover {
    box-shadow: -5px -5px 0px #ACDCA7;
}

.about-sqill-achieve-card.green .about-sqill-achieve-icon-area {
    background-color: #ACDCA7;
}

.about-sqill-achieve-card.blue {
    background-color: #E5F7FE;
    box-shadow: 5px 5px 0px #A8DAF4;
}

.about-sqill-achieve-card.blue:hover {
    box-shadow: -5px -5px 0px #A8DAF4;
}

.about-sqill-achieve-card.blue .about-sqill-achieve-icon-area {
    background-color: #A8DAF4;
}

.about-sqill-achieve-card.pink {
    background-color: #FFF5F2;
    box-shadow: 5px 5px 0px #FDDACF;
}

.about-sqill-achieve-card.pink:hover {
    box-shadow: -5px -5px 0px #FDDACF;
}

.about-sqill-achieve-card.pink .about-sqill-achieve-icon-area {
    background-color: #FDDACF;
}

.about-sqill-achieve-card.yellow {
    background-color: #FFF3C9;
    box-shadow: 5px 5px 0px #FFD955;
}

.about-sqill-achieve-card.yellow:hover {
    box-shadow: -5px -5px 0px #FFD955;
}

.about-sqill-achieve-card.yellow .about-sqill-achieve-icon-area {
    background-color: #FFD955;
}

.about-sqill-achieve-card h4 {
    margin-top: 22px;
    font-size: 25px;
    color: #000;
    font-weight: 500;
}

.about-sqill-achieve-card p {
    margin-top: 12px;
    font-size: 18px;
    line-height: 1.7em;
    color: #000;
    font-weight: 500;
    font-family: "Assistant", sans-serif !important;
    margin-bottom: 0;
    height: 97px;
    overflow: hidden;
}

/*  */
.grades-card-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 60px;
}

.grades-card-container .grades-card {
    flex-shrink: 0;
    flex-basis: 16.66666667%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 190px;
    flex-direction: column;
    box-shadow: inset 10px 0px 10px #0000000c;
}

.grades-card h5 {
    color: #000;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
}

.grades-card h6 {
    color: #000;
    text-align: center;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
    font-family: "Assistant", sans-serif !important;
}

.grades-card::after {
    content: '';
    display: inline-block;
    border-bottom: 40px solid transparent;
    border-top: 40px solid transparent;
    border-left-width: 40px;
    border-left-style: solid;
    position: absolute;
    right: -39px;
    z-index: 1;
    top: 25px;
    filter: drop-shadow(10px 0px 6px #0000000f);
}

.grades-card.one {
    background-color: #DBE8DD;
}

.grades-card.one::after {
    border-left-color: #DBE8DD;
}

.grades-card.two {
    background-color: #E5E4AE;
}

.grades-card.two::after {
    border-left-color: #E5E4AE;
}

.grades-card.three {
    background-color: #CDE2E8;
}

.grades-card.three::after {
    border-left-color: #CDE2E8;
}

.grades-card.four {
    background-color: #FCD9CE;
}

.grades-card.four::after {
    border-left-color: #FCD9CE;
}

.grades-card.five {
    background-color: #FDFBDF;
}

.grades-card.five::after {
    border-left-color: #FDFBDF;
}

.grades-card.six {
    background-color: #FFDFAE;
}

.grades-card.six::after {
    border-left-color: #FFDFAE;
}

/*  */
.lesson-video-card {
    position: relative;
    border-radius: 10px;
    background-color: #FFF;
    padding: 12px;

}

.lesson-video-container {
    border-radius: 8px;
    height: 200px;
    overflow: hidden;
    background-color: #000;
    position: relative;
}

.lesson-video-container::after {
    content: '';
    display: block;
    position: absolute;
    background-color: #00000082;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.lesson-video-container img {
    height: 200px;
    object-fit: cover;
    object-position: center;
    width: 100%;
    display: block;
    transition: ease-in-out 0.5s;
}

.lesson-video-container>.lesson-video-play-btn:hover+img {
    transform: scale(1.05) !important;
}

.lesson-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    outline: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #18A0FB;
    z-index: 2;
    transition: ease 0.5s;
    box-shadow: 0px 10px 20px #0000004d;
}

.lesson-video-play-btn i {
    color: #FFF;
    font-size: 30px;
}

.lesson-video-play-btn:hover,
.lesson-video-play-btn:focus {
    outline: none;
    border: none;
}

.lesson-video-play-btn:hover {
    background-color: #0184db;
}


.lesson-video-title {
    color: #000;
    background-color: #58C3FB;
    text-align: center;
    width: 100%;
    display: block;
    margin: 12px 0 15px 0;
    padding: 12px;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 20px;
    font-weight: 500;
    border-radius: 8px;
}

.lesson-video-desc {
    color: #000;
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 0;
    font-family: "Assistant", sans-serif !important;
    height: 80px;
    overflow: hidden;
}

.home-lesson-swiper-pagination-area .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next,
.home-lesson-swiper-pagination-area .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next,
.home-lesson-swiper-pagination-area .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev,
.home-lesson-swiper-pagination-area .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    border: 1px solid #ffffff !important;
    background-color: transparent !important;
}

.home-lesson-swiper-pagination-area .swiper-pagination-bullet {
    background-color: #fff !important;
}

/*  */
.lesson-video-modal {
    border-radius: 12px !important;
    padding: 10px;
}

.lesson-video-modal-header {
    background-color: #ebf9fa !important;
    border-radius: 10px;
    padding: 10px 20px;
    border: none;
    box-shadow: none;
}

.lesson-video-modal-header .modal-title {
    color: #30abb4 !important;
    font-size: 16px !important;
    font-weight: 500;
}

.lesson-video-modal-header .modal-close {
    width: 30px;
    height: 30px;
    background-color: #3AB9C1;
    border-radius: 8px;
    font-size: 18px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
}

.lesson-video-modal-header .modal-close:hover {
    background-color: #299da5;
}

.lesson-video-modal-header .modal-close:focus,
.lesson-video-modal-header .modal-close:hover {
    outline: none;
    border: none;
}

.lesson-video-modal-header .modal-close:focus {
    box-shadow: 0p 0px 0px 4px #299da5d8 !important;
}

.lesson-video {
    width: 100%;
    max-height: 500px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #299da5;
}

.lesson-video .vjs-poster {
    background-color: #000;
}

.lesson-video .vjs-poster img {
    object-fit: cover;
    opacity: 0.5;
}


.lesson-video-modal .modal-body {
    padding: 10px 0 0 0;
}

.lesson-modal-desc {
    color: #494949;
    font-size: 16px;
    line-height: 1.6em;
    padding: 20px 10px;
    margin-bottom: 0;
    font-family: "Assistant", sans-serif !important;
}

/*  */
.home-hero-image-area {
    position: relative;
    margin-top: 280px;
}

.home-lesson-section {
    background-color: #135CB7;
}

.home-hero-image-area::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #A8DAF4;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    flex-shrink: 0;
    z-index: 1;
    display: none;
}

.index-2 {
    z-index: 2 !important;
}

/*  */
.about-learn-section {
    position: relative;
    background-image: url(../images/about/about-learn-img.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 50%;
    background-color: #DBF3FF;
}

/*  */
.aff-subject-card {
    position: relative;
    border-radius: 12px;
    background-color: #f3f3f3;
    padding: 60px 30px 40px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: ease 0.5s;
}

.aff-subject-card:hover {
    transform: translateY(-4px);
}

.aff-subject-card img {
    height: 70px;
    transition: ease 0.5s;
    position: relative;
}

.aff-subject-card:hover img {
    transform: scale(1.05);
}

.aff-subject-para {
    height: 85px;
    overflow: hidden;
}

.about-init-image-area .bg-circle-img {
    position: absolute;
    max-width: 100%;
    bottom: 8%;
    left: 5%;
    /* transform: translateX(-55%); */
    transition: ease 0.5s;
}

.examboards-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 65px;
}

.examboard-img-container {
    border-radius: 8px;
    position: relative;
    background-color: #FFF;
    box-shadow: 0px 5px 15px #0b4388cd;
    width: 280px;
    height: 77px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: ease 0.5s;
}

.examboard-img-container:hover img {
    transform: scale(0.96)
}

.examboard-img-container img {
    max-width: 90%;
    max-height: 75px;
    transition: ease 0.5s;
    position: relative;
}

/*  */
.circle-section {
    width: 60vh;
    height: 60vh;
    background-color: #F7F7F7;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
    outline: 18px solid #F7F7F7;
}

.circle-tab-button {
    flex-basis: 50%;
    background-color: transparent;
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    transition: ease 0.5s;
    width: 30vh;
    height: 30vh;
    position: relative;
    overflow: hidden;
}

.circle-tab-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    position: relative;
    transition: ease 0.5s;
    z-index: 1;
}

.circle-tab-button .circle-title {
    color: #FFF;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 0;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-shadow: 0px 3px 6px #000000;
}

.circle-tab-button:focus img {
    transform: scale(1.06);
}

.circle-tab-button:active img {
    transform: scale(0.97);
}

.circle-tab-button:hover img {
    filter: brightness(0.8);
}

.circle-tab-button:focus {
    outline: none;
}

.circle-tab-button::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: ease 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
}

.circle-tab-button.mathematics {
    border-right: 9px solid #F7F7F7;
    border-bottom: 9px solid #F7F7F7;
}

.circle-tab-button.english {
    border-left: 9px solid #F7F7F7;
    border-bottom: 9px solid #F7F7F7;
}

.circle-tab-button.non-verbal {
    border-right: 9px solid #F7F7F7;
    border-top: 9px solid #F7F7F7;
}

.circle-tab-button.verbal {
    border-left: 9px solid #F7F7F7;
    border-top: 9px solid #F7F7F7;
}

.circle-tab-button.mathematics img {
    border-top-left-radius: 100%;
}

.circle-tab-button.english img {
    border-top-right-radius: 100%;
}

.circle-tab-button.non-verbal img {
    border-bottom-left-radius: 100%;
}

.circle-tab-button.verbal img {
    border-bottom-right-radius: 100%;
}

.circle-tab-button.mathematics::after {
    background-color: #2BFF6B;
}

.circle-tab-button.english::after {
    background-color: #5DFDFF;
}

.circle-tab-button.non-verbal::after {
    background-color: #E9FF24;
}

.circle-tab-button.verbal::after {
    background-color: #EE7B4F;
}

.circle-center-tab-btn {
    background-color: transparent;
    padding: 0;
    margin: 0;
    outline: none;
    border: 18px solid #F7F7F7;
    transition: ease 0.5s;
    width: 30vh;
    height: 30vh;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    border-radius: 50%;
    flex-shrink: 0;
}

.circle-center-tab-btn:focus {
    outline: none;
}

.circle-center-tab-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    display: block;
    position: relative;
    transition: ease 0.5s;
    z-index: 1;
    border-radius: 50%;
    flex-shrink: 0;
}

.circle-center-tab-btn::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: ease 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
    background-color: #45AEE5;
}

.canter-circle-title {
    color: #FFF;
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 0;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-shadow: 0px 3px 6px #000000;
}

.circle-center-tab-btn:focus img {
    transform: scale(1.06);
}

.circle-center-tab-btn:active img {
    transform: scale(0.97);
}

.circle-center-tab-btn:hover img {
    filter: brightness(0.75);
}

.subject-tab.active img {
    filter: brightness(0.75) !important;
}

.subject-tab-panel {
    margin-top: auto;
    margin-bottom: auto;
}

.subject-tab-content .subject-tab-panel {
    display: none !important;
    opacity: 0;
}

.subject-tab-content .subject-tab-panel.active {
    display: block !important;
    opacity: 1;
}

/*  */
.home-subject-card-section::after {
    content: '';
    display: block;
    border-radius: 50%;
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    background-color: #F2F9FD;
    position: absolute;
    right: -5%;
    top: -5%;
}

.home-subject-card-section::before {
    content: '';
    display: block;
    border-radius: 50%;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background-color: #D8F1FD;
    position: absolute;
    left: -7%;
    bottom: 26%;
}


.home-hero-image-area .hero-img {
    width: 90%;
    z-index: 2;
    display: block;
    position: relative;
    margin: auto;
}

.home-hero-image-area .home-bg-circle {
    position: absolute;
    max-width: 96%;
    bottom: 2%;
    left: 0%;
    right: 0%;
    transition: ease 0.5s;
    z-index: 1;
}

.hero-dec-img-1,
.hero-dec-img-2,
.hero-dec-img-3,
.hero-dec-img-4 {
    position: absolute;
    z-index: 2;
}

.hero-dec-img-1 {
    left: 5%;
    top: 10%;
}

.hero-dec-img-2 {
    left: 25%;
    top: -20%;
}

.hero-dec-img-3 {
    right: 25%;
    top: -20%;
}

.hero-dec-img-4 {
    right: 6%;
    top: 5%;
}

/* Signin */

.sign-in-form-area * {
    font-family: "Poppins", sans-serif !important;
}

.signin-title {
    color: #000;
    font-size: 33px;
    font-weight: 700;
}

.signin-sub-title {
    color: #000;
    font-size: 20px;
    font-weight: 400;
}

.signin-info {
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    font-weight: 400;
}

.custom-form-group {
    margin-bottom: 18px;
}

.custom-form-input-area {
    width: 100%;
    position: relative;

}

.custom-form-input-area .password-toggle {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 18px;
    color: #58C3FB;
    font-size: 18px;
}

.custom-form-input-area .custom-form-input:disabled+.password-toggle {
    color: #6D6E70 !important;
    cursor: not-allowed !important;
}

.custom-form-input {
    background-color: #e5f4fc !important;
    border-radius: 8px !important;
    color: #000 !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border: none !important;
    width: 100%;
}

input:-webkit-autofill:focus {
    box-shadow: 0px 0px 0px 4px #48aadf3d;
}

input:-webkit-autofill {
    border: none;
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #e5f4fc inset;
    transition: background-color 5000s ease-in-out 0s;
}

input:-moz-autofill {
    box-shadow: 0 0 0px 1000px #e5f4fc inset;
    -moz-text-fill-color: black;
}

input:-ms-autofill {
    box-shadow: 0 0 0px 1000px #e5f4fc inset;
    -ms-text-fill-color: black;
}

.custom-form-input:disabled {
    background-color: #EEEEEE !important;
    cursor: not-allowed !important;
}

.custom-form-input::placeholder {
    color: #c0c0c0 !important;
}

.custom-form-input:focus {
    box-shadow: 0px 0px 0px 4px #48aadf3d;
}

.custom-form-label {
    color: #000;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 5px;
}

.form-required {
    color: red;
}

.submit-button {
    background-color: #58C3FB !important;
    color: 16px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    color: #FFF;
    border: none !important;
    font-weight: 500 !important;
    transition: ease 0.3s !important;
}

.submit-button.letter-spaced {
    letter-spacing: 1.54px;
}

.submit-button:disabled {
    background-color: #A2A2A2 !important;
    cursor: not-allowed !important;
    color: #fff !important;
}

.submit-button:hover {
    background-color: #40a3d8 !important;
    color: #fff !important;
}

.submit-button:focus {
    outline: none !important;
    border: none !important;
}

.check-input-group {
    margin-bottom: 18px;
}

.check-input-group .form-check {
    display: flex !important;
    gap: 8px !important;
    align-items: flex-start;
}

.custom-form-check-label {
    color: #000;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-bottom: 0;
    padding-top: 2px;
}

.custom-form-check-input {
    border-color: #58C3FB !important;
    color: #FFF !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
    border-radius: 4px !important;
}

.custom-form-check-input:focus {
    box-shadow: 0px 0px 0px 4px #48aadf3d;
}

.custom-form-check-input:checked {
    border-color: #58C3FB !important;
    background-color: #58C3FB !important;
}


.login-img {
    display: block;
    margin: auto;
    max-width: 90%;
}

.account-have-area {
    margin-top: 18px;
    text-align: center;
}

.account-have-area h6,
.account-have-area a {
    font-size: 14px;
    margin-bottom: 0;
    text-decoration: none !important;
}

.account-have-area h6 {
    color: #000 !important;
    font-weight: 400 !important;
}

.account-have-area a {
    color: #58C3FB !important;
    font-weight: 600 !important;
}

.account-have-area button {
    color: #58C3FB !important;
    font-size: 14px;
    font-weight: 500 !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    border: none !important;
}

.account-have-area a:hover {
    text-decoration: underline !important;
}

/*  */
.profile-dropdown-toggle.show::after {
    transform: rotateX(180deg);
}

.profile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    background-color: transparent !important;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
}

.profile-dropdown-toggle::after {
    transition: ease 0.5s;
}

.profile-dropdown-toggle img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid #000;
}

.profile-name-area {
    font-family: "Assistant", sans-serif !important;
    text-align: left;
}

.profile-name-area h6 {
    color: #000;
    font-size: 18px;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
    margin-bottom: 0;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-name-area h6 span {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    font-family: "Assistant", sans-serif !important;
}

.profile-name-area p {
    margin-bottom: 0;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
}

.profile-dropdown-menu {
    border: none;
    box-shadow: 0px 5px 15px #0000001e;
    margin-top: 5px !important;
    padding: 5px !important;
    border-radius: 8px !important;
}

.profile-dropdown-menu a {
    font-family: "Assistant", sans-serif !important;
    font-weight: 500;
    border-radius: 5px !important;
    font-size: 15px !important;
    padding: 5px 15px;
}

.profile-dropdown-menu a.is-profile {
    color: #000 !important;
}

.profile-dropdown-menu a.is-profile:focus,
.profile-dropdown-menu a.is-profile:active {
    color: #FFF !important;
    background-color: #58C3FB !important;
}

.profile-dropdown-menu a.is-logout {
    color: #f40000 !important;
}

.profile-dropdown-menu a.is-logout:focus,
.profile-dropdown-menu a.is-logout:active {
    background-color: #f40000 !important;
    color: #FFF !important;
}

/*  */
.mobil-nav-area {
    display: flex;
    gap: 20px;
    align-items: center;
}

.profile-dropdown-mobile {
    display: none;
}

.menu-profile-name-area {
    font-family: "Assistant", sans-serif !important;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 5px;
}

.menu-profile-name-area h6 {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
    margin-bottom: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.menu-profile-name-area h6 span {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    font-family: "Assistant", sans-serif !important;
}

.menu-profile-name-area p {
    margin-bottom: 0;
    color: #000;
    font-size: 13px;
    font-weight: 400;
    font-family: "Assistant", sans-serif !important;
}

.menu-profile-name-area {
    display: none;
}

/*  */
.otp-label {
    display: flex;
    justify-content: center;
}

.otp-input-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 35px;
}

.custom-form-input.otp-input {
    text-align: center;
    width: 65px;
    height: 65px;
    font-size: 18px !important;
}

.login-img.is-otp {
    max-width: 80% !important;
}

.swal2-actions button {
    border-radius: 8px !important;
}

/*  */

/* for message */
.message-box-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 20px;
    gap: 20px;
    background-color: #f4fbff;
    /* box-shadow: 0px 10px 20px #54c0c22a; */
    padding: 60px;
}

.message-box-text {
    font-size: 16px;
    color: #606b71;
    display: block;
    text-align: center;
    font-weight: 400;
    margin-bottom: 0;
    font-family: "Assistant", sans-serif !important;
    line-height: 1.7em;
}

.message-box-link-area {
    position: relative;
    border-radius: 12px;
    padding: 20px;
    background-color: #e1eef3;
    margin-top: 20px;
}

.message-box-link-area h6 {
    color: #000;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 15px;
    text-align: center;
    font-family: "Assistant", sans-serif !important;
}

.message-box-image-area {
    position: relative;
    z-index: 2;
}

.message-box-image-area img {
    max-width: 100%;
    display: block;
}

.message-box-contact-area {
    position: relative;
}

.message-box-contact-area h6 {
    color: #000;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 14px;
    text-align: center;
    font-family: "Assistant", sans-serif !important;
}

.message-box-contact-area a {
    text-decoration: none;
    color: #3ea4d9;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
    transition: ease 0.5s;
    text-align: center;
    font-family: "Assistant", sans-serif !important;
}

.message-box-contact-area a i {
    font-size: 18px;
    transition: ease 0.5s;
}

.message-box-contact-area a:hover i {
    transform: translateX(4px);
}

@media (min-width: 576px) and (max-width: 767px) {
    .message-box-area {
        padding: 40px;
    }
}

@media (max-width: 575px) {
    .message-box-area {
        padding: 40px 30px;
        gap: 15px;
    }

    .message-box-text {
        font-size: 14px;
        /* font-weight: 400; */
    }

    .message-box-link-area h6 {
        font-size: 14px;
    }

    .message-box-contact-area a {
        font-size: 16px;
    }
}

/*  */
/* for error page */
.error-page-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 20px;
    gap: 20px;
    padding: 40px;
}

.error-page-text {
    font-size: 16px;
    color: #717171;
    display: block;
    text-align: center;
    font-weight: 400;
    margin-bottom: 0;
    line-height: 1.7em;
    font-family: "Assistant", sans-serif !important;
}

.error-page-image-area {
    position: relative;
    z-index: 2;
}

.error-page-image-area img {
    max-width: 100%;
    display: block;
}

.error-page-link-area {
    position: relative;
    margin-top: 20px;
}

.error-page-link-area a {
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
    transition: ease 0.5s;
    text-align: center;
    background-color: #58C3FB;
    padding: 10px 15px;
    border-radius: 8px;
    font-family: "Assistant", sans-serif !important;
}

.error-page-link-area a i {
    font-size: 16px;
    transition: ease 0.5s;
}

.error-page-link-area a:hover {
    background-color: #4caadc !important;
}

.error-page-link-area a:focus {
    box-shadow: 0px 0px 0px 4px #58c3fb38;
}

@media (min-width: 576px) and (max-width: 767px) {
    .error-page-area {
        padding: 40px;
    }
}

@media (max-width: 575px) {
    .error-page-area {
        padding: 40px 30px;
        gap: 15px;
    }

    .error-page-text {
        font-size: 14px;
    }

    .error-page-link-area a {
        font-size: 16px;
    }
}

/*  */
.right_click_alert {
    display: none;
    background-color: rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: ease 0.5s;
}

.right_click_alert h6 {
    font-size: 16px;
    text-align: center;
    margin-bottom: 0;
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 20px;
    font-weight: 500;
    font-family: "Assistant", sans-serif !important;
    transition: ease 0.5s;
}