/* ========================= */
/* Root Variables            */
/* ========================= */
:root {
    --primary-color: rgb(0, 26, 255);
    --primary-hover: #081e96;
    --text-color: #ffffff;

    /* Colors */
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
}

/* 
 * Global Styles for the entire website
 * ===================================
 */

/* Reset default margins and padding for html and body elements */
/* Prevent horizontal scrolling by hiding overflow */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

/* Main body styling */
/* Sets a full-screen background image that stays fixed during scrolling */
body {
    background-image: url('../img/bg.jpg'); /* Background image path */
    background-size: cover; /* Cover entire viewport */
    background-position: center center; /* Center the image */
    background-attachment: fixed; /* Fixed position while scrolling */
    background-repeat: no-repeat; /* No image repetition */
    min-height: 100vh; /* Minimum height of viewport */
    display: flow-root; /* Creates a block formatting context */
}

/* Heading styles (h1-h6) */
/* Bold white text with bottom margin and elevated z-index */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    color: var(--bs-white); /* Using Bootstrap white variable */
    margin-bottom: 1rem; /* Space below headings */
    position: relative;
    z-index: 1; /* Ensures headings appear above other elements */
}

/* Paragraph styling */
/* Larger font size with comfortable line height and light color */
p {
    font-size: 1.2rem; /* Slightly larger than default */
    line-height: 1.5; /* Improved readability */
    color: var(--bs-light); /* Using Bootstrap light variable */
    position: relative;
    z-index: 1; /* Ensures paragraphs appear above other elements */
}

/* Special badge style for section headings */
/* Uses a cursive font with gradient background */
.sections-badge {
    font-family: 'Satisfy', cursive; /* Google Font - Satisfy */
    font-size: 0.9rem; /* Slightly smaller font */
    padding: 8px 15px; /* Vertical and horizontal padding */
    border-radius: 50px; /* Fully rounded ends */
    color: var(--bs-white); /* White text */
    background-color: var(--gradient-bg-2); /* Custom gradient background */
    text-transform: uppercase; /* All uppercase letters */
    letter-spacing: 1px; /* Slightly spaced out letters */
}

/* 
 * Navbar Styles
 * =============
 * Responsive navigation bar with semi-transparent background
 * that becomes solid when scrolled
 */

 
/* Main navbar container */
/* Centered horizontally with semi-transparent white background */
.navbar {
    margin-top: 20px; /* Space from top of viewport */
    background: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    position: fixed; /* Fixed position at top */
    top: 0;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Precise centering */
    z-index: 10; /* Ensure navbar stays above other content */
    width: auto; /* Auto width based on content */
    border-radius: 50px; /* Fully rounded corners */
}

/* Mobile responsive styles (tablets and below) */
@media (max-width: 991.98px) {
    .navbar {
        background: var(--bs-white); /* Solid white background */
        margin-top: 20px;
        position: fixed;
        display: block;
        width: 80%; /* Wider but not full width */
    }
}

/* Navbar brand (logo) and link styles */
.navbar .navbar-brand,
.navbar .nav-link {
    color: var(--bs-gray-dark) !important; /* Dark gray text */
    font-weight: bold; /* Bold font */
}

/* Hover state for brand and links */
.navbar .navbar-brand:hover,
.navbar .nav-link:hover {
    color: var(--bs-dark) !important; /* Darker color on hover */
    font-weight: bold;
}

/* Scrolled state styles (when user scrolls down) */
.navbar.scrolled {
    background-color: var(--bs-white) !important; /* Solid white */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Text colors in scrolled state */
.navbar.scrolled .navbar-brand,
.navbar.scrolled .nav-link {
    color: var(--bs-gray-dark) !important;
}

/* Hover colors in scrolled state */
.navbar.scrolled .navbar-brand:hover,
.navbar.scrolled .nav-link:hover {
    color: var(--bs-dark) !important;
}

/* 
 * Hero Section Styles
 * ==================
 * Full-viewport banner section with responsive background image
 * and centered content
 */

/* Main hero container */
#container{
    background: #00adef;
    background: -moz-linear-gradient(-45deg, #00adef 0%, #0076e5 100%);
    background: -webkit-linear-gradient(-45deg, #00adef 0%,#0076e5 100%);
    background: linear-gradient(135deg, #00adef 0%,#0076e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00adef', endColorstr='#0076e5',GradientType=1 );
    position: relative;
    height: 100vh;
    width: 100%;
    margin: 0px auto;
    padding: 0px auto;
}

#container-inside {
    position: relative;
    min-width: 960px;
    max-width: 1280px;
    height: auto;
    min-height: 100%;
    margin: 0px auto;
    padding: 0px auto;
    overflow: visible;
}

#circle-small {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
	animation-timing-function: cubic-bezier(.6, 0, .4, 1);
	animation-delay: 0s;
	position: absolute;
	top: 200px;
	left: -150px;
    background: #fff;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    opacity: 0.4;
}

#circle-medium {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
	animation-timing-function: cubic-bezier(.6, 0, .4, 1);
	animation-delay: 0.3s;
	position: absolute;
	top: 50px;
	left: -300px;
    background: #fff;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    opacity: 0.3;
}

