/* Reset default browser styles */
*{
    margin:0; /* Remove default margins */
    padding:0; /* Remove default padding */
    box-sizing:border-box; /* Include padding and border in element's total width and height */
    font-family: Arial, Helvetica, sans-serif; /* Set default font family */
}


/* ============================= */
/* THEME COLORS */
/* ============================= */

:root{
--bg-color:#ffffff;
/* Light mode background */
--text-color:#111111;
/* Light mode text */
--card-bg:#f5f5f5;
/* Light mode cards */
}

/* Dark Mode */
body.dark-mode{
--bg-color:#0b0b0b;
/* Dark background */
--text-color:#ffffff;
/* White text */
--card-bg:#1a1a1a;
/* Dark cards */
}

/* Body styling */

body{
    background:#f7f7f7; /* Light neutral background for the full page */
    color:#111; /* Dark text for readability */
    font-family: Arial, Helvetica, sans-serif; /* Set font family */
    line-height:1.6; /* Set line height for readability */
}

html{
    scroll-behavior:smooth; /* Enable smooth scrolling */
}

/* ============================= */
/* Loading Screen */
/* ============================= */
#loader{
position:fixed; /* Fixed position covers entire screen */
width:100%; /* Full width */
height:100%; /* Full height */
background:#ffffff; /* Light background for loader */
display:flex; /* Flexbox for centering */
justify-content:center; /* Center horizontally */
align-items:center; /* Center vertically */
z-index:9999; /* High z-index to stay on top */
}

.spinner{
width:50px; /* Spinner width */
height:50px; /* Spinner height */
border:5px solid rgba(0,0,0,0.1); /* Light border color */
border-top:5px solid #00bcd4; /* Top border color for animation */
border-radius:50%; /* Make it circular */
animation:spin 1s linear infinite; /* Apply spinning animation */
}

@keyframes spin{ /* Define spinning animation */
0%{transform:rotate(0deg);} /* Start rotation */
100%{transform:rotate(360deg);} /* End rotation */
}
/* ====================================================== */


/* =============================
Custom Cursor Animation (Premium Feel)
================================ */
.cursor{
    position:fixed; /* Fixed position follows mouse */
    width:15px; /* Cursor width */
    height:15px; /* Cursor height */
    /* background:#00bcd4; */ /* Commented out background */
    border-radius:50%; /* Make it circular */
    pointer-events:none; /* Don't interfere with clicks */
    z-index:9999; /* High z-index */
    transition:0.1s; /* Smooth transitions */
}


/* Prevent horizontal scrolling on mobile */
html, body{
    overflow-x: hidden; /* Prevent horizontal scroll */
    /* Prevents page from sliding left/right on mobile */
    scroll-behavior:smooth; /* Smooth scrolling when clicking navigation links */
}

/* ============================= */
/* Sticky Navbar */
/* ============================= */
header{
    position:fixed; /* Always fixed at top */
    top:0; /* Stick to very top */
    width:100%; /* Full width */
    background:rgba(255,255,255,0.95); /* Light translucent navbar */
    backdrop-filter:blur(16px); /* Blur effect */
    box-shadow:0 12px 35px rgba(0,0,0,0.08); /* Soft shadow for depth */
    border-bottom:1px solid rgba(0,0,0,0.08); /* Subtle border */
    z-index:1000; /* Keep above content */
}

/* Navigation styling */
nav{
    display:flex; /* Places items in one row */
    justify-content:space-between; /* Space between logo and menu */
    align-items:center; /* Align vertically */
    max-width:1200px; /* Maximum width */
    margin:0 auto; /* Center horizontally */
    padding:0 10px; /* Padding left and right */
}

/* ============================= */




/* ============================= */
/* PROFESSIONAL MOBILE MENU */
/* ============================= */
.menu-toggle{
display:none;
/* Hide hamburger on desktop */
width:35px;
/* Width of hamburger */
height:30px;
/* Height of hamburger */
position:relative;
/* Needed for absolute positioning of lines */
cursor:pointer;
/* Mouse pointer effect */
z-index:1001;
/* Keeps menu above other elements */
}

/* Hamburger Lines */
.menu-toggle span{
position:absolute;
/* Allows free positioning */
width:100%;
/* Full width line */
height:4px;
/* Thickness of line */
background: var(--text-color);
/* Line color */
border-radius:5px;
/* Smooth rounded lines */
transition:0.4s ease;
/* Smooth animation */
left:0;
/* Align left */
}

/* Top Line */
.menu-toggle span:nth-child(1){
top:0;
}

/* Middle Line */
.menu-toggle span:nth-child(2){
top:12px;
}
/* Bottom Line */
.menu-toggle span:nth-child(3){
top:24px;
}

/* ============================= */
/* ACTIVE MENU ANIMATION */
/* ============================= */
/* Rotate Top Line */
.menu-toggle.active span:nth-child(1){
transform:rotate(45deg);
/* Rotate line */
top:12px;
/* Move to center */
}

/* Hide Middle Line */
.menu-toggle.active span:nth-child(2){
opacity:0;
/* Make invisible */
}

/* Rotate Bottom Line */
.menu-toggle.active span:nth-child(3){

transform:rotate(-45deg);
/* Rotate opposite */

top:12px;
/* Move to center */
}

/* Smooth icon transformation */
.menu-toggle.active span{
background:#00bcd4;
/* Accent color when active */
}

.menu-toggle:hover {
    background: rgba(255,255,255,1);
    color: #00bcd4;
    transform: scale(1.1);
}

@media(max-width:768px) {
    .menu-toggle {
        display: block;
    }
}




/* ============================= */
/* Dark Mode Toggle */
/* ============================= */
.dark-mode-toggle{
cursor:pointer; /* Shows pointer cursor */
font-size:22px; /* Icon size */
color:#333; /* Icon color in light mode */
margin-left:20px; /* Space from menu */
transition:color 0.3s ease; /* Smooth color transition */
}

.dark-mode-toggle:hover{
color:#00bcd4; /* Cyan on hover */
}

/* Dark mode styles */
body.dark-mode{
background:#0f0f0f; /* Slightly lighter dark background for readability */
color:#e0e0e0; /* Light gray text for better readability */
}

