@charset "UTF-8";
/* CSS Document */

/* =========================================
   1. MOBILE DEVICES & SMALL SCREENS
   ========================================= */

/* --- Mobile Specific Range (360px to 480px) --- */
@media (min-width: 360px) and (max-width: 480px) {
    .container, .container-sm { max-width: 600px; }
    .navbar { padding: 10px 0; }
    .logo-wrapper { width: 110px; height: 55px; min-width: 110px; }
    .logo-part-1 { left: 48px; top: -7px; width: 42%; }
    .logo-part-2 { left: 0px; top: 10px; width: 115%; }
    #hero-section {height: auto;padding: 61px 0 0px;}
    .hero-title {font-size: 17px;padding-left: 19px;margin: 38px 0;}
    .hero-subtitle {font-size: 14px;padding-left: 22px;margin-top: -34px;}
    #smarter-cities { min-height: 67vh; }
    .smarter-graphic-wrapper { height: 139px; margin-bottom: 44px; }
    .line-1 {top: 0%;left: 8%;width: 45%;}
    .line-2 { bottom: 4%; right: 16%; width: 45%; }
    .smarter-title {font-size: 18px;margin-bottom: 12px;}
    .section-padding { padding: 50px 0; }
    .clients-title {font-size: 26px;}
    .products-title {font-size: 27px;}
    .product-card { padding: 20px; }
    .card-btn { width: 140px; height: 40px; margin: 0 auto; }
	.get-in-touch {justify-content: center;   /* vertical center */align-items: center;       /* horizontal center */text-align: center;}	
    #stats-section { padding: 50px 0; }
    .contact-title {font-size: 25px;text-align: center;}
    .btn-custom { width: 200px; height: auto; margin: 0 auto; text-align: center; }
  #site-footer {
    /* text-align: center; */
    padding: 20px;
  }

  .footer-logo-merged {
    margin: 0 auto 20px;
  }

  .contact-row {
    /* justify-content: center; */
  }

  .social-icons {
    justify-content: center;
  }
	
    .subnav-hamburger { display: flex; }
    .subnav-links { flex-direction: column; gap: 20px; max-height: 0; }	
    
    #section-timeline { padding: 50px 15px; }
    .timeline-header { margin-bottom: 115px; }
    .timeline-header h2 { font-size: 24px; }
    .nav-arrow svg { width: 50px; height: 50px; }
    .big-number { font-size: 150px; top: 46% }
    .image-circle-container { width: 180px; height: 180px; margin-top: -46px; margin-bottom: 116px; }
    .timeline-content p { font-size: 15px; }
    #section-awards {padding: 0px 15px 13px;}
    .section-header h2 { font-size: 1.8rem; } /* Combined from duplicate selector */
    .section-header p { font-size: 0.9rem; padding: 0 10px; }
    .subtitle { font-size: 13px; }
    .award-card { height: 250px; padding: 12px; }
    .award-card p { font-size: 13px; }
    .award-img { width: 100px; height: 100px; }
    .arrow-group img { width: 26px; height: 26px; }
    #section-testimonials {padding: 18px 15px 18px;}
    
    .testi-card { padding: 22px 16px; min-height: 280px; }
    .testi-card h3 { font-size: 17px; }
    .testi-card .quote { font-size: 14px; }
    .testi-card .author strong { font-size: 15px; }
    
    .lead-wrapper {flex-direction: column;padding: 30px 16px 0px 20px;text-align: center;}
    .lead-title {font-size: 26px;/* padding: 33px; */}
    .lead-name { font-size: 20px; }
    .lead-role { font-size: 14px; }
    .lead-right img { width: 317px; margin-top: 0px; }
    .lead-text {column-count: 1;font-size: 15px;padding: 20px;}
    .lead-left, .lead-right {width: 100%;text-align: center;}
    
    #lead-example {padding: 0px 20px;}
    .section-title {font-size: 26px;/* padding-left: 16px; *//* margin: 0 auto; */text-align: center;}
    .vm-block h2 {font-size: 26px;text-align: center;}
    #section-about {padding: 59px 20px;}
	#mentor-example {padding: 0px 21px;}
    .mentor-wrapper { flex-direction: column; padding: 30px 16px 0px 20px; text-align: center; }
    .mentor-title { font-size: 28px; }
    .mentor-name {font-size: 16px;}
    .mentor-role { font-size: 14px; }
    .mentor-right img { width: 317px; margin-top: 0px; }
    .mentor-text { column-count: 1; font-size: 15px; }
    .mentor-left, .mentor-right { width: 123%; text-align: center; }
    
    /* Product Grid: Single column */
    .product-grid { grid-template-columns: 1fr; padding: 1rem 15px; }
    /* Product Details: Stacked */
    .product-row, .product-row:nth-child(even) { flex-direction: column; gap: 2rem; text-align: center; }
    .product-info h3 { font-size: 1.5rem; }
    .product-image img { max-height: 250px; }
	.work-content h2 {font-size: 26px; text-align: center;}
	.team-container {
	    padding: 14px 20px;
	}
