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

html {
    height: 100%;
}

::-webkit-scrollbar {
    display: none;
}

body {
    font-family: 'Roboto';
    background: transparent;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}

img {
    width: 100%;
}

.mySlider img {
    width: 440px;
    height: auto;
    margin: 0px 5px 0px 5px;
}

.content {
    width: 100%;
    height: 100%;
    min-height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
}

.cardbgcolorblock {
    display: none;
}

.cardbgcolorlevel {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    background-image: url("https://goodconnext.com/card/Pureely/Assets/PageBg.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: -1;
}

/* ── CARD SECTION ── */
.card-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px 30px 20px;
}

/* .card-parent is the sizing reference for the card. container-type turns it
   into a query container so every "cqw" unit used below == 1% of THIS
   element's rendered width, at every viewport size, with no breakpoint gaps. */
.card-parent {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    container-type: inline-size;
    container-name: card;
}

/* ── MAIN CARD ── */

.card {
    overflow: visible;
    width: 500px;
    max-width: 100%;
    position: relative;
    box-shadow: 0px 0px 15px #0000001F;
    border: none;
    /* was: margin-top: 590px (only correct at the 500px desktop width) */
    margin-top: 100cqw;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff;
    z-index: 1;
}

/* ── CARD HEADER ── */
.card-header {
    position: relative;
    overflow: visible;
    height: 0px;
}

.card-banner {
    width: 100%;
    display: flex;
}

/* ── BANNER ──
   Offsets converted from the original desktop px values (calibrated at the
   500px reference card width) into cqw, so they scale exactly with the
   card at any width instead of only at hand-picked breakpoints. */
#banner-bg {
    position: absolute;
    bottom: 6.4cqw; /* was 97px */
    left: 0;
    width: 100%;
    z-index: 0;
}

#banner-fg {
    position: absolute;
    bottom: -4cqw; /* was -20px */
    left: 0;
    width: 100%;
    z-index: 1;
}

/* ── PROFILE IMAGE ──
   Normal flow now (moved in the HTML to be the first child of
   .after-content, right before .contact-section), instead of
   position:absolute. That means its box always grows to fit whatever text
   is inside it — the name/title can never spill out of it, at any width.
   margin-top pulls it up to overlap the banner above (cosmetic only, safe
   even if slightly off — it never causes overflow/clipping). */
.profile-imagemaincontainer {
    width: 100%;
    position: relative;
    margin-top: -2cqw; /* was: position:absolute; top:-2cqw */
    left: -28px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 6cqw; /* was 0 30px */
    z-index: 3;
}

.profile-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.profile-image {
    width: 25.2cqw; /* was 126px */
    height: 25.2cqw; /* was 126px */
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    border: 4px solid white;
}

.profile-image img {
    width: 100%;
}

.profile-border {
    width: 80%;
    height: 1px;
    display: flex;
    justify-self: center;
    border-bottom: 0.5px solid rgba(112, 112, 112, 0.3);
}

#banner-image-preview {
    margin-top: 10px;
}

/* ── CARD BODY ── */
.card-body {
    padding: 0 6cqw 0 6cqw; /* was 0px 30px 0 30px — now scales with the card at every width */
}

.card-content {
    width: 100%;
}

.loading-container {
    position: relative;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
}

.card-section:not(.preview) .after-content {
    display: flex;
    flex-direction: column;
    opacity: 1;
}

/* ── MAIN CARD NAME / TITLE ── */
.card-section:not(.preview) .name-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10cqw 0 8cqw 8cqw; /* was 40px 0 20px 20px */
    flex-grow: 1;
       /*  border-bottom: 1px solid rgba(112, 112, 112, 0.3); */    

}

/* ── PREVIEW CARD NAME / TITLE ── */
.card-section.preview .name-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0 10px 20px; /* Default preview padding, edit as needed */
    flex-grow: 1;
    border-bottom: 1px solid rgba(112, 112, 112, 0.3);
    margin-top: -55px; /* Pulls the entire text block up over the banner */
}

.name {
    font-family: 'Roboto';
    font-size: 30px;
    font-weight: bold;
    color: #04264A;
    text-align: left;
    margin-bottom: 5px;
}

