@font-face {
    font-family : raleway-regular;
    src         : url('https://dev.shadisunnah.com/assets/fonts/raleway/static/Raleway-Regular.ttf');
}

@font-face {
    font-family : raleway-medium;
    src         : url('https://dev.shadisunnah.com/assets/fonts/raleway/static/Raleway-Medium.ttf');
}

@font-face {
    font-family : raleway-light;
    src         : url('https://dev.shadisunnah.com/assets/fonts/raleway/static/Raleway-Light-Font.ttf');
    /* src         : url('https://dev.shadisunnah.com/assets/fonts/raleway/static/Raleway-Medium.ttf'); */
}

@font-face {
    font-family : raleway-semibold;
    src         : url('https://dev.shadisunnah.com/assets/fonts/raleway/static/Raleway-SemiBold.ttf');
}

@font-face {
    font-family : hahmlet-medium;
    src         : url('https://dev.shadisunnah.com/assets/fonts/hahmlet/static/Hahmlet-Medium.ttf');
}

@font-face {
    font-family : hahmlet-regular;
    src         : url('https://dev.shadisunnah.com/assets/fonts/hahmlet/static/Hahmlet-Regular.ttf');
}

*, body {
    margin      : 0;
    border      : 0;
    font-family : raleway-regular, serif;
}

body {
    padding : 20px 0;
}

.hahmlet-medium {
    font-family : hahmlet-medium, serif;
}

.hahmlet-regular {
    font-family : hahmlet-regular, serif;
}

.raleway-light {
    font-family : raleway-light, serif;
}

.raleway-medium {
    font-family : raleway-medium, serif;
}

.raleway-semibold {
    font-family : raleway-semibold, serif;
}

.fs-40 {
    font-size : 40px !important;
}

.py-40 {
    padding : 4rem 0;
}

.p-40 {
    padding : 4rem;
}

.fs-16 {
    font-size : 16px;
}

.fs-12 {
    font-size : 12px;
}

.fs-18 {
    font-size : 18px;
}

.fs-20 {
    font-size : 20px;
}

.fs-24 {
    font-size : 24px;
}

.fs-54 {
    font-size : 54px;
}

.fs-56 {
    font-size : 56px;
}

.w-40 {
    width : 40px;
}

.h-40 {
    height : 40px;
}

.w-85 {
    width : 85%;
}

.w-90 {
    width : 90%;
}

.h-90 {
    height : 90%;
}

.navbar {
    background    : linear-gradient(
            90deg,
            rgba(93, 53, 148, 0.1) 0%, /* left purple */ #FAFAFA 40%,
            rgba(80, 175, 73, 0.1) 70%,
            rgba(93, 53, 148, 0.1) 100% /* right purple */
    );
    border-radius : 10px;
    min-height    : 75px;
}

.navbar a {
    font-size : 18px;
}

.bg-green {
    background : #50AF49 !important;
}

.bg-light-green {
    background : rgba(80, 175, 73, 0.2) !important;
}

.bg-purple {
    background : #5D3594 !important;
}

.color-green {
    color : #50AF49 !important;
}

.color-purple {
    color : #5D3594 !important;
}

.logo {
    width : 150px;
}

.banner {
    border-radius    : 10px;
    margin-top       : 20px;
    position         : relative;
    overflow         : hidden;
    background-color : #fafafa;
    height           : 600px;
}

.banner .group {
    top          : 582px;
    left         : -208px;
    width        : 910px;
    height       : 912px;
    opacity      : 0.4;
    position     : absolute;
    aspect-ratio : 1;
}

.banner .ellipse {
    top              : 0;
    left             : 378px;
    background-color : #5d3594;
    position         : absolute;
    width            : 533px;
    height           : 533px;
    border-radius    : 266.3px;
    filter           : blur(182.4px);
}

.banner .div {
    top              : 113px;
    left             : 0;
    background-color : #50af49;
    position         : absolute;
    width            : 533px;
    height           : 533px;
    border-radius    : 266.3px;
    filter           : blur(182.4px);
}

.banner .ellipse-2 {
    top              : 379px;
    left             : 354px;
    background-color : #ffffff;
    position         : absolute;
    width            : 533px;
    height           : 533px;
    border-radius    : 266.3px;
    filter           : blur(182.4px);
}