/*  .team-card { height: 280px; }
  .team-overlay { padding: 18px; }
  .team-overlay h3 { font-size: 15px; }
  .team-overlay p { font-size: 12px; }*/
	.section-label {
text-align: center;
}
	.work-container {flex-direction: column; gap: 30px; text-align: center;}
	.work-content h2 {font-size: 26px;}
	.work-content p {font-size: 15px;}
	.btn-work {margin: 0 auto;display: inline-block;}
	.section-header {
    padding: 19px 1rem;
}
}

/* --- Mobile Specific (Max Width 767px) --- */
@media (max-width: 767px) {
    .design-img { /* top: -40%; */ height: 140%; padding: 0 15px; }
    .card-title { font-size: 20px; }
    .logo-item { max-height: 45px; }
}

/* --- Mobile / Tablet Boundary (Max Width 768px) --- */
@media (max-width: 768px) {
    .subnav-indicator { width: 4px !important; height: 20px; left: 0; bottom: auto; top: 0; transform: translateY(0); }
    .subnav-links { flex-direction: column; position: relative; }	
    #section-timeline { padding: 40px 20px; }
    .timeline-header { margin-top: 0; margin-bottom: 30px; }
    .timeline-header h2 { font-size: 26px; }
    .timeline-graphic { height: auto; min-height: 460px; display: flex; flex-direction: column; align-items: center; margin-top: 20px; }
    .timeline-line, .dot-small-2 { display: none; }
    .big-number { font-size: 180px; opacity: 0.2; top: 15%; right: 50%; transform: translateX(50%); }
    .active-point-container { position: static; transform: none; flex-direction: row; gap: 15px; margin-bottom: 30px; }
    .year-label { margin-bottom: 0; }
    .slide-content-wrapper { margin-left: 0; width: 100%; align-items: center; text-align: center; }
    .image-circle-container { margin-top: 0; width: 200px; height: 200px; margin-bottom: 20px; border: none; }
    .timeline-content p { max-width: 100%; font-size: 16px; }
}

/* =========================================
   2. TABLETS (Portrait & Landscape)
   ========================================= */

