/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading animations */
@keyframes slideInFromTop {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Apply animations to different elements */
.hero-content {
    animation: slideInFromLeft 0.8s ease-out;
}

.features-heading {
    animation: slideInFromTop 1s ease-out 0.2s both;
}

.features-cards {
    animation: slideInFromBottom 1s ease-out 0.4s both;
}

.team-heading {
    animation: slideInFromTop 1s ease-out 0.6s both;
}

.team-description {
    animation: fadeIn 1s ease-out 0.8s both;
}

.team-cards {
    animation: slideInFromBottom 1s ease-out 1s both;
}

.contact-heading {
    animation: slideInFromLeft 1s ease-out 1.2s both;
}

.contact-description{
    animation: slideInFromLeft 1s ease-out 1.2s both;
}
.contact-details {
    animation: slideInFromLeft 1s ease-out 1.4s both;
}

.quick-nav {
    animation: slideInFromRight 1s ease-out 1.6s both;
}

/* Header section styles - full screen height */
/* Header section styles - full screen height */
.header-section {
    background-color: #e6f2ff;
    padding: 2rem 5%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 30px; /* Reduced from 120px to 80px to move content closer to the header */
}

/* Navigation - Now sticky */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
}

.sticky-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(230, 242, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 999;
    padding: 1rem 5%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: slideInFromTop 0.6s ease-out;
}

.logo {
    font-weight: bold;
    font-size: 1.5rem;
    color: #1a53ff;
    transition: color 0.3s ease;
}

