/*--------------------------------------------------------------------- File Name: responsive.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,600,700,900&display=swap');

/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/


/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(swiper.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
     box-sizing: border-box !important;
}

html {
     scroll-behavior: smooth;
}

@font-face {
  font-family: 'Satoshi-Variable';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2'),
       url('../fonts/Satoshi-Variable.woff') format('woff'),
       url('../fonts/Satoshi-Variable.ttf') format('truetype');
       font-weight: 300 900;
       font-display: swap;
       font-style: normal;
}


/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 900.0;
*
* available axes:

* 'wght' (range from 300.0 to 900.0)

*/

@font-face {
  font-family: 'Satoshi-VariableItalic';
  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-VariableItalic.woff') format('woff'),
       url('../fonts/Satoshi-VariableItalic.ttf') format('truetype');
       font-weight: 300 900;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'Satoshi-Light';
  src: url('../fonts/Satoshi-Light.woff2') format('woff2'),
       url('../fonts/Satoshi-Light.woff') format('woff'),
       url('../fonts/Satoshi-Light.ttf') format('truetype');
       font-weight: 300;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'Satoshi-LightItalic';
  src: url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-LightItalic.woff') format('woff'),
       url('../fonts/Satoshi-LightItalic.ttf') format('truetype');
       font-weight: 300;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'Satoshi-Regular';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2'),
       url('../fonts/Satoshi-Regular.woff') format('woff'),
       url('../fonts/Satoshi-Regular.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'Satoshi-Italic';
  src: url('../fonts/Satoshi-Italic.woff2') format('woff2'),
       url('../fonts/Satoshi-Italic.woff') format('woff'),
       url('../fonts/Satoshi-Italic.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'Satoshi-Medium';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2'),
       url('../fonts/Satoshi-Medium.woff') format('woff'),
       url('../fonts/Satoshi-Medium.ttf') format('truetype');
       font-weight: 500;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'Satoshi-MediumItalic';
  src: url('../fonts/Satoshi-MediumItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-MediumItalic.woff') format('woff'),
       url('../fonts/Satoshi-MediumItalic.ttf') format('truetype');
       font-weight: 500;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'Satoshi-Bold';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2'),
       url('../fonts/Satoshi-Bold.woff') format('woff'),
       url('../fonts/Satoshi-Bold.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'Satoshi-BoldItalic';
  src: url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-BoldItalic.woff') format('woff'),
       url('../fonts/Satoshi-BoldItalic.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: italic;
}


@font-face {
  font-family: 'Satoshi-Black';
  src: url('../fonts/Satoshi-Black.woff2') format('woff2'),
       url('../fonts/Satoshi-Black.woff') format('woff'),
       url('../fonts/Satoshi-Black.ttf') format('truetype');
       font-weight: 900;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'Satoshi-BlackItalic';
  src: url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
       url('../fonts/Satoshi-BlackItalic.woff') format('woff'),
       url('../fonts/Satoshi-BlackItalic.ttf') format('truetype');
       font-weight: 900;
       font-display: swap;
       font-style: italic;
}



body {
     color: #666666;
     font-size: 14px;
     font-family: 'Nunito', sans-serif;
     line-height: 1.80857;
     font-weight: normal;
}

a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {
     font-size: 24px;
}

h2 {
     font-size: 22px;
}

h3 {
     font-size: 18px;
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

*,
*::after,
*::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none!important;
     opacity: 1
}

button:focus {
     outline: none;
}

ul,
li,
ol {
     
     
     list-style: none;
}

p {
     margin: 0px;
     font-weight: 500;
     font-size: 15px;
     line-height: 24px;
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

img {
     max-width: 100%;
     height: auto;
}

 :focus {
     outline: 0;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

.lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}

.form-control:focus {
     border-color: #ffffff !important;
     box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input {
     border: none !important;
}

.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     float: left;
     width: 100%;
}

.layout_padding {
     padding-top: 90px;
     padding-bottom: 90px;
}

.layout_padding_2 {
     padding-top: 75px;
     padding-bottom: 75px;
}

.light_silver {
     background: #f9f9f9;
}

.theme_bg {
     background: #38c8a8;
}

.margin_top_30 {
     margin-top: 30px !important;
}

.full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}


/**-- heading section --**/


/*---------------------------- preloader area ----------------------------*/

.loader_bg {
     position: fixed;
     z-index: 9999999;
     background: #fff;
     width: 100%;
     height: 100%;
}

.loader {
     height: 100%;
     width: 100%;
     position: absolute;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
}

.loader img {
     width: 280px;
}


/*-- menu_sitbar--*/

.menu_sitbar {
     float: left;
     width: 120px;
     height: 100vh;
     background: #0808ff;
     border-right: #fff solid 7px;
     padding: 33px;
}

#sidebar {
     position: fixed;
     top: 0;
     left: -280px;
     height: 100%;
     z-index: 1000;
     background: #002D62;
     color: #fff;
     transition: all 0.3s;
     overflow-y: scroll;
     box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
     left: 0;
     width: 100%
}

#dismiss {
     width: 35px;
     height: 35px;
     line-height: 34px;
     text-align: center;
     background: #000;
     position: absolute;
     top: 10px;
     right: 10px;
     cursor: pointer;
     -webkit-transition: all 0.3s;
     -o-transition: all 0.3s;
     transition: all 0.3s;
}

#dismiss:hover {
     background: #35bff8;
     color: #fff;
}

