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

 body {
   font-family: 'Open Sans', sans-serif;
   background: #445a72;
   color: #f5f5f5;
   min-height: 100vh;
   line-height: 1.6;
 }

 .container {
   width: 100%;
   max-width: 1500px;
   margin: 0 auto;
   padding: 20px;
   margin-bottom: 100px;
 }

 .heading {
   max-width: 1000px;
   margin: 0 auto 60px auto;
   text-align: center;
   padding: 20px;
   border-radius: 12px;
   /* space above */
   /* padding-bottom: 40px; */


 }


 #search_img {

   width: 300px;
   height: 200px;
   border-radius: 4px;
   opacity: 1;
   
 }

 #no-results {
   display: none;
   text-align: center;
   padding: 20px;
   font-size: 1.2rem;
   color: #ccc;
   justify-content: center;
   height: 500px;

 }



 #info {
   font-size: 2rem;
   margin-bottom: 15px;
   color: #fff;
   line-height: 1.6;
   font-weight: bold;
 }

 /* #info:hover{
        background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        border-radius: 12px;
        transition: all 0.3s ease;
    } */

 #info1 {
   font-size: 2rem;
   margin-bottom: 15px;
   color: #fff;
   line-height: 1.6;

 }

 .btn-select {

   display: flex;
   gap: 20px;

   margin-bottom: 50px;
   justify-content: center;
 }

 .btn-select button {

   padding: 8px;
   border-radius: 10px;
   width: 100px;
   cursor: pointer;
   background-color: #2e5987;
   font-size: 14px;
   font-weight: bold;
   color: white;
   margin-bottom: 50px;
   border: 1px solid #ccc;
 }

 .btn-select button:hover {
   font-weight: bold;
   background-color: #85c324;
   border: 1px solid rgb(166, 250, 166);

 }


 .blog-heading{
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  font-size: 20px;
 }

 .blog-head{

  background: linear-gradient(90deg, #00c6ff, #3376c7);
   -webkit-background-clip: text;   
  -webkit-text-fill-color: transparent;
 }



 .options{

  display: flex;
  margin-bottom: 30px;
  
 }

 .options .header-opt{

  display: flex;
  gap: 40px;
  font-size: 15px;
  color: #3b3b3b;
  list-style-type: none; 
  margin-right: 50px;
 }

 .options li{
  cursor: pointer;
   position: relative; /* needed so submenu anchors to li */
   
 }

.options a{

  text-decoration: none;

}




 .dropdown-menu {
  position: absolute;
  background: #fafafa;
  color: #000;
  min-width: 140px;
  list-style-type: none;
  top: calc(100% + 30px); /* 10px gap */
  left: 70%;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  visibility: hidden;
  /* transition: all 0.3s ease; */
  z-index: 1000;
}




 /* Common dropdown menu style */
.dropdown-menu1 {
  position: absolute;
  background: #fafafa;
  color: #000;
  min-width: 140px;
  list-style-type: none;
  top: calc(100% + 30px); /* 10px gap */
  left: 35%;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  visibility: hidden;
  /* transition: all 0.3s ease; */
  z-index: 1000;
}

/* Add invisible hover bridge */
.dropdown::after,
.dropdown1::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 30px; /* gap size */
}

/* Show menu smoothly */
.dropdown:hover .dropdown-menu,
.dropdown1:hover .dropdown-menu1 {
  opacity: 1;
  visibility: visible;
  /* transform: translateX(-50%) translateY(0); */
}

/* Items */
.dropdown-menu li,
.dropdown-menu1 li {
  padding: 15px;
  white-space: nowrap;
  border-top: 3px solid transparent;
}

