@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;
            }
            
			.coopr-logo 
			           {
				    width: 30px;
				    height: 30px;
				    border-radius: 0px;
				   }
				
					.coopr-logo-1 
					{
					    color: #000;
						font-family: "Tiempos Headline";
						font-size: 27px;
						font-style: normal;
						font-weight: 300;
						line-height: normal;
					    margin-left: 12px;
					}



 /* --- 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;
                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;
                box-shadow: 2px 0 10px rgba(0,0,0,0.1);
                display: flex !important;
            }

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

            .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-right {
                margin-top: 30px;
            }
            
            .nav-toggle.active .nav-toggle-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
            .nav-toggle.active .nav-toggle-line:nth-child(2) { opacity: 0; }
            .nav-toggle.active .nav-toggle-line:nth-child(3) { transform: translateY(-8px) 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;
            }
        }




            .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; 
            }

           .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;
			    align-items: center; 
			    cursor:pointer;
			}
            
            
            /* 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: 1600px; 
			    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;
			    padding: 0 20px; 
			    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: 50px 0; 
			    margin-top: 50px;
			    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: 300px; 
			    background: #3A3A3A;
			    display: flex;
			    align-items: center;     
			    justify-content: center;   
			    padding: 60px 20px;      
			    box-sizing: border-box;
			}
			
			.workspace-message {
			    color: #FFFFFF;
			    text-align: center;
			    font-family: Test Tiempos Fine; 
			    font-size: 35px;
			    font-style: italic;
			    font-weight: 300;
			    line-height: 1.4;
			    
			    max-width:1500px; 
			    display: block;
			    letter-spacing: -0.2px;
			}
			
			@media (max-width: 768px) 
             {
                .workspace-message
                {
                    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: 1400px; /* 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;
                }
            }
            
            /* 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", serif;
	    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: 25px;
	}
	
	.footer-brand-title {
	    color: #FFF;
	    font-size: 41px;
	    font-family: "Tiempos Headline", serif;
	    font-weight: 300;
	    margin-bottom: 20px;
	}
	
	.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-description {
			        width: 280px; 
			    }
			    /* .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: 20px; 
			        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: 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% - 1550px) / 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%, 100%); 
	    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;
		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
	}
	
	
	
	/* --- Optimized Vision Section --- */
/* --- Optimized Vision Section (Zoom-Friendly) --- */
.vision-section {
    width: 100%;
    background-color: #FDFBF4; 
    padding: 80px 0;
    display: flex;
    justify-content: center;
}

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

.vision-header-title {
    display: block;
    font-family: "Test Tiempos Fine", serif;
    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: 60px; 
    width: 100%;
}

.vision-description {
    font-family: Inter, sans-serif;
    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: 40px;
    }
    
    .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: 60px 5%; /* 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: 700px; /* 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: 700px; /* Adjust this to make text wider/narrower */
}

.mockup-preview, .mockup-preview-2 {
    width: 100%;
    max-width: 700px; /* 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;
			}
			
			/* ============================================================
               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;
}