.overlay {
     display: none;
     position: fixed;
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.7);
     z-index: 998;
     opacity: 0;
     transition: all 0.5s ease-in-out;
}

.overlay.active {
     display: block;
     opacity: 1;
}

#sidebarCollapse {
     background: transparent;
     padding: 0;
     border: none;
}

#sidebar .sidebar-header {
     padding: 20px;
     background: #0808ff;
}

#sidebar ul.components {
     padding: 10rem 0;
     text-align: center;
}

#sidebar ul p {
     color: #fff;
     padding: 10px;
}

#sidebar ul li a {
     padding: 10px 25px;
     font-size: 1.3em;
     display: block;
     font-weight: 500;
     color: #ffffff;
     font-family: 'NUNITO';
}

#sidebar ul li a:hover {
     color: #fff;
     background: #35bff8;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
     color: #fff;
     background: #002D62;
}

a[data-toggle="collapse"] {
     position: relative;
}

.dropdown-toggle::after {
     display: block;
     position: absolute;
     top: 50%;
     right: 20px;
     transform: translateY(-50%);
}

ul ul a {
     font-size: 0.9em !important;
     padding-left: 30px !important;
     background: #6d7fcc;
}

ul.CTAs {
     padding: 20px;
}

ul.CTAs a {
     text-align: center;
     font-size: 0.9em !important;
     display: block;
     border-radius: 5px;
     margin-bottom: 5px;
}

a.download {
     background: #fff;
     color: #7386D5;
}

a.article,
a.article:hover {
     background: #6d7fcc !important;
     color: #fff !important;
}


/*--end menu_sitbar--*/

ul.btn {
     float: right;
}

ul.btn li {
     display: inline-block;
     padding: 13px;
}

ul.btn li a {
     color: #000;
     font-size: 16px;
     font-weight: 800;
     transition: color 0.3s ease, transform 0.2s ease;
}

ul.btn li a:hover {
     color: #1351ec;
     transform: translateY(-3px);
}

ul.btn li:last-child {
     padding-right: 0;
}

.down_btn {
     padding:0px 50px;
}

.down_btn a {
     background-color: #7FBFD8;
     display: inline-block;
     padding: 7px 35px;
     border-radius: 10px;
     color: #010a05 !important;
     font-size: 17px;
}

.down_btn a:hover {
     color: #fff !important;
     background: #000;
}

.crear-cuentabtn{
     background-color: #1ba491;
     color: #fff;
     padding: 8px;
     border-radius: 8px;
     transition: color 0.3s ease, transform 0.2s ease;
}

.crear-cuentabtn:hover{
     color: #000;
     transform: translateY(-3px);
}

/*-- header area --*/


/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- layout new css ---------------------------------------------------------------------*/

.header::after {
     content: "";
     position: absolute;
     width: 558px;
     height: 228px;
     z-index: -1;
     top: 0;
     left: 0;
}

.header {
     width: 100%;
     padding: 10px 10px;
     position: fixed;
     z-index: 960;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     

}

.logo a {
     font-size: 40px;
     font-weight: bold;
     text-transform: uppercase;
     color: #fff;
     line-height: 40px;
}


/** banner section **/

.banner_main {
     background: #ffffff;
     padding: 75px 0 90px 0;
}

.text-bg {
     text-align: left;
     float: left;
     width: 85%;
     margin-left: 1rem;
}

.text-bg h1 {
     font-family: 'Nunito';
     color: #1351ec;
     padding-top: 50px;
     font-size: 3rem;
     margin-bottom: 10px;
     font-weight: bold;
     line-height: 3rem;
}

.text-bg p {
     font-family: 'Nunito';
     font-size: 1rem;
     display: block;
     color: #000000;
     line-height: 25px;
     padding-bottom: 50px;
     font-weight: 500;
}

