body{
box-sizing: border-box;
/* overflow-x: hidden; */
    height: 100%;
    font-family: 'Barlow Condensed', sans-serif;
font-family: 'Cabin', sans-serif;
font-family: 'Cairo', sans-serif;
font-family: 'DM Serif Display', serif;
font-family: 'Kanit', sans-serif;
font-family: 'Nunito', sans-serif;
font-family: 'Play', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Rubik', sans-serif;
}
#qw{
    height: 100px;
}

#bo{

    padding: 0px;
    margin: 0px;
}
#r{
    margin-top: -10px;

    width: 100%;
    height: 100vh;
}
.rec{
    position: absolute;
    /* display: inline-block; */
    border: 2px solid white;
    height: 50px;
    width: 50px;
    /* transform: rotate(20deg); */
}
.r1{
    position: absolute;
    /* display: inline-block; */
    border: 2px solid white;
    height: 100px;
    width: 100px;
    /* transform: rotate(220deg); */
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateY(45deg);
    animation: rec 15s linear infinite;
}
.ras{
    position: relative;
    top: 140px;
z-index: 999999;

}
.rec{
    position: fixed;

    top: 450px;
    /* display: inline-block; */
    border: 2px solid white;
    transform: scale(1.2);
    height: 100px;
    width: 100px;
    transform: rotate(120deg);
    animation: rec1 15s linear infinite;
}
@keyframes rec {
    0%{transform: translateX(0px)rotate(2deg);}
    50%{transform: translateX(20px)rotate(90deg)}
    100%{transform: translateX(0px)rotate(120deg);}
}
@keyframes rec1 {
    0%{transform: translateX(15px)rotate(90deg);}
    50%{transform: translateX(20px)}
    100%{transform: translateX(0px)rotate(360deg);}
}
#load{
    justify-content: center;
            margin: 0px;
            /* width: 100%; */
            padding: 0px;
    animation: loaderAnimation 4.5s linear ;
 
}
   

.ju{
    justify-content: center;
display: flex;
}

#ri{
    height: 120px;

    position: absolute;
    top: 220px;
    display: inline-block;
    /* margin: 0 0.5rem; */
  
    animation: backInUp; /* referring directly to the animation's @keyframe declaration */
    animation-duration: 2s; /* don't forget to set a duration! */
}

.animate__animated.animate__backInUp {
    --animate-duration: 1s;
  }
  
  /* This changes all the animations globally */
  :root {
    --animate-duration: 800ms;
    --animate-delay: 3s;
  }
@keyframes loaderAnimation {
   0%{
    transform: translateY(-20px);
   }
   25%{
    transform: translateY(10px);
   }
   50%{
    transform: translateY(-10px);
   }
    100% {
        /* opacity: 2; */
       
        transform: translateY(-1220px);
    }
  }

  
#home-page {
    /* position: absolute; */
    /* top: 0px; */
    margin-top: -5px;
    border: 1px solid maroon;
}
#h{
    position: absolute;
/* left: 30px; */
    /* padding: 30px; */
    /* margin-left: 10px; */
}
#logo{
    height: 50px;
}
.box{
    border: 2px solid green;
    padding-left: 120px;

}
.hi{
    display:inline-flex;
    transition: transform 0.31s ease-in-out;
    animation: ht 3.4s linear infinite;
    /* height: 46px; */
    /* border-right:2px solid white ; */
    overflow: hidden;
    
    /* animation: ht 3.4s linear infinite; */
  
}
.col-4{}
@keyframes ht {
    0% {
        /* transform: translateX(100%); */
        width: 0%;
        /* opacity: 0.5; */
transition: 0s;
    }

100% {
    opacity: 1;
        /* color:#485187; */
        /* transform: translateX(-100%); */
        width: 23%;
        transition: 0.31s;
        /* display: inline-flex; */
    }
}
#h{
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 60px;
    /* padding-left: 30px; */
    /* border: 2px solid green; */
}
@media (max-width:530px) {
    #h{
        top: -20px;
    }
}
#is{
    position: relative;
   /* width: 100%; */
    margin: 0px;
    height: 650px;
    /* background-position: center; */
    /* background-attachment: fixed; */
    padding: 0px;
    /* width: 100%; */
}
#b{
    color:white;
    font-weight: 800;
    /* padding-left: 30px; */
    /* background:linear-gradient(30deg,#FF5C41,#9E0046); */