#circle-large {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
	animation-timing-function: cubic-bezier(.6, 0, .4, 1);
	animation-delay: 0.6s;
	position: absolute;
	top: -100px;
	left: -450px;
    background: #fff;
    width: 900px;
    height: 900px;
    border-radius: 50%;
    opacity: 0.2;
}

#circle-xlarge {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
	animation-timing-function: cubic-bezier(.6, 0, .4, 1);
	animation-delay: 0.9s;
	position: absolute;
	top: -250px;
	left: -600px;
    background: #fff;
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    opacity: 0.1;
}

#circle-xxlarge {
    -webkit-animation: circle-small-scale 3s ease-in-out infinite alternate;
    animation: circle-small-scale 3s ease-in-out infinite alternate;
	animation-timing-function: cubic-bezier(.6, 0, .4, 1);
	animation-delay: 1.2s;
	position: absolute;
	top: -400px;
	left: -750px;
    background: #fff;
    width: 1500px;
    height: 1500px;
    border-radius: 50%;
    opacity: 0.05;
}

@-webkit-keyframes circle-small-scale {
    0% {
        -webkit-transform: scale(1.0);
    }
    100% {
        -webkit-transform: scale(1.1);
    }
}

@keyframes circle-small-scale {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.1);
    }
}
/* ------------------------------------------------------------------------------------------------------------ */
.hero {
    /* background-image: url('../img/hero_3.png');  */
    background-size: cover; /* Cover entire container */
    background-position: center; /* Center the image */
    min-height: 100dvh; /* Minimum height of 100% viewport height (dynamic units) */
    position: relative; /* Positioning context for pseudo-elements */
    display: flex; /* Flex layout for centering */
    align-items: center; /* Vertical centering */
    padding: clamp(4rem, 10vh, 8rem) 1.5rem; /* Responsive padding with clamp():
       - Minimum: 4rem (64px)
       - Preferred: 10% of viewport height
       - Maximum: 8rem (128px) */
    box-sizing: border-box; /* Include padding in height calculation */
    padding-top: 150px;
}

/* Hero content container */
.hero .hero-content {
    position: relative; /* Positioning context */
    z-index: 5; /* Ensure content stays above potential overlays */
    padding-top: 100px; /* Additional top spacing */
}

/* Button styling specific to hero section */
.hero .btn {
    border-radius: 50px; /* Fully rounded pill shape */
    font-size: 1rem; /* Base font size */
    font-weight: bold; /* Bold text */
    padding: 10px 20px; /* Comfortable clickable area */
}

/* 
 * Clients Carousel Section
 * ========================
 * Infinite horizontal scrolling showcase of client logos
 */

 .clients-carousel {
    background-color: var(--bs-white); /* White background using Bootstrap variable */
}

/* Container for the scrolling carousel */
.clients-carousel .carousel-wrapper {
    overflow: hidden; /* Hide overflow to create scrolling effect */
    position: relative; /* Positioning context for potential navigation elements */
}

/* Pause animation on hover for better interaction */
.clients-carousel .carousel-wrapper:hover .scroll-right,
.carousel-wrapper:hover .scroll-left {
    animation-play-state: paused; /* Pause animation when hovering */
    transition: all 0.3s ease; /* Smooth transition */
}

/* Flex container for client cards */
.clients-carousel .carousel-row {
    display: flex; /* Flex layout */
    gap: 20px; /* Space between items */
    flex-wrap: nowrap; /* Prevent wrapping to single line */
}

