@import url('https://fonts.googleapis.com/css2?family=Outfit&family=Raleway:wght@700&display=swap');

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

 :root {
     --color-red: red;
     --color-white: #fff;
 }

 .leading {
     width: 100%;

 }

 /* for h1 */
 .leading h1 {
     text-align: center;
     padding-top: 2%;
     font-family: 'Raleway', sans-serif;
     font-size: 50px;
 }

 .leading p {
     text-align: center;
     padding-top: 20px;
     font-family: 'Raleway', sans-serif;
 }

 /*this is for the search filter on the page*/
 .first_search .option {
     /* margin-left: 25%; */
     /* padding: 1.5%; */
     border-radius: 30px;
     width: 100%;
     border: 1px solid rgb(224, 221, 221);
 }

 .first_search .only_red {
     background: var(--color-red);
     margin-top: 5rem;
     width: 100%;
     height: 10vh;

 }

 .first_search option {
     /* font-size: 20px; */
     /* border: 1px blue; */
 }

 /*for the first grid on the page*/

 .info_conatiner {
     margin-top: 5rem;
     padding: 3em;
     /* height: 50vh; */
     display: grid;
     /* grid-gap:10px; */
 }

 .qoute {
     padding: 2em;
     /* height: 30vh; */
     /* width: 20rem; */
     text-align: center;
     border-radius: 2em;
     border: 0;
     box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
     transition: .3s;
 }

 .qoute:hover {
     /* width: 20.5rem; */
     /* height: 32vh; */
     box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.1);
     border: 1px solid red;
 }

 .info_conatiner img {
     /* width: 40%; */
 }

 .arrow img {
     width: 15%;
 }

/*  @media (min-width:880px) {
     .info_conatiner {
         grid-template-columns: repeat(4, 1fr);
     }

     .blog {
         grid-template-columns: repeat(3, 1fr);
     }
 } */

 /*this is for red line*/
 .only_red {
     width: 100%;
     background: red;
     height: 1vh;
 }

 .red {
     margin: 30px 0;
     /* width: 100%; */
     border: 1px solid red;
     /* height: 0.5vh; */
 }

 /* for card slider*/

 /*this blog */

 .nav_top {
     justify-content: space-evenly;
     /* display: flex; */
 }

 .nav_top button {
     text-transform: capitalize;
     width: 7%;
     height: 30px;
     border: 0;
     background: white;
 }

 .nav_top h2 a {
     text-decoration: none;
     color: rgb(129, 7, 7);
 }

 .nav_top button:hover {
     border-bottom: 2px solid rgb(129, 7, 7);
     transition: .2s;
 }

 .nav_top button a {
     text-decoration: none;
     color: rgb(129, 7, 7);
 }

 .blog {
     padding: 2em;
     /* height: 50vh; */
     display: grid;
     grid-gap: 30px;
 }

 .blog .blog_container {
     width: 100%;
     border-radius: 10px;
     border: 1px solid #fff;
     box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
 }

 .insideblog_container h3 {
     font-size: 30px;
 }

 .insideblog_container img {
     width: 100%;
     height: 20vh;
     border-radius: 10px;
     margin-top: 5%;
 }

 .views img {
     width: 8%;
     height: 15px;
 }

 .views span {
     text-transform: capitalize;
     padding-left: 1px;
     padding-top: 10px;
 }

 .views {
     padding-right: 10rem;
     width: 100%;
     display: flex;
     background-color: #f1eded;
 }

 .insideblog_container {
     margin: auto 5%;
     width: 90%;
     text-align: center;
 }

 .insideblog_container button {
     width: 10rem;
     height: 3vh;
     border: 1px solid #fff;
     transition: .3s;
     border-radius: 10px;
     text-decoration: underline;
     background: var(--color-white);

 }

 .insideblog_container button:hover {
     background: red;
     color: var(--color-white);
     width: 15rem;
     text-decoration: none;
 }

 /*THE SCHOOL CATEGORIES*/
 .school_categories {
     /* height: 70vh; */
 }

 .school_categories {
     text-align: center;
     /* margin-top:5rem; */
 }

 .nav_btn {
     margin: 10px 0;
 }

 .nav_btn button {
     /* width: 20%; */
     padding: 10px;
     border-radius: 30px;
     border: 1px solid rgb(129, 7, 7);
     background: var(--color-white);
     color: rgb(129, 7, 7);
     font-weight: 900;
     margin-top: 10px;
     font-size: 1.5rem;
     transition: .3s;
 }

 .nav_btn button:hover {
     color: var(--color-white);
     background: rgb(129, 7, 7);
     border: 0;
 }

 .s_btn {
     /* margin-top: 3rem; */
 }

 .school_categories h1 {
     text-shadow: 2px 2px 2px rgb(129, 7, 7);
 }

 .announcement {
     padding: 10px;
     border-radius: 30px;
     border: 1px solid rgb(244 13 13);
     background: var(--color-white);
     color: rgb(105 99 99);
     margin-top: 10px;
     transition: 0.9s;
 }

 .announcement:hover {
     color: var(--color-white);
     background: rgb(246 10 10);
     border: 0;
 }

/*  @media (max-width:375px) {
     .leading {
         width: 100%;
     }

     .leading h1 {
         margin-top: 25%;
         text-align: center;
         padding-top: 2%;
         font-size: 28px;

     }

     .leading p {
         text-align: center;
         padding-top: 5px;
     }

     .first_search .filter {
         margin-right: 15rem;
     }

     .first_search .option {
         height: 10vh;
         width: 18rem;
     }

     .arrow img {
         display: none;
     }

     .info_conatiner {
         margin-top: 2rem;
         padding: 10%;
         grid-gap: 30px;
         grid-template-columns: repeat(1, 1fr);
     }

     .blog {
         grid-template-columns: repeat(1, 1fr);
     }

     .qoute {
         width: 17rem;
         padding: 0%;
     }

     .qoute:hover {
         width: 17rem;
     }

     .only_red {
         width: 99%;
     }

     .red {
         width: 90%;
         margin-top: 70rem;

     }

     .nav_btn button {
         width: 28%;
         height: 7vh;
         border-radius: 30px;
         font-weight: 900;
         margin-top: 5rem;
         font-size: 10px;
     }

     .hide {
         display: none;
     }

     .nav_top button a {
         padding: 10px;
     }

     .views img {
         width: 11%;
         height: 15px;
     }

     .views span {
         padding-top: 5px;
     }

     .info_conatiner img {
         padding-top: 2rem;
         width: 10%;
     }

 }

 @media (max-width:320px) {
     
    .only_red{
        width: 115%;
    }
    .info_conatiner{

        padding: 7%;
    }
    

 } */

  .leading {
      width: 100%;

  }

  /* for h1 */
  .leading h1 {
      text-align: center;
      padding-top: 2%;
      font-family: 'Raleway', sans-serif;
      font-size: 50px;
  }

  .leading p {
      text-align: center;
      padding-top: 20px;
      font-family: 'Raleway', sans-serif;
  }