html,
 body {
     width: 100%;

     overflow-x: hidden;
 }

 /*fonts*/
 .font-montserrat {
     font-family: 'Montserrat', sans-serif;

 }

 .font-redHat {
     font-family: 'Red Hat Display', sans-serif;

 }

 .font-source-sans-3 {
     font-family: 'Source Sans 3', sans-serif;

 }

 @font-face {
     font-family: 'sukar-font';
     src: url('webfonts/sukar-regular.ttf') format('truetype');

 }

 body {
     font-family: 'sukar-font', sans-serif;

 }

 h1,
 h2,
 h3 {
     font-family: 'sukar-font', serif;
 }

 /* Intro Section */
 .intro {
     position: relative;

     width: 100vw;
     height: 100vh;
     /* full screen height */

     align-items: center;



 }

 /*video background*/
 .intro .overlay .Video-Background {

     position: absolute;
     inset: 0;
     top: 0;
     left: 0;

     width: 100vw;
     height: 100vh;
     object-fit: cover;
     overflow: hidden;
     will-change: transform;


     z-index: 7;
 }


 /* Background Video */
 .intro video {
     position: absolute;
     inset: 0;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     object-fit: cover;
     opacity: 1;
     /* cover whole screen */
     z-index: -1;
     /* behind text */
 }



 .intro .overlay {
     position: absolute;
     inset: 0;

     display: flex;
     justify-content: flex-start;


     align-items: flex-end;
     overflow-y: hidden;
     overflow-x: hidden;

     padding: 2% 2% 7% 2%;
     z-index: 11;






 }

 .intro .overlay .text {
     position: relative;

     max-width: 90%;
     width: 100vw;

     text-align: left;
     z-index: 10;
 }

 /* make font size responsive*/
 .intro-text h2 {
     font-size: clamp(1.5rem, 4vw, 2.5rem);
 }

 .intro-text h3 {
     font-size: clamp(1rem, 3vw, 1.6rem);
 }

 .intro-text p {
     font-size: clamp(0.9rem, 2.2vw, 1.1rem);
 }

 /* Initial state for animation */
 .intro-text>* {
     opacity: 0;
     transform: translateY(20px);
     transition: all 1s ease-out;
 }

 /* Active state: triggers animation */
 .intro-text.animate-in>* {
     opacity: 1;
     transform: translateY(0);
 }

 /* Optional: add delay for each element */
 .intro-text.animate-in h2 {
     transition-delay: 0.1s;
 }

 .intro-text.animate-in h3 {
     transition-delay: 0.2s;
 }

 .intro-text.animate-in p {
     transition-delay: 0.3s;
 }

 /* Initial state: hidden below */
 .intro-text>.intro-btn {
     opacity: 0;
     /* start invisible */
     transform: translateY(20px);
     transition: opacity 0.6s ease-out, transform 0.6s ease-out;
     will-change: opacity, transform;
 }

 /* Animate in on page load */
 .intro-text.animate-in>.intro-btn {
     opacity: 1;
     /* fully visible after animation */
     transform: translateY(0);
     transition-delay: 0.6s;
     transition: opacity 0.5s ease, transform 0.6s ease;

     /* stagger effect */
 }

 /* animate all together for speed */
 @media (max-width: 768px) {
     .intro-text>* {
         transition-delay: 0 !important;
     }
 }

 @media (hover: hover) and (pointer: fine) {

     .intro-text>.intro-btn:hover {
         /* Hover effect: semi-transparent */

         opacity: 0.7;
         /* fade to 0.5 on hover */
         transform: translateY(4px);
         /* lift slightly */
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

         transition: none;
     }
 }


 /* Remove mobile tap highlight */
 .intro-btn {
     -webkit-tap-highlight-color: transparent;
     /* iOS & Android */
     outline: none;
     /* remove focus outline */
 }

 /* Prevent "stuck active" styles */
 .intro-btn:active,
 .intro-btn:focus {
     background-color: transparent;
     /* or inherit */
     box-shadow: none;
     /* if you have shadow on focus */
 }



 .Founders .bg-founders {
     background-color: #ffffff;


 }

 /* logo and menu size*/
 .navbar-brand img {
     height: clamp(150px, 12vw, 180px);
     width: auto;
 }

 #hamburgerIcon {
     font-size: clamp(1.5rem, 2vw, 2.8rem);
     color: #000;

 }

 /* Small & Medium screens: <992px */
 @media (max-width: 991.98px) {
     .navbar .container-fluid {
         display: flex;
         justify-content: space-between;
         /* logo left, hamburger right */
         align-items: center;
         padding: 0 0.1rem;
         /* horizontal spacing */
     }
 }


 .navbar {

     background: transparent !important;
     padding-top: 1rem;
     padding-bottom: 1rem;
     color: #000000;
     margin-top: -60px;
     z-index: 10;

 }


 #navbar-toggle {
     width: 60px;
     height: 60px;
     border: none;
     background: transparent;
     padding: 0;
     cursor: pointer;
     z-index: 10000;
 }



 .navbar .navbar-toggler {


     color: rgb(0, 0, 0);
     border: none;
     margin-right: none;
     margin-bottom: none;
     box-shadow: none;
 }

 .navbar .navbar-toggler:focus {
     box-shadow: none;
 }

 .navbar .container {
     padding-top: 0;
     padding-bottom: 0;
     margin-top: 0;
 }

 .navbar .nav-link,
 .navbar .navbar-brand {
     color: rgb(0, 0, 0);
 }

 .navbar .nav-link.active,
 .navbar .nav-link:focus,
 .navbar .nav-link:hover {
     color: #000000;
 }



 /* toggle menu customzation*/
 /* Fullscreen overlay */

 .menu-overlay {
     position: fixed;
     inset: 0;
     background-color: rgba(224, 224, 224, 0.95);
     display: flex;
     justify-content: center;
     align-items: left;
     flex-direction: column;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.5s ease;
     z-index: 100;
 }

 /* Active overlay */
 .menu-overlay.active {
     opacity: 0.9;
     pointer-events: all;
 }

 /* Overlay menu items container */

 .menu-overlay .overlay-menu {
     margin-bottom: 70px;
     padding-left: 17px;


 }

 .overlay-menu li {
     padding-left: 23px;
     margin-bottom: 16px;



     list-style: none;
     opacity: 0;
     transform: translateY(-30px);
     /* start slightly above */
     transition: transform 0.4s ease, opacity 0.4s ease;
 }

 /* When overlay is active, animate items in */
 .menu-overlay.active .overlay-menu li {
     opacity: 1;
     transform: translateY(0);
 }

 /* Stagger effect: delay each item */
 .menu-overlay.active .overlay-menu li:nth-child(1) {
     transition-delay: 0.1s;
 }

 .menu-overlay.active .overlay-menu li:nth-child(2) {
     transition-delay: 0.2s;
 }

 .menu-overlay.active .overlay-menu li:nth-child(3) {
     transition-delay: 0.3s;
 }

 .menu-overlay.active .overlay-menu li:nth-child(4) {
     transition-delay: 0.4s;
 }

 .menu-overlay.active .overlay-menu li:nth-child(5) {
     transition-delay: 0.5s;
 }

 /* Links styling */
 .overlay-menu li a {
     font-size: 2rem;
     color: #000;
     text-decoration: none;
     display: inline-block;
     transition: color 0.3s, transform 0.3s;
 }

 .overlay-menu li a:hover {
     color: #000000;
     transform: translateY(-3px);
 }

 /* end of menu transitions*/


 #hamburgerIcon {
     transition: transform 0.4s ease;
 }

 .body {

     margin: 0;
     padding: 0;
     height: 100%;
 }

 /* image settings (shared between our mission and about us)*/
 .full-height-image {
     position: relative;
     overflow: hidden;
 }

 .full-height-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 3px;
 }

 @media (max-width: 991.98px) {
     .full-height-image img {
         height: 300px;
     }
 }

 @media (min-width: 992px) {
     .full-height-image {
         height: 100vh;
     }
 }



 /*founders transitions*/
 .founder {
     display: block;
     position: relative;
     cursor: pointer;
     border-radius: 0.5rem;
     overflow: hidden;
 }

 .Founders .founder img {
     width: 100%;
     height: auto;
     max-width: 300px;
     display: block;
     margin: 0 auto;
     transition: transform 0.3s ease, filter 0.3s ease;
 }

 /* Hover & focus (desktop + mobile) */
 .founder:hover .founder-img,
 .founder:focus .founder-img {
     transform: scale(1.05);
     filter: brightness(70%);
 }

 .founder .overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 15%;
     background: rgba(0, 0, 0, 0.6);
     color: #fff;
     opacity: 0;
     transform: translateY(100%);
     transition: all 0.3s ease;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 1rem;
 }

 /* Trigger overlay on hover or focus */
 .founder:hover .overlay,
 .founder:focus .overlay {
     opacity: 1;
     transform: translateY(0);
 }

 /* Responsive adjustments */
 @media (max-width: 991px) {
     .founder-img {
         max-width: 200px;
     }

     .founder .overlay {
         height: 28%;
         padding: 0.75rem;
     }
 }

 /* footer , contact us*/
 .contact-us .contact-list i {
     margin-top: 7px;
     width: 30px;
     height: 30px;
     font-size: 1.5rem;

 }

 .contact-us .social-list i {


     font-size: 1.75rem;
 }

 .contact-us .social-list-container {
     padding-left: 10px;
 }

 .contact-list a span {
     white-space: nowrap;
 }