:root {
    --bg1: #a5d3db;  /*dacec9; #f5efe9; #ece1d8*/
    --bg2: #e0d5d1; /*6BB3C4; #F0F2F3; f8f3f3;*/
    --bg3: #cbb7ae; /*b9a698;*/
    --brand1: #a36046 /*#A35F4A #a36046 #a9593f*/;
    --brand2: #147294;
    --details: #f7931e;
    --menu: #444;
    --titulos: #147294;
    --text1: #343a40;
    --text2: #6c3a2a;
}

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Poppins:wght@200;300;400;600;700;900&family=Plus+Jakarta+Sans&display=swap'); 

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.8;
    color: var(--text1);
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: hidden;
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    
}
h1 {font-weight: 900;}
h2 {font-weight: 700;}
/*h5 {color: var(--titulos);}*/
img {
    top: 0;
    left: 0;
}
hr {color: var(--brand1); margin-top: 0;}
.small-title, .small-title-black {
    color: #06232e;
    font-size: 1.5em;
    font-family: 'Dancing Script', cursive;
}
.small-title {
    color: #05506c;
    font-size: 1.8em;
}
a {
    text-decoration: none;
    transition: all 0.4s ease;
    color: var(--details);
}

/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
  background: var(--titulos);
  font-size: 14px;
  padding: 0;
  color: rgba(255, 255, 255, 0.9);
  height: 40px;
}

#topbar .contact-info, #topbar a, #topbar a:hover {
  padding-left: 5px;
  color: #fff;
}
#topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}
#topbar .contact-info i a:hover {
  color: var(--details);
}
#topbar .cta a {
  color: #fff;
  background: var(--brand1);
  padding: 7px 20px;
  display: inline-block;
  transition: 0.3s;
}
#topbar .cta a:hover {
  background: #ff6b3b;
}
#menu {
  height:90px;
  transition: all 0.2s;
}

.navbar {
    margin-top: 40px;
    box-shadow: 0 5px 8px rgba(0,0,0,0.1);
    /*background: rgba(255,255,255,0.1);
    background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 45%);
     */
}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
    color: var(--brand2);
}

.menu-solido {
     background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0));
     background-color: #fff;
     margin-top: 0px;
}

@media (max-width: 991px) { 
    .navbar {
        background: #fff;
        
    }
}
section {
    padding-top: 10em;
    padding-bottom: 9em;
    position: relative;
    z-index: 2;
}

.icono-inicio {
    font-size: 30px;
    background: var(--details);
    padding: 8px;
    color: #fff;
    border-radius: 50px;
    position: relative;
    z-index: 5;
    box-shadow: 10px 2px 15px rgba(0, 0, 0,.1);
}
.btn-comenzar {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    transition: 0.5s;
    margin-left: -10px;
    padding: 7px 26px 7px 26px;
    color: #fff;
    background: var(--brand2);
    border-radius: 0 30px 30px 0;
    position: relative;
    z-index: 4;
}

.hero-section {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content:flex-start;
    align-items: stretch;
    background-position: center;
}

.overlay {
    background: rgba(0,0,0,.75);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}
.overlay-light {
    background: rgba(255,255,255,.60);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}
.overlay-footer {
    background: rgba(5,80,108,.9);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}
.bg-cover {
    position: relative;
    overflow: hidden;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment:fixed;
    z-index: -2;
}
.parallax {
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
    min-height: 350px;
    z-index: 2;
}
.parallax h1 {
    line-height: 1.6em;
}
#inicio {
    background-color: var(--bg3);
    background-image: url(../img/coverst8.jpg);
    background-size: cover;
    background-position: center center; 
}
#inicio h1 {
    color: #fff;
    font-size: 3em;
    text-transform: uppercase;
}
#inicio h1 span {
    color: var(--details);
    text-shadow: 4px 4px 4px rgba(70,32,8,.5);
}
.parallax h1 {
    color: #fff;
    font-size: 2.8em;
}
@media (max-width: 767px) {
    .creditos {text-align: center;} 
}
@media (max-width: 576px) {
    #topbar {font-size: 12px; padding: 0; margin: 0;}
    #inicio {text-align: center;} 
    #inicio h1 {margin-top: 20px; font-size: 2.3em;}
    .container {width: 90%;}
    #menu .container {width: 100%;}
    #comenzar {padding-top: 10px;}
    .btn-comenzar {font-size: 14px;}
    .bg-cover h1 {font-size: 2em;} 
}

.top {
  clip-path: polygon(0 0,60% 100%, 100% 0,100% 100%, 0 100%);
  height: 60px;
  background-color: var(--bg2);
}
.bottom {
  clip-path: polygon(0 0, 0 100%, 40% 0, 100% 100%, 100% 0);
  height: 60px;
  background-color: var(--bg1);
}


#features::after, #features::before /*, #howto::after, #howto::before*/ {
    position: absolute;
    content: '';
    height: 50px;
    background: var(--bg1) !important;
    /*border-bottom: 6px solid rgba(255,153,53,.2);*/
    top: -25px;
    z-index: 2;
}



.btn {
    padding: 12px 22px;
    transition: all 0.5s ease;
}

.btn-principal {
    background: rgba(76,136,161,.2);
    border: 2px solid var(--brand2);
    border-radius: 30px;
    color: var(--brand2) !important;
    font-weight: 400;
    z-index: 10;
}
.btn-principal:hover {
    background: rgba(76,136,161,1);
    border: 0;
    color: #fff !important;
}
.shape1 {
    width: 460px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.shape2 {
    width: 460px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}
.servicio {
    background-color: rgba(255,255,255,.8);
    padding-bottom: 20px;
    max-width: 500px;
    margin: auto;
}
.servicio .servicio-img {
   position: relative;
   margin: auto;
}
.servicio .servicio-img img:hover {
    filter: drop-shadow(10px 10px 15px gray);;
}

.servicio .servicio-img .iconos {
    background: var(--details);
    height: 100px;
    width: 100px;
    color: #ffffff;
    border-radius: 100px;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
}

#features .icon-box {
    color: var(--brand1);
}