:root {
           
            --accent: #8e94f2;

            --accent-glow: rgba(142, 148, 242, 0.4); 
            
            --bg-deep: #050505;
            --text-white: #ffffff;
            --text-muted: #333;
            --card-bg: rgba(20, 20, 25, 0.6);
            --border-color: rgba(255, 255, 255, 0.1);
        }
     

  .hero {
            text-align: center;
            padding: 120px 20px 60px;
            position: relative;
            min-height: 100vh;
            /* Ensures full height on large screens */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

    
        .sparkle-svg {
            position: absolute;
            top: 10%;
            left: 0;
            width: 100%;
            height: 80%;
            z-index: 0;
            pointer-events: none;
            opacity: 0.6;
        }

        .hero-float-img {
            position: absolute;
            z-index: 5;
            object-fit: cover;
            box-shadow: 20px 20px 60px rgba(123, 139, 255, 0.15);
            transition: transform 0.5s ease;
            filter: brightness(1.05) contrast(1.05);
            display: block;
            /* Visible by default */
        }

        .hero-float-img:hover {
            transform: scale(1.02);
        }

        .hero-float-img.left {
            top: 15%;
            left: 5%;
            width: 240px;
            height: 340px;
            border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%;
        }

        .hero-float-img.right {
            top: 15%;
            right: 5%;
            width: 280px;
            height: 380px;
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        }

        /* TEXT CONTENT */
        .hero-content {
            position: relative;
            z-index: 10;
            max-width: 900px;
            margin: 0 auto;
        }

        .pill {
            background: #fff;
            padding: 8px 20px;
            border-radius: 100px;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--accent);
            letter-spacing: 3px;
            text-transform: uppercase;
            border: 1px solid rgba(123, 139, 255, 0.2);
            box-shadow: 0 5px 20px rgba(123, 139, 255, 0.1);
            margin-bottom: 25px;
            display: inline-block;
        }

        h1 {
            font-family: 'Playfair Display', serif;
            font-size: clamp(2.5rem, 6vw, 5.5rem);
            line-height: 1.1;
            margin-bottom: 20px;
            color: var(--primary);
        }

        h1 span {
            font-style: italic;
            background: linear-gradient(120deg, var(--accent) 0%, #a2adff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .subtext {
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto 40px;
            font-size: 1.1rem;
            font-weight: 300;
            padding: 0 20px;
        }

        /* --- CARDS CONTAINER --- */
        .cards-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 60px;
            position: relative;
            z-index: 10;
            /* No fixed height to allow wrapping */
        }

        .card {
            position: relative;
            border-radius: 24px;
            padding: 25px;
            width: 190px;
            height: 240px;
            text-align: center;
            transition: 0.4s;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                linear-gradient(90deg, #b0b8ff, #ffffff, #ffd19a, #b0b8ff) border-box;
            background-size: 300% 300%;
            animation: borderGlow 6s linear infinite;
            box-shadow: var(--shadow-soft);
        }

        .card:hover {
            transform: translateY(-10px);
        }

        .card h3 {
            font-family: 'Playfair Display';
            font-size: 1.2rem;
            margin-bottom: 8px;
            color: var(--primary);
        }

        .card p {
            font-size: 0.85rem;
            color: var(--text-light);
            line-height: 1.4;
        }

        .card-icon {
            font-size: 2rem;
            margin-bottom: 15px;
            display: block;
        }

        @keyframes borderGlow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }
  .container {
            display: flex;
            align-items: center;
            justify-content: center;
     
            width: 100%;
            padding: 40px;
            gap: 40px;
            position: relative;
            box-sizing: border-box; /* Ensures padding doesn't break width */
        }

        /* --- LEFT COLUMN: PROFILE --- */
        .profile-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;
            flex-shrink: 0; /* Prevents image squishing */
        }

        .image-wrapper {
            position: relative;
            width: 320px;
            height: 320px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 25px;
             opacity: 0;
  transform: translateY(30px);
        }

        /* --- PREMIUM SHAPES --- */
        .shape {
            position: absolute;
            width: 170px;
            height: 230px;
            background: linear-gradient(135deg, var(--navy-light), var(--navy-dark));
            border-radius: 20px;
            z-index: 0; 
            opacity: 0; 
            box-shadow: 0 10px 30px rgba(142, 148, 242, 0.2);
        }

        @keyframes slideOutLeft {
            0% { opacity: 0; transform: translateX(60px) rotate(0deg) scale(0.8); }
            100% { opacity: 1; transform: translateX(0px) rotate(-20deg) scale(1); }
        }

        @keyframes slideOutRight {
            0% { opacity: 0; transform: translateX(-60px) rotate(0deg) scale(0.8); }
            100% { opacity: 1; transform: translateX(0px) rotate(20deg) scale(1); }
        }

        .shape-left {
  left: 20px;
  opacity: 0;
}

