:root {
    --header-color: #4B1815;
    --main-color: #4b1815;
    --secondary-color: #fff;
    --button-color: #966822;
    --footer-color: #b18137;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

html,
body {
    width: 100%;
    height: 100%;
    font-family: "ui-monospace";
    /*font-size: 18px;*/
}

body {
    background-color: #fff;
}

header {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}

header .navbar-brand {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 1.3px;
    display: flex;
    gap: 10px;
    font-family: 'fangsong';
}

header .navbar-brand img {
    width: 2.5rem;
    height: 2.5rem;
}

.navbar-expand-lg .navbar-nav .nav-link {
    font-size: 17px;
    font-weight: 700;
    padding: 0;
    text-transform: uppercase;
    color: #000;
}

header .navbar-nav .active {
    /*color: #4b1815 !important;*/
    color: var(--button-color) !important;
}


.navbar-collapse {
    flex-grow: 0;
}

header .hostBtn {
    overflow: hidden;
    border: solid 2px var(--button-color);
    border-radius: 50px;
    background-color: transparent;
    color: var(--button-color) !important;
    letter-spacing: 1.2px;
    box-shadow: inset 2px 2px 15px;
    padding: 5px 10px !important;
}

header .hostBtn:hover {
    color: #fff !important;
    Background: var(--button-color);
}

.hostBtn input {
    background-color: inherit !important;
    border: none;
    outline: none;

}

.hostBtn input::placeholder {
    color: #ffffff;
}

.googleLogin,
.emailLogin {
    padding: 12px 25px;
    transition: all 0.3s;
    background-color: inherit;
}

.googleLogin .login-btn,
.emailLogin {
    display: flex;
    align-items: center;
}

.googleLogin:hover,
.emailLogin:hover {
    background-color: #e9e9ea;
}

.googleLogin .login-btn span,
.emailLogin span {
    flex: 1;
    text-align: center;
    font-size: 20px;
    color: #353535;
}

.rgisterBookBtns a {
    background-color: var(--main-color);
    color: #ffffff;
    line-height: 1.5px;
    border-radius: 4px;
    box-shadow: 0.5px 1px #00000080;
    padding: 25px 0px;
    font-size: 14px;
}

.rgisterBookBtns a:hover,
.loginByEmail .loginBtn:hover {
    background-color: var(--button-color);
    color: #ffffff;
}

.loginByEmail .loginBtn,
.passLink {
    background-color: var(--main-color) !important;
    color: #ffffff !important;
    line-height: 1.5px;
    border-radius: 4px;
    padding: 20px 0px;
    font-size: 14px;
}

.showPass,
.showRegisPass,
.showForgotPass {
    top: 28%;
    right: 3%;
    cursor: pointer;
    font-size: 20px;
}

.forgotPassBtn {
    display: block;
    text-align: center;
    font-weight: 600;
    color: var(--main-color);
    cursor: pointer;
}

.verifyPassBtn {
    background-color: var(--main-color) !important;
    color: #ffffff !important;
    width: 100%;
    padding: 8px 25px;
    border: 0;
    border-radius: 5px;
}

/************* registerSection *************/
.registerSection {
    margin-top: 67px;
}

.verifyEmailSection {
    margin-top: 90px;
}

.registerSection .container,
.contactSection .container,
.verifyEmailSection .container {
    width: 60rem;
    background: #ffffff;
    padding: 30px;
    font-size: 15px;
}

.registerSection .livePreviewImg img {
    border-radius: 100%;
}

.signupWedding,
.verifyEmailBtn {
    background-color: var(--main-color) !important;
    color: #ffffff !important;
    width: 100%;
    padding-block: 12px;
}

.signupWedding:hover,
.verifyEmailBtn:hover {
    background-color: var(--main-color);
    color: #ffffff;
}

.myProfile {
    display: block;
    padding: 0 0 0 2em !important;
    border: solid 2px var(--button-color);
    border-radius: 50px;
    background-color: transparent;
    color: var(--button-color) !important;
    letter-spacing: 1.2px;
}

.myProfile:hover {
    color: var(--button-color);
}

.profilePic {
    border-radius: 100%;
    width: 35px;
    height: 35px;
}

.imgName {
    position: relative;
}

.imgName .coupleName {
    position: absolute;
    text-transform: uppercase;
    left: 0;
    bottom: 0;
    height: 160px;
    display: flex;
    align-items: end;
    font-size: 23px;
    color: #ffffff;
    font-weight: 700;
    padding-left: 15px;
    padding-bottom: 10px;
    width: 100%;
    Z-index: 2;
}

.weddingDetails h5 {
    font-size: 1.5em;
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 1.4px;
}

.trmsCondiToggle {
    color: var(--main-color);
    cursor: pointer;
    font-weight: 600;
}

.copyBtn {
    background-color: var(--main-color);
    color: #ffffff;
    padding: 8px 30px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    text-wrap: nowrap;
}

.introImg {
    position: relative;
    display: block;
    /* width: 285px; */
    height: 285px;
}

.introImg .introBottam {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 23px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 15px;
    color: #ffffff;
    z-index: 2;
    line-height: 1.2;
}

.introImg::after {
    content: '';
    position: absolute;
    background: linear-gradient(transparent 0%, #00000080);
    height: 160px;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 1;
}

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

/*.cropper-container*/
/*{*/
/*    width: 300px !important;*/
/*    height: 300px !important;*/
/*}*/

.bookWeddinngItem:nth-last-child(1) .row {
    border: 0 !important;
}

.day_wise_data:nth-child(even) {
    background-color: #e9e9ea;
}

.day_wise_data:nth-child(odd) {
    border: 1px solid #979797;
}


#changeDetails .modal-footer .btn {
    background-color: var(--main-color);
    color: #ffffff;
    padding: 12px 25px;
}

#delete_registration .modal-footer .btn {
    background-color: var(--main-color);
    color: #ffffff;
    padding: 12px 30px;
}