.text-bg .read_more {
     border: #fff solid 5px;
}

.text-bg .read_more:hover {
     background: #000;
}

.images_box figure {
     margin: 0px;
}

.images_box figure img {
     width: 80%;
}

.carousel-indicators li {
     background: #000;
     width: 38px;
     height: 8px;
     border-radius: 10px;
}

.carousel-indicators {
     bottom: 45px;
}

.carousel-caption {
     position: inherit;
}

.carousel-control-next,
.carousel-control-prev {
     display: none;
}


/** banner section **/

.titlepage {
     text-align: center;
     padding-bottom: 60px;
}

.titlepage h2 {
     font-size: 50px;
     color: #382d3c;
     line-height: 55px;
     padding: 0;
}

.d_flex {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
}

.blu {
     color: #0eadef;
}

.read_more {
     font-size: 17px;
     background-color: transparent;
     border: #00aeef solid 5px;
     color: #010a05 !important;
     padding: 13px 0px;
     width: 100%;
     max-width: 210px;
     text-align: center;
     display: inline-block;
     transition: ease-in all 0.5s;
     border-radius: 40px;
     font-weight: 500;
}

.read_more:hover {
     background: #00aeef;
     color: #fff !important;
     transition: ease-in all 0.5s;
}


/** about section **/

.about {
     background: #fafafa;
     padding: 90px 0;
}

.about .titlepage {
     text-align: left;
     padding: 0;
     max-width: 669px;
     width: 100%;
     float: left;
}

.about .titlepage h2 {
     margin-bottom: 40px;
}

.about .titlepage p {
     color: #010a05;
     font-size: 17px;
     line-height: 35px;
     font-weight: 400;
     padding-bottom: 50px;
}

.about .titlepage .read_more {
     float: right;
}

.about_img figure {
     margin: 0;
}

.about_img figure img {
     width: 100%;
}


/** end about section **/


/** choose  section **/

.blu2 {
     color: #3a3aff;
     font-weight: bold;
}

.choose_bg {
     background: url(../images/why.jpg);
     padding: 120px 0;
}

.choose .choose_box {
     background: #fff;
     padding: 35px 35px;
     text-align: center;
}

.choose .choose_box span {
     color: #141629;
     display: block;
     font-size: 70px;
     font-weight: bold;
     text-align: center;
}

.choose .choose_box h3 {
     color: #00aeef;
     font-size: 25px;
     line-height: 28px;
     font-weight: 500;
     padding-bottom: 10px;
     padding-top: 15px;
}

.choose .choose_box p {
     color: #010a05;
     font-size: 17px;
     line-height: 30px;
     font-weight: 500;
}

.padding_right0 {
     padding-right: 0;
}

.padding_left0 {
     padding-left: 0;
}

ul.easy li a {
     font-size: 27px;
     padding: 18px 21px;
     width: 100%;
     line-height: 36px;
     margin-bottom: 35px;
     display: block;
}

ul.easy li:last-child a {
     margin-bottom: 0;
}

ul.easy li.active a {
     background: #060505;
     color: #fff;
}

ul.easy li a:hover {
     background: #060505;
     color: #fff;
}


/** end choose  section **/


/** work section **/

.work {
     background: #ffffff;
     padding: 90px 0;
}

.work .titlepage {
     text-align: left;
     padding: 0;
     max-width: 648px;
     width: 100%;
     float: right;
}

.work .titlepage h2 {
     margin-bottom: 40px;
}

.work .titlepage p {
     color: #010a05;
     font-size: 17px;
     line-height: 35px;
     font-weight: 400;
     padding-bottom: 50px;
}

.work_img {
     padding-right: 30px;
}

.work_img figure {
     margin: 0;
}

.work_img figure img {
     width: 100%;
}


/** end work section **/


/** request section **/

.request {
     background: #0192c8;
     padding: 90px 0px;
}

.request .titlepage {
     text-align: left;
}

.white {
     color: #fff;
}

.main_form .contactus {
     border-radius: 35px;
     padding: 0px 30px;
     margin-bottom: 30px;
     width: 100%;
     height: 60px;
     background: #fff;
     color: #777977;
     font-size: 18px;
     font-weight: normal;
     border: inherit;
}

.main_form .textarea {
     padding: 8px 30px;
     padding-top: 63px;
     margin-bottom: 30px;
     width: 100%;
     background: #fff;
     color: #777977;
     font-size: 18px;
     font-weight: normal;
     border: inherit;
     border-radius: 20px;
}

