:root{
  --global-color-primary: #1565c0;/* #00214D;*/
  --global-color-secondary: #363CBA;
  --global-color-principal: #004e98;
  --global-color-text: #FFFFFF;
  --global-color-accent: #2F5FC2BD;
  --global-color-c33c054: #01122B;

  --global-typography-primary-font-family:"Montserrat";
  --global-typography-primary-font-size: 36px;
  --global-typography-primary-font-weight: 800;
  --global-typography-primary-line-height: 1.4px;
  --global-typography-secondary-font-family: "Montserrat";
  --global-typography-secondary-font-size: 17px;
  --global-typography-secondary-font-weight: 400;
  --global-typography-secondary-line-height: 1.4em;
  --global-typography-text-font-family: "sans-serif";
  --global-typography-text-font-weight: 400;
  --global-typography-accent-font-family: "sans-serif";
  --global-typography-accent-font-weight: 500;
}
*{
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  cursor: default;

}
/* Layout geral para sticky footer */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Conteúdo cresce até ocupar o espaço restante */

body > main {
  flex: 1;
}
body {
  padding-top: 100px; /* espaço para topbar + navbar fixos */
}

 
    /* estilo geral dos botões */
  .btn-fixo-whatsapp, 
  .btn-fixo-ligar {
    position: fixed;
    right: 15px;              /* afastado da borda */
    background-color: rgb(21 101 192);
    color: #fff;
    border-radius: 50%;
    width: 45px;              /* tamanho fixo menor */
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;          /* ícone proporcional */
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 3px 6px 00d1ff;
    z-index: 9999;            /* sempre visível */
  }

  /* WhatsApp embaixo */
  .btn-fixo-whatsapp {
    bottom: 15px;
  }

  /* Ligar acima dele */
  .btn-fixo-ligar {
    bottom: 70px; /* 45px do botão + 10px de espaço */
  }


  .animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

  .animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .fade-in {
    animation: fadeIn 1s forwards;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .slide-up {
    animation: slideUp 1s forwards;
  }
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .zoom-in {
    animation: zoomIn 0.8s forwards;
  }
  @keyframes zoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }



    /* HEADER FIXO */
    .topbar.fixed-top {
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1050;
      background: #1565c0;
    }

    nav.navbar {
      top: 0;
      z-index: 1040;
      width: 100%;
    }



.m23 {
  margin-top: 50px;
}

.carousel-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 20px;
  padding: 10px 20px;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.logo-card {
  flex: 0 0 auto;
  width: 120px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px #1565c0;
  transition: transform 0.3s ease;
}

