@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

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

body {
  font-family: "poppins", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  background-color: black;
}
.bg {
  background-image: url("f2sbg.png");
  height: 100vh;
  margin-top: -8em;
  background-repeat: no-repeat;
  background-size: cover;
}
.tophead {
  display: flex;
  justify-content: space-between;
  background: #e00f0f;
  align-items: center;
  color: white;
  font-size: 13px;
  position: fixed;
  top: 0rem;
  height: 3em;
  z-index: 999;
  width: 100%;
}
.call {
  display: flex;
}
.follow {
  display: flex;
  width: 12em;
}

.call p {
  margin: 3px;
}

.follow p {
  margin: 3px;
}
.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-self: center;
  margin: 5em 0 0 0;
  width: 100%;
  padding: 1rem 0.5rem;
  background: #252525ad;
  transition: all 0.5s ease;
  position: fixed;
  top: -2rem;
  height: 3em;
  position: fixed;
  z-index: 999;
}

.nav .menu-bar {
  width: 43rem;
}

.nav .menu-bar .menu-items {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.nav .menu-bar .menu-items li a {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.nav .menu-bar .menu-items li a:hover {
  color: red;
}
#activesection {
  color: red;
}

.nav .menu-bar .menu-items li {
  line-height: none;
  text-decoration: none;
  list-style: none;
}
.nav .logo img {
  width: 10em;
}

.nav .menu-bar .sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 250px;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.627);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.4);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  list-style: none;
  padding-left: 2em;
  padding-top: 1em;
  backdrop-filter: blur(10px);
}
.nav .menu-bar .sidebar li {
  width: 100%;
  padding-top: 10px;
}

.nav .menu-bar .sidebar li a {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  width: 100%;
  transition: 0.2s;
}
.nav .menu-bar .sidebar li a:hover {
  color: red;
}

.firstheading {
  margin-top: 20vh;
  font-size: 2em;
  text-transform: capitalize;
  color: white;
  text-shadow: 10px 10px 10px black;
}
.firstheading h1 {
  padding-top: 25vh;
}
.firstheading span {
  color: red;
}

.buttons {
  text-align: center;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2em;
  width: fit-content;
  margin: auto;
  margin-top: 3em;
  transition: 0.2s;
}
.buttons:hover {
  cursor: pointer;
}

.buttons .contactbtn {
  height: 2em;
  width: 8em;
  background: rgb(255, 0, 0);
  border-radius: 7px;
  border: none;
  font-family: "Poppins";
  cursor: pointer;
  transition: 0.3s;
  color: white;
}

.buttons .contactbtn:hover {
  width: 8.3em;
  height: 2.3em;
  font-size: 18px;
  color: white;
  background: red;
}
.buttons .reviewbtn {
  height: 2em;
  width: 10em;
  border-radius: 7px;
  border: none;
  font-family: "Poppins";
  cursor: pointer;
}

.bg2 img {
  width: 100%;
  height: 10%;
  opacity: 0.9;
}

.Services {
  margin-top: 3em;
  margin-left: 2em;
  margin-right: 2em;
}
.Services h1 {
  color: red;
  font-size: 3em;
}
.Services p {
  color: white;
}

.bookacall {
  background-color: red;
  display: flex;
  justify-content: space-between;
  width: 70vw;
  height: 7vh;
  margin: auto;
  border-radius: 30em;
  color: white;
  margin-top: 3em;
  margin-bottom: 2em;
}
.bookacall p {
  margin-left: 2em;
  margin-right: 2em;
  text-align: center;
  padding-top: 0.5em;
}
.bookacall a {
  text-decoration: none;
  color: white;
  transition: 0.2s;
}
.bookacall a:hover {
  color: black;
}

.Programs-section h2 {
  color: white;
  margin-top: 3em;
  margin-right: 2em;
  margin-left: 2em;
}

.Programs-Set {
  display: flex;
  justify-content: space-around;
}
.Programs {
  color: white;
  margin-top: 3em;
  margin-right: 2em;
  margin-left: 2em;
  background-color: red;
  width: 33%;
  height: auto;
  border-radius: 30px;
}

.Programs .universityimg img {
  width: 100%;
  border-radius: 30px 30px 0 0;
}

.Programs .university p {
  font-size: 20px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 1em;
}
.Programs .program p {
  font-size: 15px;
  margin-bottom: 1em;
  margin-left: 1em;
  margin-right: 1em;
}

.contactusad {
  background-image: linear-gradient(120deg, red, rgb(255, 5, 59));
  width: 70vw;
  height: 30vh;
  margin: auto;
  margin-top: 3em;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2em;
}