.education {
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: bold;
    color: #180B3C;
    text-align: center;
    margin-bottom: 10px;
}

.title {
    font-family: 'Roboto';
    font-weight: 600;
    color: #04264A;
    opacity: 0.8;
    font-size: 20px;
    text-align: left;
}

.description {
    font-family: 'Roboto';
    color: #04264A;
    line-height: 24px;
    margin-bottom: 25px;
    font-size: 20px;
}

/* ── CONTACT SECTION ──
   padding-top used to reserve room for the header/banner stack above it.
   Converted to cqw so it always matches the (now fluid) banner height. */
.contact-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 4cqw 0 4cqw 0;
    gap: 10px;
    position: relative;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
}

.contact-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.contact-bottom-row {
    width: 100%;
    display: flex;
    align-items: center;
}

.contact-section .icon {
    margin-right: 12px;
    width: 22px;
    height: 22px;
    opacity: 0.4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#email {
    font-weight: bold;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

.contact-section a {
    text-decoration: none;
    color: #04264B;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-family: 'Roboto';
}

.contact-bottom-row a {
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.contact-bottom-row a .icon {
    margin-top: 3px;
}

.contact-section .right {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
}

.phone-container {
    display: flex;
    align-items: center;
}

.phone-numbers {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* ── SOCIAL MEDIA ── */
.social-media-section img {
    width: 32px;
    height: 32px;
}

.social-media-section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 17px 20px 20px 0px;
    max-width: 440px;
    width: 100%;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
    border-bottom: 0.5px solid rgba(112, 112, 112, 0.3);
}

.social-media-links-left {
    display: flex;
    gap: 10px;
}

.social-media-links-left a {
    display: flex;
    height: 32px;
    width: 32px;
}

/* ── DOWNLOAD SECTION ── */
.download-section {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 25px 0;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
    gap: 5px;
}

.download-section .right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.AddtoContactsmobile {
    display: none;
}

.download-text {
    font-family: 'Montserrat';
    font-size: 12px;
    color: #2E2E2E;
    opacity: 0.4;
}

.download-leftSection {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 10px;
}

.download-leftSection a {
    height: 48px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.download-leftSection a img {
    height: 100%;
    width: auto;
}

.download-leftSection a:last-child {
    margin-right: 0;
}

.social-media-links-right {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-media-links-right a {
    display: flex;
    height: 44px;
    cursor: pointer;
}

/* ── TABS SECTION ── */
.tabs-container {
    display: flex;
    justify-content: center;
    background-color: #F6F8F6;
    border-radius: 25px;
    margin: 0px 20px 24px 20px;
    padding: 0;
}

.tab-btn {
    flex: 1;
    padding: 12px 10px;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    color: #042621;
    transition: all 0.3s ease;
    border-radius: -1px 25px 25px -1px;
}

.tab-btn.active {
    background-color: #042621;
    color: #E2B963;
}

/* ── SERVICE SECTION ── */
.service-section {
    width: 440px;
    display: flex;
    height: 460px;
    flex-direction: column;
    align-items: center;
}

.service-footer {
    padding: 10px 0;
}

.service-contents {
    padding: 10px;
    display: flex;
    gap: 6px;
    width: 100%;
}

/* ── COMPANY SECTION ── */
.company-section {
    display: flex;
    flex-direction: column;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);

    padding: 25px 10px 0px 10px;
}

.company-section .left {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.company-section .right {
    display: flex;
    justify-content: center;
}

.company-section .right a {
    width: 36px;
    height: 36px;
}

.company,
.services {
    color: #180B3C;
    opacity: 0.4;
    font-family: 'Montserrat';
    font-size: 14px;
    margin-bottom: 12px;
}

.company-name {
    font-family: 'Roboto';
    font-size: 26px;
}

.company-location {
    color: #220A00;
    font-family: 'Roboto';
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 8px;
    margin-top: 9px;
}

.company-address {
    color: #220A00;
    font-family: 'Roboto';
    line-height: 23px;
    flex: 1;
    padding-right: 0;
    font-size: 18px;
}

.company-address-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
    padding: 0 0 0px 0;
}

.company-description {
    color: #06174A;
    font-family: 'Roboto';
    font-size: 18px;
    font-weight: normal;
    padding-right: 10px;
}

.company-contact {
    flex-direction: column;
    padding: 0;
    margin-bottom: 0px;
}

.company-contact a {
    text-decoration: none;
    color: #220A00;
    font-family: 'Roboto';
    font-size: 20px;
    padding: 4px 0 0 0;
}

.company-social-media-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
}

.company-website {
    display: none;
    text-decoration: none;
    color: #06174A;
    font-family: 'Roboto';
    font-size: 18px;
    cursor: pointer;
}

.AddtoContactsdesk .company {
    margin-bottom: 0;
}

.card_companywebsite a {
    color: #220B00;
    text-align: center;
    text-decoration: none;
    font-family: 'Roboto';
    font-size: 24px;
    word-break: break-all;
}

.company-contact-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0px 20px 0;
}

.company-contact-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── LOCATION ── */
.location-block {
    padding: 10px 0 20px 0;
}

.location-block:last-child {
    border-bottom: none;
    padding-bottom: 1px;
}

/* ── BRANCHES ── */
.branches-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 0;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
}