.logo:hover {
    color: #0033cc;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: #003366;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

.nav-links a:hover {
    color: #1a53ff;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(45deg, #1a53ff, #66b3ff);
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Hero content - centered in the viewport */
.hero-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* Centering content horizontally */
    gap: 4rem; /* Space between the text and the mockup */
    padding: 6rem 20px; /* Padding for the container */
    max-width: 1200px; /* Max width to match other sections */
    margin: 0 auto; /* Center the container horizontally */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.hero-content {
    max-width: 600px;
    flex: 1; /* Allow hero-content to take up available space */
    min-width: 300px; /* Minimum width before wrapping */
    text-align: left; /* Align text to the left */
}

.hero-heading {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: #003366;
}

.learn-text {
    color: #1a53ff;
}

.play-text {
    color: #66b3ff;
}

.hero-description {
    margin: 2rem 0;
    font-size: 1.2rem;
    color: #003366;
}

.cta-button {
    background-color: #1a53ff;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(26, 83, 255, 0.3);
}

.cta-button:hover {
    background-color: #0033cc;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 83, 255, 0.4);
}

.button-arrow {
    background-color: white;
    color: #1a53ff;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.cta-button:hover .button-arrow {
    transform: translateX(3px);
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #1a53ff;
    font-size: 0.9rem;
}

.scroll-arrow {
    margin-top: 0.5rem;
    animation: bounce 1.5s infinite;
}

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

/* Hero Visual (for the phone mockup) */
.hero-visual {
    display: flex;
    justify-content: center;
    /* Removed animation property here as it seems to be handled by JS now, but you can re-add if needed */
}

.app-preview {
    position: relative;
    max-width: 400px;
    width: 100%;
}

.phone-mockup {
    background: #2C3E50; /* Dark background for the phone body */
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: perspective(1000px) rotateY(-10deg); /* 3D effect */
    transition: transform 0.3s ease;
}

.phone-mockup:hover {
    transform: perspective(1000px) rotateY(-5deg) scale(1.05); /* Interactive hover effect */
}

.screen {
    background: white;
    border-radius: 15px;
    padding: 0; /* Changed to 0 as image fills it */
    min-height: 500px;
    overflow: hidden; /* Ensures image respects border-radius */
    display: flex; /* Keep flex if you ever add other content, otherwise can remove */
    align-items: center;
    justify-content: center;
}

/* Features section styles */
.features-section {
    background-color: #66b3ff;
    padding: 4rem 5%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.features-heading {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 3rem;
    text-align: center;
}

.features-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.feature-card {
    border-radius: 1rem;
    padding: 2rem;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.feature-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.feature-card.card-light-blue {
    background-color: #e6f2ff;
    color: #003366;
}

.feature-card.card-medium-blue {
    background-color: #b3d9ff;
    color: #003366;
}

.feature-card.card-dark-blue {
    background-color: #0080ff;
    color: white;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.feature-description {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.9;
}

/* Team section styles - full screen height too */
.team-section {
    background-color: #0080ff;
    padding: 4rem 5%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.team-heading {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1rem;
    text-align: center;
}

.team-description {
    color: white;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 3rem auto;
    text-align: center;
}

.team-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.team-card {
    border-radius: 1rem;
    padding: 1.5rem;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.team-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.team-card.card-light-blue {
    background-color: #66b3ff;
}

.team-card.card-medium-blue {
    background-color: #b3d9ff;
}

.team-card.card-dark-blue {
    background-color: #003366;
}

.team-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Keeps the circular shape */
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
    object-fit: cover; /* Ensures the image covers the area, cropping if necessary */
    overflow: hidden; /* Hides any part of the image that goes outside the circle */
    display: block; /* Ensures the image behaves like a block element */
}

.team-card:hover .team-photo {
    transform: scale(1.05);
}

.team-name {
    color: white;
    font-weight: 500;
    font-size: 1.2rem;
}

/* Contact section styles - Now minimized */
.contact-section {
    background-color: #003366;
    padding: 3rem 5%;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    margin-bottom: 2rem;
}

.contact-info {
    display: flex; /* Added flex for contact-info */
    flex-direction: column; /* Added flex-direction for contact-info */
}

.contact-heading {
    font-size: 2rem;
    font-weight: bold;
    color: #e6f2ff;
    margin-bottom: 1rem; /* Kept existing margin */
}

.contact-description {
    color: white;
    font-size: 1rem;
    margin-bottom: 1.5rem; /* Adjusted for consistency */
    opacity: 0.9;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* New style for the clickable link wrapper around the contact item */
.contact-item-link {
    text-decoration: none; /* Removes the default underline from the link */
    color: inherit; /* Ensures text color is inherited, preventing default blue link color */
    display: block; /* Makes the anchor tag take up the full space of its content */
    /* We will move the transition and hover effects from .contact-item to this link */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.contact-item-link:hover {
    transform: translateX(5px); /* Apply the slide effect to the whole clickable link */
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    /* Transition is now on .contact-item-link for transform,
        but we keep background-color transition here for its own change */
    transition: background-color 0.3s ease;
}

/* Hover effect for the contact item's background color, triggered by the link hover */
.contact-item-link:hover .contact-item {
    background-color: rgba(255, 255, 255, 0.15);
}


.contact-icon {
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a53ff;
    border-radius: 50%;
}

.contact-item h4 {
    color: #66b3ff;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

/* Updated style for the text within the contact item (now a span, not a direct link) */
.contact-item span {
    color: white;
    opacity: 0.9;
    font-size: 0.9rem;
    /* Transition for text opacity, triggered by link hover */
    transition: opacity 0.3s ease;
}

/* Hover effect for the text opacity, when the parent link is hovered */
.contact-item-link:hover .contact-item span {
    opacity: 1;
}

/* Remove or adjust if you still have direct <a> tags inside .contact-item for other purposes */
/* You might not need this if all clickable elements are now wrapped by .contact-item-link */
.contact-item a {
    color: white; /* Retain text color */
    text-decoration: none;
    opacity: 0.9;
    font-size: 0.9rem;
    transition: opacity 0.3s ease;
}

.contact-item a:hover {
    opacity: 1;
}

/* NEW: Quick Navigation Section */
.quick-nav {
    display: flex;
    flex-direction: column;
}

.quick-nav-heading {
    font-size: 2rem;
    font-weight: bold;
    color: #e6f2ff;
    margin-bottom: 1rem; /* Matched with .contact-heading margin-bottom */
}

.quick-nav-description {
    color: white;
    font-size: 1rem;
    margin-bottom: 1.5rem; /* Matched with .contact-description margin-bottom */
    opacity: 0.9;
}

.quick-nav-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Styles for the individual quick navigation links */
.quick-nav-links a { /* Target the anchor tags directly */
    display: flex; /* Make it a flex container to align icon and text */
    align-items: center; /* Vertically align icon and text */
    gap: 1rem; /* Space between the icon and the text (matches contact-item) */
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    color: white; /* Added to ensure text is white */
    font-weight: 500; /* Added for consistency */
    font-size: 0.9rem; /* Adjusted to match contact-item p/a font-size */
    opacity: 0.9; /* Added for consistency */
}

.quick-nav-links a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
    color: white; /* Kept white for consistency, as contact-item text doesn't change color */
}

/* This is the style for the actual <div> icon elements placed in HTML */
.quick-nav-icon { /* Targeting the new div with class quick-nav-icon */
    font-size: 1.2rem; /* Adjusted to match the visual size of emojis in contact-icon */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a53ff; /* Matching the background color of .contact-icon */
    border-radius: 50%;
    color: white; /* Ensures the emoji itself is white if it were text, though emojis are usually colored */
    flex-shrink: 0; /* Prevents the icon from shrinking on smaller screens */
}

.contact-footer {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* Modal styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Slightly darker overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    display: none;
    backdrop-filter: blur(5px);
}

.modal-container {
    background-color: white;
    padding: 2.5rem; /* Increased padding */
    border-radius: 12px; /* Consistent rounded corners */
    width: 90%; /* Wider on smaller screens */
    max-width: 500px; /* Max-width for larger modals, adjust if needed */
    position: relative;
    max-height: 110vh; /* Maximum height for the modal */
    overflow: hidden; /* Important: Prevents modal-content itself from scrolling */

    /* --- Changes for sticky header (within the modal) --- */
    display: flex; /* Make modal content a flex container */
    flex-direction: column; /* Stack children vertically */

    box-shadow: 0 8px 30px rgba(0,0,0,0.3); /* Stronger, softer shadow */
    animation: fadeInScale 0.3s ease-out forwards; /* Entrance animation */
}

/* Keyframe for modal entrance animation */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal-overlay.open .modal-container {
    transform: scale(1); /* This can stay for the entrance animation if desired */
}

.modal-close {
    color: #999; /* Softer gray */
    font-size: 2rem; /* Larger for better tap target */
    font-weight: bold;
    position: absolute;
    top: 1.25rem; /* Adjusted positioning */
    right: 1.5rem;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    z-index: 20; /* Ensure close button is above everything else in the modal */
    
    /* Remove container/background styling */
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    
    /* Remove any default button appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.modal-close:hover,
.modal-close:focus {
    color: #333; /* Darker on hover */
    transform: scale(1.1); /* Slight grow effect */
    outline: none; /* Remove focus outline if not needed */
}

/* Optional: Add a subtle focus indicator for accessibility */
.modal-close:focus-visible {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}

.tabs {
    display: flex;
    margin-bottom: 2rem; /* Consistent margin */
    padding-bottom: 1rem; /* Add padding at bottom */
    border-bottom: 1px solid #e0e7ff; /* Subtle separator */

    /* --- Make the tabs header sticky within the modal --- */
    position: sticky; /* Make it sticky */
    top: 0; /* Stick to the top of its parent (.modal-container) */
    background-color: #fff; /* Crucial: background to hide scrolling content underneath */
    z-index: 15; /* Ensure header is above scrolling content */
    padding-top: 0; /* Let modal-container's padding handle top space */
}


.tab {
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-weight: bold;
    color: #1a53ff;
    opacity: 0.7;
    transition: all 0.3s ease;
    position: relative;
    border-radius: 8px 8px 0 0; /* Rounded top corners for tabs */
}

.tab:hover {
    opacity: 0.9;
    background-color: #e6f2ff; /* Light hover background */
}

.tab.active {
    opacity: 1;
    border-bottom: 3px solid #1a53ff;
    background-color: #f0f7ff; /* Slightly different background for active tab */
}

.tab-content {
    display: none;
    flex: 1; /* Allow tab content to take up remaining space if it's a flex item */
    overflow-y: auto; /* Make the tab content scrollable if needed */
    padding-right: 10px; /* Space for scrollbar */
    margin-right: -10px; /* Counter-act padding-right for consistent width */
    min-height: 0; /* Crucial for flex items with overflow */
}

.tab-content.active {
    display: block; /* If not using flex, block is fine. If using flex, ensure it works. */
    /* If you want the content itself to be the scrollable area: */
    /* display: flex; flex-direction: column; overflow-y: auto; min-height: 0; */
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600; /* Bolder */
    color: #333;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #dbeafe; /* Consistent border color */
    border-radius: 8px; /* Consistent rounded corners */
    font-size: 1rem;
    background-color: #fff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); /* Consistent shadow */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #3b82f6; /* Blue focus border */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); /* Blue shadow on focus */
    transform: translateY(0); /* Remove the translateY for input focus */
}

.form-button {
    width: 100%;
    padding: 0.75rem;
    background-color: #1a56db; /* Deeper blue for primary action */
    color: white;
    border: none;
    border-radius: 8px; /* Consistent rounded corners */
    font-size: 1rem;
    font-weight: 600; /* Bolder */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
}

.form-button:hover {
    background-color: #1e40af; /* Darker blue on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Enhanced shadow on hover */
}

.form-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: #666;
}

.form-footer a {
    color: #1a53ff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.form-footer a:hover {
    color: #0033cc;
}

/* Show modal when open class is applied */
.modal-overlay.open {
    display: flex;
}

/* Responsive styles */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column; /* Stack items vertically on small screens */
        text-align: center; /* Center align text */
        gap: 2rem; /* Adjust gap for smaller screens */
    }

    .hero-content {
        text-align: center; /* Center align text on small screens */
    }

    .hero-heading {
        font-size: 2.5rem;
    }
    
    .features-cards,
    .team-cards {
        flex-direction: column;
        align-items: center;
    }
    
    .feature-card,
    .team-card {
        width: 100%;
        max-width: 320px;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .nav-links {
        gap: 1rem;
    }

    /* Phone mockup specific responsive adjustments */
    .phone-mockup {
        transform: none; /* Remove 3D transform on small screens */
        max-width: 300px; /* Adjust max width for better fit */
        margin-top: 2rem; /* Add space between text and mockup */
    }

    /* MODAL RESPONSIVE CHANGES */
    .modal-container {
        width: 95%; /* Wider modals on mobile */
        padding: 1.5rem; /* Reduced padding */
    }

    .tabs {
        margin-bottom: 1.5rem; /* Ensure consistency on smaller screens */
        padding-bottom: 0.75rem; /* Adjust padding bottom for smaller screens */
    }

    .tab {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .form-group {
        margin-bottom: 1rem; /* Slightly less margin for forms on smaller screens */
    }
}

@media (max-width: 480px) {
    nav {
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 2rem;
    }
    
    .nav-links {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .hero-heading {
        font-size: 2rem;
    }
    
    .hero-description, 
    .team-description,
    .contact-description,
    .quick-nav-description { /* Added for consistency */
        font-size: 1rem;
    }
    
    .features-heading,
    .team-heading,
    .contact-heading,
    .quick-nav-heading { /* Added for consistency */
        font-size: 2rem;
    }
    
    /* MODAL RESPONSIVE CHANGES */
    .modal-container {
        padding: 1rem;
        margin: 1rem;
    }
    
    .tabs {
        margin-bottom: 1rem; /* Adjust margin for very small screens */
    }

    .tab {
        padding: 0.4rem 0.8rem; /* Even smaller padding */
        font-size: 0.8rem; /* Smaller font size */
    }
    
    .form-label {
        font-size: 0.9rem; /* Smaller label font */
    }

    .form-input, .form-button {
        padding: 0.65rem; /* Smaller padding for inputs/buttons */
        font-size: 0.9rem; /* Smaller font size */
    }
    
    .contact-form-container {
        padding: 1.5rem;
    }
}

/* Additional hover effects for better interactivity */
.feature-card .feature-icon,
.contact-icon {
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1);
}

.contact-item:hover .contact-icon {
    transform: scale(1.1);
}