.shape-right {
  right: 20px;
  opacity: 0;
}

/* animation only when active */
.modern-features-section.animate .shape-left {
  animation: slideOutLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.modern-features-section.animate .shape-right {
  animation: slideOutRight 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

        /* .shape-left {
  left: 20px;
  opacity: 0;
}

.shape-right {
  right: 20px;
  opacity: 0;
} */

/* animation only when active */
/* .modern-features-section.animate .shape-left {
  animation: slideOutLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.modern-features-section.animate .shape-right {
  animation: slideOutRight 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
} */


        /* .shape-left {
            left: 20px;
            animation: slideOutLeft 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .shape-right {
            right: 20px;
            animation: slideOutRight 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
        } */

        /* --- DOCTOR IMAGE --- */
        .doctor-img {
            position: relative;
            z-index: 1;
            width: 240px;
            height: 290px;
            object-fit: cover;
            border-radius: 25px;
            border: 6px solid white;
            outline: 2px solid var(--accent); 
            box-shadow: 0 20px 40px rgba(142, 148, 242, 0.15);
        }

        .text-content {
            text-align: center;
            margin-top: 15px;
            opacity: 0;
  transform: translateX(40px);
        }

        .doctor-name {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            font-size: 1.3rem;
            color: var(--navy-dark);
            margin: 5px 0;
            letter-spacing: 0.5px;
        }

        .doctor-title {
            color: var(--accent); 
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 5px;
        }

        /* --- MIDDLE: ARROW --- */
        .arrow-wrapper {
            position: relative;
            width: 180px;
            display: flex;
            justify-content: center;
            /* Negative margins pull elements closer */
            margin-left: -10px; 
            margin-top: -90px;
            opacity: 0;
            animation: fadeIn 0.8s ease-out 1s forwards;
            flex-shrink: 0;
             opacity: 0;
  transform: translateY(20px);
        }
        /* 1️⃣ Shapes + image */
.modern-features-section.animate .image-wrapper {
  animation: fadeUp 0.8s ease forwards;
}

/* 2️⃣ Text (delayed) */
.modern-features-section.animate .text-content {
  animation: fadeRight 0.8s ease forwards;
  animation-delay: 0.6s;
}

/* 3️⃣ Arrow (more delay) */
.modern-features-section.animate .arrow-wrapper {
  animation: fadeLeft 0.6s ease forwards;
  animation-delay: 1.2s;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


        
        @keyframes fadeIn { to { opacity: 1;} }

        .arrow-img {
            width: 100%;
            height: auto;
            transform: rotate(10deg);
        }

        /* --- RIGHT: CTA SECTION --- */
        .cta-section {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            max-width: 450px;
            opacity: 0;
            animation: fadeIn 0.8s ease-out 1.2s forwards;
        }

        .headline {
            font-family: 'Playfair Display', serif;
            /* Responsive font size logic */
            font-size: clamp(2rem, 4vw, 3rem); 
            font-weight: 700;
            color: var(--navy-dark);
            line-height: 1.2;
            margin-bottom: 30px;
        }
        
        .headline span {
            font-style: italic;
            color: var(--accent);
            font-weight: 400;
            text-decoration: underline;
            text-decoration-color: rgba(142, 148, 242, 0.3);
            text-underline-offset: 5px;
        }

        .btn-primary {
            background: var(--navy-dark);
            color: white;
            padding: 18px 50px;
            border-radius: 0px;
            border-top-right-radius: 30px;
            border-bottom-left-radius: 30px;
            text-decoration: none;
            font-family: 'Montserrat', sans-serif;
            font-weight: 500;
            font-size: 0.9rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(10, 17, 40, 0.15);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            background: var(--accent);
            color: white;
            box-shadow: 0 15px 30px rgba(142, 148, 242, 0.4);
        }

        /* --- RESPONSIVE MEDIA QUERIES --- */
        
        /* Tablet & Mobile (Below 950px) */
        @media (max-width: 950px) {
            .container {
                flex-direction: column; /* Stack vertically */
                padding: 60px 20px;
                gap: 10px;
            }

            .image-wrapper {
                /* Slightly smaller on tablet to save space */
                transform: scale(0.9);
                margin-bottom: 10px;
            }

            .arrow-wrapper {
                margin: 0; /* Remove desktop negative margins */
                margin-top: -20px; /* Pull it up slightly */
                margin-bottom: 10px;
                width: 120px; /* Smaller arrow */
                /* Rotate 90deg clockwise to point DOWN */
                transform: rotate(90deg); 
            }

            .cta-section {
                align-items: center; /* Center text */
                text-align: center;
                max-width: 100%;
            }

            .headline {
                margin-bottom: 20px;
            }
        }

        /* Mobile Phones (Below 480px) */
        @media (max-width: 480px) {
            .image-wrapper {
                /* Scale down further for small screens */
                transform: scale(0.75); 
                margin-bottom: 0;
            }
            
            /* Adjust shapes animation for tiny screens so they don't overflow */
            @keyframes slideOutLeft {
                0% { opacity: 0; transform: translateX(40px) rotate(0deg) scale(0.8); }
                100% { opacity: 1; transform: translateX(0px) rotate(-15deg) scale(1); }
            }

            @keyframes slideOutRight {
                0% { opacity: 0; transform: translateX(-40px) rotate(0deg) scale(0.8); }
                100% { opacity: 1; transform: translateX(0px) rotate(15deg) scale(1); }
            }

            .arrow-wrapper {
                margin-top: -40px; /* Pull tighter to image */
                width: 100px;
            }

            .headline {
                font-size: 1.8rem; /* readable size for mobile */
            }

            .btn-primary {
                padding: 15px 40px;
                font-size: 0.8rem;
            }
        }
  /*****REVIEWS******/


          .aurora-glow {
            position: absolute;
            width: 800px;
            height: 800px;
            /* Blue/Violet light simulation */
            background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%);
            top: -20%;
            right: -10%;
            z-index: 0;
            opacity: 0.5;
            filter: blur(90px);
            animation: breathe 8s ease-in-out infinite alternate;
        }

        .aurora-glow-2 {
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
            bottom: -10%;
            left: -10%;
            z-index: 0;
            opacity: 0.3;
            filter: blur(100px);
        }

        @keyframes breathe {
            0% { transform: scale(1); opacity: 0.4; }
            100% { transform: scale(1.1); opacity: 0.6; }
        }

        /* --- MAIN LAYOUT --- */
        .review-container {
            position: relative;
            z-index: 2;
       
           
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 5rem;
            align-items: center;
               background-color: var(--bg-deep);
            color: var(--text-white);
            min-height: 100vh;
            /* display: flex; */
            justify-content: center;
            align-items: center;
            overflow-x: hidden;
            perspective: 2000px;
        }

        /* --- LEFT SIDE --- */
        .left-content { padding-right: 1rem; }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 10px 20px;
            border-radius: 100px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            margin-bottom: 2.5rem;
            backdrop-filter: blur(10px);
        }

        .google-icon {
            height: 20px;
            filter: grayscale(100%) brightness(500%);
            opacity: 0.9;
        }

        .star-row {
            color: var(--text-white); /* White stars for whitening theme */
            font-size: 1.1rem;
            letter-spacing: 3px;
            text-shadow: 0 0 10px rgba(255,255,255,0.6);
        }

        .review-headline {
            font-size: 4rem;
            font-weight: 200;
            line-height: 1.1;
            margin-bottom: 2rem;
            color: #fff;
        }

        .review-headline span {
            font-weight: 600;
            color: var(--accent);
            text-shadow: 0 0 20px var(--accent-glow);
        }

        .subtext {
            color: var(--text-muted);
            font-size: 1.2rem;
            line-height: 1.7;
            max-width: 500px;
            font-weight: 300;
        }

        /* --- RIGHT SIDE (The Card) --- */
        .right-content {
            display: flex;
            justify-content: flex-end;
            position: relative;
            perspective: 1500px;
        }

        .glass-card {
            background: var(--card-bg);
            border-radius: 24px;
            padding: 3.5rem;
            width: 100%;
            max-width: 500px;
            position: relative;
            border: 1px solid var(--border-color);
            border-top: 1px solid rgba(255,255,255,0.3); /* Bright top edge */
            box-shadow: 0 40px 80px -20px rgba(0,0,0,0.9);
            transform-style: preserve-3d;
            animation: floating 7s ease-in-out infinite;
        }

        @keyframes floating {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* Glow behind text inside card */
        .glass-card::before {
            content: '';
            position: absolute;
            top: 30%; left: 30%;
            width: 40%; height: 40%;
            background: #fff; /* White glow center */
            filter: blur(80px);
            opacity: 0.1;
            z-index: -1;
            pointer-events: none;
        }

        .quote-mark {
            font-size: 6rem;
            font-family: serif;
            color: var(--accent);
            opacity: 0.5;
            position: absolute;
            top: 2rem; left: 2rem;
            line-height: 0;
            transform: translateZ(20px);
        }

        .review-text {
            position: relative;
            z-index: 1;
            font-size: 1.45rem;
            line-height: 1.5;
            color: #ffffff;
            font-weight: 300;
            margin-top: 1rem;
            margin-bottom: 2.5rem;
            transform: translateZ(30px);
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }

        .profile-section {
            display: flex;
            align-items: center;
            gap: 1rem;
            border-top: 1px solid var(--border-color);
            padding-top: 1.5rem;
            transform: translateZ(25px);
        }

        .avatar {
            width: 55px; height: 55px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255,255,255,0.3);
        }

        .user-info h4 { font-size: 1.1rem; font-weight: 600; color: #fff; }
        .user-info span { font-size: 0.85rem; color: var(--accent); letter-spacing: 0.5px; }
        .g-icon-small { margin-left: auto; width: 24px; filter: grayscale(100%) invert(1); opacity: 0.6; }

        /* --- RESPONSIVE --- */
        @media (max-width: 968px) {
            .review-container { grid-template-columns: 1fr !important; text-align: center; gap: 3rem; }
            .left-content { padding-right: 0; display: flex; flex-direction: column; align-items: center; }
            .review-headline { font-size: 3rem; }
            .right-content { justify-content: center; }
            .glass-card { padding: 2.5rem; animation: none; }
        }

          

        /* --- 1. FASTER BACKGROUND LIGHTS --- */
.aurora-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 65%);
    top: -20%;
    right: -10%;
    z-index: 0;
    opacity: 0.5;
    filter: blur(90px);
    /* Speed increased: 8s -> 3s */
    animation: breathe 3s ease-in-out infinite alternate;
}

