*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.header{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(./eduford_img/banner.png);
    background-position: center;
    background-size: cover;
    position: relative;background-color: rgba(0, 0, 0, 0.696);
}
nav{
   display: flex;
   padding: 2% 6%;
   justify-content: space-between;
   align-items: center;
}
nav img{
    width:150px
}
.nav_links{
    flex: 1;  /*it ocupy all the space in the row */
    text-align: right;
}
 .nav_links ul li{
    list-style-type: none;
    display: inline-block;/*it come horizontaly*/
    padding: 8px 12px;
    position: relative;
 }
 .nav_links ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 13px;
 }
  /* apply the hover effect*/
  /*this property give the underline effect when we put cursor over it*/
 .nav_links ul li::after{
    content:'';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
    transition: 0.5s;
 }
 .nav_links ul li:hover::after{
    width: 100%;
 }
 /**/

 .text_box{
   width: 90%;
   color: #fff;
   /*this property get the text box into center*/
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   /**/
   text-align: center;
 }
 .text_box h1{
   font-size: 62px;
 }
 .text_box p{
   margin: 10px 0px 40px;
   font-size: 14px;
   color: #fff;
 }
 .hero_btn{
   display: inline-block;
   text-decoration: none;
   color: #fff;
   border: 1px solid #fff;
   padding: 12px 34px;
   font-size: 13px;
   background: transparent;
   position: relative;
   cursor: pointer;
 }
 .hero_btn:hover{
   border: 1px solid #4415ff;
   background: #4415ff;
   transition: 1s;
 }
nav .fa-solid{
   display: none;
 }
  @media(max-width:700px)/*that is applicable on the device whose width is less than or equal to 700px */
  {
   .text_box h1{
      font-size: 15px;
   }
   /* nav links*/
   .nav_links ul li{
      display: block;
   }
   .nav_links{
      position: fixed;
      background: #f44336;
      height: 100vh;
      width: 200px;
      top: 0;
      right: -200px;
      text-align: left;
      z-index: 2;
      transition: 1s;
   }
   nav .fa-solid{
      display: block;
      color: #fff;
      margin: 10px;
      font-size: 22px;
      cursor: pointer;
   }
   .nav_links ul{
      padding: 30px;
   }
   
  }

  /*--------------course---------------*/
  .course{
   width: 80%;
   margin: auto;
   text-align: center;
   padding-top: 100px;
  }
  h1{
   font-size: 36px;
   font-weight: 14px;
  }
  p{
   color:#777 ;
   font-size: 14px;
   font-weight: 300;
   line-height: 22px;
   padding: 10px;
  }
  .row{
   margin-top: 5%;
   display: flex;
   justify-content: space-between;
  }
  .course_col{
   flex-basis: 31%;
   background: #ffc1e3;
   border-radius: 10px;
   margin-bottom: 5%;
   padding: 20px 12px;
   box-sizing: border-box;
   transition: 0.5s;
  }
  h3{
   text-align: center;
   font-weight: 600;
   margin: 10px;
  }
  .course_col:hover{
   box-shadow: 0 0 20px 0px rgba(0, 0, 0,0.2);
  }
  @media(max-width:700px){
   .row{
      flex-direction: column;
   }
  }

  /* ampus section */
  
  .campus{
   width: 80%;
   margin: auto;
   text-align: center;
   padding-top: 50px;
  }
  .campus_col{
   flex-basis: 32%;
   border-radius: 10px;
   margin-bottom: 30px;
   /*below this property give the permission to the layer text h3 to it can be the placed top or bottom of the image remove it to see the effect*/
   /*with out position relative no one tag can place over it*/
   position: relative;
   overflow: hidden;
   /**/
  }
  campus_col img{
   width: 100%;
   display: block;
  }
  .layer{
   background: transparent;
   height: 100%;
   width: 100%;
   /*below this property take the layer text to top of the image remove it to see the effect*/
   position: absolute;
   top: 0;
   left: 0;
   /**/
   transition: 0.5s;
  }
  .layer:hover{
   background: rgba(226, 0, 0, 0.7);
  }
  .layer h3{
   text-align: center;
   width: 100%;
   font-weight: 500;
   color: #fff;
   font-size: 26px;
   /*below this property take the layer text to bottom of the image remove it to see the effect*/
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   /**/
   transition: 0.5s;
   opacity: 0;
  }
  .layer:hover h3{
    bottom: 49%;
    opacity: 1;
  }
  /* facilities */
  .facilities{
   width: 80%;
   margin: auto;
   text-align: center;
   padding-top: 100px;
  }
  .facilities_col{
   flex-basis: 31%;
   border-radius: 10px;
   margin-bottom: 5%;
   text-align: left;
  }
  .facilities_col img{
   width: 100%;
   border-radius: 10px;
  }
  .facilities_col p{
   padding: 0;
  }
  .facilities_col h3{
   margin-top: 16px;
   margin-bottom: 15px;
   text-align: left;
  }
  /* testimonials */
  .testimonials{
   width: 80%;
   margin: auto;
   text-align: center;
   padding-top: 100px;
  }
  .testimonials_col{
   flex-basis: 44%;
   border-radius: 10px;
   margin-bottom: 5%;
   
   text-align: left;
   background:#ffc1e3;
   padding: 25px;
   cursor: pointer;
   display: flex;
  }
  .testimonials_col img{
   height: 40px;
   margin-left: 5px;
   margin-right: 30px;
   border-radius: 50%;
  }
.testimonials_col p{
   padding: 0;
}
.testimonials_col h3{
   margin-top: 5px;
   text-align: left;
}
.testimonials_col .fa-star{
   color: #f44336;
}
.testimonials_col .fa-star-half-stroke{
   color: #fa4b2c;
}
@media(max-width:700px){
   .testimonials_col img{
      margin-left: 0px;
      margin-right: 15px;
   }
}
/* cta */
.cta{
   width: 80%;
   margin: 100px auto;
   text-align: center;
   background-image: linear-gradient(rgba(2, 12, 206, 0.7),rgba(31, 87, 255, 0.582)),url(./eduford_img/banner2.jpg);
   background-position: center;
   background-size: cover;
   border-radius: 10px;
   padding: 100px 0;
}
.cta h1{
   color: #fff;
   margin-bottom: 40px;
   padding: 0;
}
@media(max-width:700px){
   .cta h1{
      font-size: 24px;
   }
}
/* footer */
.footer{
   width: 100%;
   text-align: center;
   padding: 30px 0;
}
.footer h4{
   margin-bottom: 25px;
   margin-top: 20px;
   font-weight: 600;
}
.icons .fa-brands{
   color: #f44336;
   margin: 0 13px;
   cursor: pointer;
   padding: 18px 0;
}
.fa-heart-pulse{
   color: #1fd145;
}
/* About  page */
.sub_header{
   height: 50vh;
   width: 100%;
   background-image: linear-gradient(rgba(9,4,30,0.7),rgba(9,4,30,0.7)),url(./eduford_img/background.jpg);
   background-position: center;
   background-size: cover;
   text-align: center;
   color: #fff;
}
.sub_header h1{
   margin-top: 100px;
}
.about_us{
   width: 80%;
   margin: auto;
   padding-top: 80px;
   padding-bottom: 50px;
}
.about_col{
   flex-basis: 48%;
   padding: 30px 2px;
}
.about_col img{
   width: 100%;
}
.about_col h1{
   padding-top: 0;
}
.about_col p{
   padding: 15px 0 25px;
}
.red_btn{
   border: 1px solid #f44336;
   background: transparent;
   color: #f44336;
}
.red_btn:hover{
   color: #fff;
}

/* blog section */
.blog_content{
   width: 80%;
   margin: auto;
   padding: 60px 0;
}
.blog_left{
   flex-basis: 65%;
}
.blog_left img{
   width: 100%;
}
.blog_left h2{
   color: #222;
   font-weight: 600;
   margin: 30px 0;
}
.blog_left p{
   color: #999;
   padding: 0;
}
.blog_right{
   flex-basis: 32%;
}
.blog_right h3{
   background: #f44336;
   color: #fff;
   padding: 7px 0;
   font-size: 16px;
   margin-bottom: 20px;
}
.blog_right div{
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #555;
   padding: 8px;
   box-sizing: border-box;
}
.comment_box{
   border: 1px solid #ccc;
   margin: 50px 0;
   padding: 10px 20px;
}
.comment_box h3{
   text-align: left;
}
/*form css property apply to modify*/
.comment_form input,.comment_form textarea{
   width: 100%;
   padding: 10px;
   margin: 15px 0;
   box-sizing: border-box;
   border: none;
   outline: none;
   background: #f0f0f0;
}
.comment_form button{
   margin: 10px 0;
}
@media(max-width:700px)
{
   .sub_header h1{
      font-size: 24px;
   } 
}
/* contact us page */
.location{
   width: 80%;
   margin: auto;
   padding: 80px 0;
}
.location iframe{
   width: 100%;
}
.contact_us{
   width: 80%;
   margin: auto;
}
.contact_col{
   flex-basis: 45%;
   margin-bottom: 30px;
}
.contact_col div{
   display: flex;
   align-items: center;
   margin-bottom: 40px;
}
.contact_col div .fa-solid{
   font-size: 28px;
   color: #f44336;
   margin: 10px;
   margin-right: 30px;
}
.contact_col div p{
   padding: 0;
}
.contact_col div h5{
   font-size: 20px;
   margin-bottom: 5px;
   columns: #555;
   font-weight: 400;
}
.contact_col input,.contact_col textarea{
   width: 100%;
   padding: 15px;
   margin-bottom: 17px;
   outline: none;
   border: 1px solid 17px;
   box-sizing: border-box;
}