/* Individual client card styling */
.clients-carousel .client-card {
    flex-shrink: 0; /* Prevent shrinking */
    width: 150px; /* Fixed width */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Client logo/image styling */
.clients-carousel .client-card img {
    max-width: 100%; /* Responsive width */
    opacity: 0.8; /* Slightly transparent */
    transition: opacity 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for client logos */
.clients-carousel .client-card img:hover {
    opacity: 1; /* Full opacity on hover */
}

/* Animation for right scrolling effect */
@keyframes scrollRight {
    0% {
        transform: translateX(-100%); /* Start from left */
    }
    100% {
        transform: translateX(0%); /* Move to natural position */
    }
}


/* 
 * Features Scroll Section (Vertical Scroll-Snap)
 * =============================================
 * Full-screen vertical scrolling sections with snap points
 */

/* Main container for vertical scrolling */
.features-scroll-wrapper {
    position: relative; /* Positioning context */
    height: 100vh; /* Full viewport height */
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Container for feature panels */
.features-scroll {
    min-height: 100vh; /* Minimum full viewport height */
    scroll-snap-type: y proximity; /* Snap to vertical points */
}

/* Individual feature panel */
.feature-panel {
    padding-top: 250px; /* Top spacing for content */
    height: 100vh; /* Full viewport height */
    scroll-snap-align: start; /* Snap to top of viewport */
    position: relative; /* Positioning context */
    transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1); /* Smooth transform */
}

/* Active state for feature panel */
.feature-panel.active {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Natural position */
}

/* Special styling for last panel */
.last-feature-panel {
    scroll-snap-align: end; /* Snap to bottom */
    padding-bottom: 20vh; /* Extra bottom space */
}

/* Visual indicator for section exit */
.section-exit-indicator {
    height: 1px; /* Thin line */
    position: absolute;
    bottom: 15vh; /* Position from bottom */
    left: 0;
    right: 0;
}

/* Feature image styling */
.feature-img {
    max-height: 60vh; /* Limit height */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: transform 0.5s ease; /* Smooth scale effect */
}

/* Hover effect for feature images */
.feature-panel:hover .feature-img {
    transform: scale(1.03); /* Slight zoom */
}

/* Navigation dots (vertical) */
.feature-nav-dots {
    position: fixed; /* Fixed position */
    right: 30px; /* Position from right */
    top: 50%; /* Vertical center */
    transform: translateY(-50%); /* Precise centering */
    z-index: 100; /* Above content */
    display: flex;
    flex-direction: column; /* Vertical layout */
    gap: 15px; /* Space between dots */
}

/* Individual dot styling */
.dot {
    width: 12px; /* Fixed size */
    height: 12px;
    border-radius: 50%; /* Perfect circle */
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent */
    cursor: pointer; /* Pointer cursor */
    transition: all 0.3s ease; /* Smooth transitions */
}

/* Active dot state */
.dot.active {
    background-color: var(--bs-white); /* Solid white */
    transform: scale(1.3); /* Slightly larger */
}

/* Tablet responsive adjustments */
@media (max-width: 992px) {
    .feature-panel {
        padding: 6rem 0; /* Adjusted padding */
    }
    
    .feature-nav-dots {
        right: 15px; /* Move closer to edge */
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .feature-panel {
        height: auto; /* Auto height */
        min-height: 100vh; /* Still full viewport minimum */
        padding: 5rem 0; /* Reduced padding */
    }
    
    .feature-img {
        max-height: 50vh; /* Smaller images */
        margin-top: 2rem; /* Additional spacing */
    }
    
    /* Hide dots on mobile */
    .feature-nav-dots {
        display: none;
    }
}

/* 
 * Stats Section
 * =============
 * Displays key metrics with animated cards and visual effects
 */

 .stats-section {
    background-color: var(--bs-white); /* White background */
    padding: 3rem 0; /* Vertical padding */
}

/* Style for the section badge/label */
.stats-section .sections-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem; /* Compact padding */
    border-radius: 50rem; /* Fully rounded */
    font-size: 0.75rem; /* Small text */
    letter-spacing: 0.5px; /* Slightly spaced letters */
}

/* Grid layout for stats cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 20px; /* Space between cards */
    margin-top: 2rem; /* Space from section header */
}

/* Individual stat card styling */
.stats-card {
    background-color: var(--bs-dark); /* Dark background */
    border-radius: 15px; /* Rounded corners */
    padding: 2rem; /* Inner spacing */
    position: relative;
    overflow: hidden; /* Hide overflow for pseudo-elements */
    text-align: center; /* Center content */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
}

/* Image styling within cards */
.stats-card img {
    margin-bottom: 1rem; /* Space below image */
}

/* Large number styling */
.stats-card .stat-number {
    font-size: 2.5rem; /* Extra large text */
    font-weight: bold;
    margin-bottom: 0.5rem; /* Space below number */
    color: var(--bs-white); /* White text */
}

/* Title styling */
.stats-card .stat-title {
    font-size: 1.2rem; /* Slightly larger text */
    font-weight: bold;
    margin-bottom: 0.5rem; /* Space below title */
    color: var(--bs-white);
}

/* Description text */
.stats-card .stat-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
    line-height: 1.5; /* Comfortable line spacing */
}

/* Animated background effect */
.stats-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%; /* Large circle */
    height: 200%;
    transform: translate(-50%, -50%) scale(1);
    animation: pulse 6s infinite; /* Continuous pulse animation */
    border-radius: 50%; /* Perfect circle */
    z-index: 0; /* Behind content */
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
}

/* Dynamic prefix for counters */
.stats-card .stat-number::before {
    content: attr(data-purecounter-prefix); /* Pull from data attribute */
    margin-right: 2px; /* Small space */
}

/* Dynamic suffix for counters */
.stats-card .stat-number::after {
    content: attr(data-purecounter-suffix); /* Pull from data attribute */
    margin-left: 2px; /* Small space */
}

/* Ensure all content stays above background effects */
.stats-card * {
    position: relative;
    z-index: 1;
}


/* 
 * Pricing Section
 * ===============
 * Flexible pricing plans with toggleable options
 */

/* Container for pricing cards */
.pricing-card-container {
    max-width: max-content; /* Fit content width */
    margin: 0 auto; /* Center horizontally */
    background-color: rgba(255, 255, 255, 0.075); /* Semi-transparent white */
    border-radius: 15px; /* Rounded corners */
    overflow: hidden; /* Hide overflow */
    padding: 20px; /* Inner spacing */
}

/* Header for pricing cards */
.pricing-header {
    background-color: var(--bs-blue); /* Blue background */
    padding: 10px; /* Inner spacing */
    border-radius: 15px 15px 0 0; /* Only round top corners */
}

