:root {
	--i-primary: #ff6b00; /* iEdge Orange */
	--i-blue: #0d6efd;
	--i-dark: #0f172a; 
	--i-darker: #020617; 
	--i-light: #f8fafc;
	--i-gray: #64748b;
	--font-heading: 'Poppins', sans-serif;
	--font-body: 'Inter', sans-serif;
}
/* Container for the entire right-side graphic */
.right-visuals-container {
    position: relative;
    width: 100%;
    max-width: 700px; /* Adjust based on your layout space */
    min-height: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Base class for continuous floating animation */
.floating-element {
    position: absolute;
    animation: floatAnim 4s ease-in-out infinite;
}

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

/* Staggered animation delays for a natural look */
.float-delay-1 { animation-delay: 0s; }
.float-delay-2 { animation-delay: 1.5s; }
.float-delay-3 { animation-delay: 0.7s; }


/* --- INDIVIDUAL ELEMENT POSITIONING --- */
/* Adjust the top, left, right, bottom, and width values to match your specific image sizes */

.girl-container {
    left: 0px;
    top: 10%;
    width: 60%;
    z-index: 1; /* Keep behind the phone and ID card */
}

.girl-img {
    width: 100%;
    height: auto;
    display: block;
}

.id-card-container {
    left: 20%;
    bottom: 5%;
    width: 35%;
    z-index: 3; /* Top most element */
}

.id-card-img {
    width: 100%;
    height: auto;
    display: block;
    /* Optional: Add a slight rotation to the physical card */
    transform: rotate(-10deg); 
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
}

.phone-container {
    right: 0;
    top: 5%;
    width: 40%;
    z-index: 2; /* In between the girl and the ID card */
}


/* --- PHONE AND ROTATING SCREEN LOGIC --- */

/* The static frame image */
.phone-frame-img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 5; /* Place above the screen if your frame image has a transparent cutout for the screen */
    pointer-events: none; /* Allows clicks to pass through the frame to the screen below */
}

/* The wrapper that holds the screens and performs the 3D flip */
.screen-view-area {
    /* ADAPT THESE VALUES to fit exactly inside your specific phone frame image */
    position: absolute;
    top: 2%; 
    left: 0;
	right: 0;
	margin: 0px auto;
    width: 90%;
    height: 98%;
    border-radius: 20px; /* Adjust to match the frame's inner screen corners */
    
    perspective: 1200px;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.4, 0.2, 0.2, 1);
    cursor: pointer;
    z-index: 4; /* Below the frame image */
}

/* Class triggered by JavaScript to flip the inner screen */
.screen-view-area.is-flipped {
    transform: rotateY(180deg);
}

/* Common styles for front and back faces */
.screen-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    background-color: #ffffff; /* Fallback screen color */
    border-radius: inherit;
}

.screen-face img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures your design fills the screen area */
}

/* Back face specific transform */
.screen-back {
    transform: rotateY(180deg);
}

.textcolor {
    color: #143058;
    font-size: 40px;
    font-weight: 700;
    background: linear-gradient(90deg, #1e3a8a, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
	.hero .hero-content{
		margin-bottom: 1rem;
	}
	.mobile-limitations-wrapper .swiper-pagination{
		position: inherit !important;
	}
    .right-visuals-container {
        min-height: 450px;
    }
    
    /* Make the phone the prominent feature on smaller screens */
    .girl-container { /*display: none;  Or adjust opacity/position as needed */ width: 50%; z-index: 9; }
    
    .phone-container {
        width: 50%;
        /*right: auto;  Center it */
    }
    
    .id-card-container {
        width: 45%;
        left: 5%;
        bottom: 10%;
    }
}
		
/* --- Desktop Limitations Section Styling --- */
.limitations-content-section {
    padding: 0px 0 40px 0;
    position: relative;
    background-color: transparent;
}

.limitations-desktop-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 30px; /* Reduced gap slightly for better spacing */
    position: relative;
}

/* Left side becomes sticky */
.limitations-left-col {
    width: 45%; /* Adjusted width to fix right-side empty space */
    position: sticky;
    top: 130px; /* Accounts for the fixed top header navigation */
    height: calc(100vh - 160px); /* Keeps it within the viewport */
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligns the image box to the left */
}

.limitations-img-box {
    background: transparent; /* Removed background to prevent white gaps */
    border-radius: 24px;
    padding: 0; /* Removed padding so image fills the entire container */
    width: 100%;
    height: 100%;
    max-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.limitations-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image properly fills its container without distortion */
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); /* Added shadow directly to the image */
    transition: opacity 0.4s ease-in-out;
}