.main_form .send_btn {
     font-size: 17px;
     transition: ease-in all 0.5s;
     background-color: #fff;
     color: #000;
     padding: 13px 0px;
     max-width: 200px;
     width: 100%;
     display: block;
     border-radius: 30px;
     margin: 0 auto;
}

.main_form .send_btn:hover {
     background-color: #191e20;
     transition: ease-in all 0.5s;
     color: #fff;
}

#request *::placeholder {
     color: #777977;
     opacity: 1;
}

#map {
     height: 425px;
     overflow: hidden;
     padding-bottom: 22.25%;
     padding-top: 30px;
     position: relative;
}


/** end request section **/


/** footer **/

footer {
     width: 100%;
}

.footer {
     background: #7fbfd8;
     padding-top: 0px;
     text-align: center;
}

.footer .titlepage {
     text-align: left;
     padding-bottom: 0px;
}

.footer .titlepage h2 {
     color: #fff;
}

.footer .address h3 {
     color: #fff;
     font-size: 30px;
     line-height: 35px;
     font-weight: 500;
     padding-bottom: 20px;
     text-align: left;
}

ul.location_icon li {
     font-size: 17px;
     text-align: left;
     padding-right: 40px;
}

ul.Menu_footer li {
     display: block;
     color: #3e7f21;
     position: relative;
}

ul.Menu_footer li:before {
     content: "";
     position: absolute;
     width: 12px;
     height: 12px;
     border-radius: 20px;
     background: #fff;
     margin-top: 9px;
     left: 0;
}

ul.Menu_footer li a {
     display: block;
     color: #fcfbfb;
     font-size: 17px;
     padding-left: 30px;
     text-align: left;
}

ul.Menu_footer li a:hover {
     color: #0eadef;
}

ul.social_icon li {
     display: block;
     padding-bottom: 11px;
}

ul.social_icon li a {
     font-size: 18px;
     color: #fff;
     display: inherit;
}

ul.social_icon li a:hover {
     color: #0eadef;
}

ul.social_icon li a i {
     background: #fff;
     width: 37px;
     height: 37px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     border-radius: 30px;
     color: #000;
     margin-top: -33px;
}

ul.social_icon li a i:hover {
     color: #0eadef;
}

.bottom_form h3 {
     font-weight: 600;
     font-size: 20px;
     text-align: left;
     color: #fff;
     padding-bottom: 15px;
}

.bottom_form .enter {
     border: inherit;
     padding: 0px 19px;
     width: 100%;
     height: 53px;
     background: #fff;
     color: #828282;
     font-size: 17px;
     border-radius: 10px;
     margin-bottom: 25px;
}

.sub_btn {
     font-size: 19px;
     transition: ease-in all 0.5s;
     background-color: #0192c8;
     color: #fff;
     padding: 11px 0px;
     max-width: 175px;
     width: 100%;
     display: block;
     text-transform: uppercase;
     border-radius: 10px;
     border: inherit;
     box-shadow: inherit;
}

.sub_btn:hover {
     background-color: #0156ed;
     transition: ease-in all 0.5s;
     color: #fff;
}

.copyright {
     margin-top: 0px;
     padding: 25px 0;
     background: #000;
     font-family: 'Nunito';
}

.copyright p {
     color: #fff;
     font-size: 13px;
     text-align: left;
     font-weight: normal;
}

.copyright a {
     color: #fff;
}

.copyright a:hover {
     color: #1351ec;
}


/** end footer **/

@media (max-width: 980px) {
.menu-pc{
     display: none;
}
     }

@media (min-width: 980px) {
.menu-phone{
     display: none;
}
     }

.menu-pc a {
  font-weight: 600;
  font-family: 'Nunito';
}


.botones{
  background-color: #1351ec;
  width: 178px;
  height: 36px;
  top: 0px;
  border-radius: 10px;
  font-family: 'Nunito';
  font-weight: 400;
  font-size: 1rem;
  line-height: 18px;
  color: #000;
  border: none;
  transition: color 0.3s ease, transform 0.2s ease;
}

.botones:hover{
  background-color: #1351ec;
  color: #fff;
  transform: translateY(-3px);
}

.h1-secundario{
     font-family: 'Nunito';
     color: #1351ec;
     padding-top: 50px;
     font-size: 2.75rem;
     padding-bottom: 25px;
     font-weight: bold;
}

.espacio{
     height: 1rem;
}

@media (max-width: 768px){
.img1{
     display: flex;
     flex-direction: column-reverse;
}


}

.can {
     font-family: 'Nunito';
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 8px;

}

