* {
  box-sizing: border-box;
}

/* Ensure the page takes full height */
html,body {
  background:  linear-gradient(to right, #849ED1, #FFFFFF);
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  transition: 0.3s;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* padding: 50px; */
        }


        /* Social Media icon */
        .social-icons a i {
          transition: transform 0.3s ease-in-out;
        }
        
        .social-icons a i:hover {
          transform: scale(1.3); /* Increases size by 30% */
        }
        
        /* Navbar hover effect */
        .navbar {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 1000; /* Make sure it's above all elements */
          background: linear-gradient(90deg, rgb(14, 12, 80), #2d2c61, #21358f);
          background-size: 400% 400%;
          animation: gradientAnimation 5s infinite alternate;
          box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
          transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }
        
        /* Gradient Animation */
        @keyframes gradientAnimation {
          0% { background-position: 0% 50%; }
          100% { background-position: 100% 50%; }
        }
        
        /* Hover Effect */
        .navbar:hover {
          background: linear-gradient(90deg, #1e38ac, #3f3322, #1e38ac);
          box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.5);
        }
        
        
        /*hover*/
        .navbar-nav .nav-link {
          transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
        }
        
        .navbar-nav .nav-link:hover {
          text-shadow: #e9ebf0 1px 1px 1px;
          color: solid #f7f5f3; /* Change text color on hover */
          transform: scale(1.1); /* Slightly increase size on hover */
        }
        
        
        /* Dropdown Menu */
        .dropdown-link {
          display: block;
          padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
          font-size: var(--bs-nav-link-font-size);
          font-weight: var(--bs-nav-link-font-weight);
          color: var(--bs-nav-link-color);
          text-decoration: none;
          background: 0 0;
          border: 0;
          transition: color .15sease-in-out, background-color .15sease-in-out, border-color .15sease-in-out;
        }
        
        .dropdown-link:hover {
          color: #f39c12; /* Change text color on hover */
          transform: scale(1.1); /* Slightly increase size on hover */
        }
        .dropdown-menu {
          display: none;
          position: absolute;
          background: linear-gradient(to left, #849ED1, #FFFFFF);;
          top: 40px;
          left: 0;
          width: 250px;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .dropdown-menu li {
          padding: 10px;
        }
        
        .dropdown-menu li a {
          color: black;
        }
        /* Apply hover effect to dropdown menu items */
        .dropdown-menu li a {
          transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
          padding: 10px 15px; /* Ensure padding for better appearance */
          display: block; /* Ensure full width clickable */
          color: black; /* Default color */
        }
        
        .dropdown-menu li a:hover {
          color: #f39c12; /* Change text color on hover */
          transform: scale(1.1); /* Slightly increase size on hover */
          background-color: rgba(0, 0, 0, 0.1); /* Light background effect */
        }
        
        .dropdown:hover .dropdown-menu {
          display: block;
        }
/* Custom styling for the sidebar */
.sidebar {
  width: 200px; /* Adjust width as needed */
  height: calc(100vh - 56px); /* Full height minus header height */
  background: #343a40; /* Dark background */
  color: white;
  padding-top: 20px;
}
.sidebar a {
  color: white;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
.sidebar a:hover {
  background: #495057;
}
div{
  display: block;
  unicode-bidi: isolate;
}



.container {
  max-width: 900px;
}

.card {
  border-radius: 10px;
}

.card h2 {
  font-size: 24px;
  font-weight: bold;
}

.card p {
  font-size: 18px;
}

#options button {
  font-size: 16px;
  padding: 10px;
  margin: 5px 0;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.col-md-4 {
  position: relative;
  top: 20px;
}

.col-md-8 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  top: 100px;
}

.card.shadow-lg {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background-color: #36648B;
  border: none;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #0056b3;
}


/* Push footer to the bottom */
.main-content {
  flex: 1; /* Makes content expand and push footer down */
}


/* Footer styling */
.footer {
  background: #343a40; /* Dark background */
  color: white;
  text-align: center;
  padding: 15px;
  width: 100%;
}



@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}