.herosection {
    height: calc(110vh - 60px);
    margin-top: 65px;
}

.herosection .container-fluid {
    position: relative;
}

.herosection .container-fluid::after {
    height: 30vh;

}

.herosection .video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

/* Make the video cover the entire section */
.herosection .background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.herosection .container-fluid h1 {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.22;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    font-size: 4.25rem;
    line-height: .88;
    text-align: center;
    color: #ffffff;
}

.herosection .container-fluid h5 {
    max-width: 625px;
    margin: 0 auto;
    letter-spacing: 1px;
    font-weight: 300;
    line-height: 1.27;
    text-align: center;
    color: #d5d5d5;
}

.featureBtn {
    margin: 0 0 1rem;
    padding: .85em 3em;
    border-radius: 50px;
    transition: background-color .25s ease-out, color .25s ease-out;
    font-family: inherit;
    font-size: .9rem;
    /* margin-top: 100px; */
    /* margin-bottom: 60px; */
    line-height: 1;
    text-align: center;
    background-color: var(--button-color);
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
}

.featureBtn:hover {
    background-color: var(--button-color);
}

/* .container {
    max-width: 1320px;
} */

.pressBrand .row {
    background-color: var(--secondary-color);
    justify-content: space-between;
    align-items: center;
}

.pressBrand img {
    width: 100%;
    height: auto;
    padding: 20%;

}

.glimpse {
    background-image: url('../img/B3.jpg');
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}

.glimpse .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.4);
}

.glimpse .container-fluid {
    padding-block: 90px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 3;
}

.glimpse .container-fluid h1 {
    font-size: 60px;
    line-height: 72px;
}

.testimonial {
    background-image: url(../img/testimonialImg.png);
    background-position: center;
    background-color: #edf5f7;
    position: relative;
}

.testimonial .overlay {
    background-color: #edf5f7;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
}


.testimonial .card-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.testimonial .card {
    border: 0;
    padding-left: 50px;
    padding-right: 40px;
    border-left: 1px solid rgba(129, 132, 145, .3) !important;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    position: relative;
    background: transparent;
    color: #818491;
}

.testimonial .testimonalImg {
    position: absolute;
    right: 90%;
    top: 50%;
    margin-top: -35px;
    padding: 7px;
    border-radius: 100%;
    background-color: #edf5f7;
}

.testimonalImg img {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 3px solid #fff;
}

.testimonial .card-body i {
    font-size: 46px;
    color: var(--button-color);
}

.testimonial .testiName {
    font-size: 23px;
    color: #000;
}

.testimonial .testiAddress {
    font-size: 14px;
}

/********************************/
/******** wedding page *********/
/******************************/
.breadcrumb {
    margin-top: 66px;
    background: linear-gradient(342deg, var(--main-color), var(--main-color));
    padding-block: 2em;
    color: #ffffff;
}

.dateConatainer .container {
    border: 2px solid var(--main-color);
    border-radius: 5px;
    font-size: 19px;
    padding: 10px 40px;
}

#datepicker {
    background-color: var(--main-color);
    color: #ffffff;
    border: 1px solid #737373;
    width: 272px;
    padding: 5px 10px;
    cursor: pointer;
}

.invitationCard .card-group {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0px 20px;
}

.invitationCard .card {
    flex: 0 0 calc(33.3% - 20px);
    border: 0;
    border-radius: 5px !important;
    overflow: hidden !important;
    box-shadow: 1px 1px 2px #0003 !important;
    margin: 0 0px 36px;
    text-decoration: none;
}

.invitationCard .card .imgName,
.featureWedding .card .imgName {
    position: relative;
    z-index: 1;
}

.invitationCard .card .imgName::before {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    height: 160px;
    width: 100%;
    background: linear-gradient(transparent 0%, #00000080);
    z-index: 2;
}

.invitationCard .card .name {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    font-size: 23px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.2;
    z-index: 3;
}

.invitationCard .location,
.featureWedding .location {
    font-weight: 700;
}

.invitationCard .location span,
.featureWedding .location span {
    color: #979797;
}

.invitationCard .date,
.featureWedding .date {
    font-size: 14px;
}

.featureWedding .container-fluid {
    background: #f2f2f2;
}

.featureWedding .card-group {
    gap: 0px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 0px 20px;
}

.featureWedding .card {
    flex: 0 0 calc(30% - 0px);
    border: 0;
    border-radius: 5px !important;
    overflow: hidden !important;
    margin: 0 10px 36px;
    text-decoration: none;
    box-shadow: 1px 1px 2px #0003;

}

.featureWedding .card .card-body,
.invitationCard .card .card-body {
    padding-block: 9px;
}


.featureWedding .card .imgName {
    overflow: hidden;
    position: relative;
}

.imgName .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 700ms ease-in-out;
    z-index: 1;
}

.imgName:hover .overlay {
    opacity: 1;
}

.featureWedding .card .imgName img {
    transform: scale(1.01);
    transition: all 700ms ease;
}

.featureWedding .card .imgName:hover img {
    transform: scale(1.09);
}

.featureWedding .card .name {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1.2;
    z-index: 3;
}

.upcomingWedd,
.findMore,
.sugestCountryBtn,
.inviteBecomeHost,
.instaLink {
    background-color: var(--button-color);
    color: var(--secondary-color);
    width: 100%;
    max-width: 35%;
    border-radius: 30px;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 8px 25px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 600;
}

.moreAboutSection {
    background-image: url('../img/C2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: 0;
    padding: 40px 0;
}

.moreAboutSection .card-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

}

.moreAboutSection .card {
    box-shadow: rgba(18, 31, 56, 0.1) 0px 0px 10px 0;
    Padding-inline: 15px !important;
}

