*{
    margin: 0px;
    padding: 0px;
}
#navbar{box-shadow: 0px 2px 10px black;background-color: white;}
#h1-logo{text-decoration: none;color: #991E21;font-weight: 600;}
#ul li a::after{
    content: "";
    position: absolute;
    background-color:#991E21 ;
    height: 3px;
    width: 0;
    left: 0;
    bottom: -1px;
    transition: 0.3s;
}
#btn-close{color: black;}
#ul li a{
    color:#991E21;position: relative;padding: 10px 14px;font-weight: 500;font-size: 15px;
}
#ul li a:hover::after{
    width: 100%;  
}
#cert-ver{
  position: relative;
}
#drop-1{
  width: 200px;
  height: 60px;
}
#drop-1 li a{
  padding: 2px 0px;
  text-decoration: none;
}
#cert-ver #drop-1{
  display: none;
  position: absolute;
  background-color: white;
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
margin-left: 10px;
}
#cert-ver:hover #drop-1{
  display: block;
}
#login-back{
  display: flex;
  justify-content: space-evenly;
}
#login-button{
    background-color: #991E21;
    width: 80px;
    border: none;
    border-radius: 50px;
    height: 40px;
    transition: all 0.5s;
}
#login-button a{
    text-decoration: none;
    color: white;
}
#login-button:hover{
    opacity: 0.9;
}
#btnT i {
    color: #991E21 !important;
    font-size: 1.5rem;
}
#register-button{
    background-color: #991E21;
    width: 90px;
    border: none;
    border-radius: 50px;
    height: 40px;
    transition: all 0.5s;
    margin-left: 1px;
    display: none;
}
#register-button a{
    text-decoration: none;
    color: white;
}
#register-button:hover{
    opacity: 0.9;
}


/* Home Page Styling......... */

#home-cont1-col1 h1{
    font-size: 60px;
}
#btn-service,#btn-contact {
 width: 9em;
 margin-top: 30px;
 height: 3em;
 border-radius: 30em;
 font-size: 15px;
 font-family: inherit;
 border: none;
 position: relative;
 overflow: hidden;
 z-index: 1;
 box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

#btn-service::before {
 content: '';
 width: 0;
 height: 3em;
 border-radius: 30em;
 position: absolute;
 top: 0;
 left: 0;
 background-image: linear-gradient(to right, #991E21 0%, #7c321c 100%);
 transition: .5s ease;
 display: block;
 z-index: -1;
}
#btn-contact::before {
 content: '';
 width: 0;
 height: 3em;
 border-radius: 30em;
 position: absolute;
 top: 0;
 left: 0;
 background-image: linear-gradient(to right, #991E21 0%, #7c321c 100%);
 transition: .5s ease;
 display: block;
 z-index: -1;
}

#btn-service:hover::before {
 width: 9em;
}
#btn-contact:hover::before {
 width: 9em;
}
#btn-service a{
    text-decoration: none;
    color: black;
    transition: all 0.5s;
}
#btn-contact a{
    text-decoration: none;
    color: black;
    transition: all 0.5s;
}
#btn-service:hover a{
    color: white;
}
#btn-contact:hover a{
    color: white;
}
#home-cont1-col1 p{
    font-size: 15px;
    width: 50%;
    margin-top: 30px;
    font-family: montserrat;
}



#home-cont2-row2 h2{text-align: center;}
#home-cont2-row2 p{text-align: center;}

/* icons */

#icon{
    display: flex;
    width: 40%;
    justify-content: space-around;
}
.facebook{
    width: 30px;
    height: 30px;
    border: 1px solid gray;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
.facebook:hover{
    background-color: #991E21;
    color: white;
    cursor: pointer;
}
.instagram{
    width: 30px;
    height: 30px;
    border: 1px solid gray;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
.instagram:hover{
    background-color: #991E21;
    color: white;
    cursor: pointer;
}
.youtube{
    width: 30px;
    height: 30px;
    border: 1px solid gray;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
.youtube:hover{
    background-color: #991E21;
    color: white;
    cursor: pointer;
}
.tiktok{
    width: 30px;
    height: 30px;
    border: 1px solid gray;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
.tiktok:hover{
    background-color: #991E21;
    color: white;
    cursor: pointer;
}

/* Container 2 of home page */

#home-services-heading p{
    color: #991E21;
    font-family: Dosis,sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}
#home-services-heading h2{
    color: black;
    font-family: Dosis,sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

/* Web Development */
#web-development{
    display: flex;
    align-items: center;
    justify-content: center;
}

#web-div{
    width: 90%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 330px;
    border-radius: 10px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

#web-img{
    width: 90%;
}
#web-img img{
    width: 40px;
}
#web-head{
    width: 90%;
    height: 15%;
}
#web-head h4{
    font-family: Dosis,sans-serif;
    font-weight: 700;
    padding: 10px 0px;
}
#web-btn{width:90%}
/* From Uiverse.io by satyamchaudharydev */ 
.web-button {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color:#991E21;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff;
  gap: 10px;
  font-weight: bold;
  border: 3px solid #ffffff4d;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.web-button a{color: white;text-decoration: none;}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.web-button:hover {
  transform: scale(1.05);
  border-color: #fff9;
}

.web-button:hover .icon {
  transform: translate(4px);
}

.web-button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.web-button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

/* Graphic Design */

#graphic-design{
    display: flex;
    align-items: center;
    justify-content: center;
}

#graphic-div{
    width: 90%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 330px;
    border-radius: 10px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

#graphic-img{
    width: 90%;
}
#graphic-img img{
    width: 40px;
}
#graphic-head{
    width: 90%;
    height: 15%;
}
#graphic-head h4{
    font-family: Dosis,sans-serif;
    font-weight: 700;
    padding: 10px 0px;
}
#graphic-btn{width:90%}
/* From Uiverse.io by satyamchaudharydev */ 
.graphic-button {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color:#991E21;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff;
  gap: 10px;
  font-weight: bold;
  border: 3px solid #ffffff4d;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.graphic-button a{color: white;text-decoration: none;}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.graphic-button:hover {
  transform: scale(1.05);
  border-color: #fff9;
}

.graphic-button:hover .icon {
  transform: translate(4px);
}

.graphic-button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.graphic-button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}


/* Software Engineering */

#software-engineering{
    display: flex;
    align-items: center;
    justify-content: center;
}

#software-div{
    width: 90%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 330px;
    border-radius: 10px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

#software-img{
    width: 90%;
}
#software-img img{
    width: 40px;
}
#software-head{
    width: 90%;
    height: 15%;
}
#software-head h4{
    font-family: Dosis,sans-serif;
    font-weight: 700;
    padding: 10px 0px;
}
#software-btn{width:90%}
/* From Uiverse.io by satyamchaudharydev */ 
.software-button {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color:#991E21;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff;
  gap: 10px;
  font-weight: bold;
  border: 3px solid #ffffff4d;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.software-button a{color: white;text-decoration: none;}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.software-button:hover {
  transform: scale(1.05);
  border-color: #fff9;
}

.software-button:hover .icon {
  transform: translate(4px);
}

.software-button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.software-button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}


/* Game Development */

#game-development{
    display: flex;
    align-items: center;
    justify-content: center;
}

#game-div{
    width: 90%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 330px;
    border-radius: 10px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

#game-img{
    width: 90%;
}
#game-img img{
    width: 40px;
}
#game-head{
    width: 90%;
    height: 15%;
}
#game-head h4{
    font-family: Dosis,sans-serif;
    font-weight: 700;
    padding: 10px 0px;
}
#game-btn{width:90%}
/* From Uiverse.io by satyamchaudharydev */ 
.game-button {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color:#991E21;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff;
  gap: 10px;
  font-weight: bold;
  border: 3px solid #ffffff4d;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.game-button a{color: white;text-decoration: none;}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.game-button:hover {
  transform: scale(1.05);
  border-color: #fff9;
}

.game-button:hover .icon {
  transform: translate(4px);
}

.game-button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.game-button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}


/* Android APplication */

#android-app{
    display: flex;
    align-items: center;
    justify-content: center;
}

#android-div{
    width: 90%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 330px;
    border-radius: 10px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

#android-img{
    width: 90%;
}
#android-img img{
    width: 40px;
}
#android-head{
    width: 90%;
    height: 15%;
}
#android-head h4{
    font-family: Dosis,sans-serif;
    font-weight: 700;
    padding: 10px 0px;
}
#android-btn{width:90%}
/* From Uiverse.io by satyamchaudharydev */ 
.android-button {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color:#991E21;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff;
  gap: 10px;
  font-weight: bold;
  border: 3px solid #ffffff4d;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.android-button a{color: white;text-decoration: none;}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.android-button:hover {
  transform: scale(1.05);
  border-color: #fff9;
}