/* background:linear-gradient(150deg,#89003e,#fb5639); */
/* background-color:white ; */
border: 2px solid #4f5597;
background-color: #4f5597;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
@media (max-width:990px) {
    #is{
        /* background-position: 100%; */
        
    }
}
#ho1{
    text-transform: uppercase;   
    font-size: 45px;
    letter-spacing: -2px;
    color: white;
    padding-top: 200px;
    display: inline-block;
    /* padding-left: 30px; */
    /* text-align: center; */
}
@media (max-width:472px) {
    #ho1{
        font-size: 35px;
    }
}
#ho2{
    font-size: 14px;
    /* padding-left: 30px; */
    color:rgb(255, 255, 255) ;
    /* padding-top: 200px; */
    /* padding-left: 30px; */
    /* text-align: center; */
}
#home {
    /* position: relative; */
    /* top: 10px; */
    /* border: 22px solid green; */
    /* top: 190px; */
    
}
 .nav-link  {
    color:white;
}
#nav{
    color: white;
    /* border: 2px solid green; */
    /* background:linear-gradient(30deg,#FF5C41,#9E0046); */
    position: absolute;
    /* width: 100%; */

    top: 1px;
    /* padding: 5px; */
    /* margin-left: -10px; */
    margin: 0px;
    height: 60px;
    /* z-index: 10px; */
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    /* padding: 10px; */
    /* margin: -10px; */
}
@media (max-width:998px) {
    #no{
       display: none;
        /* background-color: #9E0046; */
        /* height: 260px; */
    }
    #sel{
        padding: 10px;
        /* margin-top: -15px; */
       /* padding-top: 140px; */
        text-align: center;
    }
  #nav  {
    margin: 0px;
    padding: 0px;
    /* border-radius: 120px; */
    /* position: absolute; */
    /* top: 10px; */

    /* margin-top: 80px; */
        /* color: red; */
        /* border: 2px solid green; */
        /* display: flex; */
        /* margin-top: 10px; */
        /* flex-directio
        n: row; */
     /* writing-mode: horizontal-tb;    */
    }
    }

/* ABOUT-PAGE */
#About-Page {
    /* position: absolute; */
    /* margin-top: 40px; */
    /* border: 5px solid grey; */
    /* height: 350px; */
    /* background-color: maroon; */
}




#a-col-1,
#a-col-2 {
    /* border: 2px solid green; */
    height: 350px;
    margin-top: 20px;
}

@media(max-width:770px) {
    #a-col-1 {
        text-align: center;


    }
}

@media(max-width:770px) {
    #btn-3 {
        text-align: center;
        /* margin-left: 150px; */
        display: none;
    }
}

@media(max-width:770px) {
    #about-cont {
        /* height: 900px; */
        /* position: absolute; */
        /* top: 450px; */
        /* background-color: white; */
    }
}

.heading-1 {
    font-size: 50px;
    /* letter-spacing: -6px;
    font-weight: bold; */
    text-align: center;
    text-decoration-line:  underline ;
}
#about-cont
#ab-img {
    /* border: 2px solid green; */
    height: 350px;
}

.para-3 {
    font-size: 25px;
    /* letter-spacing: -1px;
    font-weight: bolder; */
    text-align: center;

}

#btn-3 {
    background-color: maroon;
    color: white;
    height: 50px;
    width: 100px;
    /* margin-left: 280px; */
    margin-top: 20px;
    /* text-align: center; */
    
}

#phelaimg{
    position: relative;
    margin: 0px;
    padding: 0px;
    /* width: 100%; */
}
#ser-row{
    