/* Right side content scrolling */
.limitations-right-col {
    width: 55%; /* Expanded width for content tabs */
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
    /* Reduced bottom padding so the sticky section ends precisely after the last tab */
    padding-bottom: 10vh; 
}

/* Individual Tab Styling */
.limitation-tab {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 25px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.6; /* Unfocused state */
}

/* Active State */
.limitation-tab.active {
    opacity: 1;
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
    transform: translateX(-10px);
}

.limitation-tab:hover {
    opacity: 1;
}

.limitation-tab .tab-number {
    width: 45px;
    height: 45px;
    background: #8b929a; /* Default grey */
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.limitation-tab.active .tab-number {
    background: #f28500; /* Active orange from screenshot */
}

.limitation-tab .tab-content h4 {
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333333;
    transition: color 0.3s ease;
}

.limitation-tab .tab-content p {
    margin: 0;
    font-size: 14px;
    color: #676767;
    line-height: 26px;
}

/* --- Mobile Swiper Styling --- */
.mobile-limitations-wrapper {
    padding: 20px 0 50px 0;
}

.mob-limitation-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mob-limitation-img {
    width: 100%;
    height: 220px;
    object-fit: contain;
    margin-bottom: 25px;
}

.mob-header-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.mob-tab-number {
    background: #f28500;
    color: #ffffff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.mob-limitation-card h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #333333;
}

.mob-limitation-card p {
    font-size: 14px;
    color: #666666;
    margin: 0;
    line-height: 1.5;
}

.limitations-swiper-pagination {
    margin-top: 30px;
    text-align: center;
}

.limitations-swiper-pagination .swiper-pagination-bullet-active {
    background-color: #f28500;
}
.middle_section {
    background: url(https://iedge.digital/assets/img/curved_background.png) top center / 100% no-repeat;
    z-index: 1;
	border-radius: 0px 0px 50px 50px;
}	
.main {
    border-radius: 0px 0px 50px 50px;
}
		
/* ----- 4. FEATURES SECTION (10 Items Sticky Scroll) ----- */
.features-section { background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); position: relative; padding: 40px 0px !important;}
.features-layout { display: flex; gap: 60px; position: relative; align-items: flex-start; }

/* Left Column - Sticky */
.features-left {
	position: sticky; top: 120px; height: calc(100vh - 160px); min-height: 500px;
	flex: 1; display: flex; align-items: center; justify-content: center;
	align-self: flex-start; z-index: 10;
}

.mockup-container {
	width: 100%; height: 100%; max-height: 650px; background: #fff; border-radius: 40px;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.05);
	padding: 20px; position: relative; overflow: hidden;
}

.desktop-feature-img {
	position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px);
	object-fit: cover; border-radius: 24px; opacity: 0; transform: translateY(20px) scale(0.95);
	transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1;
}
.desktop-feature-img.active { opacity: 1; transform: translateY(0) scale(1); z-index: 2; }

/* Right Column - Scrolling List */
.features-right { flex: 1; padding: 40px 0 100px; }

.feature-card {
	background: #fff; border-radius: 24px; padding: 40px; margin-bottom: 30px;
	border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 10px 30px rgba(0,0,0,0.02);
	transition: all 0.4s ease; position: relative; overflow: hidden; cursor: default;
}
.feature-card::after {
	content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--i-primary);
	transform: scaleY(0); transition: transform 0.4s ease; transform-origin: top;
}
.feature-card.active { box-shadow: 0 20px 40px rgba(0,0,0,0.08); border-color: rgba(13, 110, 253, 0.1); transform: translateX(-10px); }
.feature-card.active::after { transform: scaleY(1); }

