/*General Style*/ @font-face { font-family: 'Space Grotesk'; src: url('../assets/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype'); font-style: normal; } @font-face { font-family: 'Nasalization Rg'; src: url('../assets/fonts/Nasalization_Rg.otf') format('truetype'); font-style: normal; } * { margin: 0; font-family: 'Space Grotesk', sans-serif; color: #001F3F; } h1 { font-size: clamp(2em, 5vw, 6.25em); font-weight: 400; } h2 { font-size: clamp(1.5em, 3.906vw, 4.688em); font-weight: 400; } h4 { font-size: clamp(1em, 2.6vw, 3.063em); font-weight: 400; } h5 { font-size: clamp(1.83em, 1.563vw, 1.875em); font-weight: 400; } .p-small { font-size: clamp(0.85em, 1.042vw, 1.25em); } p { font-size: clamp(1em, 1.2vw, 1.6em); } .px-6 { padding-right: 1rem; padding-left: 1rem; } .btn-amics { font-size: clamp(0.8em, 1vw, 1.2em); background-color: rgba(255, 255, 255, 0); color: #000; border: 3px solid rgb(212, 175, 55); transition: all 0.2s ease-in-out; padding: 16px 60px; border-radius: 50px; } .btn-amics:hover { background-color: rgb(212, 175, 55); color: #FFF; } .btn-amics-small { font-size: clamp(0.8em, 1vw, 1.2em); background-color: rgba(255, 255, 255, 0); color: #FFF; border: 2px solid rgb(212, 175, 55); transition: all 0.2s ease-in-out; padding: 16px 30px; border-radius: 50px; } .btn-amics-small:hover { background-color: rgb(212, 175, 55); color: #FFF; } .text-primary2 { color: #D4AF37 } .text-secondary2 { color: #909090 } .navbar-custom { background: rgba(0, 0, 0, 0.4) !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .navbar-custom .navbar-brand, .navbar-custom .nav-link { font-size: clamp(0.85em, 1.042vw, 1.25em); color: white !important; /* White text */ } .navbar-custom .nav-link:hover { color: #f8d210 !important; /* Highlight color */ } .navbar-custom .navbar-toggler { background: transparent !important; /* Transparent background */ border: none; /* Remove border */ } .navbar-custom .navbar-toggler-icon { filter: brightness(0) invert(1); /* Makes the icon white */ } .card { border: none; border-radius: 25px; overflow: hidden; } .card-img-top { border-radius: 50px; } .round-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; } .round-btn img { width: 60%; height: auto; } /* HOME */ .section { padding-top: 105px; border-radius: 150px 150px 0 0; transform: translateY(-7%); } .section2 { border-bottom: 2px solid #ddd; border-radius: 150px 150px 0 0; transform: translateY(-5%); } .section3 { padding-top: 105px; border-radius: 150px 150px 0 0; transform: translateY(-16%); } .section4 { border-bottom: 2px solid #ddd; border-radius: 150px 150px 0 0; } .section5 { padding: 70px; border-radius: 150px 150px 0 0; transform: translateY(-10%); } .video-player { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: black; } .video-player video { width: 100%; height: 100%; object-fit: cover; } /*PRICING PAGE*/ .pricing-hero-section { min-height: 120vh; background: url(../assets/images/wallpaper7.jpg) no-repeat center center; } .pricing-section1 { padding-top: 105px; border-radius: 150px 150px 0 0; transform: translateY(-7%); } .pricing-section2 { border-bottom: 2px solid #ddd; border-radius: 150px 150px 0 0; } .pricing-section3 {} .pricing-section4 { padding-top: 80px; } .trial-banner {} .trial-banner h3, .trial-banner i { color: #FFF; font-weight: 600; display: inline; margin-right: 10px; } .pricing-card { border-radius: 50px; overflow: hidden; background-color: rgba(247, 247, 247, 1); min-height: 100px; transition: all 0.3s ease-in-out; position: relative; } .pricing-card.middle { background: linear-gradient(195deg, rgba(0, 31, 63, 1) 45%, rgba(212, 175, 55, 1) 100%); transition: all 0.3s ease-in-out; } .pricing-card:hover.middle { background: linear-gradient(to right, rgba(247, 247, 247, 0), /* Start with 80% opacity */ rgba(200, 200, 200, 0) /* End with 50% opacity */ ); } .pricing-card.middle span, .pricing-card.middle p, .pricing-card.middle h5, .pricing-card.middle li, .pricing-card.middle button { color: #FFF !important; } .pricing-card:hover { border-radius: 50px; background-color: rgba(247, 247, 247, 0); min-height: 100px; transition: all 0.3s ease-in-out; position: relative; } .pricing-card:hover span, .pricing-card:hover h5, .pricing-card:hover li, .pricing-card:hover button { color: #FFF !important; } .pricing-card ul { list-style-image: url(../assets/images/checklist-icon.png); } .pricing-card ul li { font-size: clamp(1.83em, 1.563vw, 1.875em); margin-bottom: 22px; } .pricing-card .pricepoint { font-size: clamp(1.23em, 1.302vw, 1.463em); } #pricng-email-input { font-size: clamp(0.8em, 1vw, 1.2em); color: #FFF; } #pricng-email-input::placeholder { color: #FFF; font-weight: bold; font-size: clamp(0.8em, 1vw, 1.2em); opacity: 1; /* Firefox */ } #pricng-email-input2 { font-size: clamp(0.8em, 1vw, 1.2em); color: #000; background-color: rgba(255, 255, 255, 0.2); border: 1px solid gray; padding: 20px 50px; border-radius: 50px; } #pricng-email-input2::placeholder { color: #000; font-weight: bold; font-size: clamp(0.8em, 1vw, 1.2em); opacity: 1; /* Firefox */ } .plan-feature-card { background-color: #FFF; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius: 50px; padding: 30px; } /* CONTACT PAGE */ .contact-section { padding-top: 90px; } .bg-contact { background: url(../assets/images/wallpaper8.jpg); padding-top: 50%; background-size: cover; } .contact-form { background-color: #F7F7F7; border: none; } .contact-form input { border: none; transition: all 0.3s ease-in-out; outline: none; padding: 10px 15px; border-radius: 50px; border: 1px solid #ADADAD; font-size: clamp(1em, 1.242vw, 1.45em); margin-bottom: 20px; } .contact-form input:focus-visible { border: none; outline: 1px solid #D4AF37; } .contact-form input::placeholder { color: #ADADAD; } .contact-form .btn-submit { font-size: clamp(0.8em, 1vw, 1.2em); color: #FFF; border: 3px solid rgb(212, 175, 55); background-color: rgb(212, 175, 55); transition: all 0.2s ease-in-out; padding: 16px 60px; border-radius: 50px; width: 100%; } .contact-form .btn-submit:hover { background-color: rgba(255, 255, 255, 0); color: #000; } /* NAVBAR */ .navbar-innner-container { padding: 10px 20px; } /* FOOTER */ .footer-text { font-family: 'Nasalization Rg', sans-serif !important; font-weight: 400; margin-bottom: 40px; font-size: clamp(2em, 4.7vw, 5.64em); } .footer-text span { font-family: 'Nasalization Rg', sans-serif !important; border-bottom: 1px solid; padding: 0; } .footer-section { border-bottom: 2px solid #ddd; border-radius: 150px 150px 0 0; background: linear-gradient(to left, #D4AF37, #001F3F); padding-top: 20px; padding-bottom: 0; } .footer-inner { padding-top: 105px; border-radius: 140px 140px 0 0; background: rgb(0, 31, 63); background: linear-gradient(195deg, rgba(0, 31, 63, 1) 36%, rgba(75, 64, 25, 1) 100%); } .footer-menu-container { padding: 0px; } .footer-column { margin-bottom: 40px; } .footer-column h5 { font-weight: 400; color: #FFF; letter-spacing: 1px; margin-bottom: 30px; } .footer-column ul { padding: 0; list-style: none; } .footer-column ul li { margin-bottom: 15px; } .footer-column ul li a { color: #FFF; text-decoration: none; transition: all 0.3s ease-in-out; } .footer-column ul li a:hover { color: #D4AF37; transform: translateX(5px); } .footer-bottom { text-align: center; padding-top: 15px; font-size: 14px; color: #ccc; } .footer-link-menu-icon { font-size: 25px; gap: 35px } .footer-link-menu2 { gap: 30px; list-style: none; } .footer-link-menu2 li a { color: #FFF; text-decoration: none; transition: color 0.3s ease-in-out; } .footer-link-menu2 li a:hover { color: #D4AF37; } /*BOOTSTRAP RESPONSIVE*/ /* Small devices (≥576px) - sm */ @media (min-width: 576px) { .footer-menu-container { padding: 0px 60px; } } /* Medium devices (≥768px) - md */ @media (min-width: 768px) { .footer-menu-container { padding: 0px 15px; } .contact-form input { border: none; transition: all 0.3s ease-in-out; outline: none; padding: 25px 40px; border-radius: 50px; border: 1px solid #ADADAD; font-size: clamp(0.85em, 1.042vw, 1.25em); margin-bottom: 20px; } } /* Large devices (≥992px) - lg */ @media (min-width: 992px) { .footer-menu-container { padding: 0px 5px; } .px-6 { padding-right: 7rem; padding-left: 7rem; } } /* Extra large devices (≥1200px) - xl */ @media (min-width: 1200px) { .footer-menu-container { padding: 0px 120px; } } /* XXL devices (≥1400px) - xxl */ @media (min-width: 1400px) { .footer-menu-container { padding: 0px 190px; } }