/* --- Tablets (481px to 768px) --- */
@media (min-width: 481px) and (max-width: 768px) {
    .container, .container-sm { max-width: 650px; }
    .navbar { padding: 14px 0; }
    .logo-wrapper { width: 130px; height: 75px; }
    #hero-section { height: auto; padding: 140px 0 60px; }
    
    /* Smarter Cities Graphics positioning adjusted for Flexbox centering */
/*    .smarter-graphic-wrapper { height: 268px; margin-bottom: 44px; }*/
	    .smarter-graphic-wrapper {
        height: 234px;
        margin-bottom: 44px;
    }
    .line-1 {top: 6%;left: 16%;width: 40%;}
    .line-2 {bottom: 0%;right: 17%;width: 40%;}
    .smarter-title { font-size: 30px; }
    .hero-title {font-size: 26px;padding-left: 19px;}
    
    .product-card { padding: 25px; }
    .contact-title { font-size: 40px; }
    .clients-title { font-size: 40px; }
    .products-title { font-size: 31px; }
    .card-btn { width: 140px; height: 40px; margin: 0 auto; }
    #stats-section { padding: 50px 0; }
    .btn-custom { width: 200px; height: auto; margin: 0 auto; text-align: center; }
	.section-header {
    padding: 31px 1rem;
}
  #site-footer {
    /* text-align: center; */
  }

  .footer-logo-merged {
    margin: 0 auto;
  }

  .social-icons {
    justify-content: center;
  }
    .subnav-hamburger { display: flex; }
    .subnav-links { flex-direction: column; gap: 22px; max-height: 0; }
    .big-number { font-size: 166px; }
    .image-circle-container { width: 180px; height: 180px; }
    
    #section-awards {padding: 10px 18px 60px;}
    .section-header h2 { font-size: 2.2rem; } /* Combined */
    .subtitle { font-size: 15px; }
    .award-card { height: 280px; }
    .award-img { width: 125px; height: 125px; }
    .arrow-group img { width: 28px; height: 28px; }
    
    .testi-card { padding: 28px 20px; min-height: 300px; }
    .testi-card h3 { font-size: 18px; }
    .testi-card .quote { font-size: 15px; }
    
    .lead-wrapper {flex-direction: column;padding: 35px 25px 0;text-align: center;}
    .lead-title { font-size: 32px; }
    .lead-name { font-size: 24px; }
    .lead-text { column-count: 1; }
    .lead-left, .lead-right {width: 100%;text-align: center;}
    .lead-right img {max-width: 260px;margin: 25px auto 0;}
	
    .mentor-wrapper {flex-direction: column;padding: 35px 25px 0 25px;text-align: center;}
    .mentor-title { font-size: 32px; }
    .mentor-name { font-size: 24px; }
    .mentor-text { column-count: 1; }
    .mentor-left, .mentor-right { width: 100%; text-align: center; }
    .mentor-right img { max-width: 260px; margin: 25px auto 0; }
    
    /* Product Grid: Single column (still compact) */
    .product-grid { grid-template-columns: 1fr; }
    /* Product Details: Stacked */
    .product-row, .product-row:nth-child(even) { flex-direction: column; gap: 2rem; text-align: center; }
    .product-image img { max-height: 300px; }
/*  .team-card { height: 320px; }
  .team-overlay { padding: 22px; }
  .team-overlay h3 { font-size: 17px; }*/
  .work-container {flex-direction: column;text-align: center;}
	.work-content h2 {font-size: 30px;}
	.btn-work {margin: 0 auto;}
}

/* --- Specific Tablet Range (540px to 720px) --- */
@media (min-width: 540px) and (max-width: 720px) {
    .subnav-hamburger { display: flex; }
    .subnav-links { gap: 24px; }	
    .smarter-graphic-wrapper {height: 232px;margin-bottom: 44px;}
    .big-number { font-size: 220px; }
    .image-circle-container { width: 200px; height: 200px; }
    .award-card { height: 270px; }
    .award-img { width: 120px; height: 120px; }
    .testi-card { min-height: 310px; }
    .lead-title { font-size: 34px; }
    .lead-right img {max-width: 315px;}
    .mentor-title { font-size: 34px; }
    .mentor-right img { max-width: 280px; }
    .product-card { padding: 1.5rem; }
/*  .team-card { height: 340px; }*/
  .work-content h2 {font-size: 32px;}
  #site-footer {
    /* text-align: center; */
    padding: 40px;
  }

  .footer-logo-merged {
    margin: 0px;
  }

  .contact-row {
    /* justify-content: center; */
  }

  .social-icons {
    justify-content: center;
  }

  .footer-links {
    /* text-align: center; */
  }
}

/* --- Tablet / Medium Devices (Min Width 600px) --- */
@media (min-width: 600px) {
    .awards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   3. LAPTOPS & SMALL DESKTOPS
   ========================================= */

/* --- Laptops (769px to 1024px) - Webkit specific --- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .navbar { padding: 18px 0; }
    #hero-section {height: auto;min-height: 39vh;}
    .smarter-graphic-wrapper { height: 238px; margin-bottom: 84px; }
    #smarter-cities { min-height: 57vh; }
    .line-1 { top: 10%; left: 9%; width: 41%; }
    .line-2 { bottom: -12%; right: 21%; width: 41%; }
    .smarter-title { font-size: 30px; }
    .hero-title {font-size: 38px;/* padding-left: 19px; */}
   .mentor-card {
    padding: 40px;
    margin: 0 19px;
  }

  .mentor-name {
    font-size: 40px;
  }

  .mentor-image img {
    max-width: 320px;
  }   
    .products-title { font-size: 48px; }
    .product-card { padding: 28px; }
    .contact-title { font-size: 40px; }
    
    /* Footer Adjustments */
    .footer-heading { margin-bottom: 15px; }
    .footer-logo-merged { width: 120px; height: 60px; margin-bottom: 20px !important; }
    .row { --bs-gutter-x: 3rem; }
    .contact-text { font-size: 15px; }
	
  #site-footer {
    text-align: left;
  }

  .footer-logo-merged {
    margin: 0;
  }

  .contact-row {
    justify-content: flex-start;
  }

  .social-icons {
    justify-content: flex-start;
  }
    .subnav-hamburger { display: flex; }
    .subnav-links { flex-direction: column; gap: 26px; max-height: 0; }
   
    #section-timeline { padding: 30px 30px; }
    .timeline-graphic {height: 366px;}
    .timeline-line, .dot-small-2 { display: block; }
    .active-point-container { position: absolute; transform: translate(-50%, -50%); flex-direction: column; }
    .year-label { margin-bottom: 15px; }
    .big-number { font-size: 300px; right: 5%; top: 48%; transform: translateY(-50%); }
    .slide-content-wrapper { margin-left: 0; width: 90%; align-items: flex-start; text-align: left; }
    .image-circle-container {width: 150px;height: 150px;margin-top: -48px;margin-bottom: 127px;border: 6px solid #491084;}
    
    #section-awards { padding: 50px 70px; }
    .section-header h2 { font-size: 30px; }
    .subtitle { font-size: 17px; }
    .award-card { height: 300px; }
    .award-img { width: 140px; height: 140px; }
    .arrow-group img { width: 30px; height: 30px; }
    
    #section-testimonials { padding: 50px 70px; }
    .testi-card { padding: 35px 26px; min-height: 340px; }
    .testi-card h3 { font-size: 20px; }
    .testi-card .quote { font-size: 16px; }
    
    .lead-wrapper { flex-direction: row; padding: 0px 0px 0px 40px; }
    .lead-title { font-size: 40px; }
    .lead-name { font-size: 28px; }
    .lead-left { width: 60%; }
    .lead-right { width: 40%; }
    .lead-right img { max-width: 300px; }
    .lead-text { column-count: 2; }
    .mentor-wrapper { flex-direction: row; padding: 0px 0px 0px 40px; }
    .mentor-title { font-size: 40px; }
    .mentor-name { font-size: 28px; }
    .mentor-left { width: 60%; }
    .mentor-right { width: 40%; }
    .mentor-right img { max-width: 300px; }
    .mentor-text { column-count: 2; }
    
    #section-about { padding: 25px 70px; }
    
    /* Product Grid: Two columns */
    .product-grid { grid-template-columns: repeat(2, 1fr); padding: 2rem 5%; }
    /* Product Details: Keep stacked */
    .product-row, .product-row:nth-child(even) { flex-direction: column; gap: 2rem; text-align: center; }
/*  .team-card { height: 380px; }
  .team-overlay h3 { font-size: 18px; }
  .team-overlay p { font-size: 13px; }*/
  .work-container {gap: 40px;}
	.work-content h2 {font-size: 34px;}
}

/* --- Medium Tablet / Small Laptops (Min Width 768px) --- */
@media (min-width: 768px) {
    #section-vision-mission { padding: 100px 70px; }
    .vm-block h2 { font-size: 48px; }
}

