/* Fonts */
:root {
--default-font: "Anybody", sans-serif;
--heading-font: "Anybody", sans-serif;
--nav-font: "Anybody", sans-serif;
}
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
--background-color: #1a0f2e;
--default-color: #f0e6ff;
--heading-color: #ffffff;
--accent-color: #8b5cf6;
--surface-color: #2d1b4e;
--contrast-color: #ffffff;
--nav-color: #f0e6ff;
--nav-hover-color: #8b5cf6;
--nav-mobile-background-color: #2d1b4e;
--nav-dropdown-background-color: #2d1b4e;
--nav-dropdown-color: #f0e6ff;
--nav-dropdown-hover-color: #8b5cf6;
--card-background: #2d1b4e;
--border-color: #3d2b5e;
--shadow-color: rgba(139, 92, 246, 0.15);
--gradient-start: #8b5cf6;
--gradient-end: #a855f7;
}
/* Color Presets */
.light-background {
--background-color: #2d1b4e;
--surface-color: #3d2b5e;
--card-background: #3d2b5e;
}
.dark-background {
--background-color: #1a0f2e;
--default-color: #f0e6ff;
--heading-color: #ffffff;
--surface-color: #2d1b4e;
--contrast-color: #ffffff;
--card-background: #2d1b4e;
}
/* Smooth scroll */
:root {
scroll-behavior: smooth;
}
/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
color: var(--default-color);
background-color: var(--background-color);
font-family: var(--default-font);
line-height: 1.7;
font-weight: 400;
letter-spacing: 0.01em;
}
a {
color: var(--accent-color);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: var(--gradient-start);
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--heading-color);
font-family: var(--heading-font);
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.02em;
}
/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
display: none;
background: #df1529;
color: #ffffff;
text-align: left;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}
.php-email-form .sent-message {
display: none;
color: #ffffff;
background: #059652;
text-align: center;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}
.php-email-form .loading {
display: none;
background: var(--surface-color);
text-align: center;
padding: 15px;
margin-bottom: 24px;
}
.php-email-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid var(--accent-color);
border-top-color: var(--surface-color);
animation: php-email-form-loading 1s linear infinite;
}
@keyframes php-email-form-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
color: var(--default-color);
background-color: rgba(26, 31, 46, 0.95);
backdrop-filter: blur(15px);
padding: 20px 0;
transition: all 0.5s ease;
z-index: 997;
border-bottom: 2px solid var(--accent-color);
box-shadow: 0 4px 30px var(--shadow-color);
}
.header .logo {
line-height: 1;
}
.header .logo img {
max-height: 40px;
margin-right: 10px;
}
.header .logo h1 {
font-size: 38px;
margin: 0;
font-weight: 700;
color: var(--heading-color);
font-family: var(--heading-font);
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 30px rgba(255, 107, 53, 0.3);
letter-spacing: -0.02em;
}
@media (max-width: 768px) {
.header .btn-getstarted {
display: none;
}
}
.header .btn-getstarted,
.header .btn-getstarted:focus {
color: var(--contrast-color);
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
font-size: 15px;
padding: 14px 22px;
margin: 0 0 0 30px;
border-radius: 50px;
transition: all 0.3s ease;
font-weight: 600;
font-family: var(--nav-font);
box-shadow: 0 8px 25px var(--shadow-color);
border: 2px solid transparent;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px var(--shadow-color);
background: transparent;
color: var(--gradient-start);
border-color: var(--gradient-start);
background: linear-gradient(135deg, transparent, transparent);
}
@media (max-width: 1200px) {
.header .logo {
order: 1;
}
.header .btn-getstarted {
order: 2;
margin: 0 15px 0 0;
padding: 10px 20px;
}
.header .navmenu {
order: 3;
}
}
.scrolled .header {
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
padding: 15px 0;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
.navmenu {
padding: 0;
}
.navmenu ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navmenu li {
position: relative;
}
.navmenu a,
.navmenu a:focus {
color: var(--nav-color);
padding: 20px 18px;
font-size: 14px;
font-family: var(--nav-font);
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
transition: all 0.3s ease;
border-radius: 25px;
margin: 0 5px;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.navmenu a i,
.navmenu a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
transition: 0.3s;
}
.navmenu li:last-child a {
padding-right: 18px;
}
.navmenu li:hover>a,
.navmenu .active,
.navmenu .active:focus {
color: var(--nav-hover-color);
background-color: rgba(255, 107, 53, 0.15);
transform: translateY(-2px);
box-shadow: 0 5px 15px var(--shadow-color);
}
.navmenu .dropdown ul {
margin: 0;
padding: 15px 0;
background: var(--nav-dropdown-background-color);
display: block;
position: absolute;
visibility: hidden;
left: 14px;
top: 130%;
opacity: 0;
transition: all 0.3s ease;
border-radius: 15px;
z-index: 99;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-color);
}
.navmenu .dropdown ul li {
min-width: 200px;
}
.navmenu .dropdown ul a {
padding: 12px 25px;
font-size: 15px;
text-transform: none;
color: var(--nav-dropdown-color);
border-radius: 0;
margin: 0;
}
.navmenu .dropdown ul a i {
font-size: 12px;
}
.navmenu .dropdown ul a:hover,
.navmenu .dropdown ul .active:hover,
.navmenu .dropdown ul li:hover>a {
color: var(--nav-dropdown-hover-color);
background-color: rgba(116, 185, 255, 0.1);
}
.navmenu .dropdown:hover>ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navmenu .dropdown .dropdown ul {
top: 0;
left: -90%;
visibility: hidden;
}
.navmenu .dropdown .dropdown:hover>ul {
opacity: 1;
top: 0;
left: -100%;
visibility: visible;
}
}
/*--------------------------------------------------------------
# Mobile Burger Menu
--------------------------------------------------------------*/
/* Burger Menu Button */
.burger-menu-toggle {
display: none;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 30px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 9999;
position: relative;
transition: all 0.3s ease;
}
.burger-line {
width: 100%;
height: 3px;
background-color: var(--nav-color);
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: center;
}
.burger-menu-toggle:hover .burger-line {
background-color: var(--accent-color);
}
.burger-menu-toggle:focus {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
}
.burger-menu-toggle:active {
transform: scale(0.95);
}
.burger-menu-toggle:active .burger-line {
background-color: var(--gradient-start);
}
/* Mobile Navigation Styles */
@media (max-width: 1199px) {
.burger-menu-toggle {
display: flex;
}
.navmenu {
position: fixed;
top: 0;
left: -100%;
width: 100%;
max-width: 320px;
height: 100vh;
background: var(--surface-color);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9998;
box-shadow: 5px 0 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
will-change: transform;
touch-action: pan-y;
}
.navmenu::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(135deg, var(--accent-color), var(--gradient-start));
z-index: -1;
}
.navmenu ul {
display: block;
list-style: none;
padding: 100px 0 20px 0;
margin: 0;
height: 100%;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--accent-color) transparent;
}
.navmenu ul::-webkit-scrollbar {
width: 4px;
}
.navmenu ul::-webkit-scrollbar-track {
background: transparent;
}
.navmenu ul::-webkit-scrollbar-thumb {
background: var(--accent-color);
border-radius: 2px;
}
.navmenu li {
position: relative;
margin: 0;
border-bottom: 1px solid rgba(116, 185, 255, 0.1);
opacity: 0;
transform: translateX(-20px);
transition: all 0.3s ease;
}
.mobile-nav-active .navmenu li {
opacity: 1;
transform: translateX(0);
}
/* Staggered animation for menu items */
.mobile-nav-active .navmenu li:nth-child(1) { transition-delay: 0.1s; }
.mobile-nav-active .navmenu li:nth-child(2) { transition-delay: 0.15s; }
.mobile-nav-active .navmenu li:nth-child(3) { transition-delay: 0.2s; }
.mobile-nav-active .navmenu li:nth-child(4) { transition-delay: 0.25s; }
.mobile-nav-active .navmenu li:nth-child(5) { transition-delay: 0.3s; }
.mobile-nav-active .navmenu li:nth-child(6) { transition-delay: 0.35s; }
.navmenu li:last-child {
border-bottom: none;
}
.navmenu a,
.navmenu a:focus {
color: var(--default-color);
padding: 18px 25px;
font-family: var(--nav-font);
font-size: 16px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-decoration: none;
border: none;
background: transparent;
cursor: pointer;
}
.navmenu a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(116, 185, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.navmenu a:hover::before,
.navmenu a:focus::before {
left: 100%;
}
.navmenu a:hover,
.navmenu a:focus,
.navmenu .active,
.navmenu .active:focus {
color: var(--accent-color);
background-color: rgba(116, 185, 255, 0.05);
padding-left: 30px;
outline: 2px solid var(--accent-color);
outline-offset: -2px;
}
.navmenu a:active {
transform: scale(0.98);
background-color: rgba(116, 185, 255, 0.1);
}
/* Enhanced mobile menu animations */
.navmenu {
transform: translateX(-100%);
opacity: 0;
}
.mobile-nav-active .navmenu {
transform: translateX(0);
opacity: 1;
}
@keyframes fadeIn {
from {
opacity: 0;
backdrop-filter: blur(0px);
}
to {
opacity: 1;
backdrop-filter: blur(2px);
}
}
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.mobile-nav-active .navmenu {
left: 0;
animation: slideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Prevent body scroll when menu is open */
.mobile-nav-active {
overflow: hidden;
position: fixed;
width: 100%;
}
/* Enhanced mobile menu animations */
.navmenu li {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-nav-active .navmenu li {
animation: slideInFromLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes slideInFromLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Enhanced mobile menu interactions */
.navmenu a {
position: relative;
overflow: hidden;
}
.navmenu a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent-color);
transition: width 0.3s ease;
}
.navmenu a:hover::after,
.navmenu a:focus::after {
width: 100%;
}
/* Enhanced mobile menu accessibility */
.navmenu a:focus-visible {
outline: 2px solid var(--accent-color);
outline-offset: 2px;
background-color: rgba(116, 185, 255, 0.1);
}
/* Enhanced mobile menu responsive design */
@media (max-width: 480px) {
.navmenu {
max-width: 100%;
left: -100%;
}
.navmenu::before {
height: 60px;
}
.navmenu ul {
padding: 80px 0 20px 0;
}
.navmenu a,
.navmenu a:focus {
padding: 14px 18px;
font-size: 14px;
}
.burger-menu-toggle {
width: 26px;
height: 26px;
}
.burger-line {
height: 2px;
}
}
/* Enhanced mobile menu dark mode support */
@media (prefers-color-scheme: dark) {
.navmenu {
background: var(--surface-color);
color: var(--default-color);
}
.navmenu::before {
background: linear-gradient(135deg, var(--accent-color), var(--gradient-start));
}
}
/* Enhanced mobile menu performance optimizations */
.navmenu {
will-change: transform, opacity;
backface-visibility: hidden;
perspective: 1000px;
}
.navmenu * {
backface-visibility: hidden;
}
/* Enhanced mobile menu loading states */
.navmenu.loading {
pointer-events: none;
}
.navmenu.loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 3px solid rgba(116, 185, 255, 0.3);
border-top: 3px solid var(--accent-color);
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 9999;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Burger menu animation when active */
.mobile-nav-active .burger-menu-toggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
background-color: rgba(116, 185, 255, 0.1);
border-radius: 8px;
padding: 8px;
}
.mobile-nav-active .burger-line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
background-color: var(--gradient-end);
}
.mobile-nav-active .burger-line:nth-child(2) {
opacity: 0;
}
.mobile-nav-active .burger-line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
background-color: var(--gradient-end);
}
.burger-line {
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
transform-origin: center;
}
/* Tablet optimizations */
@media (max-width: 768px) {
.navmenu {
max-width: 100%;
left: -100%;
}
.navmenu::before {
height: 60px;
}
.navmenu ul {
padding: 80px 0 20px 0;
}
.navmenu a,
.navmenu a:focus {
padding: 16px 20px;
font-size: 15px;
}
.burger-menu-toggle {
width: 28px;
height: 28px;
}
.burger-line {
height: 2.5px;
}
}
/* Small mobile optimizations */
@media (max-width: 480px) {
.navmenu {
width: 100%;
}
.navmenu a,
.navmenu a:focus {
padding: 14px 18px;
font-size: 14px;
}
.burger-menu-toggle {
width: 26px;
height: 26px;
}
.burger-line {
height: 2px;
}
}
}
/* Enhanced Card Styling */
.card {
background: var(--card-background);
border-radius: 20px;
box-shadow: 0 10px 40px var(--shadow-color);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
overflow: hidden;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
/* Enhanced Image Styling */
.img-fluid {
border-radius: 15px;
transition: all 0.3s ease;
}
.img-fluid:hover {
transform: scale(1.02);
}
/* Enhanced Icon Styling */
.bi {
transition: all 0.3s ease;
}
/* Smooth Animations */
* {
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
color: var(--default-color);
background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
font-size: 16px;
position: relative;
color: var(--contrast-color);
position: relative;
}
/* Newsletter Section */
.footer-newsletter {
background-color: rgba(255, 255, 255, 0.15);
padding: 90px 0;
backdrop-filter: blur(15px);
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
position: relative;
z-index: 1;
}
.newsletter-content h4 {
font-size: 36px;
color: var(--contrast-color);
margin-bottom: 25px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.newsletter-content p {
color: rgba(255, 255, 255, 0.9);
font-size: 18px;
margin-bottom: 40px;
line-height: 1.6;
}
.newsletter-form .input-group {
display: flex;
max-width: 500px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 50px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.newsletter-form input[type=email] {
flex: 1;
border: none;
padding: 18px 25px;
background: transparent;
color: var(--default-color);
font-size: 16px;
}
.newsletter-form input[type=email]:focus {
outline: none;
}
.newsletter-form input[type=email]::placeholder {
color: #6c757d;
}
.btn-newsletter {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: white;
border: none;
padding: 20px 35px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.4s ease;
display: flex;
align-items: center;
gap: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-newsletter:hover {
transform: translateY(-4px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
background: linear-gradient(135deg, var(--gradient-end), var(--gradient-start));
}
.btn-newsletter i {
font-size: 18px;
}
.form-messages {
margin-top: 20px;
}
.form-messages .loading,
.form-messages .error-message,
.form-messages .sent-message {
display: none;
padding: 15px;
border-radius: 10px;
margin-top: 15px;
}
.form-messages .loading {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.form-messages .error-message {
background: rgba(220, 53, 69, 0.2);
color: white;
}
.form-messages .sent-message {
background: rgba(40, 167, 69, 0.2);
color: white;
display: flex;
align-items: center;
gap: 10px;
}
.form-messages .sent-message i {
color: #28a745;
}
/* Main Footer Content */
.footer-main {
padding: 90px 0 70px 0;
background-color: rgba(0, 0, 0, 0.15);
position: relative;
z-index: 1;
}
.footer-brand .brand-logo {
display: flex;
align-items: center;
gap: 15px;
color: white;
text-decoration: none;
margin-bottom: 25px;
}
.footer-brand .brand-logo i {
font-size: 42px;
color: var(--accent-color);
filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.4));
}
.footer-brand .brand-name {
font-size: 32px;
font-weight: 800;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 30px rgba(255, 107, 53, 0.3);
}
.brand-description {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
margin-bottom: 30px;
font-size: 16px;
}
/* Social Media Links */
.social-links h5 {
color: white;
font-size: 18px;
margin-bottom: 20px;
font-weight: 600;
}
.social-icons {
display: flex;
gap: 15px;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
transition: all 0.3s ease;
text-decoration: none;
}
.social-link:hover {
background: var(--accent-color);
border-color: var(--accent-color);
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(116, 185, 255, 0.3);
}
/* Footer Links */
.footer-links h5 {
color: white;
font-size: 18px;
font-weight: 600;
margin-bottom: 25px;
position: relative;
}
.footer-links h5::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 30px;
height: 2px;
background: var(--accent-color);
border-radius: 1px;
}
.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links ul li {
margin-bottom: 12px;
}
.footer-links ul li a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
font-size: 15px;
}
.footer-links ul li a:hover {
color: var(--accent-color);
transform: translateX(5px);
}
/* Footer Contact */
.footer-contact h5 {
color: white;
font-size: 18px;
font-weight: 600;
margin-bottom: 25px;
position: relative;
}
.footer-contact h5::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 30px;
height: 2px;
background: var(--accent-color);
border-radius: 1px;
}
.contact-info .contact-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
color: rgba(255, 255, 255, 0.8);
}
.contact-info .contact-item i {
color: var(--accent-color);
font-size: 18px;
width: 20px;
}
.contact-info .contact-item span {
font-size: 15px;
}
/* Footer Bottom */
.footer-bottom {
padding: 30px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(0, 0, 0, 0.2);
}
.footer-legal p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 10px;
font-size: 14px;
}
.legal-links {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.legal-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.legal-links a:hover {
color: var(--accent-color);
}
.legal-links .separator {
color: rgba(255, 255, 255, 0.4);
}
.footer-newsletter-signup p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 15px;
font-size: 14px;
}
.btn-newsletter-small {
background: var(--accent-color);
color: white;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
display: inline-block;
}
.btn-newsletter-small:hover {
background: var(--gradient-start);
transform: translateY(-2px);
color: white;
box-shadow: 0 5px 15px rgba(116, 185, 255, 0.3);
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 999;
}
.scroll-top {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: white;
border-radius: 50%;
text-decoration: none;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
}
.scroll-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-top:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.scroll-top i {
font-size: 20px;
}
/* Responsive Design */
@media (max-width: 768px) {
.footer-newsletter {
padding: 60px 0;
}
.newsletter-content h4 {
font-size: 24px;
}
.newsletter-content p {
font-size: 16px;
}
.newsletter-form .input-group {
flex-direction: column;
border-radius: 20px;
}
.btn-newsletter {
border-radius: 0 0 20px 20px;
}
.footer-main {
padding: 60px 0 40px 0;
}
.social-icons {
justify-content: center;
}
.footer-bottom {
text-align: center;
}
.footer-newsletter-signup {
margin-top: 20px;
}
.back-to-top {
bottom: 20px;
right: 20px;
}
.scroll-top {
width: 45px;
height: 45px;
}
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
inset: 0;
z-index: 999999;
overflow: hidden;
background: var(--background-color);
transition: all 0.6s ease-out;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #ffffff;
border-color: var(--accent-color) transparent var(--accent-color) transparent;
border-radius: 50%;
width: 60px;
height: 60px;
animation: animate-preloader 1.5s linear infinite;
}
@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 99999;
background-color: var(--accent-color);
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.scroll-top i {
font-size: 24px;
color: var(--contrast-color);
line-height: 0;
}
.scroll-top:hover {
background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
color: var(--contrast-color);
}
.scroll-top.active {
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
color: var(--default-color);
background-color: var(--background-color);
padding: 20px 0;
position: relative;
}
.page-title h1 {
font-size: 28px;
font-weight: 700;
margin: 0;
}
.page-title .breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0 0 10px 0;
margin: 0;
font-size: 14px;
font-weight: 400;
}
.page-title .breadcrumbs ol li+li {
padding-left: 10px;
}
.page-title .breadcrumbs ol li+li::before {
content: "/";
display: inline-block;
padding-right: 10px;
color: color-mix(in srgb, var(--default-color), transparent 70%);
}
/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
color: var(--default-color);
background-color: var(--background-color);
padding: 80px 0;
scroll-margin-top: 90px;
overflow: clip;
position: relative;
}
section:nth-child(even) {
background-color: var(--surface-color);
}
@media (max-width: 1199px) {
section,
.section {
scroll-margin-top: 66px;
padding: 60px 0;
}
}
/* Enhanced Section Titles */
.section-title {
text-align: center;
padding-bottom: 90px;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
border-radius: 2px;
}
.section-title h2 {
font-size: 52px;
font-weight: 700;
margin-bottom: 25px;
font-family: var(--heading-font);
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-transform: none;
letter-spacing: -0.02em;
text-shadow: 0 0 30px rgba(255, 107, 53, 0.2);
}
.section-title p {
margin-bottom: 0;
font-size: 20px;
color: var(--default-color);
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.8;
font-weight: 400;
font-family: var(--default-font);
letter-spacing: 0.01em;
}
@media (max-width: 768px) {
.section-title h2 {
font-size: 32px;
}
.section-title p {
font-size: 16px;
}
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
width: 100%;
min-height: 90vh;
position: relative;
padding: 0 0 80px 0;
display: flex;
align-items: center;
background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
color: var(--contrast-color);
position: relative;
overflow: hidden;
position: relative;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero .container {
position: relative;
z-index: 2;
}
.hero h2 {
margin: 0;
font-size: 66px;
font-weight: 700;
line-height: 1.2;
color: var(--contrast-color);
font-family: var(--heading-font);
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
letter-spacing: -0.02em;
}
.hero p {
color: rgba(255, 255, 255, 0.9);
margin: 20px 0 30px 0;
font-size: 22px;
font-weight: 400;
line-height: 1.6;
}
.hero .download-btn {
color: var(--gradient-start);
background: var(--contrast-color);
font-family: var(--nav-font);
font-weight: 600;
font-size: 17px;
padding: 18px 40px;
border-radius: 50px;
transition: all 0.4s ease;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
text-decoration: none;
border: 2px solid transparent;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.hero .download-btn:hover {
background: transparent;
color: var(--contrast-color);
border-color: var(--contrast-color);
transform: translateY(-4px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.1);
}
.hero .download-btn+.download-btn {
margin-left: 20px;
}
.hero .download-btn i {
font-size: 18px;
line-height: 0;
margin-right: 10px;
}
@media (max-width: 768px) {
.hero {
min-height: 70vh;
}
.hero h2 {
font-size: 36px;
line-height: 42px;
}
.hero p {
font-size: 18px;
line-height: 26px;
margin-bottom: 30px;
}
.hero .download-btn {
font-size: 15px;
padding: 12px 25px;
}
}
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
position: relative;
overflow: hidden;
}
.about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(247, 147, 30, 0.08) 100%);
pointer-events: none;
}
/* About Image Wrapper */
.about-image-wrapper {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.about-image-wrapper:hover {
transform: translateY(-10px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}
.about-image-wrapper img {
width: 100%;
height: auto;
transition: all 0.3s ease;
}
.about-image-wrapper:hover img {
transform: scale(1.05);
}
.about-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.95), rgba(247, 147, 30, 0.95));
color: white;
padding: 35px;
transform: translateY(100%);
transition: all 0.4s ease;
}
.about-image-wrapper:hover .about-image-overlay {
transform: translateY(0);
}
.overlay-content {
text-align: center;
}
.overlay-content i {
font-size: 32px;
margin-bottom: 10px;
display: block;
}
.overlay-content span {
font-size: 18px;
font-weight: 600;
}
/* About Content */
.about-content {
padding: 20px;
}
.about-subtitle {
font-size: 28px;
font-weight: 700;
color: var(--heading-color);
margin-bottom: 25px;
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
}
.about-subtitle::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
border-radius: 2px;
}
.about-description {
font-size: 18px;
line-height: 1.7;
color: var(--default-color);
margin-bottom: 30px;
}
/* About Stats */
.about-stats {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.stat-item {
text-align: center;
flex: 1;
min-width: 120px;
}
.stat-number {
font-size: 36px;
font-weight: 700;
color: var(--accent-color);
margin-bottom: 8px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 14px;
color: var(--default-color);
font-weight: 500;
}
/* Value Cards */
.value-card {
background: var(--card-background);
padding: 45px 35px;
border-radius: 25px;
box-shadow: 0 15px 50px var(--shadow-color);
border: 2px solid var(--border-color);
text-align: center;
transition: all 0.4s ease;
height: 100%;
position: relative;
overflow: hidden;
}
.value-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.value-card:hover::before {
transform: scaleX(1);
}
.value-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 70px var(--shadow-color);
border-color: var(--accent-color);
background: linear-gradient(145deg, var(--card-background), rgba(255, 107, 53, 0.05));
}
.value-icon {
width: 90px;
height: 90px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
transition: all 0.4s ease;
box-shadow: 0 10px 30px var(--shadow-color);
}
.value-card:hover .value-icon {
transform: scale(1.15) rotate(10deg);
box-shadow: 0 15px 40px var(--shadow-color);
}
.value-icon i {
font-size: 36px;
color: white;
}
.value-card h4 {
font-size: 24px;
font-weight: 700;
color: var(--heading-color);
margin-bottom: 25px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.value-card p {
font-size: 16px;
line-height: 1.6;
color: var(--default-color);
margin: 0;
}
/* Offer Items */
.offer-item {
display: flex;
align-items: flex-start;
background: var(--card-background);
padding: 35px;
border-radius: 25px;
box-shadow: 0 12px 40px var(--shadow-color);
border: 2px solid var(--border-color);
transition: all 0.4s ease;
height: 100%;
position: relative;
overflow: hidden;
}
.offer-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.1), transparent);
transition: left 0.5s ease;
}
.offer-item:hover::before {
left: 100%;
}
.offer-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px var(--shadow-color);
border-color: var(--accent-color);
background: linear-gradient(145deg, var(--card-background), rgba(255, 107, 53, 0.05));
}
.offer-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
flex-shrink: 0;
transition: all 0.3s ease;
}
.offer-item:hover .offer-icon {
transform: scale(1.1) rotate(5deg);
}
.offer-icon i {
font-size: 28px;
color: white;
}
.offer-content {
flex: 1;
}
.offer-content h4 {
font-size: 20px;
font-weight: 600;
color: var(--heading-color);
margin-bottom: 15px;
}
.offer-content p {
font-size: 16px;
line-height: 1.6;
color: var(--default-color);
margin: 0;
}
/* About Call to Action */
.about-cta {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
padding: 70px 50px;
border-radius: 35px;
color: white;
position: relative;
overflow: hidden;
box-shadow: 0 20px 60px var(--shadow-color);
}
.about-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.about-cta .container {
position: relative;
z-index: 2;
}
.about-cta h3 {
font-size: 36px;
font-weight: 800;
margin-bottom: 25px;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.about-cta p {
font-size: 20px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 35px;
font-weight: 500;
}
.about-cta .btn-primary {
background: white;
color: var(--gradient-start);
border: 2px solid white;
padding: 18px 40px;
font-size: 18px;
font-weight: 600;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.about-cta .btn-primary:hover {
background: transparent;
color: white;
border-color: white;
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
/* Responsive Design */
@media (max-width: 768px) {
.about-stats {
gap: 20px;
}
.stat-item {
min-width: 100px;
}
.stat-number {
font-size: 28px;
}
.value-card {
padding: 30px 20px;
}
.offer-item {
padding: 25px 20px;
}
.offer-icon {
width: 50px;
height: 50px;
margin-right: 20px;
}
.offer-icon i {
font-size: 24px;
}
.about-cta {
padding: 40px 20px;
}
.about-cta h3 {
font-size: 24px;
}
.about-cta p {
font-size: 16px;
}
}
/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .icon-box {
display: flex;
background: var(--card-background);
padding: 35px;
border-radius: 20px;
box-shadow: 0 8px 30px var(--shadow-color);
border: 2px solid var(--border-color);
transition: all 0.4s ease;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.features .icon-box::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.1), transparent);
transition: left 0.5s ease;
}
.features .icon-box:hover::before {
left: 100%;
}
.features .icon-box:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px var(--shadow-color);
border-color: var(--accent-color);
background: linear-gradient(145deg, var(--card-background), rgba(255, 107, 53, 0.05));
}
.features .icon-box h4 {
font-size: 22px;
font-weight: 600;
margin: 0 0 15px 0;
color: var(--heading-color);
}
.features .icon-box i {
font-size: 52px;
line-height: 52px;
color: var(--accent-color);
margin-right: 25px;
transition: all 0.4s ease;
filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3));
}
.features .icon-box:hover i {
transform: scale(1.15) rotate(5deg);
color: var(--gradient-start);
filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.6));
}
.features .icon-box p {
font-size: 16px;
color: var(--default-color);
margin-bottom: 0;
line-height: 1.6;
}
/*--------------------------------------------------------------
# Feature Details Section
--------------------------------------------------------------*/
.feature-details .features-item {
color: var(--default-color);
background: var(--card-background);
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 40px var(--shadow-color);
border: 1px solid var(--border-color);
margin-bottom: 40px;
transition: all 0.3s ease;
}
.feature-details .features-item:hover {
transform: translateY(-3px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.feature-details .features-item+.features-item {
margin-top: 60px;
}
.feature-details .features-item h3 {
font-size: 28px;
font-weight: 700;
margin-bottom: 20px;
color: var(--heading-color);
}
.feature-details .features-item p {
font-size: 16px;
line-height: 1.7;
margin-bottom: 20px;
}
.feature-details .features-item ul {
list-style: none;
padding: 0;
margin: 0;
}
.feature-details .features-item ul li {
padding: 8px 0;
display: flex;
align-items: center;
font-size: 16px;
}
.feature-details .features-item ul li i {
color: var(--accent-color);
margin-right: 15px;
font-size: 18px;
}
/* New Features Item Structure */
.features-item {
background: var(--card-background);
border-radius: 25px;
overflow: hidden;
box-shadow: 0 15px 50px var(--shadow-color);
border: 1px solid var(--border-color);
transition: all 0.4s ease;
margin-bottom: 30px;
}
.features-item:hover {
transform: translateY(-8px);
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
border-color: var(--accent-color);
}
/* Feature Content Layout */
.feature-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 400px;
}
.feature-content.reverse {
grid-template-columns: 1fr 1fr;
}
.feature-content.reverse .feature-image {
order: 2;
}
.feature-content.reverse .feature-text {
order: 1;
}
/* Feature Image */
.feature-image {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}
.feature-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.4s ease;
}
.features-item:hover .feature-image img {
transform: scale(1.05);
}
.feature-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.4s ease;
}
.features-item:hover .feature-overlay {
opacity: 1;
}
.feature-overlay i {
font-size: 48px;
color: white;
transform: scale(0.8);
transition: all 0.4s ease;
}
.features-item:hover .feature-overlay i {
transform: scale(1);
}
/* Feature Text */
.feature-text {
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.feature-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
}
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
}
.features-item:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.feature-icon i {
font-size: 28px;
color: white;
}
.feature-header h3 {
font-size: 24px;
font-weight: 700;
color: var(--heading-color);
margin: 0;
line-height: 1.3;
}
.feature-description {
font-size: 16px;
line-height: 1.7;
color: var(--default-color);
margin-bottom: 25px;
font-style: italic;
}
/* Feature Benefits */
.feature-benefits {
display: flex;
flex-direction: column;
gap: 15px;
}
.benefit-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: rgba(116, 185, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(116, 185, 255, 0.1);
transition: all 0.3s ease;
}
.benefit-item:hover {
background: rgba(116, 185, 255, 0.1);
border-color: var(--accent-color);
transform: translateX(5px);
}
.benefit-icon {
width: 40px;
height: 40px;
background: var(--accent-color);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
}
.benefit-item:hover .benefit-icon {
background: var(--gradient-start);
transform: scale(1.1);
}
.benefit-icon i {
font-size: 18px;
color: white;
}
.benefit-item span {
font-size: 15px;
color: var(--default-color);
font-weight: 500;
line-height: 1.5;
}
/* Feature Highlight */
.feature-highlight {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 20px;
background: linear-gradient(135deg, rgba(116, 185, 255, 0.1), rgba(102, 126, 234, 0.1));
border-radius: 15px;
border: 1px solid rgba(116, 185, 255, 0.2);
margin-top: 20px;
}
.highlight-icon {
width: 45px;
height: 45px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
}
.feature-highlight:hover .highlight-icon {
transform: scale(1.1) rotate(5deg);
}
.highlight-icon i {
font-size: 22px;
color: white;
}
.feature-highlight p {
font-size: 16px;
line-height: 1.6;
color: var(--default-color);
margin: 0;
font-weight: 500;
}
/* Responsive Design */
@media (max-width: 991px) {
.feature-content {
grid-template-columns: 1fr;
min-height: auto;
}
.feature-content.reverse .feature-image,
.feature-content.reverse .feature-text {
order: unset;
}
.feature-image {
height: 250px;
}
.feature-text {
padding: 30px;
}
.feature-header {
flex-direction: column;
text-align: center;
gap: 15px;
}
.feature-header h3 {
font-size: 22px;
}
}
@media (max-width: 768px) {
.features-item {
margin-bottom: 20px;
}
.feature-text {
padding: 25px;
}
.feature-header h3 {
font-size: 20px;
}
.feature-description {
font-size: 15px;
}
.benefit-item {
padding: 12px;
}
.benefit-icon {
width: 35px;
height: 35px;
}
.benefit-icon i {
font-size: 16px;
}
.benefit-item span {
font-size: 14px;
}
.feature-highlight {
padding: 15px;
}
.highlight-icon {
width: 40px;
height: 40px;
}
.highlight-icon i {
font-size: 20px;
}
.feature-highlight p {
font-size: 15px;
}
}
/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
.gallery {
overflow: hidden;
}
.gallery .swiper-wrapper {
height: auto;
}
.gallery .swiper-pagination {
margin-top: 20px;
position: relative;
}
.gallery .swiper-pagination .swiper-pagination-bullet {
background-color: var(--background-color);
border: 1px solid var(--accent-color);
width: 12px;
height: 12px;
opacity: 1;
}
.gallery .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--accent-color);
}
.gallery .swiper-slide-active {
text-align: center;
}
@media (min-width: 992px) {
.gallery .swiper-wrapper {
padding: 60px 0;
}
.gallery .swiper-slide-active {
background: var(--background-color);
border: 6px solid var(--accent-color);
padding: 4px;
z-index: 1;
transform: scale(1.2);
border-radius: 25px;
transition: none;
}
}
/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-wrap {
padding: 20px;
}
.testimonials .testimonial-item {
background: var(--card-background);
padding: 35px;
border-radius: 25px;
box-shadow: 0 12px 40px var(--shadow-color);
border: 2px solid var(--border-color);
text-align: center;
transition: all 0.4s ease;
height: 100%;
position: relative;
overflow: hidden;
}
.testimonials .testimonial-item::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.05), transparent);
transition: left 0.6s ease;
}
.testimonials .testimonial-item:hover::after {
left: 100%;
}
.testimonials .testimonial-item::before {
content: '"';
position: absolute;
top: 20px;
left: 30px;
font-size: 60px;
color: var(--accent-color);
opacity: 0.2;
font-family: var(--default-font);
}
.testimonials .testimonial-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px var(--shadow-color);
border-color: var(--accent-color);
background: linear-gradient(145deg, var(--card-background), rgba(255, 107, 53, 0.05));
}
.testimonials .testimonial-item h3 {
font-size: 22px;
font-weight: 700;
margin: 20px 0 5px 0;
color: var(--heading-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.testimonials .testimonial-item h4 {
font-size: 18px;
color: var(--accent-color);
margin: 0 0 20px 0;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.testimonials .testimonial-item .stars {
margin-bottom: 20px;
}
.testimonials .testimonial-item .stars i {
color: #ffd700;
font-size: 18px;
margin: 0 2px;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 0;
color: var(--default-color);
line-height: 1.6;
font-size: 16px;
}
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
color: var(--accent-color);
font-size: 20px;
opacity: 0.5;
}
.testimonials .testimonial-item .quote-icon-left {
margin-right: 10px;
}
.testimonials .testimonial-item .quote-icon-right {
margin-left: 10px;
}
.testimonials .swiper-wrapper {
height: auto;
}
.testimonials .swiper-pagination {
margin-top: 20px;
position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: var(--background-color);
opacity: 1;
border: 1px solid var(--accent-color);
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--accent-color);
}
@media (max-width: 767px) {
.testimonials .testimonial-wrap {
padding-left: 0;
}
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
overflow: hidden;
}
.testimonials .testimonial-item {
padding: 30px;
margin: 15px;
}
.testimonials .testimonial-item .testimonial-img {
position: static;
left: auto;
}
}
/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
background: var(--card-background);
padding: 45px 35px;
border-radius: 25px;
box-shadow: 0 15px 50px var(--shadow-color);
border: 3px solid var(--border-color);
text-align: center;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.pricing .pricing-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
opacity: 0;
transition: opacity 0.3s ease;
}
.pricing .pricing-item:hover::before {
opacity: 1;
}
.pricing .pricing-item:hover {
transform: translateY(-15px);
box-shadow: 0 30px 70px var(--shadow-color);
border-color: var(--accent-color);
background: linear-gradient(145deg, var(--card-background), rgba(255, 107, 53, 0.05));
}
.pricing .pricing-item h3 {
font-size: 28px;
font-weight: 700;
color: var(--heading-color);
margin-bottom: 25px;
text-transform: uppercase;
letter-spacing: 1px;
}
.pricing .pricing-item h4 {
font-size: 56px;
font-weight: 800;
color: var(--accent-color);
margin-bottom: 35px;
text-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
}
.pricing .pricing-item h4 sup {
font-size: 24px;
font-weight: 400;
color: var(--default-color);
}
.pricing .pricing-item ul {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
}
.pricing .pricing-item ul li {
padding: 12px 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--default-color);
border-bottom: 1px solid var(--border-color);
}
.pricing .pricing-item ul li:last-child {
border-bottom: none;
}
.pricing .pricing-item ul li i {
color: var(--accent-color);
margin-right: 10px;
font-size: 18px;
}
.pricing .pricing-item ul .na {
color: #6c757d;
}
.pricing .pricing-item ul .na i {
color: #6c757d;
}
.pricing .buy-btn {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--contrast-color);
border: none;
padding: 18px 40px;
border-radius: 50px;
font-size: 18px;
font-weight: 700;
transition: all 0.4s ease;
text-decoration: none;
display: inline-block;
box-shadow: 0 10px 30px var(--shadow-color);
text-transform: uppercase;
letter-spacing: 1px;
}
.pricing .buy-btn:hover {
transform: translateY(-4px);
box-shadow: 0 15px 40px var(--shadow-color);
color: var(--contrast-color);
background: linear-gradient(135deg, var(--gradient-end), var(--gradient-start));
}
.pricing .featured {
transform: scale(1.05);
border-color: var(--accent-color);
box-shadow: 0 15px 50px rgba(116, 185, 255, 0.2);
}
.pricing .featured::before {
opacity: 1;
}
.pricing .featured h3,
.pricing .featured h4,
.pricing .featured h4 span,
.pricing .featured ul,
.pricing .featured ul .na,
.pricing .featured ul i,
.pricing .featured ul .na i {
color: var(--default-color);
}
.pricing .featured .buy-btn {
background: var(--accent-color);
color: var(--contrast-color);
border-color: var(--accent-color);
}
.pricing .featured .buy-btn:hover {
background: var(--gradient-start);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.pricing .featured {
transform: none;
margin-bottom: 30px;
}
}
/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container {
margin-top: 30px;
}
.faq .faq-container .faq-item {
background-color: var(--card-background);
position: relative;
padding: 30px;
margin-bottom: 25px;
overflow: hidden;
transition: all 0.4s ease;
border-radius: 20px;
border: 2px solid var(--border-color);
box-shadow: 0 8px 25px var(--shadow-color);
}
.faq .faq-container .faq-item:last-child {
margin-bottom: 0;
}
.faq .faq-container .faq-item:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px var(--shadow-color);
border-color: var(--accent-color);
}
.faq .faq-container .faq-item h3 {
font-weight: 700;
font-size: 20px;
line-height: 26px;
margin: 0 40px 0 50px;
transition: all 0.4s ease;
cursor: pointer;
color: var(--heading-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.faq .faq-container .faq-item h3:hover {
color: var(--accent-color);
}
.faq .faq-container .faq-item .faq-content {
display: grid;
grid-template-rows: 0fr;
transition: all 0.3s ease-in-out;
visibility: hidden;
opacity: 0;
margin-top: 15px;
}
.faq .faq-container .faq-item .faq-content p {
margin-bottom: 0;
overflow: hidden;
color: var(--default-color);
line-height: 1.6;
}
.faq .faq-container .faq-item .faq-icon {
position: absolute;
top: 25px;
left: 25px;
font-size: 22px;
line-height: 0;
transition: all 0.3s ease;
color: var(--accent-color);
}
.faq .faq-container .faq-item .faq-toggle {
position: absolute;
top: 25px;
right: 25px;
font-size: 18px;
line-height: 0;
transition: all 0.3s ease;
cursor: pointer;
color: var(--default-color);
}
.faq .faq-container .faq-item .faq-toggle:hover {
color: var(--accent-color);
transform: scale(1.1);
}
.faq .faq-container .faq-active {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
transition: all 0.4s ease;
border-color: var(--accent-color);
box-shadow: 0 20px 50px var(--shadow-color);
transform: scale(1.02);
}
.faq .faq-container .faq-active h3,
.faq .faq-container .faq-active h3:hover,
.faq .faq-container .faq-active .faq-toggle,
.faq .faq-container .faq-active .faq-icon,
.faq .faq-container .faq-active .faq-content {
color: var(--contrast-color);
}
.faq .faq-container .faq-active .faq-content {
grid-template-rows: 1fr;
visibility: visible;
opacity: 1;
padding-top: 15px;
}
.faq .faq-container .faq-active .faq-toggle {
transform: rotate(90deg);
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
background: var(--card-background);
padding: 40px;
border-radius: 20px;
box-shadow: 0 12px 40px var(--shadow-color);
border: 2px solid var(--border-color);
text-align: center;
transition: all 0.4s ease;
height: 100%;
position: relative;
overflow: hidden;
}
.contact .info-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.1), transparent);
transition: left 0.5s ease;
}
.contact .info-item:hover::before {
left: 100%;
}
.contact .info-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px var(--shadow-color);
border-color: var(--accent-color);
background: linear-gradient(145deg, var(--card-background), rgba(255, 107, 53, 0.05));
}
.contact .info-item i {
font-size: 48px;
line-height: 0;
color: var(--accent-color);
margin-bottom: 25px;
transition: all 0.4s ease;
filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.3));
}
.contact .info-item:hover i {
transform: scale(1.15) rotate(5deg);
color: var(--gradient-start);
filter: drop-shadow(0 0 25px rgba(255, 107, 53, 0.6));
}
.contact .info-item h3 {
font-size: 24px;
font-weight: 700;
margin: 20px 0 15px 0;
color: var(--heading-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contact .info-item p {
padding: 0;
line-height: 1.6;
font-size: 16px;
margin-bottom: 0;
color: var(--default-color);
}
.contact .php-email-form {
background: var(--card-background);
padding: 45px;
border-radius: 25px;
box-shadow: 0 15px 50px var(--shadow-color);
border: 2px solid var(--border-color);
height: 100%;
position: relative;
overflow: hidden;
}
.contact .php-email-form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
border-radius: 25px 25px 0 0;
}
.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
font-size: 16px;
padding: 18px 22px;
box-shadow: none;
border-radius: 15px;
color: var(--default-color);
background-color: var(--background-color);
border: 2px solid var(--border-color);
transition: all 0.4s ease;
font-weight: 500;
}
.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
border-color: var(--accent-color);
box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
outline: none;
transform: translateY(-2px);
}
.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
color: #6c757d;
}
.contact .php-email-form button[type=submit] {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--contrast-color);
border: none;
padding: 18px 40px;
transition: all 0.4s ease;
border-radius: 50px;
font-size: 18px;
font-weight: 700;
box-shadow: 0 10px 30px var(--shadow-color);
text-transform: uppercase;
letter-spacing: 1px;
}
.contact .php-email-form button[type=submit]:hover {
transform: translateY(-4px);
box-shadow: 0 15px 40px var(--shadow-color);
background: linear-gradient(135deg, var(--gradient-end), var(--gradient-start));
}
/* Enhanced Button Styling */
.btn-primary {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
color: var(--contrast-color);
border: none;
padding: 18px 40px;
border-radius: 50px;
font-size: 18px;
font-weight: 700;
transition: all 0.4s ease;
box-shadow: 0 10px 30px var(--shadow-color);
text-decoration: none;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-primary:hover {
transform: translateY(-4px);
box-shadow: 0 15px 40px var(--shadow-color);
color: var(--contrast-color);
background: linear-gradient(135deg, var(--gradient-end), var(--gradient-start));
}
/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
/* Add your styles here */
}
#cookie-popup {
position: fixed;
bottom: 20px;
left: 20px;
transform: translateX(-50%);
background: #dedede;
color: #333;
border: none;
padding: 20px;
font-family: var(--heading-font);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
border-radius: 25px;
font-size: 14px;
max-width: 400px;
z-index: 1000;
display: none;
opacity: 0;
/* Start invisible */
transform: translateY(30px);
/* Slide up effect */
transition: opacity 0.4s ease, transform 0.4s ease;
}
#cookie-popup.show {
opacity: 1;
transform: translateY(0);
}
#cookie-popup p {
margin: 0;
padding: 0;
}
#cookie-popup .popup-content {
display: flex;
justify-content: space-between;
align-items: center;
}
#cookie-popup button {
background: var(--accent-color);
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
#cookie-popup button:hover {
background: #0056b3;
}
#cookie-popup .popup-message {
max-width: 80%;
}
#cookie-popup .popup-message a {
color: var(--accent-color);
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
#cookie-popup .popup-message a:hover {
color: #0056b3;
}
#features-slider {
position: relative;
}
.swiper-slide {
transition: filter 0.3s ease;
}
/* Swiper Navigation Buttons - Complete Redesign */
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border: 2px solid rgba(255, 255, 255, 0.2);
z-index: 10;
backdrop-filter: blur(10px);
}
.swiper-button-prev {
left: 60px;
}
.swiper-button-next {
right: 60px;
}
/* Button Icons */
.swiper-button-prev::after,
.swiper-button-next::after {
font-family: 'bootstrap-icons';
font-size: 24px;
font-weight: bold;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.swiper-button-prev::after {
content: '\F284'; /* bi-chevron-left */
}
.swiper-button-next::after {
content: '\F285'; /* bi-chevron-right */
}
/* Hover Effects */
.swiper-button-prev:hover,
.swiper-button-next:hover {
background: linear-gradient(135deg, var(--accent-color), var(--gradient-end));
transform: translateY(-50%) scale(1.1);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
border-color: rgba(255, 255, 255, 0.4);
}
.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
transform: scale(1.2);
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
/* Active/Pressed State */
.swiper-button-prev:active,
.swiper-button-next:active {
transform: translateY(-50%) scale(0.95);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
/* Focus State for Accessibility */
.swiper-button-prev:focus,
.swiper-button-next:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(116, 185, 255, 0.5), 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* Disabled State */
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.4;
cursor: not-allowed;
transform: translateY(-50%) scale(0.8);
background: linear-gradient(135deg, #ccc, #999);
}
.swiper-button-prev.swiper-button-disabled:hover,
.swiper-button-next.swiper-button-disabled:hover {
transform: translateY(-50%) scale(0.8);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* Responsive Design */
@media (max-width: 1200px) {
.swiper-button-prev,
.swiper-button-next {
width: 55px;
height: 55px;
}
.swiper-button-prev {
left: -25px;
}
.swiper-button-next {
right: -25px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 22px;
}
}
@media (max-width: 991px) {
.swiper-button-prev,
.swiper-button-next {
width: 50px;
height: 50px;
}
.swiper-button-prev {
left: -20px;
}
.swiper-button-next {
right: -20px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 20px;
}
}
@media (max-width: 768px) {
.swiper-button-prev,
.swiper-button-next {
width: 45px;
height: 45px;
display: flex;
}
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 18px;
}
}
@media (max-width: 576px) {
.swiper-button-prev,
.swiper-button-next {
width: 40px;
height: 40px;
}
.swiper-button-prev {
left: 5px;
}
.swiper-button-next {
right: 5px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 16px;
}
}
/* Custom Swiper Container Positioning */
#features-slider .swiper {
padding: 0 50px;
}
@media (max-width: 768px) {
#features-slider .swiper {
padding: 0 30px;
}
}
@media (max-width: 576px) {
#features-slider .swiper {
padding: 0 20px;
}
}
.list-cards {
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.card-item {
background: var(--background-color);
border-radius: 12px;
box-shadow: 0 4px 12px var(--heading-color);
padding: 5px 10px;
display: flex;
align-items: flex-start;
transition: box-shadow 0.3s ease, transform 0.3s ease;
cursor: default;
margin: 10px;
}
.card-item:hover {
box-shadow: 0 8px 24px var(--heading-color);
transform: translateY(-5px);
}
.card-content {
display: flex;
align-items: center;
gap: 12px;
}
.icon {
font-size: 1.8rem;
color: var(--accent-color);
flex-shrink: 0;
}
.card-item p {
margin: 0;
font-size: 1rem;
color: var(--accent-color);
font-weight: 500;
line-height: 1.4;
}
@media (max-width: 768px) {
.list-cards {
flex-direction: column;
}
.card-item {
width: 100%;
}
}
/*--------------------------------------------------------------
# New Pricing Section Styles
--------------------------------------------------------------*/
/* Pricing Toggle */
.pricing-toggle-wrapper {
margin-bottom: 3rem;
}
.pricing-toggle {
display: inline-flex;
align-items: center;
gap: 1rem;
background: var(--surface-color);
padding: 0.5rem 1rem;
border-radius: 50px;
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
}
.toggle-label {
font-weight: 600;
color: var(--default-color);
font-size: 0.95rem;
}
.discount-badge {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
color: white;
padding: 0.2rem 0.6rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
margin-left: 0.5rem;
}
/* Switch Toggle */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--border-color);
transition: 0.3s;
border-radius: 30px;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: 3px;
bottom: 3px;
background: var(--default-color);
transition: 0.3s;
border-radius: 50%;
}
input:checked + .slider {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
}
input:checked + .slider:before {
transform: translateX(30px);
}
/* Pricing Cards */
.pricing-card {
background: var(--card-background);
border: 2px solid var(--border-color);
border-radius: 20px;
padding: 2rem;
height: 100%;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.pricing-card:hover {
transform: translateY(-10px);
border-color: var(--accent-color);
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15);
}
.pricing-card.featured {
border-color: var(--accent-color);
background: linear-gradient(135deg, var(--card-background), rgba(139, 92, 246, 0.05));
transform: scale(1.05);
}
.pricing-card.featured:hover {
transform: scale(1.05) translateY(-10px);
}
/* Plan Badge */
.plan-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--accent-color);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.plan-badge.featured {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
}
/* Pricing Header */
.pricing-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-color);
}
.plan-name {
font-size: 1.8rem;
font-weight: 700;
color: var(--heading-color);
margin-bottom: 0.5rem;
}
.plan-description {
color: var(--default-color);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.price-wrapper {
margin-top: 1rem;
}
.price {
display: flex;
align-items: baseline;
justify-content: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.currency {
font-size: 1.2rem;
color: var(--accent-color);
font-weight: 600;
}
.amount {
font-size: 3rem;
font-weight: 800;
color: var(--heading-color);
line-height: 1;
}
.period {
font-size: 1rem;
color: var(--default-color);
font-weight: 500;
}
.price-note {
font-size: 0.85rem;
color: var(--default-color);
opacity: 0.8;
}
/* Pricing Features */
.pricing-features {
margin-bottom: 2rem;
}
.feature-group {
margin-bottom: 1.5rem;
}
.feature-group-title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1rem;
font-weight: 600;
color: var(--heading-color);
margin-bottom: 1rem;
}
.feature-group-title i {
color: var(--accent-color);
font-size: 1.1rem;
}
.pricing-features ul {
list-style: none;
padding: 0;
margin: 0;
}
.pricing-features li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.5rem 0;
color: var(--default-color);
font-size: 0.9rem;
line-height: 1.5;
}
.pricing-features li i {
color: #10b981;
font-size: 1rem;
margin-top: 0.1rem;
flex-shrink: 0;
}
/* Pricing Footer */
.pricing-footer {
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid var(--border-color);
}
.btn-pricing {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.95rem;
border: 2px solid transparent;
width: 100%;
justify-content: center;
margin-bottom: 1rem;
}
.btn-pricing-primary {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
color: white;
}
.btn-pricing-primary:hover {
background: linear-gradient(135deg, #7c3aed, #9333ea);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
color: white;
}
.btn-pricing-featured {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
color: white;
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}
.btn-pricing-featured:hover {
background: linear-gradient(135deg, #7c3aed, #9333ea);
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(139, 92, 246, 0.4);
color: white;
}
.btn-pricing-secondary {
background: var(--accent-color);
color: white;
}
.btn-pricing-secondary:hover {
background: #7c3aed;
transform: translateY(-2px);
color: white;
}
.btn-pricing-outline {
background: transparent;
color: var(--accent-color);
border-color: var(--accent-color);
}
.btn-pricing-outline:hover {
background: var(--accent-color);
color: white;
transform: translateY(-2px);
}
.guarantee {
font-size: 0.8rem;
color: var(--default-color);
opacity: 0.8;
margin: 0;
}
/* Pricing Info Section */
.pricing-info {
background: var(--surface-color);
padding: 3rem;
border-radius: 20px;
border: 1px solid var(--border-color);
}
.pricing-info h3 {
color: var(--heading-color);
margin-bottom: 1rem;
font-size: 1.5rem;
}
.pricing-info p {
color: var(--default-color);
font-size: 1rem;
line-height: 1.6;
}
.pricing-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Responsive Design */
@media (max-width: 991px) {
.pricing-card.featured {
transform: none;
}
.pricing-card.featured:hover {
transform: translateY(-10px);
}
.pricing-actions {
flex-direction: column;
align-items: center;
}
.btn-pricing {
width: auto;
min-width: 200px;
}
}
@media (max-width: 768px) {
.pricing-toggle {
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
}
.pricing-card {
padding: 1.5rem;
}
.amount {
font-size: 2.5rem;
}
.pricing-info {
padding: 2rem 1.5rem;
}
}
@media (max-width: 576px) {
.pricing-card {
padding: 1rem;
}
.plan-name {
font-size: 1.5rem;
}
.amount {
font-size: 2rem;
}
.btn-pricing {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
}
}
/*--------------------------------------------------------------
# New Contact Section Styles
--------------------------------------------------------------*/
/* Contact Form Wrapper */
.contact-form-wrapper {
background: var(--card-background);
border: 2px solid var(--border-color);
border-radius: 20px;
padding: 2.5rem;
height: 100%;
transition: all 0.3s ease;
}
.contact-form-wrapper:hover {
border-color: var(--accent-color);
box-shadow: 0 15px 35px rgba(139, 92, 246, 0.1);
}
.contact-form-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.contact-form-header h3 {
color: var(--heading-color);
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.contact-form-header p {
color: var(--default-color);
font-size: 1rem;
margin: 0;
}
/* Form Groups */
.form-group {
position: relative;
margin-bottom: 1.5rem;
}
.form-label {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--heading-color);
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.form-label i {
color: var(--accent-color);
font-size: 1rem;
}
.form-control {
width: 100%;
padding: 1rem 1.25rem;
border: 2px solid var(--border-color);
border-radius: 12px;
background: var(--surface-color);
color: var(--default-color);
font-size: 1rem;
transition: all 0.3s ease;
position: relative;
}
.form-control:focus {
outline: none;
border-color: var(--accent-color);
background: var(--card-background);
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}
.form-control::placeholder {
color: var(--default-color);
opacity: 0.6;
}
/* Form Focus Border */
.form-focus-border {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(135deg, #8b5cf6, #a855f7);
transition: width 0.3s ease;
}
.form-control:focus + .form-focus-border {
width: 100%;
}
/* Checkbox Styling */
.checkbox-wrapper {
display: flex;
align-items: flex-start;
gap: 0.75rem;
cursor: pointer;
padding: 0.5rem 0;
}
.checkbox-wrapper input[type="checkbox"] {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid var(--border-color);
border-radius: 4px;
background: var(--surface-color);
position: relative;
flex-shrink: 0;
margin-top: 0.1rem;
transition: all 0.3s ease;
}
.checkbox-wrapper input[type="checkbox"]:checked + .checkmark {
background: var(--accent-color);
border-color: var(--accent-color);
}
.checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 0.8rem;
font-weight: bold;
}
.checkbox-text {
color: var(--default-color);
font-size: 0.9rem;
line-height: 1.5;
}
/* Submit Button */
.btn-contact-submit {
width: 100%;
padding: 1.25rem 2rem;
background: linear-gradient(135deg, #8b5cf6, #a855f7);
color: white;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-contact-submit:hover {
background: linear-gradient(135deg, #7c3aed, #9333ea);
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(139, 92, 246, 0.3);
}
.btn-contact-submit:active {
transform: translateY(0);
}
.btn-loading {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-loading.show {
display: block;
}
.spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Form Messages */
.form-messages {
margin-top: 1.5rem;
}
.message {
display: none;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-radius: 12px;
margin-bottom: 1rem;
font-weight: 500;
}
.message.show {
display: flex;
}
.loading-message {
background: rgba(139, 92, 246, 0.1);
color: var(--accent-color);
border: 1px solid rgba(139, 92, 246, 0.2);
}
.error-message {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.success-message {
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
border: 1px solid rgba(34, 197, 94, 0.2);
}
.message i {
font-size: 1.2rem;
}
/* Contact Info Wrapper */
.contact-info-wrapper {
background: var(--card-background);
border: 2px solid var(--border-color);
border-radius: 20px;
padding: 2rem;
height: 100%;
}
.contact-info-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.contact-info-header h3 {
color: var(--heading-color);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.contact-info-header p {
color: var(--default-color);
font-size: 0.9rem;
margin: 0;
}
/* Contact Methods */
.contact-methods {
margin-bottom: 2rem;
}
.contact-method {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}
.contact-method:last-child {
border-bottom: none;
}
.method-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.1));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.method-icon i {
color: var(--accent-color);
font-size: 1.2rem;
}
.method-content h4 {
color: var(--heading-color);
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.method-content p {
color: var(--default-color);
font-size: 0.9rem;
margin-bottom: 0.25rem;
}
.response-time {
color: var(--accent-color);
font-size: 0.75rem;
font-weight: 500;
background: rgba(139, 92, 246, 0.1);
padding: 0.2rem 0.5rem;
border-radius: 10px;
}
/* Social Media */
.contact-social {
margin-bottom: 2rem;
padding: 1.5rem 0;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.contact-social h4 {
color: var(--heading-color);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.contact-social p {
color: var(--default-color);
font-size: 0.85rem;
margin-bottom: 1rem;
}
.social-links {
display: flex;
gap: 0.75rem;
justify-content: center;
}
.social-link {
width: 45px;
height: 45px;
background: var(--surface-color);
border: 2px solid var(--border-color);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-color);
font-size: 1.2rem;
transition: all 0.3s ease;
}
.social-link:hover {
background: var(--accent-color);
color: white;
border-color: var(--accent-color);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}
/* Quick Actions */
.quick-actions h4 {
color: var(--heading-color);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.btn-quick-action {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 10px;
color: var(--default-color);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-quick-action:hover {
background: var(--accent-color);
color: white;
border-color: var(--accent-color);
transform: translateX(5px);
}
.btn-quick-action i {
font-size: 1rem;
}
/* Contact Extra Info */
.contact-extra-info {
background: var(--surface-color);
border-radius: 20px;
padding: 2rem;
border: 1px solid var(--border-color);
}
.info-card {
text-align: center;
padding: 1.5rem;
}
.info-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.1));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.info-icon i {
color: var(--accent-color);
font-size: 1.8rem;
}
.info-card h4 {
color: var(--heading-color);
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.info-card p {
color: var(--default-color);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
/* Responsive Design */
@media (max-width: 991px) {
.contact-form-wrapper,
.contact-info-wrapper {
margin-bottom: 2rem;
}
.contact-form-wrapper {
padding: 2rem;
}
.contact-info-wrapper {
padding: 1.5rem;
}
}
@media (max-width: 768px) {
.contact-form-wrapper {
padding: 1.5rem;
}
.contact-info-wrapper {
padding: 1rem;
}
.contact-extra-info {
padding: 1.5rem;
}
.social-links {
justify-content: center;
}
.action-buttons {
align-items: center;
}
.btn-quick-action {
min-width: 200px;
justify-content: center;
}
}
@media (max-width: 576px) {
.contact-form-wrapper {
padding: 1rem;
}
.contact-info-wrapper {
padding: 1rem;
}
.contact-extra-info {
padding: 1rem;
}
.form-control {
padding: 0.875rem 1rem;
}
.btn-contact-submit {
padding: 1rem 1.5rem;
font-size: 1rem;
}
.social-links {
gap: 0.5rem;
}
.social-link {
width: 40px;
height: 40px;
font-size: 1rem;
}
}
/* Form Validation and Focus States */
.form-group.focused .form-label {
color: var(--accent-color);
}
.form-group.valid .form-control {
border-color: #22c55e;
background: rgba(34, 197, 94, 0.05);
}
.form-group.valid .form-focus-border {
background: #22c55e;
}
.form-group.error .form-control {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.05);
}
.form-group.error .form-focus-border {
background: #ef4444;
}
.form-group.error::after {
content: '⚠';
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: #ef4444;
font-size: 1.2rem;
}
/* Enhanced Form Controls */
.form-control:focus {
transform: translateY(-2px);
}
.form-control:focus + .form-focus-border {
width: 100%;
}
/* Select Styling */
select.form-control {
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238b5cf6' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 1rem center;
background-size: 1.2rem;
padding-right: 3rem;
}
/* Textarea Enhancement */
textarea.form-control {
resize: vertical;
min-height: 120px;
}
textarea.form-control:focus {
min-height: 140px;
}
/* Button States */
.btn-contact-submit:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.btn-contact-submit:disabled:hover {
transform: none;
box-shadow: none;
}
/* Loading Animation Enhancement */
.btn-loading.show + span {
opacity: 0;
}
/* Message Animation */
.message {
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Contact Method Enhancement */
.contact-method {
transition: all 0.3s ease;
padding: 1rem;
border-radius: 12px;
}
.contact-method:hover {
background: rgba(139, 92, 246, 0.05);
}
/* Social Link Enhancement */
.social-link {
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.social-link:hover::before {
left: 100%;
}
/* Quick Action Enhancement */
.btn-quick-action {
position: relative;
overflow: hidden;
}
.btn-quick-action::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: var(--accent-color);
transition: width 0.3s ease;
z-index: -1;
}
.btn-quick-action:hover::before {
width: 100%;
}
.btn-quick-action:hover {
color: white;
}
/* Info Card Enhancement */
.info-card {
transition: all 0.3s ease;
border-radius: 15px;
position: relative;
overflow: hidden;
}
.info-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(135deg, #8b5cf6, #a855f7);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.info-card:hover::before {
transform: scaleX(1);
}
/* Responsive Enhancements */
@media (max-width: 768px) {
.form-control:focus {
transform: none;
}
.contact-method:hover {
transform: none;
}
.info-card:hover {
transform: none;
}
}
/*--------------------------------------------------------------
# Completely Redesigned Contact Section Styles
--------------------------------------------------------------*/
/* Title Decoration and Floating Elements */
.title-decoration {
position: relative;
margin-bottom: 2rem;
}
.floating-icon {
position: absolute;
width: 60px;
height: 60px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: float 6s ease-in-out infinite;
}
.floating-icon:first-child {
top: -30px;
left: -30px;
animation-delay: 0s;
}
.floating-icon:last-child {
top: -30px;
right: -30px;
animation-delay: 3s;
}
.floating-icon i {
color: var(--accent-color);
font-size: 1.5rem;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
/* Title Stats */
.title-stats {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.stat-item {
text-align: center;
padding: 1rem;
background: rgba(139, 92, 246, 0.05);
border-radius: 15px;
border: 1px solid rgba(139, 92, 246, 0.1);
transition: all 0.3s ease;
}
.stat-item:hover {
background: rgba(139, 92, 246, 0.1);
transform: translateY(-5px);
}
.stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--accent-color);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.9rem;
color: var(--default-color);
font-weight: 500;
}
/* Form Progress Bar */
.form-progress {
display: flex;
justify-content: space-between;
margin-bottom: 2rem;
padding: 1rem;
background: var(--surface-color);
border-radius: 15px;
border: 1px solid var(--border-color);
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex: 1;
position: relative;
opacity: 0.5;
transition: all 0.3s ease;
}
.progress-step.active {
opacity: 1;
}
.progress-step.completed {
opacity: 0.8;
}
.progress-step:not(:last-child)::after {
content: '';
position: absolute;
top: 25px;
right: -50%;
width: 100%;
height: 2px;
background: var(--border-color);
z-index: 1;
}
.progress-step.completed:not(:last-child)::after {
background: var(--accent-color);
}
.step-number {
width: 50px;
height: 50px;
background: var(--surface-color);
border: 2px solid var(--border-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--default-color);
transition: all 0.3s ease;
z-index: 2;
position: relative;
}
.progress-step.active .step-number {
background: var(--accent-color);
border-color: var(--accent-color);
color: white;
transform: scale(1.1);
}
.progress-step.completed .step-number {
background: var(--accent-color);
border-color: var(--accent-color);
color: white;
}
.step-label {
font-size: 0.8rem;
color: var(--default-color);
text-align: center;
font-weight: 500;
}
/* Form Steps */
.form-step {
display: none;
animation: slideIn 0.5s ease-out;
}
.form-step.active {
display: block;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Floating Label Form Groups */
.form-group.floating-label {
position: relative;
}
.floating-label-text {
position: absolute;
top: 1rem;
left: 1.25rem;
color: var(--default-color);
opacity: 0.7;
transition: all 0.3s ease;
pointer-events: none;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
}
.floating-label-text i {
color: var(--accent-color);
font-size: 1rem;
}
.form-control:focus + .floating-label-text,
.form-control:not(:placeholder-shown) + .floating-label-text {
top: -0.5rem;
left: 1rem;
font-size: 0.8rem;
color: var(--accent-color);
background: var(--card-background);
padding: 0 0.5rem;
border-radius: 5px;
}
/* Form Navigation */
.form-navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--border-color);
}
.btn-next-step,
.btn-prev-step {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-next-step {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
color: white;
}
.btn-next-step:hover {
background: linear-gradient(135deg, #7c3aed, #9333ea);
transform: translateX(5px);
}
.btn-prev-step {
background: var(--surface-color);
color: var(--default-color);
border: 1px solid var(--border-color);
}
.btn-prev-step:hover {
background: var(--accent-color);
color: white;
border-color: var(--accent-color);
}
/* Confirmation Summary */
.confirmation-summary {
background: var(--surface-color);
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
border: 1px solid var(--border-color);
}
.confirmation-summary h4 {
color: var(--heading-color);
margin-bottom: 1.5rem;
text-align: center;
font-size: 1.3rem;
}
.summary-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}
.summary-item:last-child {
border-bottom: none;
}
.summary-label {
font-weight: 600;
color: var(--heading-color);
}
.summary-value {
color: var(--accent-color);
font-weight: 500;
}
/* Enhanced Checkbox */
.checkbox-wrapper.enhanced {
background: var(--surface-color);
padding: 1rem;
border-radius: 10px;
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.checkbox-wrapper.enhanced:hover {
border-color: var(--accent-color);
background: rgba(139, 92, 246, 0.05);
}
.checkmark.enhanced {
width: 24px;
height: 24px;
border-radius: 6px;
}
/* Enhanced Form Messages */
.message {
display: none;
padding: 1.5rem;
border-radius: 15px;
margin-bottom: 1rem;
animation: slideIn 0.3s ease-out;
}
.message.show {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.message-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.loading-message .message-icon {
background: rgba(139, 92, 246, 0.1);
color: var(--accent-color);
}
.error-message .message-icon {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.success-message .message-icon {
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
}
.message-content h5 {
margin: 0 0 0.5rem 0;
font-size: 1.1rem;
font-weight: 600;
}
.message-content p {
margin: 0;
font-size: 0.9rem;
opacity: 0.9;
}
/* Header Decoration */
.header-decoration {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}
.decoration-line {
width: 50px;
height: 2px;
background: linear-gradient(135deg, #8b5cf6, #a855f7);
border-radius: 1px;
}
.header-decoration i {
color: var(--accent-color);
font-size: 1.2rem;
}
/* Enhanced Contact Methods */
.contact-method.enhanced {
position: relative;
overflow: hidden;
}
.method-icon {
position: relative;
}
.icon-pulse {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12px;
background: var(--accent-color);
opacity: 0.3;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.1);
opacity: 0.1;
}
100% {
transform: scale(1);
opacity: 0.3;
}
}
.response-time {
display: flex;
align-items: center;
gap: 0.5rem;
}
.response-time i {
font-size: 0.8rem;
}
/* Enhanced Social Links */
.social-link.enhanced {
position: relative;
overflow: hidden;
}
.social-tooltip {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
background: var(--accent-color);
color: white;
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 10;
}
.social-tooltip::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-bottom-color: var(--accent-color);
}
.social-link.enhanced:hover .social-tooltip {
opacity: 1;
visibility: visible;
bottom: -50px;
}
/* Enhanced Quick Actions */
.btn-quick-action.enhanced {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 12px;
color: var(--default-color);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-quick-action.enhanced::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
transition: left 0.5s;
}
.btn-quick-action.enhanced:hover::before {
left: 100%;
}
.btn-quick-action.enhanced:hover {
border-color: var(--accent-color);
transform: translateX(5px);
}
.btn-icon {
width: 40px;
height: 40px;
background: rgba(139, 92, 246, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btn-icon i {
color: var(--accent-color);
font-size: 1.2rem;
}
.btn-content {
display: flex;
flex-direction: column;
}
.btn-title {
font-weight: 600;
font-size: 0.9rem;
}
.btn-subtitle {
font-size: 0.75rem;
opacity: 0.7;
margin-top: 0.2rem;
}
/* Enhanced Info Cards */
.info-card.enhanced {
position: relative;
overflow: hidden;
background: var(--card-background);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.info-card.enhanced:hover {
border-color: var(--accent-color);
transform: translateY(-5px);
}
.info-icon.enhanced {
position: relative;
width: 80px;
height: 80px;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.1));
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: all 0.3s ease;
}
.info-card.enhanced:hover .info-icon.enhanced {
transform: scale(1.1);
}
.icon-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 25px;
background: var(--accent-color);
opacity: 0;
filter: blur(20px);
transition: all 0.3s ease;
}
.info-card.enhanced:hover .icon-glow {
opacity: 0.3;
}
.info-icon.enhanced i {
color: var(--accent-color);
font-size: 2rem;
z-index: 1;
position: relative;
}
.card-decoration {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(135deg, #8b5cf6, #a855f7);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.info-card.enhanced:hover .card-decoration {
transform: scaleX(1);
}
/* Extra Info Header */
.extra-info-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.extra-info-header h3 {
color: var(--heading-color);
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.extra-info-header p {
color: var(--default-color);
font-size: 1rem;
margin: 0;
}
/* Responsive Enhancements */
@media (max-width: 768px) {
.title-stats {
gap: 1.5rem;
}
.stat-item {
padding: 0.75rem;
}
.stat-number {
font-size: 1.5rem;
}
.form-progress {
flex-direction: column;
gap: 1rem;
}
.progress-step:not(:last-child)::after {
display: none;
}
.floating-icon {
width: 40px;
height: 40px;
}
.floating-icon i {
font-size: 1rem;
}
}