/* Active plan header styling */
.pricing-header.active-plan {
    background-color: var(--bs-purple); /* Purple for active */
    color: var(--bs-white); /* White text */
    padding: 10px;
    border-radius: 15px 15px 0 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Badge styling in header */
.pricing-header .badge {
    font-size: 0.9rem; /* Small text */
    padding: 5px 10px; /* Compact padding */
}

/* Pricing card body */
.pricing-card {
    background-color: var(--bs-white); /* White background */
    border-radius: 15px; /* Rounded corners */
    padding: 20px; /* Inner spacing */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    position: relative;
    top: -10px; /* Overlap with header */
}

/* Hover effect for cards */
.pricing-card:hover {
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

/* Container for pricing tabs */
.pricing-tabs {
    gap: 10px; /* Space between tabs */
}

/* Tab button styling */
.tab-btn {
    background-color: var(--bs-white); /* White background */
    border: none; /* No border */
    border-radius: 50px; /* Fully rounded */
    padding: 10px 20px; /* Comfortable padding */
    font-size: 1rem; /* Normal text */
    font-weight: bold; /* Bold text */
    color: var(--bs-dark); /* Dark text */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
}

/* Active tab styling */
.tab-btn.active {
    background-color: var(--bs-blue); /* Blue background */
    color: var(--bs-white); /* White text */
}

/* Hover state for tabs */
.tab-btn:hover {
    color: var(--bs-white); /* White text */
    background-color: var(--bs-cyan); /* Cyan background */
}

/* Price display section */
.price-section {
    margin-bottom: 20px; /* Space below price */
}

/* Large price text */
.price {
    font-size: 4rem; /* Extra large */
    font-weight: bold;
    color: var(--bs-gray-dark); /* Dark gray */
    margin: 0; /* Remove default margin */
}

/* Duration text */
.price-duration {
    font-size: 1.2rem; /* Slightly larger */
    color: var(--bs-gray-dark);
}

/* Additional price info */
.price-info {
    font-size: 0.9rem; /* Small text */
    color: var(--bs-gray-dark);
}

/* Divider between sections */
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--bs-gray-dark);
    font-size: 0.9rem; /* Small text */
}

/* Line in divider */
.divider .line {
    height: 1px; /* Thin line */
    background-color: var(--bs-light); /* Light color */
}

/* Grid for feature list */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 10px; /* Space between items */
    margin-bottom: 20px; /* Space below grid */
}

/* Individual feature item */
.feature-item {
    display: flex;
    align-items: center; /* Center vertically */
    gap: 10px; /* Space between icon and text */
    font-size: 0.9rem; /* Small text */
    color: var(--bs-gray-dark); /* Dark gray */
}

/* Call-to-action button */
.cta-section .btn {
    border-radius: 50px; /* Fully rounded */
    font-size: 1rem; /* Normal text */
    font-weight: bold;
    padding: 10px 20px; /* Comfortable padding */
}

/* Additional CTA information */
.cta-info {
    font-size: 0.8rem; /* Very small text */
    color: var(--bs-gray-dark);
}


/* 
 * Testimonials Section
 * ====================
 * Horizontal scrolling carousel of customer testimonials
 */

 .testimonials {
    background: var(--bs-light); /* Light background */
    padding: 60px 0; /* Vertical padding */
}

/* Circular profile image styling */
.profile-img {
    width: 60px; /* Fixed size */
    height: 60px;
    border-radius: 50%; /* Perfect circle */
    object-fit: cover; /* Ensure images fill circle */
}

/* Carousel container */
.carousel-wrapper {
    overflow: hidden; /* Hide scrollbars */
    position: relative; /* Positioning context */
}

/* Flex container for testimonials */
.carousel-row {
    display: flex;
    gap: 20px; /* Space between cards */
    flex-wrap: nowrap; /* Force single line */
}

/* Individual testimonial card */
.testimonial-card {
    background: var(--bs-white); /* White background */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Inner spacing */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    flex-shrink: 0; /* Prevent shrinking */
    width: 500px; /* Fixed width */
    text-align: left; /* Left-aligned content */
}

/* Highlight effect for text */
.testimonial .highlight {
    background-color: rgba(255, 223, 186, 0.5); /* Light orange highlight */
    padding: 2px 4px; /* Small padding */
    border-radius: 4px; /* Slightly rounded */
}

/* Right scrolling animation */
.scroll-right {
    animation: scrollRight 30s linear infinite; /* Continuous scroll */
}

@keyframes scrollRight {
    0% {
        transform: translateX(-100%); /* Start from left */
    }
    100% {
        transform: translateX(0%); /* Move to natural position */
    }
}

/* Left scrolling animation */
.scroll-left {
    animation: scrollLeft 30s linear infinite; /* Continuous scroll */
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0%); /* Start from natural position */
    }
    100% {
        transform: translateX(-100%); /* Move to left */
    }
}

/* Pause animation on hover */
.carousel-wrapper:hover .scroll-right,
.carousel-wrapper:hover .scroll-left {
    animation-play-state: paused; /* Pause animation */
    transition: all 0.3s ease; /* Smooth transition */
}

/* Testimonial name styling */
.testimonial-card h6 {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 5px; /* Small space below */
    color: var(--bs-gray-dark); /* Dark gray */
}

/* Role/position styling */
.testimonial-card .role {
    font-size: 0.9rem; /* Slightly smaller */
    color: var(--bs-gray); /* Medium gray */
    margin-bottom: 10px; /* Space below */
}

