:root {
    --bs-body-font-family: 'EffraRegular', sans-serif;
    --white: #FFFFFF;
    --black: #000000;
    --primary: #4EBCC2;
    --secondary: #AFD9EF;
    --secondary-600: #92B5C7;
    --green: #7FE0E5;
    --green-50: #E5F9FA;
    --accent-color: #BC9CD5;

    --primary-50: rgba(220, 242, 243, 1);

    --grey: #323232;
    --grey-200: rgba(201, 207, 206, 1);
    --natural-950: rgba(51, 51, 51, 1);

    --bs-body-font-size: 16px;
    --bs-body-line-height: 20px;
    --bs-body-font-weight: 400;
    --bs-body-color: #000;
    --bs-body-bg: var(--white);
    --bs-border-color: #E5E5E5;

    --transition-base: all 0.3s ease-in-out;
}

body {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    margin: 0;
    padding: 0;
}

.container {
    padding-left: 16px;
    padding-right: 16px;
}

.g-20,
.gy-20 {
    --bs-gutter-y: 20px !important;
}

.g-20,
.gx-20 {
    --bs-gutter-x: 20px !important;
}

a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

img {
    max-width: 100%;
    height: auto;
}

.list-style-disc {
    list-style-type: disc;
}

/* Typography */
.h1,
h1 {
    font-size: 57px;
    line-height: 70px;
}

.h2,
h2 {
    font-size: 48px;
    line-height: 58px;
}

.h3,
h3 {
    font-size: 40px;
    line-height: 48px;
}

.h4,
h4 {
    font-size: 33px;
    line-height: 40px;
}

.h5,
h5 {
    font-size: 28px;
    line-height: 32px;
}

.h6,
h6 {
    font-size: 20px;
    line-height: 24px;
}

.font-13 {
    font-size: 13px;
    line-height: 16px;
}

.font-16 {
    font-size: 16px;
    line-height: 20px;
}

.font-19 {
    font-size: 19px;
    line-height: 23px;
}

.font-23 {
    font-size: 23px;
    line-height: 27px;
}

/* Typography */

/* Colors */
.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

.bg-primary-50 {
    background-color: var(--primary-50) !important;
}

.bg-primary-600 {
    background-color: rgba(65, 157, 162, 1) !important;
}