.android-button:hover .icon {
  transform: translate(4px);
}

.android-button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.android-button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}


/* Dit*/

#dit-app{
    display: flex;
    align-items: center;
    justify-content: center;
}

#dit-div{
    width: 90%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 330px;
    border-radius: 10px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

#dit-img{
    width: 90%;
}
#dit-img img{
    width: 40px;
}
#dit-head{
    width: 90%;
    height: 20%;
}
#dit-head h4{
    font-family: Dosis,sans-serif;
    font-weight: 700;
    padding: 10px 0px;
}
#dit-btn{width:90%}
/* From Uiverse.io by satyamchaudharydev */ 
.dit-button {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color:#991E21;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff;
  gap: 10px;
  font-weight: bold;
  border: 3px solid #ffffff4d;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.dit-button a{color: white;text-decoration: none;}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.dit-button:hover {
  transform: scale(1.05);
  border-color: #fff9;
}

.dit-button:hover .icon {
  transform: translate(4px);
}

.dit-button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.dit-button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}


#load-btn-row{
    display: flex;
    align-items: center;
    justify-content: center;
}
#load-btn{
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* From Uiverse.io by biswacpcode */ 
#load-button {
  color: white;
  text-decoration: none;
  font-size: 25px;
  border: none;
  background: none;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}
#load-button a{text-decoration: none;color: black;}
#load-button::before {
  margin-left: auto;
}

#load-button::after, #load-button::before {
  content: '';
  width: 0%;
  height: 2px;
  background: #991E21;
  display: block;
  transition: 0.5s;
}

#load-button:hover::after, #load-button:hover::before {
  width: 100%;
}




/* Container 3 */

#home-cont-fluid-3{
    background: #F7F8F8;
}
#about-our-academy{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 400px;
}
#about-our-academy h6{
    color: #991E21;
    font-family: Dosis,sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}
#about-our-academy h1{
    color: black;
    font-family: Dosis,sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 38px;
}
#about-our-academy button{
  width: 170px;
  height: 40px;
  background-color: white;
  transition: all 0.5s;
  border:none;
  outline:none;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
#about-our-academy button a{
  color: black;
  text-decoration: none;
  transition: all 0.5s;
}
#about-our-academy button:hover{
  background-color: #991E21;
}
#about-our-academy button:hover a{
  color:white
}
#our-academy-col2 img{
  width: 90%;
}


/* Container 4 of home page why choose cbla */




#why-choosex-cbla{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 400px;
}
#why-choosex-cbla h6{
    color: #991E21;
    font-family: Dosis,sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}
#why-choosex-cbla h1{
    color: black;
    font-family: Dosis,sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 38px;
}
#choose-btn-back{
    display: flex;
}
#one-two{
  width: 300px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#three-four{
  width: 300px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#one-two button{
  width: 90%;
  height: 50px;
  border: none;
  outline: none;
  border-left:2px solid #991E21;
  border-radius: 5px;
  display: block;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

  background: linear-gradient(to right, #991E21 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}
#one-two button:hover{
  background-position: left bottom;
  color: white;
}


#three-four button{
  width: 90%;
  height: 50px;
  border: none;
  outline: none;
  border-left:2px solid #991E21;
  border-radius: 5px;
  display: block;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

  background: linear-gradient(to right, #991E21 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}
#three-four button:hover{
  background-position: left bottom;
  color: white;
}

#why-choose-col1 p{
  width: 76%;
}



/* Footer */
#footer{background-color: #991E21;background-image: url(../pic/dot-bg.png);}
#footer-section{display: flex;}
#footer-logo-info{
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 300px;
}
#footer-links{
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 240px;
}

#footer-address{
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 250px;
}

#footer-contact{
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 180px;  
}
#footer-logo-back h3{
  font-size: 22px;
  color: white;
}
#footer-para{height: 150px;color: white;}
#footer-social{
  height: 50px;
  display: flex;
  align-items: center;
}
.footer-icon{
  width: 70%;
  display: flex;
  justify-content: space-between;
}
#footer-link-heading{
  width: 50%;
}
#links-a{
  width: 50%
}
#footer-link-heading h3{
  font-size: 22px;
  color:white
}
#links-a p a{
  text-decoration: none;
  color: white;
}
#footer-add-heading h3{
  font-size: 22px;
  color:white
}
#address p{
  color: white;
}
#footer-contact-heading h3{
  font-size: 22px;
  color: white;
}
#footer-cont  p{
  color: white;
}
#facebook{
  width: 35px;
  height: 35px;
  border-radius: 10px;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#facebook i{color: #0866FF;}

#instagram{
  width: 35px;
  height: 35px;
  border-radius: 10px;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#instagram i{color: #E1306C;}


#youtube{
  width: 35px;
  height: 35px;
  border-radius: 10px;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#youtube i{color: #FF0000;}


#whatsapp{
  width: 35px;
  height: 35px;
  border-radius: 10px;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#whatsapp i{color: #25D366;}

#extra-footer{
  background-color: #7A181A;
}

#extra-para a{
  text-decoration: none;
  color: white;
}
#extra-para{
  color: white;
  background-color: #7A181A;
}

/* Courses PAge Styling............ */


#course-cont1-row1 h2{
    text-align: center;
    color: #991E21;
}
#course-cont1-row1 p{
    text-align: center;
}


#software-eng-course-back{
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
#soft-img{
    width: 100%;
    height: 220px;
position: relative;
    overflow: hidden;
}
#soft-img img{
    transition: all  0.5s;
    position: absolute;
    width: 100%;
}
#software-eng-course-back:hover #soft-img img{
    transform: scale(1.2);
}
#soft-head{
    width: 90%;
    height: 40px;
    margin-top: 10px;
}
#soft-head h2{
    font-size: 24px;
}
#soft-para{
    width: 90%;
    font-size: 14px;
}
#soft-btn{
    width: 90%;
    margin-top: 10px;
}


/* From Uiverse.io by satyamchaudharydev */ 
.btn-soft {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  gap: 10px;
  font-weight: bold;
  border: 3px solid black;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.btn-soft a{
    color: black;
    text-decoration: none;
}
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.btn-soft:hover {
  transform: scale(1.05);
  border-color: #991E21;
  color: #991E21;
}
.btn-soft:hover a{
  color: #991E21;
}


.btn-soft:hover .icon {
  transform: translate(4px);
}

.btn-soft:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.btn-soft::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}



/* Android */

#android-app-course-back{
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
#and-img{
    width: 100%;
    height: 220px;position: relative;
    overflow: hidden;
}
#and-img img{
    transition: all  0.5s;
    position: absolute;
    width: 100%;
}
#android-app-course-back:hover #and-img img{
    transform: scale(1.2);
}
#and-head{
    width: 90%;
    height: 40px;
    margin-top: 10px;
}
#and-head h2{
    font-size: 24px;
}
#and-para{
    width: 90%;
    font-size: 14px;
}
#and-btn{
    width: 90%;
    margin-top: 10px;
}



/* From Uiverse.io by satyamchaudharydev */ 
.btn-and {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  gap: 10px;
  font-weight: bold;
  border: 3px solid black;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.btn-and a{
    color: black;
    text-decoration: none;
}
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.btn-and:hover {
  transform: scale(1.05);
  border-color: #991E21;
  color: #991E21;
}
.btn-and:hover a{
  color: #991E21;
}


.btn-and:hover .icon {
  transform: translate(4px);
}

.btn-and:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.btn-and::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}


/* WEb Development */

#web-develop-course-back{
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
#web-img2{
    width: 100%;
    height: 220px;position: relative;
    overflow: hidden;
}
#web-img2 img{
    transition: all  0.5s;
    position: absolute;
    width: 100%;
}
#web-develop-course-back:hover #web-img2 img{
    transform: scale(1.2);
}
#web-head2{
    width: 90%;
    height: 40px;
    margin-top: 10px;
}
#web-head2 h2{
    font-size: 24px;
}
#web-para2{
    width: 90%;
    font-size: 14px;
}
#web-btn2{
    width: 90%;
    margin-top: 10px;
}


/* From Uiverse.io by satyamchaudharydev */ 
.btn-web {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  gap: 10px;
  font-weight: bold;
  border: 3px solid black;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.btn-web a{
    color: black;
    text-decoration: none;
}
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.btn-web:hover {
  transform: scale(1.05);
  border-color: #991E21;
  color: #991E21;
}
.btn-web:hover a{
  color: #991E21;
}


.btn-web:hover .icon {
  transform: translate(4px);
}

.btn-web:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.btn-web::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}




/* Game Development */

#game-develop-course-back{
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
#game-img2{
    width: 100%;
    height: 220px;position: relative;
    overflow: hidden;
}
#game-img2 img{
    transition: all  0.5s;
    position: absolute;
    width: 100%;
}
#game-develop-course-back:hover #game-img2 img{
    transform: scale(1.2);
}
#game-head2{
    width: 90%;
    height: 40px;
    margin-top: 10px;
}
#game-head2 h2{
    font-size: 24px;
}
#game-para2{
    width: 90%;
    font-size: 14px;
}
#game-btn2{
    width: 90%;
    margin-top: 10px;
}

/* From Uiverse.io by satyamchaudharydev */ 
.btn-game {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  gap: 10px;
  font-weight: bold;
  border: 3px solid black;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.btn-game a{
    color: black;
    text-decoration: none;
}
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.btn-game:hover {
  transform: scale(1.05);
  border-color: #991E21;
  color: #991E21;
}
.btn-game:hover a{
  color: #991E21;
}


.btn-game:hover .icon {
  transform: translate(4px);
}

.btn-game:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.btn-game::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

/* DATABASE */

#database-course-back{
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
#database-img{
    width: 100%;
    height: 220px;position: relative;
    overflow: hidden;
}
#database-img img{
    transition: all  0.5s;
    position: absolute;
    width: 100%;
}
#database-course-back:hover #database-img img{
    transform: scale(1.2);
}
#database-head{
    width: 90%;
    height: 40px;
    margin-top: 10px;
}
#database-head h2{
    font-size: 24px;
}
#database-para{
    width: 90%;
    font-size: 14px;
}
#database-btn{
    width: 90%;
    margin-top: 10px;
}




/* From Uiverse.io by satyamchaudharydev */ 
.btn-database {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  gap: 10px;
  font-weight: bold;
  border: 3px solid black;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.btn-database a{
    color: black;
    text-decoration: none;
}
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.btn-database:hover {
  transform: scale(1.05);
  border-color: #991E21;
  color: #991E21;
}
.btn-database:hover a{
  color: #991E21;
}


.btn-database:hover .icon {
  transform: translate(4px);
}

.btn-database:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.btn-database::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}



/* Programing Languages */

#pro-lang-course-back{
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
#pro-img{
    width: 100%;
    height: 220px;position: relative;
    overflow: hidden;
}
#pro-img img{
    transition: all  0.5s;
    position: absolute;
    width: 100%;
}
#pro-lang-course-back:hover #pro-img img{
    transform: scale(1.2);
}
#pro-head{
    width: 90%;
    height: 40px;
    margin-top: 10px;
}
#pro-head h2{
    font-size: 24px;
}
#pro-para{
    width: 90%;
    font-size: 14px;
}
#pro-btn{
    width: 90%;
    margin-top: 10px;
}




/* From Uiverse.io by satyamchaudharydev */ 
.btn-pro {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  gap: 10px;
  font-weight: bold;
  border: 3px solid black;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.btn-pro a{
    color: black;
    text-decoration: none;
}
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.btn-pro:hover {
  transform: scale(1.05);
  border-color: #991E21;
  color: #991E21;
}
.btn-pro:hover a{
  color: #991E21;
}


.btn-pro:hover .icon {
  transform: translate(4px);
}

.btn-pro:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.btn-pro::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}




/* Graphic Design */

#graphic-design-course-back{
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
#graphic-img2{
    width: 100%;
    height: 220px;position: relative;
    overflow: hidden;
}
#graphic-img2 img{
    transition: all  0.5s;
    position: absolute;
    width: 100%;
}
#graphic-design-course-back:hover #graphic-img2 img{
    transform: scale(1.2);
}
#graphic-head2{
    width: 90%;
    height: 40px;
    margin-top: 10px;
}
#graphic-head2 h2{
    font-size: 24px;
}
#graphic-para2{
    width: 90%;
    font-size: 14px;
}
#graphic-btn2{
    width: 90%;
    margin-top: 10px;
}




/* From Uiverse.io by satyamchaudharydev */ 
.btn-graphic {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  gap: 10px;
  font-weight: bold;
  border: 3px solid black;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.btn-graphic a{
    color: black;
    text-decoration: none;
}
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.btn-graphic:hover {
  transform: scale(1.05);
  border-color: #991E21;
  color: #991E21;
}
.btn-graphic:hover a{
  color: #991E21;
}


.btn-graphic:hover .icon {
  transform: translate(4px);
}

.btn-graphic:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.btn-graphic::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}


/* video edit */

#video-edit-course-back{
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
#video-img{
    width: 100%;
    height: 220px;position: relative;
    overflow: hidden;
}
#video-img img{
    transition: all  0.5s;
    position: absolute;
    width: 100%;
}
#video-edit-course-back:hover #video-img img{
    transform: scale(1.2);
}
#video-head{
    width: 90%;
    height: 40px;
    margin-top: 10px;
}
#video-head h2{
    font-size: 24px;
}
#video-para{
    width: 90%;
    font-size: 14px;
}
#video-btn{
    width: 90%;
    margin-top: 10px;
}




/* From Uiverse.io by satyamchaudharydev */ 
.btn-video {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  gap: 10px;
  font-weight: bold;
  border: 3px solid black;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.btn-video a{
    color: black;
    text-decoration: none;
}
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.btn-video:hover {
  transform: scale(1.05);
  border-color: #991E21;
  color: #991E21;
}
.btn-video:hover a{
  color: #991E21;
}


.btn-video:hover .icon {
  transform: translate(4px);
}

.btn-video:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.btn-video::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

/*Dit */

#Dit-course-back{
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
#Dit-img{
    width: 100%;
    height: 220px;position: relative;
    overflow: hidden;
}
#Dit-img img{
    transition: all  0.5s;
    position: absolute;
    width: 100%;
}
#Dit-course-back:hover #Dit-img img{
    transform: scale(1.2);
}
#Dit-head{
    width: 90%;
    height: 40px;
    margin-top: 10px;
}
#Dit-head h2{
    font-size: 24px;
}
#Dit-para{
    width: 90%;
    font-size: 14px;
    margin-top: 20px;
}
#Dit-btn{
    width: 90%;
    margin-top: 10px;
}




/* From Uiverse.io by satyamchaudharydev */ 
.btn-Dit {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  gap: 10px;
  font-weight: bold;
  border: 3px solid black;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.btn-Dit a{
    color: black;
    text-decoration: none;
}
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.btn-Dit:hover {
  transform: scale(1.05);
  border-color: #991E21;
  color: #991E21;
}
.btn-Dit:hover a{
  color: #991E21;
}


.btn-Dit:hover .icon {
  transform: translate(4px);
}

.btn-Dit:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.btn-Dit::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

/*cit */

#cit-course-back{
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
#cit-img{
    width: 100%;
    height: 220px;position: relative;
    overflow: hidden;
}
#cit-img img{
    transition: all  0.5s;
    position: absolute;
    width: 100%;
}
#cit-course-back:hover #cit-img img{
    transform: scale(1.2);
}
#cit-head{
    width: 90%;
    height: 40px;
    margin-top: 10px;
}
#cit-head h2{
    font-size: 24px;
}
#cit-para{
    width: 90%;
    font-size: 14px;
    margin-top: 20px;
}
#cit-btn{
    width: 90%;
    margin-top: 10px;
}




/* From Uiverse.io by satyamchaudharydev */ 
.btn-cit {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  gap: 10px;
  font-weight: bold;
  border: 3px solid black;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.btn-cit a{
    color: black;
    text-decoration: none;
}
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.btn-cit:hover {
  transform: scale(1.05);
  border-color: #991E21;
  color: #991E21;
}
.btn-cit:hover a{
  color: #991E21;
}


.btn-cit:hover .icon {
  transform: translate(4px);
}

.btn-cit:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.btn-cit::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}



/*Ms Office */

#Ms-course-back{
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
#Ms-img{
    width: 100%;
    height: 220px;position: relative;
    overflow: hidden;
}
#Ms-img img{
    transition: all  0.5s;
    position: absolute;
    width: 100%;
}
#Ms-course-back:hover #Ms-img img{
    transform: scale(1.2);
}
#Ms-head{
    width: 90%;
    height: 40px;
    margin-top: 10px;
}
#Ms-head h2{
    font-size: 24px;
}
#Ms-para{
    width: 90%;
    font-size: 14px;
    margin-top: 20px;
}
#Ms-btn{
    width: 90%;
    margin-top: 10px;
}