.logo-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-card:hover {
  transform: scale(1.05);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  background-color: #1565c0;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}


.carousel-btn.left {
  left: 5px;
}

.carousel-btn.right {
  right: 5px;
}

.carousel-btn:hover {
  background-color: #004ba0;
}

@media (max-width: 576px) {
  .logo-card {
    width: 80px;
    height: 60px;
    padding: 6px;
  }

  .logo-card img{
    width: 80px;
    height: 60px;
    padding: 6px;
  }
  .hide{
    display: none;
  }
  .carousel-btn {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

.footer-title {
  font-size: 12px; /* ou o tamanho que preferir */
}

.social-net {
  font-size: 14px; /* define um tamanho uniforme para o texto dentro da div */
  line-height: 1.6; /* melhora o espaçamento entre linhas */
}




/* SAS*/


.parceiros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px;
  padding: 20px 0;
  justify-items: center;
  align-items: center;
}

.fab01 {
  background-color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  border: 4px solid #1979e6;

}

.fab01 img{
  width: 100px;
  
}

.fab01 i {
  font-size: 50px;
  color: #1565c0;
  transition: transform 0.3s ease;
}

.fab01 i:hover {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .fab01 {
    width: 100px;
    height: 100px;
}

.fab01 img{
  width: 70px;
  
}
  #curso{
    margin-bottom: 50px;
  }

  .spacing{
    margin-top: 150px;
  }

  .fab01 i {
    font-size: 40px;
  }
}

@media (max-width: 480px) {
  .fab01 {
    width: 80px;
    height: 80px;
  }

  .fab01 i {
    font-size: 30px;
  }
}


.under{
  border-bottom: 3px solid #1565c0;
  width: 150px;
  margin-top: -10px;
  margin-bottom: 20px;
}



/* Estilização do footer */
footer.footer {
  background-color: var(--global-color-primary);
  color: white;
  margin-top: auto; /* Gruda no bottom */
}
.mb-0{
  list-style: none;
}
.h44{
  margin-top: -30px;
  border-bottom: 5px solid #1565c0;
  width: 100px;
}

@media (max-width: 800px) {
  .phide{
    display: none;
  }
  .phide0{
    display: flex;
    flex-direction: column;
  }
}



.col{
  background: url("../imagens/icons/header.svg");
  background-size: cover;
  background-position: center;
}

/* Top bar */
.topbar {
  background: #1565c0;
  font-size: 12pt;
  padding: 5px 0;
  display: flex;
  align-items: center;
  height: 50px;
}
.topbar .social-links a {
  color: white;
  margin-left: 10px;
  transition: color 0.3s;
}
.topbar .social-links a:hover {
  color: #f1f1f1;
}

/*Navbar*/
.primary-navbar{
  background-color: var(--global-color-primary);
  color: var(--global-color-text);
}
.nav-primary{
  
  display:flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
  background-color: var(--global-color-primary);
 
}

header nav ul li{
  list-style-type: none;
  display: inline-block;
  padding: 0 10px;
}
header nav ul li a, .social-net a{
  color:white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.28em;
}
header nav ul li a i:hover, .primary-top-nav b:hover, .social-net a i:hover{
  color:  var( --global-color-principal) !important;
  transition: .3s; 
  cursor:pointer; 
}
.nav-primary b{
  font-weight:400;
 }
 nav .container{
  width: 100% !important;
 }
 
nav.navbar-custom{
  padding: .1em 0 !important;
}
nav .nav-link{
  font-size: 1.0em;
  transition: width 1s;
}
nav .nav-link:hover{
  color:#1565c0 !important;
}
.nav-link{
  transition: width 2s;
}
nav .know-how-logo img{
  width: 10%;
}
nav .nav-second-icon img {
  width: 20% !important;
  border-left: 1px solid  #1565c0;
  padding-left: .4em;
  transform: translateX(-0.3em);
}


/* Responsividade para telas pequenas */

#home button.navbar-toggler {
  border: none;
  transition: none;
}
#home button.navbar-toggler:hover, #home button.navbar-toggler:focus {
  border: none;
  outline: none;
  color:transparent;
}

.dropdown-item {
  font-size: 16px;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--global-color-primary) !important;
  color: var(--global-color-text) !important;
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-active-bg);
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}
header .dropdown-menu{
  translate: 0vw 0;
  border:none;
}
/*Main*/
  main .carousel{
  }
  .carousel-img{
    width: 100%;
    height: 40em;
    object-fit:cover;
    object-position:center;
  }
  main h5{
    font-weight: 480 !important;
  }
  main span{
    color:var( --global-color-primary);
  }
  .mais{
    padding: 5px;
    font-size: 15pt;
    background-color: var(--global-color-primary);
  }
  main .button{
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.5rem;
    width:13em;
  }
  main .button:hover{
    padding: 0.6rem 2.3rem;
    cursor:pointer;
  }
  main .text{
    font-size: 5.1vw; 
    margin-bottom: 3.6vw;
}
 main .text-second{
    font-size: 1.15vw;
    color:white;
    padding: 1vw ;
    margin-bottom: 4.1vw;
}
main h5 p {
    margin-top: .25vw;
}
  main .carousel-caption {
    position: absolute;
    top: 7rem;
    margin: 0 auto;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
    display: block!important;
  }


/*Madalidade*/

  #modalidade .container{
    width: 100%;
  }

  #modalidade .col-md-4{
    width: 26%;
  }

  #modalidade .row {
    column-gap: 2em;
   }

  #modalidade div.card{
    width: 100%;
    padding: 6% 0;
    margin:0 0;
    background:linear-gradient( var( --global-color-primary), var(--global-color-principal));
    color:white;
  }
  #modalidade div.card:hover{
    background: var(--global-color-principal);
  }
