/* ============= Breakpoint for Small Screens ============= */

@media (max-width: 768px) {


  p {
    font-size: 14px;
  }

  h2 {
    line-height: 1.2;
  }


  /* ============= REUSABLE CLASSES ============= */

  .hidden__desktop {
    display: initial !important;
  }

  .hidden__mobile {
    display: none;
  }

  .grid__container-element {
    margin: 0;
  }

  .section {
    padding: 3rem 0 5rem;
  }

  .btn {
    display: inline-block;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 8px 10px;
    border: none;
    outline: none;
    font-family: var(--font-title-demi);
    font-size: var(--normal-font-size);
    font-weight: bold;
    border-radius: 25px;
    cursor: pointer;
    background: var(--fourth-color);
    color: #FFFFFF;
  }

  .btn:hover {
    color: var(--fourth-color);
  }

  .btn:active {
    color: var(--fourth-color);
  }

  .btn::after {
    content: "";
    background: #FFFFFF;
    color: var(--fourth-color);
    position: absolute;
    z-index: -1;
    padding: 8px 10px;
    display: block;
    top: 0;
    bottom: 0;
    left: -110%;
    right: 110%;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    transform: skew(10deg);
  }

  .btn:active::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
  }

  .border__btn {
    border-radius: 50px;
  }

  .btn__blue:hover {
    color: #FFFFFF;
  }

  .btn__blue:active {
    color: #FFFFFF;
  }

  .btn__blue::after {
    content: "";
    background: #052352;
    position: absolute;
    z-index: -1;
    padding: 8px 10px;
    display: block;
    top: 0;
    bottom: 0;
    left: -110%;
    right: 110%;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    transform: skew(10deg);
  }

  .btn__blue:active::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
  }

  /* ============= services section ============= */

  .img__desktop {
    display: none;
  }

  .section__page {
    padding-top: 60px;
  }

  .section__subtitle {
    text-align: left;
    font-size: 15px;
  }

  /* ============= blogs content section ============= */

  .grid__content-container {
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }


  /* ============= service content section ============= */

  .step__one-schedule {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* certificate form */

  .social__list-top--container {
    height: 55px;
  }

  .goog-te-gadget .goog-te-combo {
    margin: 0 !important;
    margin-top: -2px !important;
  }


  [lang="es"] .img__language {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 44px;
    width: auto;
    align-items: center;
    gap: 5px;
    margin-right: 10px;
  }

  [lang="es"] h3.copyright__footer,
  [lang="es"] h3.subtitle__footer {
    font-size: 14px;
  }

  .min__container {
    max-width: 100%;
  }

}


@media (width < 1000px) {

  /* ============= footer section ============= */

  .footer__container {
    display: grid;
    grid-template-columns: 1fr;
  }

  .footer__column {
    margin-bottom: 20px;
  }

  .footer__list {
    display: none;
  }

  .footer__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
  }

  p.text__bottom-footer--logo {
    margin: 0;
    font-size: 14px;
  }

  p.second__info-footer {
    font-size: 14px;
  }

  .footer__last-column {
    margin-top: 20px;
    padding-bottom: 20px;
  }

  .line__footer-left--three {
    background: #0876CD;
    height: 1.5px;
    transform: rotate(70deg);
    position: absolute;
    bottom: 135px;
    left: -377px;
    width: 700px;
    z-index: 1;
  }

  .line__footer-left--four {
    background: #0876CD;
    height: 1.5px;
    transform: rotate(70deg);
    position: absolute;
    bottom: 135px;
    left: -352px;
    width: 700px;
    z-index: 1;
  }

  .line__footer-left--five {
    background: #0876CD;
    height: 1.5px;
    transform: rotate(70deg);
    position: absolute;
    bottom: 135px;
    left: -328px;
    width: 700px;
    z-index: 1;
  }

  .title__column-three--footer,
  .line__footer-left--one,
  .line__footer-left--two,
  .line__footer-right--one,
  .line__footer-right--two,
  .line__footer-right--three,
  .line__footer-right--four,
  .line__footer-right--five {
    display: none;
  }

}


@media (width < 1200px) {

  .btn__open,
  .btn__close {
    display: initial;
  }

  /* ============= Header & NavBar ============= */

  .item__left-mobile,
  .navbar__mobile {
    display: block;
  }

  .info__scroll-desktop,
  .nav__desktop,
  .info__header-desktop,
  .login__desktop,
  .social__list-desktop {
    display: none;
  }

  .item__left-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .logo__left-header--mobile {
    margin: 0;
    width: 120px;
    height: 100%;
  }

  .logo__left-header--mobile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .header__mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-fixed);
    border-bottom: 1px solid rgba(245, 245, 245, 255);
    padding-right: 25px;
    height: 55px;
  }

  .navbar__menu {
    position: fixed;
    left: -120%;
    top: 55px;
    width: 70%;
    border-radius: 0 12px 12px 0;
    background-color: white;
    box-shadow: 0px 1px 9px 2px #00000024;
    padding: 4.5rem 1rem 5rem;
    transition: .5s;
    z-index: var(--z-fixed);
    height: 90%;
    overflow-y: auto;
  }

  .navbar__menu::-webkit-scrollbar {
    width: 5px;
  }

  .navbar__menu::-webkit-scrollbar-thumb {
    background-color: #E0E0E0;
  }

  .navbar i {
    display: block;
  }

  .overlay__menu-mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 48;
  }

  .btn__close {
    position: absolute;
    top: var(--mr-2);
    right: var(--mr-2);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background .3s;
  }

  .btn__open {
    font-size: 2.2rem;
    color: #FFFFFF;
    cursor: pointer;
  }

  .btn__close {
    color: #052352;
    font-size: 2.2rem;
    cursor: pointer;
  }

  .navbar__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .navbar__item {
    margin-bottom: 0;
  }

  .navbar__link {
    color: black;
    font-size: 1.2rem;
    font-weight: var(--font-semi-bold);
  }

  .show--menu {
    left: 0;
  }

  .language__options-mobile .img__language img {
    width: 15px;
  }

  .language__options-mobile select {
    background-size: 8px 10px !important;
  }

  .social__list-nav--mobile {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    gap: 25px;
  }

  .social__list-nav--mobile i {
    font-size: 25px;
    color: #04214E;
  }

  .btn__login-nav--mobile {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px 80px;
  }

  .btn__nav-mobile--container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    margin-top: 30px;
  }

}

/* ============= Breakpoint for Large Screens ============= */


@media (min-width: 1275px) {
  .grid--container {
    margin: 0 auto;
  }

  .grid__content-container {
    margin: 0 auto;
  }

  .grid__container-element {
    margin: 0 auto;
  }

  .grid__container-login {
    margin: 0 auto;
  }

  .min__container {
    margin: 0 auto;
  }
}


@media (min-width: 2160px) {
  .max__container {
    margin: 0 auto;
  }
}

/* 1366 * 610 */

@media only screen and (min-width: 1300px) and (max-width: 1366px) and (min-height: 600px) and (max-height: 620px) {


  p {
    font-size: 15px;
  }

  .section {
    padding: 2rem 0 5rem;
  }

}


@media only screen and (min-width: 1200px) and (max-width:1280px) and (min-height:600px) and (max-height:1024px) {

  .grid__container-element,
  .grid--container {
    max-width: 1150px;
  }

}


/*

1920 * 1080
1680 * 1050
1600 * 900
1440 * 900
1400 * 1050
1366 * 768
1360 * 768
1280 * 1024
1280 * 960
1280 * 800
1280 * 768
1280 * 720
1280 * 600

1152 * 864
1024 * 768
800 * 600

*/