.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 20px;
    background-color: white;
    /*color: #00c9ff;*/
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

    .social-icon:hover {
        background-color:#000;/* #00c9ff;*/       
        color: white;
        transform: scale(1.1);
    }

.mobile-preview {
    width: 300px;
    height: 600px;
    border: 2px solid #ccc;
    border-radius: 30px;
    /*padding: 20px;*/
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    position: relative;
    overflow-y: auto;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: 0;
    overflow-y: hidden;
}

.hero-section {
  
    /*background: radial-gradient( 110.26% 96% at 50% 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.02) 64.72%, rgba(255, 255, 255, 0.05) 68.55%, rgba(255, 255, 255, 0.1) 71.65%, rgba(255, 255, 255, 0.18) 74.13%, rgba(255, 255, 255, 0.25) 76.15%, rgba(255, 255, 255, 0.33) 77.82%, rgba(255, 255, 255, 0.41) 79.3%, rgba(255, 255, 255, 0.5) 80.7%, rgba(255, 255, 255, 0.59) 82.18%, rgba(255, 255, 255, 0.67) 83.85%, rgba(255, 255, 255, 0.76) 85.87%, rgba(255, 255, 255, 0.85) 88.35%, rgba(255, 255, 255, 0.93) 91.45%, rgb(255, 255, 255) 100% ), url('https://alinkme.com/Themefolder/cfb52758-e10f-42e7-aa6f-ff9a2726e7b4.jpg') center/cover no-repeat;*/
    color: #333;
    height: 80vh;
    background-position: center 20% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    width: 100%;
}

.hero-overlay {
    position: absolute;
    /* inset: 0;*/
    background: radial-gradient(circle at top, rgba(255,255,255,0.2), rgba(255,255,255,0.8));
    /* z-index: 1;*/
}

.hero-content {
    z-index: 2;
    animation: fadeInUp 1.2s ease-in-out;
}

.square-btn {
    border-radius: 0 !important;
}

.round-btn {
    border-radius: 50px !important;
}

.selected-theme {
    border: 2px solid var(--bs-dark) !important;
    border-radius: var(--bs-border-radius-lg) !important;
}

.custom-hover:hover {
    border: 2px solid var(--bs-dark) !important;
    border-radius: var(--bs-border-radius-lg) !important;
}

/*html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}*/

#link-bar {
    position: fixed;
    bottom: 5%;
    left: 0;
    width: auto;
    padding: 10px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
    border-radius: 10px 10px 0 0;
    z-index: 1050;
    left: 50%;
    transform: translateX(-50%);
    max-width: 95%;
}

@media (max-width: 576px) {
    #link-bar {
        width: 100%;
        left: 0;
        transform: none;
        border-radius: 0;
        padding: 10px;
        max-width: 100%;
        bottom: 0;
        margin-bottom: 0;
    }

        #link-bar form {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        #link-bar .input-group {
            flex-direction: column;
            align-items: stretch;
        }

        #link-bar .input-group-text,
        #link-bar .form-control,
        #link-bar .btn {
            width: 100%;
        }
}

.gradient-card3 {
    background: linear-gradient(135deg, #20c997, #198754);
    color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    margin: 3px;
}

.gradient-card4 {
    background: linear-gradient(135deg, #0dcaf0, #6610f2);
    color: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

#tabmain .nav-tabs .nav-link {
    border: none;    
    font-weight: 600;
    transition: all 0.3s ease;
    font-weight: normal;
    position: relative;
}
    /* create animated underline */
    #tabmain .nav-tabs .nav-link::after {
        content: "";
        position: absolute;
        left: 50%; /* Start from center */
        bottom: 0;
        height: 3px;
        width: 0;
        background-color: #0dcaf0;
        transform: translateX(-50%);
        transition: width 0.3s ease-in-out;
    }
    #tabmain .nav-tabs .nav-link.active {
        border-bottom: 2px solid #0dcaf0; /* info color */
        color: #003B5C;
        background: rgba(var(--bs-info-rgb), 0.18) !important;
        font-weight: bold;
    }
        #tabmain .nav-tabs .nav-link.active::after {
            width: 100%;
        }
    #tabmain .nav-tabs .nav-link:hover {
        color: #003B5C;
        background-color: #f8f9fa;
        border-bottom: 2px solid #0dcaf0;
    }
        #tabmain .nav-tabs .nav-link:hover::after {
            width: 100%;
        }

#tabmain .tab-content {
    border: 1px solid #0dcaf0;
    border-top: none;
    padding: 1.5rem;
    border-radius: 0 0 .5rem .5rem;
    background-color: #fff;
}