/* From Uiverse.io by satyamchaudharydev */ 
.btn-Ms {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  gap: 10px;
  font-weight: bold;
  border: 3px solid black;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.btn-Ms a{
    color: black;
    text-decoration: none;
}
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.btn-Ms:hover {
  transform: scale(1.05);
  border-color: #991E21;
  color: #991E21;
}
.btn-Ms:hover a{
  color: #991E21;
}


.btn-Ms:hover .icon {
  transform: translate(4px);
}

.btn-Ms:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.btn-Ms::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}



/* Freelancing */

#Freelancing-course-back{
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 100%;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
}
#Freelancing-img{
    width: 100%;
    height: 220px;
    position: relative;
    overflow: hidden;
}
#Freelancing-img img{
    transition: all  0.5s;
    position: absolute;
    width: 100%;
}
#Freelancing-course-back:hover #Freelancing-img img{
    transform: scale(1.2);
}
#Freelancing-head{
    width: 90%;
    height: 40px;
    margin-top: 10px;
}
#Freelancing-head h2{
    font-size: 24px;
}
#Freelancing-para{
    width: 90%;
    font-size: 14px;
}
#Freelancing-btn{
    width: 90%;
    margin-top: 10px;
}




/* From Uiverse.io by satyamchaudharydev */ 
.btn-Freelancing {
  position: relative;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background-color: transparent;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  gap: 10px;
  font-weight: bold;
  border: 3px solid black;
  outline: none;
  overflow: hidden;
  font-size: 15px;
  cursor: pointer;
}
.btn-Freelancing a{
    color: black;
    text-decoration: none;
}
.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.btn-Freelancing:hover {
  transform: scale(1.05);
  border-color: #991E21;
  color: #991E21;
}
.btn-Freelancing:hover a{
  color: #991E21;
}


.btn-Freelancing:hover .icon {
  transform: translate(4px);
}

.btn-Freelancing:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.btn-Freelancing::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}





/* CERTIFICATE & VERIFICATION */

#certi-cont1-row1 h2{
    color: #991E21;
}

#certi-cont1-row2{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#special-card-back{
    width:400px;
    height:450px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
#head-card{
    width: 80%
}
#head-card h3{text-align: center;color:#991E21}

#certi-input{
    position: relative;
}
   #label-id{
    position: absolute;
    left: 10px;
    top:10px;
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s;
  }
  #student-id:focus + #label-id,
  #student-id:not(:placeholder-shown) + #label-id{
    top: -10px;
    left:7px;
    font-size: 12px;
    color: #991E21;
  }
#body-card{
    width:80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#student-id{
    width: 300px;
    height:40px;
    color: #991E21;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0px 10px;
    border-bottom: 1px solid #991E21;
}
#body-card select{
    width:300px;
    height:40px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #991E21;
    outline: none;
    color: #991E21;
    margin-top: 40px;
}
#btn-back{position: relative;width: 80%;height: 50px;}
#btn-back a {
	position: absolute;
	padding: 10px 10px;
	box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
	color: #991E21;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 4px;
	font: 600 20px consolas;
	overflow: hidden;

}

#btn-back a span:nth-child(1) {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, #fff, #991E21);
	animation: animate1 2s linear infinite;
}

@keyframes animate1 {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

#btn-back a span:nth-child(2) {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 3px;
	background: linear-gradient(to bottom, #fff, #991E21);
	animation: animate2 2s linear infinite;
	animation-delay: 1s;
}
@keyframes animate2 {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(100%);
	}
}

#btn-back a span:nth-child(3) {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to left, #fff, #991E21);
	animation: animate3 2s linear infinite;
}

@keyframes animate3 {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}

#btn-back a span:nth-child(4) {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 3px;
	background: linear-gradient(to top, #171618, #991E21);
	animation: animate4 2s linear infinite;
	animation-delay: 1s;
}

@keyframes animate4 {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(-100%);
	}
}




/* Login page */

#login-heading h2{
    text-align: center;
    color: #991E21;
    margin-top: 50px;
}
#login-col1{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#login-screen{
    width: 400px;
    height: 400px;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
#login-screen form{
    height: 70%;
}
#login-screen h2{color: #991E21;}
#inputs-back{
    width: 350px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: space-between;
}
#username-inp{
    width:100%;
    height:40px;
    background-color: transparent;
    border: none;
    outline:none;
    border-bottom: 1px solid #991E21;
    color:#991E21;
    padding: 0px 30px;
}
#password-inp{
    width:100%;
    height:40px;
    background-color: transparent;
    border: none;
    outline:none;
    border-bottom: 1px solid #991E21;
    color:#991E21;
    padding: 0px 30px;
}
.user{position: absolute;left: 0px;top: 10px;}
.cnic{position: absolute;left: 0px;top: 10px;}
.lock{position: absolute;left: 0px;top: 10px;}
  label {
    position: absolute;
    left: 30px;
    top: 10px;
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s;
  }
  input:focus + label,
  input:not(:placeholder-shown) + label {
    top: -10px;
    left:20px;
    font-size: 12px;
    color: #991E21;
  }

#login-btn{
    width: 100%;
    background-color: white;
    color: black;
    margin-top: 40px;
    border: none;
    padding: 12px 0;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#login-btn:hover{
    background-color: #991E21;
    color:white
}

/* Software engineering page styling */

#software-detail-row1 h2{text-align: center;font-family: dosis;font-weight: 600;color: #991E21;}
#software-detail-heading h2{
  font-family: montserrat;
  font-weight: 600;
  margin-top: 20px;
}
#software-detail-row1 p{
  text-align: center;
}
#soft-img-back{
  display: flex;
}
#soft-img1{width: 50%;}
#soft-img2{width: 50%;display: flex;align-items: center;}
#soft-img2 img{
  width: 400px;
}
#nav-home ul{
  margin-top: 20px;
  margin-left: 30px;
}
#nav-profile ul{
  margin-top: 20px;
  margin-left: 30px;
}
#soft-para-back{
  width: 50%;
}


/* Android page styling */

#android-detail-row1 h2{text-align: center;font-family: dosis;font-weight: 600;color: #991E21;}
#android-detail-heading h2{
  font-family: montserrat;
  font-weight: 600;
  margin-top: 20px;
}
#android-detail-row1 p{
  text-align: center;
}
#android-img-back{
  display: flex;
}
#android-img1{width: 50%;}
#android-img2{width: 50%;display: flex;align-items: center;justify-content: center;}
#android-img2 img{
  width: 300px;
}
#android-img1 img{
  width: 700px;
}
#nav-contact ul{
  margin-top: 20px;
  margin-left: 30px;
}
#nav-disabled ul{
  margin-top: 20px;
  margin-left: 30px;
}
#android-para-back{
  width: 50%;
}


/* web styling */

#web-detail-row1 h2{text-align: center;font-family: dosis;font-weight: 600;color: #991E21;}
#web-detail-heading h2{
  font-family: montserrat;
  font-weight: 600;
  margin-top: 20px;
}
#web-detail-row1 p{
  text-align: center;
}
#web-img-back{
  display: flex;
}
#webs-img1{width: 50%;}
#webs-img2{width: 50%;display: flex;align-items: center;justify-content: center;}
#webs-img2 img{
  width: 400px;
}
#webs-img1 img{
  width: 700px;
}

#web-para-back{
  width: 50%;
}


/* Game styling */

#game-detail-row1 h2{text-align: center;font-family: dosis;font-weight: 600;color: #991E21;}
#game-detail-heading h2{
  font-family: montserrat;
  font-weight: 600;
  margin-top: 20px;
}
#game-detail-row1 p{
  text-align: center;
}
#game-img-back{
  display: flex;
}
#games-img1{width: 50%;}
#games-img2{width: 50%;display: flex;align-items: center;justify-content: center;}
#games-img2 img{
  width: 400px;
}
#games-img1 img{
  width: 700px;
}

#game-para-back{
  width: 50%;
}



/* program styling */

#program-detail-row1 h2{text-align: center;font-family: dosis;font-weight: 600;color: #991E21;}
#program-detail-heading h2{
  font-family: montserrat;
  font-weight: 600;
  margin-top: 20px;
}
#program-detail-row1 p{
  text-align: center;
}
#program-img-back{
  display: flex;  
}
#program-img1{width: 50%;}
#program-img2{width: 50%;display: flex;align-items: center;justify-content: center;}
#program-img2 img{
  width: 300px;
}
#program-img1 img{
  width: 500px;
}