.moreAboutSection .card-group .count {
    font-family: emoji;
    font-size: 55px;
    color: transparent;
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.1);
    -moz-text-stroke: 2px rgba(0, 0, 0, 0.1);
}

.moreAboutSection .card-group .que {
    font-size: 26px;
    text-transform: capitalize;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
}

.moreAboutSection .card-group .que::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 2px;
    left: 50%;
    background-color: var(--button-color);
    display: block;
    margin-left: -25px;
}

.inviteForeignGust .container-fluid {
    background-color: var(--header-color);
}

.swiper-button-next,
.swiper-button-prev {
    border-radius: 100%;
    padding: 5px 14px;
    height: auto !important;
    border: 1px solid var(--main-color);
    background-color: #ffffff;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    color: var(--main-color);
    font-size: 18px !important;
    font-weight: 900;
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 0 !important;
}


.weddingCardDetails {
    margin-top: 120px;
}

#dayCount {
    pointer-events: none;
    background: inherit;
    border: none;
    color: white;
    font-weight: 700;
}

.invitationBtn {
    background-color: var(--main-color);
    text-transform: uppercase;
    color: #ffffff;
    padding: 10px 0px;
    border: 0;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
}

.matchWedding {
    background-color: var(--main-color);
    margin-top: 25px;
    padding: 35px 20px;
}

.matchWedding a {
    background-color: #ffffff;
    color: #4a4a4a;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    display: block;
    padding: 17px 0;
    text-align: center;
}

.matchWedding a:hover {
    color: var(--main-color);
}

/* myProfileSection */
.myProfileSection {
    margin-top: 100px;
}

.myProfileSection .signOutBtn {
    padding: 12px 25px;
    font-size: 14px;
    text-transform: none !important;
    line-height: 1.5em;
    border: none !important;
    border-radius: 4px;
    box-shadow: 0 .5px 3px #00000040;
    color: #ffffff;
    width: 12em;
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.myProfileSection .changeProfileBtn {
    box-shadow: 0 .5px 3px #00000040;
    padding-inline: 30px;
    font-size: 14px;
}

.myProfileSection .myProfileImg {
    width: 9em;
    height: 9em;
    border-radius: 100%;
}

.changeProfilePic .card-group .card {
    flex: 0 0 calc(33.3% - 1em);
}

.changeProfilePic h2 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}

.changeProfilePic .profile-picture {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.changeProfilePic .profile-picture .googleImg {
    border-radius: 50%;
    width: 144px;
    height: 144px;
    margin-right: 10px;
}

.changeProfilePic .profile-picture .google-icon {
    position: absolute;
    top: 75%;
    left: 65%;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 2px;
}

.changeProfilePic .profile-picture button {
    background-color: var(--main-color);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.changeProfilePic .upload-section {
    margin-bottom: 20px;
}

.changeProfilePic .upload-section .upload-box {
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 5px;
    /* background-color: #f9f9f9; */
}

.changeProfilePic .upload-section .upload-box p {
    margin: 0;
    font-size: 15px;
    color: #000;
}

.changeProfilePic .upload-button {
    background-color: var(--main-color);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;

}

.changeProfilePic .back-button {
    background-color: var(--main-color);
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: block;
    width: fit-content;
    margin: 0 0 0 auto;
    text-align: center;
    text-decoration: none;
}

.changeProfilePic #setProfilePic {
    background-color: var(--main-color);
    color: #ffffff;
    text-align: center;
    border-radius: 4px;
    padding: 12px 0;
    font-weight: 600;
    width: 100%;
}

.welcomeRegisterWedding {
    margin-block: 50px 20px;
}

.welcomeRegisterWedding .container {
    padding: 34px;
    background-color: #ffffff;
}

.registerWedding {
    background-color: var(--main-color);
    color: #ffffff;
    border-radius: 5px;
    font-size: 14px;
    padding: 14px 25px;
    display: block;
    width: fit-content;
}

/* coupleInfo */
.coupleInfo {
    margin-top: 68px;
}

.coupleInfo .container {
    background: #ffffff;
    max-width: 45.5em;
    padding-block: 20px;
    letter-spacing: 0.5px;
}

#coupleInfoForm {
    padding-inline: 24px;
    margin-top: 20px;
    font-size: 14px;
}

.progress {
    border-radius: 0;
    height: 7px;
}

.progress .progress-bar {
    background-color: var(--main-color);
}

#coupleInfoForm #identity {
    background: var(--main-color);
    background: url("../img/down-arrow.png") var(--main-color);
    background-repeat: no-repeat;
    background-position: 95%;
    background-size: contain;
    background-size: 15px 15px;
    color: #ffffff;
}

.disabledNext {
    cursor: no-drop !important;
    opacity: 0.5;
}

#coupleInfoForm label {
    font-size: 14px;
    font-weight: 700
}

.infoIcon {
    padding: 2px 5px;
    font-size: 10px;
    color: var(--main-color);
    border-color: var(--main-color) !important;
    border-width: 2px !important;
}

.introNextBtn,
.infoNextBtn,
.detailsNextBtn,
.guideNextBtn,
.paymentNextBtn,
.summaryNextBtn {
    width: 45%;
    padding: 12px 0;
    background-color: var(--main-color) !important;
    color: #ffffff !important;
}

.delete_regist,
.change_details {
    padding: 12px 0;
    background-color: var(--main-color) !important;
    color: #ffffff !important;
    width: 100%;
    word-break: keep-all;
}

.introNextBtn:hover,
.infoNextBtn:hover {
    background-color: var(--button-color);
    color: #ffffff;
}

.introSection,
.detailsSection,
.guideSection,
.paymentSection,
.summarySection {
    margin-top: 67px;
    font-size: 14px;
    letter-spacing: 0.5px;
}

.introSection .container,
.detailsSection .container,
.guideSection .container,
.paymentSection .container,
.summarySection .container {
    max-width: 52em;
    background-color: #ffffff;
    padding-block: 20px;
}