.profile-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

    .profile-wrapper img,
    .profile-wrapper .no-img-box {
        width: 150px;
        height: 150px;
        object-fit: cover;
        border-radius: 50%;
    }

/* Overlay */
.profile-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 150px !important;
    height: 150px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    color: #fff !important;
    font-weight: 600 !important;
    transition: opacity 0.3s ease !important;
}

.profile-wrapper:hover .profile-overlay {
    opacity: 1 !important;
}
/*28/11/2025*/
.pinterest-grid {
    column-count: 2;
    column-gap: 1.5rem;
}

@media (min-width: 576px) {
    .pinterest-grid {
        column-count: 3;
    }
}

@media (min-width: 992px) {
    .pinterest-grid {
        column-count: 4;
    }
}

@media (min-width: 1400px) {
    .pinterest-grid {
        column-count: 5;
    }
}

.pin {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.5rem;
    break-inside: avoid;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    transition: all 0.35s ease;
    position: relative;
}

    .pin:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    }

    /* Critical: Force correct aspect ratio before image loads */
    .pin::before {
        content: "";
        display: block;
        padding-bottom: var(--aspect-ratio, 140%); /* fallback */
    }

    .pin img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        loading: lazy;
        decoding: async;
    }

/* Hover overlay title */
.pin-overlay {
    position: absolute;
    inset: 0; /* top-0 right-0 bottom-0 left-0 */
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px); /* optional nice blur effect */
    color: white;
    padding: 1.5rem;
    /* Flexbox centering */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* Hidden → visible on hover */
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pin:hover .pin-overlay {
    opacity: 1;
    transform: scale(1);
}

.pin-title {
    font-size: 1.25rem; /* slightly bigger when centered */
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    max-width: 90%;
    word-wrap: break-word;
}

/* Real odd/even height variation – works perfectly with big images */
.pin:nth-child(5n+1) {
    --aspect-ratio: 70%;
}
/* 1:1.43  → medium */
.pin:nth-child(5n+2) {
    --aspect-ratio: 160%;
}
/* 1:1.6   → tall */
.pin:nth-child(5n+3) {
    --aspect-ratio: 90%;
}
/* 1:1.11  → almost square */
.pin:nth-child(5n+4) {
    --aspect-ratio: 190%;
}
/* 1:1.9   → very tall */
.pin:nth-child(5n+5) {
    --aspect-ratio: 120%;
}
/* 1:1.2   → medium-tall */
.btn-generate {
    background: #667eea;
    border: none;
}

    .btn-generate:hover {
        background: #764ba2;
    }
    