.aurora-glow-2 {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    bottom: -10%;
    left: -10%;
    z-index: 0;
    opacity: 0.3;
    filter: blur(100px);
    /* Speed increased and varied slightly */
    animation: breathe 4s ease-in-out infinite alternate-reverse;
}

@keyframes breathe {
    0% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(1.15); opacity: 0.7; }
}

/* --- 2. FASTER CARD FLOAT --- */
.glass-card {
    background: var(--card-bg);
    border-radius: 24px;
    padding: 3.5rem;
    width: 100%;
    max-width: 500px;
    position: relative;
    border: 1px solid var(--border-color);
    border-top: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.9);
    
    transform-style: preserve-3d;
    /* Speed increased: 7s -> 3.5s */
    animation: floating 3.5s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); } /* Increased movement slightly for impact */
}


@media (max-width: 768px) {

    /* 1. Fix the Container Clipping */
    .hero {
        display: flex;
        flex-direction: column;
        
        /* KEY FIX: Stop centering vertically. 
           'flex-start' ensures the H1 stays at the top. */
        justify-content: flex-start; 
        
        /* Remove fixed height so it can grow as long as needed */
        min-height: auto;
        height: auto;
        
        /* Add padding to clear your fixed Navbar */
        padding-top: 140px; 
        padding-bottom: 60px;
    }

    /* 2. Reset the Floating Images */
    .hero-float-img {
        /* Remove absolute positioning so they don't float off-screen */
        position: relative !important; 
        top: auto !important;
        left: auto !important;
        right: auto !important;
        
        /* Make them visible and stacked */
        display: block;
        width: 140px !important; /* Smaller mobile size */
        height: 180px !important;
        margin: 0 auto 30px auto; /* Center them with space below */
        
        /* Ensure they sit nicely in the stack order */
        order: 2; 
    }

    /* 3. Ensure Text is Visible */
    .hero-content {
      
        width: 100%;
        padding: 0 20px;
        margin-bottom: 20px;
    }

    h1 {
        font-size: 2.8rem; /* readable size */
        line-height: 1.2;
    }

    /* 4. Fix Cards Container */
    .cards-container {
        order: 3; /* Cards last */
        flex-wrap: wrap;
        margin-top: 20px;
        gap: 15px;
    }
}