position: relative;
margin: 0px;
padding: 0px;
/* width: 120%; */
}
/* #ser-cont { */
    /* border: 2px solid blue; */
    /* height: 500px; */
    /* } */
    
    #ser-col-1 {text-decoration-line:  underline ;
        /* border: 2px solid red; */
        text-align: center;
        font-size: 40px;
        /* letter-spacing: -2px;
        font-weight: bold;
        letter-spacing: -1px; */
    }
    
    /* #ser-col-2 { */
        /* border: 2px solid blueviolet; */
        /* height: 400px; */
        
/* } */

/* #ser-col-3 { */
    /* height: 400px; */
    /* border: 2px solid yellow; */
/* } */

/* #ser-col-4 { */
    /* border: 2px solid sienna; */
    /* height: 400px; */
/* } */

#f1 {
    text-align: center;
    margin-top: 50px;
    /* margin-left: 42px; */
    /* text-align: center; */
    color: maroon;
    /* font-size: larger; */
    /* height:1320px; */
    /* width: 200px; */
}

#f2 {
    margin-top: 50px;
    /* margin-left: 95px; */
    /* text-align: center; */
    color: maroon;
    /* font-size: 220px; */
    /* height:1320px; */
    /* width: 200px; */
}

#f3 {
    margin-top: 50px;
    /* margin-left: 92px; */
    /* text-align: center; */
    color: maroon;
    /* font-size: 1em; */
    /* height:1320px; */
    width: 200px;
}

@media(max-width:400px) {
    /* #f1 { */
        /* margin-left: 100px; */
        /* text-align:center; */
    }
/* } */

@media(max-width:1025px) {
    #f2 {
        /* margin-left: 160px; */
        text-align: center;
    }
}



.school-icon {
    font-size: 98px;
    text-align: center;
    color: maroon;
}

.education-icon {
    font-size: 98px;
    text-align: center;
    color: maroon;
}

.graduate-icon {
    font-size: 98px;
    text-align: center;
    color: maroon;
}
#gq{
/* border: 2px solid green; */
    /* height: 500px; */
    /* background-color: #21254D; */
    margin: 0px;
    padding: 0px;
}
#ser-cont{
    margin: 0px;
    border: 20px solid #4f5597;
padding: 0px;
position: relative;
/* width: 100%; */
/* display: flex; */
/* background-color: #323769; */
/* justify-content: center; */
}

#h4 {
    /* text-decoration-line:  underline ; */
    /* font-family: 'Roboto', sans-serif; */
    /* letter-spacing: -1px;
    font-weight: bolder; */
    font-size: 27px;
    /* font-family: sans-serif; */
    color: black;
}

#p4 {
    font-size: 20px;
    /* font-family: 'Roboto', sans-serif; */
}
#er{
    /* background-color: #4f5597; */
    color: #4f5597;
    font-weight: 500;
    text-align: center;
    margin-left: 20px;

    /* border: 1px solid #4f5597; */
    background: linear-gradient(to left,#323769 50%,white 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
    animation: 2s in linear infinite;
    color: white;
}
#er:hover { 
    
    color: #323769;
    border: 2px solid #323769;
    background-position: left;
}
@keyframes in {
    0%{transform: translateY(0px)scale(1);}
    50%{transform: translateY(2px);}
    75%{transform: translateY(-2px
        )scale(1.12)
        ;}
    100%{transform: translateY(2px);}

    
}

#btn-ser {
    background-color: maroon;
    /* height: 0px; */
    margin-top: -120px;
    color: white;
    /* font-family: 'Roboto', sans-serif; */
}

/* #test { */
    /* border: 2px solid green; */
    /* height: 680px; */

/* } */

#test-row-1 {

    /* border: 2px solid black; */
    text-align: center;
    /* text-decoration-line:  underline ; */
}
#im{
    /* background-image: url("phela.png"); */
    /* height: 500px; */
   /* opacity: 0.591; */
    background-attachment: fixed;
    /* padding: 0px; */
    animation:fadeInLeftBig ;/* referring directly to the animation's @keyframe declaration */
    animation-duration: 8s;
    height: 100%;
    /* width: 100%; */
    /* background-position: center; */
    position: relative;
    margin: 0px;
    padding: 0px;
    /* height: 400px; */
}
@media (max-width:478px) {
    #im{
        height: 550px;
    }
}