.branches-heading {
    font-family: 'Montserrat';
    font-size: 14px;
    color: #2E2E2E;
    opacity: 0.35;
    margin-bottom: 15px;
}

.branches-list {
    text-align: center;
    font-family: 'Roboto';
    font-size: 18px;
    color: #220B00;
    padding: 0 30px;
    line-height: 24px;
}

/* ── WEBSITE ── */
.website-section {
    padding: 20px 0 20px 0;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
    display: flex;
    align-items: center;
    color: #220B00;
    position: relative;
}

/* ── EXPERIENCE ── */
.experience {
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
}

/* ── FOOTER ── */
.footer-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 15px;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
}

.footer-section a {
    height: 26px;
    display: flex;
    align-items: center;
}

.footer-section img {
    width: auto;
    height: 100%;
}

.footer-section a:nth-child(2) {
    justify-content: flex-end;
}

/* ── VISITOR COUNT ── */
.visitor-count-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.visitor-number {
    font-family: 'Roboto';
    font-size: 20px;
    font-weight: bold;
    color: #131415;
    line-height: 1.3;
}

.visitor-text {
    display: flex;
    font-size: 13px;
    color: #131415;
    flex-direction: column;
    border-left: none;
    padding-left: 2px;
}

.visitor-label {
    font-family: 'Roboto';
    font-size: 11px;
    color: #2E2E2E;
    opacity: 0.5;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 4px;
}

/* ── GOOGLE MAP ── */
.google-map-link {
    flex-shrink: 0;
    width: 28px;
    height: 36px;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.google-map-link img {
    width: 28px;
    height: auto;
}

/* ── REVIEW ── */
.Review {
    width: 90%;
}

.Review img {
    width: 100%;
}

#company-email {
    padding: 10px 0 0 0;
}

/* ── BRANDS MARQUEE ── */
.brands {
    width: 100%;
    overflow: hidden;
}

.brands-track {
    display: flex;
    padding: 22px 0 22px 0;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
    border-bottom: 0.5px solid rgba(112, 112, 112, 0.3);
    width: max-content;
    animation: marquee 25s linear infinite;
}