/* Wrapper to hold images and arrow together */
.comparison-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px; /* Space between the two images */
    margin: 30px auto;
    width: 300px; /* Constrain width for mobile */
}

/* Style the images */
.comp-img {
    width: 160px;       /* Fixed size for consistency */
    height: 200px;
    object-fit: cover;
    border-radius: 20px; /* Smooth rounded corners */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    z-index: 2;         /* Ensure images are above the SVG background */
    position: relative;
      border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%;
}

/* The Arrow Overlay */
.arrow-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Arrow floats on top */
    pointer-events: none; /* Allows you to click through the arrow if needed */
    overflow: visible; /* Allows arrow to curve slightly outside box if needed */
}

/* --- DEFAULT: DESKTOP (> 1000px) --- */

/* Show Desktop View */
.desktop-view {
    display: block;
}

/* Hide Mobile View */
.mobile-view {
    display: none;
}

/* --- MEDIA QUERY: TABLET & MOBILE (<= 1000px) --- */
@media (max-width: 1000px) {
    
    /* Hide Desktop View */
    .desktop-view {
        display: none;
    }

    /* Show Mobile View */
    .mobile-view {
        display: flex; /* Use Flex because it's the wrapper */
    }

    /* IMPORTANT: Reset the floating images for the Mobile View
       Since you reused the class 'hero-float-img', we must kill the 
       absolute positioning or they will fly off screen. */
    .mobile-view .hero-float-img {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 160px !important; /* Force width from previous step */
        height: 200px !important;
        margin: 0 !important; /* Let flexbox handle spacing */
        
    }
}

