/* Theme Name: Rapid Theme URL: https://bootstrapmade.com/rapid-multipurpose-bootstrap-business-template/ Author: BootstrapMade.com License: https://bootstrapmade.com/license/ */ /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ body { background: #fff; color: #444; font-family: "Open Sans", sans-serif; } a { color: #1bb1dc; transition: 0.5s; } a:hover, a:active, a:focus { color: #0a98c0; outline: none; text-decoration: none; } p { padding: 0; margin: 0 0 30px 0; } h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", sans-serif; font-weight: 400; margin: 0 0 20px 0; padding: 0; } /* Back to top button */ .back-to-top { position: fixed; display: none; background: #1bb1dc; color: #fff; width: 44px; height: 44px; text-align: center; line-height: 1; font-size: 16px; border-radius: 50%; right: 15px; bottom: 15px; transition: background 0.5s; z-index: 11; } .back-to-top i { padding-top: 12px; color: #fff; } /* Prelaoder */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; overflow: hidden; background: #fff; } #preloader:before { content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border: 6px solid #f2f2f2; border-top: 6px solid #1bb1dc; 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% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes animate-preloader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*-------------------------------------------------------------- # Top Bar --------------------------------------------------------------*/ #topbar { padding: 0 0 10px 0; font-size: 14px; transition: all 0.5s; } #topbar .social-links { text-align: right; } #topbar .social-links a { color: #535074; padding: 4px 12px; display: inline-block; line-height: 1px; } #topbar .social-links a:hover { color: #1bb1dc; } #topbar .social-links a:first-child { border-left: 0; } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ #header { height: 110px; transition: all 0.5s; z-index: 997; transition: all 0.5s; padding: 20px 0; position: fixed; left: 0; top: 0; right: 0; transition: all 0.5s; z-index: 997; } #header.header-scrolled, #header.header-pages { height: 70px; padding: 15px 0; background-color: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3); } #header.header-scrolled #topbar, #header.header-pages #topbar { display: none; } #header .logo h1 { font-size: 36px; margin: 0; padding: 0; line-height: 1; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; } #header .logo h1 a, #header .logo h1 a:hover { color: #413e66; text-decoration: none; } #header .logo img { padding: 0; margin: 7px 0; max-height: 26px; } .main-pages { margin-top: 60px; } /*-------------------------------------------------------------- # Intro Section --------------------------------------------------------------*/ #intro { width: 100%; height: 100vh; position: relative; background: #f5f8fd url("../img/intro-bg.jpg") center top no-repeat; background-size: cover; } #intro .intro-info h2 { color: #413e66; margin-bottom: 40px; font-size: 48px; font-weight: 700; } #intro .intro-info h2 span { color: #1bb1dc; } #intro .intro-info .btn-get-started, #intro .intro-info .btn-services { font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; display: inline-block; padding: 10px 32px; border-radius: 4px; transition: 0.5s; color: #fff; background: #1bb1dc; color: #fff; } #intro .intro-info .btn-get-started:hover, #intro .intro-info .btn-services:hover { background: #0a98c0; } /*-------------------------------------------------------------- # Navigation Menu --------------------------------------------------------------*/ /* Desktop Navigation */ .main-nav { /* Drop Down */ /* Deep Drop Down */ } .main-nav, .main-nav * { margin: 0; padding: 0; list-style: none; } .main-nav > ul > li { position: relative; white-space: nowrap; float: left; } .main-nav a { display: block; position: relative; color: #413e66; padding: 10px 15px; transition: 0.3s; font-size: 14px; font-family: "Open Sans", sans-serif; text-transform: uppercase; font-weight: 600; } .main-nav a:hover, .main-nav .active > a, .main-nav li:hover > a { color: #1bb1dc; text-decoration: none; } .main-nav .drop-down ul { display: block; position: absolute; left: 0; top: calc(100% - 30px); z-index: 99; opacity: 0; visibility: hidden; padding: 10px 0; background: #fff; box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25); transition: ease all 0.3s; } .main-nav .drop-down:hover > ul { opacity: 1; top: 100%; visibility: visible; } .main-nav .drop-down li { min-width: 180px; position: relative; } .main-nav .drop-down ul a { padding: 10px 20px; font-size: 14px; font-weight: 500; text-transform: none; color: #065e77; } .main-nav .drop-down ul a:hover, .main-nav .drop-down ul .active > a, .main-nav .drop-down ul li:hover > a { color: #1bb1dc; } .main-nav .drop-down > a:after { content: "\f107"; font-family: FontAwesome; padding-left: 10px; } .main-nav .drop-down .drop-down ul { top: 0; left: calc(100% - 30px); } .main-nav .drop-down .drop-down:hover > ul { opacity: 1; top: 0; left: 100%; } .main-nav .drop-down .drop-down > a { padding-right: 35px; } .main-nav .drop-down .drop-down > a:after { content: "\f105"; position: absolute; right: 15px; } /* Mobile Navigation */ .mobile-nav { position: fixed; top: 0; bottom: 0; z-index: 9999; overflow-y: auto; left: -260px; width: 260px; padding-top: 18px; background: rgba(40, 38, 70, 0.8); transition: 0.4s; } .mobile-nav * { margin: 0; padding: 0; list-style: none; } .mobile-nav a { display: block; position: relative; color: #fff; padding: 10px 20px; font-weight: 500; } .mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a { color: #8dc2fa; text-decoration: none; } .mobile-nav .drop-down > a:after { content: "\f078"; font-family: FontAwesome; padding-left: 10px; position: absolute; right: 15px; } .mobile-nav .active.drop-down > a:after { content: "\f077"; } .mobile-nav .drop-down > a { padding-right: 35px; } .mobile-nav .drop-down ul { display: none; overflow: hidden; } .mobile-nav .drop-down li { padding-left: 20px; } .mobile-nav-toggle { position: fixed; right: 0; top: 0; z-index: 9998; border: 0; background: none; font-size: 24px; transition: all 0.4s; outline: none !important; line-height: 1; cursor: pointer; text-align: right; } .mobile-nav-toggle i { margin: 18px 18px 0 0; color: #065e77; } .mobile-nav-overly { width: 100%; height: 100%; z-index: 9997; top: 0; left: 0; position: fixed; background: rgba(40, 38, 70, 0.8); overflow: hidden; display: none; } .mobile-nav-active { overflow: hidden; } .mobile-nav-active .mobile-nav { left: 0; } .mobile-nav-active .mobile-nav-toggle i { color: #fff; } /*-------------------------------------------------------------- # Sections --------------------------------------------------------------*/ /* Sections Header --------------------------------*/ .section-header h3 { font-size: 36px; color: #413e66; text-align: center; font-weight: 700; position: relative; font-family: "Montserrat", sans-serif; } .section-header p { text-align: center; margin: auto; font-size: 15px; padding-bottom: 60px; color: #535074; width: 50%; } /* Section with background --------------------------------*/ .section-bg { background: #f5f8fd; } /* About Us Section --------------------------------*/ #about { padding: 80px 0; } #about .about-content { padding-top: 40px; } #about .about-brand { margin: 0 0 16px 0; } #about .about-brand img { max-width: 190px; height: auto; } #about .about-content .about-lead { font-size: 17px; line-height: 1.75; color: #42556a; margin-bottom: 20px; } #about .about-highlights { margin: 0 -8px 10px; } #about .about-pill { background: #ffffff; border: 1px solid var(--line-soft); border-radius: 12px; padding: 18px; margin: 8px 0; box-shadow: 0 8px 20px rgba(16, 32, 51, 0.06); height: calc(100% - 16px); } #about .about-pill h4 { font-size: 16px; margin-bottom: 8px; color: var(--ink-900); } #about .about-pill p { margin: 0; font-size: 14px; line-height: 1.6; color: #55687d; } #about .about-content h2 { color: #413e66; font-family: "Montserrat", sans-serif; font-weight: 700; } #about .about-content h3 { color: #696592; font-weight: 400; font-size: 22px; font-style: italic; } #about .about-content ul { list-style: none; padding: 0; } #about .about-content ul li { padding-bottom: 10px; } #about .about-content ul li i { font-size: 20px; padding-right: 4px; color: #1bb1dc; } #about .about-img { position: relative; margin: 30px 30px 30px 30px; } #about .about-img img { width: 100%; border: 8px solid #fff; transition: .5s; } #about .about-img img:hover { width: 100%; -webkit-transform: scale(1.03); transform: scale(1.03); } #about .about-img::before { position: absolute; left: -31px; top: -30px; width: 90%; height: 92%; z-index: -1; content: ''; background-color: #ebf1fa; transition: .5s; } #about .about-img::after { position: absolute; right: -31px; bottom: -30px; width: 90%; height: 92%; z-index: -1; content: ''; background-color: #ebf1fa; transition: .5s; } /* Services Section --------------------------------*/ #services { padding: 60px 0 40px 0; } #services .box { padding: 30px; position: relative; overflow: hidden; border-radius: 10px; margin: 0 10px 40px 10px; background: #fff; box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1); transition: all 0.3s ease-in-out; text-align: center; } #services .box:hover { -webkit-transform: scale(1.1); transform: scale(1.1); } #services .icon { margin: 0 auto 15px auto; padding-top: 12px; display: inline-block; text-align: center; border-radius: 50%; width: 60px; height: 60px; } #services .icon i { font-size: 36px; line-height: 1; } #services .title { font-weight: 700; margin-bottom: 15px; font-size: 18px; } #services .title a { color: #111; } #services .box:hover .title a { color: #1bb1dc; } #services .description { font-size: 14px; line-height: 28px; margin-bottom: 0; text-align: left; } /* Why Us Section --------------------------------*/ #why-us { padding: 60px 0; } #why-us .why-us-content .features { margin: 0 0 15px 0; padding: 0; transition: 0.3s ease-in-out; } #why-us .why-us-content .features i { font-size: 36px; float: left; } #why-us .why-us-content .features h4 { font-size: 24px; font-weight: 600; margin-left: 56px; color: #413e66; margin-bottom: 5px; } #why-us .why-us-content .features p { font-size: 16px; margin-left: 56px; color: #555186; } #why-us .counters { padding-top: 40px; } #why-us .counters span { font-family: "Montserrat", sans-serif; font-weight: bold; font-size: 48px; display: block; color: #555186; } #why-us .counters p { padding: 0; margin: 0 0 20px 0; font-family: "Montserrat", sans-serif; font-size: 14px; color: #8a87b6; } /* Call To Action Section --------------------------------*/ #call-to-action { background: #2d2b46; background-size: cover; padding: 40px 0; } #call-to-action .cta-title { color: #fff; font-size: 28px; font-weight: 700; } #call-to-action .cta-text { color: #fff; } #call-to-action .cta-btn { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 1px; display: inline-block; padding: 8px 26px; border-radius: 3px; transition: 0.5s; margin: 10px; border: 3px solid #fff; color: #fff; } #call-to-action .cta-btn:hover { background: #1bb1dc; border: 3px solid #1bb1dc; } /* Features Section --------------------------------*/ #features { padding: 80px 0; } #features h4 { font-weight: 600; font-size: 24px; } /* Portfolio Section --------------------------------*/ #portfolio { padding: 60px 0; } #portfolio #portfolio-flters { padding: 0; margin: 5px 0 35px 0; list-style: none; text-align: center; } #portfolio #portfolio-flters li { cursor: pointer; margin: 15px 15px 15px 0; display: inline-block; padding: 6px 10px; font-size: 16px; line-height: 20px; color: #413e66; margin-bottom: 5px; transition: all 0.3s ease-in-out; } #portfolio #portfolio-flters li:hover, #portfolio #portfolio-flters li.filter-active { color: #1bb1dc; } #portfolio #portfolio-flters li:last-child { margin-right: 0; } #portfolio .portfolio-item { position: relative; overflow: hidden; margin-bottom: 30px; } #portfolio .portfolio-item .portfolio-wrap { overflow: hidden; position: relative; margin: 0; } #portfolio .portfolio-item .portfolio-wrap:hover img { opacity: 0.4; transition: 0.3s; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; text-align: center; opacity: 0; transition: 0.2s linear; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info h4 { font-size: 22px; line-height: 1px; font-weight: 700; margin-bottom: 14px; padding-bottom: 0; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info h4 a { color: #fff; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info h4 a:hover { color: #1bb1dc; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info p { padding: 0; margin: 0; color: #f8fcff; font-weight: 500; font-size: 14px; text-transform: uppercase; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview, #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details { display: inline-block; line-height: 1; text-align: center; width: 36px; height: 36px; background: #1bb1dc; border-radius: 50%; margin: 10px 4px 0 4px; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview i, #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details i { padding-top: 6px; font-size: 22px; color: #fff; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview:hover, #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details:hover { background: #42c3e8; } #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview:hover i, #portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details:hover i { color: #fff; } #portfolio .portfolio-item .portfolio-wrap:hover { background: #282646; } #portfolio .portfolio-item .portfolio-wrap:hover .portfolio-info { opacity: 1; } /* Testimonials Section --------------------------------*/ #testimonials { padding: 60px 0; } #testimonials .section-header { margin-bottom: 40px; } #testimonials .testimonial-item .testimonial-img { width: 120px; border-radius: 50%; border: 4px solid #fff; float: left; } #testimonials .testimonial-item h3 { font-size: 20px; font-weight: bold; margin: 10px 0 5px 0; color: #111; margin-left: 140px; } #testimonials .testimonial-item h4 { font-size: 14px; color: #999; margin: 0 0 15px 0; margin-left: 140px; } #testimonials .testimonial-item p { font-style: italic; margin: 0 0 15px 140px; } #testimonials .owl-nav, #testimonials .owl-dots { margin-top: 5px; text-align: center; } #testimonials .owl-dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; } #testimonials .owl-dot.active { background-color: #1bb1dc; } /* Team Section --------------------------------*/ #team { padding: 60px 0; } #team .member { text-align: center; margin-bottom: 20px; position: relative; overflow: hidden; } #team .member .member-info { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; bottom: 0; left: 0; right: 0; transition: 0.2s; padding: 15px 0; background: rgba(29, 28, 41, 0.6); } #team .member .member-info-content { transition: margin 0.2s; height: 40px; transition: height 0.4s; } #team .member:hover .member-info { transition: 0.4s; } #team .member:hover .member-info-content { height: 80px; } #team .member h4 { font-weight: 700; margin-bottom: 2px; font-size: 18px; color: #fff; } #team .member span { font-style: italic; display: block; font-size: 13px; color: #fff; } #team .member .social { margin-top: 15px; } #team .member .social a { transition: none; color: #fff; } #team .member .social a:hover { color: #1bb1dc; } #team .member .social i { font-size: 18px; margin: 0 2px; } /* Clients Section --------------------------------*/ #clients { padding: 60px 0; } #clients img { max-width: 80%; opacity: 0.5; transition: 0.3s; padding: 15px 0; } #clients img:hover { opacity: 1; } #clients .owl-nav, #clients .owl-dots { margin-top: 5px; text-align: center; } #clients .owl-dot { display: inline-block; margin: 0 5px; width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; } #clients .owl-dot.active { background-color: #1bb1dc; } /* Pricing Section --------------------------------*/ #pricing { padding: 80px 0; } #pricing .card { border: 0; border-radius: 0px; box-shadow: 0 3px 0px 0 rgba(65, 62, 102, 0.08); transition: all .3s ease-in-out; padding: 36px 0; position: relative; } #pricing .card:after { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 5px; background-color: #1bb1dc; transition: 0.5s; } #pricing .card:hover { -webkit-transform: scale(1.05); transform: scale(1.05); box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.08); } #pricing .card:hover:after { width: 100%; } #pricing .card .card-header { background-color: white; border-bottom: 0px; -moz-text-align-last: center; text-align-last: center; } #pricing .card .card-title { margin-bottom: 16px; color: #535074; } #pricing .card .card-block { padding-top: 0; text-align: center; } #pricing .card .list-group-item { border: 0px; padding: 6px; color: #413e66; font-weight: 300; } #pricing .card h3 { font-size: 64px; margin-bottom: 0px; color: #535074; } #pricing .card h3 .currency { font-size: 30px; position: relative; font-weight: 400; top: -30px; letter-spacing: 0px; } #pricing .card h3 .period { font-size: 16px; color: #6c67a3; letter-spacing: 0px; } #pricing .card .list-group { margin-bottom: 15px; } #pricing .card .btn { text-transform: uppercase; font-size: 13px; font-weight: 500; color: #5f5b96; border-radius: 0; padding: 10px 24px; letter-spacing: 1px; border-radius: 3px; display: inline-block; background: #1bb1dc; color: #fff; } #pricing .card .btn:hover { background: #0a98c0; } /* Frequently Asked Questions Section --------------------------------*/ #faq { padding: 60px 0; overflow: hidden; } #faq #faq-list { padding: 0; list-style: none; } #faq #faq-list li { border-bottom: 1px solid #ebebeb; } #faq #faq-list a { padding: 22px 0; display: block; position: relative; font-family: "Montserrat", sans-serif; font-size: 20px; line-height: 1; font-weight: 400; padding-right: 20px; } #faq #faq-list i { font-size: 24px; position: absolute; right: 0; top: 20px; } #faq #faq-list p { margin-bottom: 20px; } #faq #faq-list a.collapse { color: #1bb1dc; } #faq #faq-list a.collapsed { color: #000; } #faq #faq-list a.collapsed i::before { content: "\f2c7" !important; } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ #footer { padding: 0 0 30px 0; font-size: 14px; background: #fff; } #footer .footer-top { padding: 60px 0 30px 0; background: #f5f8fd; } #footer .footer-top .footer-info { margin-bottom: 30px; } #footer .footer-top .footer-info h3 { font-size: 34px; margin: 0 0 20px 0; padding: 2px 0 2px 0; line-height: 1; font-family: "Montserrat", sans-serif; color: #413e66; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; } #footer .footer-top .footer-info p { font-size: 13px; line-height: 24px; margin-bottom: 0; font-family: "Montserrat", sans-serif; color: #535074; } #footer .footer-top .social-links a { font-size: 18px; display: inline-block; background: #1bb1dc; color: #fff; line-height: 1; padding: 8px 0; margin-right: 4px; border-radius: 50%; text-align: center; width: 36px; height: 36px; transition: 0.3s; } #footer .footer-top .social-links a:hover { background: #0a98c0; color: #fff; } #footer .footer-top h4 { font-size: 14px; font-weight: bold; color: #413e66; text-transform: uppercase; position: relative; padding-bottom: 10px; } #footer .footer-top .footer-links { margin-bottom: 30px; } #footer .footer-top .footer-links ul { list-style: none; padding: 0; margin: 0; } #footer .footer-top .footer-links ul li { padding: 8px 0; } #footer .footer-top .footer-links ul li:first-child { padding-top: 0; } #footer .footer-top .footer-links ul a { color: #696592; } #footer .footer-top .footer-links ul a:hover { color: #1bb1dc; } #footer .footer-top .footer-contact { margin-bottom: 30px; } #footer .footer-top .footer-contact p { line-height: 26px; } #footer .footer-top .footer-newsletter { margin-bottom: 30px; } #footer .footer-top .footer-newsletter input[type="email"] { border: 0; padding: 6px 8px; width: 65%; border: 1px solid #d9dde6; } #footer .footer-top .footer-newsletter input[type="submit"] { background: #1bb1dc; border: 1px solid #1bb1dc; width: 35%; padding: 6px 0; text-align: center; color: #fff; transition: 0.3s; cursor: pointer; } #footer .footer-top .footer-newsletter input[type="submit"]:hover { background: #0a98c0; } #footer .footer-top .form .form-group { margin-bottom: 15px; } #footer .footer-top .form #sendmessage { color: #fff; background: #1bb1dc; display: none; text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; } #footer .footer-top .form #errormessage { color: #fff; display: none; background: red; text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; } #footer .footer-top .form #sendmessage.show, #footer .footer-top .form #errormessage.show, #footer .footer-top .form .show { display: block; } #footer .footer-top .form .validation { color: red; display: none; margin: 0 0 20px; font-weight: 400; font-size: 13px; } #footer .footer-top .form label { color: #413e66; font-weight: 500; } #footer .footer-top .form input, #footer .footer-top .form textarea { border-radius: 0; box-shadow: none; border: 1px solid #dce1ec; font-size: 14px; } #footer .footer-top .form input::-webkit-input-placeholder, #footer .footer-top .form textarea::-webkit-input-placeholder { color: #a2a0bd; } #footer .footer-top .form input::-moz-placeholder, #footer .footer-top .form textarea::-moz-placeholder { color: #a2a0bd; } #footer .footer-top .form input:-ms-input-placeholder, #footer .footer-top .form textarea:-ms-input-placeholder { color: #a2a0bd; } #footer .footer-top .form input::placeholder, #footer .footer-top .form textarea::placeholder { color: #a2a0bd; } #footer .footer-top .form button[type="submit"] { background: #1bb1dc; border: 0; border-radius: 3px; padding: 8px 30px; color: #fff; transition: 0.3s; } #footer .footer-top .form button[type="submit"]:hover { background: #0a98c0; cursor: pointer; } #footer .copyright { text-align: center; padding-top: 30px; color: #535074; font-size: 15px; } #footer .credits { text-align: center; font-size: 14px; padding-top: 4px; color: #8582a8; } #footer .credits a { color: #1bb1dc; } #footer .credits a:hover { color: #0a98c0; } /*-------------------------------------------------------------- # Responsive Media Queries --------------------------------------------------------------*/ @media (min-width: 991px) { #call-to-action .cta-btn-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } } @media (min-width: 992px) { #intro .intro-info { padding-top: 80px; } #testimonials .testimonial-item p { width: 80%; } } @media (max-width: 991px) { #topbar { display: none; } #header { height: 70px; padding: 15px 0; } #header .logo h1 { font-size: 28px; padding: 8px 0; } #why-us .why-us-content { padding-top: 30px; } #pricing { padding-bottom: 30px; } #pricing .card { margin-bottom: 50px; } } @media (max-width: 768px) { .back-to-top { bottom: 15px; } #faq #faq-list a { font-size: 18px; } #faq #faq-list i { top: 13px; } } @media (max-width: 767px) { #intro { height: auto; padding: 80px 0 60px 0; } #intro .container { height: auto !important; } #intro .intro-img { width: 80%; } #intro .intro-info { text-align: center; padding-top: 40px; } #intro .intro-info h2 { font-size: 34px; margin-bottom: 30px; } .section-header p { width: 100%; } #testimonials .testimonial-item { text-align: center; } #testimonials .testimonial-item .testimonial-img { float: none; margin: auto; } #testimonials .testimonial-item h3, #testimonials .testimonial-item h4, #testimonials .testimonial-item p { margin-left: 0; } } @media (max-width: 574px) { #footer .footer-top .social-links a { margin-bottom: 25px; } } /*-------------------------------------------------------------- # Phase 1 Refresh --------------------------------------------------------------*/ :root { --brand-900: #0f2339; --brand-800: #18344f; --brand-700: #22527a; --accent-500: #15a0bf; --accent-400: #2dc2d8; --ink-900: #102033; --ink-700: #3b4d63; --surface-100: #f3f7fb; --surface-0: #ffffff; --line-soft: #dbe6f1; --shadow-soft: 0 16px 40px rgba(16, 32, 51, 0.12); --shadow-card: 0 10px 26px rgba(16, 32, 51, 0.1); } body { font-family: "Manrope", sans-serif; color: var(--ink-700); background: radial-gradient(circle at 12% 8%, rgba(45, 194, 216, 0.15), transparent 28%), radial-gradient(circle at 88% 12%, rgba(34, 82, 122, 0.16), transparent 34%), var(--surface-100); } h1, h2, h3, h4, h5, h6, .section-header h3, #intro .intro-info h2 { font-family: "Sora", sans-serif; color: var(--ink-900); } a { color: var(--brand-700); } a:hover, a:active, a:focus { color: var(--accent-500); } #topbar { padding: 0 0 6px 0; } #topbar .social-links { display: flex; justify-content: flex-end; gap: 10px; } #topbar .social-links a { color: var(--brand-700); line-height: 1; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(34, 82, 122, 0.16); background: rgba(255, 255, 255, 0.78); font-size: 12px; font-weight: 700; } #header { padding: 14px 0; background: #ffffff; border-bottom: 1px solid rgba(16, 32, 51, 0.07); } #header.header-scrolled, #header.header-pages { background: #ffffff; box-shadow: var(--shadow-soft); border-bottom-color: transparent; } #header .logo img { max-height: 40px; margin: 0; } #header .logo .brand-logo { max-height: 44px; width: auto; object-fit: contain; } .main-nav a { color: var(--ink-900); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; border-radius: 999px; } .main-nav a:hover, .main-nav .active > a, .main-nav li:hover > a { color: var(--brand-700); background: rgba(21, 160, 191, 0.1); } .main-nav .nav-cta a { background: linear-gradient(135deg, var(--brand-700), var(--accent-500)); color: #fff; box-shadow: 0 12px 22px rgba(21, 160, 191, 0.24); } .main-nav .nav-cta a:hover { color: #fff; transform: translateY(-1px); } #intro { min-height: 100vh; height: auto; padding: 160px 0 95px 0; background: linear-gradient(120deg, rgba(15, 35, 57, 0.8), rgba(24, 52, 79, 0.56)), url("../img/intro-bg.jpg") center center / cover no-repeat; } #intro .intro-info h2 { color: #f6fbff; font-size: 52px; line-height: 1.12; margin-bottom: 18px; } #intro .intro-info h2 span { color: var(--accent-400); } .intro-eyebrow { color: rgba(255, 255, 255, 0.85); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; font-size: 12px; margin-bottom: 14px; } .intro-lead { color: rgba(247, 251, 255, 0.87); font-size: 18px; line-height: 1.65; max-width: 620px; margin-bottom: 26px; } .intro-actions { display: flex; flex-wrap: wrap; gap: 12px; } #intro .intro-info .btn-get-started, #intro .intro-info .btn-services { border-radius: 999px; padding: 12px 24px; border: 2px solid transparent; font-size: 12px; } #intro .intro-info .btn-get-started { background: linear-gradient(135deg, var(--accent-500), var(--brand-700)); color: #fff; } #intro .intro-info .btn-get-started:hover { background: linear-gradient(135deg, var(--accent-400), var(--brand-700)); } #intro .intro-info .btn-services.btn-outline { background: transparent; border-color: rgba(255, 255, 255, 0.58); color: #fff; } #intro .intro-info .btn-services.btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); } .intro-metrics { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 24px 0 0 0; padding: 0; } .intro-metrics li { color: rgba(248, 252, 255, 0.88); font-size: 14px; } .intro-metrics strong { display: block; color: #fff; font-size: 20px; } #intro .intro-img img { border-radius: 20px; box-shadow: 0 24px 52px rgba(7, 20, 34, 0.35); border: 1px solid rgba(255, 255, 255, 0.18); } .section-header h3 { letter-spacing: -0.02em; } .section-header p { color: #51657c; font-size: 16px; max-width: 760px; } #about, #services, #solutions, #footer { position: relative; z-index: 1; } #services { padding: 86px 0 58px 0; } #services .box { border: 1px solid var(--line-soft); box-shadow: var(--shadow-card); border-radius: 16px; margin: 0 8px 26px 8px; padding: 30px 24px; text-align: left; transform: translateY(0); } #services .box:hover { transform: translateY(-8px); box-shadow: 0 20px 36px rgba(16, 32, 51, 0.18); } #services .icon { margin: 0 0 18px 0; width: 64px; height: 64px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; } #services .icon img { width: 36px; } #services .title { font-size: 20px; margin-bottom: 8px; } #services .title a { color: var(--ink-900); } #services .box:hover .title a { color: var(--brand-700); } #services .description { color: #56697f; line-height: 1.6; } #why-us { padding: 86px 0; } #why-us .why-us-img img { border-radius: 18px; border: 1px solid var(--line-soft); box-shadow: var(--shadow-card); } #why-us .why-us-content { padding-left: 10px; } #why-us .why-us-lead { color: #42566c; line-height: 1.7; font-size: 17px; margin-bottom: 18px; } #why-us .why-us-grid { margin: 0 -8px; } #why-us .why-us-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px; margin: 8px 0; box-shadow: 0 8px 20px rgba(16, 32, 51, 0.06); height: calc(100% - 16px); } #why-us .why-us-card h4 { font-size: 16px; margin: 0 0 8px; color: var(--ink-900); } #why-us .why-us-card p { margin: 0; color: #55697f; font-size: 14px; line-height: 1.58; } #why-us .why-us-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } #why-us .why-metric { background: linear-gradient(145deg, rgba(34, 82, 122, 0.1), rgba(45, 194, 216, 0.1)); border: 1px solid rgba(34, 82, 122, 0.15); border-radius: 12px; padding: 14px 12px; } #why-us .why-metric strong { display: block; font-family: "Sora", sans-serif; font-size: 20px; color: var(--ink-900); margin-bottom: 3px; } #why-us .why-metric span { font-size: 13px; color: #50657b; line-height: 1.45; } #solutions { padding: 86px 0 78px; } #solutions .solution-grid { margin-top: 6px; } #solutions .solution-grid-second { margin-top: 4px; } #solutions .solution-card { height: 100%; border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.28s ease, box-shadow 0.28s ease; background: #fff; } #solutions .solution-card:hover { transform: translateY(-8px); box-shadow: 0 20px 38px rgba(16, 32, 51, 0.18); } #solutions .solution-card .card-header { border: 0; min-height: 130px; padding: 24px 24px 10px; background: linear-gradient(140deg, rgba(34, 82, 122, 0.14), rgba(45, 194, 216, 0.12)); } #solutions .solution-card .card-header h3 { margin: 0; font-size: 22px; line-height: 1.26; color: var(--ink-900); } #solutions .solution-card .card-body { padding: 18px 24px 24px; } #solutions .solution-card .card-body p { margin: 0; color: #55687d; font-size: 15px; line-height: 1.68; } #join-us-teaser { padding: 20px 0 84px; } #join-us-teaser .join-us-teaser-panel { background: linear-gradient(145deg, rgba(15, 35, 57, 0.94), rgba(34, 82, 122, 0.9)), radial-gradient(circle at 82% 25%, rgba(45, 194, 216, 0.2), transparent 44%); border-radius: 18px; padding: 30px 32px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 18px 38px rgba(16, 32, 51, 0.22); } #join-us-teaser .join-us-teaser-eyebrow { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(214, 236, 252, 0.88); font-weight: 700; } #join-us-teaser h3 { margin: 0 0 10px; color: #ffffff; font-size: 34px; line-height: 1.2; } #join-us-teaser p { margin: 0; color: rgba(232, 245, 255, 0.92); font-size: 16px; line-height: 1.7; } #join-us-teaser .join-us-teaser-cta { display: inline-block; margin-top: 16px; background: #ffffff; color: var(--brand-700); border-radius: 999px; padding: 12px 22px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 10px 22px rgba(9, 28, 47, 0.2); } #join-us-teaser .join-us-teaser-cta:hover { color: var(--brand-900); transform: translateY(-1px); } #join-us { padding: 84px 0; } #join-us .join-us-panel { background: linear-gradient(150deg, rgba(34, 82, 122, 0.9), rgba(21, 160, 191, 0.88)), radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.18), transparent 45%); border-radius: 18px; padding: 34px; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 18px 38px rgba(16, 32, 51, 0.22); } #join-us .join-us-panel h4 { margin: 0 0 10px; font-size: 28px; color: #ffffff; } #join-us .join-us-panel p { margin: 0; color: rgba(242, 250, 255, 0.94); font-size: 17px; line-height: 1.7; max-width: 860px; } #join-us .join-us-cta { margin-top: 22px; display: inline-block; background: #ffffff; color: var(--brand-700); border-radius: 999px; padding: 12px 24px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 10px 24px rgba(9, 28, 47, 0.18); } #join-us .join-us-cta:hover { color: var(--brand-900); transform: translateY(-1px); } #footer { padding: 84px 0 58px; background: linear-gradient(140deg, rgba(15, 35, 57, 0.96), rgba(24, 52, 79, 0.95)), radial-gradient(circle at 82% 18%, rgba(45, 194, 216, 0.2), transparent 30%); } #footer .section-header h3, #footer h4, #footer strong { color: #f7fbff; } #footer .section-header p, #footer p, #footer a { color: rgba(230, 242, 253, 0.9); } #footer .section-header p { padding-bottom: 36px; } #footer img { max-width: 100%; height: auto; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.2)); } #footer .btn-get-started { display: inline-block; margin-top: 10px; font-family: "Manrope", sans-serif; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; padding: 12px 24px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--accent-500), var(--brand-700)); } #footer .btn-get-started:hover { color: #fff; background: linear-gradient(135deg, var(--accent-400), var(--brand-700)); } #footerx { background: #0a1728; } #footerx .copyright { color: rgba(221, 236, 249, 0.82); padding: 20px 0; } .back-to-top { width: 48px; height: 48px; border-radius: 999px; background: linear-gradient(135deg, var(--accent-500), var(--brand-700)); box-shadow: 0 10px 22px rgba(16, 32, 51, 0.28); } .back-to-top:hover { background: linear-gradient(135deg, var(--accent-400), var(--brand-700)); } .back-to-top i { padding-top: 15px; } .scroll-progress { position: fixed; left: 0; top: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent-500), var(--brand-700)); z-index: 1001; } @media (max-width: 991px) { #header { background: #ffffff; } #intro { padding: 128px 0 72px 0; } #intro .intro-info h2 { font-size: 40px; } .intro-metrics { justify-content: center; } } @media (max-width: 767px) { #intro { min-height: 0; } #intro .intro-info { text-align: left; } #intro .intro-info h2 { font-size: 32px; } .intro-lead { font-size: 16px; } .intro-actions { gap: 10px; } #services .box { margin-left: 0; margin-right: 0; } #why-us { padding: 72px 0; } #why-us .why-us-content { padding-left: 0; margin-top: 20px; } #why-us .why-us-lead { font-size: 16px; } #why-us .why-us-metrics { grid-template-columns: 1fr; } #solutions { padding-top: 72px; } #solutions .solution-grid { margin-top: 0; } #solutions .solution-card { margin-bottom: 16px; } #solutions .solution-card .card-header { min-height: 0; padding: 20px 20px 10px; } #solutions .solution-card .card-header h3 { font-size: 20px; } #solutions .solution-card .card-body { padding: 14px 20px 20px; } #join-us { padding: 72px 0; } #join-us-teaser { padding: 10px 0 72px; } #join-us-teaser .join-us-teaser-panel { padding: 24px 20px; } #join-us-teaser h3 { font-size: 26px; } #join-us-teaser p { font-size: 15px; } #join-us .join-us-panel { padding: 24px 20px; } #join-us .join-us-panel h4 { font-size: 24px; } #join-us .join-us-panel p { font-size: 16px; } #about .about-content { padding-top: 22px; } #about .about-brand { margin-bottom: 14px; } #about .about-content .about-lead { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }