@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
    body{
        margin: 0;
        padding: 0;
        font-family: 'Inter', sans-serif;
    }

    /* Target the scrollbar element */
::-webkit-scrollbar {
  width: 5px; /* Width of the scrollbar */
}

/* Target the scrollbar track */
::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* Background color of the track */
}

/* Target the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
  border-radius: 5px; /* Rounded corners for the thumb */
}

/* Target the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* Hover color for the thumb */
}











 

.h10{
  height: 20px;
}
    /* CSS */
.button-9 {
  appearance: button;
  margin-top:10px;
  backface-visibility: hidden;
  background-color: #405cf5;
  border-radius: 50px;
  border-width: 0;
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
  font-size: 100%;
  height: 44px;
  line-height: 1.15;
  outline: none;
  overflow: hidden;
  padding: 0 25px;
  position: relative;
  text-align: center;
  text-transform: none;
  transform: translateZ(0);
  transition: all .2s,box-shadow .08s ease-in;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
}

.button-9:disabled {
  cursor: default;
}

.button-9:focus {
  box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}



    input:focus {
      outline: none;
    }
    

    .top_banner{
      background: linear-gradient(111.5deg, rgb(20, 100, 196) 0.4%, rgb(33, 152, 214) 100.2%);
      padding: 0 100px;
      padding-bottom: 50px;
      margin-bottom: 50px;
      color: white;
    }
    

    .height50{
        height: 100px;
    }
    
.header_grird{
    display: grid;
    grid-template-columns: 50% 50%;
    padding:  30px 0;
}
 
.buttons a{
    padding: 0 10px;
}
.buttons{
    display: flex;
    justify-content: end;
}
    h1{
        margin: 0;
    }
    .heading_section h1{
        padding-bottom: 10px;
    }

    .heading_section{
        padding-bottom: 50px;
    }
    .heading_section P{
        margin: 0;
        padding: 0;
    }
    
/* Search bar styles */
.search-bar { 
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto; /* Center the search bar */
    border-radius: 5px;
    margin-bottom: 50px;
    position: relative;
  }
   
  .search-bar input {
    flex: 1; /* Allow the input to expand to fill remaining space */
    padding: 15px;
    border: none;
    font-size: 16px;
  }
  
  .search-bar button {
    position: absolute;
    right: 21px;
    padding: 10px;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }
  
  .search-bar button:hover {
    background-color: #ffffff; /* Button hover effect */
  }
  
  /* Focus style for the input */
  input{
    transition: 0.1s;
    border-radius: 50px;
  }

  input[type="text"]:focus {
    border: 5px solid #007bffaf; /* Change this color to your desired focus color */
  }
  


    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-gap: 20px;
        margin-bottom: 50px;
                padding:15px 80px;
      }
      
      .card {
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border: 1px solid rgb(219, 214, 214);
        margin-top: 30px;
      }
       
      .cta-button {
        display: block;
        margin-bottom: 10px;
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        text-decoration: none;
      }
      
      .card-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      
      .card-author,
      .card-publisher {
        font-size: 14px;
        margin-bottom: 0;
      }
      



    .center-text {
        text-align: center;
      }
    .card img{
  width: 100%;
  height: 200px !important;
  /*object-fit:contain;*/
    }
    .main_container{
        padding: 0 150px;
    }


.grid-container1article {
        display: grid;
    grid-template-columns: 50% 50%;
        grid-gap: 20px;
      }
      
      .card {
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }
      


/* Journal grid section */
.journal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjust minmax values for desired column width */
    gap: 20px;
  }
  
  .journal-card {
    background-color: #fff; /* Adjust background color as desired */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-align: center;
    transition: all 0.3s ease-in-out;
  }
  
  .journal-card:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Slight hover effect */
  }
  
  .journal-card img {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }
  
  .journal-card h3 {
    margin-bottom: 5px;
    font-size: 18px;
  }
  
  .journal-card p {
    margin-bottom: 10px;
    line-height: 1.5; /* Adjust line height for better readability */
  }
  
  .journal-card a {
    color: #333; /* Adjust link color as desired */
    text-decoration: none;
  }
  
  .journal-card a:hover {
    color: #000; /* Adjust link hover color as desired */
  }

    .fx_center{
        display: flex;
        justify-content: center;
    }
