/*
Theme Name: AhmedJhuma Theme latest all
Theme URI: https://example.com
Author: Trae AI
Description: A WordPress theme converted from React LinkUp app.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ahmedjhuma
*/

/* Custom Properties from index.css */
:root {
    --background: 210 20% 98%;
    --foreground: 215 25% 15%;

    --card: 0 0% 100%;
    --card-foreground: 215 25% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 15%;

    --primary: 210 100% 50%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 96%;
    --secondary-foreground: 215 25% 25%;

    --muted: 210 30% 94%;
    --muted-foreground: 215 15% 50%;

    --accent: 30 100% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 210 25% 90%;
    --input: 210 25% 90%;
    --ring: 210 100% 50%;

    --radius: 0.75rem;

    /* Custom colors */
    --ocean-start: 200 100% 50%;
    --ocean-end: 210 100% 40%;
    --coral: 15 90% 58%;
    --sky: 195 100% 95%;
    --navy: 215 50% 20%;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(200, 100%, 50%), hsl(210, 100%, 40%));
    --gradient-accent: linear-gradient(135deg, hsl(30, 100%, 55%), hsl(15, 90%, 58%));
    --gradient-hero: linear-gradient(180deg, hsl(195, 100%, 95%) 0%, hsl(210, 20%, 98%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(0, 0%, 100%) 0%, hsl(210, 40%, 98%) 100%);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px -2px hsl(215 25% 15% / 0.08);
    --shadow-md: 0 8px 24px -4px hsl(215 25% 15% / 0.12);
    --shadow-lg: 0 16px 48px -8px hsl(215 25% 15% / 0.16);
    --shadow-glow: 0 0 40px -10px hsl(210 100% 50% / 0.4);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', system-ui, sans-serif;
}

/* Utilities */
.gradient-primary {
    background: var(--gradient-primary);
}

.gradient-accent {
    background: var(--gradient-accent);
}

.gradient-hero {
    background: var(--gradient-hero);
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-glow {
    box-shadow: var(--shadow-glow);
}

/* Animations */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 6s ease-in-out 2s infinite;
}

.animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Custom Logo Styles */
.custom-logo-link img {
    max-height: 40px;
    width: auto;
}

footer .custom-logo-link img {
    max-height: 48px;
    width: auto;
}

/* Video Section Styles */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container embed,
.video-container object,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.aspect-video.video-container {
    padding-bottom: 0; /* Override the padding if aspect-video is used */
    height: auto;
    position: relative;
}

.aspect-video.video-container iframe,
.aspect-video.video-container embed,
.aspect-video.video-container object,
.aspect-video.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}