* {

    margin: 0;
    padding: 0;    
    box-sizing: border-box;   
    }

body {  
    background-color: #fff;
    font-family: cursive;
  }


  p{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  }

  h3{
    font-family:Georgia, 'Times New Roman', Times, serif;
  }

  h4{
    font-family:Georgia, 'Times New Roman', Times, serif;
  }


  
/* .....................................The navigation menu.......................................... */
    
    a {
    text-decoration: none;   
    }
    
    li {  
    list-style: none;
    }

    .navbar {
        display: flex;
        width: 100%;       
        align-items: center;       
        justify-content: space-between;       
        padding-right: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-left: 20px;        
               
        color: #fff;       
        position: fixed;
        z-index: 10; 
        background-image: url(img/nav/navbar.webp);
        background-size: cover;
        background-position: center;  
        }
      
        .nav-links a {      
        color: #fff; 
            
        }

        .nav-links a:hover {
            color: #00bfff;
            
            
        }

        
        /* LOGO */
        
        .logo {
          z-index: 9;
        
        }
        
        /* NAVBAR MENU */       
        .menu {       
        display: flex;        
        gap: 1em;       
        font-size: 15px;       
        }
        
        .menu li:hover {        
        font-size: 20px;
        border-radius: 5px;       
        transition: 0.3s ease;       
        }
        




        .menu .active {        
          
          border-radius: 5px;              
          }
          .menu .active a {        
            color: #fff; 
            font-size: 20px;
               
        transition: 0.3s ease;  
                                
            }

        
        .menu li {       
        padding: 5px 14px;        
        }
        
        /* DROPDOWN MENU */
        
        .services {        
        position: relative;        
        }
        
        
        .dropdown {       
        background-image: url(img/nav/navbar.webp);   
        background-size: cover;
        background-position: center;   
        
        padding: 1em 0;      
        position: absolute; /*WITH RESPECT TO PARENT*/        
        display: none;        
        border-radius: 8px;       
        top: 35px;       
        }
        
        .dropdown li + li {       
        margin-top: 10px;       
        }
        
        .dropdown li {       
        padding: 0.5em 1em;       
        width: 15em;       
        text-align: center;
        font-size: 15px;      
        }
        
        .dropdown li:hover {       
        color: #0bbfff; 
        font-size: 15px; 
        background-color: #fff;     
        }

        .services:hover .dropdown {       
        display: block;
        
        }
  


        /*RESPONSIVE NAVBAR MENU STARTS*/

/* CHECKBOX HACK */

input[type=checkbox]{
    display: none;   
    } 
    
    /*GITECH MENU*/
    
    .gitech {    
    display: none;   
    font-size: 24px;
    user-select: none;   
    }
    



      

/* ...................................CAREER.......................................... */
 
.career{
background-image:  url("img/about us/il_fullxfull.2237661678_hgkm.webp");
background-size: cover;
height: 490px;
padding-top: 100px;
}



.open{
   
  flex: 3 1 300px;
      box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
      transition: all ease-in-out 0.3s;

      
      
      padding: 20px;

      border-radius: 20px;
      margin: 30px 450px;
      height: 60px;
      align-items: center;
      text-align: center;
}








    

/* .....................................Footer.......................................... */
 .footer {
    background-color: #fff;
    padding: 10px;
    text-align: center;
  }
  
  .footer p {
    font-size: 14px;
    color: #333;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 400;
  }






















  

    
    /*--------------------------- APPLYING NAVBAR MEDIA QUERIES  768px  Mobile Phones--------------------
     */
    
     @media (max-width: 850px) {

      body{
        margin: 0;
      }


      
  p{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  }

  a{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }


  h3{
    font-family:Georgia, 'Times New Roman', Times, serif;
  }

  h4{
    font-family:Georgia, 'Times New Roman', Times, serif;
  }


  .navbar{
    height: 80px;
  }





       .logo img{
        width: 250px;
       }

       
      
      .menu { 
    
    display:none;
    position: absolute;


    color: #fff;       
    position: fixed;
    z-index: 9; 
    background-image: url(img/nav/navbar.webp);
    background-size: cover;
    background-position: right;
    
    


    right: 0;
    left: 0;
    text-align: center;
    margin-top:0;
    font-size: 18px;
    
    margin-left: 40%;
    height: 100vh;
   
    }


    .menu li {  
      padding-top: 30px;  
    display: block;
    width: 100%;
    
    color: #fff;
    transition: 0.3s ease;
    }
    
    .menu li + li {
    margin-top: 12px;
    
    }
    
    input[type=checkbox]:checked ~ .menu{
    display: block;
    }
    
    .gitech {
    display: block;
    
    padding-top: 23px;
    padding-bottom: 23px;
    }
    
    .dropdown {  
      width: 100%;  
      align-content: center;
      
    
    transform: translateX(5%);
    }

    .dropdown.open .dropdown {
      display: block;
    }


    
    .dropdown{
      cursor: pointer;
      
    }
    
    .dropdown li a {
      display: block;
      
    }
    




    
    .dropdown li:hover {
    background-color: #00bfff;
    color: #fff;
    }


    
    .menu .active {        
          
      border-radius: 5px;              
      }
      .menu .active a {        
        color: #fff; 
        font-size: 16px;
           
    transition: 0.3s ease;  
                            
        }

    
    .menu li {   
      margin-top: 50px;    
    padding: 10px 10px;        
    }















    .career{
      background-image:  url("img/careers/career.webp");
      background-size: cover;
      background-position: center;
      width: 100%;
      
      }
      
      
      
      .open{
         
        flex: 1 1 100px;
            box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
            transition: all ease-in-out 0.3s;
      
            
            
            padding: 20px;
      
            border-radius: 20px;
            margin: 40px 30px;
            height: 60px;
            align-items: center;
            text-align: center;
      }
      





  }
  
  
/* ================= FAQ SECTION (added) ================= */
.faq-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 40px 60px;
}
.faq-section h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #00bfff;
  font-size: 1.8rem;
}
.faq-item {
  margin-bottom: 24px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
.faq-item h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: #222;
}
.faq-item p {
  color: #595959;
  font-size: 0.95rem;
  line-height: 1.6;
}
/* ================= END FAQ SECTION ================= */

/* ================= CAREERS PAGE REDESIGN (added) ================= */

.careers-hero {
  background: linear-gradient(135deg, rgba(10,38,71,0.88) 0%, rgba(20,66,114,0.85) 100%), url("img/careers/career.webp");
  background-size: cover;
  background-position: center;
  padding: 140px 20px 60px;
  text-align: left;
}
.careers-hero-inner {
  max-width: 900px;
  margin: 0 auto;
}
.careers-hero h1 {
  color: #fff;
  font-size: 2.4rem;
  margin-bottom: 16px;
}
.careers-hero p {
  color: #d7e4f2;
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 700px;
  margin-bottom: 24px;
}
.breadcrumb {
  font-size: 0.9rem;
}
.breadcrumb a {
  color: #d7e4f2;
}
.breadcrumb a:hover {
  color: #00bfff;
}
.breadcrumb span {
  color: #8fa9c4;
  margin: 0 6px;
}
.breadcrumb span[aria-current="page"] {
  color: #00bfff;
  margin: 0;
}

.careers-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px 20px;
}
.feature-card {
  flex: 1 1 280px;
  max-width: 320px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 30px 24px;
  text-align: center;
  transition: all ease-in-out 0.3s;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.12);
}
.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #e6f8ff;
  color: #00bfff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.icon-circle svg {
  width: 28px;
  height: 28px;
}
.feature-card h3 {
  color: #0a2647;
  font-size: 1.15rem;
  margin-bottom: 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.feature-card p {
  color: #595959;
  font-size: 0.95rem;
  line-height: 1.6;
}

.careers-openings {
  background-color: #f5f7fa;
  padding: 70px 20px;
  text-align: center;
}
.careers-openings h2 {
  color: #0a2647;
  font-size: 1.8rem;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.openings-intro {
  max-width: 750px;
  margin: 0 auto 40px;
  color: #595959;
  line-height: 1.7;
}
.openings-intro a {
  color: #00bfff;
}

.openings-card {
  max-width: 700px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
  padding: 40px;
  text-align: left;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.form-field {
  flex: 1 1 220px;
  margin-bottom: 20px;
}
.form-field-full {
  width: 100%;
}
.form-field label {
  display: block;
  font-size: 0.9rem;
  color: #222;
  margin-bottom: 8px;
  font-weight: 600;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d7dde3;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #00bfff;
}
.form-note {
  font-size: 0.85rem;
  color: #808080;
  margin-bottom: 20px;
}
.apply-btn {
  background-color: #0a2647;
  color: #fff;
  border: none;
  padding: 14px 32px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.apply-btn:hover {
  background-color: #00bfff;
}

@media (max-width: 700px) {
  .careers-hero {
    padding: 120px 20px 40px;
    text-align: center;
  }
  .careers-hero-inner {
    text-align: center;
  }
  .careers-hero p {
    margin-left: auto;
    margin-right: auto;
  }
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  .openings-card {
    padding: 30px 20px;
  }
}
/* ================= END CAREERS PAGE REDESIGN ================= */


/* ===================== FLUID DESIGN (careers page hero) ===================== */
.careers-hero {
  padding: clamp(60px, 14vw, 140px) clamp(16px, 4vw, 20px) clamp(32px, 6vw, 60px) !important;
}
.careers-hero h1 {
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 2.4rem) !important;
}
.careers-hero p {
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.05rem) !important;
}