.feature-icon-wrapper {
	width: 55px; height: 55px; background: rgba(13, 110, 253, 0.05); color: var(--i-blue);
	border-radius: 16px; display: flex; align-items: center; justify-content: center;
	font-size: 1.6rem; margin-bottom: 20px; transition: all 0.3s ease;
}
.feature-card.active .feature-icon-wrapper { background: var(--i-primary); color: #fff; }
.feature-card h4 { font-size: 1.4rem; margin-bottom: 15px; }
.feature-card p { font-size: 14px; color: #676767; line-height: 24px; margin: 0; }

/* Mobile specific feature image */
.mobile-feature-img {
	width: 100%; height: 220px; object-fit: cover; border-radius: 16px; margin-bottom: 25px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.services .service-card:hover .icon span{
	filter: brightness(0) invert(1);
}

/* =========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================= */
@media (max-width: 1199px) {
	.bento-grid { grid-template-columns: repeat(3, 1fr); }
	.bento-span-2 { grid-column: span 2; }
	.bento-span-1 { grid-column: span 1; }
	/* Adjusting 8 items for 3 cols: 2, 1, 1, 2, 1, 1, 1, 1 */
}

@media (max-width: 991px) {
	.hero-premium { flex-direction: column; text-align: center; padding: 120px 0 60px; }
	.hero-content { margin-bottom: 50px; display: flex; flex-direction: column; align-items: center; }
	.hero-subtitle { max-width: 100%; }

	.bento-grid { grid-template-columns: repeat(2, 1fr); }
	.bento-span-2 { grid-column: span 2; }
	.bento-span-1 { grid-column: span 1; }

	.features-layout { flex-direction: column; gap: 0; }
	.features-right { padding: 20px 0; width: 100%; }
	.feature-card.active { transform: none; /* Disable horizontal shift on mobile */ }
}

@media (max-width: 767px) {
	.section-padding { padding: 70px 0; }
	.hero-title { font-size: 2.2rem; }
	.section-header-centered h2 { font-size: 2rem; }

	.bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.bento-span-2, .bento-span-1 { grid-column: span 1; min-height: 250px; }

	.benefit-content { padding: 25px; }
	.benefit-content h4 { font-size: 1.3rem; }

	.feature-card { padding: 25px; }
	.feature-card h4 { font-size: 1.25rem; }
}
		
.stash--paper-clock-light {
  display: inline-block;
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232563eb' fill-rule='evenodd' d='M11.5 4.536c-.154-.033-.336-.036-.825-.036H8.2c-.568 0-.964 0-1.273.026c-.302.024-.476.07-.608.138a1.5 1.5 0 0 0-.656.655c-.067.132-.113.306-.137.608C5.5 6.236 5.5 6.632 5.5 7.2v9.6c0 .568 0 .965.026 1.273c.024.302.07.476.137.608a1.5 1.5 0 0 0 .656.656c.132.067.306.113.608.137c1.016.084 2.054.026 3.073.026a.5.5 0 0 1 0 1c-1.046 0-2.11.056-3.154-.029c-.365-.03-.685-.093-.981-.244a2.5 2.5 0 0 1-1.093-1.092c-.15-.296-.213-.616-.243-.98C4.5 17.8 4.5 17.362 4.5 16.82V7.18c0-.542 0-.98.029-1.333c.03-.365.093-.685.243-.981a2.5 2.5 0 0 1 1.093-1.093c.296-.15.616-.213.98-.243c.355-.03.793-.03 1.335-.03h2.553c.434 0 .735 0 1.023.07a2.5 2.5 0 0 1 .723.298c.253.156.466.368.773.675l3.165 3.166c.33.33.554.55.716.813c.137.224.238.468.299.723c.072.3.069.615.069 1.08V12a.5.5 0 0 1-1 0v-1.674c0-.49-.003-.672-.037-.826h-2.882c-.264 0-.491 0-.678-.015a1.49 1.49 0 0 1-1.388-1.387c-.015-.188-.015-.415-.015-.679zm1 .671V7.4c0 .288 0 .474.012.616c.046.566.678.484 1.088.484h2.193Q14.149 6.85 12.5 5.207m3 9.293a3 3 0 0 0-2.143.9a3 3 0 0 0-.857 2.1c0 .818.326 1.558.857 2.1a3 3 0 0 0 2.143.9a3 3 0 0 0 2.143-.9c.53-.542.857-1.282.857-2.1s-.326-1.558-.857-2.1a3 3 0 0 0-2.143-.9m-2.857.2a4 4 0 0 1 2.857-1.2c1.12 0 2.132.46 2.857 1.2a4 4 0 0 1 1.143 2.8a4 4 0 0 1-1.143 2.8a4 4 0 0 1-2.857 1.2a4 4 0 0 1-2.857-1.2a4 4 0 0 1-1.143-2.8a4 4 0 0 1 1.143-2.8m2.607.8a.5.5 0 0 1 .5.5v1.5h1a.5.5 0 0 1 0 1h-1.5a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.energy-icons--clock-48-bold {
  display: inline-block;
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%232563eb' d='M40.75 24c0-9.25-7.5-16.75-16.75-16.75S7.25 14.75 7.25 24S14.75 40.75 24 40.75S40.75 33.25 40.75 24m2.5 0c0 10.631-8.619 19.25-19.25 19.25S4.75 34.631 4.75 24S13.369 4.75 24 4.75S43.25 13.369 43.25 24'/%3E%3Cpath fill='%232563eb' d='M22.75 13a1.25 1.25 0 1 1 2.5 0v10.274l6.37 3.641a1.25 1.25 0 1 1-1.24 2.17l-7-4A1.25 1.25 0 0 1 22.75 24z'/%3E%3C/svg%3E");
}
.energy-icons--shield-lock-48 {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%232563eb' d='m38 11.677l-14-5.6l-14 5.6V23c0 8.313 5.904 14.947 14 18.888C32.096 37.948 38 31.313 38 23zM40 23c0 9.542-6.89 16.818-15.574 20.906a1 1 0 0 1-.852 0C14.89 39.818 8 32.542 8 23V11a1 1 0 0 1 .629-.928l15-6l.09-.032a1 1 0 0 1 .652.032l15 6A1 1 0 0 1 40 11z'/%3E%3Cpath fill='%232563eb' d='M30 24a1 1 0 0 0-1-1H19a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1zm2 6a3 3 0 0 1-3 3H19a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3z'/%3E%3Cpath fill='%232563eb' d='M27 19c0-1.648-1.352-3-3-3s-3 1.352-3 3v3h-2v-3c0-2.752 2.248-5 5-5s5 2.248 5 5v3h-2z'/%3E%3C/svg%3E");
}
.energy-icons--recycle-48-bold {
  display: inline-block;
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%232563eb' d='M25.2 9.997a1.25 1.25 0 0 1 1.448-1.015A15.25 15.25 0 0 1 38.33 29.216l-2.35-.855a12.75 12.75 0 0 0-.767-10.428l-.173-.307a12.75 12.75 0 0 0-8.827-6.181A1.25 1.25 0 0 1 25.2 9.997'/%3E%3Cpath fill='%232563eb' d='M35.19 23.386a1.25 1.25 0 0 1 1.602.747l1.029 2.828l2.606-1.505a1.25 1.25 0 0 1 1.25 2.165l-3.896 2.25a1.25 1.25 0 0 1-1.8-.655l-1.539-4.228a1.25 1.25 0 0 1 .747-1.602m-1.422 8.81a1.25 1.25 0 0 1 1.915 1.607a15.252 15.252 0 0 1-23.365 0l1.916-1.607a12.75 12.75 0 0 0 19.534 0'/%3E%3Cpath fill='%232563eb' d='M12.025 37.5V33a1.25 1.25 0 0 1 1.467-1.232l4.432.781a1.25 1.25 0 0 1-.434 2.462l-2.965-.522v3.01a1.25 1.25 0 1 1-2.5 0m9.761-26.054a12.75 12.75 0 0 0-8.647 5.878l-.18.302a12.75 12.75 0 0 0-.94 10.736a1.25 1.25 0 0 1-2.35.855A15.25 15.25 0 0 1 21.353 8.982z'/%3E%3Cpath fill='%232563eb' d='M16.589 7.338a1.25 1.25 0 0 1 1.708-.458l3.897 2.25a1.25 1.25 0 0 1 .332 1.887l-2.892 3.447a1.25 1.25 0 0 1-1.915-1.607l1.934-2.307l-2.606-1.504a1.25 1.25 0 0 1-.458-1.708'/%3E%3C/svg%3E");
}
.carbon--qr-code {
  display: inline-block;
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%232563eb' d='M24 28v-2h2v2zm-6-4v-2h2v2zm0 6h4v-2h-2v-2h-2zm8-4v-4h2v4zm2 0h2v4h-4v-2h2zm-2-6v-2h4v4h-2v-2zm-2 0h-2v4h-2v2h4zm-6 0v-2h4v2zM6 22h4v4H6z'/%3E%3Cpath fill='%232563eb' d='M14 30H2V18h12ZM4 28h8v-8H4ZM22 6h4v4h-4z'/%3E%3Cpath fill='%232563eb' d='M30 14H18V2h12Zm-10-2h8V4h-8ZM6 6h4v4H6z'/%3E%3Cpath fill='%232563eb' d='M14 14H2V2h12ZM4 12h8V4H4Z'/%3E%3C/svg%3E");
}
.carbon--chart-performance {
  display: inline-block;
  width: 32px;
  height: 32px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M28 28V15h-2v13h-4V17h-2v11h-4v-9h-2v9h-4v-7H8v7H4V2H2v26c0 1.1.9 2 2 2h26v-2zm0-24v7h-2V7.42l-8.29 8.29c-.2.19-.45.29-.71.29s-.51-.1-.71-.29L12 11.41l-4.29 4.3l-1.42-1.42l5-5c.39-.39 1.03-.39 1.42 0l4.29 4.3L24.58 6H21V4z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
		
section.services {
    padding: 40px 0 !important;
}		
	
.faq{
	padding: 40px 0px !important;
}
.limitations-left-col {
	background: #fff; border-radius: 40px;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.05);
	padding: 20px;
}

@media (max-width: 768px) {
	.mobile-limitations-wrapper {
		padding: 20px 0 0px 0;
	}
}