/* --- VIEW TOGGLE LOGIC --- */

/* 1. Default State (Screens LARGER than 1000px) */
.desktop-view {
    display: block !important;
}

.mobile-view {
    display: none !important; /* Force hide mobile on big screens */
}

/* 2. Mobile State (Screens 1000px and SMALLER) */
@media (max-width: 1000px) {
    
    .desktop-view {
        display: none !important; /* Force hide desktop */
    }

    .mobile-view {
        display: flex !important; /* Force show mobile */
        flex-direction: column;   /* Ensure vertical stacking */
    }
}

@media (max-width: 760px) {
    .cards-container {
        display: flex !important;
        flex-direction: row !important; /* Forces horizontal layout */
        flex-wrap: wrap !important;     /* Allows wrapping to the second line */
        justify-content: center !important; /* Centers the bottom 2 cards */
        gap: 2% !important;            /* Uses % gap so it never overflows */
        padding: 0 10px !important;
    }

    .card {
        /* MATH: 100% / 3 = 33.3%. We use 32% to leave room for the gap. */
        width: 32% !important; 
        flex: 0 0 32% !important;
        
        /* Reset all spacing to ensure they fit */
        margin: 0 0 10px 0 !important; 
        padding: 0 !important;
        
        /* Remove card styling for the "collage" look */
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        animation: none !important;
        height: auto !important;
    }

    /* Target the inner div and image to ensure they shrink correctly */
    .card > div, 
    .card img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
        display: block !important;
        margin: 0 !important;
    }
}



@media(max-width:1200px)
{
    
        .hero-float-img.left {
            top: 5%;
            left: 5%;
            width: 240px;
            height: 340px;
            border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%;
        }

        .hero-float-img.right {
            top: 5%;
            right: 5%;
            width: 280px;
            height: 380px;
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        }
}