/* Testimonial text styling */
.testimonial-card .testimonial {
    font-size: 0.9rem;
    color: var(--bs-gray-dark); /* Dark gray */
    font-style: normal; /* No italic */
    margin-top: 5px; /* Small space above */
}


/* 
 * About Us Section
 * ================
 * Company information with vertical scrolling elements
 */

.about-us {
    background-color: var(--bs-white); /* White background */
    padding: 3rem 0; /* Vertical padding */
}

/* About us images */
.about-us img {
    max-width: 100%; /* Responsive width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Strong shadow */
}

/* Vertical carousel container */
.vertical-carousel {
    overflow: hidden; /* Hide overflow */
    position: relative; /* Positioning context */
    height: 350px; /* Fixed height */
}

/* Vertical carousel row */
.vertical-carousel .carousel-row {
    display: flex;
    flex-direction: column; /* Vertical layout */
    position: absolute;
    animation: scrollUp 20s linear infinite; /* Continuous scroll */
}

/* About us cards */
.about-card {
    background-color: var(--bs-light); /* Light background */
    border-radius: 10px; /* Rounded corners */
    text-align: left; /* Left-aligned content */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover */
}

/* Hover effect for cards */
.about-card:hover {
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

/* Upward scrolling animation */
@keyframes scrollUp {
    0% {
        transform: translateY(0); /* Start position */
    }
    100% {
        transform: translateY(-50%); /* Move up */
    }
}

/* Pause animation on hover */
.vertical-carousel:hover .carousel-row {
    animation-play-state: paused; /* Pause animation */
    transition: all 0.3s ease; /* Smooth transition */
}


/* 
 * Portfolio Section
 * ================
 * Showcase of work with hover effects and filtering
 */

/* Portfolio item container */
.portfolio .portfolio-item {
    margin-bottom: 30px; /* Space between items */
    position: relative; /* Positioning context */
}

/* Portfolio card styling */
.portfolio-card {
    position: relative;
    overflow: hidden; /* Hide overflow */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: all 0.3s ease; /* Smooth transitions */
}

/* Portfolio images */
.portfolio-card img {
    transition: all 0.5s ease; /* Smooth hover */
    width: 100%; /* Full width */
    display: block; /* Remove inline spacing */
}

/* Overlay effect */
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7); /* Dark semi-transparent */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
    opacity: 0; /* Initially hidden */
    transition: all 0.4s ease; /* Smooth fade */
    border-radius: 20px; /* Match card radius */
}

/* Show overlay on hover */
.portfolio-card:hover .portfolio-overlay {
    opacity: 1; /* Fully visible */
}

/* Zoom effect on hover */
.portfolio-card:hover img {
    transform: scale(1.1); /* Slight zoom */
}

/* Portfolio action button */
.portfolio-btn {
    display: inline-flex;
    align-items: center;
    margin: 8px; /* Small spacing */
    padding: 12px 25px; /* Comfortable click area */
    background: var(--bs-white); /* White background */
    color: var(--bs-dark); /* Dark text */
    border-radius: 50px; /* Pill shape */
    text-decoration: none; /* No underline */
    transition: all 0.3s ease; /* Smooth hover */
    font-weight: 600; /* Semi-bold */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Button hover effect */
.portfolio-btn:hover {
    background: var(--bs-dark); /* Dark background */
    color: var(--bs-white); /* White text */
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Stronger shadow */
}

/* Button icon styling */
.portfolio-btn i {
    margin-right: 10px; /* Space between icon and text */
    font-size: 1.2rem; /* Slightly larger icon */
}

/* Filter buttons for portfolio */
.filter-btn {
    white-space: nowrap; /* Prevent wrapping */
    padding: 0.6rem 1.2rem; /* Comfortable padding */
    flex-grow: 0; /* Don't grow to fill space */
    transition: all 0.3s ease; /* Smooth hover */
    border-radius: 50px; /* Pill shape */
    font-weight: 500; /* Medium weight */
}

/* Filter button hover */
.filter-btn:hover {
    background: var(--bs-white); /* White background */
    color: var(--bs-dark); /* Dark text */
    transform: translateY(-2px); /* Slight lift */
}

/* Filter button container */
.d-flex.flex-wrap.gap-2 {
    justify-content: flex-start; /* Left-aligned */
    gap: 12px; /* Space between buttons */
}

/* 
 * Team Carousel Section
 * =====================
 * Horizontal scrolling showcase of team members with hover effects
 */

 .team-carousel {
    background: var(--bs-white); /* Light background */
    padding-top: 60px; /* Top padding */
    padding-bottom: 60px; /* Bottom padding */
}

/* Carousel container */
.team-carousel .carousel-wrapper {
    overflow: hidden; /* Hide scrollbars */
    position: relative; /* Positioning context */
}

/* Flex container for team cards */
.team-carousel .carousel-row {
    display: flex;
    gap: 30px; /* Space between cards */
    flex-wrap: nowrap; /* Force single line */
    animation: scrollRightTeam 30s linear infinite; /* Continuous scroll */
}

/* Pause animation on hover */
.team-carousel .carousel-wrapper:hover .scroll-right-team {
    animation-play-state: paused; /* Pause animation */
    transition: all 0.3s ease; /* Smooth transition */
}

/* Team card container */
.team-card-wrapper {
    flex-shrink: 0; /* Prevent shrinking */
    width: 180px; /* Fixed width */
    position: relative; /* Positioning context */
}

/* Image container */
.team-img-box {
    position: relative;
    border-radius: 15px; /* Rounded corners */
    overflow: hidden; /* Hide overflow */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Team member image */
.team-img {
    width: 100%; /* Full width */
    height: 240px; /* Fixed height */
    object-fit: cover; /* Fill container */
    display: block; /* Remove inline spacing */
}

/* Information card */
.team-info-card {
    position: absolute;
    bottom: 10px; /* Position from bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Precise centering */
    background-color: var(--bs-white); /* White background */
    padding: 10px 12px; /* Inner spacing */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 1); /* Strong shadow */
    text-align: center; /* Center content */
    width: calc(100% - 20px); /* Responsive width */
}

/* Team member name */
.team-info-card h5 {
    margin: 0; /* Remove default margin */
    font-size: 0.95rem; /* Slightly smaller */
    font-weight: 600; /* Semi-bold */
    color: var(--bs-dark); /* Dark text */
}

/* Team member position */
.team-info-card p {
    margin: 0; /* Remove default margin */
    font-size: 0.8rem; /* Small text */
    color: var(--bs-gray-dark); /* Dark gray */
}

/* Social links container */
.team-socials {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%) scale(0.8); /* Slightly scaled down */
    display: flex;
    gap: 10px; /* Space between icons */
    opacity: 0; /* Initially hidden */
    transition: all 0.3s ease; /* Smooth transition */
    z-index: 2; /* Above overlay */
}