@media (max-width: 768px){
     .can{
          display: flex;
          align-items: flex-start;
          flex-direction: row;
          flex-wrap: nowrap
     }
}

 .can span {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    color: #1351ec;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
     

}

@media (min-width: 768px){
.can span {
font-size: 30px;
     border-radius: 51px;
     width: 90px;
     height: 90px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     color: #1351ec;
     margin-right: 30px;
     background: #ffffff;
          }
}

.can p{


font-weight: 500;
margin-right: -50px;
padding-left: 20px;
}

.calculadora {
     background-color: #7FBFD8;
     width: 100%;
     border-radius: 10px;
}

.linea{
    position: relative;
    top: -150px;
    left: 74px;
    transform: scale(2.9);
    z-index: -1;
     
}

@media (max-width: 768px){


.linea{
     display: none;
   }
}

.vector{
     position: relative;
     top: 9rem;
     width: 100%;
}

.logo{
  width: 70%;
}

.boton-principal ul li a{
background-color: #7fbfd8;
padding: 8px;
border-radius: 8px;
color: #fff;
}

.images-box-derecha{
  margin-left: -60px;
  width: 90%;
}

.footer-centro{
  justify-content: center;
}

.titulo-calcular{
     font-size: 4rem;
     text-align: left;
     text-transform: uppercase;
     font-weight: 800;
     color: #002d62;
     padding-top: 15px;
}

.texto-calcular{
     text-align: left;
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.titulo-texto-calcular{
     text-align: left;
     font-size: 1rem;
     font-weight: 100;
}

.inicio{
  padding-top: 160px;
}

.input-calculadora{
  width: 100%;
  border-radius: 10px;
  border: none;
  background: #fff;
  color: #002D62;
  text-align: left;
  margin: 5px 0;
  font-size: 1rem;
  padding: 3px;
  font-family: 'Nunito';
}

.input-calculadora3{
     width: 100%;
    border-radius: 10px;
    border: none;
    background: #fff;
    color: #002D62;
    text-align: left;
    font-size: 1rem;
    padding: 3px;
    float: right;
}

.boton-calcular{
     background-color: #002D62;
     color: #fff;
     border-radius: 10px;
     width: 6.5rem;
     font-size: 1.2rem;
}

#simulador1::placeholder{
     color: #002D62;
}

.btn-calcular-div{
     display: flex;
    justify-content: space-between;
}

.formulario{
  padding: 15px;
}

.input-calculadora2{
  width: 50%;
  border-radius: 10px;
  border: none;
  background: #fff;
  color: #002D62;
  text-align: left;
  margin: 5px 0;
  font-size: 1rem;
  padding: 3px;
  float: right;
}

.simulador-box{
  margin: 50px auto;

}

.simulador{
  padding-top: 80px;
}

.boton-largo{
  background-color: #0000;
  border: solid 3px #002d62;
  width: 18rem;
  padding: 14px;
  top: 0px;
  border-radius: 20px;
  font-family: 'Nunito';
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 18px;
  color: #002d62;
}

.boton-largo:hover{
  background-color: #002d62;
  color: #fff;
}

.titulos-preguntas{
text-align: left;
font-family: 'Nunito';
letter-spacing: 0px;
color: #002D62;
font-size: 2rem;
font-weight: 800;
}

.titulos-preguntas:hover{
  color: #7FBFD8;
}

.titulo-grande{
     font-family: 'Nunito';
     color: #7FBFD8;
     padding-top: 50px;
     font-size: 3rem;
     margin-bottom: 10px;
     font-weight: bold;
     line-height: 3rem;
     float: left;
     width: 50%;
     text-align: left;
   }

.titulo-inicio{
     font-family: 'Satoshi-Variable';
     font-size: 3.5rem;
    text-align: left;
    font-weight: 800;
    color: #002d62;
    padding-top: 15px;
}


.texto-collapse{
  font-family: 'Nunito';
  color: #002d62;
  text-align: left;
  margin-left: 25px;
}

.titulo-collapse{
  font-family: 'Nunito';
  color: #002d62;
  text-align: left;
}

.borde-faq{
    border-bottom: solid 2px #002d62;
}

.borde-collapse{
border-bottom: solid 1px #002d62;
}

.boton-descargas{
    float: left;
    margin: 20px;
}

.simulador-2{
    margin-left: 150px;
}

.imagen-simulador2{
      position: relative;
    top: 30px;
    left: -408px;
    width: 50%;
    z-index: -1;
  }

.collapse-2{
background-color: #efefef;
color: #002d62;
text-align: left;
}