.banner .group-2 {
    top          : -447px;
    left         : 968px;
    width        : 820px;
    height       : 822px;
    transform    : rotate(-153.85deg);
    opacity      : 0.3;
    position     : absolute;
    aspect-ratio : 1;
}

.banner .ellipse-3 {
    position         : absolute;
    top              : 1px;
    left             : 340px;
    width            : 480px;
    height           : 480px;
    background-color : #5d3594;
    border-radius    : 240.02px;
    filter           : blur(164.4px);
}

.banner .ellipse-4 {
    position         : absolute;
    top              : 102px;
    left             : 1px;
    width            : 480px;
    height           : 480px;
    background-color : #50af49;
    border-radius    : 240.02px;
    filter           : blur(164.4px);
}

.mt-5rem {
    margin-top : 5rem;
}

.banner .ellipse-5 {
    position         : absolute;
    top              : 342px;
    left             : 319px;
    width            : 480px;
    height           : 480px;
    background-color : #ffffff;
    border-radius    : 240.02px;
    filter           : blur(164.4px);
}

.banner h1, .banner span {
    font-family : hahmlet-medium, serif;
    font-size   : 56px;
}

.banner p {
    font-size : 18px;
}

.banner img {
    width  : 100%;
    height : 100%;
}

.banner .action-buttons {

}

.banner .action-buttons a {

}


.quote {
    position         : relative;
    background-color : #ffffff;
    overflow         : hidden;
}

.quote i {
    color     : #B3B6B7;
    font-size : 66px;
}

.quote .group {
    position     : absolute;
    top          : -430px;
    left         : -226px;
    width        : 630px;
    height       : 631px;
    transform    : rotate(-164.37deg);
    aspect-ratio : 1;
    opacity      : 0.3;
}

.quote .ellipse {
    top              : 0;
    left             : 261px;
    background-color : #5d3594;
    position         : absolute;
    width            : 369px;
    height           : 369px;
    border-radius    : 184.32px/184.31px;
    filter           : blur(126.24px);
}

.quote .div {
    top              : 78px;
    left             : 0;
    background-color : #50af49;
    position         : absolute;
    width            : 369px;
    height           : 369px;
    border-radius    : 184.32px/184.31px;
    filter           : blur(126.24px);
}

.quote .ellipse-2 {
    top              : 263px;
    left             : 245px;
    background-color : #ffffff;
    position         : absolute;
    width            : 369px;
    height           : 369px;
    border-radius    : 184.32px/184.31px;
    filter           : blur(126.24px);
}

.quote .group-2 {
    position     : absolute;
    top          : -398px;
    left         : 1108px;
    width        : 630px;
    height       : 631px;
    transform    : rotate(-140.36deg);
    aspect-ratio : 1;
    opacity      : 0.3;
}

.quote .ellipse-3 {
    position         : absolute;
    top              : 1px;
    left             : 261px;
    width            : 369px;
    height           : 369px;
    background-color : #5d3594;
    border-radius    : 184.32px/184.31px;
    filter           : blur(126.24px);
}

.quote .ellipse-4 {
    position         : absolute;
    top              : 78px;
    left             : 1px;
    width            : 369px;
    height           : 369px;
    background-color : #50af49;
    border-radius    : 184.32px/184.31px;
    filter           : blur(126.24px);
}

.gap-7 {
    gap : 7rem;
}

.approach-to-matchmaking {

}

.approach-to-matchmaking .accordion {

}

.approach-to-matchmaking .accordion .accordion-item {
    background : #FAFAFA;
}

.approach-to-matchmaking .accordion .accordion-header button {
    background : #FAFAFA;
}

.approach-to-matchmaking .accordion .accordion-header button:focus {
    box-shadow : none;
}

.approach-to-matchmaking .accordion .accordion-header .accordion-button:after {
    background-color    : rgba(80, 175, 73, 0.2);
    color               : #000 !important;
    width               : 30px;
    height              : 30px;
    border-radius       : 50%;
    display             : flex;
    justify-content     : center;
    align-items         : center;
    padding             : 0;
    text-align          : center;
    top                 : 0;
    background-position : center center;
    background-size     : 50%;
}