/* Navbar dark mode */
body.dark-mode nav{
background:rgba(20, 20, 20, 0.95); /* Slightly lighter dark navbar with transparency */
backdrop-filter:blur(16px); /* Better blur effect */
border-bottom-color:rgba(255,255,255,0.1); /* Light border in dark mode */
}

/* Navigation links in dark mode */
body.dark-mode nav ul li a{
color:#e0e0e0; /* Light text for nav links */
transition:0.3s ease; /* Smooth transition */
}

body.dark-mode nav ul li a:hover{
color:#00bcd4; /* Cyan on hover */
}

body.dark-mode nav ul li a.nav-active{
color:#00bcd4; /* Cyan for active link */
}

/* Logo in dark mode */
body.dark-mode .logo{
color:#e0e0e0; /* Light text for logo */
}

/* Section dark mode */
body.dark-mode section{
background:#0f0f0f; /* Dark sections */
}

/* Card dark mode */
body.dark-mode .card{
background:#1a1a1a; /* Dark cards */
border-color:rgba(255,255,255,0.1); /* Light border for visibility */
}

body.dark-mode .card:hover{
border-color:#00bcd4; /* Cyan border on hover */
}

/* Headings in dark mode */
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6{
color:#f5f5f5; /* Bright white for headings */
}

/* Services section in dark mode */
body.dark-mode .services h3{
color:#00bcd4; /* Light gray text */
}
body.dark-mode .services p{
color:#d0d0d0; /* Light gray text for dark mode */
}

/* Countdown section in dark mode */
body.dark-mode .counter h2{
color:#00bcd4; /* Light gray text */
}
body.dark-mode .counter p{
color:#d0d0d0; /* Light gray text for dark mode */
}  

/* About section in dark mode */
body.dark-mode .about h2{
color:#00bcd4; /* Light gray text */
}
body.dark-mode .counter-box{
    background:#1a1a1a;
    border-color:rgba(0,188,212,0.25);
}

body.dark-mode .counter-box p{
    color:#b0b0b0;
}

body.dark-mode .about p{
    color:#111; /* Dark text for the white about background in dark mode */
}

/* portfolio section in dark mode */
body.dark-mode .portfolio h2{
color:#ffffff; /* Light gray text */
}
body.dark-mode .portfolio h3,
body.dark-mode .portfolio p{
color:#d0d0d0; /* Light gray text for dark mode */
}


/* Paragraphs in dark mode */
body.dark-mode p{
color:#d0d0d0; /* Light gray text */
}

/* Links in dark mode */
body.dark-mode a{
color:#00bcd4; /* Cyan for links */
}

body.dark-mode a:hover{
color:#fffffff1; /* Darker cyan on hover */
}

/* Buttons in dark mode */
body.dark-mode .btn,
body.dark-mode button{
background:#00bcd4; /* Cyan background */
color:#000; /* Dark text */
border:none; /* No border */
}

body.dark-mode .btn:hover,
body.dark-mode button:hover{
background:#0097a7; /* Darker cyan on hover */
}

