/*
Theme Name: Shoyib Portfolio
Theme URI: https://shoyibhasan.com
Author: Shoyib Hasan
Author URI: https://shoyibhasan.com
Description: A custom portfolio theme for Shoyib Hasan converted from static HTML.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shoyib-portfolio
*/

/* 
====================================================================
   THEME: GLASS CARDS - MODERN UI (FIXED LAYOUT)
   AUTHOR: SHOYIB HASAN PORTFOLIO
==================================================================== 
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

:root {
    /* Colors */
    --bg-dark: #050505;
    --bg-gradient: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    --bg-mesh: radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
               radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
               radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
    
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: 1px solid rgba(255, 255, 255, 0.08);
    --card-hover: rgba(255, 255, 255, 0.08);
    
    --text-white: #ffffff;
    --text-light: #b3b3b3;
    --accent: #00d2ff;
    --accent-glow: rgba(0, 210, 255, 0.4);
    
    /* Layout */
    --container-width: 1200px;
    --header-height: 80px;
    --radius: 16px;
    
    /* Font */
    --font-main: 'Inter', sans-serif;
    --font-heading: 'Rajdhani', sans-serif;
}

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: #0f0c29;
    background-image: var(--bg-mesh);
    background-attachment: fixed;
    background-size: cover;
    color: var(--text-white);
    font-family: var(--font-main);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* UTILITIES */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    padding: 100px 0;
    position: relative;
}

/* Proper Centering for Section Titles */
.section-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 auto 60px;
    text-align: center;
    color: var(--text-white);
    text-shadow: 0 0 20px rgba(0, 210, 255, 0.3);
    
    /* Decorative underline */
    position: relative;
    width: fit-content;
    display: table; /* Keeps it centered properly */
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
    box-shadow: 0 0 10px var(--accent);
}

/* CARD SYSTEM */
.card-style {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--card-border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease, box-shadow 0.3s ease; /* Optimized for tilt */
    transform-style: preserve-3d;
    will-change: transform;
}

.card-style:hover {
    /* transform handled by JS now for 3D tilt */
    background: var(--card-hover);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.4);
}

/* BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-family: var(--font-heading);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    transition: 0.3s;
    cursor: pointer;
}

.btn-primary {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 20px var(--accent-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px var(--accent-glow);
    background: #33dbff;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.btn-outline:hover {
    background: var(--accent);
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 0 20px var(--accent-glow);
}

/* HEADER & NAV */
.navbar {
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(15, 12, 41, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    transition: 0.3s ease;
}

.nav-container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-white);
    letter-spacing: 1px;
    transition: 0.3s;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
}

.logo:hover {
    color: var(--accent);
    text-shadow: 0 0 20px var(--accent-glow);
    transform: scale(1.05);
}

.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-links a:not(.btn-primary) {
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 500;
    position: relative;
    padding: 5px 0;
    transition: 0.3s;
}

.nav-links a:not(.btn-primary)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--accent);
}

.nav-links a:not(.btn-primary):hover {
    color: var(--text-white);
}

.nav-links a:not(.btn-primary):hover::after,
.nav-links a:not(.btn-primary).active::after {
    width: 100%;
}

/* Specific style for the Contact Me button in navbar */
.nav-links .btn-primary {
    padding: 10px 24px;
    font-size: 0.9rem;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--accent), #00aaff);
    color: #000;
    font-weight: 600;
    box-shadow: 0 0 15px var(--accent-glow);
    transition: 0.3s;
}

.nav-links .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px var(--accent-glow);
    background: linear-gradient(90deg, #33dbff, var(--accent));
}

/* Language Switcher */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
}

.lang-btn {
    cursor: pointer;
    color: var(--text-light);
    transition: 0.3s;
    padding: 2px 5px;
}

.lang-btn:hover {
    color: var(--accent);
}

.lang-btn.active {
    color: var(--accent);
    text-shadow: 0 0 10px var(--accent-glow);
    border-bottom: 2px solid var(--accent);
}