.bg-primary-gradient {
    background: linear-gradient(180deg, #4EBCC2 0%, #419DA2 50%, #419DA2 100%);
}

.text-primary-600 {
    color: rgba(65, 157, 162, 1) !important;
}

.bg-primary-800 {
    background-color: rgba(39, 94, 97, 1) !important;
}

.bg-accent {
    background-color: var(--accent-color) !important;
}

.bg-green-50 {
    background-color: var(--green-50) !important;
}

.text-primary-800 {
    color: rgba(39, 94, 97, 1) !important;
}

.text-dark {
    color: var(--grey) !important;
}

.text-natural-600 {
    color: rgba(212, 212, 212, 1) !important;
}

.text-natural-800 {
    color: rgba(128, 128, 128, 1) !important;
}

.text-natural-950 {
    color: rgba(51, 51, 51, 1) !important;
}

.text-secondary-600 {
    color: rgba(146, 181, 199, 1) !important;
}

.text-accent-600 {
    color: rgba(157, 130, 177, 1) !important;
}

.text-accent-800 {
    color: rgba(94, 78, 107, 1) !important;
}

/* Colors */

/* Gap */
.gap-10 {
    gap: 10px !important;
}

.gap-12 {
    gap: 12px !important;
}

.gap-20 {
    gap: 20px !important;
}

.gap-30 {
    gap: 30px !important;
}

.gap-35 {
    gap: 35px !important;
}

.gap-40 {
    gap: 40px !important;
}

.gap-50 {
    gap: 50px !important;
}

.gap-60 {
    gap: 60px !important;
}

/* Gap */

/* Margin Padding */
.p-40 {
    padding: 40px !important;
}

.py-60 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

.pt-60 {
    padding-top: 60px !important;
}

.pb-60 {
    padding-bottom: 60px !important;
}

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

.mb-60 {
    margin-bottom: 60px !important;
}

/* Rotate */
.rotate-180 {
    transform: rotate(0deg);
    transition: all 0.3s ease;
}

[dir="rtl"] .rotate-180 {
    transform: rotate(180deg);
    transition: all 0.3s ease;
}

/* [dir="rtl"] .ourClientsSwiper .swiper-slide{
    margin-left: 27px !important;
    margin-right: 0 !important;
} */
/* Button */
.btn {
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 23px;
    line-height: 100%;
    font-weight: 700;
    display: flex;
    gap: 9px;
    border: none;
}

.btn-check:checked+.btn:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible,
.btn:first-child:active:focus-visible,
:not(.btn-check)+.btn:active:focus-visible {
    box-shadow: none;
}

.btn-primary {
    background-color: rgba(78, 188, 194, 0.25);
    color: var(--white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    background-color: rgba(39, 94, 97, 1);
    color: var(--white);
}

.btn-secondary {
    background-color: rgba(242, 235, 247, 0.24);
    color: var(--white);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.open>.dropdown-toggle.btn-secondary {
    background-color: rgba(125, 104, 142, 1);
    color: var(--white);
}

.btn-accent {
    background-color: var(--accent-color);
    color: var(--white);
}

.btn-accent:hover,
.btn-accent:focus,
.btn-accent:active,
.btn-accent.active,
.open>.dropdown-toggle.btn-accent {
    background-color: var(--accent-color);
    color: var(--white);
}


/* Banner & Header */
.hero-banner {
    padding: 45px 0 170px;
}

.hero-banner::before {
    content: "";
    background-color: rgba(16, 38, 39, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-banner.hero-video-section::before {
    z-index: 0;
}
.hero-banner.hero-video-section .hero-video{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-banner .hero-banner-content {
    padding-top: 140px;
}

.hero-banner .navbar {
    padding: 10px 20px;
    backdrop-filter: brightness(1.1) blur(2px);
    -webkit-box-shadow: inset 0 2px 0px -2px rgba(255, 255, 255, 0.3), inset 0 0 3px 1px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 6px 0px -6px rgba(255, 255, 255, 0.3), inset 0 0 8px 1px rgba(255, 255, 255, 0.3);
}

.hero-banner .logo-main img {
    max-width: 227px;
    max-height: 71px;
}

.hero-banner .navbar .dropdown-toggle::after {
    display: none;
}

.hero-banner .navbar .navbar-nav {
    gap: 14px;
}

.hero-banner .navbar .navbar-nav .nav-item .nav-link {
    color: var(--white);
    padding: 7px;
}

.lang-dropdown .dropdown-toggle {
    padding: 7px;
}

.hero-banner .navbar .navbar-nav .nav-item:hover .nav-link {
    color: var(--primary);
}

.navbar-toggler:focus {
    box-shadow: none;
}

.main-header .navbar-nav .dropdown-menu {
    margin: 0;
    border-radius: 12px;
    background-color: rgba(220, 242, 243, 1);
    top: calc(100% + 10px);
}

.main-header .navbar-nav .dropdown-menu::before {
    /* content: ""; */
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 37px solid rgba(220, 242, 243, 1);
    position: absolute;
    top: -25px;
    left: 30px;
    transform: translateX(-50%);
}

.main-header .navbar-nav .dropdown-menu .menu-drop-icon {
    position: absolute;
    bottom: calc(100% - 2px);
    left: 20px;
    width: 20px;
    height: auto;
}

.main-header .navbar-nav .dropdown-menu li {
    padding: 4px 10px;
    border-bottom: 1px solid rgba(212, 212, 212, 0.7);
}

.main-header .navbar-nav .dropdown-menu li:last-child {
    border-bottom: none;
}

.main-header .navbar-nav .dropdown-menu li a {
    padding: 10px;
    border-radius: 8px;
    color: var(--natural-950);
    transition: var(--transition-base);
}

html[dir="rtl"] .main-header .navbar-nav .dropdown-menu li a {
    text-align: right;
}

.main-header .navbar-nav .dropdown-menu li:hover a {
    background-color: var(--primary);
    color: var(--white);
    transition: var(--transition-base);
}

/* End */

/* Logos Section */
.logos-section {
    margin-top: -72px;
}

.logos-section .logos-list li {
    flex: 0 0 auto;
}

/* Do You Need Section */
.card-icon-left {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    border: none;
    transition: var(--transition-base);
}

.card-icon-left:hover {
    background-color: var(--primary);
    color: var(--white);
    transition: var(--transition-base);
}

.card-icon-left .card-body {
    padding: 30px 20px;
}

.card-icon-left .icon {
    background-color: var(--primary);
    color: var(--white);
    margin-bottom: 10px;
    transition: var(--transition-base);
}

.card-icon-left:hover .icon {
    background-color: var(--white);
    color: rgba(39, 94, 97, 1);
    transition: var(--transition-base);
}

.card-icon-left h6 {
    margin-bottom: 30px;
    min-height: 80px;
}

.card-icon-left p {
    margin-bottom: 30px;
    min-height: 92px;
}

.card-icon-left a {
    min-height: 47px;
    line-height: 20px;
    transition: var(--transition-base);
}

.card-icon-left:hover a {
    color: rgba(233, 222, 241, 1) !important;
    transition: var(--transition-base);
}

.card-icon-left .icon .hover-icon,
.started-card .started-card-icon .hover-icon,
.card-how-to-start .icon .hover-icon {
    display: none;
}

.card-icon-left:hover .icon .hover-icon,
.started-card:hover .started-card-icon .hover-icon,
.card-how-to-start:hover .icon .hover-icon {
    display: block;
}

.card-icon-left:hover .icon .default-icon,
.started-card:hover .started-card-icon .default-icon,
.card-how-to-start:hover .icon .default-icon {
    display: none;
}

/* Do You Need Section */

/* Our Core Services */
.core-service-card {
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
    transition: var(--transition-base);
    overflow: hidden;
    background-color: rgba(241, 242, 244, 1);
}

.core-service-card:hover {
    background-color: var(--primary);
    color: var(--white);
    transition: var(--transition-base);
}

.core-service-card .card-body {
    padding: 20px;
}

.core-service-card .image span {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    height: 260px;
    border-radius: 8px;
    transition: var(--transition-base);
}

.core-service-card:hover .image span {
    transform: scale(1.05);
    transition: var(--transition-base);
}

.core-services-section .swiper-button-next,
.core-services-section .swiper-button-prev,
.core-services-section .swiper-rtl .swiper-button-prev,
.core-services-section .swiper-rtl .swiper-button-next,
.core-services-section .swiper-button-next.swiper-button-disabled,
.core-services-section .swiper-button-prev.swiper-button-disabled,
.do-you-need-section .swiper-button-next, 
.do-you-need-section .swiper-button-prev,
.our-clients-section .swiper-button-next,
.our-clients-section .swiper-button-prev {
    width: 56px;
    height: 56px;
    background-color: rgba(78, 188, 194, 1);
    color: var(--white);
    border-radius: 100%;
    position: static;
    margin: 0;
}

.core-services-section .swiper-button-next.swiper-button-disabled,
.core-services-section .swiper-button-prev.swiper-button-disabled,
.do-you-need-section .swiper-button-next.swiper-button-disabled,
.do-you-need-section .swiper-button-prev.swiper-button-disabled,
.our-clients-section .swiper-button-next.swiper-button-disabled,
.our-clients-section .swiper-button-prev.swiper-button-disabled {
    background-color: var(--primary-50);
    color: rgba(10, 110, 102, 1);
    opacity: 1;
}

.core-services-section .swiper-button-next:after,
.core-services-section .swiper-button-prev:after,
.do-you-need-section .swiper-button-next:after,
.do-you-need-section .swiper-button-prev:after,
.our-clients-section .swiper-button-next:after,
.our-clients-section .swiper-button-prev:after {
    display: none;
}

.swiper-button-next svg,
.swiper-button-prev svg {
    width: auto;
    height: auto;
}

.swiper-button-prev svg {
    transform: rotate(180deg);
}

/* Service Packages */
.service-package-card {
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
    transition: var(--transition-base);
    overflow: hidden;
}

.service-package-card .card-body {
    padding: 20px;
}

.service-package-card .image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    height: 260px;
    border-radius: 8px;
}

.service-packages-section .swiper-button-next,
.service-packages-section .swiper-button-prev,
.service-packages-section .swiper-rtl .swiper-button-prev,
.service-packages-section .swiper-rtl .swiper-button-next,
.service-packages-section .swiper-button-next.swiper-button-disabled,
.service-packages-section .swiper-button-prev.swiper-button-disabled {
    width: 56px;
    height: 56px;
    background-color: rgba(78, 188, 194, 1);
    color: var(--white);
    border-radius: 100%;
    position: static;
    margin: 0;
}

.service-packages-section .swiper-button-next.swiper-button-disabled,
.service-packages-section .swiper-button-prev.swiper-button-disabled {
    background-color: var(--primary-50);
    color: rgba(10, 110, 102, 1);
    opacity: 1;
}

.service-packages-section .swiper-button-next:after,
.service-packages-section .swiper-button-prev:after {
    display: none;
}


/* Our Core Services */

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    height: auto;
}

/* Choose Us Section */
.choose-us-section {
    background: url('../images/choose-us-bg.jpg') no-repeat left -150px;
    background-size: cover;
}

.choose-wrrapper {
    gap: 74px;
}

.choose-wrrapper-item {
    flex: 0 0 calc(33.333% - 49.33px);
    max-width: calc(33.333% - 49.33px);
}

.choose-us-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(188, 156, 213, 0.88);
    z-index: 0;
}

.choose-us-section .choose-us-card-icon {
    border-radius: 28px;
}

/* Choose Us Section */

/* Started With Us Section */
.started-with-us-section {
    margin-bottom: -90px;
}

.started-with-us-section .started-wrapper {
    padding-top: 60px;
    padding-bottom: 110px;
    padding-inline: 20px;
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.25);
    transition: var(--transition-base);
    top: -42px;
}

.started-card {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    transition: var(--transition-base);
    border: none;
}

.started-card .card-body {
    padding: 40px 20px;
}

.started-card:hover {
    background-color: var(--primary);
    transition: var(--transition-base);
    color: var(--white);
}

.started-card-icon {
    background-color: var(--primary);
    width: 73px;
    height: 73px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: var(--transition-base);
}

.started-card:hover .started-card-icon {
    background-color: var(--white);
    color: rgba(39, 94, 97, 1);
    transition: var(--transition-base);
}

.started-card:hover .text-primary-600 {
    color: rgba(233, 222, 241, 1) !important;
    transition: var(--transition-base);
}

.started-card:hover .text-dark {
    color: var(--white) !important;
    transition: var(--transition-base);
}

/* Started With Us Section */

/* Our Clients */
.our-clients-section {
    background: linear-gradient(180deg, #4EBCC2 0%, #419DA2 50%, #419DA2 100%);
    padding: 90px 0;
}

.our-clients-card {
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
    transition: var(--transition-base);
    overflow: hidden;
    background-color: rgba(241, 242, 244, 1);
}

/* Footer */
.footer {
    background-color: rgba(94, 78, 107, 1);
    padding: 35px 0;
}

html[lang="en"] .footer-logo img {
    max-width: 108px;
}

html[lang="ar"] .footer-logo img {
    max-width: 227px;
}

/* Footer */
.footer .footer-bottom {
    border-color: rgba(255, 255, 255, 0.37) !important;
    padding-top: 34px;
    padding-bottom: 17px;
}

/* Common */
.icon-list.wh-33 {
    min-width: 33px;
    min-height: 33px;
}

.icon.wh-50 {
    min-width: 50px;
    min-height: 50px;
}

.icon.wh-67 {
    min-width: 67px;
    min-height: 67px;
}

.icon.wh-73 {
    min-width: 73px;
    min-height: 73px;
}

.icon.wh-77 {
    min-width: 77px;
    min-height: 77px;
}

.rounded-28 {
    border-radius: 28px !important;
}

.w-40 {
    width: 40% !important;
}

.w-60 {
    width: 60% !important;
}

/* Common Icon */

/* Common Page */
.common-page .hero-banner {
    background: url(../images/choose-us-bg.jpg) no-repeat center center;
    background-size: cover;
    padding-bottom: 250px;
}

.common-page .hero-banner::before {
    background-color: rgba(25, 45, 46, 0.86);
}

.common-page.service-page .hero-banner {
    padding-bottom: 130px;
}

.glass-badge {
    border-radius: 16px;
    padding: 6px 7px;
    background-color: rgba(245, 245, 244, 0.2);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    width: fit-content;
}

.green-badge {
    border-radius: 16px;
    padding: 6px 7px;
    background-color: rgba(220, 242, 243, 0.3);
    color: var(--secondary-600);
}

.glass-badge.badge-lg {
    padding: 9px 7px;
}

.glass-badge.glass-border {
    border: 1px solid rgba(78, 188, 194, 0.18);
}

/* About Page */
.about-hasanah-section {
    background-color: var(--primary-50);
    box-shadow: -1px -1px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1);
    margin-top: -180px;
    margin-inline: 36px;
}

.about-hasanah-section .glass-badge {
    border: 1px solid rgba(78, 188, 194, 0.18);
    padding-block: 10px;
}

.about-info-card {
    padding: 10px 20px;
    background-color: rgba(245, 245, 244, 0.2);
    border: 1px solid rgba(78, 188, 194, 1);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    width: fit-content;
    margin-top: -10px;
    border-radius: 18px;
}

.about-info-card .icon {
    width: 49px;
    height: 49px;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--white);
    box-shadow: 0px 18.36px 38.25px 0px rgba(13, 12, 56, 0.15);
}

/* Our Vision */
.our-vision-section {
    margin-bottom: 95px;
}

.vision-box {
    padding: 35px 50px;
    background-color: rgba(229, 249, 250, 0.4);
}

.vision-box .icon {
    width: 64px;
    height: 64px;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    color: var(--white);
}

/* CEO Message */
/* CEO Message */
.ceo-message-section {
    background: linear-gradient(180deg, #4EBCC2 0%, #419DA2 50%, #419CA1 100%);
}

.ceo-message-section .ceo-img {
    width: 100%;
    position: relative;
    top: -155px;
}

.ceo-message-section .ceo-img .ceo-name {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    font-size: 23px;
    line-height: 100%;
}

/* Clients Logo Slider */

.clients-logo-section .logo-card {
    background-color: rgba(229, 249, 250, 0.5);
    max-width: 240px;
    text-align: center;
}

.client-logo .swiper-button-next,
.client-logo .swiper-button-prev,
.client-logo .swiper-rtl .swiper-button-prev,
.client-logo .swiper-rtl .swiper-button-next,
.client-logo .swiper-button-next.swiper-button-disabled,
.client-logo .swiper-button-prev.swiper-button-disabled {
    width: 56px;
    height: 56px;
    background-color: rgba(78, 188, 194, 1);
    color: var(--white);
    border-radius: 100%;
    /* position: static; */
    /* margin: 0; */
}

.clients-logo-section .client-logo {
    padding: 0 76px;
}

.client-logo .swiper-button-next.swiper-button-disabled,
.client-logo .swiper-button-prev.swiper-button-disabled {
    background-color: var(--primary-50);
    color: rgba(10, 110, 102, 1);
    opacity: 1;
}

.client-logo .swiper-button-next:after,
.client-logo .swiper-button-prev:after {
    display: none;
}

.swiper-button-next svg,
.swiper-button-prev svg {
    width: auto;
    height: auto;
}

.swiper-button-prev svg {
    transform: rotate(180deg);
}

/* Accreditations */
.accreditations-card .accreditations-img {
    max-height: 160px;
    min-height: 160px;
}

/* Quality Standards */
.quality-card {
    background-color: var(--white);
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
    padding: 50px 65px 25px;
}

.quality-card .icon {
    width: 75px;
    height: 75px;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}

.quality-card ul {
    gap: 9px;
}

.quality-card ul li {
    gap: 12px;
}

.quality-card li svg {
    min-width: 33px;
}

/* Social Responsibility */
.social-responsibility-section {
    background: url(../images/social-responsibility-bg.jpg) center center no-repeat;
    background-size: cover;
    padding-top: 90px;
    padding-bottom: 80px;
}

.social-responsibility-section::before {
    content: "";
    background-color: rgba(78, 188, 194, 0.91);
    border-radius: 16px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.social-responsibility-content {
    position: relative;
    z-index: 1;
    gap: 80px;
}

.social-card {
    background-color: var(--white);
    border-radius: 15px;
    padding: 40px 30px;
}

.social-card .icon {
    width: 45px;
    height: 45px;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}

.social-card ul {
    gap: 9px;
}

/* Team Section */
.team-info-card {
    background-color: rgba(242, 235, 247, 0.5);
    border: 1px solid rgba(212, 212, 212, 1);
    padding: 25px 16px 25px 23px;
}

.team-info-card .title-badge {
    background-color: rgba(242, 235, 247, 1);
    border-radius: 16px;
    padding: 10px 20px;
}

/* Specialized Services */
.specialized-services-section {
    background-color: var(--primary-50);
}

.specialized-services-section .service-card {
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

/*  */
.contact-page .hero-banner .hero-banner-content {
    padding-bottom: 140px;
}

.contact-section {
    margin-top: -177px;
}

.contact-card {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
    padding: 60px 84px;
    gap: 120px;
}

.contact-card .card {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    border: none;
    padding: 20px;
    width: 100%;
}

.contact-card .contact-form {
    min-width: 600px;
    max-width: 600px;
}

/* Map */
.hasanah-map .mapouter {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
}

.information-card {
    border: 1px solid var(--primary-50);
    background-color: rgba(245, 245, 244, 0.2);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
}

.information-card .flex-1 {
    flex: 1 1 0;
}

/* How to start */
.card-how-to-start {
    padding: 40px 20px 24px;
    box-shadow: 0px 0px 4px 0px #00000040;
}

.card-how-to-start h6 {
    min-height: 54px;
}

/* Card Badge */
.card .card-badge {
    top: -20px;
    left: 14px;
    width: 120px;
}

.card .card-badge::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background-color: #419DA2;
    box-shadow: 8px 0px 16px 0px rgba(0, 0, 0, 0.3);
    width: 100px;
    height: 78px;
    border-radius: 7px 0px 7px 7px;
}

.card .card-badge::after {
    position: absolute;
    top: 0;
    left: 100px;
    content: "";
    width: 0px;
    height: 0px;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #1A3F41;
}

.card .card-badge span {
    position: relative;
    z-index: 1;
    width: calc(100% - 20px);
    height: 78px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Steps Section */
.steps-grp .step-item .step-border {
    height: 2px;
    background-color: var(--grey-200);
    position: relative;
}

.steps-grp .step-item.step-active .step-border::after {
    content: "";
    position: absolute;
    top: -5px;
    right: 0;
    border: solid var(--grey-200);
    border-width: 0 2px 2px 0;
    padding: 5px;
    transform: rotate(-45deg);
}

.steps-grp .step-item .step-icon {
    padding: 14px;
}

.steps-grp .step-item .step-icon .icon-bg {
    padding: 8px;
    border: 4px solid var(--primary);
    border-radius: 100%;
    background-color: var(--white);
}

.steps-grp .step-item.step-active .step-icon .icon-bg {
    padding: 8px;
    border: 4px solid var(--white);
    border-radius: 100%;
    background-color: var(--primary);
}

.step-card {
    background-color: var(--white);
}

.step-card.step-card-active {
    background-color: var(--primary);
    color: var(--white) !important;
    transition: var(--transition-base);
}

/* Test Type Card */
.test-type-card {
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
}

.test-type-card-img {
    padding-top: 170px;
}

/* Who Need Section */
.who-need-section {
    background: url(../images/need-section-bg.png) no-repeat left top;
    background-size: cover;
}

.who-need-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(188, 156, 213, 0.88);
    z-index: 0;
}

/*  */
.what-you-get-section .card-how-to-start {
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
    padding: 60px 18px;
}

/*  */
.start-now-section .card-how-to-start {
    padding-top: 30px;
    padding-bottom: 30px;
}

.start-now-section .card-how-to-start:hover {
    background-color: var(--primary);
    color: var(--white);
    transition: var(--transition-base);
}

.start-now-section .card-how-to-start .icon {
    background-color: var(--primary);
}

.start-now-section .card-how-to-start:hover .icon {
    background-color: var(--white);
}

.start-now-section .card-how-to-start p {
    color: var(--text-grey);
    transition: var(--transition-base);
}

.start-now-section .card-how-to-start:hover p {
    color: var(--white);
    transition: var(--transition-base);
}

.start-now-section .card-how-to-start:hover a {
    color: rgb(233, 222, 241) !important;
    transition: var(--transition-base);
}

/* Accordion */
.accordion-item {
    background-color: rgba(78, 188, 194, 0.1);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
}

.accordion-button,
.accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-color: rgba(188, 156, 213, 1);
    background-image: url(../images/accordion-icon.png);
    background-position: center center;
    background-size: 20px 11px;
    padding: 21px;
    border-radius: 49px;
}

button:focus:not(:focus-visible) {
    box-shadow: none;
}

html[dir="rtl"] .form-select {
    background-position: left .75rem center;
    padding-right: 1rem;
    padding-left: 2.25rem;
}

/* Report Page */
.report-page .hero-banner {
    background-image: url('../images/report-banner-bg.png');
    padding-bottom: 380px;
}

.report-page .hero-banner::before {
    background-color: rgba(16, 38, 39, 0.86);
}

.report-section {
    margin-top: -200px;
}

.report-section .report-card {
    padding-top: 94px;
    padding-bottom: 27px;
    box-shadow: 0px 0px 7.5px 0px rgba(0, 0, 0, 0.25);
}

.search-report-card {
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
}

.search-report-input {
    width: 100%;
    max-width: 829px;
    border: 1px solid rgba(6, 35, 95, 0.1);
    padding: 22px 20px;
}

.report-btn {
    max-width: 302px;
    width: 100%;
    border-radius: 12px;
}

.form-control:focus {
    box-shadow: none;
}

.report-info-card {
    padding: 40px;
    background: rgba(220, 242, 243, 0.6);
    border: 1px solid rgba(220, 242, 243, 1);
    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);
}

/* Report Result Page */
.report-page.result-page .hero-banner {
    padding-bottom: 420px;
}

.company-information {
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.report-box-card {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 40px 12px;
}

.report-box-card ul li {
    gap: 20px;
}

.report-box-card ul li label {
    max-width: 50%;
    width: 100%;
}

.download-btn .btn {
    max-width: 170px;
    width: 100%;
}

/*
 * Report result page — UI ownership
 */
.report-verified-summary {
    padding-bottom: 48px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(16, 38, 39, 0.12);
}

.report-verified-summary .report-icon {
    flex-shrink: 0;
}

.report-unverified-summary {
    padding-bottom: 48px;
}

.report-unverified-summary .report-icon--unverified {
    flex-shrink: 0;
}

.report-unverified-summary__title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #102627;
    letter-spacing: -0.02em;
}

.report-unverified-summary__intro {
    max-width: 560px;
    margin-inline: auto;
    color: rgba(16, 38, 39, 0.85);
    line-height: 1.55;
}

.report-verified-summary__title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    color: #102627;
    letter-spacing: -0.02em;
}

