@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');
/* ==========================================================================
1. GLOBAL VARIABLES (CSS CUSTOM PROPERTIES)
========================================================================== */
:root {
    /* Colors */
    --color-white: #ffffff; /* Blue */
    --color-primary: #007bff; /* Blue */
    --color-secondary: #6c757d; /* Gray */
    --color-success: #28a745; /* Green */
    --color-danger: #dc3545; /* Red */
    --color-warning: #ffc107; /* Yellow */
    --color-light: #f8f9fa;
    --color-dark: #343a40;
    --color-text: #212529;
    --color-background: #ffffff;
    /* Typography */
    --font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-heading: 'Georgia', serif;
    --font-size-base: 1rem; /* 16px default */
    --line-height-base: 1.5;
    /* Spacing */
    --spacing-unit: 0.5rem; /* Base unit for scaling */
    --space-xs: calc(var(--spacing-unit) * 0.5); /* 4px */
    --space-sm: var(--spacing-unit); /* 8px */
    --space-md: calc(var(--spacing-unit) * 2); /* 16px */
    --space-lg: calc(var(--spacing-unit) * 3); /* 24px */
    --space-xl: calc(var(--spacing-unit) * 4); /* 32px */
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    /* Transition */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;
}

/* ==========================================================================
2. CSS RESET / FIXES
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box; /* The essential box-model fix */
}

html {
    line-height: var(--line-height-base);
    -webkit-text-size-adjust: 100%; /* Prevent font size inflation on mobile */
    scroll-behavior: smooth; /* Smooth scrolling for anchor links */
    height: 190%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-background);
    background-color: rgb(12, 15, 56);
}

:target {
    scroll-margin-top: 50px;
}

#main {
    padding-top:150px;
}

footer {
    background-color: rgb(43, 80, 148);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    margin-top: 0;
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

img {
max-width: 100%;
height: auto;
display: block; /* Removes baseline space below images */
}

/* Remove list styles for navigation and utility lists */
ul:where([class]),
ol:where([class]) {
list-style: none;
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: var(--color-white);
}

a:hover {
    text-decoration: none;
    color: orange;
}

/* ==========================================================================
3. "MIXINS" (UTILITY & COMPONENT CLASSES)
========================================================================== */

/* Pseudo-Mixin: Centering (Flexbox) */
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}

/* Pseudo-Mixin: Element Shadow (Simple) */
.shadow-md {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
}

/* Pseudo-Mixin: Hide Element Visually but keep for screen readers */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}

/* 1. Base Styles for Shrinking */
/* Apply the transition property directly to the bar items */
.w3-bar-item {
    margin: 0 10px; /* Ensure no margin interferes with padding */
    transition: padding 0.5s ease-in-out; /* Increased duration to 0.5s for smoothness */
}

/* 2. Initial State (Large) */
.w3-bar.w3-padding-large .w3-bar-item {
    /* This ensures the initial size is the W3.CSS default */
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* 3. Shrunken State (Applied by JavaScript) */
.w3-bar.w3-shrunk .w3-bar-item {
    /* Smaller padding when the 'w3-shrunk' class is active */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
/* 2. The crucial fix: Target the hover state */
.w3-button:hover,
.w3-bar-item:hover,
.w3-bar-item:hover a {
    /* Use !important if W3.CSS is being stubborn, but try without first */
    text-decoration: none !important;
    color: darkorange !important; /* Sets the text color to blue on hover */
}

/* 1. Base Styles & Transition */
.logo {
    /* Set a transition for the height property */
    transition: height 0.5s ease-in-out, width 0.5s ease-in-out;
    height: 30px; /* Initial (Large) height */
    width: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Helps align image with text */
}

/* 2. Shrunken State (Applied when the 'w3-shrunk' class is active) */
/* When the parent bar has the 'w3-shrunk' class, apply a smaller size to the logo */
#myNavbar.w3-shrunk .logo {
    height: 25px; /* Shrunken height */
}

/* 3. Shrunken State: Background Color and Sizing */
#myNavbar.w3-shrunk {
    /* CHANGE THIS TO YOUR DESIRED SHRINK COLOR */
    background-color: rgb(12, 15, 56) !important; /* Example: Dark Gray */
}

.hero h1 {
    font-family: "TikTok Sans", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 5rem;
    line-height: 1;
}
.hero h6 {
    font-family: "TikTok Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 3rem;
}

#services {
    height: auto;
    margin-top: -100px;
}
/* 1. Container Styling */
.video-container {
    /* Set the desired height and width for the background section */
    min-height: 100vh; /* Example: 50% of the viewport height */
    height: auto;
    width: 100%;
    margin-top: -150px;
    position: relative; /* Essential for positioning the video and content */
    overflow: hidden; /* Clips any part of the video that extends past the container */
}

/* 3. Video Positioning (The Core Background Fix) */
.video-container video {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Use CSS transform to center the video */
    transform: translate(-50%, -50%);
    /* Set min-width and min-height to ensure the video always covers the container */
    width: 100%;
    height: 50%;
    z-index: -1; /* Video layer */
}

/* 3. Content Styling */
.video-content {
    position: relative;
    z-index: 2; /* Ensures the content sits on top of the video */
    /* Optional: Center the content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Ensure content takes full container height for centering */
    height: 100%;
    /* Optional: Improve text readability */
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    padding: 20px;
}

.blogs {
    width: 100%;
    height: 350px;
}

.center-image {
    /* Set a custom width so it doesn't fill the parent column */
    width: 20% !important;
    /* Essential: Change to display block if not already */
    display: block;
    /* Essential: Center the block element horizontally */
    margin-left: auto;
    margin-right: auto;
}

/* 1. Base Transition: Apply transition to the element you want to animate */
.w3-panel.w3-card {
    /* Set a transition on the 'transform' property for smooth animation */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* Optional: Ensure the card has its own stacking context for better scaling */
    will-change: transform;
}

    /* 2. Hover State: Apply the scaling and a subtle shadow lift */
    .w3-panel.w3-card:hover {
        /* Scale the card up by 3% (1.03) */
        transform: scale(1.03);
        /* Optional: Increase the shadow depth to make it look like it's lifting */
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
        /* Ensure the card doesn't jump when the shadow changes */
        z-index: 10;
    }

/* --- (Other styles like center-image, etc., go here) --- */
.center-image {
    width: 20% !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}