/* Form inputs in dark mode */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select{
background:#1a1a1a; /* Dark background */
color:#e0e0e0; /* Light text */
border:1px solid rgba(255,255,255,0.2); /* Light border */
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{
color:#888; /* Gray placeholder text */
}

/* Hero section in dark mode */
body.dark-mode .hero::before{
background:linear-gradient(135deg, rgba(15,15,15,0.95) 0%, rgba(25,25,25,0.95) 100%); /* Dark gradient */
}

/* Hero text styling in dark mode */
body.dark-mode .hero-text h1{
background:linear-gradient(135deg, #00bcd4, #0097a7); /* Keep gradient */
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}

body.dark-mode .hero-text h3{
color:#00bcd4; /* Cyan for profession */
}

body.dark-mode .hero-text p{
color:#d0d0d0; /* Light gray text */
}

/* Hero image in dark mode */
body.dark-mode .hero-image img{
box-shadow:0 16px 30px rgba(0,188,212,0.2); /* Cyan-tinted shadow */
border-color:rgba(0,188,212,0.3); /* Cyan border */
}

body.dark-mode .hero-image img:hover{
box-shadow:0 30px 60px rgba(0,188,212,0.4); /* Enhanced cyan shadow */
}

/* Dark mode toggle icon */
body.dark-mode .dark-mode-toggle{
color:#00bcd4; /* Cyan icon */
}

/* Dark mode mobile menu */
body.dark-mode nav ul{
background:rgba(14, 14, 14, 0.762); /* Dark mobile menu */
}
body.dark-mode nav{
background:rgba(14, 14, 14, 0.762); /* Dark mobile menu */
}
body.dark-mode header{
background:rgba(14, 14, 14, 0.762); /* Dark mobile menu */
}

/* Scrollbar styling in dark mode */
body.dark-mode::-webkit-scrollbar-track{
background:#1a1a1a;
}

body.dark-mode::-webkit-scrollbar-thumb{
background:#00bcd4;
}

body.dark-mode::-webkit-scrollbar-thumb:hover{
background:#0097a7;
}

/* Footer in dark mode */
body.dark-mode footer{
background:#1a1a1a; /* Dark footer background */
border-top-color:rgba(255,255,255,0.1); /* Light border */
}

body.dark-mode .footer-about p{
color:#d0d0d0; /* Light gray text */
}

body.dark-mode .footer-links a{
color:#d0d0d0; /* Light gray for footer links */
}

body.dark-mode .footer-links a:hover{
color:#00bcd4; /* Cyan on hover */
}

body.dark-mode .footer-contact p{
color:#d0d0d0; /* Light gray for contact info */
}

body.dark-mode .footer-bottom{
color:#d0d0d0; /* Light gray for footer bottom text */
border-top-color:rgba(255,255,255,0.1); /* Light border */
}

/* Success popup in dark mode */
body.dark-mode .popup-content{
background:#1a1a1a; /* Dark popup background */
border-color:rgba(0,188,212,0.4); /* Cyan border */
color:#d0d0d0; /* Light text */
}

body.dark-mode .popup-content h3{
color:#00bcd4; /* Cyan heading */
}

body.dark-mode .popup-content p{
color:#d0d0d0; /* Light gray text */
}

body.dark-mode .popup-content button{
background:#00bcd4; /* Cyan button */
color:#000; /* Dark text on button */
}

body.dark-mode .popup-content button:hover{
background:#0097a7; /* Darker cyan on hover */
}



/* ============================= */
/* MODERN MOBILE NAVIGATION */
/* ============================= */
@media(max-width:768px){

.menu-toggle{
display:block;
/* Show hamburger on mobile */
}

/* Navigation Menu */

nav ul{

position:fixed;
/* Fixed position */

top:0;
/* Start from top */

right:-100%;
/* Hide outside screen */

width:70%;
/* Menu width */

height:100vh;
/* Full screen height */

background:rgba(255,255,255,0.98);
/* Light transparent background for mobile menu */

backdrop-filter:blur(10px);
/* Glass blur effect */

flex-direction:column;
/* Stack links vertically */

justify-content:center;
/* Center links vertically */

align-items:center;
/* Center horizontally */

gap:30px;
/* Space between links */

transition:0.5s ease;
/* Smooth slide animation */

z-index:1000;
}

/* Show Mobile Menu */

nav ul.active{
right:0;
}

/* Menu Links */

nav ul li a{

font-size:22px;
/* Larger text */

font-weight:600;
/* Bold text */

color:#111;
/* Dark text for light mobile menu */

}

}

body.dark-mode nav ul li a{
    color:#e0e0e0;
}

/* Menu list styling */
ul{
    display:flex; /* Horizontal menu */
    list-style:none; /* Remove bullets */
    gap:30px; /* Space between items */
    align-items:center; /* Vertical alignment */
}

/* Menu items spacing */
ul li{
    margin:0; /* Remove default margin */
}

/* Menu links styling */
/* Navigation hover effect */

ul li a{
    position:relative; /* For pseudo-element positioning */
    transition:0.3s ease; /* Smooth color transition */
    text-decoration:none; /* Remove underline */
    color:#111; /* Dark text for light header */
    font-weight:500; /* Medium font weight */
    letter-spacing:0.03em; /* Slight letter spacing */
    padding:10px 0; /* Vertical padding */
    display:inline-block; /* For proper hover effects */
}

ul li a:hover{
    color:#00bcd4; /* Cyan color on hover */
}

/* Underline animation */
ul li a::after{
    content:''; /* Empty content for pseudo-element */
    position:absolute; /* Position relative to link */
    left:0; /* Start from left */
    bottom:-5px; /* Position below text */
    width:0; /* Initially no width */
    height:2px; /* Line height */
    background:#00bcd4; /* Cyan background */
    transition:0.3s; /* Smooth width transition */
}

ul li a:hover::after{
    width:100%; /* Full width on hover */
}

ul li a.nav-active{
    color:#0097a7; /* Active nav link color */
    font-weight:600;
}

ul li a.nav-active::after{
    width:100%;
    background:#0097a7; /* Active underline color */
}

.portfolio-link{
    display:block; /* Make link block level */
    text-decoration:none; /* Remove underline */
    color:inherit; /* Inherit text color */
}

.portfolio-link:hover .portfolio-item img{
    transform:scale(1.03); /* Slight zoom on hover */
}

/* Logo styling */
.logo{
    font-size:22px; /* Logo font size */
    font-weight:bold; /* Bold font weight */
    color:#111; /* Dark color for logo */
    text-decoration:none; /* Remove underline */
}

#home,
.hero{
    scroll-margin-top:120px; /* Offset for fixed header */
}


/* ============================= */
/* Scroll Reveal Animation */
/* ============================= */
.reveal{
opacity:0;
/* Hidden initially */

transform:translateY(50px);
/* Start slightly below */

transition:all 0.8s ease;
/* Smooth animation */
}

.reveal.active{
opacity:1;
/* Show */

transform:translateY(0);
/* Move to normal position */
}


/* Main content styling */
/* ============================= */
/* Hero Section */
/* ============================= */
.hero{
    padding:80px 10% 60px; /* Top, sides, bottom padding */
    margin-top:80px; /* Top margin to account for fixed header */
    position:relative; /* For pseudo-elements */
    overflow:hidden; /* Hide overflowing content */
}

.hero::before{
    content:''; /* Empty content for background overlay */
    position:absolute; /* Absolute positioning */
    top:0; /* Top edge */
    left:0; /* Left edge */
    right:0; /* Right edge */
    bottom:0; /* Bottom edge */
    background:linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(245,245,245,0.9) 100%); /* Soft white overlay */
    z-index:-1; /* Behind content */
}

.hero-content{
    display:flex; /* Flexbox layout */
    justify-content:space-between; /* Space between items */
    align-items:center; /* Vertical alignment */
    gap:60px; /* Gap between flex items */
    flex-wrap:wrap; /* Wrap on smaller screens */
    max-width:1400px; /* Maximum width */
    margin:0 auto; /* Center horizontally */
}

.hero-text{
    flex:1; /* Take available space */
    min-width:300px; /* Minimum width */
    position:relative; /* For z-index */
    z-index:2; /* Above background */
}

.hero-text h1{
    font-size:55px; /* Large font size */
    margin-bottom:15px; /* Bottom margin */
    background:linear-gradient(135deg, #00bcd4, #0097a7); /* Gradient text background */
    -webkit-background-clip:text; /* Clip background to text */
    -webkit-text-fill-color:transparent; /* Make text transparent */
    background-clip:text; /* Standard background clip */
    font-weight:700; /* Bold font weight */
}

.hero-text h3{
    color:#00bcd4; /* Cyan color */
    margin-bottom:25px; /* Bottom margin */
    font-size:24px; /* Font size */
    font-weight:300; /* Light font weight */
    min-height:3em; /* Reserve height for animated text */
    white-space:nowrap; /* Prevent text height changes while typing */
    overflow:hidden; /* Hide overflow if text is wider */
}

.hero-text p{
    line-height:1.8; /* Line height for readability */
    margin-bottom:35px; /* Bottom margin */
    font-size:18px; /* Font size */
    color:#111; /* Darker text for better visibility */
    max-width:500px; /* Maximum width */
    font-weight:500; /* Slightly bold for better readability */
}

.hero-buttons{
    margin-top:30px; /* Top margin */
    display:flex; /* Flexbox for buttons */
    gap:20px; /* Gap between buttons */
    flex-wrap:wrap; /* Wrap on small screens */
}

.hero-image{
    flex:1; /* Take available space */
    text-align:center; /* Center image */
    min-width:300px; /* Minimum width */
    position:relative; /* For pseudo-elements */
    z-index:2; /* Above background */
}

.hero-image img{
    width:100%; /* Full width of container */
    max-width:450px; /* Maximum width */
    height:auto; /* Maintain aspect ratio */
    border-radius:20px; /* Rounded corners */
    box-shadow:0 16px 30px rgba(0,0,0,0.12); /* Soft shadow for white theme */
    border:1px solid rgba(0,0,0,0.08); /* Light border */
    transition:0.5s ease; /* Smooth transitions */
    position:relative; /* For z-index */
}

.hero-image img:hover{
    transform:translateY(-10px) scale(1.02); /* Lift and scale on hover */
    box-shadow:0 30px 60px rgba(0,0,0,0.6); /* Enhanced shadow */
    border-color:#00bcd4; /* Cyan border on hover */
}

.hero-image::before{
    content:''; /* Empty content for decorative element */
    position:absolute; /* Absolute positioning */
    top:-20px; /* Offset from top */
    left:-20px; /* Offset from left */
    right:20px; /* Offset from right */
    bottom:20px; /* Offset from bottom */
    background:linear-gradient(135deg, #00bcd4, #0097a7); /* Gradient background */
    border-radius:25px; /* Rounded corners */
    z-index:-1; /* Behind image */
    opacity:0.1; /* Low opacity */
    transition:0.5s ease; /* Smooth transitions */
}

.hero-image:hover::before{
    opacity:0.2; /* Increase opacity on hover */
    transform:scale(1.05); /* Scale up on hover */
}

.flyer-page .hero{
    padding:50px 10% 40px;
    margin-top:80px;
}

.flyer-page .case-study,
.flyer-page .flyers{
    padding:40px 10%;
}

.flyer-page .case-study-text{
    max-width:680px;
}

.flyer-page .flyer-gallery{
    margin-top:20px;
}

@media(max-width:768px){
    .hero-content{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .hero-text h1{
        font-size:45px;
    }

    .hero-text h3{
        font-size:20px;
        white-space:normal; /* Allow wrapping on smaller screens */
    }

    .hero-text p{
        font-size:16px;
        margin-bottom:25px;
    }

    .hero-buttons{
        justify-content:center;
        gap:15px;
    }
}

/* ============================= */
/* Button Styling */
/* ============================= */
.btn{
    display:inline-block; 
    /* Makes link behave like button */

    padding:12px 25px; 
    /* Button size (top/bottom & left/right) */

    background:#00bcd4; 
    /* Button background color */

    color:white; 
    /* Button text color */

    text-decoration:none; 
    /* Removes underline */

    margin-right:10px; 
    /* Space between buttons */

    border-radius:5px; 
    /* Rounded corners */
}

/* Outline Button */
.btn-outline{
    background:transparent; 
    /* Transparent background */

    border:1px solid #00bcd4; 
    /* Adds border */
    color:#00bcd4; 
    /* Make outline button text visible */
    transition:0.3s;
}


/* Hero Image */
.hero-image img{
    width:350px; 
    /* Controls image size */
    border-radius:10px; 
    /* Smooth rounded corners */
}

/* Button Hover Effect */
.btn:hover{
    background:#0097a7;
    /* Changes color when hovering */
    transition:0.3s;
    /* Smooth animation */
}

/* Outline Button Hover */
.btn-outline:hover{
    background:#00bcd4;
    /* Fill background on hover */
    color:white;
}


/* ============================= */
/* About Section Styling */
/* ============================= */
/* About Section */
/* ============================= */
.about{
    padding:80px 10%; /* Top/bottom and left/right padding */
    background:#ffffff; /* White section background */
    position:relative; /* For pseudo-elements */
}

.about::before{
    content:''; /* Empty content for background overlay */
    position:absolute; /* Absolute positioning */
    top:0; /* Top edge */
    left:0; /* Left edge */
    right:0; /* Right edge */
    bottom:0; /* Bottom edge */
    background:rgba(255,255,255,0.9); /* Soft white overlay */
    z-index:-1; /* Behind content */
}

.about-container{
    display:flex; /* Flexbox layout */
    align-items:center; /* Vertical alignment */
    gap:60px; /* Gap between items */
    flex-wrap:wrap; /* Wrap on smaller screens */
    max-width:1400px; /* Maximum width */
    margin:0 auto; /* Center horizontally */
}

.about-image{
    flex:1; /* Take available space */
    text-align:center; /* Center image */
    min-width:300px; /* Minimum width */
    position:relative; /* For pseudo-elements */
}

.about-image img{
    width:100%; /* Full width of container */
    max-width:400px; /* Maximum width */
    height:auto; /* Maintain aspect ratio */
    border-radius:20px; /* Rounded corners */
    box-shadow:0 15px 35px rgba(0,0,0,0.3); /* Shadow for depth */
    border:3px solid rgba(0,188,212,0.15); /* Subtle border */
    transition:0.5s ease; /* Smooth transitions */
    position:relative; /* For z-index */
}

.about-image img:hover{
    transform:translateY(-8px) scale(1.02); /* Lift and scale on hover */
    box-shadow:0 25px 50px rgba(0,0,0,0.5); /* Enhanced shadow */
    border-color:#00bcd4; /* Cyan border on hover */
}

.about-image::before{
    content:''; /* Empty content for decorative element */
    position:absolute; /* Absolute positioning */
    top:-15px; /* Offset from top */
    left:-15px; /* Offset from left */
    right:15px; /* Offset from right */
    bottom:15px; /* Offset from bottom */
    background:linear-gradient(135deg, #00bcd4, #0097a7); /* Gradient background */
    border-radius:25px; /* Rounded corners */
    z-index:-1; /* Behind image */
    opacity:0.08;
    transition:0.5s ease;
}

.about-image:hover::before{
    opacity:0.15;
    transform:scale(1.03);
}

.about-text{
    flex:1;
    min-width:300px;
}

.about-text h2{
    font-size:40px;
    margin-bottom:25px;
    color:#111;
    font-weight:600;
}

.about-text p{
    line-height:1.8;
    margin-bottom:20px;
    font-size:17px;
    color:#111; /* Darker text for stronger visibility */
    font-weight:500; /* Slightly bold */
}

.about-text .btn{
    margin-top:10px;
}

/* Mobile About Fix */
@media(max-width:768px){
    .about-container{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .about-image img{
        margin-bottom:0;
    }

    .about-text h2{
        font-size:35px;
    }

    .about-text p{
        font-size:16px;
    }
}


/* About Section Animation */

.about-image{
    animation:slideLeft 1s ease;
    /* Applies animation */
}

.about-text{
    animation:slideRight 1s ease;
    /* Applies animation */
}


/* ================= EXPERIENCE TIMELINE ================= */
.section-title{
    text-align:center;
    font-size:25px;
}
.experience{
padding: 80px 0;
background: var(--section-bg);
}

/* Timeline Container */
.timeline{
position: relative;
max-width: 900px;
margin: auto;
}

/* Vertical Line */
.timeline::after{
content: '';
position: absolute;
width: 2px;
background: #0097a7;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
}

/* Timeline Item */
.timeline-item{
padding: 20px 40px;
position: relative;
width: 50%;
}

/* Left Side */
.timeline-item:nth-child(odd){
left: 0;
}

/* Right Side */
.timeline-item:nth-child(even){
left: 50%;
}

/* Circle */
.timeline-item::after{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #0097a7;
border-radius: 50%;
top: 20px;
right: -10px;
z-index: 1;
}

/* Right side circle */
.timeline-item:nth-child(even)::after{
left: -10px;
}

/* Timeline Content */
.timeline-content{
padding: 20px;
background: var(--card-bg);
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Title */
.timeline-content h3{
margin-bottom: 10px;
}

/* Date */
.timeline-content span{
font-size: 14px;
color: #0097a7;
display: block;
margin-bottom: 10px;
}

/* ================= EXPERIENCE MOBILE TIMELINE ================= */
@media screen and (max-width:768px){
.timeline::after{
left: 20px;
}
.timeline-item{
width: 100%;
padding-left: 60px;
padding-right: 25px;
}
.timeline-item:nth-child(even){
left: 0;
}
.timeline-item::after{
left: 10px;
}
}



/* =================== COUNTER SECTION ==================  */
.counter{
    padding:60px 10%;
    display:flex;
    justify-content:space-around;
    text-align:center;
    background:#ffffff;
    border-top:1px solid rgba(0,0,0,0.08);
    border-bottom:1px solid rgba(0,0,0,0.08);
}

.counter-box{
    padding:20px;
    border-radius:15px;
    background:#f9fcff;
    border:1px solid rgba(0,188,212,0.18);
    transition:0.3s ease;
    min-width:150px;
}

.counter-box:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,188,212,0.12);
    border-color:#00bcd4;
}

.counter-box h2{
    font-size:45px;
    color:#00bcd4;
    margin-bottom:10px;
    font-weight:700;
}

.counter-box p{
    color:#666;
    font-size:16px;
    font-weight:300;
    text-transform:uppercase;
    letter-spacing:1px;
}


/* Slide Left Animation */
@keyframes slideLeft{
    from{
        opacity:0;
        transform:translateX(-50px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}


/* Slide Right Animation */

@keyframes slideRight{
    from{
        opacity:0;
        transform:translateX(50px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}


/* ============================= */
/* Services Section */
/* ============================= */
/* 3D Hover Cards */  
.service-card,
.portfolio-item,
.skills-left,
.skills-right{
    transition:0.4s;
    transform-style:preserve-3d;
}

.service-card:hover,
.portfolio-item:hover,
.skills-left:hover,
.skills-right:hover{
    transform:rotateY(5deg) rotateX(5deg);
}

/* Smooth Fade-In Sections */
.fade-in{
    opacity:0;
    transform:translateY(30px);
    transition:1s;
}
.fade-in.show{
    opacity:1;
    transform:translateY(0);
}


.services{
    padding:60px 10%; /* Top/bottom and left/right padding */
    /* Adds spacing inside section */

    background:#ffffff; /* Light background for services section */
    /* Clean white section */
}

.services-container h2{
    text-align:center; /* Center the heading */
    /* Centers the heading */

    font-size:35px; /* Large font size */
    /* Large heading */

    margin-bottom:40px; /* Bottom margin */
    /* Space below heading */
}

.services-box{
    display:flex; /* Flexbox layout */
    /* Places cards side by side */

    justify-content:space-between; /* Space between items */
    /* Space between cards */

    gap:20px; /* Gap between flex items */
    /* Space between cards */
}

.service-card{
    background:#ffffff; /* White card background */
    /* Card background */

    padding:30px; /* Internal padding */
    /* Space inside card */

    border-radius:10px; /* Rounded corners */
    /* Rounded corners */

    border:1px solid rgba(0,0,0,0.08);
    box-shadow:0 12px 25px rgba(0,0,0,0.06);
    transition:0.3s; /* Smooth transitions */
    /* Smooth hover effect */
}

.service-card h3{
    margin-bottom:15px; /* Bottom margin */
    /* Space below title */

    color:#00bcd4; /* Cyan color */
    /* Accent color */
}

.service-icon{
    font-size:40px;
    /* Icon size */

    margin-bottom:15px;
    /* Space below icon */

    display:block;
    transition:0.3s;
    /* Smooth animation */
}

.service-card:hover .service-icon{
    font-size:50px;
    /* Enlarge on hover */
    
    transform:scale(1.1) rotateY(10deg);
    /* Add visual effect */
}

.service-card p{
    line-height:1.6;
    /* Easy to read text */
}


/* Hover Effect */

.service-card:hover{
    transform:translateY(-10px);
    /* Move card up when hover */

    box-shadow:0 10px 30px rgba(0,0,0,0.5);
    /* Adds shadow */
}


/* ================= PROJECT FILTER ================= */
.project-filter{
text-align: center;
margin-bottom: 40px;
}
.filter-btn{
padding: 10px 20px;
margin: 5px;
border: none;
background: #eee;
cursor: pointer;
border-radius: 5px;
transition: 0.3s;
}
.filter-btn:hover{
background: #0097a7;
color: white;
}
.filter-btn.active{
background: #0097a7;
color: white;
}


/* ============================= */
/* Portfolio Section */
/* ============================= */
.portfolio{
    padding:60px 10%;
    /* Adds spacing inside section */
    background:#ffffff;
}

.portfolio-container h2{
    text-align:center;
    /* Center heading */

    font-size:35px;
    /* Large heading */

    margin-bottom:40px;
    /* Space below heading */
}

.portfolio-grid{
    display:grid;
    /* Creates grid layout */

    grid-template-columns:repeat(2,1fr);
    /* 2 columns */

    gap:20px;
    /* Space between items */
}

.portfolio-item{
    position:relative;
    /* Needed for overlay */

    overflow:hidden;
    /* Hides overflow content */

    border-radius:10px;
    /* Rounded corners */

    background:#fff;
    /* White background */

    box-shadow:0 4px 8px rgba(0,0,0,0.1);
    /* Subtle shadow */
}

.portfolio-item img{
    width:100%;
    /* Full width image */

    display:block;
    /* Removes spacing */

    height:200px;
    object-fit:cover;

    transition:0.5s;
    /* Smooth zoom effect */
}

.portfolio-info{
    padding:15px;
    /* Padding inside */

    text-align:center;
    /* Center text */
}

.portfolio-info h3{
    font-size:20px;
    /* Title size */

    color:#333;
    /* Dark color */

    margin-bottom:5px;
    /* Space below */
}

.portfolio-info p{
    font-size:14px;
    /* Description size */

    color:#666;
    /* Lighter color */
}

.flyer-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:30px;
}

.flyer-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:12px;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration:none;
}

.flyer-card:hover{
    transform:translateY(-6px);
    box-shadow:0 14px 32px rgba(0,0,0,0.12);
}

.flyer-card img{
    width:100%;
    display:block;
    height:250px;
    object-fit:cover;
    transition:transform 0.4s ease;
}

.flyer-card:hover img{
    transform:scale(1.03);
}

.flyer-info{
    padding:16px 16px 20px;
    text-align:center;
}

.flyer-info h3{
    margin:0;
}

.image-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,0.8) !important;
    backdrop-filter:blur(10px);
    z-index:9998;
    padding:20px;
    box-sizing:border-box;
}

.image-modal.active{
    display:flex;
}

.image-modal-content{
    position:relative;
    max-width:90%;
    max-height:90%;
    background:#000;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    border:2px solid rgba(255,255,255,0.1);
}

.image-modal-content img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    max-height:80vh;
    border-radius:8px;
}

.modal-close{
    position:absolute;
    top:20px;
    right:20px;
    background:#ffffff !important;
    border:2px solid #333 !important;
    border-radius:50%;
    width:50px !important;
    height:50px !important;
    font-size:28px !important;
    font-weight:900 !important;
    cursor:pointer;
    display:flex !important;
    align-items:center;
    justify-content:center;
    z-index:10000 !important;
    color:#333 !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.3) !important;
    pointer-events:auto !important;
    transition:transform 0.2s ease, background 0.2s ease;
}

.modal-close:hover{
    transform:scale(1.1);
}

body.modal-open{
    overflow:hidden;
}

@media(max-width:768px){
    .flyer-card img{
        height:auto;
    }
}

.flyer-info h3{
    font-size:18px;
    margin:0;
    color:#111;
}

.section-subtitle{
    text-align:center;
    color:#666;
    max-width:640px;
    margin:10px auto 0;
}

/* Overlay Styling */
.portfolio-overlay{
    position:absolute;
    /* Position over image */

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.5);
    /* Dark overlay */

    color:white;
    /* White text */

    display:flex;
    /* Flex for centering */

    flex-direction:column;
    /* Stack text */

    justify-content:center;
    /* Center vertically */

    align-items:center;
    /* Center horizontally */

    text-align:center;
    /* Center text */

    opacity:0;
    /* Hidden initially */

    transition:0.3s;
    /* Smooth animation */
}

/* Hover Effects */

.portfolio-item:hover img{
    transform:scale(1.05);
    /* Slight zoom image */
}

.portfolio-item:hover .portfolio-overlay{
    opacity:1;
    /* Show overlay on hover */
}


/* ============================= */
/* Skills Section */
/* ============================= */
.skills{
    padding:60px 10%;
    /* Adds spacing inside section */

    background:#f8f9fb;
    /* Light background for skills section */
}

.skills-container h2{
    text-align:center;
    /* Center heading */

    font-size:35px;
    /* Large heading */

    margin-bottom:40px;
    /* Space below heading */
}

.skills-content{
    display:flex;
    /* Two column layout */

    justify-content:space-between;
    /* Space between columns */

    gap:40px;
    /* Space between columns */
}

.skills-left,
.skills-right{
    width:100%;
    /* Equal width */
}

.skills-left h3,
.skills-right h3{
    margin-bottom:20px;
    /* Space below category title */

    color:#00bcd4;
}

.skill{
    margin-bottom:20px;
    /* Space between skills */
}

.skill p{
    margin-bottom:5px;
    /* Space above bar */
}

.skill-bar{
    background:#e5e5e5;
    /* Light background of bar */

    height:8px;
    /* Bar height */

    border-radius:5px;
    /* Rounded corners */

    overflow:hidden;
}

.skill-bar span{
    display:block;
    height:100%;
    background:#00bcd4;
    /* Skill color */
}



/* ============================= */
/* Testimonials */
/* ============================= */
#testimonials {
    padding: 80px 5%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

#testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%230097a7" opacity="0.03"/><circle cx="75" cy="75" r="1" fill="%230097a7" opacity="0.03"/><circle cx="50" cy="10" r="0.5" fill="%230097a7" opacity="0.05"/><circle cx="10" cy="50" r="0.5" fill="%230097a7" opacity="0.05"/><circle cx="90" cy="30" r="0.5" fill="%230097a7" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
}

#testimonials .container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

#testimonials h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 700;
    position: relative;
}

#testimonials h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #0097a7, #00bcd4);
    margin: 15px auto 0;
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    color: #6c757d;
    font-size: 1.1rem;
    margin-bottom: 50px;
    font-weight: 400;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.testimonial-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid rgba(0, 151, 167, 0.1);
    overflow: hidden;
}