#program-para-back{
  width: 50%;
}


/* data styling */

#data-detail-row1 h2{text-align: center;font-family: dosis;font-weight: 600;color: #991E21;}
#data-detail-heading h2{
  font-family: montserrat;
  font-weight: 600;
  margin-top: 20px;
}
#data-detail-row1 p{
  text-align: center;
}
#data-img-back{
  display: flex;  
}
#data-img1{width: 50%;}
#data-img2{width: 50%;display: flex;align-items: center;justify-content: center;}
#data-img2 img{
  width: 300px;
}
#data-img1 img{
  width: 500px;
}

#data-para-back{
  width: 50%;
}


/* graphic styling */

#graphic-detail-row1 h2{text-align: center;font-family: dosis;font-weight: 600;color: #991E21;}
#graphic-detail-heading h2{
  font-family: montserrat;
  font-weight: 600;
  margin-top: 20px;
}
#graphic-detail-row1 p{
  text-align: center;
}
#graphic-img-back{
  display: flex;  
}
#graphics-img1{width: 50%;}
#graphics-img2{width: 50%;display: flex;align-items: center;justify-content: center;}
#graphics-img2 img{
  width: 350px;
}
#graphics-img1 img{
  width: 600px;
}

#graphic-para-back{
  width: 50%;
}


/* video styling */

#video-detail-row1 h2{text-align: center;font-family: dosis;font-weight: 600;color: #991E21;}
#video-detail-heading h2{
  font-family: montserrat;
  font-weight: 600;
  margin-top: 20px;
}
#video-detail-row1 p{
  text-align: center;
}
#video-img-back{
  display: flex;  
}
#video-img1{width: 50%;}
#video-img2{width: 50%;display: flex;align-items: center;justify-content: center;}
#video-img2 img{
  width: 350px;
}
#video-img1 img{
  width: 600px;
}

#video-para-back{
  width: 50%;
}


/* dit styling */

#dit-detail-row1 h2{text-align: center;font-family: dosis;font-weight: 600;color: #991E21;}
#dit-detail-heading h2{
  font-family: montserrat;
  font-weight: 600;
  margin-top: 20px;
}
#dit-detail-row1 p{
  text-align: center;
}
#dit-img-back{
  display: flex;  
}
#dit-img1{width: 50%;}
#dit-img2{width: 50%;display: flex;align-items: center;justify-content: center;}
#dit-img2 img{
  width: 350px;
}
#dit-img1 img{
  width: 600px;
}

#dit-para-back{
  width: 50%;
}



/* cit styling */

#cit-detail-row1 h2{text-align: center;font-family: dosis;font-weight: 600;color: #991E21;}
#cit-detail-heading h2{
  font-family: montserrat;
  font-weight: 600;
  margin-top: 20px;
}
#cit-detail-row1 p{
  text-align: center;
}
#cit-img-back{
  display: flex;  
}
#cit-img1{width: 50%;}
#cit-img2{width: 50%;display: flex;align-items: center;justify-content: center;}
#cit-img2 img{
  width: 350px;
}
#cit-img1 img{
  width: 600px;
}

#cit-para-back{
  width: 50%;
}

/* microsoft styling */

#microsoft-detail-row1 h2{text-align: center;font-family: dosis;font-weight: 600;color: #991E21;}
#microsoft-detail-heading h2{
  font-family: montserrat;
  font-weight: 600;
  margin-top: 20px;
}
#microsoft-detail-row1 p{
  text-align: center;
}
#microsoft-img-back{
  display: flex;  
}
#microsoft-img1{width: 50%;}
#microsoft-img2{width: 50%;display: flex;align-items: center;justify-content: center;}
#microsoft-img2 img{
  width: 350px;
}
#microsoft-img1 img{
  width: 600px;
}

#microsoft-para-back{
  width: 50%;
}



/* freelancer styling */

#freelancer-detail-row1 h2{text-align: center;font-family: dosis;font-weight: 600;color: #991E21;}
#freelancer-detail-heading h2{
  font-family: montserrat;
  font-weight: 600;
  margin-top: 20px;
}
#freelancer-detail-row1 p{
  text-align: center;
}
#freelancer-img-back{
  display: flex;  
}
#freelancer-img1{width: 50%;}
#freelancer-img2{width: 50%;display: flex;align-items: center;justify-content: center;}
#freelancer-img2 img{
  width: 350px;
}
#freelancer-img1 img{
  width: 600px;
}

#freelancer-para-back{
  width: 50%;
}

/* About PAge Styling......... */

#key-features h2{
  text-align: center;
  font-family: dosis;
  font-weight: 700;
  color: #991E21;
}
#key-features p{
  text-align: center;
  font-family: montserrat;
}


#expert-inst-back{
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height:270px;
  border-radius: 20px;
  justify-content: space-around;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
#expert-inst-back h3{
  text-align: center;
  font-family: dosis;
  font-weight: 600;
}
#expert-inst-back img{
  width: 50px;            
}
#expert-para{
  width: 90%;
}
#expert-para p{
  text-align: center;
  font-family: montserrat;
}

#hand-on-back{
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height:270px;
  border-radius: 20px;
  justify-content: space-around;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
#hand-on-back h3{
  text-align: center;
  font-family: dosis;
  font-weight: 600;
}
#hand-on-back img{
  width: 50px;            
}
#hand-para{width: 90%;}
#hand-para p{
  text-align: center;
  font-family: montserrat;
}


#project-base-back{
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height:270px;
  border-radius: 20px;
  justify-content: space-around;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
#project-base-back h3{
  text-align: center;
  font-family: dosis;
  font-weight: 600;
}
#project-base-back img{
  width: 50px;            
}
#pro-para{width: 90%;}
#pro-para p{
  text-align: center;
  font-family: montserrat;
}





#indus-cert-back{
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height:270px;
  border-radius: 20px;
  justify-content: space-around;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
#indus-cert-back h3{
  text-align: center;
  font-family: dosis;
  font-weight: 600;
}
#indus-cert-back img{
  width: 50px;            
}
#indus-para{width: 90%;}
#indus-para p{
  text-align: center;
  font-family: montserrat;
}


#flex-learn-back{
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height:270px;
  border-radius: 20px;
  justify-content: space-around;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
#flex-learn-back h3{
  text-align: center;
  font-family: dosis;
  font-weight: 600;
}
#flex-learn-back img{
  width: 50px;            
}
#flex-para{width: 90%;}
#flex-para p{
  text-align: center;
  font-family: montserrat;
}



#career-supp-back{
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height:270px;
  border-radius: 20px;
  justify-content: space-around;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
#career-supp-back h3{
  text-align: center;
  font-family: dosis;
  font-weight: 600;
}
#career-supp-back img{
  width: 50px;            
}
#career-para{width: 90%;}
#career-para p{
  text-align: center;
  font-family: montserrat;
}



#collab-back{
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height:270px;
  border-radius: 20px;
  justify-content: space-around;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
#collab-back h3{
  text-align: center;
  font-family: dosis;
  font-weight: 600;
}
#collab-back img{
  width: 50px;            
}
#collab-para{width: 90%;}
#collab-para p{
  text-align: center;
  font-family: montserrat;
}


#compre-back{
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height:270px;
  border-radius: 20px;
  justify-content: space-around;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
#compre-back h3{
  text-align: center;
  font-family: dosis;
  font-weight: 600;
}
#compre-back img{
  width: 50px;            
}
#compre-para{width: 90%;}
#compre-para p{
  text-align: center;
  font-family: montserrat;
}

#working-headings p{
  font-family: dosis;
  font-weight: 700;
  color: #991E21;
  text-align: center;
  text-transform: uppercase;
}
#working-headings h2{
  font-family: dosis;
  font-weight: 700;
  text-align: center;
}


#discover{
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 320px ;
  justify-content: space-around;
}
#dis-img{width: 80%;}
#dis-head{width: 80%;}
#dis-head h3{
  font-weight: 600;
  font-family: dosis;
  font-size: 25px;
}
#dis-para{width: 80%;}
#dis-para p{
  font-family: montserrat;
}
#dis-img img{
  width: 70px;
}

#des-dev{
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 320px ;
  justify-content: space-around;
}
#des-img{width: 80%;}
#des-head{width: 80%;}
#des-head h3{
  font-weight: 600;
  font-family: dosis;
  font-size: 25px;
}
#des-para{width: 80%;}
#des-para p{
  font-family: montserrat;
}
#des-img img{
  width: 70px;
}

