/* General Typography */
body {
    font-family: 'Montserrat', sans-serif;
    color: #000;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}
.container-fluid{
    padding-right: 4.5rem !important;
    padding-left: 4.5rem !important;
}
/* Navbar */
.navbar-brand .brand-text {
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-top: 5px;
    font-weight: 600;
}
.navlinks{
    gap: 7rem;
}
.nav-link {
    font-size: 18px;
    letter-spacing: 1px;
    color: #000 !important;
}

.nav-link:hover {
    color: #000 !important;
}

/* Hero Section */
.hero-section {
    background-color: #1a1a1a; /* Dark background */
    min-height: 85vh; /* Takes up most of the screen */
    padding-bottom: 100px; /* Space for the overlapping section */
    position: relative;
    overflow: hidden;
}

.btn-outline-custom {
    color: #ccc;
    border: 1px solid #000;
    border-radius: 5px;
    background: rgba(255,255,255,0.05);
    transition: all 0.3s;
    box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);
}

.btn-outline-custom:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* Hero Phone Mockups Positioning */
.hero-phones-container {
    position: relative;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-mockup {
    position: absolute;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    transition: transform 0.3s;
}

.phone-center {
    z-index: 10;
    width: 200px; /* Adjust based on actual image */
    border: 4px solid #333;
}

.phone-left {
    z-index: 5;
    width: 180px;
    transform: translateX(-140px) scale(0.9);
    opacity: 0.8;
}

.phone-right {
    z-index: 5;
    width: 180px;
    transform: translateX(140px) scale(0.9);
    opacity: 0.8;
}

/* Info Section (Gradient/Gray background) */
.info-section {
    background: linear-gradient(to bottom, #1a1a1a 10%, #e0e0e0 10%); /* Transition trick */
    /* padding-bottom: 4rem; */
}

.app-card {
    border-radius: 40px; /* Big rounded corners */
    position: relative;
    z-index: 20;
    margin-top: -50px; /* Slight overlap upwards if desired, or relying on gradient */
}

/* Flying Phones in Info Section */
.flying-phones {
    position: relative;
    height: 400px;
    /* Rotation to mimic the diagonal layout */
    transform: rotate(-15deg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.flying-phones img {
    position: absolute;
}

.fp-1 { transform: translate(-100px, 50px); z-index: 1; }
.fp-2 { transform: translate(0px, -20px); z-index: 2; }
.fp-3 { transform: translate(100px, -80px); z-index: 3; }

/* Icons */
.text-secondary-light {
    color: #ccc; /* Light gray for icons */
    stroke-width: 1px;
}
.icons-row{
    position: relative;
    z-index: 99;
}
.icons-row .icon-box svg {
    stroke: white;
}
/* Invert icons color to white stroke for visual match with design bottom area if it was dark, 
   but design shows them on light gray background below the card. 
   Wait, the design shows white icons on the light gray background. 
   That usually implies a white stroke. */
.icons-row .icon-box i, .icons-row .icon-box svg {
    color: #fff;
    stroke: #fff;
    /* Add a subtle shadow so white icons show on light gray */
    text-shadow: 0 0 2px rgba(0,0,0,0.2); 
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.2));
}


/* Clients Section */
.bg-light-gray {
    background-color: #f4f4f4;
}

.spacing-wide {
    letter-spacing: 2px;
    font-size: 0.9rem;
}

.client-img-wrapper {
    height: 350px;
    overflow: hidden;
    position: relative;
}

.client-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter 0.3s;
}

.client-img-wrapper img:hover {
    filter: grayscale(0%);
}

.arrow-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #ccc;
    cursor: pointer;
    z-index: 10;
}

.arrow-nav.left { left: -40px; }
.arrow-nav.right { right: -40px; }


/* Media Queries */
@media (max-width: 991px) {
    .hero-phones-container {
        margin-top: 50px;
        height: 400px;
    }
    
    .phone-left, .phone-right {
        display: none; /* Hide side phones on mobile for cleaner look */
    }
    
    .phone-center {
        transform: none;
    }
    
    .flying-phones {
        display: none; /* Hide complex animation on mobile */
    }
    
    .arrow-nav {
        display: none;
    }
}