.divider {
    color: rgba(255, 255, 255, 0.3);
}

.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--text-white);
    transition: 0.3s;
}

/* HERO SECTION */
.hero {
    min-height: 100vh;
    padding-top: var(--header-height);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 60px;
    width: 100%;
}

.hero-content {
    /* Using Card Style logic but without background for cleaner look */
    padding: 20px 0;
}

.hero-content h1 {
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.hero-content h1 span {
    background: linear-gradient(120deg, var(--accent) 0%, #fff 50%, var(--accent) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 3s linear infinite;
    text-shadow: 0 0 20px rgba(0, 210, 255, 0.3);
    display: inline-block;
}

@keyframes textShine {
    to {
        background-position: 200% center;
    }
}

.hero-content p {
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 40px;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
}

/* Hero Image & HUD Effect */
.hero-image {
    display: flex;
    justify-content: center;
    position: relative;
}

.profile-img-container {
    width: 380px;
    height: 380px;
    position: relative;
    z-index: 2;
}

.profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--accent);
    box-shadow: 0 0 50px var(--accent-glow);
    position: relative;
    z-index: 2;
}

/* Rotating HUD Circle behind profile */
.profile-img-container::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 2px dashed rgba(0, 210, 255, 0.3);
    border-radius: 50%;
    animation: rotate 20s linear infinite;
    z-index: 1;
}

.profile-img-container::after {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    border: 2px solid rgba(0, 210, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: rotate-rev 15s linear infinite;
    z-index: 1;
}

/* ABOUT SECTION REDESIGN */
.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: start;
}

.about-bio {
    padding: 40px;
    position: relative;
    border-left: 4px solid var(--accent);
}

.about-bio h3 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--text-white);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.about-bio h3::before {
    content: '';
    width: 30px;
    height: 2px;
    background: var(--accent);
}

.about-bio p {
    margin-bottom: 20px;
    font-size: 1.05rem;
    color: var(--text-light);
    text-align: justify;
}

.bio-highlight {
    background: rgba(0, 210, 255, 0.05);
    border-left: 2px solid var(--accent);
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-top: 30px;
}

.bio-highlight p {
    margin-bottom: 0;
    color: var(--text-white);
    font-style: italic;
}

/* Right Column */
.about-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.philosophy-card {
    position: relative;
    padding: 30px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.2) 100%);
}

.philosophy-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 15px;
}

.philosophy-card p {
    font-size: 0.95rem;
    color: var(--text-light);
}

.card-glow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    background: var(--accent);
    filter: blur(60px);
    opacity: 0.4;
    border-radius: 50%;
}

/* Attributes Grid */
.key-attributes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.attribute-box {
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 25px 15px;
    border-radius: 12px;
    text-align: center;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

.attribute-box:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.attribute-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: translateX(-100%);
    transition: 0.5s;
}

.attribute-box:hover::before {
    transform: translateX(100%);
}

.attribute-box i {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 15px;
    display: block;
}

.attribute-box span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-white);
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 968px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .about-bio {
        padding: 30px;
    }
}

/* SKILLS & SERVICES GRID */
.skills-grid, .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.skill-category, .service-card {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: var(--card-border);
    border-radius: var(--radius);
    padding: 32px;
    transition: 0.3s;
    height: 100%;
}

.skill-category:hover, .service-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.skill-category h3, .service-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 12px;
}

.skill-list li, .service-card ul li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-light);
}

.skill-list li i, .service-card ul li::before {
    color: var(--accent);
}

.service-card ul li::before {
    content: '▹';
    font-weight: bold;
}

.icon-box {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 20px;
}

.platform-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.platform-item {
    background: rgba(255,255,255,0.05);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* MY TEAM SECTION REDESIGN */
.team-grid-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 30px;
}

/* Main Card */
.team-main-card {
    grid-column: 1 / -1;
    background: linear-gradient(145deg, rgba(0, 210, 255, 0.1), rgba(255,255,255,0.02));
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: var(--radius);
    padding: 40px;
    display: flex;
    gap: 30px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.team-main-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 5px; height: 100%;
    background: var(--accent);
    box-shadow: 0 0 15px var(--accent);
}