/* --- Laptop Range (850px to 1023px) --- */
@media (min-width: 850px) and (max-width: 1023px) {
    .smarter-graphic-wrapper {height: 296px;margin-bottom: 65px;}
    .line-1 { top: 10%; left: 8%; width: 40%; }
    .line-2 { bottom: 0%; right: 24%; width: 40%; }
    .subnav-links { gap: 30px; }	
    .timeline-graphic { height: 320px; }
    .big-number { font-size: 280px; }
    .image-circle-container { width: 200px; height: 200px; margin-top: -100px; }
    .section-header h2 { font-size: 30px; }
    .award-card { height: 300px; }
    .testi-card { min-height: 330px; }
    .lead-title {font-size: 34px;}
    .lead-left { width: 58%; }
    .lead-right { width: 42%; }
    .lead-right img { max-width: 330px; }
    .mentor-title {font-size: 34px;}
    .mentor-left { width: 58%; }
    .mentor-right { width: 42%; }
    .mentor-right img { max-width: 330px; }
    /* Product Grid: Two columns */
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    /* Product Details: Side-by-side */
    .product-row { gap: 2rem; }
/*  .team-card { height: 400px; }*/
  .work-content h2 {font-size: 34px;}
  .footer-desc {
    font-size: 15px;
  }
}

/* --- Max Width Constraints (Up to 991px) --- */
@media (max-width: 991px) {
    .navbar-collapse { background-color: #8A00FF; padding: 20px; margin-top: 10px; border-radius: 8px; }
    #hero-section {/* min-height: 600px; */height: auto;/* padding-bottom: 50px; */}
}

/* --- Desktop Start (Min Width 992px) --- */
@media (min-width: 992px) {
    .section-padding { /* padding: 120px 0 65px; */ }
    .col-lg-8 { width: 68%; }
}

/* --- Max Width Constraints (Up to 1024px) --- */
@media (max-width: 1024px) {
    #section-timeline { height: auto; min-height: 600px; }
    .big-number {font-size: 250px;right: 3%;top: 44%;}
    .slide-content-wrapper { margin-left: 0; width: 75%; }
    .timeline-content p { max-width: 450px; }
    .section-header h2 {font-size: 26px;}
	#section-subnav {
		top: 72px;
	}
}

/* =========================================
   4. DESKTOPS & LARGE SCREENS
   ========================================= */

/* --- Tablet Landscape to Desktop (1024px and up) --- */
@media (min-width: 1024px) {
    .smarter-graphic-wrapper { height: 300px; margin-bottom: 130px; }
    #smarter-cities { padding: 80px 40px; }
    .smarter-title {font-size: 38px;}
    .big-number { font-size: clamp(200px, 25vw, 400px); }
    .slide-content-wrapper { width: 75%; }
    .section-header h2 { font-size: 3rem; }
  .mentor-card {
    padding: 56px 72px 0px;
  }
    /* Product Grid: Three columns */
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    /* Product Details: Side-by-side */
    .product-row { flex-direction: row; }
    .product-row:nth-child(even) { flex-direction: row-reverse; }
		#section-subnav {
		top: 72px;
	}
}

/* --- Standard Desktop Range (1024px to 1368px) --- */
@media (min-width: 1024px) and (max-width: 1368px) {
    .smarter-graphic-wrapper { height: 311px; margin-bottom: 65px; }
    .line-1 { top: 10%; left: 8%; width: 40%; }
    .line-2 { bottom: 0%; right: 24%; width: 40%; }
    .subnav-links { gap: 35px; }	
    .image-circle-container { width: 220px; height: 220px; margin-top: -110px; margin-bottom: 62px; }
    .timeline-content p { font-size: 17px; }
    .section-header h2 { font-size: 34px; }
    .award-img { width: 140px; height: 140px; }
    #section-testimonials { padding: 70px 30px 90px; }
    .testi-card { min-height: 350px; padding: 36px 28px; }
    .lead-wrapper {padding: 45px 45px 0;}
    .lead-title { font-size: 46px; }
    .lead-left { width: 55%; }
    .lead-right { width: 45%; }
    .mentor-wrapper {padding: 45px 45px 0;}
    .mentor-title { font-size: 46px; }
    .mentor-left { width: 55%; }
    .mentor-right { width: 45%; }
    .product-detail-container { max-width: 1100px; }
    .product-grid { gap: 3rem; }
/*  .team-card { height: 420px; }
  .team-overlay h3 { font-size: 20px; }*/
  .work-content h2 {font-size: 36px;}
  #site-footer {
    padding: 80px 0 50px;
  }
}