/* Circle grid styles */
.circle-grid {
  padding-top:40px;
  padding-bottom: 80px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Adjust circle size as desired */
    gap: 20px; /* Adjust spacing between circles */
  }
  
  .circle {
    width: 10rem;
    height: 10rem;
    background-color: #3498db; /* Adjust circle color */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 50px;
  }


    /* Blog section styles */
.blog-section {
    text-align: center;
    padding-bottom: 100px;
  }
  
  .blog-section h2 {
    margin-bottom: 20px;
    font-size: 24px;
  }
  
  /* Blog grid styles */
  .blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  
  .blog-post {
              padding:15px;

    background-color: #fff; /* Adjust background color as desired */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: all 0.3s ease-in-out;
  }
  
  .blog-post:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Slight hover effect */
  }
  
  .blog-post img {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }
  
  .blog-post h3 {
    margin-bottom: 5px;
    font-size: 18px;
  }
  
  .blog-post p {
    margin-bottom: 10px;
    line-height: 1.5; /* Adjust line height for better readability */
  }
  
  .blog-post a {
    color: #333; /* Adjust link color as desired */
    text-decoration: none;
  }
  
  .blog-post a:hover {
    color: #000; /* Adjust link hover color as desired */
  }
  .space{
    height: 50px;
  }

  .view-all-button{
    background-color: #007bff;
    padding: 10px;
    color: white;
  }
 

   /* Focus style for the input */
input[type="email"]:focus {
    border: 2px solid #007bff; /* Change this color to your desired focus color */
}   

.signup_conaner{
    padding: 20px 200px;
    background-color: #06152c;
    color: white;
}
.signup-inline {
  display: flex;
  width: 100%; /* Make the form full-width */
  align-items: center;
}

.signup-inline label {
  margin-right: 10px;
}

input[type="email"] { 
  flex: 1; /* Allow the input to expand to fill remaining space */
  padding: 9px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button[type="submit"] {   
  padding: 10.5px;
  border: none;
  background-color: #ffffff00; /* Button background color */
  color: #5309ff;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

button[type="submit"]:hover {
  background-color: #ffffff; /* Button hover effect */
}


    



/* Footer*/
footer {
    background-color: #000000; /* Adjust background color as desired */
    color: white;
    padding: 20px 0;
    text-align: center; /* Center content initially for responsiveness */
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four equal-width columns */
    gap: 20px; /* Spacing between columns */
    margin: 0 auto; /* Center the grid horizontally */
    max-width: 1000px; /* Limit container width for larger screens */
}

.footer-column {
    padding: 10px;
}

.footer-column h3 {
    margin-bottom: 10px;
    font-size: 18px; /* Adjust heading size as needed */
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column li {
    margin-bottom: 5px;
}

.footer-column a {
    color: #ffffff; /* Adjust link color as desired */
    text-decoration: none;
}

.footer-column a:hover {
    color: #d2cbcb; /* Adjust link hover color as desired */
}

/* Footer copyright styles */
.footer-copyright {
    font-size: 12px; /* Adjust copyright text size as needed */
}



@media only screen and (max-width: 768px) {

    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-gap: 20px;
        margin-bottom: 50px;
                padding:15px!important;

      }
.circle-grid {
  padding-top:40px;
  padding-bottom: 80px;
    display: grid;
    grid-template-columns: auto; /* Adjust circle size as desired */
    gap: 20px; /* Adjust spacing between circles */
  }
    .journal-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      }

 

    .main_container{
        padding: 0 10px;
    }
    .signup_conaner{
        padding: 10px;
    }

.signup-inline label{
    display: none;
}
 



/* Footer */
.footer-column p{
font-size: 13px;
    }
    .footer-column
    {
        padding: 0 30px;
    }
    .footer-column li{
        font-size: 13px;
    }
    .footer-container {
        grid-template-columns: repeat(1, 1fr); /* Stack columns on smaller screens */
    }


}
 
 /*media query start*/
 @media screen and (max-width: 800px){
.grid-container1article {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
        grid-gap: 20px;
        padding:15px;
      }
}