/* Reset some default styles */
.mainTitle {
  font-family: 'Roboto', sans-serif; /* Modern sans-serif font */
  font-size: 2rem; /* Larger, more prominent title */
  font-weight: 900; /* Bold weight for a strong presence */
  color: #1e3a8a; /* Fallback solid color for older browsers */
  text-transform: uppercase; /* Makes it look more dynamic */
  letter-spacing: 1px; /* Adds space between letters for a cleaner look */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow to add depth */
  
  /* Fallback for older browsers that don't support gradients */
  background-color: #1e3a8a; 
  background: linear-gradient(135deg, #1e3a8a, #72a8ff); /* Modern browsers */
  
  color: transparent; /* Modern browsers: Makes text transparent for gradient */
  background-clip: text; /* Clips the gradient to the text (modern) */
  -webkit-background-clip: text; /* Vendor prefix for older WebKit browsers */
  
  display: inline-block; /* Ensures background only applies to the text */
  padding: 10px; /* Add some padding for better spacing */
  
  /* Smooth hover effect */
  transition: transform 0.3s ease-in-out;

  /* Fallbacks for older browsers */
  -webkit-text-fill-color: transparent; /* Transparent text for older WebKit browsers */
  -webkit-transition: transform 0.3s ease-in-out; /* Vendor prefix for transition */
}

hr {
  border: none; /* Remove the default border */
  height: 1px; /* Set the height to make it thin */
  background: lightgrey; /* Set the color to light grey */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  margin: 20px 0; /* Optional: Add spacing around the line */
}

/* Hover effect */
.mainTitle:hover {
  transform: scale(1.05); /* Slight zoom effect */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
.container {
    width: 90%;
    max-width: 600px;
    padding: 20px;
    margin: 0 auto;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

/* General Reset */
body, ul, li, a {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  margin: 0;
  padding: 0;
}

h1, h2 {
  padding-left: 10%;
  padding-right: 10%;
  margin: 0 auto;
  text-align: center;
}

p {
  padding-left: 5%;
  padding-right: 5%;
}

/* Tab Menu Styling */
.tabmenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-radius: 8px;
  padding: 4px;
  margin: 0;
  list-style: none;
  gap: 4px; /* smaller gap */
}

.tabmenu li {
  flex: 1 1 auto;
  text-align: center;
}

.tabmenu a {
  display: block;
  padding: 8px 14px; /* tighter spacing */
  color: #2850a5;
  background-color: #eef4ff;
  text-align: center;
  font-size: 15px; /* slightly smaller */
  font-weight: 500;
  border-radius: 6px; /* tighter corners */
  box-shadow: none;
  white-space: nowrap;
  transition: all 0.25s ease;
  border: 1px solid #a9bee9;
}

.tabmenu a:hover {
  background-color: #dbe8ff;
  color: #2850a5;
  transform: translateY(-1px); /* smaller lift */
  box-shadow: none;
}

.tabmenu a.active {
  background-color: #dbe8ff;
  color: #2850a5;
  font-weight: 600;
  box-shadow: none;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
  .tabmenu {
    justify-content: space-around;
    padding: 3px;
    gap: 3px;
  }

  .tabmenu a {
    font-size: 14px;
    padding: 7px 12px;
    border-radius: 5px;
  }
}

  /*-----------------Calculator Outline Template------------------------*/ 
  #oultine1 {
    background-color: #2850a5;
    box-shadow: none;
    font-size: medium;
    max-width: 812px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #a9bee9;
    margin: 20px auto; /* Center the outline with margin */
    padding: 20px;
  }
  
  @media screen and (max-width: 812px) {
    #oultine1 {
      width: 100%;
      padding: 15px;
    }
  }
/* End Section */



/*---Footer Styles-----*/
.footerContent {
  margin: auto 0;
  text-align: center;
}

.image1 {
  display: block; /* Ensure it behaves like a block element */
  margin: 0 auto; /* Center horizontally */
  max-width: 100%; /* Prevent overflow on smaller screens */
  height: auto; /* Maintain aspect ratio */
}

.socialIcons {
  display: flex; /* Use flexbox for alignment */
  justify-content: center; /* Center align the icons */
  gap: 15px; /* Ensures consistent spacing between icons */
}

.icon {
  width: 30px;
  height: 30px;
  transition: transform 0.3s, filter 0.3s; /* Added smooth filter transition */
}

.icon:hover {
  transform: scale(1.1); /* Slight zoom effect */
  filter: brightness(1.2); /* Lightens the icons on hover for better feedback */
}

/* Mobile adjustments for tab and content */
  @media screen and (max-width: 800px) {
    .tabmenu {
      flex-direction: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }

    .tabmenu a {
      padding: 12px 20px; /* Adjust padding for smaller screens */
    }

    .tabcontent {
      padding: 15px;
    }

    .footerContent1 {
      text-align: center;
    }

    .socialIcons {
      justify-content: center; /* Center social icons on small screens */
    }
    
    .image1 {
      padding-left: 5%;
      padding-right: 5%;
      display: block;
      margin: 0 auto; /* Center the image on smaller screens */
      max-width: 90%; /* Limit the size to fit within smaller devices */
      height: auto; /* Maintain aspect ratio */
    }
  }
/* End Section */