.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0097a7, #00bcd4);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

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

.testimonial-content {
    position: relative;
    margin-bottom: 25px;
}

.quote-icon {
    color: #0097a7;
    font-size: 2rem;
    margin-bottom: 15px;
    opacity: 0.7;
}

.testimonial-text {
    color: #495057;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
    font-style: italic;
    position: relative;
}

.testimonial-text::before {
    content: '"';
    font-size: 4rem;
    color: #0097a7;
    position: absolute;
    top: -20px;
    left: -15px;
    opacity: 0.1;
    font-family: Georgia, serif;
}

.rating {
    margin-top: 20px;
    color: #ffc107;
    font-size: 1.2rem;
}

.rating i {
    margin-right: 2px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0097a7, #00bcd4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.author-info h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 1rem;
    font-weight: 600;
}

.author-role {
    color: #6c757d;
    font-size: 0.9rem;
    font-weight: 400;
}

/* Dark mode testimonials */
.dark-mode #testimonials {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.dark-mode #testimonials h2 {
    color: #ffffff;
}

.dark-mode .section-subtitle {
    color: #adb5bd;
}

.dark-mode .testimonial-card {
    background: #2d2d2d;
    border-color: rgba(0, 151, 167, 0.2);
}

.dark-mode .testimonial-text {
    color: #e9ecef;
}