.approach-to-matchmaking .accordion .accordion-header .accordion-button:not(.collapsed) {
    color : #5d3594;
}

.how-it-works {
    background : #FAFAFA;
    position   : relative;
}

.how-it-works {
    position         : relative;
    background-color : #ffffff;
    overflow         : hidden;
}

.how-it-works i {
    color     : #B3B6B7;
    font-size : 66px;
}

.how-it-works .group {
    bottom       : 50px;
    left         : 0;
    transform    : rotate(15.63deg);
    position     : absolute;
    width        : 630px;
    height       : 631px;
    aspect-ratio : 1;
    opacity      : 0.3;
}

.how-it-works .group .ellipse {
    bottom           : 0;
    left             : 0;
    z-index          : 1;
    background-color : #5d3594;
    position         : absolute;
    width            : 369px;
    height           : 369px;
    border-radius    : 184.32px/184.31px;
    filter           : blur(126.24px);
}

.how-it-works .group .div {
    bottom           : 78px;
    left             : 0;
    background-color : #50af49;
    position         : absolute;
    width            : 369px;
    height           : 369px;
    border-radius    : 184.32px/184.31px;
    filter           : blur(126.24px);
}

.how-it-works .group .ellipse-2 {
    bottom           : 63px;
    left             : 245px;
    background-color : #ffffff;
    position         : absolute;
    width            : 369px;
    height           : 369px;
    border-radius    : 184.32px/184.31px;
    filter           : blur(126.24px);
}

.how-it-works .group-2 {
    bottom       : 22px;
    left         : 1218px;
    transform    : rotate(39.64deg);
    position     : absolute;
    width        : 630px;
    height       : 631px;
    aspect-ratio : 1;
    opacity      : 0.3;
}

.how-it-works .group-2 .ellipse-3 {
    position         : absolute;
    bottom           : 78px;
    left             : 1px;
    width            : 369px;
    height           : 369px;
    background-color : #50af49;
    border-radius    : 184.32px/184.31px;
    filter           : blur(126.24px);
}

.bg-custom-gray {
    background : #FAFAFA;
}

.fs-100 {
    font-size : 100px;
}

.fs-18 {
    font-size : 18px;
}

.h-350 {
    height : 350px;
}

.package-button {
    background : rgba(80, 175, 73, 0.2);
    height     : 50px;
}

.pricing-features li:before {
    display         : inline-block;
    flex-shrink     : 0;
    width           : 20px;
    height          : 20px;
    margin-right    : 10px;
    vertical-align  : middle;
    background      : url('https://dev.shadisunnah.com/assets/images/pricing-checkbox.webp') no-repeat left center;
    background-size : contain;
    content         : '';
}

.popular .pricing-features li:before {
    display         : inline-block;
    flex-shrink     : 0;
    width           : 20px;
    height          : 20px;
    margin-right    : 10px;
    vertical-align  : middle;
    background      : url('https://dev.shadisunnah.com/assets/images/pricing-checkbox-popular.webp') no-repeat left center;
    background-size : contain;
    content         : '';
}

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

.call-to-action {
    background      : url('https://dev.shadisunnah.com/assets/images/family.webp') no-repeat center center;
    background-size : cover;
    height          : 650px;
}

.blog-footer {
    background      : url('https://dev.shadisunnah.com/assets/images/blog-footer.webp') no-repeat center center;
    background-size : cover;
    height          : 650px;
}

.social-media-icons a {
    width  : 32px;
    height : 32px;
}

.nav-link.active {

}

.register-icon {
    transform : rotate(45deg);
}

.contact-us {
    position         : relative;
    height           : 500px;
    background-color : #ffffff;
    overflow         : hidden;
    margin-top       : 20px;
}

.blog-banner {
    position         : relative;
    height           : 600px;
    background-color : #ffffff;
    overflow         : hidden;
    margin-top       : 20px;
}

.blog-banner .group, .blog-footer .group, .contact-us .group {
    top          : 582px;
    left         : -208px;
    width        : 910px;
    height       : 912px;
    opacity      : 0.4;
    position     : absolute;
    aspect-ratio : 1;
}