#rem{
    animation:fadeInDown;/* referring directly to the animation's @keyframe declaration */
    animation-duration: 8s;
}
.animate__animated.animate__fadeInDown {
    --animate-duration:8s;
  }
  
  /* This changes all the animations globally */
  :root {
    --animate-duration: 800ms;
    --animate-delay: 0.9s;
  }
#an{
    animation:fadeInRightBig;/* referring directly to the animation's @keyframe declaration */
    animation-duration: 5s;
    /* border: 2px solid green; */
    /* position: absolute; */
    /* background-color: #323769; */
    /* margin-top: 50px; */
    /* height: 250px; */
    /* opacity: 0.823; */
    /* top: 20px; */
    /* padding: 25px; */
}
.paragraph-1{
    color: rgb(0, 0, 0);
    padding-top: 20px;
}
  .hone{
    height: 15px;
    width: 15px;
    border: 2px solid transparent;
    border-radius: 150%;
    color: white;
    animation:3s kala ease-out infinite;
    z-index: -20;
    /* opacity: 0; */
    /* color: red; */
  }
  .hone1{
    margin-top: -1px;
margin-left: -17px;
    height: 17px;
    width: 17px;
color: white;
padding: 4px;
    border-radius: 150%;
    border: 2px solid #323769;
    animation:3s kala ease-out infinite;
    z-index: -20;
    opacity: 0;
    /* color: red; */
  }
  @keyframes kala {
    /* 0%{transform: translateY(200px);} */
    0%{
     border-left: 1px solid;
         border-right: 1px solid;
        opacity: 1;
      
    transform: scale(1.2);
}
50%{
    transform: scale(1.6);
    border-left: 1px solid;
    border-right: 1px solid;
    opacity: 4;
}
   100%{
    border-left: 1px solid;
    border-right: 1px solid;
    opacity: 1;
    transform: scale(0.9);
    /* transform: translateX(-12px) ; */
    /* transform: translateY(500px); */
    /* transform: rotate(360deg) */
}
}
#vh{
color: white;
text-align: center;
opacity: 99999;

}
  .a{
    display: flex;
    position: absolute;
    /* top: 10px; */
    
    justify-content: center;
    height: 100px;
    border: 2px solid red;
  }
#a-c{
    /* font-family: ; */
    border: 2px solid green;
    /* height: 100px; */
    /* display: inline-block; */
    /* justify-content: center; */
    /* text-align: center; */
    
    /* padding-top: 20px; */
    /* margin: 10px; */

}
.icp{
    /* text-align: left; */
    /* padding-left: 10px; */
}
#cont{
    /* display: inline-block; */
  /* margin: 0 0.5rem; */

  animation: slideInUp; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 8s; /* don't forget to set a duration! */

}
.animate__animated.animate__slideInUp {
    --animate-duration: 8s;
  }
  
  /* This changes all the animations globally */
  :root {
    --animate-duration: 800ms;
    --animate-delay: 0.9s;
  }
#col4{
    position: absolute;
    justify-content: center;
    border: 2px solid #212447;
    height: 150px;
    width:150px;
    /* margin: 20px; */
  border-top: 2px solid white;
  border-radius: 150%;
animation: rs 2s linear infinite ;
    /* padding-left: 30px; */
}
.col-4{
display: flex;
    text-align: center;
    justify-content: center;
position: relative;
}
@keyframes rs {
    0%{
        transform: rotate(0deg);
    /* transform: translateY(0); */
    }
    100%{
        transform: rotate(360deg);
        /* transform: translateY(110px); */
    }
    
}
#num,#num2,#num1,#num3
{
    /* margin-top: 35px; */
}