.dark-mode .testimonial-author h4 {
    color: #ffffff;
}

.dark-mode .author-role {
    color: #adb5bd;
}

.dark-mode .testimonial-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Responsive testimonials */
@media (max-width: 768px) {
    #testimonials {
        padding: 60px 5%;
    }

    #testimonials h2 {
        font-size: 2rem;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .testimonial-card {
        padding: 25px;
    }

    .testimonial-text {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    #testimonials h2 {
        font-size: 1.8rem;
    }

    .testimonial-card {
        padding: 20px;
    }

    .author-avatar {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
}



/* ============================= */
/* Contact Section */
/* ============================= */
.contact{
    padding:60px 10%;
    /* Adds spacing inside section */

    background:#ffffff;
    /* White contact section */
}

.contact-container h2{
    text-align:center;
    /* Center heading */

    font-size:35px;
    /* Large heading */

    margin-bottom:40px;
    /* Space below heading */
}

.contact-content{
    display:flex;
    /* Form and info side by side */

    justify-content:space-between;
    gap:40px;
    /* Space between columns */
}

.contact-form{
    flex:1;
    /* Takes half space */

    display:flex;
    flex-direction:column;
    /* Stack input fields vertically */
    gap:15px;
    /* Space between inputs */
    font-family: Arial, Helvetica, sans-serif;
    transition:0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus{
    outline:none;
    background:#eef6fb;
    box-shadow:0 0 10px rgba(0, 188, 212, 0.22);
    /* Focus state styling */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:#999;
}

.contact-form input,
.contact-form textarea{
    padding:12px;
    border-radius:5px;
    border:1px solid rgba(0,0,0,0.12);
    background:#f4f7fb;
    color:#111;
    /* Light input fields */
}

.contact-form textarea{
    height:120px;
    resize:none;
    /* Prevent resizing */
}

.contact-info a{
    color:#00bcd4;
    text-decoration:none;
    transition:0.3s;
}

.contact-info a:hover{
    color:#0097a7;
    text-decoration:underline;
}

.contact-info{
    flex:1;
    /* Takes half space */

    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
    color:#333;
}

.contact-info p{
    line-height:1.6;
}

/* Button hover for contact section */
.contact-form .btn{
    background:#00bcd4;
    border-radius:5px;
    padding:12px;
    cursor:pointer;
    transition:0.3s;
}

.contact-form .btn:hover{
    background:#0097a7;
}


/* ============================= */
/* Success Popup Styling */
/* ============================= */
.success-popup {
    position: fixed; /* Fix position on screen */
    top: 0; /* Align to top */
    left: 0; /* Align to left */
    width: 100%; /* Full screen width */
    height: 100%; /* Full screen height */
    background: rgba(0,0,0,0.25); /* Light overlay */
    display: none; /* Hidden by default */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    z-index: 999; /* Appear above everything */
}

.popup-content {
    background: #ffffff; /* Light popup background */
    padding: 40px; /* Inner spacing */
    border-radius: 10px; /* Rounded corners */
    text-align: center; /* Center text */
    animation: popupFade 0.4s ease; /* Smooth animation */
    border: 2px solid rgba(0, 188, 212, 0.25); /* Accent border */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.popup-content h3 {
    color: #00e5ff; /* Accent color */
    margin-bottom: 15px;
    font-size: 24px;
}

.popup-content p {
    color: #333;
    margin-bottom: 20px;
    line-height: 1.6;
}

.popup-content button {
    padding: 12px 30px;
    border: none;
    background: #00bcd4;
    color: #000;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
}

.popup-content button:hover {
    background: #0097a7;
    transform: translateY(-2px);
}

/* Animation */
@keyframes popupFade {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================= */
/* Footer Styling */
/* ============================= */
footer{
    background:#f5f6f8;
    /* Light footer background */

    padding:40px 10%;
    /* Space inside footer */

    text-align:center;
    /* Center all text */

    margin-top:60px;
    /* Space above footer */

    border-top:1px solid rgba(0,0,0,0.08);
    /* Subtle border at top */
}

.footer-content{
    display:flex;
    justify-content:space-between;
    gap:40px;
    margin-bottom:30px;
    flex-wrap:wrap;
}

.footer-about h3{
    color:#00bcd4;
    margin-bottom:10px;
    font-size:20px;
}

.footer-about p{
    color:#555;
    line-height:1.6;
    font-size:14px;
}

.footer-links h4,
.footer-contact h4{
    color:#00bcd4;
    margin-bottom:15px;
    font-size:16px;
}

.footer-links ul{
    list-style:none;
    padding:0;
}

.footer-links li{
    margin-bottom:8px;
}

.footer-links a{
    color:#555;
    text-decoration:none;
    transition:0.3s;
    font-size:14px;
}

.footer-links a:hover{
    color:#00bcd4;
}

.footer-contact p{
    color:#555;
    margin-bottom:5px;
    font-size:14px;
}

.footer-contact a{
    color:#555;
    text-decoration:none;
    transition:0.3s;
}

.footer-contact a:hover{
    color:#00bcd4;
    text-decoration:underline;
}

.footer-social a{
    color:#00bcd4;
    /* Accent color for social links */

    margin:0 10px;
    /* Space between links */

    text-decoration:none;
    transition:0.3s;
    display:inline-block;
    /* Make clickable area larger */
}

.footer-social a:hover{
    color:#0097a7;
    /* Hover color for effect */
    
    transform:translateY(-3px);
    /* Lift effect on hover */
}

footer p{
    color:#666; /* Darker text for better visibility */
    margin-top:20px;
    font-size:12px;
}


/* ================
Top Button 
================== */
#topBtn{
position:fixed; /* Fixed position stays on screen while scrolling */
bottom:100px; /* Distance from bottom - above WhatsApp */
right:30px; /* Distance from right */
background:#00bcd4; /* Cyan background */
color:#000; /* Dark icon for visibility */
border:none; /* No border */
padding:0; /* Remove padding */
border-radius:50%; /* Make circular */
cursor:pointer; /* Pointer cursor on hover */
font-size:28px; /* Larger icon size */
width:60px; /* Fixed width */
height:60px; /* Fixed height */
line-height:60px; /* Center content vertically */
text-align:center; /* Center content horizontally */
z-index:9999; /* Very high z-index above all elements */
transition:opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
box-shadow:0 8px 24px rgba(0,188,212,0.5); /* Enhanced shadow for depth */
opacity:0; /* Start invisible */
visibility:hidden; /* Start hidden but take no space */
}

#topBtn.show{
opacity:1; /* Fade in */
visibility:visible; /* Show element */
}

#topBtn:hover{
background:#0097a7; /* Darker cyan on hover */
transform:translateY(-3px); /* Lift effect */
box-shadow:0 8px 20px rgba(0,188,212,0.6); /* Enhanced shadow */
}