.contactusad .contactusp1 {
  padding-top: 2em;
  text-align: center;
  color: white;
  font-size: 20px;
}
.contactusad a {
  text-decoration: none;
  color: black;
  transition: 0.2s;
}
.contactusad a:hover {
  color: red;
}

.contactusad .contactusp2 {
  text-align: center;
  color: white;
  font-size: 15px;
  padding-top: 0.3em;
}
.contactusad button {
  width: 9em;
  height: 2em;
  margin-left: 15vw;
  margin-top: 3em;
  border-radius: 10px;
  border: none;
}

.contactusad .contactusp3 {
  font-weight: 700;
  font-size: 16px;
  font-family: "Poppins";
}

/* ******************** Responsive ********************* */

@media (max-width: 962px) {
  .service-set {
    grid-template-columns: auto auto;
  }
  .bg {
    height: 89vh;
  }

  .service-front3 {
    margin-top: 2em;
  }
  .service-front4 {
    margin-top: 2em;
  }
  .visaguide3 {
    margin-top: 3em;
  }
  .visaguide4 {
    margin-top: 3em;
  }
  .contactusad button {
    margin-left: 15em;
  }
}

@media (max-width: 900px) {
  .misvis .mission h2 {
    font-size: 2em;
  }
  .misvis .vision h2 {
    font-size: 2em;
  }
  .footer-info {
    margin-left: 0;
  }
  .blogset {
    margin-left: 2em;
  }
  .reviews .readmore p {
    width: 13vw;
    margin-top: 4em;
  }
  .readmorevisa {
    margin-top: 4em;
  }
  .whyus-img .img2 {
    width: 18rem;
    height: 29rem;
  }
  .whyus {
    justify-content: space-around;
  }
  .Services h1 {
    margin-top: 3em;
  }
}

@media (max-width: 810px) {
  .bg2 img {
    height: 34vh;
  }
  .misvis .mission p {
    width: 39vw;
    margin-left: -2.5em;
  }
  .misvis .vision p {
    width: 40vw;
    margin-left: -2.5em;
  }
  .bookacall {
    width: 89vw;
    margin-top: 4em;
  }
  .blogset {
    margin-left: 0em;
  }
  .reviewvideos {
    display: grid;
    grid-template-columns: auto auto;
  }
  .reviews .readmore p {
    width: 23vw;
  }
  .footer {
    font-size: 12px;
  }
}
@media (max-width: 800px) {
  .hideonmobile {
    display: none;
  }
  .nav .menu-bar .menu-items {
    justify-content: end;
  }
  .nav .menu-bar .menu-items .menu-button {
    display: block;
  }
}

@media (max-width: 768px) {
  .About {
    margin-top: 0;
  }
  .bookacall {
    width: 100%;
  }
  .blogset .blog .blogbg img {
    width: 12em;
  }
  .blogset .blog {
    width: 12em;
    height: 32em;
  }
  .Programs-Set {
    display: grid;
    grid-template-columns: auto auto;
  }
  .Programs {
    width: auto;
  }
}
@media (max-width: 738px) {
  .bg {
    height: 93vh;
  }
}
@media (max-width: 678px) {
  .contactusad {
    width: 92vw;
  }
  .footer {
    display: inline;
  }
  .footer-info {
    gap: 8em;
  }
  .logo-ft {
    width: auto;
  }
}

@media (max-width: 620px) {
  .About {
    margin-top: 5em;
  }
  .call {
    font-size: 12px;
  }
  .misvis {
    justify-content: space-around;
  }
  .misvis .mission {
    width: auto;
    height: 33vh;
    margin-left: 0;
    margin-right: 0;
  }
  .misvis .vision {
    width: auto;
    height: 33vh;
    margin-left: 0;
    margin-right: 0;
  }
  .misvis .mission h2 {
    padding: 0;
  }
  .misvis .vision h2 {
    padding: 0;
  }
  .misvis .mission p {
    font-size: 12px;
    width: 38vw;
    margin-left: 0.5em;
    padding: 0;
  }
  .misvis .vision p {
    font-size: 12px;
    width: 38vw;
    margin-left: 0.5em;
    padding: 0;
  }

  .bookacall p {
    margin-left: 1em;
    margin-right: 1em;
  }
  .whyus {
    display: block;
  }
  .whyus-2 {
    width: 27em;
    margin: auto;
  }
  .whyus-img .img2 {
    width: 22em;
    height: 26em;
    margin: auto;
    margin-bottom: 2em;
  }
}

@media (max-width: 600px) {
  .bgimg h1 {
    padding-top: 0;
  }
  .tophead {
    display: block;
    height: 4em;
  }
  .nav {
    top: -1.5em;
  }
}