/* Social link buttons */
.team-socials a {
    width: 35px; /* Fixed size */
    height: 35px;
    background-color: var(--bs-white); /* White background */
    color: var(--bs-dark); /* Dark icon */
    border-radius: 50%; /* Perfect circle */
    font-size: 14px; /* Icon size */
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    text-decoration: none; /* No underline */
    transition: all 0.3s ease; /* Smooth hover */
}

/* Social link hover */
.team-socials a:hover {
    background-color: var(--bs-dark); /* Dark background */
    color: var(--bs-white); /* White icon */
}

/* Show social links on hover */
.team-img-box:hover .team-socials {
    opacity: 1; /* Fully visible */
    transform: translate(-50%, -50%) scale(1); /* Normal size */
}

/* Overlay effect */
.team-img-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2); /* Dark overlay */
    opacity: 0; /* Initially transparent */
    transition: 0.3s; /* Smooth fade */
    z-index: 1; /* Above image, below socials */
}

/* Show overlay on hover */
.team-img-box:hover::after {
    opacity: 1; /* Semi-transparent */
}

/* Right scrolling animation */
@keyframes scrollRightTeam {
    0% {
        transform: translateX(0%); /* Start position */
    }
    100% {
        transform: translateX(-50%); /* Move left */
    }
}


/* 
 * FAQ Section
 * ===========
 * Interactive accordion for frequently asked questions
 */

.faq {
    background-color: var(--bs-white); /* White background */
}

/* Accordion button styling */
.faq .accordion-button {
    font-size: 1.1rem; /* Slightly larger */
    font-weight: bold; /* Bold text */
    color: var(--bs-dark); /* Dark text */
    background-color: var(--bs-white); /* White background */
    border: none; /* No border */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Shadow effect */
}

/* Button hover state */
.faq .accordion-button:hover {
    background-color: var(--bs-gray); /* Gray background */
    color: var(--bs-white); /* White text */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Shadow effect */
}

/* Expanded button state */
.faq .accordion-button:not(.collapsed) {
    background-color: var(--bs-dark); /* Dark background */
    color: var(--bs-white); /* White text */
    box-shadow: none; /* No shadow */
}

/* Custom accordion icon */
.accordion-icon {
    font-size: 1.2rem; /* Icon size */
    font-weight: bold; /* Bold icon */
    color: var(--bs-dark); /* Dark color */
    transition: transform 0.3s ease; /* Smooth rotation */
}

/* Expanded icon state */
.accordion-button:not(.collapsed) .accordion-icon {
    transform: rotate(45deg); /* Rotated icon */
    color: var(--bs-white); /* White icon */
}

/* Default arrow icon */
.faq .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transition: transform 0.3s ease; /* Smooth rotation */
}

/* Expanded arrow state */
.faq .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transform: rotate(-180deg); /* Rotated arrow */
}

/* Accordion content area */
.faq .accordion-body {
    font-size: 1rem; /* Normal text */
    color: var(--bs-gray-dark); /* Dark gray */
    background-color: var(--bs-light); /* Light background */
    border-top: 1px solid #ddd; /* Top border */
}


/* 
 * Subscribe Section
 * ================
 * Email subscription form with visual elements
 */

.subscribe {
    background-color: var(--bs-white); /* White background */
}

/* Subscription image */
.subscribe img {
    max-width: 100%; /* Responsive width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Strong shadow */
}

/* Form input styling */
.subscribe .form-control {
    border-radius: 5px; /* Slightly rounded */
    border: var(--bs-white); /* White border */
    padding: 0.75rem; /* Comfortable padding */
}

/* Focus state for inputs */
.subscribe .form-control:focus {
    border-color: var(--bs-dark); /* Dark border */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Glow effect */
}