/* Back-to-top button in dark mode */
body.dark-mode #topBtn{
background:#00bcd4; /* Keep cyan background */
color:#000; /* Dark text for contrast */
box-shadow:0 4px 12px rgba(0,188,212,0.5); /* Enhanced shadow in dark mode */
}

.whatsapp{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
color:white;
font-size:24px;
padding:15px;
border-radius:50%;
z-index:1000;
text-decoration:none;
}


/* ============================= */
/* Responsive Design */
/* ============================= */
/* Media query for tablets and medium screens */
@media screen and (max-width: 1024px) {
    
    /* Hero Section adjustments */
    .hero-content {
        flex-direction: column;
        /* Stack text above image instead of side by side */
        text-align: center;
    }

    .hero-image img {
        width:250px;
        /* Reduce image size for smaller screen */
        margin-top:20px;
    }

    /* About Section adjustments */
    .about-container {
        flex-direction: column;
        /* Stack image above text */
        text-align: center;
    }

    .about-image img {
        width:250px;
        /* Reduce image size */
        margin-bottom:20px;
    }

    /* Skills Section adjustments */
    .skills-content {
        flex-direction: column;
        /* Stack left and right columns */
    }

    .skills-left,
    .skills-right {
        width:100%;
    }

    /* Services Section adjustments */
    .services-box {
        flex-direction: column;
        /* Stack service cards vertically */
    }

    .service-card {
        gap: 15px;
    }

    /* Portfolio Section adjustments */
    .portfolio-grid,
    .flyer-gallery {
        grid-template-columns: 1fr;
        /* Make all portfolio items full width */
    }

    /* Contact Section adjustments */
    .contact-content {
        flex-direction: column;
        /* Stack form above contact info */
    }

    .contact-form,
    .contact-info {
        width:100%;
    }
}