.brands-track img {
    height: 60px;
    width: auto;
    flex-shrink: 0;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* ── SOCIAL MEDIA MOBILE ── */
.social-media-sectionsmobile img {
    width: 32px;
    height: 32px;
}

.social-media-sectionsmobile {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 17px 20px 20px 10px;
    max-width: 440px;
    width: 100%;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
}

.consulation {
    padding: 0;
}

/* ── LOGO ── */
.logo-container {
    width: 100%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
}

.logo-container-image {
    width: 180px;
    position: absolute;
    background-color: #ffffff;
    padding: 0 10px;
}

.logo-border {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* ── ANIMATIONS ── */
@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.image-container {
    position: absolute;
    width: 120px;
    right: 0;
    top: -25%;
}

.image-parent {
    position: absolute;
    width: 100%;
    height: auto;
    inset: 0;
}

.image-child {
    position: absolute;
    width: 100%;
    height: auto;
    inset: 0;
}

.image-child img {
    width: 100%;
    height: auto;
    transform-origin: center center;
    animation: rotate360 20s linear infinite;
}

svg {
    width: 100%;
}

/* ── BG CONTAINER ── */
.bg-container {
    width: 100%;
    min-height: 120px;
    position: relative;
}

.bg-container img {
    position: absolute;
    bottom: 0;
    left: 0;
}


.card-section.preview {
    width: 100%;
    height: 100%;
    position: fixed;
    top: -9999px;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.card-section.preview .card {
    width: 400px;
    border-radius: 20px;
    border: none;
    margin-top: 0;
    overflow: hidden;
    position: relative;
    z-index: 1000;
}

.ClosebtnBlock {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 1001;
    cursor: pointer;
}

.card-section.preview .card-banner img {
    width: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    margin-top: 0;
    border-radius: 0px 0px 0 0;
    background-color: #000;
}

.card-section.preview .card-banner {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    display: block;
}

.card-section.preview .card-header {
    position: relative;
    width: 100%;
    display: block;
    margin-top: 0;
    overflow: visible;
    height: 180px;
}

.card-section.preview .profile-image {
    width: 100px;
    height: 100px;
}

.card-section.preview .profile-imagemaincontainer {
    position: absolute; /* explicit now — no longer inherited from the main-card rule, which changed to normal flow */
    top: auto;
    bottom: 0px;
    left: 0;
    margin-top: 0; /* cancel out the main card's -2cqw pull-up, not wanted here */
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0 20px;
    transform: none;
    z-index: 5;
}

.card-section.preview .card-body {
    padding: 0px 20px 0 20px;
}

.card-section.preview .name {
    width: 100%;
    font-size: 24px;
    font-family: 'Archivo';
    font-weight: bold;
    text-align: left;
    color: #151515;
    margin-bottom: 5px;
    margin-top: 0;
}

.card-section.preview .title {
    font-size: 16px;
    color: #151515;
    font-family: 'Roboto';
    font-weight: 500;
    width: 100%;
    text-align: left;
    opacity: 0.7;
}

.card-section.preview .qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 11px 0;
}

.card-section.preview .footer-section a {
    height: 25px;
}

.card-section.preview .loading-container {
    background-color: transparent;
}

.card-section.preview .footer-section {
    justify-content: space-between;
    padding: 20px 10px;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
}

#footer-link {
    display: none;
    justify-content: center;
}

.copyurl-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
}

.copyLink {
    width: 205px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-section.preview .imgdownloadBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
}

.card-section.preview .share-section,
.shareon {
    display: flex;
    align-items: center;
}

.card-section.preview .share-section {
    justify-content: space-between;
    width: 100%;
}

.card-section.preview .downloadbtn {
    height: 30px;
}

.share-text {
    font-family: 'Roboto';
    color: #04312B;
    font-weight: bold;
    font-size: 16px;
}

.shareon>* {
    padding: 0 !important;
    margin: 0 0 0 12px !important;
}

.shareon a {
    width: 30px;
    height: 30px;
}

.shareon a::before {
    width: 30px;
    height: 30px;
}

.shareon>:before {
    top: 0 !important;
    left: 0 !important;
    background-size: 30px 30px !important;
}

.shareon>.whatsapp,
.shareon>.linkedin,
.shareon>.facebook,
.shareon>.twitter {
    background-color: transparent !important;
}

.shareon .whatsapp::before {
    background-image: url(../Assets/whatsapp_icon.svg) !important;
}

.shareon .linkedin::before {
    background-image: url(../Assets/linkedin_icon.svg) !important;
}

.shareon .facebook::before {
    background-image: url(../Assets/facebook_icon.svg) !important;
}

.shareon .twitter::before {
    background-image: url(../Assets/xcom_icon.svg) !important;
}

.container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: -9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

form {
    width: 400px;
    padding: 20px;
    border: 1px solid #efefef;
    border-radius: 25px;
    background-color: #ffffff;
}

form p {
    font-size: 24px;
    margin-bottom: 25px;
    text-align: center;
    font-family: "Roboto";
    color: #000;
    font-weight: bold;
}