.n003{
  border-bottom: 3px solid #1565c0;
  
}

.me-2{
  width: auto;
  height: 100px;
}

.hero-section {
  position: relative;
  width: 100%;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantém proporção, mas cobre tudo */
  object-position: center;
}

.hero-image-wrapper .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(21, 101, 192, 0.6); /* overlay azul escuro translúcido */
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 15px;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
}

.hero-content p {
  font-size: 1.3rem;
}

@media (max-width: 768px) {
  .hero-section {
    height: 70vh;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
}

/*Contacto*/
.container-contacto{
  width: 100%;
  padding: 5vw 10vw;
  display: flex;
  color: #fff;
  background-color: #1565c0;
}

/* Estilização do "Sobre Nós" */
#sobre-nos {
  background: #f9f9f9;
  padding-top: 80px;
  padding-bottom: 80px;
}
.card-padding {
  margin-bottom: 20px;
}

#sobre-nos h2 {
  font-size: 2.5rem;
  color: #01122B;
  position: relative;
}

#sobre-nos .img-fluid {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(1, 143, 219, 0.713);
  transform: scale(1.05);
}

.formando-item {
  transition: all 0.3s ease;
}


/* Accordion estilizado */
.accordion-button {
  background-color: #ffffff;
  color: #01122B;
  font-weight: 600;
  transition: all 0.3s ease;
}

.accordion-button:hover {
  background-color: #e6f2ff;
  color: #004080;
}

.accordion-body {
  background-color: #f0f8ff;
  border-left: 3px solid #004080;
}


@media (max-width: 992px) {
  footer.footer {
    position: relative;
  }
}

.contacto-gride-info a{
  text-decoration: none;
}
.contacto-gride-info  b {
  color: #c0c0c0;
 }
 .contacto-gride-info h1{
    margin-bottom: 2.5vw;
 }
 .contacto-gride-info h3{
      font-weight: 600 !important;
 }
 .contacto-gride-whatsaap{
  margin-left: 6vw;
 }
.icon-contacto{
  color: #c0c0c0 !important;
}

.contacto-gride-whatsaap button{
  transform:translateY(.5vh);
  padding: .4vw 1vw;
}

.contacto-gride-whatsaap button:hover{
  transform: translateY(.6vh);
  padding: .5vw 1.3vw;
  background-color: #146c43;
}
.contacto-gride-whatsaap input, .contacto-gride-whatsaap textarea{
  width: 32vw;
}
.contacto-gride-whatsaap textarea{
  height: 15vh;
}


  /*ABOUT*/
  #about .container{
    margin-top: 2em;
    width: 100%;
  }

  .about-card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0.5em;
    color: var(--global-color-text);
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--global-color-text);
  }

  .bg-about{
    background:  linear-gradient(rgba(0,0, 0, 0.5), rgba(0, 0, 0, 0.4)), url(../imagens/sobre.jpeg);
    width: 90%;
    height: 30em;
    background-size: cover;
    background-position: center;
    padding-top: 6vh;
    border-radius:  2%;
    margin-bottom: 4em;
  }
  #about div.accordion{
      padding-top: 0em;
      width: 90%;
  }
  .accordion-button,.accordion-button:not(.collapsed),.accordion-item{
    background-color:#ffffff  !important;
  }
  .accordion-button:focus {
    box-shadow: none !important;
    border-color:none;
    background: none !important;
    color:black !important;
}
.accordion-body {
  padding: .1em .5em !important;
  transform: translateY(-6.2%) !important;
  margin-right: -1em;
}
  #about div.accordion-button {
    padding-top:0em !important; padding-bottom:0em !important;
  }
  #about div.accordion-button::after, #about div.accordion-button:focus,
  #about div.accordion-item::after, #about div.accordion-item:focus{
    border:none !important;
    background-color: none;
  }
  #about-now-how img {
    transform: translateX(-25%) translateY(5%);
    margin-bottom: -2em; 
  }
  .bg-about img{
    transform: translateX(50%) translateY(39%);
  }
 /* #about-us{
    color:#004e98;
  }*/

  #about div.card{
    background-color:#002f59;
    color:#FFFFFF;
    border:none;
    margin-bottom: 2vh;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2vh;
    padding-bottom: 3vh;
  }

  #about div.card:nth-of-type(1) {
    --offset: 1;
    padding-bottom:5vh!important;
  }

  #about .col-md-6:nth-of-type(2) {
    margin-top: 2em !important;
  }
  
  /*Footer*/
  .a-footer{
    margin-left: 3em;
  }
  .menu-footer{
    text-align: center;
  }

  .footer-title{
    text-align: center;
    margin-bottom: .9em;;
  }
  
  footer{
  background-color: #00214D;
    padding-top: 2vh;
  }

  .top-footer a{
    text-decoration: none;
    font-size: 2.5em;
    position: fixed;
    right: 2em;
    bottom: 2em;
    display: block !important;
  }

  .footer-contact{
      margin-top: -1em;
      width: 18em;
      margin-left:1em;
  }
  .footer-styles a{
      color:  #ffffff !important;
      text-decoration: none;
  }
  .footer-styles a:hover{
    color: var( --global-color-principal) !important;
    text-decoration: none;
}

  .footer-styles ul{
    color:  #ffffff;
    text-decoration: white;
  }