#install{
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 320px ;
  justify-content: space-around;
}
#install-img{width: 80%;}
#install-head{width: 80%;}
#install-head h3{
  font-weight: 600;
  font-family: dosis;
  font-size: 25px;
}
#install-para{width: 80%;}
#install-para p{
  font-family: montserrat;
}
#install-img img{
  width: 70px;
}

#course-project{
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 320px ;
  justify-content: space-around;
}
#cour-img{width: 80%;}
#cour-head{width: 80%;}
#cour-head h3{
  font-weight: 600;
  font-family: dosis;
  font-size: 25px;
}
#cour-para{width: 80%;}
#cour-para p{
  font-family: montserrat;
}
#cour-img img{
  width: 70px;
}

/* contact PAge Styling......... */

#cont-contact-back{
  background-image: url(../pic/dot-bg.png);
}
#let-talk-back p{
  text-transform: uppercase;
  text-align: center;
  font-family: dosis;
  font-weight: 700;
  color: #991E21;
}
#let-talk-back h2{
  text-align: center;
  font-family: dosis;
  font-weight: 700;
}
/* Name iniput */
#name-email-back{
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.name{
    width: 48%;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: space-between;
}
#name-inputs-contact{
    width:100%;
    height:40px;
    background-color: transparent;
    border: none;
    outline:none;
    border-bottom: 1px solid #991E21;
    color:#991E21;
    padding: 0px 30px;
}
.user{position: absolute;left: 0px;top: 10px;}
  #name-label {
    position: absolute;
    left: 30px;
    top: 10px;
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s;
  }
  #name-inputs-contact:focus + #name-label,
  #name-inputs-contact:not(:placeholder-shown) + #name-label {
    top: -10px;
    left:20px;
    font-size: 12px;
    color: #991E21;
  }

/* Email input */
.email{
    width: 48%;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: space-between;
}
#email-inputs-contact{
    width:100%;
    height:40px;
    background-color: transparent;
    border: none;
    outline:none;
    border-bottom: 1px solid #991E21;
    color:#991E21;
    padding: 0px 30px;
}
.envelope{position: absolute;left: 0px;top: 10px;}
  #email-label {
    position: absolute;
    left: 30px;
    top: 10px;
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s;
  }
  #email-inputs-contact:focus + #email-label,
  #email-inputs-contact:not(:placeholder-shown) + #email-label {
    top: -10px;
    left:20px;
    font-size: 12px;
    color: #991E21;
  }

#phone-sub-back{
  width: 100%;
  display: flex;
  justify-content: space-around;
}


/* phone input */
.phone{
    width: 48%;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: space-between;
}
#phone-inputs-contact{
    width:100%;
    height:40px;
    background-color: transparent;
    border: none;
    outline:none;
    border-bottom: 1px solid #991E21;
    color:#991E21;
    padding: 0px 30px;
}
.ph{position: absolute;left: 0px;top: 10px;}
  #phone-label {
    position: absolute;
    left: 30px;
    top: 10px;
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s;
  }
  #phone-inputs-contact:focus + #phone-label,
  #phone-inputs-contact:not(:placeholder-shown) + #phone-label {
    top: -10px;
    left:20px;
    font-size: 12px;
    color: #991E21;
  }
  

/* sub input */
.sub{
    width: 48%;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: space-between;
}
#sub-inputs-contact{
    width:100%;
    height:40px;
    background-color: transparent;
    border: none;
    outline:none;
    border-bottom: 1px solid #991E21;
    color:#991E21;
    padding: 0px 30px;
}
.text{position: absolute;left: 0px;top: 10px;}
  #sub-label {
    position: absolute;
    left: 30px;
    top: 10px;
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s;
  }
  #sub-inputs-contact:focus + #sub-label,
  #sub-inputs-contact:not(:placeholder-shown) + #sub-label {
    top: -10px;
    left:20px;
    font-size: 12px;
    color: #991E21;
  }  




#mess-back{
  width: 100%;
  display: flex;
  justify-content: space-around;
}


/* Message input */
.messa{
    width: 98%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: space-between;
}
#mess-inputs-contact{
    width:100%;
    height:120px;
    background-color: transparent;
    border: none;
    outline:none;
    border-bottom: 1px solid #991E21;
    color:#991E21;
    padding: 0px 30px;
}
.area{position: absolute;left: 0px;top: 10px;}
  #mess-label {
    position: absolute;
    left: 30px;
    top: 10px;
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s;
  }
  #mess-inputs-contact:focus + #mess-label,
  #mess-inputs-contact:not(:placeholder-shown) + #mess-label {
    top: -15px;
    left:20px;
    font-size: 12px;
    color: #991E21;
  }
  #submit-back{
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
}

#btn-send{
  width: 200px;
  height: 50px;
  background-color: #991E21;
  border: none;
  border-radius: 8px;
  color: white;
  margin-left: 12px;
}

#contact-info-main-cont{
  background-color: #F7F8F8;
}

#contact-info-row1 p{
  color: #991E21;
  font-family: dosis;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  margin-top: 50px;
}
#contact-info-row1 h2{
  font-family: montserrat;
  text-align: center;
  font-weight: 600;
}
/* location back */
#location-back{
  width: 90%;
  height: 200px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  border-top: 2px solid #991E21;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
#location-icon{
  width: 90%;
  height: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#location-icon i{
  font-size: 40px;
  color: #991E21;
}
#location-heading{
  width: 90%;
  height: 30%;
}
#location-heading h2{
  font-size: 30px;
  font-family: dosis;
  font-weight: 600;
  text-align: center;
}
#location-para{
  width: 90%;
  height: 30%;
}
#location-para p{
  font-size: 17px;
  text-align: center;
}


/* phone back */
#phone-back{
  width: 90%;
  height: 200px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  border-top: 2px solid #991E21;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
#phone-icon{
  width: 90%;
  height: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#phone-icon i{
  font-size: 40px;
  color: #991E21;
}
#phone-heading{
  width: 90%;
  height: 30%;
}
#phone-heading h2{
  font-size: 30px;
  font-family: dosis;
  font-weight: 600;
  text-align: center;
}
#phone-para{
  width: 90%;
  height: 30%;
}
#phone-para p{
  font-size: 17px;
  font-family: sans-serif;
  text-align: center;
}


/* email back */
#email-back{
  width: 90%;
  height: 200px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  border-top: 2px solid #991E21;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
#email-icon{
  width: 90%;
  height: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#email-icon i{
  font-size: 40px;
  color: #991E21;
}
#email-heading{
  width: 90%;
  height: 30%;
}
#email-heading h2{
  font-size: 30px;
  font-family: dosis;
  font-weight: 600;
  text-align: center;
}
#email-para{
  width: 90%;
  height: 30%;
}
#email-para p{
  font-size: 17px;
  font-family: sans-serif;
  text-align: center;
}


/* branches */

#branches-heading h2{
  text-align: center;
  font-family: dosis;
  font-weight: 600;
}
#naval-colony-branche{
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  height: 300px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-top: 2px solid #991E21;
}
#naval-heading{
  width: 90%;
  height: 15%;
}
#naval-heading h2{
  font-size: 25px;
  font-family: dosis;
  font-weight: 600;
  text-align: center;
}
#naval-para{
  width: 90%;
  height: 60%;
}
#naval-para p{
  text-align: center;
}



#liyari-branche{
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  height: 300px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-top: 2px solid #991E21;
}
#liyari-heading{
  width: 90%;
  height: 15%;
}
#liyari-heading h2{
  font-size: 25px;
  font-family: dosis;
  font-weight: 600;
  text-align: center;
}
#liyari-para{
  width: 90%;
  height: 60%;
}
#liyari-para p{
  text-align: center;
}


/* REgistration page */

#reg-heading h2{
  text-align: center;
  font-family: dosis;
  font-weight: 600;
}
#reg-heading p{
  text-align: center;
  font-family: montserrat;
  color: #991E21;
  font-weight: 500;
}
#reg-form-back{
  border: 1px solid gray;
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

#date-gender-back{
  display: flex;
  justify-content: space-between;
}
#date-back{width: 48%;}
#gender-back{width: 48%;}
#name-father-back{display: flex;justify-content: space-between;}
#std-fath-cell-back{display: flex;justify-content: space-between;}
#birth-cnic-back{display: flex;justify-content: space-between;}
#fath-ocuu-email-back{display: flex;justify-content: space-between;}
#timing-course-back{display: flex;justify-content: space-between;}
#birth-back{width: 48%;}