.blog-banner .ellipse, .blog-footer .ellipse, .contact-us .ellipse {
    top              : 0;
    left             : 378px;
    background-color : #5d3594;
    width            : 533px;
    height           : 533px;
    border-radius    : 266.3px;
    position         : absolute;
    filter           : blur(182.4px);
}

.blog-banner .div, .blog-footer .div, .contact-us .div {
    top              : 113px;
    left             : 0;
    background-color : #50af49;
    position         : absolute;
    width            : 533px;
    height           : 533px;
    border-radius    : 266.3px;
    filter           : blur(182.4px);
}

.blog-banner .ellipse-2, .blog-footer .ellipse-2, .contact-us .ellipse-2 {
    top              : 379px;
    left             : 354px;
    background-color : #ffffff;
    position         : absolute;
    width            : 533px;
    height           : 533px;
    border-radius    : 266.3px;
    filter           : blur(182.4px);
}

.blog-banner .group-2, .blog-footer .group-2, .contact-us .group-2 {
    top          : -447px;
    left         : 968px;
    width        : 820px;
    height       : 822px;
    transform    : rotate(-153.85deg);
    opacity      : 0.3;
    position     : absolute;
    aspect-ratio : 1;
}

.blog-banner .ellipse-3, .blog-footer .ellipse-3, .contact-us .ellipse-3 {
    top              : 1px;
    left             : 340px;
    background-color : #5d3594;
    position         : absolute;
    width            : 480px;
    height           : 480px;
    border-radius    : 240.02px;
    filter           : blur(164.4px);
}

.blog-banner .ellipse-4, .blog-footer .ellipse-4, .contact-us .ellipse-4 {
    position         : absolute;
    top              : 102px;
    left             : 1px;
    width            : 480px;
    height           : 480px;
    background-color : #5d3594;
    border-radius    : 240.02px;
    filter           : blur(164.4px);
}

.blog-banner .ellipse-5, .blog-footer .ellipse-5, .contact-us .ellipse-5 {
    position         : absolute;
    top              : 342px;
    left             : 319px;
    width            : 480px;
    height           : 480px;
    background-color : #ffffff;
    border-radius    : 240.02px;
    filter           : blur(164.4px);
}

.blog-banner img {
    height : 600px;
}

.contact-us img {
    height : 500px;
}

.blog-banner input {
    width         : 430px;
    height        : 50px;
    border-radius : 4px !important;
    box-shadow    : none !important;
    border        : 1px solid rgba(33, 32, 31, 0.1) !important;
}

.h-50-px {
    height        : 50px;
    border-radius : 4px;
}

.search-blog-btn i {
    background    : rgba(255, 255, 255, 0.2);
    width         : 40px;
    height        : 40px;
    border-radius : 4px;
}

.featured-blogs {

}

.featured-badge {
    background-color : rgba(80, 175, 73, 0.1);
}

.fs-13 {
    font-size : 13px;
}

.fs-10 {
    font-size : 10px;
}

.h-40-px {
    height : 40px;
}

.color-custom-black {
    color : #000A0D;
}

.clamp-3 {
    display            : -webkit-box;
    -webkit-line-clamp : 3;
    -webkit-box-orient : vertical;
    overflow           : hidden;
}

.clamp-3.expanded {
    -webkit-line-clamp : unset;
}

.fs-31 {
    font-size : 31px;
}

.blog-categories {

}

.blog-categories ul li {

}

.blog-categories ul li.active {

}

.blog-categories img.blog-image {
    height : 250px;
}

.blog-footer input {
    width         : 450px;
    height        : 50px;
    background    : rgba(255, 255, 255, 0.1);
    border        : 1px solid rgba(255, 255, 255, 0.1);
    border-radius : 4px;
    box-shadow    : none;
    color         : #ffffff !important;
}

.blog-footer input::placeholder {
    color : #ffffff !important;
}

.blog-footer input:focus {
    background : rgba(255, 255, 255, 0.1);
    border     : 1px solid rgba(255, 255, 255, 0.1);
    box-shadow : none;
}

.featured-badge:before {
    content : "• ";
}

.contact-us .group {
    top          : 150px;
    left         : -208px;
    width        : 910px;
    height       : 912px;
    opacity      : 0.4;
    position     : absolute;
    aspect-ratio : 1;
}