.team-logo-container {
    width: 160px;
    height: 160px;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.team-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--accent);
    box-shadow: 0 0 30px var(--accent-glow);
    position: relative;
    z-index: 2;
    background: #000;
}

/* Rotating rings for team logo (Mini version of Profile HUD) */
.team-logo-container::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px dashed rgba(0, 210, 255, 0.3);
    border-radius: 50%;
    animation: rotate 20s linear infinite;
    z-index: 1;
}

.team-logo-container::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 2px solid rgba(0, 210, 255, 0.1);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: rotate-rev 15s linear infinite;
    z-index: 1;
}

/* Responsive adjustment for team logo */
@media (max-width: 968px) {
    .team-logo-container {
        width: 140px;
        height: 140px;
        margin-bottom: 20px;
    }
}

.team-main-content h3 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-white);
    margin-bottom: 15px;
}

.team-main-content p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 20px;
}

.team-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: var(--accent);
    color: #000;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 0 20px var(--accent-glow);
}

/* Role & Values Cards */
.team-role-card, .team-values-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--radius);
    padding: 30px;
    transition: 0.3s;
    grid-column: span 1; /* Default span */
}

/* Adjust grid for cards */
.team-grid-layout {
    grid-template-columns: 1fr 1fr;
}
.team-main-card { grid-column: 1 / -1; }

.card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

.card-header i {
    font-size: 1.8rem;
    color: var(--accent);
}

.card-header h4 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin: 0;
}

/* Role List */
.role-details h5 {
    font-size: 1.2rem;
    color: var(--accent);
    margin-bottom: 15px;
}

.role-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 1rem;
    color: var(--text-light);
}

.role-list li i {
    color: var(--accent);
}

/* Values Grid */
.values-grid-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.value-box {
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
    border: 1px solid transparent;
}

.value-box:hover {
    background: rgba(0, 210, 255, 0.1);
    border-color: var(--accent);
    transform: translateY(-3px);
}

.value-box i {
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 8px;
    display: block;
}

.value-box span {
    font-size: 0.9rem;
    font-weight: 600;
}

/* WHY CHOOSE ME SECTION */
.choose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.choose-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: var(--radius);
    padding: 30px;
    text-align: center;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.choose-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(0, 210, 255, 0.15);
}

.choose-icon {
    width: 70px;
    height: 70px;
    background: rgba(0, 210, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 20px;
    transition: 0.3s;
}

.choose-card:hover .choose-icon {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 20px var(--accent-glow);
}

.choose-card h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--text-white);
}

.choose-card p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* Highlight Card (WhatsApp) */
.choose-card.highlight-card {
    border-color: rgba(37, 211, 102, 0.3); /* WhatsApp Green hint */
    background: linear-gradient(145deg, rgba(37, 211, 102, 0.05), rgba(0, 0, 0, 0));
}

.choose-card.highlight-card:hover {
    border-color: #25D366;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.2);
}

.choose-card.highlight-card .choose-icon {
    color: #25D366;
    background: rgba(37, 211, 102, 0.1);
}

.choose-card.highlight-card:hover .choose-icon {
    background: #25D366;
    color: #fff;
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.5);
}

/* EXPERIENCE & CLIENTS */
.experience-section {
    position: relative;
}

.experience-content {
    max-width: 1000px;
    margin: 0 auto;
}

.experience-grid-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.characteristic-card {
    text-align: center;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.characteristic-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease;
}

.characteristic-card:hover::after {
    transform: scaleX(1);
}

.char-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 20px;
    transition: 0.3s;
}

.characteristic-card:hover .char-icon {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 20px var(--accent-glow);
    transform: rotateY(360deg);
}

.characteristic-card h4 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 12px;
    color: var(--text-white);
}