.titulo-collapse-2{
 color: #002d62;
 font-weight: 800;
 text-align: left;
}

.iconos-dolar{
  width: 10%;
}
@media (min-width: 768px){


.cuenta{
  width: 60%;
}
}

@media (min-width: 768px){
.imagen-cuenta{
  position: relative;
    top: -425px;
    left: 4%;
    width: 30%;
    z-index: -1;
    width: 30%;
}
}

.inicio-sesion{
  padding-top: 200px;
}

.legend-p{
  font-size: 1rem;
  color: #002D62;
}

.crear-cuenta {
     background-color: #D4E6CE;
     width: 100%;
     border-radius: 10px;
}

.a-form{
  margin-bottom: 10px;
  color: #002D62;
  padding-bottom: 10px;
}

.margen-derecho-p{
  margin-right: 6rem;
}

.margen-general{
  margin-right: 5%;
  margin-left: 5%;
}

.margen-left-titulo{
  margin-left: 20px;
}

@media (min-width: 768px){
  .cal-absolute{
  position: absolute;
}
}

.boton-collapse{
  margin: 0 auto;
}



.nombre-sidebar2 span{
    font-family: 'Satoshi-Variable';
}

.sidebar2 {
     width: 300px;
     background-color: #EFEFEF;
     color: #002D62;
     padding: 20px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: center;
     font-family: 'Satoshi-Variable';
    color: #002D62;
    font-weight: 800;
    font-size: 1rem;
 }
 .sidebar2 img.logo {
     width: 100px;
     display: block;
     margin: 0 auto 20px;
 }
 .sidebar2 .profile {
     display: flex;
     align-items: center;
     margin-bottom: 3rem;
 }

 .menu-sidebar2 a{
     border-bottom: 1px solid #002D62;
 }

 .container-sidebar2{     
     position: relative;
     top: 15%;
     left: 10%;
 }
 .sidebar2 .profile img {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     margin-right: 10px;
     border: 5px solid #7FBFD8; /* Añade un borde sólido de 5px y color negro */
 }
 .sidebar2 a {
     display: block;
     color: #002D62;
     text-decoration: none;
     margin: 13px 0;
 }
 .main-content {
     flex-grow: 1;
     padding: 20px;
     display: flex;
     justify-content: center;
 }
 .top-menu {
     text-align: right;
     margin-bottom: 20px;
 }
 .top-menu a {
     margin: 0 10px;
     text-decoration: none;
     color: #2c3e50;
 }
 .container {
     display: flex;
 }
 .left-column, .right-column {
     flex: 1;
     padding: 20px;
 }
 .left-column .card {
     background-color: #ecf0f1;
     padding: 20px;
     border-radius: 10px;
     text-align: center;
 }
 .left-column .card h2 {
     margin: 10px 0;
 }
 .left-column .card p {
     text-align: left;
 }
 .right-column form {
     padding: 20px;
     border-radius: 10px;
 }
 .right-column form p {
     margin-bottom: 20px;
 }
 .right-column form input[type="file"] {
     display: block;
     margin-bottom: 20px;
 }
 .right-column form button {
     display: inline-block;
    background-color: #D4E6CE;
    color: #002D62;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    height: 33px;
    width: 25%;
    font-family: 'Satoshi-Variable';
    font-weight: 600;
 }
 .right-column form button:last-child {
     background-color: #95a5a6;
 }
 .header2 {
     width: 100%;
     padding: 10px 10px;
     position: fixed;
     z-index: 960;
     backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    top: 0;
     }
.contenedor-user{
     position: relative !important;
     top: 25% !important;
}

.titulos-user{
     font-family: 'Satoshi-Variable';
    font-weight: 900;
    color: #002D62;
}

.textos-user p{
     font-family: 'Satoshi-Variable';
     font-weight: 600;
     color: #002D62;
}

.textos-user span{
     font-family: 'Satoshi-Variable';
     font-weight: 900;
     color: #002D62;
}