.report-verified-summary__intro {
    max-width: 520px;
    margin-inline: auto;
    color: rgba(16, 38, 39, 0.85);
    line-height: 1.55;
}

.report-verified-summary__image-wrap {
    background: #f4f8f8;
    border: 1px dashed rgba(16, 38, 39, 0.25);
    border-radius: 16px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.report-verified-summary__image-wrap img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

.report-verified-summary__placeholder {
    color: rgba(16, 38, 39, 0.45);
    font-weight: 600;
    text-align: center;
    padding: 24px;
}

.report-verified-summary__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.report-verified-summary__list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(16, 38, 39, 0.08);
}

html[dir="rtl"] .report-verified-summary__list li {
    text-align: right;
}

.report-verified-summary__list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.report-verified-summary__list .label {
    font-weight: 700;
    color: #102627;
    min-width: 9rem;
}

.report-verified-summary__list .value {
    color: rgba(16, 38, 39, 0.9);
    flex: 1;
}

[dir="rtl"] .report-verified-summary__list .label {
    min-width: 10rem;
}

[dir="rtl"] .ceo-img .ceo-name {
    bottom: 46px;
}

/* WhatsApp Float */
.whatsapp-float {
    position: fixed;
    right: 20px;
    bottom: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.25);
    z-index: 1040;
}
/* WhatsApp Float */

