@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300&family=Saira:wght@700&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;}
body{
    background: #dff2ff;}
html{
    font-size: 62.5%;}
/*********start section banner*****************/
.banner{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(4,9,30,0.4),rgba(4,9,30,0.46)),url(images/uni-hall.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;}
header{
    width: 95%;
    margin: auto;
    height: 6rem;
    padding:0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border-radius: 2rem;
    transform: translateY(15%);}
header img{
    width: 5%;
    height: 60%;
    border-radius: 50%;}
    nav ul .fa-solid{
        font-size: 1.8rem;
        color: white;
        display: none;}
nav ul li{
    display: inline-block;
    list-style: none;
    margin-left: 3rem;
    position: relative;}
nav ul li ::after{
    content: '';
    width: 0%;
    height:3px;
    margin: auto;
    display:block;
    background:dodgerblue; 
    transition: 0.4s;}
nav ul li:hover ::after{
    width: 100%;}
 nav ul li a{
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 500;
    color: white;
    text-transform: capitalize;}
    header .fa-solid {
        font-size: 2rem;
        color: white;
        display: none;}
.text{
    position: absolute;
    width: 70%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);}
.text h1{
    font-size: 3.8rem;
    color: white;
    text-transform: capitalize;
    margin-bottom: 2rem;}
.text p{
    font-size: 1.8rem;
    color: white;
    text-transform: capitalize;
    margin-bottom: 3rem;}
.btn{
    text-decoration: none;
    font-size: 1.4rem;
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 2rem;
    border: 1px solid white ;
    transition: 0.7s;}