.footer-styles
{
 background-image:rgb(0, 166, 255) ;
}
.social-net{
  margin-top: -0.7em !important;
}

.copyright{
  padding-top: .7em;
}
/*Empresas*/


.hero-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: left;
}


.hero-content {
  position: relative;
  z-index: 2;
  padding-left: 5%;  /* distância da margem esquerda */
  max-width: 750px;  /* largura máxima do texto */
}

.hero-content h1 {
  font-size: 3rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero-content p {
  font-size: 1.2rem;
  opacity: 0.95;
}

/*Cursos*/

#curso{
  width: 100%;
}

#curso h4,#curso h3{
 margin-bottom: .9em;
 /*color:var(--global-color-primary);*/
}
#curso a button{

  float:right;
  padding: 5px;
  background-color:#1565c0;
  color: white;
  font-size: 17pt;
  width: 150px;
  
}
#curso a button:hover{

  transform: scale(1.0002);
  border:none;
  background-color:#2f90ff;
  color: white;

}



#curso table{

  margin: 0em auto;
  margin-top: -1em;
  font-size: 14.2px;

}
#curso table th{
  font-weight: 500 !important;
}
#curso table td{
  transform: translateX(6%)!important;
  font-weight: 700 !important;
} 
#curso table  .ms-h{
  margin-left: 20%!important;
}
.modal{
  font-size: 15px;
  text-align: justify;
}
.modal-header{
  color: white;
  background-color: #1565c0;
}
.modal-dialog {
  max-width: 60% !important;
}
.modal-footer div.btn{
  padding: .3em 5em!important;
  font-size: 12px !important;
  border: none !important;
}
.modal-body ul li:hover{
  cursor: pointer;
  color:#c0c0c0;
}
.modal-body ul.ul-certificado li{
  list-style-type: none;
}
.modal-body ul.ul-certificado-home li{
  list-style-type: none;
  transform: translateX(0) !important;
}
.btn-close{
  position: relative;
  left: -.6em !important;
  width: 2em !important;
}
.modal-footer button{
  position: relative;
  left: -1em !important;
  top: 0em !important;
  padding: .3em .8em !important;
  background-color:white !important;
  color:#1565c0;
  border: 1px solid #1565c0 !important;
}
.modal-footer button:hover{
  background-color:#1565c0 !important;
  color:white;
}
@media (max-width: 400px) {
  #curso .container{
    width: 100% !important;
    padding: 0 10% !important;
  }

  .modal{
    font-size: 14px;
  }
  .modal-dialog {
    max-width: 100% !important;
  }
  .modal-dialog .col-md-6{
    width: 100% !important;
  }

}
@media (min-width: 400px) and (max-width: 550px){
  #curso .container{
    width: 100% !important;
    padding: 0 10% !important;
    margin-top:-5em !important;
  }
  #curso .card{
    width: 100%;
  }
  .modal{
    font-size: 14px;
  }
  .modal-dialog {
    max-width: 100% !important;
  }
  .modal-dialog .col-md-6{
    width: 100% !important;
  }
}
  @media (min-width: 550px) and (max-width: 600px){
 
    #curso{
      margin-top:-1em !important;
    }
    .modal{
      font-size: 13.6px;
    }
    .modal-dialog {
      max-width: 90% !important;
      margin: auto auto auto auto!important;
    }
    .modal-dialog .col-md-6{
      width: 100% !important;
    }
}
@media (min-width: 600px) and (max-width: 767px){
  #curso{
    margin-top:1.5em !important;
  }
  .modal{
    font-size: 14px;
  }
  .modal-dialog {
    max-width: 80% !important;
    margin: auto auto auto auto!important;
  }
  .modal-dialog .col-md-6{
    width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 991px){
  #curso .container{
    width: 100% !important;
    padding: 0 5% !important;
    margin-top:-5.6em !important;
  }
  .modal{
    font-size: 14.3px;
  }
  .modal-dialog {
    max-width: 80% !important;
    margin: auto auto auto auto!important;
  }
  .modal-dialog .col-md-6{
    width: 100% !important;
  }
  #curso a button{
    margin-top: 2em;
    margin-right: -1.1em;
    float:right;
    padding: .2em .6em;
  }
}

