@media (max-width: 576px) {
    .become-host {
        width: 100%;
    }

    .detail-label.m-57 {
        min-width: 82px;
    }

    .spinner-control {
        margin-top: 10px;
        justify-content: start !important;
    }

    .footer-buttons .btn {
        display: block;
        margin: 10px auto;
        padding: 6px 6px;
        font-size: 15px;
    }

    .footer-nav {
        gap: 10px;
        font-size: 0.85rem;
    }

    .overview #wedding-event-section .day-event-header {
        flex-direction: column;
    }


}

@media (max-width: 511px) {
    .dfacjb span {
        top: 20px !important;
    }

    .dfacjb .thumbnail-title {
        margin-bottom: 10px;
    }
}

@media (max-width: 767px) {

    .totl-amt-dt .ttl-dt-1,
    .totl-amt-dt .ttl-dt-3 {
        text-align: left;
    }



    .culture-img-data {
        height: 370px;
    }

    .qt-tool-tip {
        top: 15px !important;
        right: 0% !important;
    }

    #guest_buddy_details_form .line {
        flex-direction: column;
        flex-direction: column;
        align-items: start !important;
    }

    .about-inner {
        padding: 0 0px !important;
    }

    .about-content h2 {
        font-size: 22px !important;
        line-height: 34px !important;
    }

    .culture-rw .fw-bold {
        line-height: 27px;
    }

    .border-wrapper {
        width: 100% !important;
    }

    .custom-checkbox-card .events-datas {
        width: 100%;
    }

    .kc .detail-label {
        width: 165px !important;
    }

    .tab {
        font-size: 14px !important;
    }

    .sd .detail-label {
        width: 121px !important;
    }

    .pyxs5 {
        padding-top: 2rem;
    }

    .guest-profile-section .card-custom {
        margin: 15px;
    }

    .guest-profile-section .profile-section {
        padding: 20px;
    }

    .guest-profile-section .description-guest {
        padding: 10px;
    }

    .description-guest {
        padding: 0px;
    }

    .select-date {
        width: 100%;
    }

    .wedding-info {
        width: 100%;
    }

    .contact-us-data .form-group {

        margin-bottom: 10px;
    }

    .start-date {
        width: 50% !important;
    }

    .to {
        display: none;
    }

    .end-date {
        width: 50% !important;
    }

    .search-select {
        display: none;
    }

    .wedding-intro h2 {

        font-size: 20px;
    }

    .contain-1 {
        width: 100%;
    }

    .card-flex {
        flex-direction: column-reverse;
        display: flex;
    }

    .prof-btn {
        width: 100%;
        padding: 0px;
    }

    .wedding-info p {

        font-size: 14px;
    }

    .list-disc li {
        font-size: 14px;
        line-height: 28px;
    }

    .magic-wedding-wrapper {

        padding: 30px 20px;

    }

    .culture-heading {
        text-align: left;
    }

    .culture-main {
        padding-top: 0px;
    }

    .about-us {
        padding: 15px 15px;
    }

    .btn-wedd-downlode {
        width: 100%;
    }

    .req-cancel {
        margin-top: 10px;
        width: 100%;
        height: auto !important;
    }

    .btn-wedd-downlode {
        height: auto !important;
    }

    .nafunique-accordion {
        width: auto;
    }

    .pay-option {
        display: flex;
        flex-direction: column;
    }

    .payment-option {
        margin-bottom: 10px;
    }



    .events-p {
        font-size: 13px;
        margin-bottom: 10px !important;
    }

    p {
        font-size: 13px;
    }

    strong {
        font-size: 14px;
    }

    .overview .story-text {
        text-align: justify;
    }

    .overview .event-datetime {
        width: 100%;
    }

    .overview .venue-details {
        width: 100%;
    }

    .overview .ceremony-details {
        width: 100%;
    }

    .overview .contact-details {
        gap: 0px;
    }

    .overview .event-info {
        margin: 0px;
    }

    .view-header {
        margin-bottom: 10px;
    }

    .overview .contact-details {
        flex-direction: column;
    }

    .overview .contact-column {
        width: 100%;
    }

    .navbar-brand .img-fluid {
        max-width: 66%;

    }

    .overview .action-buttons {
        display: flex;
        flex-direction: column;
    }

    .action-buttons .dropdown {
        margin-bottom: 10px;
    }

    .wedding-descript {
        line-height: 28px;
    }

    .sub-ttl {
        line-height: 28px;
    }

    .become-host .progress-indicator {
        justify-content: left;
    }

    .info-hr {
        border-bottom: 1px solid #d5dceb;
        margin-top: 15px;
    }

    .spinner-control {
        /* margin-top: 10px; */
    }

    .contact-us-data h2.title {
        font-size: 20px;
        line-height: 28px;
    }

    .subscribe-title {
        font-size: 20px !important;
        line-height: 28px;
    }

    .newsletter-section {
        padding: 15px 17px;
    }

    .contact-us-data form {
        width: 100%;
        margin-top: 15px;
    }

    .payment-option {
        margin-bottom: 10px;
    }

    .become-host .highlighted .radio-group {

        margin-top: 17px;
        justify-content: start;
    }

    .become-host .tab-content {
        padding-top: 5px;
    }

    .become-host .date-time-group {
        display: flex;
        flex-direction: column;
    }

    .become-host .page-title {
        font-size: 18px;
        line-height: 31px;

    }

    .become-host .form-actions {
        display: flex;
        flex-direction: column;
    }

    .become-host .form-label {
        line-height: 28px;
    }

    .terms-checkbox .form-check {
        display: flex;
        gap: 19px;
    }

    .terms-checkbox {
        margin-bottom: 20px;
    }

    .prof-btn {
        height: 38px;
        font-size: 15px;
    }

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

    .prof-ttl {

        font-size: 18px;
    }

    .prof-mail {
        font-size: 14px;
    }

    .become-host .input-rows {

        padding: 25px 10px;
    }

    .row-col {
        display: block;
        margin: 0px;
    }

    .privacy-header {

        font-size: 14px;
        line-height: 28px;
        text-align: start;
    }

    .privacy-card h3 {
        text-align: start;
        font-size: 15px;
        line-height: 28px;
    }

    .accordion-button {
        line-height: 22px;
        font-size: 14px;
        padding: 10px !important;
    }

    .about-row {
        flex-direction: column-reverse;
    }


    h2 {
        font-size: 18px;
        line-height: 28px;
    }

    .text-center p {
        text-align: center;
    }

    .guest-content h2 {
        font-size: 20px;

    }

    .guest-content p {
        font-size: 14px;
    }

    .terms-box {
        text-align: start;
        font-size: 14px;
        line-height: 28px;
        padding: 10px;
    }

    .ct-img {
        display: none;
    }

    .privacy-card {
        text-align: start;
        font-size: 14px;
        line-height: 28px;

    }

    .navbar-toggler-icon {
        display: inline-block;
        width: 1em;
        height: 1em;
    }

    .wedding-description h3 {
        font-size: 14px;
    }

    p {
        line-height: 28px;
        text-align: start;
    }

    .become-host .form-container {
        padding: 0px;
    }

    .guest-content {
        position: inherit;
        top: 12px;
        right: 0;
        z-index: 99;
        width: 100%;
        height: auto;
        padding-top: 22px;
        padding: 0px 10px;
        padding-bottom: 22px;
        background: rgba(248, 249, 250, 1);
        gap: 3px;
        margin-bottom: 5px;
    }

    .pt-5 {
        padding-top: 1rem !important;
    }

    .mb-ct {
        width: 50%;
        margin: 25px 0px;
    }

    .img-container {
        display: flex;
        justify-content: center;
    }

    .details-card {
        margin: 0px !important;
        height: auto;
    }

    .filter-bar {
        text-align: left;
    }

    .filter-bar .col-auto {
        margin-bottom: 0px;
    }

    .container {
        max-width: 100%;
    }

    .contact-form {
        padding: 0px;
        margin: 0px;
    }

    .info-section h5 {
        text-align: left;
    }

    .px-4 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }

    .desp-p {
        padding: 0px 12px !important;
    }

    .mt-5 {
        margin-top: 1rem !important;
    }

    .p-4 {
        padding: 0.5rem !important;
    }

    .become-host .file-info {
        padding-top: 14px;
        padding-right: 17px;
        padding-bottom: 12px;
        padding-left: 7px;
        margin-bottom: 20px;
    }

    .mt-4 {
        margin-top: 0.5rem !important;
    }

    .py-4 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .p-5 {
        padding: 2rem !important;
    }

    .day-events h5 {
        text-align: center;
    }

    h5 {
        text-align: center;
    }

    .wedding-header p {
        font-size: 0.9rem;
    }

    .heading-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 36px;
        line-height: 44px;
    }

    #publishDropdown {
        width: 98%;
        margin: 6px auto;
        justify-content: center;
    }

    .downlode-section .day-events .row.justify-content-end {
        justify-content: center !important;
    }

    .downlode-section .btn-wedd-downlode {
        width: max-content;
    }

    .btn-wedd-downlode {
        width: 100%;
    }

    .otp-boxes input {

        font-size: 18px;
    }

    .details {
        font-size: 11px;
    }

    .wedding-header h3 {
        font-size: 20px;
        line-height: 28px;
    }

    .guest-section {
        padding: 10px 0;
    }

    .mb-5 {
        margin-bottom: 1rem !important;
    }

    .culture-dtl .col-lg-4 {
        height: auto;
    }

    .culture-main {
        height: auto;
    }

    .detail-item {
        font-size: 14px;
        line-height: 28px;
    }

    /* .dt-time {
        padding: 0px !important;
    } */

    .become-host .radio-group {
        display: flex;

        flex-wrap: wrap;
    }

    .wedding-header {
        padding: 0px;
    }

    .py-5 {
        padding-bottom: 1rem !important;
    }

    .auth-left {
        width: 100%;
        padding-top: 7rem;
    }

    .auth-right {
        padding: 1rem 1rem;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .heading-01 {
        font-size: 23px;
    }

    label {
        font-size: 13px;
    }

    .social-buttons {
        display: block;
    }

    .social-btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .auth-container {
        display: block;
    }

    .filter-bar {
        /* flex-direction: column; */
        align-items: stretch;
    }

    .wedding-slider {
        /* gap: 16px; */
        gap: 70px 0;
    }

    .wedding-card {
        width: 100%;
    }

    .wedding-intro {
        padding: 0px;
    }


    .wedding-type {
        text-align: left;
    }

    .hero-content {

        padding: 22vh 0%;
    }

    .hero-content h1 {
        font-size: 25px;
    }

    .bcom-host {
        font-size: 15px;
    }

    .magic-feature-box {
        padding: 0px;
    }

    .magic-wedding-wrapper h2 {
        font-size: 17px;
        line-height: 25px;
    }

    .hero-section {
        position: relative;
        height: auto;
        overflow: hidden;
    }

    .hero-content p {
        font-size: 15px;
        line-height: 23px;
    }

    .filter-bar .col-auto {
        width: 100%;
    }

    .lang-tool {
        margin-top: -16px;
    }

    .filter-bar input,
    .filter-bar select {
        border: 1px solid #e5e5e5;
        min-width: 124px;
    }

    .become-host .form-actions {
        gap: 20px;
    }

    .tooltip-icon img {
        float: right;
    }

    .become-guest .form-actions {
        gap: 20px;
    }

    .tooltip-icon img {
        margin-top: 0px !important;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
    }

    .form-control:focus {
        border: 1px solid rgba(222, 120, 97, 1)
    }

    .form-select:focus {
        border: 1px solid rgba(222, 120, 97, 1)
    }

    .fairytale-wrapper {
        padding: 15px;
    }

    .magic-feature-img {

        width: 170px;
        height: 170px;

        margin-bottom: 15px;
    }

    .fairytale-title {
        font-weight: 600;
        font-size: 20px;
        margin-bottom: 16px;
    }

    .fairytale-step {
        display: flex;
        text-align: center;
        flex-direction: column;
        align-items: center;
        margin-bottom: 45px;
    }

    .fairytale-description {
        text-align: center;
    }

    .fairytale-step-text {
        max-width: 100%;
    }

    .fairytale-img {
        max-width: 100%;
    }

    .nafunique-accordion {
        width: 100%;
    }

    .footer-buttons {

        display: flex;
    }

    .footer-nav a:not(:last-child)::after {
        background-color: white !important;
    }


    .wedding-info h2 {
        text-align: left;
    }

    .footer-nav {
        display: flex;
        flex-direction: column;
    }

    .wedding-descript {

        font-size: 15px;
    }

    .about-title {
        font-weight: 600;
        font-size: 20px;
        line-height: 28px;
    }

    .py-5 {
        padding-top: 1rem !important;
    }

    .h-100 {
        height: auto !important;
    }

    .read-more-ceremony {
        float: inline-end;
    }

    .info-section {
        padding: 1rem 1rem;
    }

    .newsletter-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .newsletter-form {
        flex-direction: row;
        width: 50%;
    }

    .team-card {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .navbar {
        padding: 15px 5px !important;
    }

    .become-host .progress-indicator {
        flex-direction: column;
    }

    .become-host .progress-line {
        position: absolute;
        top: 0;
        left: 23px;
        width: 2px;
        height: 100%;
        background-color: #dee2e6;
        z-index: 0;
    }

    .event-sections .we-day-title {
        text-align: left !important;
    }

    .we-label {
        font-size: 15px;
    }

    .we-top-info .col-md-3 {
        display: flex;
        justify-content: space-between;
    }

    .we-venue-label {
        font-size: 14px;
    }

    .we-venue-row .col-md-3 {
        display: flex;
        justify-content: space-between;
    }

    .guest-section .col-md-6 {
        display: flex;
        justify-content: space-between;
    }

    .head-label b {
        font-size: 14px !important;
    }

    .overview .detail-label {
        font-size: 13px;
    }

    .overview .detail-value {
        font-size: 13px;
    }

    .ms-madi-regular {
        font-size: 45px !important;
    }

    .stry-text {
        padding: 15px;
    }

    .cg {
        height: auto !important;
    }

    .overview .view-content {
        padding: 9px 10px;
        border-radius: 5px;

    }

    .overview .section-title {
        font-size: 16px;
    }

    .contact-column {

        justify-content: space-between;
    }

    .we-content {
        margin-left: 0px;
    }

    .downlode-section {
        padding: 0px !important;
    }

    .we-container {
        padding: 3px !important;
    }

    .we-box {
        padding: 20px 12px;
    }

    .main-thank-div {
        min-height: auto !important;
    }

    .we-title::before {
        left: 47%;
    }



    .tab-navigation .btn-prev {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    #photoStoryForm .form-actions {
        gap: 10px;

    }

    .form-actions .tab-navigation {
        flex-direction: column;
    }

    .tab-navigation {
        gap: 15px;
    }

    .we-left-icon {
        position: relative;
        left: 28%;
        top: 0;
        transform: unset !important;
        width: 120px;
        opacity: 0.9;
        margin: 30px 0px;
    }

    .we-title::before {
        left: 48% !important;
    }

    .wedding-type {
        display: flex;
        flex-direction: column;
    }

    .wedding-type .col {
        display: flex;
        justify-content: space-between;
    }

    .we-tag-box {
        background: #fff;
        border: 1px solid #e3e3e3;
        border-radius: 10px;
        padding: 12px 16px;
        margin-bottom: 12px;
    }

    .we-tag-text {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 8px !important;
        flex-wrap: wrap;
    }

    .day-events .btn-wedd-downlode {
        width: auto !important;
    }

    .we-tag-text strong {
        flex: 1;
    }

    .we-tag-icon {
        font-size: 18px;
        min-width: 24px;
        text-align: center;
    }

    .we-tag-text {
        flex-direction: column;
        justify-content: flex-start;
    }

    .we-tag-icon {
        order: -1;
        margin-right: 10px;
    }

    .we-tag-text strong {
        flex: 1;
    }

    .description-guest .btn-wedd-downlode {
        width: 100% !important;
        margin-bottom: 15px;
    }

    .description-guest.req-cancel {
        margin-top: 0px;
    }

    .nw-prof button {
        margin-right: 0px !important;
    }

    .nw-prof .become-a-guest {
        margin-top: 10px;
    }

    .nw-prof p {
        text-align: center;

    }

    #guest_buddy_details_form .line {
        flex-direction: row !important;
    }

    .form-section .bg-light {
        padding: 20px !important;
    }

    .become-host .btn-next,
    .become-host .btn-prev {
        margin-top: 0px !important;
    }

    .form-actions .prev-tab {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .back-home {
        width: 100%;
        margin-bottom: 15px;
    }

    .serch-btns {
        display: flex !important;
    }

}

@media (min-width: 1024px) and (max-width: 1400px) {
    .auth-left img {
        width: 100%;
        max-width: 350px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .culture-img-data {
        height: 370px;
    }

    .qt-tool-tip {
        top: 6px !important;
        right: 20% !important;
    }

    .description-guest .req-cancel {
        margin-top: 15px;
    }

    /* wedding card  */
    .border-wrapper {
        width: 100% !important;
    }

    .downlode-section {
        padding: 5px 5px !important;
    }

    .we-container {

        padding: 42px 10px !important;
    }


    .wedding-type .col p {
        line-height: 22px;
    }


    /* .explore-magic .wedding-card {
     min-height: 380px;
    } */
    .read-more-ceremony {
        float: unset;
    }

    .culture-rw {
        text-align: center;
    }

    .contain-1 {
        width: 100%;
    }

    .wedding-info {
        width: 85%;
    }

    .culture-dtl .col-lg-4 {
        height: auto;
        width: 100%;
    }

    .culture-dtl .img-fluid {
        max-width: 100%;
        margin: 0px auto;
        display: flex;
        margin-bottom: 15px;
    }

    .culture-main {
        height: auto;
    }

    .guest-content {
        position: inherit;
        top: 12px;
        right: 0;
        z-index: 99;
        width: 100%;
        height: auto;
        padding-top: 22px;
        padding: 0px 10px;
        padding-bottom: 22px;
        background: rgba(248, 249, 250, 1);
        gap: 3px;
        margin-bottom: 5px;
    }

    .card-flex {
        flex-direction: column-reverse;
        display: flex;
    }

    .image-overlay {
        margin-bottom: 1rem;
    }

    .culture img {
        margin-bottom: 27px;
    }

    .footer-nav {
        gap: 30px;
    }

    .req-cancel {
        width: 200px;
    }

    .btn-wedd-downlode {
        color: #fff;
        width: 200px;
    }

    .nafunique-accordion {
        width: auto;
    }

    .view-header {
        margin-bottom: 10px;
        margin-top: 5px
    }

    .overview .action-buttons {
        display: flex;
        flex-direction: row;
    }

    .become-host .form-actions {
        display: block;

    }

    .spinner-control {
        margin-top: 0px;
    }

    .mb-ct {
        width: 16.66666667%;
        /* margin: 45px 0px; */
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 100% !important;
        padding: 20px;
    }

    .footer-nav {
        display: flex;
        flex-direction: row;
    }

    .footer-nav a:not(:last-child)::after {
        background-color: #cdcdcd;
        right: -15px;
    }



    .footer-buttons {
        display: block;
    }

    .filter-bar .col-auto {
        width: auto;
    }

    .magic-features {
        flex-direction: row;
    }

    .fairytale-img {
        border-radius: 12px;
        max-width: 60%;
    }

    .newsletter-form {
        margin-top: 20px;
    }





}




@media (min-width: 1600px) and (max-width: 2000px) {
    .container {
        max-width: 80%;
    }
}


@media (max-width: 997px) {
    .deks-log {
        border-color: #323232 !important;
        border: none !important;
    }

    .auth-container {
        display: block;
    }

    .auth-right {
        border-radius: 0;
    }

    .mobile-profile .dropdown-item {
        color: #000 !important;
    }

    #profileDropdown {
        justify-content: space-between;
    }

    .navbar .-item {
        color: #000 !important;
    }

    .navbar {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(0deg, #F9FAFB, #F9FAFB) !important;
        transition: background-color 0.3s ease;
        box-shadow: var(--bs-box-shadow-sm) !important;
    }

    .navbar .nav-link {
        color: #000 !important;
    }

    .navbar .navbar-brand {
        color: #000 !important;
    }

    .navbar .login-btn {
        border: 1px solid #000 !important;
        color: #000 !important;

    }

    .navbar-nav .nav-link.active {
        color: rgba(222, 120, 97, 1) !important;
    }
}