.contact-us .ellipse {
    top              : 0;
    left             : 378px;
    background-color : #5d3594;
    width            : 533px;
    height           : 533px;
    border-radius    : 266.3px;
    position         : absolute;
    filter           : blur(182.4px);
}

.contact-us .div {
    top              : 113px;
    left             : 0;
    background-color : #50af49;
    position         : absolute;
    width            : 533px;
    height           : 533px;
    border-radius    : 266.3px;
    filter           : blur(200px);
}

.contact-us .ellipse-2 {
    top              : 379px;
    left             : 354px;
    background-color : #ffffff;
    position         : absolute;
    width            : 533px;
    height           : 533px;
    border-radius    : 266.3px;
    filter           : blur(182.4px);
}

.contact-us .group-2 {
    top          : -447px;
    left         : 968px;
    width        : 820px;
    height       : 822px;
    transform    : rotate(-153.85deg);
    opacity      : 0.3;
    position     : absolute;
    aspect-ratio : 1;
}

.contact-us .ellipse-3 {
    top              : 1px;
    left             : 340px;
    background-color : #5d3594;
    position         : absolute;
    width            : 480px;
    height           : 480px;
    border-radius    : 240.02px;
    filter           : blur(164.4px);
}

.contact-us .ellipse-4 {
    position         : absolute;
    top              : 102px;
    left             : 1px;
    width            : 480px;
    height           : 480px;
    background-color : #50af49;
    border-radius    : 240.02px;
    filter           : blur(164.4px);
}

.contact-us .ellipse-5 {
    position         : absolute;
    top              : 342px;
    left             : 319px;
    width            : 480px;
    height           : 480px;
    background-color : #ffffff;
    border-radius    : 240.02px;
    filter           : blur(164.4px);
}

.fs-14 {
    font-size : 14px;
}

.label-required::after {
    content : " *";
    color   : #ff0000;
}

.contact-form input, .contact-form textarea, .contact-form select {
    background : transparent;
    border     : 1px solid rgba(0, 10, 13, 0.1);
    box-shadow : none;
}

.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
    background : transparent;
    border     : 1px solid rgba(0, 10, 13, 0.1);
    box-shadow : none;
}

.contact-form button {
    width      : 165px;
    height     : 50px;
    text-align : center;
}

.login-banner {
    background      : url('https://dev.shadisunnah.com/assets/images/sign-in-banner-2.webp') no-repeat top center;
    background-size : cover;
    height          : calc(100vh - 40px);
}

.register-banner {
    background      : url('https://dev.shadisunnah.com/assets/images/register-banner.webp') no-repeat top center;
    background-size : cover;
    height          : calc(100% - 40px);
}

.verify-email-page {
    background      : url('https://dev.shadisunnah.com/assets/images/verify-email-banner.webp') no-repeat top center;
    background-size : cover;
    height          : calc(100vh - 40px);
}

.documents-upload-page {
    background      : url('https://dev.shadisunnah.com/assets/images/verify-email-banner.webp') no-repeat top center;
    background-size : cover;
    height          : calc(100%);
}

.verification-in-progress {
    background      : url('https://dev.shadisunnah.com/assets/images/verification-in-progress.webp') no-repeat top center;
    background-size : cover;
    height          : calc(100vh - 40px);
}

.login-banner {
    background      : url('https://dev.shadisunnah.com/assets/images/sign-in-banner-2.webp') no-repeat top center;
    background-size : cover;
    height          : calc(100vh - 40px);
}

.fs-28 {
    font-size : 28px;
}

.onboarding input, .onboarding select {
    height        : 44px;
    border-radius : 8px !important;
    box-shadow    : none !important;
    border        : 1px solid rgba(33, 32, 31, 0.1) !important;
    font-family   : raleway-light, serif;
    font-size     : 16px;
}

.onboarding select {
    height : 41px !important;
}

.onboarding input::placeholder {
    font-family : raleway-light, serif;
    font-size   : 16px;
}

.onboarding input:focus {
    background : rgba(255, 255, 255, 0.1);
    border     : 1px solid rgba(255, 255, 255, 0.1);
    box-shadow : none;
}

.onboarding input[type='checkbox'] {
    height        : 15px;
    width         : 15px;
    border-radius : 0 !important;
    border        : 1px solid rgba(33, 32, 31, 0.1) !important;
    margin-top    : 4px;
}