@media (min-width:992px) and (max-width:1023px){
  #curso .container{
    width: 100% !important;
    padding: 0 5% !important;
  }
  .modal{
    font-size: 14.3px;
  }
  .modal-dialog {
    max-width: 80% !important;
    margin: auto auto auto auto!important;
  }
  .modal-dialog .col-md-6{
    width: 100% !important;
  }
  #curso a button{
    margin-top: 2em;
    margin-right: -1.1em;
    float:right;
    padding: .2em .6em;
  }
}
@media (min-width:1024px) and (max-width:1046px){
  #curso .container{
    width: 100% !important;
    padding: 0 4% !important;
    margin-top: -17em !important;
  }
  #curso .card{
    width: 105% !important;
  }
  .modal{
    font-size: 14.3px;
  }
  .modal-dialog {
    max-width: 80% !important;
    margin: auto auto auto auto!important;
  }
  .modal-dialog .col-md-6{
    width: 100% !important;
  }
  #curso a button{
    margin-top: 2em;
    margin-right: -1.1em;
    float:right;
    padding: .2em .6em;
  }
}
@media (min-width:1047px) and (max-width:1199px){
  #curso .container{
    width: 100% !important;
    padding: 0 5% !important;
    margin-top: -14em !important;
  }
  .modal{
    font-size: 14.3px;
  }
  .modal-dialog {
    max-width: 80% !important;
    margin: auto auto auto auto!important;
  }
  .modal-dialog .col-md-6{
    width: 100% !important;
  }
  #curso a button{
    margin-top: 2em;
    margin-right: -1.1em;
    float:right;
    padding: .2em .6em;
  }
}