.subir-documentos label{
     color: #002D62;
    font-family: 'Satoshi-Variable';
    font-weight: 600;
    border: solid 2px #EEA6A6;
    border-radius: 10px;
    margin: 10px;
    width: 70%;
    text-align: center;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subir-documentos .form-group{
     display: flex;
     align-items: center;
}

.grupo-botones{
     display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.boton{
     background-color: #002D62 !important;
     color: #fff !important;
     margin: 5px 0px !important;
     width: 30% !important;
     border: none;
    border-radius: 10px;
    cursor: pointer;
    height: 33px;
    font-family: 'Satoshi-Variable';
    font-weight: 600;
}

.container-contrato{
     display: flex;
    flex-direction: column;
    margin: 15vh 0;
}

.border7070{
     border-bottom: 1.5px solid #707070;
}

.body-cuenta{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.encabezado-tabla{
     display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #002D62;
    color: #fff;
    font-family: 'Nunito';
    font-size: 0.8rem;
    border-radius: 10px;
    height: 35px;
    flex-wrap: nowrap;
}

.contenido-tabla{
     display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #002D62;
    font-family: 'Nunito';
    font-size: 0.8rem;
    border-radius: 10px;
    height: 50px;
    flex-wrap: nowrap;
} 

.contenido-tabla2{
     display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #002D62;
    font-family: 'Nunito';
    font-size: 0.8rem;
    border-radius: 10px;
    height: 50px;
    flex-wrap: nowrap;
} 

.boton-tabla{
    background-color: #002D62 !important;
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-family: 'Nunito';
    font-size: 0.8rem;
    padding: 3px 10px;
}

.boton-tabla-inc{
     background-color: #EEA6A6 !important;
     color: #002D62 !important;
     border: none;
     border-radius: 10px;
     font-family: 'Nunito';
     font-size: 0.8rem;
     padding: 3px 10px;
 }

.puntos-tabla{
    font-size: 2.5rem;
    color: #002D62;
    margin-top: -17px;
}

.icons-pagos{
    color: #EEA6A6;
    font-size: 1.2rem;
}

.icons-pagos:hover{
     color: #002D62;
 }

 .titulo-datos{
    font-family: 'Satoshi-Variable';
    font-size: 2.5rem;
    text-align: center;
    font-weight: 900;
    color: #002d62;
    padding-top: 10px;
    margin: 0;
    padding-bottom: 0;
 }

 .gap-form-d{
     column-gap: 5px;
 }

 .boton-datos{
     background-color: #002D62 !important;
     color: #fff !important;
     border: none;
     border-radius: 10px;
     font-family: 'Nunito';
     font-size: 0.8rem;
     padding: 3px 10px;
     width: 80%;
 }

 .btn-adjuntar{
     display: inline-block;
    background-color: #D4E6CE;
    color: #002D62;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    height: 33px;
    width: 90%;
    font-family: 'Satoshi-Variable';
    font-weight: 600;
 }

 .text-cuenta2{
    font-family: 'Satoshi-Variable';
    color: #002D62;
    font-size: 11px;
    text-align: left;
 }

 .text-cuenta3{
     font-family: 'Satoshi-Variable';
     color: #002D62;
     font-size: 1rem;
     text-align: left;
  }

  .custom-radio {
     appearance: none;
     -webkit-appearance: none;
     border-radius: 50%;
     width: 20px;
     height: 20px;
     background-color: #D4E6CE;
     border: 2px solid #002D62;
     outline: none;
     cursor: pointer;
     margin-right: 8px; /* Espacio entre el radio y la etiqueta */
   }
 
   .custom-radio:checked {
     background-color: #002D62;
   }
 
   .custom-label {
     cursor: pointer;
     font-family: 'Satoshi-Variable';
     color: #002D62;
     font-size: 1rem;
     text-align: left;
   }

   .container-plan{
     display: flex;
    flex-direction: row;
    margin: 15vh 0;
   }

   .margin-40vh{
     margin-top: 40vh;
   }

   /* Estilos para el diseño de escritorio */
.contenido-tabla {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 0;
     border-bottom: 1px solid #ddd;
   }
   
   .contenido-tabla div {
     text-align: center;
   }

   .sep-rat{
     display: flex;
    flex-direction: column;
   }

   .junt-rat{
     gap: 8px;
   }


   
   /* Estilos para dispositivos móviles */
   @media (max-width: 768px) {
     .contenido-tabla {
       display: block;
       padding: 10px;
       border-bottom: 1px solid #ddd;
       margin-bottom: 33vh;
     }
   
     .contenido-tabla div {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 8px 0;
       border-bottom: 1px solid #eee;
     }
   
     .contenido-tabla div:before {
       content: attr(data-title);
       font-weight: bold;
       text-align: left;
       flex: 1;
     }
   
     .contenido-tabla div {
       text-align: right;
       flex: 2;
     }
   
     /* Hacer que los botones ocupen toda la fila */
     .boton-tabla, .boton-tabla-inc {
       width: auto;
     }
   }
   

   @media (max-width: 1000px) {
     .margen-derecho-p {
          margin-right: 0rem;
      }

      .gap-btn-mv{
          display: flex;
          flex-direction: column;
          gap: 12px;
          align-items: center;
      }

      .titulo-calcular {
          font-size: 2rem;
          }

      .titulo-texto-calcular {
          text-align: center;
          font-size: 1rem;
          font-weight: 100;
          }
     .titulos-preguntas {
          font-size: 1rem;
          }

          .titulo-grande {
               font-size: 2rem;
               line-height: 2rem;
           }

           .text-bg h1 {
               font-size: 1.75rem;
               padding-bottom: 0px;
     }

     .titulo-collapse {
          font-family: 'Nunito';
          color: #002d62;
          text-align: center;
          font-size: 0.6rem;
      }

      .boton-descargas {
          margin: 20px;
          float: none;
      }

      .titulo-inicio {
          font-size: 2.5rem;
     }

     .legend-p {
          font-size: 0.6rem;
     }

     .margin-40vh {
           margin-top: 0px; 
      }

      .text-bg h1 {
          text-align: center;
      }

      .text-bg p {
          text-align: center;
      }

      .text-bg {
          text-align: center;
      }

      .container-plan {
          display: flex;
          flex-direction: column;
          margin: 15vh 0;
      }

      .right-column form button {
          display: inline-block;
          background-color: #D4E6CE;
          color: #002D62;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          height: 33px;
          width: 40%;
          font-family: 'Satoshi-Variable';
          font-weight: 600;
          padding: 0px;
          margin: 0 10px;
      }

      .subir-documentos label {
          color: #002D62;
          font-family: 'Satoshi-Variable';
          font-weight: 600;
          border: solid 2px #EEA6A6;
          border-radius: 10px;
          width: 100%;
          text-align: center;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.7rem;
      }

      .grupo-botones {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      

      .sidebar2 img.logo {
          width: 150px;
          display: block;
          margin: 0 auto 20px;
          position: relative;
          left: -80px;
      }
      
      /* #sidebarCollapse {
          padding-right: 8px;
          position: relative;
          top: 35px;
      }  */
          

      #sidebar.active {
          left: 0;
          width: 93%;
      }

      .container-sidebar2 {
          position: relative;
          top: 0; 
          left: 0;
      }

      .sidebar2 .profile {
          display: flex;
          align-items: center;
          margin-bottom: 3rem;
          flex-direction: column;
      }

      .profile span{
          font-size: 1.3rem;
      }

      .sidebar2 .profile img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          margin-right: 10px;
          border: 5px solid #7FBFD8;
      }

      .sidebar2 a {
          display: block;
          color: #002D62;
          text-decoration: none;
          margin: 13px 0;
          padding: 0 30px;
          text-align: center;
      }


      .btn-mv-mn1{
          text-align: center !important;
      }

      .btn-mv-mn2{
          width: 50% !important;
      }

      .encabezado-tabla{
          display: none;
      }

      .container-contrato {
         margin: 0;
      }

      .titulo-datos {
          font-size: 1.5rem;
      }

      .junt-rat{
          display: flex;
        flex-direction: row;
        justify-content: space-around;
      }
}

 .vehicle-gallery{
            background:#fff;
            border-radius:20px;
            padding:20px;
            box-shadow:0 5px 25px rgba(0,0,0,0.08);
        }

        .main-image{
            width:100%;
            height:500px;
            object-fit:cover;
            border-radius:4px;
            cursor:pointer;
            transition:.3s;
        }

        .main-image:hover{
            transform:scale(1.01);
        }

        .thumb-image{
            width:100%;
            height:100px;
            object-fit:cover;
            border-radius:4px;
            cursor:pointer;
            border:3px solid transparent;
            transition:.3s;
        }

        .thumb-image.active{
            border-color:#0d6efd;
        }

        .thumb-image:hover{
            opacity:.8;
        }

        .vehicle-info{
            background:#fff;
            border-radius:20px;
            padding:30px;
            box-shadow:0 5px 25px rgba(0,0,0,0.08);
            height:100%;
        }

        .price{
            font-size:2rem;
            font-weight:bold;
            color:#1351ec;
        }

        .specs{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:15px;
            margin-top:25px;
        }

        .spec-item{
            background:#f8f9fa;
            padding:15px;
            border-radius:12px;
            text-align:center;
        }

        .btn-contact{
            width:100%;
            padding:15px;
            border-radius:12px;
            font-size:18px;
            margin-top:25px;
        }

        @media(max-width:768px){

            .main-image{
                height:300px;
            }

            .vehicle-info{
                margin-top:25px;
            }

            .specs{
                grid-template-columns:1fr;
            }
        }