.onboarding .input-error {
    border-color : #ea5455 !important;
}

.toggle-password {
    position : absolute;
    top      : 32px;
    right    : 0;
    border   : 0;
}

.verify-email-image {

}

.verify-email-image img {
    width  : 250px;
    height : 250px;
}

.upload-container {
    max-width  : 600px;
    margin-top : 50px;
}

/* The dashed border container */
.profile-border-p4 {
    border   : 1px dashed #adb5bd;
    position : relative;
}

/* Profile Image Container */
.avatar-wrapper {
    position : relative;
    cursor   : pointer;
}

.avatar-circle {
    width            : 100%;
    height           : 100%;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    background-color : #fff;
}

.avatar-circle img {
    width         : 70px;
    height        : 70px;
    border-radius : 50%;
    object-fit    : cover;
}

/* Browse link styling */
.browse-text {
    color           : #2563EB;
    text-decoration : underline;
    cursor          : pointer;
    font-weight     : 600;
}

/* Hide the actual file input */
#profile-upload {
    display : none;
}

.verification-page img {
    height : 250px;
}

.parent-avatar {
    width      : 40px;
    height     : 40px;
    object-fit : cover;
}

.color-red {
    color : #FA2323;
}

.sidebar {
    padding         : 0 24px;
    background      : url('https://dev.shadisunnah.com/assets/images/sidebar.webp') no-repeat left center;
    background-size : cover;
}

.sidebar form {

}

.sidebar form .input-group-prepend {

}

.sidebar form .input-group-prepend span {
    height                     : 50px;
    background                 : #fff;
    border-right               : 0;
    border-top-right-radius    : 0;
    border-bottom-right-radius : 0;
}

.sidebar form input {
    height                     : 50px;
    box-shadow                 : none !important;
    border                     : 1px solid rgba(33, 32, 31, 0.1) !important;
    color                      : #000A0D;
    border-top-left-radius     : 0 !important;
    border-bottom-left-radius  : 0 !important;
    border-top-right-radius    : 4px !important;
    border-bottom-right-radius : 4px !important;
    border-left                : 0 !important;
}

.sidebar form input::placeholder {
    color : #000A0D !important;
}

.sidebar form input:focus {
    background : #FFFFFF;
    box-shadow : none;
}

.parents-form input, .parents-form select {
    height        : 50px;
    box-shadow    : none !important;
    border        : 1px solid rgba(33, 32, 31, 0.1) !important;
    color         : rgba(0, 10, 13, 0.8);
    border-radius : 4px !important;
    background    : transparent;
}

.parents-form input::placeholder {
    color : rgba(0, 10, 13, 0.8) !important;
}

.parents-form input:focus, .parents-form select:focus {
    background : transparent;
    box-shadow : none;
}

.parents-form .select2-container {
    width : 100% !important;
}

/* visible selection box */
.parents-form .select2-container .select2-selection--single {
    height        : 50px !important;
    border        : 1px solid rgba(33, 32, 31, 0.1) !important;
    border-radius : 4px !important;
    background    : transparent !important;
    box-shadow    : none !important;
    display       : flex;
    align-items   : center;
}

/* text alignment */
.parents-form .select2-selection__rendered {
    line-height  : normal !important;
    padding-left : 12px !important;
    color        : rgba(0, 10, 13, 0.8);
}

/* arrow alignment */
.parents-form .select2-selection__arrow {
    height : 50px !important;
}

.parents-form textarea {
    box-shadow    : none !important;
    border        : 1px solid rgba(33, 32, 31, 0.1) !important;
    color         : rgba(0, 10, 13, 0.8);
    border-radius : 4px !important;
    background    : transparent;
    resize        : none;
}

.parents-form textarea::placeholder {
    color : rgba(0, 10, 13, 0.8) !important;
}

.select2-selection__placeholder {
    color : rgba(0, 10, 13, 0.8) !important;
}

.parents-form textarea:focus {
    background : transparent;
    box-shadow : none;
}

.sidebar li a.active {
    background : rgba(93, 53, 148, 0.1);
    color      : #5D3594;
}

.sidebar li a:hover {
    background : rgba(93, 53, 148, 0.1);
}