.row{
  display: flex;
}
  @media (max-width:991px){
    nav .know-how-logo img{
      width:12% !important;
      margin-right: -0.5em;
    }
    nav .nav-second-icon img {
      width: 23% !important;
      display:inline;
      transform: translateX(-0.12em);
      border-left: 1px solid   #1979e6;
    }
   
    nav button {
      justify-content: flex-end !important;
      float: right;
    }
  }
  @media (max-width:400px){
    nav .know-how-logo img{
      width:22% !important;
      margin-right: -0.5em;
    }
    nav .nav-second-icon img {
      width: 38% !important;
      transform: translateX(-0.1em);
      display:inline;
    }
    .nav-primary{
      display:flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding-left: 10%;
      padding-right: 10%;
    }
    .navbar .container{
      margin: auto;
      width: 120%;
      
    }
  }
  @media (max-width: 779px) {

    header nav ul li a, .social-net a{
      text-decoration: none;
      font-weight: bold;
      font-size: 1em;
    }
    .nav-primary{
       display:block; margin: 0 auto !important; padding-bottom: 0;
    }
    .primary-navbar{
      padding-top:2.3vh !important;
    }
    .nav-primary b{
     font-size:90%;font-weight:600; display:block !important; text-align: center;
    }
    .nav-primary ul {
      margin-top: -2vh; padding: 0 5px; text-align: center !important;
    }
    
    /*nav .collapse{
      position: relative;
      top:-4vh;
    }*/
    nav .nav-link{
      font-size: 1em;
      transition: width 1s;
    }
    .dropdown-item {
      font-size: 13px !important;
      margin-left: 0;
    }

    .dropdown-menu li a {
      word-wrap: break-word;
      white-space: normal;
  }
  
  .dropdown-menu{
      max-width: 100%;
  }
    .header .dropdown-menu{
    }
    nav .collapse{
      width: 14% !important;
      padding-left: 0 !important;
    }
  
  }

   @media (min-width: 779px) and (max-width: 1023px) {

   .primary-top-nav div.navbar-collapse  {
      display: inline !important;
    }
    header .dropdown-menu{
      transform: translateX(-9em) !important; 
    }
    nav .know-how-logo img{
      width: 16%;
    }
    nav .nav-second-icon img {
      width: 27% !important;
      border-left: 1px solid  #1565c0;
    }
  }
  @media (min-width: 1024px) and (max-width: 1200px) {

    .primary-top-nav div.navbar-collapse  {
       display: inline !important;
     }
   
   
     header .dropdown-menu{
     transform: translateX(-9em) !important;
      
     }
     nav .know-how-logo img{
      width: 16%;
    }
    nav .nav-second-icon img {
      width: 27% !important;
      border-left: 1px solid  #1565c0;
    }
     
   }
  
  /*Main*/
  @media (max-width:1023px){
    main .carousel-caption{
      -webkit-flex-direction: column;
      flex-direction: column;
      
    }
    main h1{
      font-size: 2rem !important;
    }
    main h5{
      font-size: .9rem !important;
    }
    main .carousel-caption {
      margin: auto auto;
    }
    main .button{
      width:10em;
      margin: 0 auto;
    }
  }
  @media (max-width: 400px) {
    .carousel-img{
      height: 265px;
    }
    main .carousel-caption{
      position: absolute;
      top: -1rem;
    }
    main .button{
      border: 1px solid transparent;
      padding: 0.45rem .2rem;
      font-size:12px;
      line-height: 1.5;
      border-radius: 0.5rem;
      width:10em;
    }
    main .button:hover{
      padding: 0.6rem .3rem;
      font-size:12px;
      cursor:pointer;
    }
    main iframe{
      height:23.6vh;
    }
  }
  @media (max-width: 325px) {
    .carousel-img{
      height: 265px;
    }
    main .carousel-caption{
      position: absolute;
      top: -1rem;
    }
    main .button{
      border: 1px solid transparent;
      padding: 0.45rem .2rem;
      font-size:12px;
      line-height: 1.5;
      border-radius: 0.5rem;
      width:10em;
    }
    main .button:hover{
      padding: 0.6rem .3rem;
      font-size:12px;
      cursor:pointer;
    }
    main iframe{
      height:25vh;
    }
  }
  @media (min-width: 400px) and (max-width: 700px) {
    main iframe{
      height:35.6vh;
    }

  }
  @media (min-width: 700px) and (max-width:1023px){
    main iframe{
      height:55vh;
    }
  }

  .imgconcto{
    height: 100%;
  }

  /*CONTACTO*/
  @media (max-width: 800px) {
    #contacto div.row {
      -webkit-flex-direction: column;
      flex-direction: column;
    }
    #contacto input{
      width: 85%;
      font-size: 12px;
    }
    #contacto textarea{
      width: 85%;
      height: 9em;
      font-size: 12px;
    }
    .container-contacto{
      padding-bottom: 15%;
    }
    .contacto-gride-whatsaap button{
      padding: 1.4vw 2.7vw;
      font-size: 13px;
    }
    .contacto-gride-whatsaap button:hover{
      transform: translateX(0) translateY(.6vh);
      padding: 1.7vw 2.8vw;
    }
    #contacto h1{
      
    }
    #contacto h3{
     
    }
    #contacto h4{
      
    }
    #contacto p a,  #contacto p,#contacto label {
      font-size: 13px; 
    }

   }

   /*MODALIDADE*/

   @media (max-width:400px){

    #modalidade .container{
      width: 100% !important;
      padding: 0 10% !important;
      transform: translateY(-11em);
      margin-top: 150px;
    }

    #modalidade div.card{
      width: 100% !important;
      padding: 1% 0;
      margin: 0 auto;
      margin-bottom:.9em ;
    }

    #modalidade .col-md-4{
      width: 100%;
    }
  
    #modalidade .row {
      column-gap: 0em;
    }

   }

   @media (min-width:400px) and (max-width:767px){

    #modalidade .container{
      width: 100% !important;
      padding: 0 10% !important;
      transform: translateY(0em);
      margin-bottom: 0em;

    }


    #modalidade div.col-md-4{
      min-width: 95% !important;
    }


    #modabilidade h4{
      margin-bottom: 0 !important;
    }

    #modalidade div.card{
      width: 100% !important;
      padding: 0;
      margin-bottom:.9em ;
    }
    
  }

   @media (min-width:576px) and (max-width:767px){
    #modalidade .container{
      width: 100% !important;
      padding: 0 10% !important;
      transform: translateY(0em);
      margin-bottom: 0em;
    }
    #modalidade div.container-modalidade{
      padding: 0 30%;
    }
    #modabilidade h4{
      margin-bottom: 0 !important;
    }
    #modalidade div.card{
      width:90% !important;
      margin-bottom:.9em ;
    }
   }
 
   @media (min-width:768px) and (max-width:991px){
    #modalidade .container{
      width: 100% !important;
      padding: 0 5% !important;
      margin-top:4em !important;
    }
    #modalidade div.col-md-4{
      min-width: 50% !important;
    }
    #modalidade div.card{
      width: 100%;
      margin-bottom:.9em ;
    }
    
    #modalidade div.row{
      column-gap: 0;
    }
   }
   @media (min-width:992px) and (max-width:1023px){
    #modalidade .container{
      width: 100% !important;
      padding: 0 5% !important;
      margin-top:4em !important;
    }
    #modalidade div.col-md-4{
      min-width: 33.33333333% !important;
    }
    #modalidade div.card{
      width: 100%;
      margin-bottom:.9em ;
    }
    
    #modalidade div.row{
      column-gap: 0;
    }
   }
   @media (min-width:1024px) and (max-width:1200px){
    #modalidade .container{
      width: 100% !important;
      padding: 0 4% !important;
      margin-top:5em !important;
    }
    #modalidade div.col-md-4{
      width: 33.3% !important;
      margin: 1em 0 !important;
    }
    #modalidade div.card{
      width: 100%;
    }
    #modalidade div.row{
      column-gap: 0;
    }
   }
  /*ABOUT*/
  @media screen and (max-width:768px){
    #about div.container #bg-about-img{
      display:none !important;
    }
   /* #about div.col-md-6{
      transform: translateY(-7em);
      margin-bottom: -5.5em;
      width: 100%;
      margin-left:  auto !important;
      margin-right: auto;
    }*/

    #about div.accordion-body{
      margin-top: 0em !important;
    }
  }
  @media (max-width: 400px) {
    #about .container{
      width: 100% !important;
      padding: 0 10% !important;
    }
  }
  @media (max-width: 360px) {
    
    #about iframe{
      height:62vh !important;
    }
   
    #about .container:nth-of-type(2){
      margin-top: -3.1em;
    }
    #about div.col-md-6{
      transform: translateY(-3em);
      width: 100%;
      margin-bottom: -1em;
    }
    #about .accordion{
      width: 100% !important;
      margin-left: -0em;
    }
    
  }
  @media (max-width: 321px) {
    #about iframe{
      height:62vh !important;
    }
    #about .container:nth-of-type(2){
      margin-top: -1em;
    }
    #about div.col-md-6{
      transform: translateY(-3em);
      width: 100%;
      margin-bottom: -1em;
    }
    #about .accordion{
      width: 100% !important;
    }
  }
  @media (min-width: 360px)  and (max-width:440px) {
    #about iframe{
      height:65vh !important;
    }
  
    
  }
 

  @media (min-width: 440px) and (max-width: 767px) {
    #about .container{
      width: 100% !important;
      padding: 0 10% !important;
    }
    #about iframe{
      height:42vh;
    }
    /*#about div.col-md-6{
      transform: translateY(-3.5em);
      margin-bottom: -1em;
      width: 100%;
      margin-left:  auto !important;
      margin-right: auto;
    }
    .text-about{
      margin-bottom: 4vh;
      font-size: 15px;
    }
    #about div.card{
      font-size: 14px !important;
    }*/
    #about .container:nth-of-type(2){
      margin-top: -2em;
    }
    #about div.col-md-6{
      transform: translateY(-3em);
      width: 100%;
      margin-bottom: -1em;
    }
    #about .accordion{
      width: 100% !important;
      margin-left: -0em;
    }
  }
  @media (min-width: 768px) and (max-width:991px){
    #about iframe{
      height:28.8vh;
    }
    #about .container{
      width: 100% !important;
      padding: 0 5% !important;
    }
    #about div.container #bg-about-img{
      display:none !important;
    }
    .bg-about img{
      transform: translateX(30%) translateY(50%);
    }
    #about div.col-md-6{
      transform: translateY(-3em);
      width: 100%;
      margin-bottom: -1em;
    }
   
  }
  @media (min-width: 992px) and (max-width:1023px){
    #about iframe{
      height:26.6vh;
    }
    #about .container{
      width: 100% !important;
      padding: 0 5% !important;
    }
    #about div.container #bg-about-img{
      display:none !important;
    }
    .bg-about img{
      transform: translateX(30%) translateY(50%);
    }
    #about div.col-md-6{
      transform: translateY(-3em);
      width: 100%;
      margin-bottom: -1em;
    }
   
  }

  @media (min-width: 1024px) and (max-width:1199px){
      
    #about .container{
        width: 100% !important;
        padding: 0 4% !important;
        margin-top: 3em;
      }
      #about iframe{
        height:27vh;
      }
      .bg-about{
        height: 25em;
        width: 98%;
      }
      .bg-about img{
        transform: translateX(30%) translateY(25%);
      }
      #about div.accordion{
        padding-top: 0em;
        width: 100%;
    }
    #about .container:nth-of-type(2){
      margin-top: -1em;
    }
    #about .col-md-6:nth-of-type(2) {
      margin-top: -1em !important;
    }

  }
 

  /*FOOTER*/
  @media (max-width: 350px) {
    footer{
      font-size: 13px;
      padding-top: 1vh;
      padding-right: 0;
    }
    footer h5{
      font-size: 18px;
    }
    footer .social-net a{
      font-size: 1.35em;
    }
    .social-net{
      font-size: 1.1em;
    }
    a{
      font-size: 1.25em;
    }
    .top-footer a{
      font-size: 2.4em;
      position: fixed;
      right: 1.3em;
      bottom: 1.3em;
      display: block !important;
    }
    .menu-footer{
      padding-top:1em;
    }
  }
  @media (min-width: 350px) and (max-width:500px){
    footer{
      font-size: 14px;
      padding-top: 1vh;
      padding-right: 0;
    }
    footer h5{
      font-size: 18px;
    }
    footer .social-net a{
      font-size: 1.35em;
    }
    .social-net, a{
      font-size:14px;
    }
    .top-footer a{
      font-size: 2.4em;
      position: fixed;
      right: 1.3em;
      bottom: 1.3em;
      display: block !important;
    }
  }

    @media (min-width: 500px) and (max-width:1024px){
      
     footer div.footer-last-item{
        padding-top:0em !important;
      }
    }

    @media (min-width:768px) and (max-width:991px){
      footer .col-md-6{
        width: 33.3%;
      }
      footer .col-md-6:nth-of-type(4){
        display: none;
      }
      footer .row{
        padding-bottom: 3em;
      }
    }