@charset "UTF-8";

@font-face {
    font-family: 'Test Tiempos Fine';
    src: url('/fonts/TestTiemposFine-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}


/* 
body {
    font-family: 'Test Tiempos Fine', serif;
}
 */

body, html 
			{
			    padding:0 !important;
			    margin:0 !important;
			}
			
		html {
		    overflow-y: scroll; 
		}
            
            body.modal-open
            {
                overflow: hidden !important;
                padding-right: 0 !important; 
            }
			
			/* Overlay (background dark layer) */
			/* .z-modal-mask {
			    z-index: 100000 !important;
			    background: rgba(0,0,0,0.5);
			    backdrop-filter: blur(3px);
			} */
			
			
			body.modal-open-no-shift {
			    overflow-y: scroll !important;
			}
			
			/* disable scrolling but keep scrollbar width */
			body.modal-open-no-shift::-webkit-scrollbar-thumb {
			    background: transparent;
			}
			
			body.modal-open-no-shift::-webkit-scrollbar-track {
			    background: transparent;
			}
			
			body.modal-open-no-shift {
			    pointer-events: none;
			}
			
			.z-window-modal,
			.z-window-highlighted {
			    pointer-events: auto;
			}
			
			body.modal-open-no-scroll {
			    overflow-y: scroll !important; /* keep scrollbar width */
			    position: fixed;
			    width: 100%;
			}
			
			/* Modal window */
			.z-window-modal {
			    z-index: 100001 !important;
			    border-radius: 10px;
			    overflow: hidden;
			}
						
			.z-page, .z-window, .z-window-content,
			.z-borderlayout, .z-center-body 
			{
			    padding:0 !important; 
			    margin:0 !important;
			    border:0 !important;
			    background: #fff;
			}
			
			
			body.modal-open-no-scroll #navbar,
			body.modal-open-no-scroll .navbar {
			    opacity: 0.35;
			    transition: opacity 0.2s ease;
			}

/*             .coopr-nav 
            {
            	position:fixed;
            	top:0;
            	width:100%;
                background-color: #ffffff;
                padding: 20px 5%;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid rgba(0,0,0,0.05);
                z-index: 9999 !important;
                min-height: 90px;
            }
 */
			 /* .denmark-lbl
			 {
				margin-left: 12px;
			    position: absolute;
			    bottom: 20px;
			    color: #82817E;
			    font-family: Inter;
			    font-size: 12px;
			    font-style: normal;
			    font-weight: 400;
			 } */
			 
			 .denmark-lbl {
			    margin-left: 0 !important; /* Reset margin */
			    position: static !important; /* Kill absolute positioning */
			    color: #82817E;
			    font-family: Inter, sans-serif;
			    font-size: 11px; /* Slightly smaller for better fit on mobile */
			    font-weight: 400;
			    white-space: nowrap;
			 }
 
			 .coopr-nav {
			    position: fixed;
	                top: 0;
			    left: 0;
	                width: 100%;
	                background-color: #ffffff;
	                box-sizing: border-box;
	                display: flex;
	                align-items: center;
	                justify-content: space-between;
	                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	                z-index: 9999 !important;
				    height: 90px; /* Force consistent height */
			    padding-left: max(5%, calc((100% - 1500px) / 2));
			    padding-right: max(5%, calc((100% - 1500px) / 2));
			            }            
			.coopr-logo 
			           {
				    width: 52px;
				    height: 52px;
				    border-radius: 0px;
				   }
				
					.coopr-logo-1 {
					    color: #000;
					    font-family: "Tiempos Headline", serif;
						font-size: 27px;
						font-weight: 300;
					    margin-left: 0 !important;
					    line-height: 1;
					    display: block;
					}



 /* --- Integrated Mobile Navbar CSS --- */
        
        .navbar-backdrop {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9998;
            opacity: 0;
            transition: opacity 0.3s ease;
            backdrop-filter: blur(2px);
        }

        .navbar-backdrop.active {
            display: block;
            opacity: 1;
        }

        .nav-toggle {
            display: none;
            flex-direction: column;
            justify-content: space-around;
            width: 28px;
            height: 20px;
            background: transparent;
            border: none;
            cursor: pointer;
            z-index: 10001;
        }

        .nav-toggle-line {
            width: 100%;
            height: 2px;
            background-color: #1F1D1A;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        /* Responsive Logic */
        @media (max-width: 991px) {
            .nav-toggle {
                display: flex;
            }

            .nav-menu-wrapper {
                position: fixed;
                top: 0;
                left: 0;
               /*  width: 280px; */
              /*   width:80%; */
                height: 100vh;
                background: #FFFFFF;
                flex-direction: column !important;
                align-items: flex-start !important;
                padding: 80px 20px 40px 20px !important;
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 10000;
                display: flex !important;
                
            }

            .nav-menu-wrapper.active {
            	width:100%;
                transform: translateX(0);
                max-height: 99.9%;
                overflow: auto;
            }

            .nav-center, .nav-right {
                flex-direction: column !important;
                align-items: flex-start !important;
                width: 100%;
                gap: 20px !important;
            }

            .nav-item {
                margin: 0 !important;
                font-size: 18px !important;
                width: 100%;
                padding: 10px 0;
                border-bottom: 1px solid #f0f0f0;
            }
            
            .nav-toggle.active .nav-toggle-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
            .nav-toggle.active .nav-toggle-line:nth-child(2) { opacity: 0; }
            .nav-toggle.active .nav-toggle-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
        }
        
        /* Desktop Helper */
        @media (min-width: 992px) {
            .nav-menu-wrapper {
                /* display: flex;
                flex: 1;
                justify-content: space-between;
                align-items: center; */
                width: 100%;
		        display: contents;
		        align-items: center;
		        max-height: 99.9%;
                overflow: auto;
                height: 100%;
            }
        }




            .nav-center 
            {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
            }
            .nav-item-group 
            {
		    display: flex;
		    margin-top:-1px;
			}
			
					.nav-item 
					          {
			              /* font-family: Inter;
			              font-size: 17px;
			              font-weight: 400;
			              font-style: normal;
						line-height: normal;
			              margin: 0 15px;
			              cursor: pointer;
			              color: #1F1D1A;
			              white-space: nowrap; */
			              color: #1F1D1A;
					    font-family: Inter;
					    font-size: 17px;
					    font-style: normal;
					    font-weight: 400;
					    line-height: normal;
					    margin: 0 15px;
					    cursor: pointer;
					    white-space: nowrap;
			          }
			          
            
            .nav-item:hover, .nav-login:hover 
            { 
            	/* text-decoration-line: underline; */ 
            	 opacity: 60%;
            }

           .nav-right {
		    display: flex;
		    align-items: center;
		    gap: 20px;
		}
            
		.nav-login {
			    color: #1F1D1A;
			    font-size: 15.43px;
			    font-family: Inter;
			    font-weight: 500;
			    font-style: normal;
			    cursor: pointer;
			}
		           .logo-container {
				    display: flex !important;
				    align-items: center !important;
			    cursor: pointer;
				    gap: 12px; /* Spacing between logo image and text */
				}
				
				.logo-text-stack {
				    display: flex;
				    flex-direction: column;
				    justify-content: center;
				    line-height: 1.2;
				    gap:9px;
			}
            
            
            /* Upper */
            
            .hero-section {
                position: relative;
                width: 100%;
                min-height: 600px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 100px 5%;
                box-sizing: border-box;
                overflow: hidden;
            }
            
			.hero-background-graph {
				    position: absolute;
				    top: 0;
				    left: 0;
				    width: 100%;
				    height: 100%;
				
				    background-image:
				        linear-gradient(to right, #d9d9d9 1px, transparent 1px),
				        linear-gradient(to bottom, #d9d9d9 1px, transparent 1px);
				
				    background-size: 80px 80px;
				
				    z-index: 0;
				
				                    
 mask-image:
    linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 52%,
        rgba(0, 0, 0, 0.4) 84%,
        transparent 100%
    ),
    linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 52%,
        rgba(0, 0, 0, 0.4) 84%,
        transparent 100%
    ),
    linear-gradient(
        to right,
        rgba(0, 0, 0, 1) 100%,  
        rgba(0, 0, 0, 0.4) 65%,
        transparent 100%
    ),
    linear-gradient(to left, 
	rgba(0,0,0,1) 52%, 
	rgba(0,0,0,0.4) 84%, 
	transparent 100%
    );

-webkit-mask-composite: source-in;
mask-composite: intersect;
				                    
			     	}
			
			
			
			.hero-left {
			    width: 100%;
			    max-width: 1500px; 
			    display: flex;
			    flex-direction: column;
			    align-items: flex-start;
			    flex: 1;
			    margin-top: 60px; 
			    z-index: 2;
			}
			
			.hero-title {
			    width: 100%;       
			    height: auto;      
			    max-width: 900px;
			    color: #030303;
			    font-family: "Tiempos Headline";
			    font-size: clamp(40px, 8vw, 72px);
			    font-weight: 300;
			    line-height: 1.1;
			    text-transform: capitalize;
			    margin-bottom: 24px;
			}
			
			.hero-desc {
			    width: 100%;       
			    height: auto;      
			    max-width: 625px;
			    color: #030303;
			    font-family: Inter;
			    font-size: clamp(18px, 2vw, 22px); 
			    font-weight: 400;
			    line-height: 1.5;
			    margin-bottom: 40px;
			}
			
			.hero-content-wrapper {
			    position: relative;
			    display: flex;
			    justify-content: center; 
			    align-items: center;
			    width: 100%;
			    max-width: 1600px;
			    margin: 0 auto;
			    z-index: 1;
			}
			
			.hero-buttons {
				display: flex;
				gap: 20px;
				align-items: center;
			}

				/* RIGHT SIDE CONTAINER */
				.hero2-right {
			    display: flex;
			    flex-direction: column;
			    justify-content: flex-start;
			    align-items: flex-start;
			    gap: 40px; 
			    max-width: 508px;
			}
			
			/* TEXT */
			.hero2-right-text {
				 color: #1F1D1A;
				 font-size: 28.97px;
				 font-family: Inter;
				 font-weight: 400;
				 text-transform: capitalize;
				 word-wrap: break-word
			}
			
			.hero2-btn {
			    background: #1F1D1A;
			    color: #FFFCFC;
			    font-size: 18.2px;
			    font-family: Geist;
			    font-weight: 600;
			    border-radius: 13px;
			    padding: 10px 18px;
			    border: none;
			    cursor: pointer;
			
			    box-shadow:
			        -3.5px 2.3px 4.7px rgba(188,187,187,0.25) inset,
			         3.5px -4.7px 4.7px rgba(128,128,128,0.25) inset;
			}
			
			.hero2-section {
			    display: flex;
			    justify-content: space-between;
			    align-items: flex-start;
			    gap: 40px;
			}

            
            .video-section {
			    width: 100%;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    padding: 0px 0 50px 0px; 
			    box-sizing: border-box;
			    overflow: hidden;
			}
            
            
            .book-demo {
		    background: #1F1D1A;
		    color: white;
		    font-size: 15.43px;
		    font-family: Inter;
		    font-weight: 600;
		    border-radius: 8.17px;
		    padding: 9.078px 15.433px;
		}
		
		 .book-demo:hover , .book-demo:active , .book-demo:focus
         {
            color: white;
            font-size: 15.43px;
            font-family: Inter;
            font-weight: 600;
			border-radius: 8.17px;
		    padding: 9.078px 15.433px;
            background: #1F1D1A;
            
            }
			
	
			.learn-more
			{
			color: #000;
			font-family: Inter;
			font-size: 15.433px;
			font-style: normal;
			font-weight: 600;
			line-height: normal;
			cursor: pointer;
			text-decoration: none;
			padding: 9.078px 15.433px 9.078px 0;
			
			}

			.workspace-wrapper {
			    width: 100%;
			    min-height: 210px; 
			    background: #3A3A3A;
			    display: flex;
			    align-items: center;     
			    justify-content: center;   
				/* FIX: Use flexible padding */
				padding: 60px 5%;
			    box-sizing: border-box;
			}
			
			.workspace-message {
			    color: #FFFFFF;
			    text-align: center;
				font-family: 'Test Tiempos Fine', serif;
				/* FIX 1: Responsive Font Size */
				/* This stays 35px normally, but shrinks down to 24px on smaller/zoomed screens */
				font-size: clamp(24px, 4vw, 35px);
			    font-style: italic;
			    font-weight: 300;
			    line-height: 1.4;
				/* FIX 2: Relative Max-Width */
				/* This ensures it never exceeds 1500px, but also never exceeds 90% of the screen */
				width: 100%;
				max-width: min(1500px, 90vw);
			    display: block;
			    letter-spacing: -0.2px;
				margin: 0 auto; /* Ensures it stays centered if width narrows */
			}
			
			.workspace-wrapper1 {
				width: 100%;
				min-height: 210px;
				background: #3A3A3A;
				display: flex;
				align-items: center;
				justify-content: center;
				/* FIX: Use flexible padding */
				padding: 60px 5%;
				box-sizing: border-box;
			}
			
			.workspace-message1 {
			    color: #FFFFFF;
			    text-align: center;
				font-family: 'Test Tiempos Fine', serif;
				/* Smoothly scales from 22px on small/zoomed screens to 35px on big screens */
				font-size: clamp(22px, 3.5vw, 35px);
			    font-style: italic;
			    font-weight: 300;
			    line-height: 1.4;
				/* Safety Constraints */
				width: 100%; max-width : 1550px;
				/* Reduced from 1600 to give 'breathing room' at zoom */
			    display: block;
				margin: 0 auto;
				/* THE MAGIC FIX FOR ZOOM: */
				white-space: normal; /* Prevents ZK labels from staying on one line */
				overflow-wrap : break-word;
				/* Forces long words to break if necessary */ word-wrap : break-word;
			    letter-spacing: -0.2px;
			}
			
			@media ( max-width : 768px) {
				.workspace-message {
                    font-size:22px;
                }
             }
             
             @media ( max-width : 768px) {
				.workspace-message1 {
                    font-size:22px;
                }
             }
             

/* dharmendra */
           /* --- Base Styles --- */
            .main-wrapper {
                position: relative;
                background-color: #FFFFFF;
                /* Removed fixed padding, using responsive padding */
                padding: 60px 5%; 
                overflow: hidden;
                font-family: 'Geist', sans-serif;
            }
            
            .content-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                max-width: 1500px; /* Limits width on ultra-wide screens */
                margin: 0 auto;
                position: relative;
                z-index: 10;
            }
            
            /* --- Hero Section --- */
            .hero2-section {
                display: flex;
                flex-direction: row; /* Default side-by-side */
                justify-content: space-between;
                align-items: flex-start;
                margin-bottom: 60px;
                gap: 40px;
                width: 100%;
            }
            
            .hero2-left {
                flex: 1.5;
            }
            
            .hero2-right {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 20px;
            }
            
            /* --- Typography (Responsive) --- */
            .main-title {
                color: #111111;
                font-family: Tiempos Headline;
                font-weight: 300;
                text-transform: capitalize;
                word-wrap: break-word;
                display: block;
                line-height: 1.1;
                
                /* Responsive Font Sizing */
                font-size: clamp(32px, 5vw, 73px); 
                max-width: 570px; /* Overriding the 753px for responsiveness */
                width: auto !important; 
            }
            
            .hero2-right-text {
                color: #1F1D1A;
                font-family: 'Inter', sans-serif;
                font-size: clamp(18px, 2vw, 24px);
                line-height: 1.4;
            }
            
            /* --- Cards Grid --- */
            .cards-grid-new {
                display: grid;
                /* Default: 3 columns */
                grid-template-columns: repeat(3, 1fr);
                gap: 15px;
                width: 100%;
                margin-top: 40px;
            }
            
            .feature-card {
                display: flex;
                flex-direction: column;
                width: 100%;
            }
            
            .video-frame {
                width: 100%;
                aspect-ratio: 1 / 1.1;
                overflow: hidden;
                background: #f0f0f0;
                margin-bottom: 20px;
            }
            
            .video-frame video {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            
            .feat-title {
                color: #000;
                font-family: "Tiempos Headline";
			    font-size: 38px;
                font-style: normal;
                font-weight: 300;
                line-height: normal;
                display:block;
            }
            .feat-title1 {
                color: #000;
                font-family: "Tiempos Headline";
			    font-size: 38px;
                font-style: normal;
                font-weight: 300;
			    margin-bottom: 17px;
                line-height: normal;
                display:block;
            }
            
            .feat-desc {
                /* color: #666;
                font-family: 'Inter', sans-serif;
                font-size: 18px;
                line-height: 1.6; */
                color: #666;
			    font-family: Inter;
			    font-size: 19.87px;
			    font-style: normal;
			    font-weight: 400;
			    line-height: 22px;
			    margin-top:10px;
            }
            
            
            /* 1. Large Tablets / Small Laptops (under 1024px) */
            @media (max-width: 1024px) {
                .cards-grid-new {
                    grid-template-columns: repeat(2, 1fr); /* 2 columns instead of 3 */
                }
                
                .hero2-left { flex: 1; }
            }
            
            /* 2. Tablets Portrait (under 768px) */
            @media (max-width: 768px) {
                .main-wrapper {
                    padding: 40px 20px;
                }
            
                .hero2-section {
                    flex-direction: column; /* Stack Hero content vertically */
                    gap: 20px;
                    margin-bottom: 40px;
                }
            
                .main-title {
                    font-size: 38px; /* Smaller title for mobile */
                    text-align: left;
                }
            
                .hero2-right {
                    align-items: flex-start;
                }
                .video-section {
        width: 100% !important;   /* reduce width for phone */
        display: flex;
			    justify-content: center;
			    align-items: center;
			    padding: 0px 10px 50px 10px; 
			    box-sizing: border-box;
			    overflow: hidden;
    }
            }
            
            /* 3. Small Mobile (under 480px) */
            @media (max-width: 480px) {
                .cards-grid-new {
                    grid-template-columns: 1fr; /* 1 column only */
                    gap: 40px;
                }
            
                .main-title {
                    font-size: 32px;
                }
            
                .feat-title {
                    font-size: 25px;
                }
            
                .feat-desc {
                    font-size: 14px;
                }
            }
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            			
			
	.footer-top-row {
	    display: flex;
	    justify-content: space-between;
	    align-items: flex-start;
	    margin-bottom: 90px;
	    position: relative;
	    z-index: 2;
	}
	
	.footer-year {
	    color: #FFF;
	    font-family: Inter, sans-serif;
	    font-size: 52.98px;
	    font-weight: 400;
	    line-height: 90.82px;
	}
	
	.footer-heading {
	    display: flex;
	    flex-direction: column;
	    align-items: flex-start; 
	    
	    color: #FFF;
	    font-family: Tiempos Headline;
	    font-size: 58px;
	    font-weight: 300;
	    letter-spacing: 4.64px;
	    text-transform: capitalize;
	    line-height: 1.1;
	}
	.line-2 {
	    white-space: nowrap;
	}
	
	.footer-brand {
	    max-width: 400px;
	    display: flex;
	    flex-direction: column;
	}
	
	.footer-brand-logo {
	    width: 55px;
	    height: 55px;
	    border-radius: 9px;
	    margin-bottom: 35px;
	}
	
	.footer-brand-title {
	    color: #FFF;
	    font-size: 41px;
	    font-family: Tiempos Headline;
	    font-weight: 300;
	    margin-bottom: 30px;
	}
	
	.footer-brand-desc {
	    color: rgba(255,255,255,0.8);
	    font-size: 16px;
	    font-family: Inter, sans-serif;
	    font-weight: 400;
	    line-height: 24px;
	    max-width: 360px;
	}
	
	.footer-links-col {
	    display: flex;
	    flex-direction: column;
	    gap: 18px;
	}
	
	.footer-link {
	    color: #FFF;
	    font-size: 16px;
	    font-family: Inter, sans-serif;
	    font-weight: 500;
	    line-height: 14px;
	    cursor: pointer;
	}
	
	.footer-link:hover {
	    text-decoration: underline;
	}
	
	.footer-contact {
	    min-width: 220px;
	    display: flex;
	    flex-direction: column;
	    gap: 18px;
	}
	
	.footer-contact-title {
	    color: #FFF;
	    font-size: 16px;
	    font-family: Inter, sans-serif;
	    font-weight: 600;
	    line-height: 14px;
	}
	
	.footer-contact-text {
	    color: rgba(255,255,255,0.8);
	    font-size: 16px;
	    font-family: Inter, sans-serif;
	    font-weight: 400;
	    line-height: 24px;
	}
	
	.footer-contact-strong {
	    color: #FFF;
	    font-size: 16px;
	    font-family: Inter, sans-serif;
	    font-weight: 600;
	    line-height: 24px;
	}
	
	@media (max-width: 1024px) {
	    .footer-top-row,
	    .footer-main-row {
	        flex-direction: column;
	        gap: 50px;
	    }
	
	    .footer-heading {
	        text-align: left;
	        font-size: 44px;
	    }
	
	    .footer-links-wrapper {
	        flex-wrap: wrap;
	        gap: 60px;
	    }
	
	    .footer-bg-text {
	        font-size: 220px;
	    }
	}
	
	@media (max-width: 600px) {
	    /* .footer-vision-section {
	        padding: 50px 20px 80px;
	    } */
	
	    .footer-year {
	        font-size: 34px;
	        line-height: 1.2;
	    }
	
	    .footer-heading {
	        font-size: 32px;
	        letter-spacing: 1px;
	    }
	
	    .footer-bg-text {
	        font-size: 120px;
	        letter-spacing: 8px;
	    }
	
	    .footer-links-wrapper {
	        flex-direction: column;
	        gap: 30px;
	    }
	}
	
	.footer-inner-container {
	    max-width: 1500px; 
	    margin: 0 auto;   
	    width: 100%;
	    position: relative;
	}
	
	
	.footer-links-wrapper {
	    display: flex;
	    gap: 60px; 
	    flex-wrap: wrap; 
	}
	
/* 	.vision-section {
		    width: 100%;
		    background-color: #FDFBF4; 
		    padding: 80px 0;
		    box-sizing: border-box;
				}
			
			.vision-container {
			    max-width: 1550px;
			    margin: 0 auto;
			    padding: 0 40px;
			}
			
			.vision-header-title {
			    display: block;
			    font-family: "Test Tiempos Fine", serif;
			    font-size: 100px;
			    font-weight: 300;
			    color: #111;
			    margin-bottom: 60px;
			}
			
			.vision-content-grid {
			    display: flex;
			    justify-content: space-between;
			     gap: 300px; 
			    flex-wrap: wrap; 
			}
			
			.vision-profile-col {
			    width: 380px;
			    flex-shrink: 0;
			    display: flex;
			    flex-direction: column;
			    gap: 20px;
			}
			
			.vision-photo-main {
			    width: 163px;
			    height: 179px;
			    object-fit: cover;
			}
			
			.vision-profile-details {
			    display: flex;
			    flex-direction: column;
			    gap: 10px;
			}
			
			.vision-name-text {
			    font-family: Inter;
			    font-size: 24px;
			    font-weight: 600;
			    color: #000;
			}
			
			.vision-role-text {
			    font-family: Inter;
			    font-size: 14px;
			    font-weight: 400;
			    color: #777;
			}
			
			.vision-text-col {
			    flex: 1;
			    display: flex;
			    flex-direction: column;
			    gap: 100px; 
			    min-width: 300px; 
			}
			
			.text-row {
			    display: flex;
			    flex-direction: row; 
			    gap: 44px; 
			    flex-wrap: wrap; 
			}
			
			.vision-description {
			    font-family: Inter;
			    font-size: 18px;
			    font-style: normal;
			    font-weight: 300;
			    width: 325px;
			    height: auto; 
			    color: #111;
			    text-align: justify;
			    line-height: 1.4;
			} */
			
			/* .vision-dark-box-overlay {
			    width: 695px; 
			    max-width: 702px; 
			    height: 410px;
			    margin-top: -51px;
			} */
			
			
			.vision-name-text {
			    font-family: Inter;
			    font-size: 24px;
			    font-weight: 600;
			    color: #111;
			}
			
			.vision-role-text {
			    font-family: Inter;
			    font-size: 14px;
			    font-weight: 400;
			    color: #777;
			}
			    
			.vision-profile-details {
    display: flex;
    flex-direction: column; /* This forces children to stack vertically */
    gap: 8px;              /* Adjust this number to change spacing between the lines */
    align-items: flex-start; /* Ensures everything is aligned to the left */
    margin-top: 15px;      /* Space between the photo and the name */
}

/* Ensure the labels behave like block elements */
.vision-name-text, 
.vision-role-text {
    display: block;
    width: 100%;
}

/* Ensure the LinkedIn icon stays on its own line and doesn't float */
.footer-social-icon1 {
    display: block;
    width: 22px;    
    height: 22px;
    cursor: pointer;
    margin-top: 5px; /* Extra space above the icon if needed */
}
			
			@media (max-width: 1200px) {
			    .vision-container {
			        padding: 0 30px;
			    }
			    .vision-header-title {
			        font-size: 80px;
			        margin-bottom: 40px;
			    }
			    .vision-content-grid {
			        gap: 30px;
			    }
			    .vision-profile-col {
			        width: 300px;
			    }
			    .vision-text-col {
			        gap: 80px;
			    } 
			    /* .vision-dark-box-overlay {
			        max-width: 550px;
			        height: 300px;
			        margin-top: -40px;
			    } */
			    }
			
			/* @media (max-width: 900px) {
			    .vision-content-grid {
			        flex-direction: column; 
			        align-items: center; 
			        gap: 50px; 
			    }
			    .vision-header-title {
			        font-size: 60px;
			        margin-bottom: 30px;
			    }
			    .vision-profile-col {
			        width: 100%; 
			        max-width: 380px; 
			        align-items: center; 
			    }
			    .vision-photo-main {
			        height: 250px;
			    }
			    .vision-text-col {
			        width: 100%; 
			        max-width: 700px; 
			        gap: 50px;
			        align-items: center;
			    }
			    .text-row {
			        flex-direction: column; 
			        gap: 25px !important; 
			        align-items: center;
			    }
			    .vision-description {
			        width: 90%; 
			        max-width: 350px; 
			        height: auto;
			    }
			    .vision-dark-box-overlay {
			        width: 90%; 
			        max-width: 600px;
			        height: 300px;
			        margin-top: 20px; 
			    }
			    } */
			    
			@media (max-width: 768px) {
			    .vision-text-col {
			        width: 100% !important;
			        max-width: 100% !important;
			        padding: 0 !important;
			    }
			
			    .text-row {
			        display: flex !important;
			        flex-direction: column !important;
			        width: 100% !important;
			        gap: 20px !important;
			    }
			
			    .vision-description {
			        width: 100% !important;
			        max-width: 100% !important; 
			        text-align: left !important; 
			        font-size: 14px !important;
			        line-height: 1.6 !important;
			        display: block !important;
			    }
			    
			    .vision-profile-col {
			        align-items: flex-start !important; 
			        margin-bottom: 20px;
			    }
			    
			    .vision-container {
			        padding: 0 0px !important; 
			        width: calc(100% - 40px) !important;
			    }
			}
			
			
			@media (min-width: 769px) and (max-width: 900px) {
			    .vision-text-col {
			        width: 100% !important;
			        max-width: 100% !important;
			        padding: 0 !important;
			    }
			
			    .text-row {
			        display: flex !important;
			        flex-direction: column !important;
			        width: 100% !important;
			        gap: 20px !important;
			    }
			
			    .vision-description {
			        width: 100% !important;
			        max-width: 100% !important; 
			        text-align: left !important; 
			        font-size: 14px ;
			        line-height: 1.6 !important;
			        display: block !important;
			    }
			    
			    .vision-profile-col {
			        align-items: flex-start !important; 
			        margin-bottom: 20px;
			    }
			    
			    .vision-container {
			        padding: 0 0px !important; 
			        width: calc(100% - 40px) !important;
			    }
			}
			
			/* @media (max-width: 600px) {
			    .vision-section {
			        padding: 40px 0;
			    }
			    .vision-container {
			        padding: 0 20px;
			    }
			    .vision-header-title {
			        font-size: 40px;
			        margin-bottom: 20px;
			    }
			    .vision-profile-col {
			        gap: 15px;
			    }
			    .vision-photo-main {
			        height: 200px;
			    }
			    .vision-name-text {
			        font-size: 30px;
			    }
			    .vision-role-text {
			        font-size: 20px;
			    }
			    .vision-text-col {
			        gap: 40px;
			    }
			    .vision-description {
			        font-size: 16px;
			        width: 100%;
			        max-width: 300px; 
			    }
			    .vision-dark-box-overlay {
			        height: 200px;
			        margin-top: 15px;
			    }
			    } */
	
	.main-container {
            width: 100%;
            display: flex;
            flex-direction: column;
        }


        .row-wrapper1 .text-side,
        .row-wrapper3 .text-side {
            padding-left: calc((100% - 1580px) / 2 + 40px);
            padding-right: 40px;
        }


        /* Common styles for text and descriptions */
        .title-text, .desc-text, .title-text-1, .desc-text-2 {
            display: block;
            margin-top: 30px;
        }

        .icon-holder {
            width: 48px;
            height: 48px;
            background: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 32px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }

        .title-text {
            color: #FFF;
            font-size: 60px;
            font-family: Tiempos Headline;
            font-weight: 300;
            line-height: 45.42px;
            letter-spacing: -1.107px;
        }

        .title-text-1 {
            color: #000;
           	font-size: 60px;
            font-family: Tiempos Headline;
            font-weight: 300;
            line-height: 45.42px;
            letter-spacing: -1.107px;
        }

        .desc-text {
            color: #ffffff;
            font-family: 'Inter', sans-serif;
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: 29.806px;
        }

        .desc-text-2 {
            color: #4C4A4A;
            font-size: 20px;
            font-family: 'Inter', sans-serif;
            font-style: normal;
            font-weight: 400;
            line-height: 29.81px;
            margin-top: 30px;
        }

        /* Responsive adjustments */
        @media screen and (max-width: 1200px) {
            .row-wrapper1, .row-wrapper2, .row-wrapper3 {
                flex-direction: column !important;
                height: auto;
                min-height: auto;
            }

            .row-wrapper2 {
                flex-direction: column-reverse !important;
            }

            .text-side, .image-side {
                width: 100% !important;
                flex: 0 0 100%;
                padding: 80px 40px !important; /* Adjust padding for mobile */
                align-items: center !important;
                text-align: center !important;
            }

            .workflow-content {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .mockup-preview, .mockup-preview-2 {
                width: 80%; /* Make image take 80% width */
                max-width: 450px; /* Cap max width to prevent overly large images on tablets */
                height: auto;
                object-fit: contain; /* Ensure the entire image is visible */
                margin: 0; /* Remove specific margins to center */
            }
        }

        @media screen and (min-width: 1201px) and (max-width: 1600px) {
            .row-wrapper1 .text-side, .row-wrapper3 .text-side, .row-wrapper2 .image-side {
                padding-left: 40px;
            }
            .row-wrapper1 .image-side, .row-wrapper3 .image-side, .row-wrapper2 .text-side {
                padding-right: 40px;
            }
        }
	
	
	.footer-social-row {
	    display: flex;
	    gap: 16px;     
	    margin-top: 25px; 
	    align-items: center;
	}
	
	.footer-social-icon {
	    width: 22px;    
	    height: 22px;
	    cursor: pointer;
	    transition: transform 0.2s ease, opacity 0.2s ease;
	    filter: brightness(0) invert(1); 
	}
	
	.footer-social-icon1 {
	    width: 22px;    
	    height: 22px;
	    cursor: pointer;
	}
	
	
	.footer-bg-text {
	    position: absolute;
	    left: 50%;
	    bottom: 0; 
	    transform: translate(-50%, 55%); 
	    opacity: 0.05;
	    color: #FFF;
	    font-size: clamp(150px, 25vw, 500px); 
	    font-family: "Test Tiempos Fine", serif;
	    font-weight: 700;
	    line-height: 0.7; 
	    pointer-events: none;
	    white-space: nowrap;
	    z-index: 1;
	}

	.footer-vision-section {
		position: relative;
		width: 100%;
		background: #000;
		overflow: hidden;
		/* padding: 80px 20px 150px 20px; */
		padding:60px 8%;
		box-sizing: border-box;
	}
	
	.footer-main-row {
		position: relative;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 40px;
	}
	
	
	.email-img{
		width: 18px;
		height: 12px
	}
	
	@media (max-width: 600px) {
    .footer-bg-text {
        transform: translate(-50%, 50%);
        font-size: clamp(80px, 20vw, 150px); 
        
    }
}

/* Also, ensure the bottom padding of the footer is sufficient for the text */
@media (max-width: 600px) {
    .footer-vision-section {
       padding:60px 8%;
    }
}
	
	/* --- Optimized Vision Section --- */
/* --- Optimized Vision Section (Zoom-Friendly) --- */
.vision-section {
    width: 100%;
    background-color: #FDFBF4; 
    padding: 80px 10px;
    display: flex;
    justify-content: center;
}

.vision-container {
    width: 90%;
    max-width: 1500px; 
    margin: 0 auto;
}

.vision-header-title {
    display: block;
    font-family: Tiempos Headline;
    font-size: clamp(40px, 8vw, 100px); /* Scales down smoothly */
    font-weight: 300;
    color: #111;
    margin-bottom: 60px;
}

.vision-content-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* FIX: Changed 400px to a smaller flexible gap */
    gap: 25%; 
    justify-content: space-between;
    width: 100%;
}

/* Left Profile Column */
.vision-profile-col {
    flex: 0 0 220px; /* Base width */
    max-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vision-photo-main {
    width: 100%;
    aspect-ratio: 163 / 179;
    object-fit: cover;
}

/* Right Content Column */
.vision-text-col {
    flex: 1; 
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0; /* Prevents flex items from overflowing */
}

/* FIX: Text columns stack automatically when zooming in */
.text-row {
    display: grid;
    /* This allows columns to stack if they are narrower than 300px */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; 
    width: 100%;
}

.vision-description {
    font-family: Inter;
    font-size: 17px;
    font-weight: 400;
    color: #111;
    line-height: 1.6;
}

.vision-dark-box-overlay {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

/* --- Responsive fixes for deep zoom/mobile --- */
@media (max-width: 900px) {
    .vision-content-grid {
        flex-direction: column; /* Stacks profile on top of text */
        gap: 5px;
    }
    
    .vision-profile-col {
        max-width: 100%;
        flex: none;
        width: 215px; /* Slightly smaller profile on mobile */
    }

    .vision-header-title {
        margin-bottom: 30px;
    }
}

/*   ============================= */


.text-side {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 40px; /* Flexible padding */
}

/* Unified Image Side - The container for the image */
.image-side {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Reduced padding from 80px to 20px to allow images to grow larger */
    padding: 40px; 
    box-sizing: border-box;
    overflow: hidden;
}


/* Remove the old specific paddings that used calc() */
.row-wrapper1 .text-side,
.row-wrapper3 .text-side,
/* .row-wrapper2 .text-side {
    padding: 60px 8%; Unified padding for text
} */

/* Background Color Helpers (Keep these as they were) */
.bg-dark { background-color: #000000; color: #ffffff; }
.bg-light { background-color: #ffffff; color: #000000; }

.img-bg-blue { background-color: #CED8D8; }
.img-bg-grey { background-color: #CAC9C4; }
.img-bg-rose { background-color: #D8CECD; }




/* Pull Row 1 & 3 Text toward the center */
.row-wrapper1 .text-side, 
.row-wrapper3 .text-side {
    align-items: flex-end; /* Aligns content to the right (middle of screen) */
    text-align: left;
}

/* Pull Row 2 Text toward the center */
.row-wrapper2 .text-side {
    align-items: flex-start; /* Aligns content to the left (middle of screen) */
    text-align: left;
}


/* .image-side {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 40px;
}
 */

/* 5. Mobile/Zoomed-In Fix (The Stacking Logic) */
@media screen and (max-width: 1200px) {
    .row-wrapper1, .row-wrapper2, .row-wrapper3 {
        flex-direction: column !important;
        min-height: auto; /* REMOVES the giant empty gaps from your screenshot */
    }

    .row-wrapper2 {
        flex-direction: column-reverse !important; /* Keeps image below text on mobile */
    }

    .text-side, .image-side {
        flex: 0 0 auto;
        width: 100% !important;
        padding: 50px 20px !important; /* Balanced padding for vertical stack */
        min-height: auto;
    }
    
    .workflow-content {
        max-width: 100%; /* Allows text to use full width on small screens */
        text-align: center;
    }

    .mockup-preview, .mockup-preview-2 {
        max-width: 90%; /* Scale image nicely on mobile */
    }
}
/* ============================= */

/* 1. Base Row Setup */
.row-wrapper1, .row-wrapper2, .row-wrapper3 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 650px;
    overflow: hidden;
    background-color: inherit; /* Ensures backgrounds stay consistent */
}

/* 2. Side Containers (Desktop) */
.text-side, .image-side {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    /* This padding creates a safe "gutter" in the middle */
}

/* 3. Content Constraints */
/* .workflow-content {
    width: 100%;
    max-width: 700px; Limits text width so it doesn't get too long
} */

/* .mockup-preview, .mockup-preview-2 {
    width: 100%;
    max-width: 730px; Limits image width
    height: auto;
    object-fit: contain;
} */
.mockup-preview-2 {
    width: 100%;
    max-width: 730px; /* Limits image width */
    height: auto;
    object-fit: contain;
}

.mockup-preview{
    width: 100%;
    max-width: 710px; /* Limits image width */
    height: auto;
    object-fit: contain;
}

/* 4. THE FIX: Desktop Alignment (Hugging the Center Seam) */
/* 4. THE FIX: Desktop Alignment (Meeting in the center) */
@media screen and (min-width: 1201px) {
    
    /* --- THE LEFT SIDE OF THE SCREEN --- */
    /* (Workflow Text, Vault Text, and Projects Image) */
    /* We push all of these to the RIGHT edge of their container */
    .row-wrapper1 .text-side, 
    .row-wrapper3 .text-side,
    .row-wrapper2 .image-side {
        align-items: flex-end; 
    }

    /* --- THE RIGHT SIDE OF THE SCREEN --- */
    /* (Workflow Image, Vault Image, and Projects Text) */
    /* We push all of these to the LEFT edge of their container */
    .row-wrapper1 .image-side, 
    .row-wrapper3 .image-side,
    .row-wrapper2 .text-side {
        align-items: flex-start;
    }

    /* Keep the text itself left-aligned for readability */
    .workflow-content {
        text-align: left;
        display: flex;
        flex-direction: column;
    }

    /* Ensure icons in the workflow/vault sections also align left within the container */
    .row-wrapper1 .icon-holder,
    .row-wrapper3 .icon-holder {
        align-self: flex-start; 
    }
}

/* 5. Content Constraints (Prevents content from floating too far) */
.workflow-content {
    width: 100%;
    max-width: 750px; /* Adjust this to make text wider/narrower */
  /*   padding:40px; */
}

/* .mockup-preview, .mockup-preview-2 {
    width: 100%;
    max-width: 750px; Adjust this to make images larger/smaller
    height: auto;
    object-fit: contain;
} */

/* 5. Mobile/Zoomed-In Fix (Stacking Logic) */
@media screen and (max-width: 1200px) {
    .row-wrapper1, .row-wrapper2, .row-wrapper3 {
        flex-direction: column !important;
        min-height: auto;
    }

    .row-wrapper2 {
        flex-direction: column-reverse !important;
    }

    .text-side, .image-side {
        width: 100% !important;
        align-items: center !important; /* Center everything when stacked */
        text-align: center !important;
        padding: 50px 20px !important;
    }
    
    .workflow-content {
        max-width: 90%;
        text-align: center;
    }
}

/* -  ----------------- contact----------------------- */

			.modal-scroll-container {
			    overflow-y: auto;
			    overflow-x: hidden;
			    scrollbar-width: thin; /* Firefox */
			    scrollbar-color: #cccccc transparent;
			}
			
			.modal-scroll-container::-webkit-scrollbar {
			    width: 4px; 
			}
			.modal-scroll-container::-webkit-scrollbar-track {
			    background: transparent;
			}
			.modal-scroll-container::-webkit-scrollbar-thumb {
			    background-color: #cccccc;
			    border-radius: 10px;
			}
			
			/* --- Page  Window Wrapper --- */
			.page-wrapper {
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    background: transparent;
			    box-shadow: none !important;
			}
			
			/* --- The Card Container --- */
			.card {
			    width: 100%;
			    max-width: 625px; 
			    background: white;
			    overflow: hidden;
			    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
			}
			
			/* --- Header Section --- */
			.header {
			    background: #F7F7F7;
			    padding: 20px 25px;
			}
			
			.header-row {
			    display: flex;
			    align-items: center;
			    gap: 15px;
			}
			
			.avatar1 {
			    width: 45px;
			    height: 45px;
			    flex-shrink: 0;
			}
			
			.header-text {
			    font-size: 16px;
			    line-height: 1.4;
			    color: black;
			    flex: 1;
			}
			
			/* --- Form Body --- */
			.form-container {
			    padding: 25px 35px; /* Desktop padding */
			    display: flex;
			    flex-direction: column;
			    gap: 18px;
			}
			
			.form-group {
			    display: flex;
			    flex-direction: column;
			    gap: 6px;
			}
			
			.label {
			    font-size: 14px;
			    font-weight: 500;
			    color: #0B0B0B;
			}
			
			.label.required::after {
			    content: " *";
			    color: red;
			    font-size: 12px;
			}
			
			/* --- Input Fields --- */
			.input {
			    background: #EFF0F2;
			    border: 1px solid transparent;
			    border-radius: 4px;
			    height: 42px;
			    padding: 8px 12px;
			    font-size: 15px;
			    width: 100%;
			    transition: all 0.2s;
			}
			
			.name-grid
			{
			   display: flex;
			   justify-content: space-between;
			   gap: 10px;
		    }
			
			/* --- Name Row Flexbox --- */
			.name-row {
			    display: flex;
			    gap: 15px;
			    width: 100%;
			}
			
			.name-row > div {
			    flex: 1;
			}
			
			/* --- Submit Button Fix --- */
			.submit-btn {
			    width: 100% !important;
			    height: 48px;
			    background: #12141D !important;
			    color: white !important;
			    font-size: 15px;
			    font-weight: bold;
			    border: none;
			    border-radius: 5px;
			    cursor: pointer;
			    padding: 0 !important; 
			}
			
			.z-textbox:focus
			{
			  box-shadow:none !important;
			}
			
			/* --- Close Button --- */
			.cross-btn {
			    cursor: pointer;
			    color: #888;
			    align-self: baseline;
			}
			
			/* ============================================================
			   FULLY RESPONSIVE BREAKPOINTS (Mobile  Tablet)
			   ============================================================ */
			
			/* TABLET VIEW */
			@media (max-width: 768px) {
			    .card {
			        max-width: 550px;
			        width: 100%; 
			    }
			    .form-container {
			        padding: 20px 25px;
			    }
			    
			    .input
			    {
			      height: 25px;
			    }
			    
			    .modal-scroll-container
			    {
			       max-height: 499px;
			    }
			}
			
			/* MOBILE VIEW */
			@media (max-width: 480px) {
			    .card {
			        width: 100%; 
			    }
			
			    .header {
			        padding: 15px;
			    }
			
				.input
			    {
			      height: 25px;
			    }
			    .header-text {
			        font-size: 13px;
			    }
			
			    .form-container {
			        padding: 15px 20px;
			    }
			
				.modal-scroll-container
			    {
			       max-height: 499px;
			    }
			    /* Stack First and Last Name on mobile */
			    .name-row {
			        flex-direction: column;
			        gap: 10px;
			    }
			}
			
			.z-combobox-popup
			{
			  z-index: 99999999 !important;
			}
			
			
			/* Hide ZK default combobox arrow */
			.custom-combo1 .z-combobox-button {
				padding: 8px 12px;
			    height: 42px;
			    background: transparent;
			    border: none;
			}
			    
			.custom-combo1 .z-combobox-icon {
			    display: none;
			}
			.custom-combo1 .z-combobox-input
			{
			background: #EFF0F2;
		    border: 1px solid transparent;
		    border-radius: 4px;
		    height: 42px;
		    padding: 8px 12px;
		    font-size: 15px;
		    width: 100%;
		    transition: all 0.2s;
			}
			
			/* Custom chevron */
			.custom-combo1 .z-combobox-button::after {
			    content: "";
			    display: inline-block;
			    width: 8px;
			    height: 8px;
			    border-right: 1px solid rgb(156, 163, 175);
			    border-bottom: 1px solid rgb(156, 163, 175);
			    transform: rotate(45deg);
			    transition: transform 0.15s ease-out;
			    margin-right: 15px;
			    position: absolute;
			    top: 50%;
			    right: 0;
			    transform-origin: center;
			    translate: 0 -60%;
			}
			    
			/* Optional: rotate chevron when combobox is open */
			.custom-combo1 .z-combobox-open .z-combobox-button::after {
			    transform: rotate(-135deg);
			    translate: 0 -20%;
			}
			.custom-combo .z-comboitem{
			    font-size:15px;
			    padding:8px 12px;
			}
			
			/* Hover state */
			.custom-combo1 .z-comboitem:hover {
			    background: #EFF0F2 !important;
			}
			
			/* Selected (active) item */
			.custom-combo1 .z-comboitem-selected {
			    background-color: #EFF0F2 !important;
			}
			
			/* Optional: focused/keyboard navigation */
			.custom-combo1 .z-comboitem-focus {
			    background-color: #EFF0F2 !important;
			}
			
						/* 1. Base style for the Title */
			.mega-title {
			    position: relative;
			    display: inline-block; /* Required for transform animations */
			    font-weight: 600;
			    font-size: 14px;
			    color: #252525;
			    margin-top: 0; 
			    line-height: 1.2;
			    cursor: pointer;
			    transition: color 0.3s ease;
			}
			.mega-title1 {
			    position: relative;
			    display: inline-block; /* Required for transform animations */
			    font-weight: 500;
			    font-size: 18px;
			    color: #706d66;
			    margin-top: 0; 
			    line-height: 1.2;
			    cursor: pointer;
			    transition: color 0.3s ease;
			}
			
			.mega-title1::after {
			    content: '➜';
			    position: absolute;
			    margin-left: 8px;     
			    opacity: 0;           
			    transform: translateX(-15px); 
			    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
			    pointer-events: none;
			}
			
			/* 3. Hover State: Text changes color and Arrow slides in */
			.mega-title1:hover {
			    color: #706d66;
			}
			.mega-right:hover .mega-title1::after {
			    opacity: 1;
			    transform: translateX(0);
			}
			
			.mega-title1:hover::after {
			    opacity: 1;            
			    transform: translateX(0); 
			}
			
			/* 2. Create the hidden arrow */
			.mega-title::after {
			    content: '➜';
			    position: absolute;
			    margin-left: 8px;     
			    opacity: 0;           
			    transform: translateX(-15px); 
			    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
			    pointer-events: none;
			}
			
			/* 3. Hover State: Text changes color and Arrow slides in */
			.mega-title:hover {
			    color: #706d66;
			}
			
			.mega-title:hover::after {
			    opacity: 1;            
			    transform: translateX(0); 
			}
			
			/* 4. Enhanced layout for the Left Column Items */
			.mega-left {
			    max-width: 500px;
			    display: flex;
			    flex-direction: column;
			}
			
			/* Optional: Subtle fade for the description when title is hovered */
			.mega-title:hover + .mega-desc {
			    color: #333;
			} 
			.menu-item {
				display:grid;
			    cursor: pointer;
			}
			
			.menu-item.top {
    /* your styles here */
    margin-top: 11px;
}
			
			@media (max-width: 768px) {
			.menu-item.top
			{
			  margin-top:0px;
			}
		}
			.mega-right:hover .mega-title {
    color: #333;
}

.mega-right:hover .mega-title::after {
    opacity: 1;
    transform: translateX(0);
}
			
			/* Keep title styling same */
			.mega-title {
			    position: relative;
			    display: inline-block;
			    font-weight: 600;
			    font-size: 18px;
			    color: #1F1D1A;
			    line-height: 1.2;
			    transition: color 0.3s ease;
			}
			
			/* Arrow */
			.mega-title::after {
			    content: '➜';
			    position: absolute;
			    margin-left: 8px;
			    opacity: 0;
			    transform: translateX(-15px);
			    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			}
			
			/* Description */
			.mega-desc {
			    font-size: 14px;
			    color: #666;
			    margin-top: 8px;
			    margin-bottom: 12px;
			    line-height: 1.5;
			    max-width: 560px;
			    transition: color 0.3s ease;
			}
			
			/* 🔥 KEY CHANGE: hover on parent */
			.menu-item:hover .mega-title {
			    color: #000000;
			}
			
			.menu-item:hover .mega-title::after {
			    opacity: 1;
			    transform: translateX(0);
			}
			
			.menu-item:hover .mega-desc {
			    color: #000000;
			}

	

/* 		=================== shreya========================	*/					
					
	/* Ensure the parent is relatively positioned */
.nav-item-wrapper {
    position: static !important; 
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.nav-item-header:hover
{
	opacity: 60%;
}

/* MEGA MENU CONTAINER - Correct Positioning */
.mega-menu {
    position: absolute;
    top: 100%;   
    left: 0;
    width: 100vw; 
    
    padding: 60px 10%; 
    box-sizing: border-box;
    z-index: 9999;

    /* Standard Flex Layout for the internal content */
    display: none; 
    flex-direction: row;
    justify-content: center; 
    gap: 100px;            
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    transform: none !important; 
}


.mega-menu::before {
    content: "";
    position: absolute;
    top: -20px; 
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}


/* SHOW ON HOVER */
.nav-item-wrapper:hover .mega-menu {
    display: flex ;
    opacity: 1;
    pointer-events: auto;
    width: 100%;
    align-items: flex-start;
    flex: 1;
}
/* LEFT SIDE - Text Content */
.mega-left {
    max-width: 500px;
    display: flex;
    flex-direction: column;
}

.mega-right {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap:10px;
}

/* RIGHT SIDE - Video Content */

.mega-video {
    width: 100%;
    border-radius: 8px;
}

/* .mega-video-description {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
} */

/* Ensure the main nav center items are also flex and aligned properly */
.nav-center {
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

.mega-right {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.mega-video-container {
    width: 100%;
    height: 220px; 
    overflow: hidden; 
    border-radius: 8px;
}

.mega-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-in-out; 
    display: block;
}

/* Hover effect on the parent container (.mega-right) */
.mega-right:hover .mega-video {
    transform: scale(1.08); /* Zooms the image inside its container */
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .mega-menu {
        display: none !important; 
    }
}

@media (max-width: 1200px) {
    .mega-menu {
        width: 700px;
        max-width: calc(100vw - 20px); 
        padding: 20px;
        gap: 20px;
    }
    .mega-right {
        flex: 0 0 300px; 
    }
}

@media (max-width: 768px) {
    .mega-menu {
        flex-direction: column; 
        width: 90%;
        max-width: 400px; 
        left: 50%;
        transform: translateX(-50%);
    }
    .mega-left, .mega-right {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: unset;
    }
    .mega-right .mega-video {
        width: 100%; 
    }
}


.mega-menu[style*="display: none"] {
    opacity: 0 !important;
    pointer-events: none !important;
}



			/* ============================================================
               custom container for message popup
               ============================================================ */
            
   .custom-alert-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
/*     background: rgba(0, 0, 0, 0.2); 
 */   display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    border-radius: 12px; /* Matches main window rounding */
}

.custom-alert-box {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
    min-width: 280px;
    max-width: 90%;
    border: 1px solid #ededed;
}

.custom-alert-text {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 25px;
    font-family: 'Inter', sans-serif;
}

.alert-btn-container {
    display: flex;
    justify-content: center;
}

/* Override ALL ZK button states */
.custom-alert-btn,
.custom-alert-btn:hover,
.custom-alert-btn:focus,
.custom-alert-btn:active,
.custom-alert-btn:visited {
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove ZK inner structure styling */
.custom-alert-btn .z-button-content {
    color: #ffffff !important;
}
.custom-alert-btn:hover {
    opacity: 0.8;
}
						
		

















/* --- Mobile/Tablet Accordion Styles --- */
@media (max-width: 991px) {
    /* Hide Mega Menu by default on mobile */
    .mega-menu {
        display: none !important; 
        position: static !important; /* Stack inside the flow of the nav-links */
        width: 100% !important;
        box-shadow: none !important;
        border-top: none !important;
        padding: 10px 0 10px 0px !important; /* Indent sub-items */
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: none !important;
    }

    /* Show when the .accordion-open class is added via JS */
    .mega-menu.accordion-open {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Adjust sub-item layout for mobile */
    .mega-left, .mega-right {
        max-width: 100% !important;
        gap: 5px !important;
    }

    /* Hide the video/image section on mobile to keep the accordion clean */
/*     .mega-right {
        display: none !important;
    } */

    /* Style for the 'Platform' item to show it's clickable */
    .nav-item-wrapper {
        flex-direction: column;
        align-items: flex-start !important;
        width: 100%;
        height:100% !important;
    }

    /* Add a chevron indicator (Optional) */
    .nav-item-wrapper[data-platform]::after {
        content: ' ▾';
        position: absolute;
        right: 20px;
        top: 15px;
        font-size: 12px;
    }
}





body, html {
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Test Tiempos Fine', serif;
}

/* --- Sticky/Fixed Navigation Bar --- */
.coopr-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between; /* COOPR Left, Hamburger Right */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 10000 !important;
    height: 90px;
    padding-left: max(5%, calc((100% - 1500px) / 2));
    padding-right: max(5%, calc((100% - 1500px) / 2));
    transition: all 0.3s ease;
}

.logo-container {
    display: flex !important;
    align-items: center;
    cursor: pointer;
    gap: 12px;
}

.nav-toggle {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10001;
}

.nav-toggle-line {
    width: 100%;
    height: 2px;
    background-color: #1F1D1A;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger Animation */
.nav-toggle.active .nav-toggle-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active .nav-toggle-line:nth-child(2) { opacity: 0; }
.nav-toggle.active .nav-toggle-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Mobile Breakpoint (991px) --- */
@media (max-width: 991px) {
    .coopr-nav {
        height: 70px;
        padding: 0 20px;
    }
    .nav-login
    {
      font-size: 16px;
      margin-left :2px;
    }
    
    .mega-desc
    {
      margin-top: 8px;
      margin-bottom: 24px;
    }
    
    .book-demo
    {
      font-size: 16px;
    }
    
    .nav-item.nav-item-platform
    {
      border-bottom: none;
      margin: 0 !important;
        padding: 24px 0;
        width: 100%;
        display: block;
        font-size: 24px !important;
        font-family: "Tiempos Headline", serif;
        font-weight: 500;
        color: #1F1D1A;
    font-style: normal;
    line-height: normal;
    cursor: pointer;
    white-space: nowrap;
    }

    .nav-toggle {
        display: flex; /* Visible on mobile */
    }

    /* Chevron Styling */
    .chevron-icon {
        display: flex;
        align-items: center;
        transition: transform 0.3s ease;
        color: #1F1D1A;
    }

    /* Rotate Chevron when parent is open */
    .nav-item-wrapper.open .chevron-icon {
        transform: rotate(90deg);
    }

    /* Header wrapper for Accordion Trigger */
    .nav-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        cursor: pointer;
    }

    /* Mobile Sidebar Container */
    .nav-menu-wrapper {
        position: fixed;
        top: 70px; /* Starts right below the 70px header */
        left: 0;
        width: 100%;
        height: -webkit-fill-available;
        background: #ffffff;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 20px 190px 20px !important;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 9999;
        display: flex !important;
        overflow-y: auto;
        justify-content: space-between;
    }

    .nav-menu-wrapper.active {
        transform: translateX(0);
    }

    /* iPhone Safari-only fix: prevent bottom gray gap under mobile drawer */
    @supports (-webkit-touch-callout: none) {
        .nav-menu-wrapper,
        .nav-menu-wrapper.active {
            height: calc(100svh - 70px) !important;
            min-height: calc(100svh - 70px) !important;
            max-height: calc(100svh - 70px) !important;
        }
    }

    .nav-center, .nav-right {
        flex-direction: column !important;
        width: 100%;
        gap: 0px !important;
    }

    /* Nav Item spacing on mobile */
    .nav-center .nav-item {
         margin: 0 !important;
        padding: 24px 0;
        width: 100%;
        display: block;
        font-size: 24px !important;
        font-family: "Tiempos Headline", serif;
        font-weight: 500;
    }

    .nav-right {
        gap: 20px !important;
        margin-top:45px;
    }

    /* Keep Login/Book a Demo slightly lower in drawer */
    .nav-menu-wrapper .nav-right {
        margin-top: 90px !important;
        padding-bottom: max(4px, env(safe-area-inset-bottom)) !important;
    }

    /* Accordion Menu Content */
    .mega-menu {
        display: none !important;
        position: static !important;
        width: 100% !important;
        padding: 10px 15px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
    }

    .mega-menu.accordion-open {
        display: block !important;
    }

    .mega-left, .mega-right {
        max-width: 100% !important;
        width: 100% !important;
        padding: 10px 0;
    }
}

/* --- Desktop Nav Item Consistency --- */
.nav-item-wrapper {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
@media (min-width: 992px) {

    .chevron-icon {
        transform: rotate(90deg); /* Down */
        transition: transform 0.3s ease-in-out;
    }

    .nav-item-header:hover .chevron-icon {
        transform: rotate(270deg); 
    }
    .nav-item-header {
    	padding:30px 0px;
        display: flex; 
        align-items: center;
        gap: 5px;
    }
    .nav-menu-wrapper {
        display: contents;
    }
}

/* --- Mega Menu Desktop (Same as before) --- */
@media (min-width: 992px) {
    .mega-menu {
        position: absolute;
        top: 90px;
        left: 0;
        width: 100vw;
        padding: 0px;
        display: none;
        background:#fff;
        padding: 60px 10%;
        flex-direction: row;
        justify-content: center;
        gap: 100px;
        z-index: 9999;
    }

    .nav-item-wrapper:hover .mega-menu {
        display: flex;
        opacity: 1;
        pointer-events: auto;
    }
}

/* Logo and Label Styles */
.coopr-logo-1 {
    color: #000;
    font-family: "Tiempos Headline", serif;
    font-size: 27px;
    font-weight: 300;
}
.denmark-lbl {
    color: #82817E;
    font-family: Inter, sans-serif;
    font-size: 11px;
    white-space: nowrap;
}

/* Backdrop */
.navbar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    backdrop-filter: blur(2px);
}
.navbar-backdrop.active { display: block; }



@media (max-width: 991px) {
    /* Base state for the menu on mobile */
    .mega-menu {
        display: none !important; /* Hidden by default */
        position: static !important;
        width: 100% !important;
        padding: 0px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        box-shadow: none !important;
        border: none !important;
        transition: none !important;
        transform: none !important;
    }

    /* THE FIX: Ensure this class overrides the 'none' state above */
    .mega-menu.accordion-open {
        display: block !important; /* Forces visibility */
        margin-top: 11px;
        border-bottom: 1px solid #eee !important;
    }

    /* Chevron Rotation logic */
    .nav-item-wrapper.open .chevron-icon {
        transform: rotate(90deg) !important;
    }

    .chevron-icon {
        transition: transform 0.3s ease;
        pointer-events: none; /* Prevents chevron from eating the click event */
    }

    .nav-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent; /* Removes blue flash on mobile tap */
    }
}