.characteristic-card p {
    font-size: 1rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* Why Trust Me Card (Spans Full Width) */
.trust-card {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px 50px;
    background: linear-gradient(145deg, rgba(0, 210, 255, 0.05), rgba(255,255,255,0.02));
    border: 1px solid rgba(0, 210, 255, 0.15);
}

.trust-header {
    flex-shrink: 0;
    text-align: center;
    width: 200px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 40px;
}

.trust-icon-large {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px var(--accent-glow));
}

.trust-header h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--text-white);
}

.trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
    width: 100%;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

.trust-item:hover {
    background: rgba(0, 210, 255, 0.1);
    border-color: var(--accent);
    transform: translateX(5px);
}

.trust-item i {
    color: var(--accent);
    font-size: 1.2rem;
}

.trust-item span {
    font-size: 1.05rem;
    color: var(--text-light);
    font-weight: 500;
}

@media (max-width: 968px) {
    .experience-grid-layout {
        grid-template-columns: 1fr;
    }
    
    .trust-card {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 30px;
    }

    .trust-header {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0;
        padding-bottom: 20px;
        width: 100%;
    }

    .trust-grid {
        grid-template-columns: 1fr;
    }
}

/* CLIENTS MARQUEE (Infinite Scroll) */
.clients-section {
    padding: 80px 0;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Crucial for marquee */
}

.clients-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slide-track {
    display: flex;
    width: max-content;
    /* animation: scroll 40s linear infinite; */ /* Disabled for JS control */
    align-items: center;
    padding: 50px 0; /* Space for scaling */
    will-change: transform;
}

.slide-track:hover {
    /* animation-play-state: paused; */
}

.client-slide {
    width: 250px;
    padding: 20px;
    margin: 0 20px;
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: 12px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.1s ease-out, border-color 0.3s, box-shadow 0.3s;
    /* transform-origin: center center; */
}

.client-avatar {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent);
    overflow: hidden; /* Ensure image stays within circle */
}

.client-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* JOURNEY SECTION */
.journey-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.journey-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.journey-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.journey-card:hover::before {
    transform: scaleX(1);
}

.journey-icon {
    width: 60px;
    height: 60px;
    background: rgba(0, 210, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 1.5rem;
    color: var(--accent);
    border: 1px solid rgba(0, 210, 255, 0.2);
    transition: 0.3s;
}

.journey-card:hover .journey-icon {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 20px var(--accent-glow);
    transform: rotateY(180deg);
}

.journey-card h3 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--text-white);
}

.journey-card p {
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.7;
}

.journey-list {
    list-style: none;
    padding: 0;
}

.journey-list li {
    display: flex;
    align-items: start;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--text-light);
    font-size: 0.95rem;
}

.journey-list li i {
    color: var(--accent);
    margin-top: 4px;
    font-size: 0.9rem;
}

