/*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; } .hero-section { width: 100%; min-height: 120vh; } .hero-section video { height: 120vh; object-fit: cover; filter: brightness(50%); } .hero-section .text-highlight { z-index: 10; top: 30%; left: 50%; transform: translate(-50%, -50%); width: 85%; position: absolute; text-align: center; } .hero-section .text-highlight .title { color: #FFF; font-size: clamp(3.3em, 5vw, 5.5em); font-weight: 600; line-height: 60px; margin-bottom: 30px } .hero-section .text-highlight .description { font-size: 1.6em; width: 90%; } .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; } .btn-amics-green { font-size: clamp(0.8em, 1vw, 1.2em); background-color: #209D42; color: #FFF; border: 3px solid #FFF; transition: all 0.2s ease-in-out; padding: 16px 60px; border-radius: 50px; } .btn-amics-green:hover { background-color: #115523; 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; } .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: 40px; border-radius: 50px 50px 0 0; transform: translateY(-3%); } .section .text-highlight { font-size: clamp(3em, 5vw, 6.25em); font-weight: 500; width: 90%; margin: 0 auto; margin-bottom: 100px; } .section .text-highlight2 { margin-bottom: 50px; } .section .text-highlight2 img { vertical-align: middle; margin-bottom: 45px; width: 70%; vertical-align: middle; } .section .text-highlight3 { font-size: clamp(3em, 5vw, 6.25em); font-weight: 500; margin-bottom: 50px; } .feature-container .feature{ margin-bottom: 45px; } .feature-container .feature img{ margin-bottom: 25px; width: 100%; } .amics-logo { width: 110px } .section2 { border-radius: 50px 50px 0 0; background-image: #FFF; } .section2 .inner { padding-top: 40px; border-radius: 50px 50px 0 0; transform: translateY(2%); background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(0, 41, 105, 1) 70%, rgba(50, 47, 36, 1) 100%); } .logo-text-highlight { margin-bottom: 50px; } .logo-text-highlight img { vertical-align: middle; margin-bottom: 45px; width: 70%; vertical-align: middle; } .section2 .text-highlight3 { width: 80%; margin-bottom: 50px; color: #FFF; } .section2 .text-highlight4 { width: 100%; color: #FFF; } .section3 { padding-top: 50px; border-radius: 50px 50px 0 0; } .section3 .text-highlight3 { margin-bottom: 30px; padding-left: 30px; border-left: 5px solid rgb(212, 175, 55); } .section3 .text-highlight4 { margin-bottom: 50px; } .section4 { border-bottom: 2px solid #ddd; border-radius: 50px 50px 0 0; background-image: linear-gradient(to left, #D4AF37, #001F3F); } .section4 .inner { border-radius: 50px 50px 0 0; transform: translateY(3%); background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(0, 41, 105, 1) 70%, rgba(50, 47, 36, 1) 100%); padding-top: 80px; } .section4 .text-highlight { margin-bottom: 25px; } .section4 .text-highlight2 { margin-bottom: 50px; font-size: clamp(3em, 3.906vw, 4.688em); } .section5 { padding-top: 100px; border-radius: 50px 50px 0 0; transform: translateY(-25%); } .section5 .main-img{ width: 50%; margin-bottom: 35px; } .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: 80px; } .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: 50px 50px 0 0; background: linear-gradient(to left, #D4AF37, #001F3F); padding-top: 20px; padding-bottom: 0; } .p-address { color: #FFF; font-size: 1em; line-height: 2em; } .footer-inner { padding-top: 105px; border-radius: 50px 50px 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) { .section { padding-top: 105px; border-radius: 150px 150px 0 0; transform: translateY(-7%); } .section .text-highlight { font-size: clamp(3em, 5vw, 6.25em); font-weight: 400; margin: 0 auto; width: 100%; margin-bottom: 100px; } .section .text-highlight2 { margin-bottom: 50px; } .section .text-highlight2 img { vertical-align: middle; margin-right: 45px; width: 120px; vertical-align: middle; } .section .text-highlight3 { font-size: clamp(3em, 5vw, 6.25em); font-weight: 400; margin-bottom: 50px; } .amics-logo { width: 250px } .section2 { border-bottom: 2px solid #ddd; border-radius: 150px 150px 0 0; background-image: linear-gradient(to right, #D4AF37, #001F3F); transform: translateY(-5%); } .section2 .inner { padding-top: 105px; border-radius: 150px 150px 0 0; transform: translateY(2%); background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(0, 41, 105, 1) 70%, rgba(50, 47, 36, 1) 100%); } .logo-text-highlight { margin-bottom: 50px; } .logo-text-highlight img { vertical-align: middle; margin-right: 45px; width: 120px; vertical-align: middle; } .section2 .text-highlight3 { width: 80%; margin-bottom: 50px; color: #909090; } .section2 .text-highlight4 { width: 100%; margin-bottom: 50px; color: #909090; } .section3 { padding-top: 105px; border-radius: 150px 150px 0 0; transform: translateY(-16%); } .section4 { border-radius: 150px 150px 0 0; } .section4 .inner { border-radius: 150px 150px 0 0; transform: translateY(3%); padding-top: 80px; } .section5 { padding-top: 100px; border-radius: 150px 150px 0 0; transform: translateY(-15%); } .section5 .main-img{ width: 120%; margin-bottom: 70px; } .section5 .title{ font-size: 3em; font-weight: 500; margin-bottom: 35px; } .section5 .quote{ font-style: italic; font-weight: 400; font-size: 2.7em; width: 70%; } .footer-menu-container { padding: 0px 15px; } .hero-section { width: 100%; min-height: 140vh; } .hero-section video { height: 140vh; object-fit: cover; filter: brightness(50%); } .hero-section .text-highlight { z-index: 10; top: 43%; left: 50%; transform: translate(-50%, -50%); width: 80%; position: absolute; text-align: center; } .contact-form input { border: none; transition: all 0.3s ease-in-out; outline: none; padding: 25px 40px; border-radius: 50px; border: 1px solid #ADADAD; margin-bottom: 20px; } .hero-section .text-highlight .title { color: #FFF; font-size: clamp(3em, 5vw, 5.5em); font-weight: 600; line-height: 70px; margin-bottom: 30px } .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%); } } /* 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; } }