.btn:hover{
    background: dodgerblue;
    border: none;}
    .up{
        position: fixed;
        bottom: 1rem;
        right: 2rem;
        border-radius: 20px;
        background: rgba(0,0,0,0.11);
        backdrop-filter: blur(0.3rem);}
    .up i{
        font-size: 3.5rem; 
        color: dodgerblue;
       padding: 0.5rem;
        transition: 0.7s;}
    .up i:hover{
        transform: scale(1.1);
        color:#005eff;}
/********rnd section banner****************/
/********start section cources*************/
.cources{
    width: 90%;
    margin: auto;
    height: auto;
    text-align: center;
    margin-top: 20rem;}
.cources h2{
    font-size: 3.6rem;
    color: dodgerblue;
    margin-bottom: 2rem;}
.cources p{
    font-size: 1.8rem;
    margin-bottom: 5rem;}
.cards{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;}
    
.card{
    width: 28%;
    height: 19rem;
    background:rgba(83, 188,241, 0.4);
    border-radius: 2rem;
    padding:0 1rem ;
    transition: 0.7s;}
.card:hover{
    box-shadow: 0 0 20px 0 rgba(0,106,255);}
.card h3{
    font-size: 2rem;
    font-weight: 700;
    text-transform: capitalize  ;
    margin: 2rem 0 1rem 0;}
.card p{
    font-size: 1.6rem;
    text-transform: lowercase;}
/*********end section cources***********/
/********start section compus*****************/
.compus, .futures{
    width: 90%;
    margin: auto;
    height: auto;
    text-align: center;
    margin-top: 20rem;}
.compus h2, .futures h2{
    font-size: 3.6rem;
    color: dodgerblue;
    margin-bottom: 2rem;}
.compus p, .futures p {
    font-size: 1.8rem;
    margin-bottom: 5rem;}
.comp, .future{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:3rem;}
.com{
    position: relative;
    width: 25%;
    height: 40rem;
    border-radius: 2rem;
    box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;}
.com img{
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    overflow: hidden;}
.headline{
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0%;
    left: 0%;
    display:flex ;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background:linear-gradient(rgba(0,0,0,0.07),#007FFF);
    border-radius: 2rem;  
    transition: 0.5s ;}
    .headline h3{
    font-size: 2.8rem;
    text-transform: capitalize;
    font-weight: 500;
    color:white ;}
    .com:hover .headline{
        height: 100%;
        box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;};
/***********end section compus********/
/********start section futures*****/
.future {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;}
 .fut{
      width: 25%;
      height: 40rem;
      border-radius: 2rem;
      text-align: center;
      box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;}     
 .fut:nth-child(2){
    height: 46rem;}
.fut img{
    width:100% ;
    height: 60%;
    overflow: hidden;
    border-radius: 2rem;}
 .fut:hover{
  transform: scale(1.03);}
.fut h3{
    font-size: 2.2rem;
    color: dodgerblue;
    text-transform: capitalize;
    margin: 1rem 0;}
.fut p{
    font-size: 1.6rem;
    color: black;
    padding: 0 1rem 1rem 1rem;}
/*********end section futures********************/
/******* start section testmonial*******/
.testmonials{
    width: 90%;
    margin: auto;
    height: auto;
    text-align: center;
    margin-top: 20rem;}
.testmonials h2{
    font-size: 3.6rem;
    color: dodgerblue;
    margin-bottom: 2rem;}
.testmonials p{
    font-size: 1.8rem;}
.testmonial{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
margin-top: 5rem;}
.test{
    width: 27%;
    padding: 2rem;
    box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;
    border-radius: 2rem;
    background:rgba(83, 188,241, 0.4);
    position: relative;}
.test:hover{
    transform: scale(1.03);}
.test img{
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    left: 1rem;}
.test .name{
    text-align: left;
    margin-left: 20%;}
.test .name h3{
   color: dodgerblue;
   font-size: 2.2rem;
   text-transform: capitalize;}
.test .name P{
    font-size: 1.6rem;
    margin: 1rem 0;}
.test .name i{
    font-size: 1.6rem;
    color: orangered;}
/********end section testmonial***************/
/********start section our**************/
.our{
    width: 90%;
    height: 50rem;
    margin:20rem auto 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(images/enroll.jpg);
    background-position: center;
    background-size: cover;}
.our h2{
    width: 65%;
    font-size: 3.6rem;
    color: white;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 2rem;}
/*******end section our***************/
/*******start section fotter*******/
.fotter{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 20rem 0 0 0;
    padding: 2rem 0;
    background: rgba(160, 187, 230, 0.547);}
.fotter h2{
    font-size: 3.2rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: dodgerblue;}
.fotter p{
    font-size: 2rem;
    text-transform: capitalize;
    width: 70%;
    margin-bottom: 3rem;}
.fotter h3{
    font-size: 2rem;
    font-weight: 600;
    text-transform: capitalize;
    margin-top: 2rem;}
.fotter i{
    font-size: 3rem;
    margin-inline: 2rem;}
.fotter  .fa-facebook{
    color: darkblue;}
.fotter .fa-linkedin{
    color: darkblue;}
.fotter .fa-twitter{
    color: dodgerblue;}
.fotter .fa-youtube{
    color: darkred;}
.fotter .fa-heart{
    font-size: 2.6rem;
    color: red;
    margin: 0;}
/**********end section fotter***************/
 /****responsive mobile******/
 @media(min-width:320px) and (max-width:480px){
    .banner{
      position: relative;} 
    .logo img{
        height: 5rem;
        width: 8rem;}
        header{
        height: 6rem;
        padding: 0 1rem;}
      nav ul{
        display: block;
        position:fixed;
        left: -100%;
        top: 6rem;
        width: 40%;
        height:calc(100vh - 6.5rem);
        background: rgba(255, 255, 255, 0.13);
        border-top-left-radius: 2rem;
        transition: 0.8s;}
      nav ul .fa-solid{
        display: block;
        position: absolute;
        right: 0.5rem;
        top:1rem}
      nav ul li{
        margin: 1.5rem ;}
      nav a{
        font-size: 1.8rem;}
      header .fa-solid{
        display: block;}
        .text{
            width: 80%;}
        .text h1{
            font-size: 2.5rem;
            margin-bottom: 1rem;}
        .text p{
            font-size: 1.2rem;
            margin-bottom: 2rem;}
    /********start section cources*************/
.cources{
    width: 100%;
    margin-top: 10rem;}
.cources h2{
    font-size: 2.6rem;
    margin-bottom: 1rem;}
.cources p{
    font-size: 1.8rem;
    margin-bottom: 3rem;}
.cards{
    flex-direction: column;
    gap: 2rem;}
.card{
    width: 80%;
    height: auto;
    padding:0 1rem ;}
.card h3{
    font-size: 1.8rem;
    margin: 0.5rem 0 1rem 0;}
.card p{
    font-size: 1.6rem;}
/*********end section cources***********/
/********start section compus*****************/
.compus, .futures{
    width: 100%;
    margin-top: 10rem;}
.compus h2, .futures h2{
    font-size: 2.6rem;
    margin-bottom: 1rem;}
.compus p, .futures p {
    font-size: 1.4rem;
    margin-bottom: 2rem;
    padding: 0 1rem;}
.comp, .future{
    gap:2rem;}
.comp{
    flex-direction: column;}
.com{
    width: 80%;
    height: 22rem;}
    .headline h3{
    font-size: 2.4rem;}
   
/***********end section compus********/
/********start section futures*****/
.future {
    width:100% ;
    flex-direction: column;
    gap: 2rem;}
 .fut{
      width: 80%;
      height: 33rem;}     
 .fut:nth-child(2){
    height: 36rem;}
.fut img{
    height: 60%;}
 
.fut h3{
    font-size: 2.4rem;
    margin: 0.5rem 0;}
.fut p{
    font-size: 1.6rem;
    padding: 0 0.5rem 0.5rem 0.5rem;}
/*********end section futures********************/
/******* start section testmonial*******/
.testmonials{
    width: 100%;
    margin-top: 10rem;}
.testmonials h2{
    font-size: 2.6rem;
    margin-bottom: 0.5rem;}
.testmonials p{
    font-size: 1.6rem;
margin-bottom: 0.5rem;}
.testmonial{
    flex-direction: column;
    gap: 2rem;}
.test{
    width: 80%;
    padding: 1rem;}
.test:hover{
    transform: scale(1.03);}
.test img{
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    left: 1rem;}
.test .name i{
    font-size: 1.4rem;}
/********end section testmonial***************/
/********start section our**************/
.our{
    width: 100%;
    height: 30rem;
    margin:10rem auto 0 auto;}
.our h2{
    width: 90%;
    font-size: 2.6rem;
    margin-bottom: 2rem;}
/*******end section our***************/
/*******start section fotter*******/
.fotter{
    margin: 10rem 0 0 0;
    padding: 1rem 0;}
.fotter h2{
    font-size: 2.6rem;}
.fotter p{
    font-size: 1.8rem;
    width: 90%;
    margin-bottom: 2rem;}
.fotter h3{
    font-size: 1.6rem;
    margin-top: 2rem;}
.fotter i{
    font-size: 2.8rem;
    margin-inline: 2rem;}

.fotter .fa-heart{
    font-size: 2.2rem;}}
/**********end section fotter***************/