.w-px-100 {
    width : 100px;
}

.h-px-100 {
    height : 100px;
}

.w-px-84 {
    width : 84px;
}

.cursor-pointer {
    cursor : pointer;
}

.profiles-notebook {
    width  : 280px;
    height : 220px;
}

.py-100 {
    padding-top    : 100px;
    padding-bottom : 100px;
}

.fs-30 {
    font-size : 30px;
}

.w-32 {
    width : 32px;
}

.h-32 {
    height : 32px;
}

.w-px-80 {
    width : 80px;
}

.h-px-80 {
    height : 80px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    outline : none;
}

.select2-dropdown {
    border : 1px solid rgba(33, 32, 31, 0.1) !important;
}

.parents-form .input-error {
    border-color : #ea5455 !important;
}

.input-error {
    border-color : #ea5455 !important;
}

.under-review {
    background : rgba(221, 151, 1, 0.1);
    color      : #DD9701;
}

.profile-analytics {

}

.profile-analytics li {
    padding-right : 15px;
    padding-left  : 15px;
    width         : 25%;
}

.bg-light-purple {
    background : rgba(93, 53, 148, 0.2);
}

.profile-excerpt {
    color : rgba(0, 10, 13, 0.6);
}

.parent-profile #dropdownMenuButton {

}

#dropdownMenuButton:hover, #dropdownMenuButton:active, #dropdownMenuButton:focus, #dropdownMenuButton:focus-within {
    background : transparent;
}

.wizard {

}

.wizard ul {

}

.wizard ul li {

}

.wizard ul li .step-no {
    width         : 28px;
    height        : 28px;
    background    : #9E9E9E;
    border-radius : 50%;
}

.wizard ul li .step-no.step-purple {
    background-color : #5D3594;
}

.wizard ul li .step-no.step-green {
    background-color : #50AF49;
}

.wizard ul li .step-border {
    width      : 100%;
    height     : 3px;
    background : #9E9E9E;
}

.wizard .step-progress {
    height : 3px;
}

.wizard ul li p {

}

.search-hobbies {

}

.search-highlight {
    border           : 2px solid #5D3594 !important; /* purple border */
    background-color : #f3e8ff !important;
    padding-left     : 10px !important;
    padding-right    : 10px;
    padding-top      : 10px;
    border-radius    : 8px;
}

.search-highlight-text {
    font-weight : 600;
    color       : #5D3594 !important;
}

button:active {
    border : 0 !important;
}

.success-icon {
    height        : 50px;
    background    : #50AF49;
    padding       : 10px;
    border-radius : 8px;
}

.error-icon {
    height        : 50px;
    padding       : 10px;
    border-radius : 8px;
}

.custom-switch-input {
    display : none;
}

.custom-switch {
    width            : 40px;
    height           : 20px;
    background-color : #50AF49;
    border-radius    : 50px;
    position         : relative;
    cursor           : pointer;
    transition       : background-color 0.3s ease;
}

.custom-switch::after {
    content          : "";
    width            : 15px;
    height           : 15px;
    background-color : white;
    position         : absolute;
    top              : 2.4px;
    left             : 2px;
    border-radius    : 50%;
    transition       : transform 0.3s ease;
    box-shadow       : 0 2px 5px rgba(0, 0, 0, 0.2);
}

.custom-switch-input:checked + .custom-switch {
    background-color : #5D3594; /* Bootstrap primary */
}

.custom-switch-input:checked + .custom-switch::after {
    transform : translateX(22px);
}

.profile-images {
    border : 1px dashed #9CA3AF;
}