.warningIcon {
    color: darkorange;
}

.upload-button {
    background-color: var(--main-color);
    display: block;
    width: 50%;
    text-align: center;
    color: #ffffff;
    border-radius: 4px;
    padding: 12px 0;
    font-weight: 600;
    margin-top: 10px;
    cursor: pointer;
}

.tuto {
    color: var(--main-color);
}

.backBtn {
    padding: 8px 35px;
    box-shadow: 0 .5px 3px #00000040;
}

#editImageBtn {
    background-color: var(--main-color);
    color: #ffffff;
    text-align: center;
    border-radius: 4px;
    padding: 12px 0;
    font-weight: 600;
    width: 100%;
}

/* detailsSection page */
.detailsSection #detailsForm .counter-container {
    background-color: var(--main-color);
    display: flex;
    font-weight: 700;
    color: #ffffff;
    height: 40px;
    box-shadow: 1px 1px 2px #00000080;
    /* width: fit-content; */
}

.detailsSection #detailsForm .counter-container .btn {
    outline: none;
}

.detailsSection #detailsForm .counter-button {
    padding: 8px;
    background-color: inherit;
    border: 0;
    font-size: 18px;
    color: #ffffff;
}

.detailsSection .toggle>div {
    position: relative;
    padding: 10px;
    width: 105px;
    height: 50px;
    border-radius: 50px;
    box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, .5), 0px 1px 1px 0 rgba(255, 255, 255, 1);
    background: rgb(189, 191, 193);
    background: linear-gradient(to bottom, rgba(189, 191, 193, 1) 0%, rgba(249, 251, 254, 1) 100%);
    font-size: 12px;
}

.detailsSection .card-header {
    background: #000;
    color: #fff;
}

.detailsSection .toggle>div>input[type=checkbox] {
    position: absolute;
    opacity: 0;
    top: 10px;
    left: 11px;
    width: 85px;
    height: 30px;
    z-index: 5;
    cursor: pointer;
}

.detailsSection .toggle>div>input[type=checkbox]~div {
    width: 85px;
    height: 30px;
    border-radius: 50px;
    font-weight: 900;
    border: 1px solid #979797;
    box-shadow: inset 5px 0 0 0 rgba(0, 0, 0, .1), inset -5px 0 0 0 rgba(0, 0, 0, .1), inset -6px 0 0 0 rgba(255, 255, 255, .5), inset -4px 6px 11px -5px rgba(0, 0, 0, .2), inset 1px 1px 0 0 rgba(255, 255, 255, 1), -6px 4px 11px -7px rgba(0, 0, 0, .5);
    background: rgb(253, 252, 251);
    background: linear-gradient(to right, rgba(253, 252, 251, 1) 37%, rgba(229, 229, 229, 1) 61%);
}

.detailsSection .toggle>div>input[type=checkbox]:checked~div {
    box-shadow: inset -5px 0 0 0 rgba(0, 0, 0, .1), inset 5px 0 0 0 rgba(0, 0, 0, .1), inset 6px 0 0 0 rgba(255, 255, 255, .5), inset -4px 6px 11px -5px rgba(0, 0, 0, .2), inset 1px 1px 0 0 rgba(255, 255, 255, 1), -6px 4px 11px -7px rgba(0, 0, 0, .5);
    background: rgb(229, 229, 229);
    background: linear-gradient(to right, rgba(229, 229, 229, 1) 39%, rgba(253, 252, 251, 1) 63%);
}

.detailsSection .toggle>div>input[type=checkbox]~div:before {
    content: attr(data-unchecked);
    display: block;
    position: absolute;
    border-radius: 10px 0 0 10px;
    top: 11px;
    left: 17px;
    padding: 5px 10px;
    cursor: pointer;
}

.detailsSection .toggle>div>input[type=checkbox]~div:after {
    content: attr(data-checked);
    color: #df0000;
    text-shadow: 0 1px 0 #ffffff, 0px 0 7px #df0000;
    filter: dropshadow(color=#df0000, offx=0, offy=0);
    display: block;
    position: absolute;
    border-radius: 0 10px 10px 0;
    top: 11px;
    left: 54px;
    padding: 5px 10px;
    cursor: pointer;
}

/*.detailsSection .toggle > div > input[type=checkbox] ~ div:before {*/
/*  content: attr(data-unchecked);*/
/*  display: block;*/
/*  position: absolute;*/
/*  border-radius: 10px;*/
/*  top: 15px;*/
/*  left: 24px;*/
/*}*/

/*.detailsSection .toggle > div > input[type=checkbox] ~ div:after {*/
/*  content: attr(data-checked);*/
/*  color: #df0000;*/
/*  text-shadow: 0 1px 0 #ffffff, 0px 0 7px #df0000;*/
/*  filter: dropshadow(color=#df0000, offx=0, offy=0);*/
/*  display: block;*/
/*  position: absolute;*/
/*  border-radius: 10px;*/
/*  top: 14px;*/
/*  left: 64px;*/
/*}*/




.detailsSection .toggle>div>input[type=checkbox]:checked~div:before {
    color: #119400;
    text-shadow: 0 1px 0 #ffffff, 0px 0 7px #007a08;
    filter: dropshadow(color=#007a08, offx=0, offy=0);
}

.detailsSection .toggle>div>input[type=checkbox]:checked~div:after {
    color: #000;
    text-shadow: none;
    filter: dropshadow(none);
}

.detailsSection #detailsForm .addLanguage,
.detailsSection #detailsForm .addfunction,
.dateBox,
.chooseTime,
.country,
.guideSection .addLanguage,
.addGuideLanguage {
    background-color: var(--main-color) !important;
    color: #ffffff !important;
    border: 0;
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    padding: 12px 0;
    font-weight: 700;
}

.dateBox {
    outline: none;
    border: 0;
    border-radius: 8px !important;
    padding: 0px;
}

.chooseDateBtn::placeholder {
    color: #ffffff;
}

.chooseDateBtn {
    background: transparent !important;
    color: #ffffff !important;
    position: relative;
    z-index: 2;
    border-radius: 0;
}

.form-control:focus {
    border-color: var(--main-color) !important;
    box-shadow: none !important;
}

.eventContainer,
.addedLanguage,
.addedGuideLanguage,
.eventSection {
    position: relative;
}

.removeEvent {
    position: absolute;
    top: 2%;
    cursor: pointer;
    right: 2%;
    color: #ffffff;
    background-color: var(--main-color);
    padding: 3px 7px;
    border-radius: 100%;
}

.closeLang,
.closeGuideLang {
    position: absolute;
    top: 10%;
    cursor: pointer;
    right: 2%;
    color: #ffffff;
    padding: 3px 7px;
    border-radius: 100%;
}

#checkIdentity {
    background-color: var(--main-color);
    color: #ffffff;
    padding: .375rem 2.25rem .375rem .75rem;
    border-radius: 5px;
    font-size: 16px;
}

.paymentOption {
    width: 80%;
    background-color: var(--main-color);
    color: #ffffff;
    padding: 10px 6px;
}

/* summary */
.editBtn {
    background-color: var(--main-color);
    color: #ffffff;
    box-shadow: 0.5px 1px #00000080;
    padding: 4px 27px;
    border-radius: 4px;
}

.termsUse {
    cursor: pointer;
}

.termsSection a,
.blogDetailsSection .content a {
    color: var(--main-color) !important;
    font-weight: 600 !important;
}

.coupleDataFetch p,
.detailDataFetch span {
    font-size: 14px;
    font-weight: 500;
}

.heading {
    font-size: 18px !important;
}

.heading span {
    font-size: 18px !important;
    border-inline: 2px solid gray;
    padding-inline: 16px;
}

.pageStep i {
    color: var(--main-color);
    font-size: 18px;
}

.termsCheckbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--main-color);
    appearance: none;
    outline: none;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
}

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