/* 
 * Contact Section
 * ===============
 * Contact information and form
 */

.contact {
    background-color: var(--bs-white); /* Light background */
    padding-top: 50px; /* Top padding */
}

/* Contact info text */
.contact .contact-info p {
    margin-bottom: 1.5rem; /* Space below */
    font-size: 1rem; /* Normal text */
}

/* Contact links */
.contact .contact-info a {
    color: var(--bs-primary); /* Primary color */
    text-decoration: none; /* No underline */
}

/* Link hover state */
.contact .contact-info a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Form label styling */
.contact .form-label {
    font-weight: 500; /* Medium weight */
}

/* Form input styling */
.contact .form-control {
    border-radius: 30px; /* Fully rounded */
    border: 1px solid var(--bs-white); /* White border */
    padding: 0.75rem; /* Comfortable padding */
}

/* Input focus state */
.contact .form-control:focus {
    border-color: var(--bs-gray); /* Gray border */
    box-shadow: var(--bs-dark); /* Dark shadow */
}

/* 
 * Portfolio Detail Section
 * ======================
 * Detailed product view with gallery, pricing, and trust badges
 */

 .portfolio-detail-section {
    background-color: var(--bs-light); /* Light background */
    padding: 6rem 0; /* Vertical padding */
    position: relative; /* Positioning context */
}

/* Main product wrapper */
.portfolio-wrapper {
    position: relative;
    border-radius: 16px; /* Rounded corners */
    overflow: hidden; /* Hide overflow */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); /* Soft shadow */
    background: transparent; /* Transparent background */
    padding: 2rem; /* Inner spacing */
}

/* Main product image */
.portfolio-image {
    border-radius: 8px; /* Slightly rounded */
    transition: transform 0.3s ease; /* Smooth hover */
    max-height: 500px; /* Limit height */
    width: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Fit within container */
    display: block; /* Remove inline spacing */
}

/* Image hover effect */
.portfolio-image:hover {
    transform: scale(1.02); /* Slight zoom */
}

/* Product info container */
.portfolio-info-content {
    padding: 2rem; /* Inner spacing */
}

/* Product category label */
.portfolio-category {
    color: var(--bs-gray); /* Gray text */
    font-weight: 600; /* Semi-bold */
    letter-spacing: 1px; /* Spaced letters */
    font-size: 0.9rem; /* Small text */
    text-transform: uppercase; /* All caps */
}

/* Image gallery container */
.portfolio-gallery {
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem; /* Space below */
    position: relative;
    border-radius: 8px; /* Slightly rounded */
    overflow: hidden; /* Hide overflow */
}

/* Gallery slide styling */
.portfolio-gallery .swiper-slide {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background: var(--bs-white); /* White background */
}

/* Gallery images */
.portfolio-gallery .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px; /* Limit height */
    object-fit: contain; /* Fit within container */
}

/* Gallery navigation buttons */
.portfolio-gallery .swiper-button-next,
.portfolio-gallery .swiper-button-prev {
    color: var(--bs-dark); /* Dark arrows */
    background: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
    width: 40px; /* Fixed size */
    height: 40px;
    border-radius: 50%; /* Perfect circle */
    backdrop-filter: blur(5px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(5px); /* Safari support */
}

/* Navigation arrow icons */
.portfolio-gallery .swiper-button-next::after,
.portfolio-gallery .swiper-button-prev::after {
    font-size: 1.2rem; /* Icon size */
}

/* Gallery pagination bullets */
.portfolio-gallery .swiper-pagination-bullet {
    background: var(--bs-gray); /* Gray color */
    opacity: 0.5; /* Semi-transparent */
}

/* Active bullet */
.portfolio-gallery .swiper-pagination-bullet-active {
    background: var(--bs-dark); /* Dark color */
    opacity: 1; /* Fully visible */
}

/* Zoomable image container */
.image-zoom-container {
    position: relative;
    overflow: hidden;
    cursor: zoom-in; /* Zoom cursor */
    border-radius: 8px; /* Slightly rounded */
}

/* Zoomable image */
.gslide-image img {
    transition: transform 0.3s ease; /* Smooth zoom */
}

/* Zoom effect on hover */
.gslide-image img:hover {
    transform: scale(1.05); /* Slight zoom */
}

/* Product title */
.portfolio-title {
    font-size: 2.5rem; /* Large text */
    font-weight: 800; /* Extra bold */
    color: var(--bs-dark); /* Dark color */
    margin: 0.5rem 0 1rem; /* Vertical spacing */
    line-height: 1.2; /* Tight line height */
}

/* Rating container */
.portfolio-rating {
    display: flex;
    align-items: center; /* Center vertically */
    color: var(--bs-gray); /* Gray text */
}

/* Star ratings */
.stars {
    color: var(--bs-yellow); /* Yellow stars */
    font-size: 1.1rem; /* Slightly larger */
}

/* Product description */
.portfolio-description {
    color: var(--bs-gray); /* Gray text */
    font-size: 1.1rem; /* Slightly larger */
    line-height: 1.7; /* Comfortable spacing */
    margin: 1.5rem 0; /* Vertical spacing */
}

/* Trust badges container */
.trust-badges {
    padding: 1rem; /* Inner spacing */
    background-color: var(--bs-white); /* White background */
    border-radius: 10px; /* Rounded corners */
    border: 1px solid var(--bs-light); /* Light border */
    transition: all 0.3s ease; /* Smooth hover */
}

/* Badges flex layout */
.trust-badges .d-flex {
    justify-content: space-between; /* Space evenly */
    align-items: center; /* Center vertically */
    padding: 0.5rem 0; /* Vertical spacing */
}

/* Badge images */
.trust-badges img {
    width: 100px; /* Fixed width */
    height: auto; /* Maintain ratio */
    object-fit: contain; /* Fit within space */
    filter: grayscale(30%); /* Partial grayscale */
    opacity: 0.8; /* Slightly transparent */
    transition: all 0.3s ease; /* Smooth hover */
}

/* Badge hover effect */
.trust-badges img:hover {
    filter: grayscale(0%); /* Full color */
    opacity: 1; /* Fully visible */
    transform: translateY(-2px); /* Lift effect */
}

/* Badge caption */
.trust-badges small {
    display: block;
    text-align: center; /* Center text */
    margin-top: 0.5rem; /* Space above */
    font-size: 0.8rem; /* Small text */
    color: var(--bs-gray); /* Gray color */
    position: relative;
    padding-top: 0.5rem; /* Space above line */
}

/* Caption divider line */
.trust-badges small::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25%; /* Start position */
    right: 25%; /* End position */
    height: 1px; /* Thin line */
    background-color: var(--bs-white); /* White line */
}