.dropdown-menu li:hover,
.dropdown-menu1 li:hover {
  border-top: 3px solid #004186;
}



 .header{
  display: flex;
  gap: 100px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
  min-height: 100px;
  background-color: rgb(255, 255, 255);
  border-top: 5px solid #7DB91B;
  padding-left: 20px;
  padding-right: 30px;
  position: sticky;
  top: 0;              /* stick to top of the page */
  z-index: 1000;       /* keep it above other content */
  
  
  
 }

 .logo-img{

  width: 185px;
  height: auto;
  padding-left: 20px;
 
 }



 .search-container {
   text-align: center;

   position: relative;
   max-width: 800px;
   margin: 0 auto 20px;
 }

 #search {
   width: 100%;
   height: 60px;
   padding: 0 20px 0 60px;
   font-size: 1.1rem;
   border-radius: 30px;
   border: none;
   background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23777" width="24px" height="24px"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat 25px center;

   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
   transition: all 0.3s ease;
 }


 .search-container .clear-btn {

   color: red;
   position: absolute;
   right: 30px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   font-size: 24px;
   display: none;

 }



 .clear-btn:hover {
   color: #e63946;
   /* brighter red */

   text-shadow: 0 0 8px rgba(230, 57, 70, 0.6);
   /* glow effect */
   box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3);
 }




 .blog-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 30px;
   margin: 0 auto;
   transition: all 0.4s ease;
 }

 .blog-btn {
   text-decoration: none;
   color: inherit;
   display: block;
   height: 100%;
 }

 .blog-card {
   background: white;
   border-radius: 12px;
   padding: 25px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   display: flex;
   flex-direction: column;
   height: 100%;
   position: relative;
   overflow: hidden;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   border: 3px solid transparent;
 }

 .blog-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(5, 229, 98, 0.12);
   border: 5px solid rgb(166, 250, 166);
 }





 .blog-card h2 {
   font-size: 1.35rem;
   color: #2c3e50;
   margin-bottom: 25px;
   line-height: 1.4;
 }

 .blog-card p {
   font-size: 1rem;
   color: #666;
   margin-bottom: 25px;
   flex-grow: 1;
 }

 .card-img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   margin-bottom: 30px;
   border-radius: 8px;
   transition: transform 0.4s ease;
 }



 .card-arrow {
   position: absolute;
   bottom: 20px;
   right: 20px;
   font-size: 20px;
   color: #000000;
   transition: transform 0.3s ease;
 }


 a {
   color: inherit;
 }



 .site-footer {

   text-align: center;
   padding: 10px 0;
   
   margin-top: 25px;
   background-color:#004186 ;
 }

 .footer-content{
margin-top: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 100px;
  justify-content: center;
  list-style-type: none; 
  margin-bottom: 100px;
 
  
 }

 .footer-content ul{

   
  list-style-type: none; 
 
 }
 
 .comp-ul{

  font-size: 14px;
  text-align: left;
  font-weight: lighter;
  
 }

 .comp-ul a{
  
  text-decoration: none;
 }

 .sol-ul{

  font-size: 14px;
  text-align: left;

 }

 .sol-ul a{

    text-decoration: none;
 }

 .serv-ul{

  font-size: 14px;
  text-align: left;
 }

 .serv-ul a{

  text-decoration: none;
 }

.comp-item{
   line-height: 3;
}

.sol-item{

   line-height: 3;
}

.serv-item{

   line-height: 3;
}

.support-item a{

    text-decoration: none;
}

.end-content{

margin: 0 auto;
font-size: 15px;
 
}

.icons i {
  margin: 0 8px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.icons{

  display: flex;

  margin-left: 450px;
  margin-top: 10px;
  position: relative;
  gap: 20px;
  top: 20px;

}






.footer-container{

  margin-bottom:50px;
  margin-top: 30px;
}

@media (max-width: 900px) {

  /* Reset the big desktop offsets */
  .icons,
  .assure-footer {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* Footer container — stack and center */
  .footer-content {
    flex-direction: column;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
  }

  .end-content {
    flex-direction: column;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 0 16px;
  }

  /* Center icons & adjust spacing */
  .icons {
    justify-content: center;
    gap: 18px;
    width: auto;
  }

  /* Override inline icon font-size: either remove inline styles or keep this */
  .icons i {
    font-size: 20px !important;
    margin: 0 8px;
  }

  /* Footer text readable on mobile */
  .assure-footer {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 14px;   /* readable on mobile */
    width: 100%;
    padding: 8px 0;
  }

  /* Make header responsive */
  .header {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px;
  }

  .logo-img {
    width: 150px;
    padding-left: 0;
  }

  /* Menu -> wrap or stack */
  .options ul {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }

  /* blog grid: 1 column on narrow screens */
  
}