/* Style the checkbox when checked */
.termsCheckbox:checked {
    background-color: var(--main-color);
    /* Red checkmark background */
    position: relative;
}

/* Add a red checkmark when checked */
.termsCheckbox:checked::after {
    content: '';
    display: block;
    width: 8px;
    height: 14px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    position: absolute;
    top: 0px;
    left: 4px;
}


/* contact us */
.beardCrumb {
    background-color: var(--main-color);
    color: #ffffff;
    margin-top: 66px;
    padding-block: 30px;
}

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

.blogSection .card-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.blogSection .card .btn {
    background-color: var(--main-color);
    color: #ffffff;
    padding: 8px 25px;
    font-size: 14px;
}

.blogSection .card_footer p {
    font-size: 12px;
}

.blogSection .speaprate {
    height: 1px;
    background-color: gray;
    width: 25%;
    margin: 20px auto;
}

/* footer */
footer {
    color: #ffffff;
    padding-top: 100px;
    padding-bottom: 50px;
    position: relative;
    z-index: 1;
    /*background-image: url('../img/B9.JPG');*/
    background-color: #4b1815;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/*footer .overlay*/
/*{*/
/*    position: absolute;*/
/*    z-index: 2;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    left: 0;*/
/*    top: 0;*/
/*    background: rgba(0, 0, 0, 0.4);*/
/*    z-index: 2;*/
/*}*/

footer .container {
    position: relative;
    z-index: 3;
}

.footerMenu {

    align-items: self-start;
    letter-spacing: 0.8px;
    justify-content: space-between;

}

.footerLogo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footerLogo img {
    width: 60px;
    border-radius: 100%;
}

.footerMenu ul {
    gap: 38px;

    align-items: center;
}

.footerMenu a {
    color: #ffffff;
    font-size: 14px;

}

.footerLogo h5 {
    font-size: 24px;
}

footer .hostBtn {
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid var(--button-color);
}

footer .hostBtn input {
    background-color: inherit !important;
    border: none;
    outline: none;
    font-weight: 600;
    box-shadow: none !important;
}

footer .hostBtn input::placeholder {
    color: grey;
    font-weight: 600;
}

footer .hostBtn button {
    font-weight: 600;
    background-color: transparent;
    border: none;
    outline: none;
    padding-inline: 10px;
    color: #000;
    border-left: 2px solid #000;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

footer .hostBtn button:hover {
    color: #000;
}

.social_media {
    display: flex;
    justify-content: center;
    gap: 70px;
}

.social_media a {
    color: #ffffff;
    background-color: #000;
    border-radius: 100%;
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FAQ */
.accordion-button {
    color: var(--main-color);
    padding-inline: 0;
    border: 0;
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
    background-color: inherit;
    color: var(--main-color);
}

.accordion-button:focus {
    box-shadow: none;
}

.dayProgram {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    font-size: 14px;
}

.peopleCounter {
    background-color: var(--main-color);
}

.peopleCounter input {
    background: inherit;
    border-radius: 0;
}

.pplNextBtn,
.securePlace {
    background-color: var(--main-color) !important;
    width: 100%;
    border: 0;
    color: #ffffff !important;
    padding-block: 10px;
    border-radius: 4px;
}

#yourInfo i {
    color: var(--main-color);
}

.becomeHostBody footer {
    margin-top: 0 !important;
}

.becomeHostSection {
    margin-top: 66px;
    background-image: url('../img/becomeHost.jpg');
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 0;
    background-position-y: -113px;
    padding-top: 170px;

}

/* .becomeHostSection .container {} */

.rgistrWeddBox {
    background: rgba(229, 229, 229, 0.8);
    color: #4a4a4a;
    font-size: 35px;
    padding: 1rem;
    padding-right: 3rem;
}

.rgistrWeddBox p {
    color: #4a4a4a;
    font-weight: 300;
    font-size: 37px;
    line-height: normal !important;
}

.rgistrWedd.btn {
    background-color: var(--button-color);
    color: #ffffff;
    padding: 10px 25px;
    border-radius: 4px;
    font-size: 15px;
    box-shadow: 0 .5px 1px #00000080;
    width: fit-content;
    display: block;
    margin: 0 auto;
}

.coupleLoveHosting h5 {
    font-size: 1.6rem;
}

.coupleLoveHosting .card {
    border-radius: 6px 6px 0 0 !important;
    overflow: hidden !important;
}

.coupleLoveHosting .card-body {
    background-color: var(--button-color);
    border-radius: 0 0 6px 6px;
    position: relative;
    z-index: 2;
}

.coupleLoveHosting .card-body::after {
    content: '';
    position: absolute;
    top: 96.4%;
    left: 20%;
    background-color: var(--button-color);
    z-index: 1;
    width: 25px;
    height: 25px;
    transform: rotate(45deg);
    border-right: 2px solid;
    border-bottom: 2px solid;
}

.coupleLoveHosting .card .card-img-bottom {
    margin-top: -1px;
    position: relative;
    z-index: 1;
}

.hostingWorks {
    letter-spacing: 0.8px;
}

.hostingWorks .row {
    font-size: 18px;
}

.meetHost .container {
    background-image: url('../img/bhfooter.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: 0;
    padding-block: 60px;
}


/* blogDetailsSection */

.blogDetailsSection {
    margin-top: 100px;
    line-height: 1.7;
}

.blogDetailsSection .container .blog_title {
    letter-spacing: 0.7px;
}

.blogDetailsSection .card-img-top {
    width: 96px;
    height: 96px;
    border-radius: 100%;
}

.authorDetails {

    margin-right: 2em;
    display: flex;
    padding: 0;
    font-size: 14px;
}

.back_post {
    background-color: var(--main-color);
    color: #ffffff;
    padding: 8px 25px;
    border: 0;
    border-radius: 4px;
    margin-top: 30px;
}

/* mail */
.mail_become_host,
.mail_join_wedding,
.verify_mail_become_host {
    background-color: var(--main-color);
    color: #ffffff;
    border-radius: 30px;
    padding: 8px 25px;
    width: fit-content;
    display: block;
    margin: 0 auto;
}

.verifyLoginBtn {
    background-color: var(--main-color);
    color: #ffffff;
    border-radius: 5px;
    padding: 12px 25px;
    width: 30%;
    display: block;
    border: 0;
}

.join-wedding-section {
    background-color: var(--main-color);
    color: #fff;
}

.suggestLocation {
    background-color: var(--button-color) !important;
    color: #ffffff;
    border-radius: 5px;
    padding: 12px 25px;
    width: 30%;
    display: block;
    margin: 0 auto;
    border: 0;
}

/* Responsive */
@media screen and (max-width: 1300px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        font-size: 12px !important;
        font-weight: 600;
    }

    header .navbar-brand span {
        font-size: 22px !important;
    }
}

@media screen and (max-width: 1024px) {
    .footerMenu a {
        display: flex;
        flex-direction: column;
        text-wrap: auto;
    }

}



@media screen and (max-width: 919px) {
    .invitationCard .card-group {
        justify-content: space-evenly;
    }

    .navbar-toggler {
        padding: 0;
        height: 45px;
        width: 50px;
        box-shadow: none !important;
    }
}


@media screen and (max-width: 768px) {
    .navbar-expand-lg .navbar-nav .nav-item {
        width: 100%;
        text-align: center;
    }

    .navbar-expand-lg .navbar-nav .nav-link.active {
        background: rgba(0, 0, 0, 0.1);
        padding-block: 8px;
    }

    /* my Profile */

    .myProfileSection .row {
        flex-direction: column;
        gap: 30px;
        align-items: center;
        text-align: center;
    }

    .myProfileSection .row .col-3 {
        order: 2;
        width: fit-content;
    }

    .myProfileSection .row .col-7 {
        order: 3;
        width: fit-content;
    }

    .myProfileSection .row .col-2 {
        order: 1;
        width: fit-content;
    }

    .myProfileSection .changeProfileBtn {
        /* width: 100%; */
        display: block;
    }

    .weddingDetails .container>div {
        padding: 15px !important;
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .bookWeddinngItem>.row {
        gap: 30px;
        padding-bottom: 2rem !important;
    }

    .bookWeddinngItem {
        padding-top: 2rem !important;
    }

    .bookWeddinngItem .row .col-8 {
        width: 100%;
    }

    .bookWeddinngItem .row .col-4 {
        width: 100%;
    }

    #registrationPopup .modal-footer {
        justify-content: center;
    }

    #registrationPopup .modal-footer button {
        width: 100%;
    }

    .weddingDetails .info-box {
        padding: 1rem !important;
    }

    .weddingDetails .weddingCard {
        flex-direction: column;
        gap: 10px;
    }

    .weddingDetails .weddingCard a {
        font-size: 16px !important;
    }

    .weddingDetails .weddingCard .copyBtn {
        margin-left: 0 !important;
    }

    .weddingDetails .row {
        gap: 20px;
    }

    .weddingDetails .row>div {
        width: 100% !important;
    }

    .weddingDetails .change_details_delete_regist {
        flex-direction: column;
    }

    .weddingDetails .modal-footer button,
    #changeDetails .modal-footer .btn {
        width: 100% !important;
    }

    /* Custom modal animations */
    .modal.fade .modal-dialog {
        /* Initial state: zoomed out and transparent */
        transform: scale(0.9);
        opacity: 0;
        /* Apply transition for both opening and closing */
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    }

    .modal.show .modal-dialog {
        /* When shown: zoom in and fully opaque */
        transform: scale(1);
        opacity: 1;
    }


    .modal-backdrop.fade {
        opacity: 0;
    }

    .modal-backdrop.show {
        opacity: 0.5;
    }

    /* change profile */
    .changeProfilePic {
        margin-inline: 15px !important;
    }

    .changeProfilePic .container {
        padding: 1rem !important;
        margin-top: 2rem !important;
    }

    .upload-button,
    .back-button {
        width: 100%;
    }

    .livePreview {
        display: none;
    }

    #imageCropModal .modal-content {
        padding: 1rem !important;
    }

    #imageCropModal .row>div {
        width: 100% !important;
    }

    #image-crop-container {
        width: 400px !important;
    }

    #saveCroppedImageBtn {
        margin-top: 1rem !important;
    }

    .cropped-image-container>div {
        width: 100% !important;
    }

    .registerSection .container,
    .contactSection .container,
    .verifyEmailSection .container {
        width: 100% !important;
    }

    .herosection {
        height: 90vh;
    }

    .herosection .container-fluid h1 {
        font-size: 3rem;
    }

    .herosection .container-fluid button {
        font-size: 1rem;
    }

    .welcomeSection .row .col-6 {
        width: 100%;
    }

    .featureWedding .card-group {
        margin-inline: 30px;
    }

    .featureWedding .card {
        flex: 1;
    }

    .featureWedding .col-6 h2 {
        font-size: 15px !important;
        color: gray !important;
        letter-spacing: 0.8px;
    }

    .featureWedding .col-6 h5 {
        font-size: 16px !important;
        ;
    }

    .inviteForeignGust .col-10 {
        width: 100% !important;
    }

    .glimpse .container-fluid h1 {
        font-size: 54px;
    }

    .moreAboutSection .card-group {
        grid-template-columns: 1fr 1fr;
    }

    .testimonial .card-group {
        grid-template-columns: 1fr 1fr;
        margin-left: 60px !important;
    }

    .testimonial .card {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footerMenu.row {
        gap: 30px 0 !important;
        margin-left: 30px !important;
    }

    .footerMenu .col-4,
    .footerMenu .col-2 {
        width: 33.3%;
        padding-inline: 0 !important;
    }

    footer {
        padding-top: 50px;
    }

    .social_media {
        padding-top: 0px !important;
    }

    /* weddings */
    .dateConatainer .container {
        padding-inline: 1rem !important;
    }

    .invitationCard .card-group {
        justify-content: center;
        gap: 20px;
        padding-inline: 20px !important;
    }

    .invitationCard .card {
        flex: 1;
        height: 405px;
    }

    /* blog */
    .blogDetailsSection {
        margin-top: 66px;
    }

    .blogDetailsSection .container {
        padding-top: 30px;
    }

    .blogDetailsSection .row {
        position: relative;
    }


    .blogDetailsSection .row>div {
        width: 100%;
    }

    .blogDetailsSection .container .blog_title {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding-inline: 25px;
    }

    .blogDetailsSection .authorDetails {
        margin-top: 50px;
        align-items: baseline;
    }

    .blogDetailsSection .card-img-top {
        width: 56px;
        height: 56px;
        border-radius: 100%;
    }

    .blogDetailsSection .authorDetails .blogAuthorDetails {
        display: flex;
        flex-direction: column;
        letter-spacing: 0.8px;
    }

    .blogDetailsSection .authorDetails .blogAuthor {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .blogDetailsSection .authorDetails .authorNameTitle {
        display: flex;
        align-items: baseline;
        gap: 20px;
        text-align: left;
    }

    .blogDetailsSection .authorDetails .blogDate {
        display: flex;
        gap: 20px;
    }

    .blogDetailsSection .authorDetails * {
        border: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .blogDetailsSection .authorDetails,
    .blogDetailsSection .content {
        width: 100%;
    }

    .blogDetailsSection .content img {
        width: 305px !important;
        height: 305px !important;
    }

    /* weddingDetails */
    .weddingCardDetails .row>div {
        width: 100% !important;
        padding-inline: 1rem !important;
        margin-top: 15px;
    }

    .dayProgram {
        grid-template-columns: 1fr 1fr;
    }

    .dayProgram,
    .mobileShow {
        font-size: 16px;
    }

    .imgName {
        height: 392px !important;
    }

    .imgName h1 {
        padding-left: 0 !important;
    }

    .dayProgram {
        margin-top: 2rem !important;
    }

    /* myProfile */
    .weddingBookContainer h4 {
        padding-top: 2rem !important;
    }

    .rgistrWeddBox {
        padding: 1rem !important;
    }

    .hostingWorks .row>div {
        width: 100% !important;
        padding: 0 !important;
    }

    /* couple Info */
    .coupleInfo .row>div,
    select,
    .upload-button {
        width: 100% !important;
    }

    .info-box {
        padding: 1rem !important;
    }

    .detailsNextBtn,
    .backBtn {
        width: 48% !important;
    }

    /* user register */
    .registerSection .container {
        padding: 1rem !important;
    }

    .registerSection .row {
        margin: 0 !important;
    }

    .registerSection .row>div,
    .verifyEmailSection .row>div {
        width: 100% !important;
    }

    #rotateLeftBtn,
    #rotateRightBtn {
        text-wrap: nowrap;
    }

}

@media screen and (max-width: 640px) {
    .herosection {
        height: 70vh;
    }

    .herosection .container-fluid h1 {
        font-size: 1.8rem;
    }

    .herosection .container-fluid button {
        font-size: 0.6rem;
    }

    .welcomeSection .container-fluid {
        padding-inline: 0 !important;
    }

    .welcomeSection .container-fluid .col-6 {
        padding-right: 0 !important;
    }

    .featureWedding .container-fluid {
        padding-inline: 50px !important;
    }

    .featureWedding .col-6 {
        width: 100% !important;
        border: none !important;
    }

    .featureWedding .col-6 h2 {
        margin-top: 0 !important;
        font-size: 1.5rem;
        font-weight: 500;
    }


    .featureWedding .card-group {
        margin-inline: 30px;
    }

    .featureWedding .card {
        flex: 100%;
    }

    .glimpse .container-fluid h1 {
        font-size: 44px;
    }

    .moreAboutSection .card-group {
        grid-template-columns: 1fr;
        gap: 30px 0 !important;
    }

    .moreAboutSection .card {
        border-radius: 5px !important;
        max-width: 100% !important;
    }

    .testimonial .card-group {
        grid-template-columns: 1fr;
        margin-left: 60px !important;
    }

    .testimonial .card {
        padding-left: 60px;
        padding-right: 20px;
        margin-top: 30px;
    }

    .footerMenu.row {
        gap: 30px 0 !important;
        margin-left: 0px !important;
    }

    .footerMenu .col-4,
    .footerMenu .col-2 {
        width: 100%;
        padding-inline: 0 !important;
        text-align: center;
    }

    .footerMenu ul {
        margin-left: 0 !important;
    }

    footer .hostBtn {
        width: 75%;
        margin: 0 auto;
    }

    /* weddings */
    .invitationCard .card-group {
        justify-content: center;
        gap: 40px;
        padding-inline: 50px !important;
    }

    .invitationCard .card {
        flex: 100%;
    }

    /* wedding details */
    .weddingCardDetails {
        margin-top: 86px;
    }

    .weddingCardDetails .row .col-8 {
        width: 100% !important;
    }

    .mobileShow {
        display: block !important;
    }

    .mobileHide {
        display: none;
    }

    /* blog */
    .blogSection .card-group {
        grid-template-columns: 1fr;
        margin-inline: 20px !important;
    }

    .suggestLocation {
        width: 100%;
    }

    .navbar-brand {
        margin-right: 0;
    }

    .navbar-toggler {
        width: 40px;
        height: 40px;
    }

    .upcomingWedd,
    .findMore,
    .sugestCountryBtn,
    .inviteBecomeHost,
    .instaLink {
        font-size: 13px;
        max-width: 100%;
    }

    .featureWedding .row {
        padding-inline: 5px !important;

    }

    .featureWedding .card-group {
        margin-inline: 0px !important;
    }

}


@media screen and (max-width: 428px) {
    .herosection {
        height: 60vh;
    }

    .herosection .container-fluid h1 {
        font-size: 1.5rem;
    }

    .herosection .container-fluid h5 {
        font-size: 1rem;
    }

    .herosection .container-fluid .featureBtn {
        font-size: 0.8rem;
    }

    .welcomeSection {
        margin-inline: 20px !important;
        margin-inline: 10px !important;
    }

    .welcomeSection .row {
        margin-inline: 0;
    }

    .welcomeSection .row .col-6 {
        padding-left: 0 !important;
    }

    .upcomingWedd,
    .findMore,
    .sugestCountryBtn,
    .inviteBecomeHost,
    .instaLink {
        font-size: 13px;
        max-width: 100%;
    }

    .featureWedding .row {
        padding-inline: 5px !important;

    }

    .featureWedding .container-fluid {
        padding-inline: 0 !important;
    }

    .featureWedding .card-group {
        margin-inline: 0px !important;
    }

    .moreAboutSection .row {
        padding-inline: 0 !important;
    }

    .navbar-brand {
        align-items: center;
    }

    .navbar-brand span {
        font-size: 18px !important;
    }

    /* blog */
    .blogSection {
        margin-top: 1rem !important;
    }

    .blogSection .card-group {
        margin-inline: 0 !important;
    }

    .blogDetailsSection .container {
        padding-top: 0 !important;

    }

    .blogDetailsSection .container .row {
        padding-top: 460px !important;
    }

    .blogDetailsSection .authorDetails {
        margin-top: 30px;
        flex-direction: column;
        text-align: left !important;
    }

    .blogDetailsSection .container .blog_title {
        top: 12%;
        z-index: 3;
        background: #fff;
        border-radius: 20px 20px 0 0;
        padding-top: 20px;
    }

    .blogDetailsSection .container .content img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 430px !important;
        z-index: 1;
    }

    .back_post {
        display: none;
    }

    .back_post_mobile {
        position: absolute;
        top: 1%;
        left: 3%;
        z-index: 2;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        width: 45px;
        height: 45px;
        font-size: 24px;
        border-radius: 100%;
        display: flex !important;
        justify-content: center;
        align-items: center;
    }
}

@media screen and (max-width: 375px) {
    header .container-fluid {
        padding-inline: 0 !important;
    }

    .upcomingWedd,
    .findMore,
    .sugestCountryBtn,
    .inviteBecomeHost,
    .instaLink {
        font-size: 11px;
    }

    header .navbar-brand span {
        content: 'PFC';
        font-size: 16px !important;
    }

}

/* Fix for Motorola Edge 60 and other mobile devices */
@media screen and (max-width: 600px) {
    .featureWedding .container-fluid {
        padding-inline: 0px !important;
    }

    .featureWedding .card-group {
        display: block !important;
        margin-inline: 0 !important;
    }

    .featureWedding .card {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
        border-radius: 10px !important;
        overflow: hidden;
    }

    .featureWedding .imgName {
        width: 100% !important;
    }

    .featureWedding .imgName img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        min-height: 250px;
        /* Ensure visual impact */
    }
}


/* Social Media Icons Styling - Premium Glassmorphism */
.social_media {
    display: flex;
    justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin-top: 2rem !important;
}

.social_media li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    /* Subtle transparent white */
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Thin premium border */
    color: #ffffff;
    font-size: 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.social_media li a:hover {
    background: #ffffff;
    color: var(--main-color);
    /* Icon turns to brand color */
    border-color: #ffffff;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Global Horizontal Scroll Fix */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.container-fluid {
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}