.btn-download {
    background: linear-gradient(135deg, #6f42c1, #8b5cf6);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(111,66,193,.35);
}

.btn-edit {
    background: linear-gradient(135deg, #0dcaf0, #3dd5f3);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(13,202,240,.35);
}
.btn-delete {
    background: linear-gradient(135deg, #dc3545, #ff6b6b);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(220,53,69,.35);
}
    .btn-download:hover,
    .btn-edit:hover,
    .btn-delete:hover {
        transform: translateY(-2px);
        transition: all .25s ease;
        opacity: .95;
    }

/* NEXT – Blue */
.btn-next {
    background: linear-gradient(135deg, #0d6efd, #4dabf7);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(13,110,253,.35);
}

/* BACK – Gray */
.btn-back {
    background: linear-gradient(135deg, #6c757d, #adb5bd);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(108,117,125,.35);
}

/* PREVIOUS – Purple */
.btn-previous {
    background: linear-gradient(135deg, #6f42c1, #9775fa);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(111,66,193,.35);
}

/* CONTINUE – Green */
.btn-continue {
    background: linear-gradient(135deg, #198754, #51cf66);
    color: #fff;
    border: none;
    box-shadow: 0 6px 18px rgba(25,135,84,.35);
}
    .btn-delete:hover,
    .btn-next:hover,
    .btn-back:hover,
    .btn-previous:hover,
    .btn-continue:hover {
        transform: translateY(-2px);
        transition: all .25s ease;
        opacity: .95;
        color: #fff;
    }

/* OUTLINE – COMMON */
.btn-outline-next,
.btn-outline-back,
.btn-outline-previous,
.btn-outline-continue,
.btn-outline-delete {
    background: transparent;
    border: 2px solid;
    font-weight: 500;
    transition: all .25s ease;
}

/* NEXT – Blue */
.btn-outline-next {
    border-color: #0d6efd;
    color: #0d6efd;
}

    .btn-outline-next:hover {
        background: linear-gradient(135deg, #0d6efd, #4dabf7);
        color: #fff;
        box-shadow: 0 6px 18px rgba(13,110,253,.35);
    }

/* BACK – Gray */
.btn-outline-back {
    border-color: #6c757d;
    color: #6c757d;
}

    .btn-outline-back:hover {
        background: linear-gradient(135deg, #6c757d, #adb5bd);
        color: #fff;
        box-shadow: 0 6px 18px rgba(108,117,125,.35);
    }

/* PREVIOUS – Purple */
.btn-outline-previous {
    border-color: #6f42c1;
    color: #6f42c1;
}

    .btn-outline-previous:hover {
        background: linear-gradient(135deg, #6f42c1, #9775fa);
        color: #fff;
        box-shadow: 0 6px 18px rgba(111,66,193,.35);
    }

/* CONTINUE – Green */
.btn-outline-continue {
    border-color: #198754;
    color: #198754;
}

    .btn-outline-continue:hover {
        background: linear-gradient(135deg, #198754, #51cf66);
        color: #fff;
        box-shadow: 0 6px 18px rgba(25,135,84,.35);
    }

/* DELETE – Red */
.btn-outline-delete {
    border-color: #dc3545;
    color: #dc3545;
}

    .btn-outline-delete:hover {
        background: linear-gradient(135deg, #dc3545, #ff6b6b);
        color: #fff;
        box-shadow: 0 6px 18px rgba(220,53,69,.35);
    }


.claim-wrapper {
    background: linear-gradient( 90deg, #000 0%, #000 50%, #0dcaf0 50%, #0d6efd 100% );
    border-radius: 14px;
    padding: 5px;
    max-width: 680px;
   
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.claim-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap; /* 🔑 force single row */
}

.claim-prefix {
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
}

.claim-input {
    border-radius: 6px;
    border: 1px solid #ced4da;
    padding: 5px 14px;
    width: 200px;
}

    .claim-input:focus {
        border-color: #198754;
        box-shadow: 0 0 0 .2rem rgba(25,135,84,.25);
    }

.btn-claim {
    background: #000;
    color: #ffffff;
    border: none;
    padding: 10px 26px;
    font-weight: 500;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(25,135,84,.35);
    white-space: nowrap;
}

    .btn-claim:hover {
        background: #ffffff;
        color: #000;
        box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }

/* 📱 MOBILE — SAME ROW, SMALLER FONT */
@media (max-width: 576px) {
    .claim-wrapper {
        padding: 10px;
    }

    .claim-box {
        gap: 6px;
    }

    .claim-prefix {
        font-size: 14px;
    }

    .claim-input {
        font-size: 14px;
        padding: 6px 8px;
        width: 130px;
    }

    .btn-claim {
        font-size: 14px;
        padding: 6px 12px;
        border-radius: 8px;
    }
}

/* Floating Shapes Container */
/*.floating-shapes-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}*/

/* Base Floating Shape Styles */
/*.floating-shape {
    position: absolute;
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}*/

/* Individual Shape Animations */
/*.shape-1 {
    width: 100px;
    height: 100px;
    top: 10%;
    left: 5%;
    animation: float-1 20s ease-in-out infinite;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
}

.shape-2 {
    width: 150px;
    height: 150px;
    top: 15%;
    right: 10%;
    animation: float-2 25s ease-in-out infinite;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.shape-3 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 15%;
    animation: float-3 18s ease-in-out infinite;
    border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
}

.shape-4 {
    width: 120px;
    height: 120px;
    bottom: 15%;
    right: 8%;
    animation: float-4 22s ease-in-out infinite;
}

.shape-5 {
    width: 90px;
    height: 90px;
    top: 50%;
    left: 8%;
    animation: float-5 19s ease-in-out infinite;
    border-radius: 20% 80% 80% 20% / 70% 30% 70% 30%;
}

.shape-6 {
    width: 110px;
    height: 110px;
    top: 45%;
    right: 12%;
    animation: float-6 24s ease-in-out infinite;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}*/

/* Floating Animations */
/*@keyframes float-1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    25% {
        transform: translate(30px, -30px) rotate(90deg) scale(1.1);
    }

    50% {
        transform: translate(50px, 20px) rotate(180deg) scale(0.9);
    }

    75% {
        transform: translate(-20px, 40px) rotate(270deg) scale(1.05);
    }
}

@keyframes float-2 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(-40px, 30px) rotate(120deg);
    }

    66% {
        transform: translate(20px, -40px) rotate(240deg);
    }
}

@keyframes float-3 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate(-30px, -50px) rotate(180deg) scale(1.2);
    }
}

@keyframes float-4 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(-35px, -25px) rotate(90deg);
    }

    50% {
        transform: translate(-60px, 15px) rotate(180deg);
    }

    75% {
        transform: translate(-25px, 35px) rotate(270deg);
    }
}

@keyframes float-5 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(40px, -35px) scale(1.15);
    }
}

@keyframes float-6 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    40% {
        transform: translate(-45px, 40px) rotate(144deg);
    }

    80% {
        transform: translate(30px, -30px) rotate(288deg);
    }
}

@keyframes float-7 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    33% {
        transform: translate(25px, 35px) rotate(120deg) scale(0.9);
    }

    66% {
        transform: translate(-35px, -25px) rotate(240deg) scale(1.1);
    }
}

@keyframes float-8 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(40px, 45px) rotate(180deg);
    }
}*/

/* Responsive adjustments */
/*@media (max-width: 768px) {
    .floating-shape {
        opacity: 0.05;
    }

    .shape-1, .shape-3, .shape-5 {
        width: 60px;
        height: 60px;
    }

    .shape-2, .shape-4, .shape-6 {
        width: 80px;
        height: 80px;
    }
}*/
.snow {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(2px 2px at 20px 30px, white, transparent), radial-gradient(2px 2px at 40px 70px, white, transparent), radial-gradient(2px 2px at 50px 160px, white, transparent), radial-gradient(2px 2px at 90px 40px, white, transparent), radial-gradient(2px 2px at 130px 80px, white, transparent), radial-gradient(2px 2px at 160px 120px, white, transparent);
    background-size: 200px 200px;
    animation: snowFall 12s linear infinite;
    opacity: 0.7;
    top:10%;
}
/* ===== Animations ===== */
@keyframes snowFall {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 600px;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glow {
    from {
        box-shadow: 0 0 15px rgba(255,255,255,0.4);
    }

    to {
        box-shadow: 0 0 30px rgba(255,255,255,0.8);
    }
}
.qr-feature-card {
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    transition: all .3s ease;
}

    .qr-feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(0,0,0,.15);
    }

.qr-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dc3545, #ff6b6b);
}

    .qr-icon.website {
        background: linear-gradient(135deg, #0d6efd, #0dcaf0);
    }

    .qr-icon.bio {
        background: linear-gradient(135deg, #198754, #20c997);
    }

    .qr-icon i,
    .qr-icon svg {
        color: #fff;
    }
/* Enable hover dropdown for desktop */
@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }

    .navbar .dropdown-toggle::after {
        transition: transform 0.2s ease;
    }

    .navbar .dropdown:hover .dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

/* Menu item */
.menu-item {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 6px;
    color: #212529;
    text-decoration: none;
    font-weight: 500;
    transition: 0.2s ease;
}

    .menu-item i {
        margin-right: 12px;
        font-size: 1.1rem;
        color: #6c757d;
    }

    .menu-item:hover,
    .menu-item:focus,
    .menu-item:active,
    .menu-item.active {
        background: #f1f5ff;
        color: #0d6efd;
    }

        .menu-item:hover i,
        .menu-item:focus i,
        .menu-item:active i,
        .menu-item.active i {
            color: #0d6efd;
        }

/* Section title */
.menu-section-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #6c757d;
    margin: 14px 0 6px;
    font-weight: 600;
}


/* Plan box */
.plan-box {
    background: #f1f5ff;
    border-radius: 12px;
    padding: 10px;
}
#backToTop {
    width: 48px;
    height: 48px;
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

    /* Show state */
    #backToTop.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Touch feedback */
    #backToTop:active {
        transform: scale(0.9);
    }
/* Base (mobile first) */
.back-to-top {
    width: 42px;
    height: 42px;
}

/* Tablet (≥576px) */
@media (min-width: 576px) {
    .back-to-top {
        width: 46px;
        height: 46px;
    }
}

/* Laptop (≥768px) */
@media (min-width: 768px) {
    .back-to-top {
        width: 50px;
        height: 50px;
    }
}

/* Desktop (≥992px) */
@media (min-width: 992px) {
    .back-to-top {
        width: 54px;
        height: 54px;
    }
}
.back-to-top i {
    font-size: 1.1rem;
}

@media (min-width: 768px) {
    .back-to-top i {
        font-size: 1.25rem;
    }
}