/* --- Desktops Main (1025px and up) --- */
@media (min-width: 1025px) {
    .smarter-graphic-wrapper { height: 311px; margin-bottom: 65px; }
    .line-1 { top: 10%; left: 8%; width: 40%; }
    .line-2 { bottom: -14%; right: 24%; width: 40%; }
    

    .subnav-hamburger { display: none !important; }
    #section-subnav { padding: 40px 70px 0; }
    
    /* About */
    #section-about { padding: 100px 122px; }
    .about-container { flex-direction: row; gap: 70px; }
    .image-mask { height: 600px; }
    .section-title {font-size: 40px;}
    
    /* Timeline */
    #section-timeline { padding: 0px 0; }
    .timeline-container { padding: 0 122px; }
    .timeline-header { height: 152px; margin-bottom: 139px; }
    .timeline-header h2 { font-size: 48px; }
    .big-number { font-size: 376px; top: 301px; }
    
    /* Awards */
    #section-awards { padding: 60px 122px 100px; }
    .awards-grid { grid-template-columns: repeat(4, 1fr); }
    .section-header h2 { font-size: 48px; }
    .arrow-group img { width: 32px; height: 32px; }
    
    /* Testimonials */
    #section-testimonials {padding: 60px 122px 100px;}
    .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
    .testi-card { min-height: 360px; padding: 40px 30px; }
    
    /* Leader */
    .lead-wrapper { flex-direction: row; }
    .lead-left {width: 60%;}
    .lead-right { width: 40%; }
    .mentor-wrapper { flex-direction: row; }
    .mentor-left { width: 60%; }
    .mentor-right { width: 40%; }
    /* Team */
/*    #section-team { padding: 60px 70px; }
    .team-grid { grid-template-columns: repeat(3, 1fr); }
    .team-card { height: 560px; }*/
    
    /* Work With Us */
    #section-work { padding: 100px 70px; }
    .work-container { flex-direction: row; gap: 80px; }
    .work-content h2 { font-size: 48px; }
    
    /* Product Grid Max */
    .product-grid { max-width: 1400px; }
/*  .team-card { height: 420px; }*/
  .work-container {flex-direction: row;}

  #site-footer {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .image-sweep img {
    height: 360px;
  }

  .team-overlay {
    bottom: 22px;
    left: 22px;
  }
}


/* =========================================
   5. SPECIALTY DEVICES
   ========================================= */

/* --- Surface Pro High-Density Screen --- */
@media screen and (min-width: 1000px) and (max-width: 1400px) and (min-resolution: 1.5dppx) {
    .smarter-graphic-wrapper { height: 356px; margin-bottom: 65px; }
    .line-1 { top: 10%; left: 8%; width: 40%; }
    .line-2 { bottom: 0%; right: 25%; width: 40%; }
    .subnav-links { gap: 38px; }
    .subnav-item { font-size: 17px; }	
    .award-card p { font-size: 17px; }
    .section-header h2 { font-size: 35px; }
    .award-img { width: 145px; height: 145px; }
    .testi-card h3 {font-size: 30px;}
    .testi-card .quote { font-size: 17px; }
    .lead-right img { max-width: 360px; }
    .lead-title {font-size: 41px;}
    .lead-text { font-size: 17px; }
    .mentor-right img { max-width: 360px; }
    .mentor-title {font-size: 42px;}
    .mentor-text { font-size: 17px; }
    .product-card p { font-size: 0.9rem; }
/*  .team-card { height: 440px; }
  .team-overlay h3 { font-size: 21px; }
  .team-overlay p { font-size: 14px; }*/
  .image-mask img {transform: scale(1.05);}
  .footer-desc {
    font-size: 16px;
  }
    .smarter-graphic-wrapper {
        height: 356px;
        position: relative;
        left: 5%;
        /* margin-bottom: 65px; */
        margin-left: 23px;
        /* display: flex; */
        /* justify-content: center; */
        /* flex-wrap: nowrap; */
        /* align-content: center; */
    }	
}

/* --- Ultra Wide (1600px and up) --- */
@media (min-width: 1600px) {
    .hero-title {font-size: 50px;}
    .section-title {font-size: 56px;}
    .products-title {font-size: 60px;}
    .product-card { padding: 40px; }
    .contact-title { font-size: 80px; }
}