@media (max-width: 580px) {
  .blogset {
    grid-template-columns: auto auto;
  }
  .bgimg h1 {
    padding-top: 2em;
    font-size: 2em;
  }
}

@media (max-width: 515px) {
  .Programs-Set {
    display: grid;
    grid-template-columns: auto;
  }
  .Programs {
    width: auto;
  }
}

@media (max-width: 480px) {
  .firstheading h1 {
    padding-top: 25vh;
    font-size: 1.2em;
  }
  .tophead {
    display: block;
    height: 3.8em;
  }
  .nav {
    top: -1em;
  }
  .bg {
    height: 92vh;
  }

  .bg2 img {
    height: 26vh;
  }
  .About {
    margin-top: 0em;
  }
  .misvis .mission {
    width: 13em;
  }
  .Services h1 {
    margin-top: 0em;
    font-size: 2.7em;
  }
  .service-front {
    height: 300px;
    width: 205px;
  }
  .service-back {
    height: 300px;
    width: 205px;
  }
  .bookacall p {
    font-size: 12px;
    padding-top: 0.9em;
  }
  .reviews .readmore p {
    width: 30vw;
  }
  .readmorevisa p {
    font-size: 12px;
    margin-top: -3em;
  }
  .blogset .blog .blog3 h2 {
    font-size: 16px;
  }
  .blogset .blog {
    width: 12em;
    height: 27em;
  }
  .contactusad .contactusp1 {
    padding-top: 2em;
    text-align: center;
    color: white;
    font-size: 16px;
  }
  .contactusad button {
    margin-left: 13em;
  }
  .footer-info {
    display: inline;
  }
  .service-ft {
    margin-top: 2em;
  }
  .links-ft {
    margin-top: 2em;
  }
  .contact-ft {
    margin-top: 2em;
  }
  .question h3 {
    font-size: 16px;
  }
  .title {
    font-size: 32px;
  }
  .whyus-2 {
    width: 99%;
    margin: auto;
  }
  .whyus-img .img2 {
    width: 99%;
  }
  .faq2 {
    height: 28em;
  }
  .answer p {
    font-size: 13px;
  }
  .moreque h3 {
    font-size: 16px;
    margin-bottom: 2em;
  }
  .logo-ft img {
    width: 48vw;
  }
  .logo-ft i {
    font-size: 5vw;
  }
}
@media (max-width: 432px) {
  .call {
    display: grid;
    grid-template-columns: auto;
  }
  .tophead {
    height: 7.8em;
  }
  .nav {
    top: 1.6em;
  }
}
@media (max-width: 425px) {
  .misvis .mission p {
    margin-left: 8px;
  }
  .misvis .mission {
    width: 11em;
    height: 38vh;
  }
  .misvis .vision p {
    margin-left: 8px;
  }
  .misvis .vision {
    width: 11em;
    height: 38vh;
  }
  .service-front {
    height: 272px;
    width: 181px;
  }
  .service-back {
    height: 272px;
    width: 181px;
  }
  .service-content h2 {
    margin-top: -25px;
  }
  .service-content p {
    width: 90%;
    font-size: 13px;
    margin-top: 0;
    padding-top: 2em;
  }
  .counter-img {
    height: 7vh;
  }
}

@media (max-width: 400px) {
  .nav .menu-bar .sidebar {
    width: 100%;
  }
}
@media (max-width: 390px) {
  .call {
    font-size: 11px;
  }
  .bg2 img {
    height: 16vh;
  }
  .bg {
    height: 82vh;
  }

  .reviewvideos {
    grid-template-columns: auto;
  }
  .blogset {
    grid-template-columns: auto;
  }
  .contactusad .contactusp1 {
    font-size: 13px;
  }
  .contactusad .contactusp2 {
    font-size: 11px;
    margin: 2em;
}
  .contactusad button {
    margin-left: 8.3em;
    margin-bottom: 2em;  }
  .contactusad {
    height: auto;
  }
  .bookacall {
    display: block;
    height: 9vh;
  }
}

@media (max-width: 370px) {
  .misvis {
    display: block;
    margin-left: 3em;
  }
  .misvis .mission {
    width: 16em;
    height: 33vh;
  }
  .misvis .vision {
    width: 16em;
    height: 33vh;
  }
  .misvis .mission p {
    font-size: 13px;
    width: 65vw;
  }
  .misvis .vision p {
    font-size: 13px;
    width: 65vw;
  }
  .service-set {
    grid-template-columns: auto;
  }
  .whyus-2 {
    width: 99%;
    margin: auto;
  }
}
@media (max-width: 320px) {
  .contactusad button {
    margin-left: 7em;
    margin-bottom: 2em;
  }
  .Services h1 {
    margin-top: 0em;
    font-size: 2.5em;
}
}