body{ font-family: "Open Sans", sans-serif;color: #ffffff;} a{ color: #ff3600;text-decoration: none;} a:hover{ color: #ffa790;text-decoration: none;} h1, h2, h3, h4, h5, h6{ font-family: "Raleway", sans-serif;} #preloader{ position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9999;overflow: hidden;background: #121212;} #preloader:before{ content: "";position: fixed;top: calc(50% - 30px);left: calc(50% - 30px);border: 6px solid #ff7f5d;border-top-color: white;border-radius: 50%;width: 60px;height: 60px;-webkit-animation: animate-preloader 1s linear infinite;animation: animate-preloader 1s linear infinite;} @-webkit-keyframes animate-preloader{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} } @keyframes animate-preloader{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} } .back-to-top{ position: fixed;visibility: hidden;opacity: 0;right: 15px;bottom: 15px;z-index: 996;background: #ff7f5d;width: 40px;height: 40px;border-radius: 4px;transition: all 0.4s;} .back-to-top i{ font-size: 28px;color: #f0f0f0 !important;line-height: 0;} .back-to-top:hover{ background: #ff9f86;color: #f0f0f0 !important;} .back-to-top.active{ visibility: visible;opacity: 1;} #header{ background: rgba(21, 5, 23, 0.25);transition: all 0.5s;z-index: 997;position: relative;height: 70px;} @media (max-width: 992px){ #header{ height: 60px;} } #header.fixed-top, #header.header-inner-pages{ background: rgb(0, 0, 0);} #header.fixed-top{ position: fixed;z-index: 1000;margin-top: 50px;} #header .logo{ font-size: 30px;margin: 0;padding: 0;line-height: 1;font-weight: 500;letter-spacing: 0.5px;text-transform: uppercase;} #header .logo a{ color: #f0f0f0 !important;} #header .logo img{ max-height: 20px;vertical-align: baseline;} .scrolled-offset{ margin-top: 70px;} @media (max-width: 991px){ .scrolled-offset{ margin-top: 60px;} } .content-video{ position: absolute;} .logo-banner{ vertical-align: middle;width: 1100px;} .header-social-links{ padding-left: 20px;} .header-social-links a{ color: rgba(255, 255, 255, 0.6);margin-left: 10px;display: inline-flex;align-items: center;justify-content: center;transition: 0.3s;} .header-social-links a i{ line-height: 0;} .header-social-links a:hover{ color: #f0f0f0 !important;} @media (max-width: 768px){ .header-social-links{ padding: 0 15px 0 0;} } .navbar{ padding: 0;} .navbar ul{ margin: 0;padding: 0;display: flex;list-style: none;align-items: center;} .navbar li{ position: relative;} .navbar>ul>li{ white-space: nowrap;padding: 10px 12px;} .navbar a, .navbar a:focus{ display: flex;align-items: center;justify-content: space-between;padding: 0 3px;font-size: 15px;font-weight: 600;white-space: nowrap;transition: 0.3s;color: white;position: relative;} .navbar a i, .navbar a:focus i{ font-size: 12px;line-height: 0;margin-left: 5px;} .navbar>ul>li>a:before{ content: "";position: absolute;width: 100%;height: 2px;bottom: -7px;left: 0;background-color: #ff7f5d;visibility: hidden;width: 0px;transition: all 0.3s ease-in-out 0s;} .navbar a:hover:before, .navbar li:hover>a:before, .navbar .active:before{ visibility: visible;width: 100%;} .navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover>a{ color: #ff7f5d;} .navbar .dropdown ul{ display: block;position: absolute;left: 12px;top: calc(100% + 30px);margin: 0;padding: 10px 0;z-index: 99;opacity: 0;visibility: hidden;background: #121212;box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);transition: 0.3s;} .navbar .dropdown ul li{ min-width: 200px;} .navbar .dropdown ul a{ padding: 10px 20px;font-size: 14px;text-transform: none;font-weight: 500;color: #150517;} .navbar .dropdown ul a i{ font-size: 12px;} .navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover>a{ color: #ff7f5d;} .navbar .dropdown:hover>ul{ opacity: 1;top: 100%;visibility: visible;} .navbar .dropdown .dropdown ul{ top: 0;left: calc(100% - 30px);visibility: hidden;} .navbar .dropdown .dropdown:hover>ul{ opacity: 1;top: 0;left: 100%;visibility: visible;} @media (max-width: 1366px){ .navbar .dropdown .dropdown ul{ left: -90%;} .navbar .dropdown .dropdown:hover>ul{ left: -100%;} } .mobile-nav-toggle{ color: #f0f0f0 !important;font-size: 28px;cursor: pointer;display: none;line-height: 0;transition: 0.5s;} @media (max-width: 991px){ .mobile-nav-toggle{ display: block;} .navbar ul{ display: none;} } .navbar-mobile{ position: fixed;overflow: hidden;top: 0;right: 0;left: 0;bottom: 0;background: rgba(0, 0, 0, 0.9);transition: 0.3s;z-index: 999;} .navbar-mobile .mobile-nav-toggle{ position: absolute;top: 15px;right: 15px;} .navbar-mobile ul{ display: block;position: absolute;top: 55px;right: 15px;bottom: 15px;left: 15px;padding: 10px 0;background-color: #f0f0f0 !important;overflow-y: auto;transition: 0.3s;} .navbar-mobile a, .navbar-mobile a:focus{ padding: 10px 20px;font-size: 15px;color: #150517;} .navbar-mobile>ul>li{ padding: 0;} .navbar-mobile a:hover:before, .navbar-mobile li:hover>a:before, .navbar-mobile .active:before{ visibility: hidden;} .navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover>a{ color: #ff7f5d;} .navbar-mobile .getstarted, .navbar-mobile .getstarted:focus{ margin: 15px;} .navbar-mobile .dropdown ul{ position: static;display: none;margin: 10px 20px;padding: 10px 0;z-index: 99;opacity: 1;visibility: visible;background: #121212;box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);} .navbar-mobile .dropdown ul li{ min-width: 200px;} .navbar-mobile .dropdown ul a{ padding: 10px 20px;} .navbar-mobile .dropdown ul a i{ font-size: 12px;} .navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover>a{ color: #ff7f5d;} .navbar-mobile .dropdown>.dropdown-active{ display: block;} #hero{ width: 100%;height: 100%;background-size: cover;position: relative;margin-bottom: 41px;} @media (max-width: 992px){ #hero{ margin-bottom: -60px;} } #hero:before{ content: "";bottom: 0;top: 0;left: 0;right: 0;} #hero .hero-container{ position: absolute;bottom: 0;top: 0;left: 15px;right: 15px;display: flex;justify-content: center;align-items: center;flex-direction: column;} #hero .hero-container-play{ position: absolute;bottom: 0;top: 0;left: 15px;right: 15px;display: flex;justify-content: center;align-items: center;flex-direction: column;} #hero h1{ margin: 0;font-size: 64px;font-weight: 700;line-height: 56px;text-transform: uppercase;color: #f0f0f0 !important;} #hero h2{ color: #201d1d;margin: 15px 0 0 0;font-size: 24px;} #hero .btn-get-started{ font-family: "Raleway", sans-serif;font-weight: 500;font-size: 16px;letter-spacing: 1px;display: inline-block;padding: 10px 40px;border-radius: 4px;transition: 0.5s;margin-top: 30px;border: 2px solid #121212;color: #f0f0f0 !important;} #hero .btn-get-started:hover{ background: #ff7f5d;border: 2px solid #ff7f5d;} @media (min-width: 1024px){ #hero{ background-attachment: fixed;} } @media (max-width: 768px){ #hero h1{ font-size: 30px;line-height: 36px;} #hero h2{ font-size: 18px;line-height: 24px;} } section{ padding: 60px 0;overflow: hidden;} .section-bg{ background-color: #1a1a1a !important;} .section-title{ text-align: center;padding-bottom: 30px;} .section-title h2{ font-size: 32px;font-weight: 700;margin-bottom: 20px;padding-bottom: 20px;position: relative;} .section-title h2::after{ content: "";position: absolute;display: block;width: 50px;height: 3px;background: #ff7f5d;bottom: 0;left: calc(50% - 25px);} .section-title p{ margin-bottom: 0;color: #d7d7d7;font-size: 14px;} .about .content h3{ font-weight: 600;font-size: 26px;} .about .content ul{ list-style: none;padding: 0;} .about .content ul li{ padding-left: 28px;position: relative;} .about .content ul li+li{ margin-top: 10px;} .about .content ul i{ position: absolute;left: 0;top: 2px;font-size: 20px;color: #ff7f5d;line-height: 1;} .about .content p:last-child{ margin-bottom: 0;} .about .content .btn-learn-more{ font-family: "Raleway", sans-serif;font-weight: 600;font-size: 14px;letter-spacing: 1px;display: inline-block;padding: 12px 32px;border-radius: 5px;transition: 0.3s;line-height: 1;color: #ff7f5d;-webkit-animation-delay: 0.8s;animation-delay: 0.8s;margin-top: 6px;border: 2px solid #ff7f5d;} .about .content .btn-learn-more:hover{ background: #ff7f5d;color: #f0f0f0 !important;text-decoration: none;} .about p{ text-align: justify;} .counts{ padding: 0;} .counts .counters span{ font-size: 48px;display: block;color: #ff7f5d;} .counts .counters p{ padding: 0;margin: 0 0 20px 0;font-family: "Raleway", sans-serif;font-size: 14px;} .our-values .card{ border: 0;padding: 10px 20px 20px 20px;position: relative;width: 100%;background-size: cover;background-repeat: no-repeat;background-position: center center;background: rgba(24, 24, 24, 0.9);} .our-values .card-body{ z-index: 10;background: rgba(13, 13, 13, 0.9);padding: 15px 30px;box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);transition: 0.3s;transition: ease-in-out 0.4s;border-radius: 5px;} .our-values .card-title{ font-weight: 700;text-align: center;margin-bottom: 15px;} .our-values .card-title a{ color: #ffffff;} .our-values .card-text{ color: #c8c8c8;} .our-values .read-more a{ color: #777777;text-transform: uppercase;font-weight: 600;font-size: 12px;transition: 0.4s;} .our-values .read-more a:hover{ text-decoration: underline;} .our-values .card:hover .card-body{ background: #ff7f5d;} .our-values .card:hover .read-more a, .our-values .card:hover .card-title, .our-values .card:hover .card-title a, .our-values .card:hover .card-text{ color: #f0f0f0 !important;} .video{ position: relative;top: 0;left: 0;} .our-values p{ text-align:justify;} .clients{ padding: 15px 0;text-align: center;} .clients img{ max-width: 45%;transition: all 0.4s ease-in-out;display: inline-block;padding: 15px 0;filter: grayscale(100);} .clients img:hover{ filter: none;transform: scale(1.15);} @media (max-width: 768px){ .clients img{ max-width: 40%;} } .services .icon-box{ padding: 30px;position: relative;overflow: hidden;border-radius: 10px;background: #121212;box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);transition: all 0.3s ease-in-out;height: 100%;} .services .icon-box:hover{ transform: translateY(-5px);} .services .icon{ position: absolute;left: -20px;top: calc(50% - 30px);} .services .icon i{ font-size: 64px;line-height: 1;transition: 0.5s;} .services .title{ margin-left: 40px;font-weight: 700;margin-bottom: 15px;font-size: 18px;} .services .title a{ color: #111;} .services .icon-box:hover .title a{ color: #ff7f5d;} .services .description{ font-size: 14px;margin-left: 40px;line-height: 24px;margin-bottom: 0;} .testimonials .testimonials-carousel, .testimonials .testimonials-slider{ overflow: hidden;} .testimonials .testimonial-item{ box-sizing: content-box;min-height: 320px;} .testimonials .testimonial-item .testimonial-img{ width: 90px;border-radius: 50%;margin: -40px 0 0 40px;position: relative;z-index: 2;border: 6px solid #121212;} .testimonials .testimonial-item h3{ font-size: 18px;font-weight: bold;margin: 10px 0 5px 45px;color: #ffffff;} .testimonials .testimonial-item h4{ font-size: 14px;color: #999;margin: 0 0 0 45px;} .testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right{ color: #ffbbaa;font-size: 26px;} .testimonials .testimonial-item .quote-icon-left{ display: inline-block;left: -5px;position: relative;} .testimonials .testimonial-item .quote-icon-right{ display: inline-block;right: -5px;position: relative;top: 10px;} .testimonials .testimonial-item p{ font-style: italic;margin: 0 15px 0 15px;padding: 20px 20px 60px 20px;background: #121212;position: relative;border-radius: 6px;position: relative;z-index: 1;} .testimonials .swiper-pagination{ margin-top: 20px;position: relative;} .testimonials .swiper-pagination .swiper-pagination-bullet{ width: 12px;height: 12px;background-color: #f0f0f0 !important;opacity: 1;border: 1px solid #ff7f5d;} .testimonials .swiper-pagination .swiper-pagination-bullet-active{ background-color: #ff7f5d;} .cta{ background: #000000;background-size: cover;padding: 40px 0px;} .cta h3{ color: #f0f0f0 !important;font-size: 28px;font-weight: 700;} .cta p{ color: #f0f0f0 !important;} .cta .cta-btn{ font-family: "Raleway", sans-serif;font-weight: 500;font-size: 14px;letter-spacing: 1px;display: inline-block;padding: 10px 35px;border-radius: 4px;transition: 0.5s;margin-top: 10px;border: 2px solid #121212;color: #f0f0f0 !important;} .cta .cta-btn:hover{ background: #ff7f5d;border: 2px solid #ff7f5d;} .portfolio #portfolio-flters{ list-style: none;margin-bottom: 20px;} .portfolio #portfolio-flters li{ cursor: pointer;display: inline-block;margin: 0 15px 10px 15px;font-size: 16px;font-weight: 600;line-height: 1;text-transform: uppercase;color: #f0f0f0 !important;transition: all 0.3s ease-in-out;} .portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active{ color: #ff7f5d;} .portfolio #portfolio-flters li.filter-active::before, .portfolio #portfolio-flters li.filter-active::after{ color: #ff7f5d;} .portfolio .portfolio-item{ margin-bottom: 30px;} .portfolio .portfolio-item .portfolio-img{ overflow: hidden;} .portfolio .portfolio-item .portfolio-img img{ transition: all 0.5s ease-in-out;} .portfolio .portfolio-item .portfolio-info{ opacity: 0;position: absolute;left: 15px;bottom: 0;z-index: 3;right: 15px;transition: all ease-in-out 0.3s;background: rgba(0, 0, 0, 0.5);padding: 10px 15px;} .portfolio .portfolio-item .portfolio-info h4{ font-size: 18px;color: #f0f0f0 !important;font-weight: 600;color: #f0f0f0 !important;margin-bottom: 0px;} .portfolio .portfolio-item .portfolio-info p{ color: white;font-size: 14px;margin-bottom: 0;} .portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link{ position: absolute;right: 40px;font-size: 24px;top: calc(50% - 18px);color: #f0f0f0 !important;transition: 0.3s;} .portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover{ color: #ff7f5d;} .portfolio .portfolio-item .portfolio-info .details-link{ right: 10px;} .portfolio .portfolio-item:hover .portfolio-img img{ transform: scale(1.2);} .portfolio .portfolio-item:hover .portfolio-info{ opacity: 1;} .portfolio-details{ padding-top: 40px;} .portfolio-details .portfolio-details-slider img{ width: 100%;} .portfolio-details .portfolio-details-slider .swiper-pagination{ margin-top: 20px;position: relative;} .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet{ width: 12px;height: 12px;background-color: #f0f0f0 !important;opacity: 1;border: 1px solid #ff7f5d;} .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active{ background-color: #ff7f5d;} .portfolio-details .portfolio-info{ padding: 30px;box-shadow: 0px 0 30px rgba(21, 5, 23, 0.08);} .portfolio-details .portfolio-info h3{ font-size: 22px;font-weight: 700;margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #eee;} .portfolio-details .portfolio-info ul{ list-style: none;padding: 0;font-size: 15px;} .portfolio-details .portfolio-info ul li+li{ margin-top: 10px;} .portfolio-details .portfolio-description{ padding-top: 30px;} .portfolio-details .portfolio-description h2{ font-size: 26px;font-weight: 700;margin-bottom: 20px;} .portfolio-details .portfolio-description p{ padding: 0;} .team .member{ margin-bottom: 20px;overflow: hidden;border-radius: 4px;background: #121212;box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);} .team .member .member-img{ position: relative;overflow: hidden;} .team .member .social{ position: absolute;left: 0;bottom: 30px;right: 0;opacity: 0;transition: ease-in-out 0.3s;display: flex;justify-content: center;align-items: center;} .team .member .social a{ transition: color 0.3s;color: #150517;margin: 0 3px;border-radius: 4px;width: 36px;height: 36px;background: rgba(255, 127, 93, 0.8);display: flex;justify-content: center;align-items: center;transition: ease-in-out 0.3s;color: #f0f0f0 !important;} .team .member .social a i{ line-height: 0;} .team .member .social a:hover{ background: #ff7f5d;} .team .member .social i{ font-size: 18px;} .team .member .member-info{ padding: 25px 15px;} .team .member .member-info h4{ font-weight: 700;margin-bottom: 5px;font-size: 18px;color: #ffffff;} .team .member .member-info span{ display: block;font-size: 13px;font-weight: 400;color: #aaaaaa;} .team .member .member-info p{ font-style: italic;font-size: 14px;line-height: 26px;color: #777777;} .team .member:hover .social{ opacity: 1;bottom: 15px;} .pricing .box{ padding: 20px;background: #121212;text-align: center;box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);border-radius: 5px;position: relative;overflow: hidden;} .pricing h3{ font-weight: 400;margin: -20px -20px 20px -20px;padding: 20px 15px;font-size: 16px;font-weight: 600;color: #e2e2e2;background: #2c2c2c;} .pricing h4{ font-size: 36px;color: #ff7f5d;font-weight: 600;font-family: "Poppins", sans-serif;margin-bottom: 20px;} .pricing h4 sup{ font-size: 20px;top: -15px;left: -3px;} .pricing h4 span{ color: #bababa;font-size: 16px;font-weight: 300;} .pricing ul{ padding: 0;list-style: none;color: #cccccc;text-align: center;line-height: 20px;font-size: 14px;} .pricing ul li{ padding-bottom: 16px;} .pricing ul i{ color: #ff7f5d;font-size: 18px;padding-right: 4px;} .pricing ul .na{ color: #ccc;text-decoration: line-through;} .pricing .btn-wrap{ margin: 20px -20px -20px -20px;padding: 20px 15px;background: #2c2c2c;text-align: center;} .pricing .btn-buy{ background: #ff7f5d;display: inline-block;padding: 8px 35px 9px 35px;border-radius: 4px;color: #f0f0f0 !important;transition: none;font-size: 14px;font-weight: 400;font-family: "Raleway", sans-serif;font-weight: 600;transition: 0.3s;} .pricing .btn-buy:hover{ background: #ff9377;} .pricing .featured h3{ color: #f0f0f0 !important;background: #ff7f5d;} .pricing .advanced{ width: 200px;position: absolute;top: 18px;right: -68px;transform: rotate(45deg);z-index: 1;font-size: 14px;padding: 1px 0 3px 0;background: #ff7f5d;color: #f0f0f0 !important;} .faq .faq-list{ padding: 0 100px;} .faq .faq-list ul{ padding: 0;list-style: none;} .faq .faq-list li+li{ margin-top: 15px;} .faq .faq-list li{ padding: 20px;background: #121212;border-radius: 4px;position: relative;} .faq .faq-list a{ display: block;position: relative;font-family: "Poppins", sans-serif;font-size: 16px;line-height: 24px;font-weight: 500;padding: 0 30px;outline: none;cursor: pointer;} .faq .faq-list .icon-help{ font-size: 24px;position: absolute;right: 0;left: 20px;color: #ffa790;} .faq .faq-list .icon-show, .faq .faq-list .icon-close{ font-size: 24px;position: absolute;right: 0;top: 0;} .faq .faq-list p{ margin-bottom: 0;padding: 10px 0 0 0;} .faq .faq-list .icon-show{ display: none;} .faq .faq-list a.collapsed{ color: #c8c8c8;} .faq .faq-list a.collapsed:hover{ color: #ff7f5d;} .faq .faq-list a.collapsed .icon-show{ display: inline-block;} .faq .faq-list a.collapsed .icon-close{ display: none;} @media (max-width: 1200px){ .faq .faq-list{ padding: 0;} } .contact .info{ width: 100%;background: #1a1a1a;} .contact .info i{ font-size: 20px;color: #ff7f5d;float: left;width: 44px;height: 44px;background: #1212128f6;display: flex;justify-content: center;align-items: center;border-radius: 50px;transition: all 0.3s ease-in-out;} .contact .info h4{ padding: 0 0 0 60px;font-size: 22px;font-weight: 600;margin-bottom: 5px;color: #fcfcfc;} .contact .info p{ padding: 0 0 0 60px;margin-bottom: 0;font-size: 14px;color: #ffffff;} .contact .info .email, .contact .info .phone{ margin-top: 40px;} .contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i{ background: #ff7f5d;color: #f0f0f0 !important;} .contact .php-email-form{ width: 100%;background: #1a1a1a;} .contact .php-email-form .form-group{ padding-bottom: 8px;} .contact .php-email-form .error-message{ display: none;color: #f0f0f0 !important;background: #ed3c0d;text-align: left;padding: 15px;font-weight: 600;} .contact .php-email-form .error-message br+br{ margin-top: 25px;} .contact .php-email-form .sent-message{ display: none;color: #f0f0f0 !important;background: #18d26e;text-align: center;padding: 15px;font-weight: 600;} .contact .php-email-form .loading{ display: none;background: #121212;text-align: center;padding: 15px;} .contact .php-email-form .loading:before{ content: "";display: inline-block;border-radius: 50%;width: 24px;height: 24px;margin: 0 10px -6px 0;border: 3px solid #18d26e;border-top-color: #eee;-webkit-animation: animate-loading 1s linear infinite;animation: animate-loading 1s linear infinite;} .contact .php-email-form input, .contact .php-email-form textarea{ border-radius: 4px;box-shadow: none;font-size: 14px;} .contact .php-email-form input:focus, .contact .php-email-form textarea:focus{ border-color: #ff7f5d;} .contact .php-email-form input{ height: 44px;} .contact .php-email-form textarea{ padding: 10px 12px;} .contact .php-email-form button[type=submit]{ background: #ff7f5d;border: 0;padding: 10px 24px;color: #f0f0f0 !important;transition: 0.4s;border-radius: 4px;} .contact .php-email-form button[type=submit]:hover{ background: #ff9377;} @-webkit-keyframes animate-loading{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} } @keyframes animate-loading{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} } .breadcrumbs{ padding: 15px 0;background: #1a1a1a;min-height: 40px;} .breadcrumbs h2{ font-size: 28px;font-weight: 500;} .breadcrumbs ol{ display: flex;flex-wrap: wrap;list-style: none;padding: 0 0 10px 0;margin: 0;font-size: 14px;} .breadcrumbs ol li+li{ padding-left: 10px;} .breadcrumbs ol li+li::before{ display: inline-block;padding-right: 10px;color: #3b0e41;content: "/";} #footer{ background: url("../img/footer-bg.jpg") center center no-repeat;color: #f0f0f0 !important;font-size: 14px;position: relative;} #footer::before{ content: "";position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: rgba(2, 0, 2, 0.6);z-index: 1;} #footer .footer-top{ position: relative;z-index: 2;text-align: center;padding: 80px 0;} #footer .footer-top h3{ font-size: 36px;font-weight: 700;color: #f0f0f0 !important;position: relative;font-family: "Poppins", sans-serif;padding-bottom: 0;margin-bottom: 0;} #footer .footer-top p{ font-size: 15;font-style: italic;margin: 30px 0 0 0;padding: 0;} #footer .footer-top .footer-newsletter{ text-align: center;font-size: 15px;margin-top: 30px;} #footer .footer-top .footer-newsletter form{ background: #121212;padding: 6px 10px;position: relative;border-radius: 4px;box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);text-align: left;} #footer .footer-top .footer-newsletter form input[type=email]{ border: 0;padding: 4px 8px;width: calc(100% - 100px);} #footer .footer-top .footer-newsletter form input[type=submit]{ position: absolute;top: 0;right: -1px;bottom: 0;border: 0;background: none;font-size: 16px;padding: 0 20px;background: #ff7f5d;color: #f0f0f0 !important;transition: 0.3s;border-radius: 0 4px 4px 0;box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);} #footer .footer-top .footer-newsletter form input[type=submit]:hover{ background: #ff9377;} #footer .footer-top .social-links{ margin-top: 30px;} #footer .footer-top .social-links a{ font-size: 18px;display: inline-block;background: rgba(255, 255, 255, 0.1);color: #f0f0f0 !important;line-height: 1;padding: 8px 0;margin-right: 4px;border-radius: 4px;text-align: center;width: 36px;height: 36px;transition: 0.3s;} #footer .footer-top .social-links a:hover{ background: #ff7f5d;color: #f0f0f0 !important;text-decoration: none;} #footer .footer-bottom{ border-top: 1px solid #3b0e41;z-index: 2;position: relative;padding-top: 40px;padding-bottom: 40px;} #footer .copyright{ float: left;} #footer .credits{ float: right;font-size: 13px;} @media (max-width: 768px){ #footer .copyright, #footer .credits{ float: none;text-align: center;} #footer .credits{ padding-top: 5px;} } .whatsapp{ position: fixed;width: 44px;height: 44px;bottom: 14px;right: 75px;background-color: #25d366;color: #FFF;border-radius: 50px;text-align: center;font-size: 30px;z-index: 100;display: none;transition: opacity 0.5s ease;} .whatsapp-icon{ margin-top:8px;} @keyframes heartbeat{ 0%{ transform: scale(1);} 20%{ transform: scale(1.1);} 40%{ transform: scale(1);} } .whatsapp{ animation: heartbeat 1s infinite;} @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500&display=swap");:root{ --background: #1e1e1e;--gray: #797d7f;} *, *::before, *::after{ box-sizing: border-box;} *, ::after, ::before{ } input[type=text], input[type=password], input[type=number], input[type=email], select{ width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;} input[type=submit]{ width: 100%;background-color: #050e0cf2;color: white;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;} input[type=submit]:hover{ background-color: #B46A10 ;} .formularioiniciosesion{ border-radius: 5px;background-color: #e5e2e2;padding: 20px;width: 50%;margin: auto;} table{ display: block;overflow-x: auto;} .pop-up{ position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.8);color: #f0f0f0 !important;padding: 20px;border-radius: 5px;display: none;} .social a{ display: inline-block;margin-right: 10px;color: #333;font-size: 20px;transition: color 0.3s ease-in-out;} .social a:hover{ color: #007bff;} .member-options li{ display: flex;align-items: center;margin-bottom: 10px;color: #f0f0f0 !important;font-weight: bold;} .member-options li i{ margin-right: 10px;font-size: 18px;color: #007bff;} .btn-option{ display: flex;align-items: center;justify-content: flex-start;width: 100%;padding: 10px;margin-right: 30px;border: none;border-radius: 5px;background-color: #ff7f5dd1;color: #f0f0f0 !important;transition: background-color 0.3s ease-in-out;} .btn-option:hover, .btn-option:focus, .btn-option:active{ background-color: #fb6e48;} .btn-option i{ margin-right: 5px;order: -1;} .btn-option span{ white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .btn-option:hover span{ font-weight: bold;} .lorem-text{ display: none;margin-top: 10px;} .popup-locutor{ position: absolute;z-index: 9999;background-color: rgba(21, 5, 23, 0.69);color: #f0f0f0 !important;padding: 10px;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);display: none;} .popup-locutor.show{ display: block;} .testimonial-item{ text-align: center;padding: 30px;background-color: #2c2c2c;border-radius: 10px;} .testimonial-text{ margin-bottom: 20px;} .testimonial-name{ margin-bottom: 5px;font-weight: 600;} .testimonial-occupation{ color: #888;font-size: 14px;} .banner-image{ width: 110%;height: 100%;} #mySwiperMobile{ display:none;} .img-desktop{ max-width: 100%;width: 100%;height: auto;} #hero{ background: linear-gradient(315deg, #f0f0f0, #2c2c2c, #f0f0f0, #f0f0f0, #191919, #1f1f1f, #f0f0f0);background-size: 400% 400%;-webkit-animation: GradientAnimation 18s ease infinite;-moz-animation: GradientAnimation 18s ease infinite;-o-animation: GradientAnimation 18s ease infinite;animation: GradientAnimation 18s ease infinite;} @-webkit-keyframes GradientAnimation{ 0%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} 100%{ background-position: 0% 50%;} } @-moz-keyframes GradientAnimation{ 0%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} 100%{ background-position: 0% 50%;} } @-o-keyframes GradientAnimation{ 0%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} 100%{ background-position: 0% 50%;} } @keyframes GradientAnimation{ 0%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} 100%{ background-position: 0% 50%;} } #hero .hero-container{ background: none;padding: 50px 0;} #hero video{ visibility: hidden;} @keyframes Gradient{ 0%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} 100%{ background-position: 0% 50%;} } @media screen and (width: 2796px) and (height: 1290px) and (resolution: 460dpi){ #fb-root, #fb-customer-chat{ display: none;} .cta{ padding: 0;} .carousel-indicators{ display: none;} .mySwiper{ display: none;} #mySwiperMobile{ display:block;} swiper-slide{ background-position: center;background-size: cover;width: 100%;height: 100%;} #mySwiperMobile swiper-slide img{ display: block;width: 100%;height: 100%;padding-bottom: 10% } swiper-container{ --swiper-slide-width: 100% !important;} .mySwiper .swiper-slide-active{ visibility: hidden;} } @media screen and (width: 2796px) and (height: 1290px) and (resolution: 460dpi){ #fb-root, #fb-customer-chat{ display: none;} .cta{ padding: 0;} .carousel-indicators{ display: none;} .mySwiper{ display: none;} #mySwiperMobile{ display:block;} swiper-slide{ background-position: center;background-size: cover;width: 100%;height: 100%;} #mySwiperMobile swiper-slide img{ display: block;width: 100%;height: 100%;padding-bottom: 20% } swiper-container{ --swiper-slide-width: 100% !important;} .mySwiper .swiper-slide-active{ visibility: hidden;} } @media screen and (width: 6.1in) and (height: 2.532in) and (resolution: 460dpi){ #fb-root, #fb-customer-chat{ display: none;} .cta{ padding: 0;} .carousel-indicators{ display: none;} .reproductor{ display: flex;justify-content: center;align-items: center;} .reproductor img{ max-width: 100%;height: auto;} .mySwiper{ display: none;} #mySwiperMobile{ display:block;} swiper-slide{ background-position: center;background-size: cover;width: 100%;height: 100%;} #mySwiperMobile swiper-slide img{ display: block;width: 100%;height: 100%;padding-bottom: 20% } swiper-container{ --swiper-slide-width: 100% !important;} .mySwiper .swiper-slide-active{ visibility: hidden;} } @media screen and (max-device-width:640px), screen and (max-width:640px){ #hero{ background: linear-gradient(315deg, #f0f0f0, #2c2c2c, #f0f0f0, #f0f0f0, #191919, #1f1f1f, #f0f0f0);background-size: 400% 400%;-webkit-animation: GradientAnimation 18s ease infinite;-moz-animation: GradientAnimation 18s ease infinite;-o-animation: GradientAnimation 18s ease infinite;animation: GradientAnimation 18s ease infinite;} @-webkit-keyframes GradientAnimation{ 0%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} 100%{ background-position: 0% 50%;} } @-moz-keyframes GradientAnimation{ 0%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} 100%{ background-position: 0% 50%;} } @-o-keyframes GradientAnimation{ 0%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} 100%{ background-position: 0% 50%;} } @keyframes GradientAnimation{ 0%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} 100%{ background-position: 0% 50%;} } #hero .hero-container{ background: none;padding: 50px 0;} #hero video{ visibility: hidden;} @keyframes Gradient{ 0%{ background-position: 0% 50%;} 50%{ background-position: 100% 50%;} 100%{ background-position: 0% 50%;} } #faq{ display: none;} #testimonials{ display: none;} #fb-root, #fb-customer-chat{ display: none;} .our-values .card .video{ display: none;} .our-values .card:nth-child(1){ background-image: url('.././img/our-values-7.webp');background-size: cover;background-position: center;} .our-values .card:nth-child(.2){ background-image: url('https://i.ibb.co/hRGN2SQ/our-values-7.webp');background-size: cover;background-position: center;} .carousel-item img{ width: 110%;height: auto;} .banner-image{ display: none;} .developers{ display: none;} .cta{ padding: 0;} .carousel-indicators{ display: none;} .mySwiper{ display: none;} #mySwiperMobile{ display:block;} swiper-slide{ background-position: center;background-size: cover;width: 100%;height: 100%;} #mySwiperMobile swiper-slide img{ display: block;width: 100%;height: 100%;margin-top: 25%;padding-bottom: 15% } swiper-container{ --swiper-slide-width: 100% !important;} .mySwiper .swiper-slide-active{ visibility: hidden;} } @media (min-width: 768px) and (max-width: 1024px){ .mySwiper{ display: block;margin-top: 8%;} #mySwiperMobile{ display: none;} swiper-slide{ background-position: center;background-size: cover;width: 50%;height: 50%;} #mySwiperMobile swiper-slide img{ display: block;width: 100%;height: 100%;margin-top: 15%;padding-bottom: 8%;} } body{ background-color: #1a1a1a !important !important;} .contact .php-email-form input, .contact .php-email-form textarea{ background: #2c2c2c !important;color: #f0f0f0 !important !important;border: 1px solid #444444 !important;} .contact .php-email-form input::placeholder, .contact .php-email-form textarea::placeholder{ color: #b0b0b0 !important;} .contact .php-email-form button[type=submit]{ background: #ff7f5d !important;color: #f0f0f0 !important !important;} .contact .php-email-form button[type=submit]:hover{ background: #ff9377 !important;}
/* Fondo oscuro para las secciones */
body{
  background-color: #1a1a1a !important;

}