/* CONTACT */
.contact-wrapper {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.contact-intro-text p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.contact-card-item {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: var(--card-border);
    border-radius: var(--radius);
    padding: 30px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.contact-card-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.email-icon { background: rgba(255, 193, 7, 0.1); color: #ffc107; }
.whatsapp-icon { background: rgba(37, 211, 102, 0.1); color: #25d366; }
.messenger-icon { background: rgba(0, 132, 255, 0.1); color: #0084ff; }

.contact-card-item:hover .email-icon { background: #ffc107; color: #000; box-shadow: 0 0 15px rgba(255, 193, 7, 0.4); }
.contact-card-item:hover .whatsapp-icon { background: #25d366; color: #fff; box-shadow: 0 0 15px rgba(37, 211, 102, 0.4); }
.contact-card-item:hover .messenger-icon { background: #0084ff; color: #fff; box-shadow: 0 0 15px rgba(0, 132, 255, 0.4); }

.contact-details {
    flex-grow: 1;
}

.contact-details h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--text-white);
    margin-bottom: 5px;
}

.contact-details span {
    font-size: 0.9rem;
    color: var(--text-light);
}

.arrow-icon {
    color: var(--text-light);
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s;
}

.contact-card-item:hover .arrow-icon {
    opacity: 1;
    transform: translateX(0);
    color: var(--accent);
}

.social-links-container h4 {
    font-family: var(--font-heading);
    color: var(--text-white);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.social-icons a {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-light);
    transition: 0.3s;
}

.social-icons a:hover {
    background: var(--accent);
    color: #000;
    transform: translateY(-5px);
    box-shadow: 0 0 20px var(--accent-glow);
}

/* FOOTER */
footer {
    background: #050505;
    padding: 30px 0;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.social-link {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    border: 1px solid rgba(255,255,255,0.1);
}

.social-link:hover {
    background: var(--accent);
    color: #000;
    transform: translateY(-5px);
}

/* ANIMATIONS */
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate-rev {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Assumes track is doubled */
}

/* RESPONSIVE DESIGN */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 968px) {
    /* General Mobile Layout Fixes */
    .container {
        padding: 0 24px; /* More breathing room */
    }

    .section {
        padding: 60px 0; /* Reduced vertical padding */
    }

    /* Hero Section */
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
        padding-top: 100px; /* Space for fixed header */
    }

    .hero-content {
        order: 2; /* Image first on mobile? No, let's keep text first for SEO/Context or adjust if needed. Standard is Image Top or Text Top. Let's stick to Text Top for now as per design unless user asked. Actually, usually Image top looks better for profiles. Let's try Image Top for mobile */
        order: 2;
    }

    .hero-image {
        order: 1;
        margin-bottom: 20px;
    }

    .hero-content h1 { 
        font-size: 2.8rem; 
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .hero-content p {
        font-size: 1.1rem;
        max-width: 500px;
        margin: 0 auto 30px;
    }

    .hero-buttons { 
        justify-content: center; 
        gap: 20px;
    }
    
    .profile-img-container {
        width: 280px;
        height: 280px;
        margin: 0 auto;
        border-width: 3px; /* Slightly thinner border */
    }

    /* Grids to Single Column */
    .about-grid, 
    .contact-grid,
    .work-characteristics,
    .team-grid-layout,
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* Trust Section Mobile */
    .trust-card {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        padding: 30px 20px;
    }

    .trust-header {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0;
        padding-bottom: 25px;
        width: 100%;
    }

    /* Team Section Mobile */
    .team-main-card {
        flex-direction: column;
        text-align: center;
        padding: 40px 20px;
    }
    
    .team-logo-container {
        margin: 0 auto 25px;
    }
    
    .team-badge {
        margin: 15px auto 0;
    }

    /* Navigation Mobile */
    .hamburger { 
        display: block; 
        z-index: 1001;
        font-size: 1.6rem;
        color: var(--text-white);
        cursor: pointer;
    }
    
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: auto;
        max-width: none;
        background: rgba(15, 12, 41, 0.98);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        
        /* Single Line Horizontal Scroll */
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        
        padding: 15px 20px;
        gap: 12px;
        
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        
        /* Hidden State */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        
        /* Hide Scrollbar */
        scrollbar-width: none; /* Firefox */
    }
    
    .nav-links::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .nav-links li {
        flex: 0 0 auto; /* Ensure list items don't shrink */
        display: flex;
        align-items: center;
    }

    .nav-links.active { 
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links a:not(.btn-primary) {
        font-size: 0.95rem;
        width: auto;
        min-width: 80px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.05);
        padding: 10px 15px;
        border-radius: 50px; /* Pill shape */
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Contact Button - Inline now */
    .nav-links .btn-primary {
        width: auto;
        margin-top: 0;
        padding: 10px 20px;
        font-size: 0.9rem;
        white-space: nowrap;
    }

    /* Card Tweaks */
    .card-style {
        padding: 25px;
    }
}

@media (max-width: 480px) {
    .section-title { font-size: 2rem; margin-bottom: 40px; }
    .hero-content h1 { font-size: 2.2rem; }
    
    .btn { 
        padding: 12px 28px; 
        font-size: 0.9rem; 
        width: 100%; /* Full width buttons on small screens */
        max-width: 300px;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .profile-img-container {
        width: 240px;
        height: 240px;
    }

    .clients-slider {
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }
}