#pro2{
    border: 2px solid red;
    /* height: 300px; */
    color: white;
    background-repeat: no-repeat;
    background: url("success\ \(2\).png")
    /* background-color: #2c2f58; */;
    /* background: url("sc.png"); */
    background-position: center
    ;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;

}
/*  */
#det{
    background-color: #323769;
    color: white;
}
#div-p{
    /* border: 2px solid white; */
/* position: absolute; */
text-align: center;
padding-top: 50px;
color: white;

}
#num,#num1,#num2,#num3{
    color: white;
    font-size: 35px;
}
#k-im{
    margin-top: 10px;
    animation:fadeInUp ;/* referring directly to the animation's @keyframe declaration */
    animation-duration: 8s;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    /* border: 2px solid green; */
height: 200px;
}
.animate__animated.fadeInUp {
    --animate-duration: 5s;
  }
  
  /* This changes all the animations globally */
  :root {
    --animate-duration: 800ms;
    --animate-delay: 0.9s;
  }
@media (max-width:768px) {
    #k-im{
        height: 480px;
        background-repeat: no-repeat;
    }
    #div-p{
        padding-top: 20px;
    }
    #num,#num1,#num2,#num3{
        color: white;
        font-size: 35px;
    }
}
/*  */
.re{
    border: 2px solid red;
    /* display: flex; */
}
#ccc{
border: 1px solid red;
display: inline-block;
text-align: center;
padding: 40px;
font-family: play;
}
#kh{
    /* border: 2px solid red; */
    /* height: 500px; */
    /* background: url("ra\ \(2\).png"); */
}
.navbar-nav{
    /* margin-top: -30px; */
}
.container{
    margin-top: 60px;
    /* border: 2px solid red; */
    
    /* background:  #323769; */
    
    border-radius: 6px;
  
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  }
  .container .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .container .content .left-side{
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    position: relative;
  }
  .content .left-side::before{
    content: '';
    position: absolute;
    height: 70%;
    width: 2px;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    background: #afafb6;
  }
  .content .left-side .details{
    margin: 14px;
    text-align: center;
  }
  .content .left-side .details i{
    font-size: 30px;
    color:  #4f5597;
    margin-bottom: 10px;
  }
  .content .left-side .details .topic{
    font-size: 18px;
    font-weight: 500;
  }
  .content .left-side .details .text-one,
  .content .left-side .details .text-two{
    font-size: 14px;
    color: #484848;
  }
  .container .content .right-side{
    width: 75%;
    margin-left: 75px;
  }
  .content .right-side .topic-text{
    font-size: 23px;
    font-weight: 600;
    color: #4f5597;
  }
  .right-side .input-box{
    height: 50px;
    width: 100%;
    margin: 12px 0;
  }
  .right-side .input-box input,
  .right-side .input-box textarea{
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    background: #F0F1F8;
    border-radius: 6px;
    padding: 0 15px;
    resize: none;
  }
  .right-side .message-box{
    min-height: 110px;
  }
  .right-side .input-box textarea{
    padding-top: 6px;
  }
  .right-side .button{
    display: inline-block;
    margin-top: 12px;
  }
  .right-side .button input[type="button"]{
    color: #fff;
    font-size: 18px;
    outline: none;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    background: #4f5597;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .button input[type="button"]:hover{
    background:  #4f5597;
  }
  @media (max-width: 950px) {
    .container{
      width: 90%;
      padding: 30px 40px 40px 35px ;
    }
    .container .content .right-side{
     width: 75%;
     margin-left: 55px;
  }
  }
  @media (max-width: 820px) {
    .container{
      margin: 40px 0;
      height: 100%;
    }
    .container .content{
      flex-direction: column-reverse;
    }
   .container .content .left-side{
     width: 100%;
     flex-direction: row;
     margin-top: 40px;
     justify-content: center;
     flex-wrap: wrap;
   }
   .container .content .left-side::before{
     display: none;
   }
   .container .content .right-side{
     width: 100%;
     margin-left: 0;
   }
  }