/* blog-list */
.blog-list-wrapper {
    gap: 30px;
}

.blog-list-wrapper .blog-list-item {
    padding: 30px;
    background-color: #fafafa;
}

.blog-list-wrapper .blog-list-item .blog-list-thumb img {
    width: 100%;
    max-width: 261px;
    height: 200px;
    object-fit: cover;
}

.blog-list-wrapper .blog-list-item .blog-list-content .title {
    font-size: 40px;
    line-height: 64px;
    letter-spacing: -1%;
    color: #121212;
}

.blog-list-wrapper .blog-list-item .blog-list-content .subtitle {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 3%;
    color: #717171;
}
/* blog-list */

/* blog-detail */
.blog-detail-section {
    padding: 80px 0 60px;
}

.related-articles-section {
    margin-bottom: 100px;
}

.related-articles-section .related-title {
    font-size: 40px;
    line-height: 64px;
    letter-spacing: -1%;
}

.related-articles-section .related-articles-box {
    gap: 94px;
}

.related-articles-section .related-articles-box .blog-list-item {
    padding: 30px 25px;
}

.related-articles-section .related-articles-box .title {
    font-size: 25px;
    line-height: 1.3;
}

.related-articles-section .related-articles-box .content {
    font-size: 19px;
    line-height: 1.3;
}

.related-articles-section .related-articles-box .related-article-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-break: break-word;
}

html[dir="rtl"] .blog-back-btn {
    flex-direction: row-reverse;
    justify-content: flex-end;
}
/* blog-detail */

.ceo-txt .svg-quote .svg-1 {
    inset-inline-start: -40px;
    top: -15px;
}

.ceo-txt .svg-quote .svg-2 {
    inset-inline-end: 0;
    bottom: 0;
}