@font-face {
    src: url(../fonts/Roboto-Regular.ttf);
    font-family: 'Roboto-Regular';    
} 
@font-face {
    src: url(../fonts/Roboto-Medium.ttf);
    font-family: 'Roboto-Medium';    
} 
@font-face {
    src: url(../fonts/Roboto-Black.ttf);
    font-family: 'Roboto-Black';    
} 
@font-face {
    src: url(../fonts/OpenSans-Regular.ttf);
    font-family: 'OpenSans-Regular';    
} 
@font-face {
    src: url(../fonts/OpenSans-SemiCondensed-Regular.ttf);
    font-family: 'OpenSans-SemiCondensed';    
} 

*{
  
   font-family: 'OpenSans-Regular';

}

#info{
    background-color: #74B5F9;
    height: 5px;
}

#topo{
    background-color: #fff;
    padding: 10px 0;
}

#topo .navbar-nav .nav-item .nav-link{
        color: #000;
        font-family: "OpenSans-Regular";
        font-size: 17px;
        font-weight: 600;
}
#topo .navbar-nav .nav-item .nav-link:hover{
        color: #4F4F4F;
}

#topo .navbar-nav .active .nav-link{
           color:   #4F4F4F;
}

#banner-1{
      background: url('../img/back1.jpg');
      background-size: cover;
      padding: 120px 0px;
}

#banner-1 .banner-content h2{
           font-family: "Roboto-Regular";
           color: #fff;
           font-size: 46px;
           font-weight: bold;
}
#banner-1 .banner-content h5{
             color: #FFFAFA;
             font-family: "Roboto-Regular";
             margin: 30px 0px;
}

#banner-1 .btn-success{
         background-color: #74B5F9;
         border: none;
         color: #000;
}

#banner-1 .btn-success:hover{
           background-color: blue;
           color: #c6c6c6;
}

#banner-1 .btn-success:active, #banner-1 .btn-success:focus{
              box-shadow: none !important;
}

#services .card, #services2 .card{
            -webkit-box-shadow: 0px 3px 20px -4px rgba(0,0,0,0.64);
            -moz-box-shadow: 0px 3px 20px -4px rgba(0,0,0,0.64);
            box-shadow: 0px 3px 20px -4px rgba(0,0,0,0.64);
}

#services{
       margin-bottom: 60px;
}

#services .title{
        font-family: "Roboto-Regular";
        text-align: center;
        font-size: 45px;
        padding-top: 55px;
        color:  #4F4F4F;
}

#services .subtitle{
          font-size: 19px;
          text-align: center;
          margin-bottom: 45px;
          color: #6c6c6c;
}

#services .card-body{
          margin-top: 20px;
          width: 85%;
}


#services .card-body .card-title{
          font-size: 25px;
          margin-bottom: 20px;
}

#services .card-body .card-text{
          font-size: 15px;
          color: #6c6c6c;
}
#services2 .card{
          min-height: 300px;
}

#services2 .title{
        font-family: "Roboto-Regular";
        text-align: center;
        font-size: 45px;
        padding-top: 55px;
        color:  #4F4F4F;
}

#services2 .subtitle{
          font-size: 19px;
          text-align: center;
          margin-bottom: 45px;
          color: #6c6c6c;
}

#services2 .card-body{
          margin-top: 20px;
          width: 90%;
}


#services2 .card-body .card-title{
          font-size: 21px;
          margin-bottom: 20px;
}

#services2 .card-body .card-text{
          font-size: 15px;
          color: #6c6c6c;
}

#services2 .card .card-body h3{
              font-size: 38px;
              font-weight: bold;
              color: #275981;
              font-family: "OpenSans-Regular";
              text-align: center;
              margin-bottom: 20px;
}

#faqs{
    margin-bottom: 50px;
}

#faqs .title{
        font-family: "Roboto-Regular";
        text-align: center;
        font-size: 45px;
        padding-top: 55px;
        color:  #4F4F4F;
}

#faqs .subtitle{
          font-size: 19px;
          text-align: center;
          margin-bottom: 45px;
          color: #6c6c6c;
}

#faqs .card-header{
        background-color: #74B5F9;
}
#faqs .card{
        margin-bottom: 10px;
}

#faqs .card-header:hover{
         cursor: pointer;
}

#faqs .card-body{
      font-size: 19px;
      transition: width 2s;
}

#faqs .fa{
     color: #fff;
     margin-right: 10px;
}

#area5{
    background: url("../img/backfooter.jpg");
    background-size: cover;
    padding: 100px 0px;
}

#area5 h2{
           font-family: "Roboto-Regular";
           color: #fff;
           font-size: 38px;
           font-weight: bold;
}
#area5 h5{
             color: #FFFAFA;
             font-family: "Roboto-Regular";
             margin: 30px 0px;
}

#area5 .btn-success{
         background-color: #74B5F9;
         border: none;
         color: #000;
}

#area5 .btn-success:hover{
           background-color: blue;
           color: #c6c6c6;
}

#area .btn-success:active, #area5 .btn-success:focus{
              box-shadow: none !important;
}