/* Media query for mobile screens */
@media screen and (max-width: 768px) {
    
    /* Reduce hero text size */
    .hero-text h1 {
        font-size:35px;
    }

    .hero-text h3 {
        font-size:20px;
    }

    /* About Section text adjustment */
    .about-text h2 {
        font-size:28px;
    }

    .about-text p {
        font-size:14px;
    }

    /* Services Section title and card adjustments */
    .services-container h2 {
        font-size:28px;
    }

    .service-card h3 {
        font-size:20px;
    }

    .service-card p {
        font-size:14px;
    }

    /* Skills Section text adjustment */
    .skills-left h3,
    .skills-right h3 {
        font-size:20px;
    }

    /* Portfolio Section text adjustment */
    .portfolio-overlay h3 {
        font-size:18px;
    }

    .portfolio-overlay p {
        font-size:14px;
    }

    /* Contact Section adjustments */
    .contact-container h2 {
        font-size:28px;
    }

    .contact-form input,
    .contact-form textarea {
        font-size:14px;
    }

    /* Counter Section adjustments */
    .counter{
        flex-direction:column;
        gap:15px;
        padding:30px 5%;
    }

    .counter-box{
        width:100%;
        max-width:250px;
        margin:0 auto;
        padding:15px;
    }

    .counter-box h2{
        font-size:35px;
    }

    .counter-box p{
        font-size:13px;
    }
}


/* Media query for small mobile screens */
@media screen and (max-width: 480px) {
    
    /* Hero text smaller for tiny screens */
    /* Further reduces font sizes */
    .hero-text h1 {
        font-size:28px; 
    }

    .hero-text h3 {
        font-size:16px; 
    }

    /* Reduce hero image size */
    .hero-image img {
        width:200px;
    }

    /* About image smaller */
    .about-image img {
        width:200px;
    }

    /* Service cards padding smaller */
    .service-card {
        padding:20px;
    }

    /* Skills Section smaller text */
    .skills-left h3,
    .skills-right h3 {
        font-size:18px;
    }

    /* Contact form smaller inputs */
    .contact-form input,
    .contact-form textarea {
        padding:10px;
    }
}

/* Why we stack content in small screens
On smaller screens, side-by-side columns can break layout
Stacking ensures readability and professional appearance
Why we adjust font sizes
Prevents text overflow
Keeps headings clear and legible
Why we adjust image widths
Ensures images fit the screen
Avoid horizontal scrolling and maintains design integrity */