/* Price container */
.portfolio-price {
    margin: 1.5rem 0; /* Vertical spacing */
    display: flex;
    align-items: center; /* Center vertically */
    gap: 15px; /* Space between elements */
}

/* Current price */
.current-price {
    font-size: 2rem; /* Large text */
    font-weight: 800; /* Extra bold */
    color: var(--bs-dark); /* Dark color */
}

/* Original price */
.original-price {
    font-size: 1.2rem; /* Medium text */
    color: var(--bs-gray); /* Gray color */
    text-decoration: line-through; /* Strikethrough */
}

/* Discount badge */
.discount-badge {
    background: var(--bs-success); /* Green background */
    color: var(--bs-white); /* White text */
    padding: 3px 10px; /* Inner spacing */
    border-radius: 5px; /* Slightly rounded */
    font-weight: 600; /* Semi-bold */
    font-size: 0.9rem; /* Small text */
}

/* Action buttons container */
.portfolio-actions {
    display: flex;
    gap: 15px; /* Space between buttons */
    margin: 2rem 0; /* Vertical spacing */
}

/* Section title styling */
.section-title {
    font-weight: 700; /* Bold */
    color: var(--bs-dark); /* Dark color */
    margin-bottom: 1.5rem; /* Space below */
    position: relative;
    padding-bottom: 10px; /* Space for underline */
}

/* Title underline */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px; /* Short line */
    height: 3px; /* Thick line */
    background: var(--bs-dark); /* Dark color */
}

/* Feature list */
.feature-list {
    list-style: none; /* No bullets */
    padding: 0; /* Remove default */
}

/* Feature list items */
.feature-list li {
    padding: 8px 0; /* Vertical spacing */
    font-size: 1rem; /* Normal text */
    color: var(--bs-gray); /* Gray color */
}


/* 
 * Footer Section
 * ==============
 * Site footer with navigation and social links
 */

.footer {
    color: var(--bs-white); /* White text */
    padding: 50px 0; /* Vertical padding */
    text-align: left; /* Left-aligned */
    position: relative;
    overflow: hidden; /* Hide overflow */
}

/* Footer section titles */
.footer .caption {
    font-size: 1.2rem; /* Slightly larger */
    font-weight: 600; /* Semi-bold */
    margin-bottom: 15px; /* Space below */
}

/* Footer lists */
.footer ul {
    padding: 0; /* Remove default */
    list-style: none; /* No bullets */
}

/* List items */
.footer ul li {
    margin-bottom: 10px; /* Space between items */
}

/* Footer links */
.footer ul li a {
    color: var(--bs-white); /* White text */
    text-decoration: none; /* No underline */
    transition: color 0.3s ease; /* Smooth hover */
}

/* Light border color */
.footer .border-light {
    border-color: rgba(255, 255, 255, 0.2); /* Semi-transparent */
}

/* Small text elements */
.footer .small {
    font-size: 0.8rem; /* Small text */
}

/* Social media icons */
.footer .social-icons a {
    font-size: 1.25rem; /* Icon size */
    transition: transform 0.3s ease; /* Smooth hover */
}

/* Social icon hover */
.footer .social-icons a:hover {
    transform: scale(1.2); /* Slight grow */
    color: var(--bs-gray-dark); /* Darker color */
}

/* Back-to-top button */
.scroll-to-top {
    text-align: center; /* Center content */
}

/* Triangle arrow */
.triangle-up {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 20px solid transparent; /* Left side */
    border-right: 20px solid transparent; /* Right side */
    border-bottom: 30px solid var(--bs-white); /* White triangle */
    transition: transform 0.3s ease; /* Smooth hover */
}

/* Hover effect */
.triangle-up:hover {
    transform: translateY(-5px); /* Move up */
    border-bottom-color: var(--bs-gray-dark); /* Darker color */
}