input,
textarea {
    width: 100%;
    padding: 20px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Roboto';
    font-size: 20px;
    outline: none;
}

.err {
    width: 100%;
    height: 25px;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease;
}

.formbtn {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.formbtn button {
    font-size: 20px;
    font-family: "Roboto";
    font-weight: bold;
}

button {
    width: 50%;
    background-color: #00466D;
    padding: 20px 30px;
    border-radius: 8px;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    outline: none;
}

#formclosebtn {
    opacity: 0.5;
}

/* ── 768px ──
   Only the type-scale changes here now — spacing/positioning is handled by
   the fluid cqw rules above at every width, so no header/profile/contact
   overrides are needed at this breakpoint any more. */
@media screen and (max-width: 768px) {

    .card-section .name {
        font-size: 30px;
    }

    .card-section .title {
        font-size: 18px;
    }

    .card-section .description {
        line-height: normal;
        font-size: 18px;
        margin-bottom: 20px;
    }

    .card-section .name-container {
        padding: 0 0 10px 0;
    }

    .card-section .contact-section .left {
        gap: 5px;
    }

    .card-section .contact-section .icon {
        margin-right: 10px;
    }

    .card-section .contact-section a {
        font-size: 18px;
    }

    .card-section .company-section {
        padding: 25px 15px 0 7px;
    }

    .card-section .website-section {
        padding: 15px 0;
    }

    .branches-section {
        padding: 20px 0;
    }

    .image-container {
        top: -40%;
    }

    .footer-section {
        padding: 30px 15px;
    }

    .card-section:not(.preview) .services-section ul {
        gap: 5px;
    }

}