#contacts{
      margin-bottom: 50px;
}

#contacts h2{
        font-family: "Roboto-Regular";
        font-size: 45px;
        padding-top: 55px;
        color:  #4F4F4F;
}

#contacts .description{
          margin-bottom: 30px;
          font-size: 19px;
}

#aboutus{
     margin: 50px 0px;
}

#aboutus .image{
         background: url("../img/imgabout.jpg");
         background-size: cover;
         height: 300px;
}

#aboutus .text{
         padding: 20px 50px;
}

#aboutus .text h2{
        font-family: "Roboto-Regular";
        font-size: 38px;
        padding-top: 55px;
        color:  #4F4F4F; 
}

#aboutus .text p{
           font-size: 19px;
}

#testimonials{
        margin-bottom: 80px;
}

#testimonials .card{
       -webkit-box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.75);
       -moz-box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.75);
       box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.75);
       min-height: 237.5px;
}

#testimonials h2{
        font-family: "Roboto-Regular";
        margin-bottom: 40px;
        text-align: center;
        font-size: 45px;
        padding-top: 55px;
        color:  #4F4F4F; 
}

#testimonials .card-body{
             text-align: center;
}

#testimonials i{
        display: block;
        font-size: 27px;
        margin-bottom: 20px;
}

#testimonials .card-title{
            font-weight: 400;
            margin-bottom: 20px;
}

#testimonials .card-text{
           color: #4F4F4F;
           font-size: 17px;
           margin-bottom: 30px;
}

#contacts2{
       margin: 0px;
       background: url("../img/backcontact.jpg");
       background-size: cover;
       background-position: center;
       padding-top: 60px;
       padding-bottom: 100px;
}

#contacts2 h2{
        color: #000;
        margin-bottom: 40px;
}

#contacts2 h5{
        margin-bottom: 40px;
        font-size: 18px;
}

#contacts2 a{
       margin-bottom: 80px;
}

#contacts2 .text{
        padding-left: 50px;
}

#contacts2 .inner-info{
          background-color: #FFFAFA;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 30px 0px;
}

#contacts2 .inner-info i{
                font-size: 45px;
                margin-right: 10px;
}

#contacts2 .inner-info p{
               display: inline;
               margin-top: 15px;
}

#formu{
    padding: 110px 0px;
}

#formu h2{
           font-family: "Roboto-Regular";
           color: #000;
           font-size: 46px;
           font-weight: bold;
           text-align: center;
           margin-bottom: 20px;
}
#formu h4{
             color: #000;
             font-family: "Roboto-Regular";
             text-align: center;
             font-size: 19px;
             margin-bottom: 40px;
}

#formu .btn-primary{
         background-color: #74B5F9;
         border: none;
         color: #000;
         margin-bottom: 10px;
}

#formu .btn-primary:hover{
           background-color: blue;
           color: #c6c6c6;
}

#formu .btn-primary:active, #formu .btn-primary:focus{
              box-shadow: none !important;
}

footer{
     padding: 30px 0px;
     text-align: center;
     background-color: #74B5F9;
     color: black;
}

footer p{
       margin: 0px;
}

/* celular */

@media screen and (max-device-width: 992px){

               #services .card,  #services2 .card{
                        margin-bottom: 25px;
                        text-align: center;
               }

               #services2 .card-body .card-title{
                          font-size: 28px;
              }

              #services2 .card-body .card-text{
                          font-size: 20px;
              }

              #services2 .card .card-body h3{
                          font-size: 44px;
              }

              #testimonials .card{ 
                          margin-bottom: 30px;
              }

              #testimonials .card-title{
                             font-size: 25px;
              }

              #testimonials .card-text{
                               font-size: 20px;
              }
              #contacts h5{
                     font-size: 23px;
              }

              #contacts2 .inner-info i{
                      font-size: 39px;
              }

              #contacts2 .inner-info{
                     flex-direction: column;
                     padding: 10px 10px;
              }

              #contacts2 .inner-info{
                        margin-bottom: 16px;
              }

              #contacts2 .inner-info p{
                         font-size: 20px;
              }

}

@media screen and (max-device-width: 768px){

              #info .mail, #info .fone{
                   text-align: center;
              }

              #services .card-body .card-text{
                         font-size: 19px;
              }

              #contacts .contactinfo{
                    margin-bottom: 30px;
              }

              #contacts .contactinfo p{
                          font-size: 18px; 
              }

              #contacts .description{
                          font-size: 20px;
              }

              #aboutus{
                  margin-bottom: 30px;
              }

              #testimonials h2{
                     padding-top: 0px;
              }
 
}

@media screen and (max-device-width: 576px){

        .navbar-brand{
    
                 width: 100%;
                 text-align: center;
                 margin-bottom: 10px;

          }   

        .navbar-brand img{
                width: 90%;
        }      

        #banner-1{
              padding: 100px 0px;
        }

       #formu h2{
               font-size: 36px;
        }


}

@media screen and (max-device-width: 430px){

            #banner-1 .banner-content h2, #area5 h2{
                      font-size: 34px;
            }   

             #contacts h5{
                     font-size: 17px;
              }          

}