/* address input */
.address{
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: space-between;
}
#address-inputs-contact{
    width:100%;
    height:40px;
    background-color: transparent;
    border: none;
    outline:none;
    border-bottom: 1px solid #991E21;
    color:#991E21;
    padding: 0px 30px;
}
.locat{position: absolute;left: 0px;top: 10px;}
  #address-label {
    position: absolute;
    left: 30px;
    top: 10px;
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s;
  }
  #address-inputs-contact:focus + #address-label,
  #address-inputs-contact:not(:placeholder-shown) + #address-label {
    top: -10px;
    left:20px;
    font-size: 12px;
    color: #991E21;
  }



/* education input */
.education{
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: space-between;
}
#education-inputs-contact{
    width:100%;
    height:40px;
    background-color: transparent;
    border: none;
    outline:none;
    border-bottom: 1px solid #991E21;
    color:#991E21;
    padding: 0px 30px;
}
.educat{position: absolute;left: 0px;top: 10px;}
  #education-label {
    position: absolute;
    left: 30px;
    top: 10px;
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s;
  }
  #education-inputs-contact:focus + #education-label,
  #education-inputs-contact:not(:placeholder-shown) + #education-label {
    top: -10px;
    left:20px;
    font-size: 12px;
    color: #991E21;
  }

  
/* course input */
.course{
    width: 48%;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: space-between;
}
#course-inputs-contact{
    width:100%;
    height:40px;
    background-color: transparent;
    border: none;
    outline:none;
    border-bottom: 1px solid #991E21;
    color:#991E21;
    padding: 0px 30px;
}
.cour{position: absolute;left: 0px;top: 10px;}
  #course-label {
    position: absolute;
    left: 30px;
    top: 10px;
    color: #aaa;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s;
  }
  #course-inputs-contact:focus + #course-label,
  #course-inputs-contact:not(:placeholder-shown) + #course-label {
    top: -10px;
    left:20px;
    font-size: 12px;
    color: #991E21;
  }

  .timing{width: 48%;}

#submit-back input{
  width: 100px;
  height: 40px;
  background-color: #991E21;
  border: none;
  outline: none;
  color: white;
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

/* Affliations page stylingg */

#aff-head h2{
  text-align: center;
  font-family: dosis;
  font-size: 30px;
  color: #991E21;
  font-weight: 700;
}


#aff-para h3{
  font-family: montserrat;
  font-size: 20px;
  font-weight: 600;
}

#aff-1para h5{
  font-family: montserrat;
}
#sindh-pic{
  display: flex;
  justify-content: center;
}
#sindh-pic img{
  width: 300px;
}

#course-aff-head h2{
  font-family: dosis;
  font-weight: 600;
  text-align: center;
  color: #991E21;
}
#course-btn-aff-back h4{
  color: #991E21;
  font-family: dosis;
  text-align: center;
  font-weight: 600;
}
#btn-course-details-back{
  display: flex;
  justify-content: space-around;
  height: 100px;
}
#first-second-btn-aff{
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#first-second-btn-aff button{
  width: 90%;
  height: 40px;
  border: none;
  outline: none;
  border-left:2px solid #991E21;
  border-radius: 5px;
  display: block;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

  background: linear-gradient(to right, #991E21 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}
#first-second-btn-aff button:hover{
  background-position: left bottom;
  color: white;
}
#third-fuorth-btn-aff{
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#third-fuorth-btn-aff button{
  width: 90%;
  height: 40px;
  border: none;
  outline: none;
  border-left:2px solid #991E21;
  border-radius: 5px;
  display: block;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

  background: linear-gradient(to right, #991E21 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}
#third-fuorth-btn-aff button:hover{
  background-position: left bottom;
  color: white;
}
#fifth-sixth-btn-aff{
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#fifth-sixth-btn-aff button{
  width: 90%;
  height: 40px;
  border: none;
  outline: none;
  border-left:2px solid #991E21;
  border-radius: 5px;
  display: block;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

  background: linear-gradient(to right, #991E21 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}
#fifth-sixth-btn-aff button:hover{
  background-position: left bottom;
  color: white;
}
#seven-eight-btn-aff{
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#seven-eight-btn-aff button{
  width: 90%;
  height: 40px;
  border: none;
  outline: none;
  border-left:2px solid #991E21;
  border-radius: 5px;
  display: block;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

  background: linear-gradient(to right, #991E21 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}
#seven-eight-btn-aff button:hover{
  background-position: left bottom;
  color: white;
}

#div1-btn{display: flex;}
#div2-btn{display: flex;}


#nine-ten-btn-aff{
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#nine-ten-btn-aff button{
  width: 90%;
  height: 40px;
  border: none;
  outline: none;
  border-left:2px solid #991E21;
  border-radius: 5px;
  display: block;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

  background: linear-gradient(to right, #991E21 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}
#nine-ten-btn-aff button:hover{
  background-position: left bottom;
  color: white;
}

#eleven-tewelve-btn-aff{
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#eleven-tewelve-btn-aff button{
  width: 90%;
  height: 40px;
  border: none;
  outline: none;
  border-left:2px solid #991E21;
  border-radius: 5px;
  display: block;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;

  background: linear-gradient(to right, #991E21 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}
#eleven-tewelve-btn-aff button:hover{
  background-position: left bottom;
  color: white;
}



#course-full-detail-back-div{
  width: 100%;
  height: 500px;
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
#course-heading-back{
  width: 100%;
  height: 100px;
  background-color: #991E21;
  display: flex;
  align-items: center;
}
#course-heading-back h4{
  color: white;
  font-family: montserrat;
  font-weight: 600;
  margin-left: 20px;
}
#course-detail-back-aff{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* Faculty Page Styling */
#faculty-heading h2{
  font-size: 25px;
  font-family: montserrat;
  font-weight: 600;
  color: #991E21;
  text-align: center;
}
#faculty-heading p{
  font-size: 20px;
  font-family: dosis;
  font-weight: 600;
  color: black;
  text-align: center;
}
#sir-cards-back {
box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
#sir-read-btn{
  background-color: #991E21;
  color: white;
}









@media (max-width:1400px){
#footer-address{
  height: 300px;
}  
#games-img2 img{
  width: 200px;
}
}

@media (max-width:1200px) {
  #btn-course-details-back{
    height: 150px;
}
#web-div{height:400px}
#graphic-div{height:400px}    
#software-div{height:400px}    
#game-div{height:400px}    
#android-div{height:400px}    
#dit-div{height:400px}    
#games-img1 img{
  width: 500px;
}

#eleven-tewelve-btn-aff {
  display: none;
}
}



@media (max-width:992px) {
#course-full-detail-back-div{
  height: auto;
}  
#eleven-tewelve-btn-aff {
  display: block;
  display: flex;
}
#btn-course-details-back{
  height: 300px;
  flex-direction: column;
}  
#div2-btn{width: 100%;}
#div1-btn{width: 100%;}
#first-second-btn-aff{
  width: 33%;
  height: 150px;
}
#third-fuorth-btn-aff{
  width: 33%;
  height: 150px;
}
#fifth-sixth-btn-aff{
  width: 33%;
  height: 150px;
}
#seven-eight-btn-aff{
  width: 33%;
  height: 150px;
}
#nine-ten-btn-aff{
  width: 33%;
  height: 150px;
}
#eleven-tewelve-btn-aff{
  width: 33%;
  height: 150px;
}

#aff-para-pic-back {
  display: flex;
  flex-direction: column;
}  
  #register-button{
    display: block;
}#drop-1{
  z-index: 100;
}
#home-cont1{display: flex;flex-direction: column;}    
#home-cont1-col2 img{width: 100%;}    
#home-row2-cont2{display: flex;flex-direction: column;}
#web-img{display: flex;align-items: center;justify-content: center;}
#web-btn{display: flex;align-items: center;justify-content: center;}
#web-head h4{text-align: center;font-size: 25px;}
#graphic-img{display: flex;align-items: center;justify-content: center;}
#graphic-btn{display: flex;align-items: center;justify-content: center;}
#graphic-head h4{text-align: center;font-size: 25px;}
#software-engineer{display: flex;align-items: center;justify-content: center;}
#software-img{display: flex;align-items: center;justify-content: center;}
#software-btn{display: flex;align-items: center;justify-content: center;}
#software-head h4{text-align: center;font-size: 25px;}