/* ── 550px ── */
@media screen and (max-width: 550px) {

    .card-section {
        padding: 20px 15px 100px 15px; /* was 285px 15px 100px 15px — fluid margin-top on .card now reserves the banner space, so this no longer needs a huge fixed top offset */
        box-sizing: border-box;
        overflow: hidden;
    }

    .card-parent {
        width: 100%;
    }

    .card-section:not(.preview) .card {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0px;
        /* margin-top intentionally left to the base fluid (118cqw) rule */
    }

    .card-section.preview .card {
        width: 100%;
        border-radius: 20px;
        border: none;
        margin-top: 0;
        overflow: hidden;
        z-index: 1000;
    }

    .card-content {
        width: 100%;
    }

    .company-website {
        display: block;
    }

    .card_companywebsite a {
        font-size: 22px;
    }

    .card-section:not(.preview) .description {
        font-size: 15px;
        margin-bottom: 15px;
    }

    .card-section:not(.preview) .contact-section .icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .card-section:not(.preview) .contact-section .icon img {
        width: 100%;
    }

    .card-section:not(.preview) .company-contact {
        flex-direction: column;
        gap: 5px;
    }

    .branches-list {
        padding: 0;
    }

    .cardbgcolorlevel {
        background-image: url("https://goodconnext.com/card/Pureely/Assets/PageBg_Mobile.svg") !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    .social-media-section {
        display: none;
    }

    .AddtoContactsmobile {
        display: flex;
        justify-content: center;
        position: fixed;
        bottom: 0px;
        left: 0px;
        background-color: #fff;
        box-shadow: 0px 0px 15px #0000001F;
        width: 100%;
        padding: 20px 0;
        border-top: unset;
        z-index: 998;
    }

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

    .card a,
    .card p,
    .card span {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .download-section {
        padding: 20px 15px;
    }

    .social-media-links-left {
        gap: 10px;
    }

    .card-section:not(.preview) .social-media-sectionsmobile {
        padding: 20px 0;
    }

    .card-section:not(.preview) .social-media-section {
        padding: 20px 0;
    }

    .card-section.preview .card .footer-section {
        padding-bottom: 18px;
    }

    .card-section.preview .profile-imagemaincontainer {
        bottom: -2%;
    }

    .card-section.preview .name-container {
        margin-top: -69px;
    }

    .container {
        padding: 30px;
    }

    form p {
        font-size: 22px;
    }

    input,
    textarea {
        font-size: 18px;
        padding: 15px 10px;
    }

    .err {
        height: 20px;
        font-size: 12px;
    }

    .formbtn button {
        font-size: 18px;
        padding: 20px 0;
    }
}

/* ── 480px ── */
@media screen and (max-width: 480px) {

    .card-section .name {
        font-size: 26px;
    }

    .card-section:not(.preview) .description {
        margin-bottom: 15px;
    }

    .card-section .company-name {
        font-size: 22px;
    }

    .card-section:not(.preview) .company-description {
        font-size: 16px;
    }

    .card_companywebsite a {
        font-size: 20px;
    }

    .image-container {
        width: 100px;
        top: -25%;
    }

    form p {
        font-size: 20px;
        margin-bottom: 20px;
    }

    input,
    textarea {
        font-size: 16px;
    }

    .formbtn button {
        font-size: 16px;
        padding: 15px 0;
    }

    .card-section.preview .name {
        font-size: 22px;
    }
}

/* ── 420px ── */
@media screen and (max-width: 420px) {

    .company-description {
        padding-right: 40px;
    }

    .image-container {
        width: 90px;
        top: -20%;
    }

    .download-leftSection {
        gap: 5px;
    }

    .social-media-links-right {
        gap: 5px;
    }

    form p {
        font-size: 18px;
    }

    .card-section.preview .name {
        font-size: 20px;
    }

    .card-section.preview .profile-imagemaincontainer {
        bottom: 11%;
    }

    .shareon>* {
        margin: 0 0 0 5px !important;
    }
}

/* ── 390px ── */
@media screen and (max-width: 390px) {

    .download-section {
        padding: 14px 9px;
    }

    .footer-section a {
        height: 25px;
    }

    form p {
        font-size: 16px;
        margin-bottom: 15px;
    }

    input,
    textarea {
        padding: 12px 10px;
        font-size: 14px;
    }

    .formbtn button {
        font-size: 14px;
        padding: 12px 0;
    }

    .card-section.preview .card-body {
        padding: 0px 15px 0 15px;
    }

    .ClosebtnBlock {
        right: 5px;
        top: 5px;
    }
}

/* ── 357px ── */
@media screen and (max-width: 357px) {

    .card-section .name {
        font-size: 22px;
    }

    .card-section:not(.preview) .description {
        margin-bottom: 15px;
    }

    .card-section .company-name {
        font-size: 22px;
    }

    .card-section:not(.preview) .company-description {
        font-size: 16px;
    }

    .card_companywebsite a {
        font-size: 20px;
    }

    .image-container {
        width: 100px;
        top: -25%;
    }

    form p {
        font-size: 20px;
        margin-bottom: 20px;
    }

    input,
    textarea {
        font-size: 16px;
    }

    .formbtn button {
        font-size: 16px;
        padding: 15px 0;
    }

    .card-section.preview .name {
        font-size: 22px;
    }
}

/* ── AVAILABLE ON SECTION ── */
.available-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 20px;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
}

.available-left {
    display: flex;
    align-items: center;
}

.available-text {
    font-family: 'Roboto';
    font-size: 15px;
    color: #4A2E1B;
    font-weight: 500;
}

.available-section .divider {
    width: 1px;
    height: 30px;
    background-color: rgba(112, 112, 112, 0.3);
    margin: 0 10px 0 15px;
}

.available-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.available-links a img {
    height: 40px;
    width: auto;
}

/* ── TALK TO AN EXPERT SECTION ── */
.expert-section {
    display: none;
    align-items: center;
    justify-content: flex-end;
    padding: 22px 0;
    border-top: 0.5px solid rgba(112, 112, 112, 0.3);
}

@media screen and (max-width: 768px) {
    .expert-section {
        display: flex;
    }
}

.expert-section a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 12px;
}

.expert-section a img {
    height: 31.71px;
    width: 44.35px;
}

.expert-text {
    font-family: 'Roboto';
    font-size: 18px;
    color: #042621;
    font-weight: bold;
}

/* ─── PREVIEW CARD ADJUSTMENTS ─── */
.card-section.preview .name-container {
    margin-bottom: 13px;
}

@keyframes upDownFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

#banner-bg {
    animation: upDownFloat 3s ease-in-out infinite;
}