@media only screen and (max-width : 767px) {
    .banner {
        height : auto;
    }
    
    .banner img {
        margin-top : 25px;
    }
    
    .why-us .gap-7 {
        gap : 0;
    }
    
    .quote .quotation {
        width      : 100% !important;
        font-size  : 22px !important;
        text-align : left !important;
    }
    
    .approach-to-matchmaking {
        padding-top    : 0 !important;
        padding-bottom : 20px;
    }
    
    .approach-to-matchmaking .title {
        width : 100% !important;
    }
    
    .how-it-works .title {
        font-size : 36px !important;
    }
    
    .how-it-works .tagline {
        width : 100% !important;
    }
    
    .engagement-image {
        margin-top : 0 !important;
    }
    
    .rooted-faith {
        width     : 100% !important;
        font-size : 22px !important;
    }
    
    .testimonials .testimonial {
        height  : auto !important;
        padding : 20px 15px;
    }
    
    .testimonials .testimonial p {
        font-size : 22px !important;
    }
    
    .testimonials .testimonial .testimonial-author p {
        font-size : 16px !important;
    }
    
    .pricing {
    
    }
    
    .pricing .title {
        font-size : 36px !important;
        width     : 100% !important;
    }
    
    .pricing .tagline {
        width : 100% !important;
    }
    
    .pricing .prices {
        margin-top : 20px !important;
    }
    
    .pricing .price {
        margin-bottom : 15px;
    }
    
    .call-to-action {
        height       : 400px;
        padding-left : 20px !important;
    }
    
    .call-to-action h1 {
        font-size : 36px;
    }
    
    .call-to-action p {
        font-size : 16px;
    }
    
    .footer h3 {
        margin-top : 15px;
    }
    
    .footer-bottom {
        text-align : center;
    }
    
    .footer-bottom ul {
        justify-content : center !important;
        margin-top      : 10px;
    }
    
    .px-4 {
        padding-left  : 15px !important;
        padding-right : 15px !important;
    }
    
    .blog-categories ul {
        width    : 100%;
        overflow : auto;
    }
    
    .blog-banner input {
        width : 100%;
    }
    
    .blog-banner .search-form, .blog-banner .search-form form {
        width : 100%;
    }
    
    .blog-banner .search-form, .blog-banner .search-form form button {
    
    }
    
    .blog-banner .search-form div {
        flex-direction : column !important;
        width          : 100%;
        align-items    : start !important;
    }
    
    .blog-banner {
        height         : 100%;
        padding-bottom : 20px;
    }
    
    .featured-blog-image {
        height        : auto !important;
        margin-bottom : 20px;
    }
    
    .blog-footer {
        padding-left  : 15px !important;
        padding-right : 15px !important;
    }
    
    .blog-footer h1 {
        font-size : 36px;
        width     : 100% !important;
    }
    
    .blog-footer p {
        width : 100% !important;
    }
    
    .blog-footer input {
        width : 100% !important;
    }
    
    .blog-header {
    
    }
    
    .blog-header h1 {
        margin-bottom : 15px;
    }
    
    #contact-us .address {
        padding-top : 25px !important;
    }
    
    .contact-us h1 {
        font-size : 40px;
    }
    
    #contact-us .address ul {
        flex-direction  : column;
        justify-content : start !important;
        align-items     : start !important;
        gap             : 20px;
    }
    
    #contact-us .address ul li {
        border : 0 !important;
    }
    
    .contact-us {
        justify-content : center;
        display         : flex;
        flex-direction  : column;
        height          : auto;
        padding         : 40px 0 15px 0;
    }
    
    .right-side {
        padding : 40px 0 0 0;
    }
    
    .right-side h1 {
        width : 100% !important;
    }
    
    .overview h1 {
        font-size : 36px !important;
    }
    
    .overview img {
        width : 100%;
    }
    
    .first-overview {
    
    }
    
    .first-overview img {
        margin-bottom : 2rem;
    }
    
    .second-overview {
        margin-top : 2rem !important;
    }
    
    .second-overview img {
        margin-top : 2rem;
    }
    
    .login-banner .content {
        width : 100%;
    }
    
    .register-form {
        padding : 0 !important;
    }
    
    .sidebar {
        height        : 100%;
        border-radius : 0 !important;
    }
    
    .settings-header {
        flex-direction  : column !important;
        justify-content : start !important;
        align-items     : start !important;
        margin-bottom   : 20px;
    }
    
    .wizard ul {
        flex-direction  : column !important;
        justify-content : start !important;
        align-items     : start !important;
    }
    
    .wizard ul li {
        width         : 100%;
        margin-bottom : 15px;
        background    : rgba(93, 53, 148, 0.2);
        padding       : 10px;
        border-radius : 8px;
    }
    
    .active-wizard {
        background : rgba(80, 175, 73, 0.2) !important;
    }
    
    .profile-images .image-content {
        width : 100% !important;
    }
}