#home-row2-cont2{display: flex;flex-direction: column;}
#game-img{display: flex;align-items: center;justify-content: center;}
#game-btn{display: flex;align-items: center;justify-content: center;}
#game-head h4{text-align: center;font-size: 25px;}
#android-btn{display: flex;align-items: center;justify-content: center;}
#android-img{text-align: center;font-size: 25px;}
#android-head h4{text-align: center;font-size: 25px;}
#dit{display: flex;align-items: center;justify-content: center;}
#dit-img{display: flex;align-items: center;justify-content: center;}
#dit-btn{display: flex;align-items: center;justify-content: center;}
#dit-head h4{text-align: center;font-size: 25px;}

#graphic-div{margin-top: 20px;}
#software-div{margin-top: 20px;}
#android-div{margin-top: 20px;}
#dit-div{margin-top: 20px;}

#our-academy-row1{
  display: flex;flex-direction: column;
}
#our-academy-col2 img{
  width: 100%;
}
/* Services page */

#course-cont1-row2{
  display: flex;flex-direction: column;
}
#course-cont1-row3{
  display: flex;flex-direction: column;
}
#course-cont1-row4{
  display: flex;flex-direction: column;
}
#course-cont1-row5{
  display: flex;flex-direction: column;
}

/* About PAge */
#about-features-row1{
  display: flex;
  flex-direction: column;
}
#hand-on-back{margin-top: 20px;}
#project-base-back{margin-top: 20px;}
#about-features-row2{
  display: flex;
  flex-direction: column;
}
#flex-learn-back{margin-top: 20px;}
#career-supp-back{margin-top: 20px;}
#about-features-row3{
  display: flex;
  flex-direction: column;
}
#compre-back{margin-top: 20px;}

#discover{ width: 300px;}
#des-dev{width: 300px;}
#install{width: 300px;margin-top: 20px;}
#course-project{width: 300px;margin-top: 20px;}



/* contact page */

#contact-info-row2{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#location-back{width: 100%;}
#phone-back{width: 100%;margin-top: 30px;}
#email-back{width: 100%;margin-top: 30px;}
#bracnhe-back{
  display: flex;
  flex-direction: column;
}

/* software */
#soft-img-back{
  flex-direction: column;
}
#soft-img1{width: 100%;}
#soft-img2{width: 100%;}
#soft-img1 img{width: 100%;}
#soft-img2 img{width: 100%;}
#soft-para-back{
  width: 100%;
}

/* android */
#android-img-back{
  flex-direction: column;
}
#android-img1{width: 100%;}
#android-img2{width: 100%;}
#android-img1 img{width: 100%;}
#android-img2 img{width: 300px;margin-top: 20px;}
#android-para-back{
  width: 100%;
}

/* web */
#web-img-back{
  flex-direction: column;
}
#webs-img1{width: 100%;}
#webs-img2{width: 100%;}
#webs-img1 img{width: 100%;}
#webs-img2 img{width: 300px;margin-top: 20px;}
#web-para-back{
  width: 100%;
}

/* game */
#game-img-back{
  flex-direction: column;
}
#games-img1{width: 100%;}
#games-img2{width: 100%;}
#games-img1 img{width: 100%;}
#games-img2 img{width: 300px;margin-top: 20px;}
#game-para-back{
  width: 100%;
}


/* program */
#program-img-back{
  flex-direction: column;
}
#program-img1{width: 100%;}
#program-img2{width: 100%;}
#program-img1 img{width: 100%;}
#program-img2 img{width: 300px;margin-top: 20px;}
#program-para-back{
  width: 100%;
}

/* data */
#data-img-back{
  flex-direction: column;
}
#data-img1{width: 100%;}
#data-img2{width: 100%;}
#data-img1 img{width: 100%;}
#data-img2 img{width: 300px;margin-top: 20px;}
#data-para-back{
  width: 100%;
}


/* graphic */
#graphic-img-back{
  flex-direction: column;
}
#graphics-img1{width: 100%;}
#graphics-img2{width: 100%;}
#graphics-img1 img{width: 100%;}
#graphics-img2 img{width: 300px;margin-top: 20px;}
#graphic-para-back{
  width: 100%;
}

/* video */
#video-img-back{
  flex-direction: column;
}
#video-img1{width: 100%;}
#video-img2{width: 100%;}
#video-img1 img{width: 100%;}
#video-img2 img{width: 300px;margin-top: 20px;}
#video-para-back{
  width: 100%;
}


/* dit */
#dit-img-back{
  flex-direction: column;
}
#dit-img1{width: 100%;}
#dit-img2{width: 100%;}
#dit-img1 img{width: 100%;}
#dit-img2 img{width: 300px;margin-top: 20px;}
#dit-para-back{
  width: 100%;
}

/* cit */
#cit-img-back{
  flex-direction: column;
}
#cit-img1{width: 100%;}
#cit-img2{width: 100%;}
#cit-img1 img{width: 100%;}
#cit-img2 img{width: 300px;margin-top: 20px;}
#cit-para-back{
  width: 100%;
}

/* microsoft */
#microsoft-img-back{
  flex-direction: column;
}
#microsoft-img1{width: 100%;}
#microsoft-img2{width: 100%;}
#microsoft-img1 img{width: 100%;}
#microsoft-img2 img{width: 300px;margin-top: 20px;}
#microsoft-para-back{
  width: 100%;
}

/* freelancer */
#freelancer-img-back{
  flex-direction: column;
}
#freelancer-img1{width: 100%;}
#freelancer-img2{width: 100%;}
#freelancer-img1 img{width: 100%;}
#freelancer-img2 img{width: 300px;margin-top: 20px;}
#freelancer-para-back{
  width: 100%;
}

}



@media (max-width:768px) {
#cards-back-person{
  display: flex;
  flex-direction: column;
  align-items: center;
}  
#course-detail-back-aff{
  flex-direction: column;
}
#home-cont1-col1 h1{font-size: 40px;}    
#web-div{height: 350px;}
#graphic-div{height: 350px;}
#software-div{height: 350px;}
#game-div{height: 350px;}
#android-div{height: 350px;}
#dit-div{height: 350px;}

#footer-section{
  flex-direction: column;
}
#footer-logo-info{width: 100%;height: auto;}
#footer-logo-back h3{text-align: center;}
#footer-para p{text-align: center;margin-top: 20px;}
#footer-social{flex-direction: column;align-items: center;}


#footer-links{width: 100%;}
#footer-link-heading h3{text-align: center;}
#links-a p{text-align: center;}


#footer-address{width: 100%;height: auto;}
#footer-add-heading h3{text-align: center;}
#address p{text-align: center;}

#footer-contact{width: 100%; height: auto;}
#footer-contact-heading h3{text-align: center;}
#footer-cont p{text-align: center;}

/* about */
#work-instro{display: flex;flex-direction: column;}
#discover{ width: 500px;}
#des-dev{width: 500px;margin-top: 20px;}
#install{width: 500px;margin-top: 20px;}
#course-project{width:500px;margin-top: 20px;}

#name-email-back{flex-direction: column;}
.name{width: 100%;}
.email{width: 100%;}
#phone-sub-back{flex-direction: column;}
.phone{width: 100%;}
.sub{width: 100%;}
#name-father-back{flex-direction: column;}
#std-fath-cell-back{flex-direction: column;}
#birth-cnic-back{flex-direction: column;}
#fath-ocuu-email-back{flex-direction: column;}
#timing-course-back{flex-direction: column;}
.course{width: 100%;}
#fath-ocuu-email-back{margin-top: 10px;}
}


@media (max-width:576px) {
#about-our-academy h6{font-size: 15px;}
#about-our-academy h1{font-size: 30px;}
#about-our-academy p{font-size: 12;}

/* about */
#discover{ width: 100%;}
#des-dev{width: 100%;margin-top: 20px;}
#install{width: 100%;margin-top: 20px;}
#course-project{width:100%;margin-top: 20px;}
#third-fuorth-btn-aff button{
  height: auto;
}
#fifth-sixth-btn-aff button{
  height: auto;
}
#p-g{
  height: auto;
}


}



@media (max-width:576px) {
#about-our-academy{
  height: auto;
}
#why-choosex-cbla h1{font-size: 30px;}

}


@media (max-width:525px){
  #why-choosex-cbla{height: auto;}
  #why-choose-row1{display: flex;flex-direction: column;}
  #choose-btn-back{flex-direction: column;justify-content: space-between;align-items: center;}
  #three-four{margin-top: 20px;}
  #login-screen{
    width: 100%;
}
#login-screen form{
    width: 80%;
}
#inputs-back{
    width: 100%
}
#home-cont1-col1 p{
  width: 100%;
}

}

@media (max-width:475px){
#naval-colony-branche{
  height: 350px;
}  
}

/**/