/* Reset and Base Styles */
*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html{
 scroll-behavior: smooth;
}

body{
 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 line-height: 1.6;
 color: #333;
 background-color: #fff;
}

.container{
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
}

/* Skip Link for Accessibility */
.skip-link{
 position: absolute;
 top: -40px;
 left: 6px;
 background: #000;
 color: #fff;
 padding: 8px;
 text-decoration: none;
 z-index: 1000;
 border-radius: 4px;
}

.skip-link:focus{
 top: 6px;
}

/* Typography */
h1, h2, h3, h4, h5, h6{
 font-weight: 600;
 line-height: 1.2;
 margin-bottom: 1rem;
}

h1{
 font-size: 3.5rem;
 font-weight: 700;
}

h2{
 font-size: 2.5rem;
}

h3{
 font-size: 1.75rem;
}

h4{
 font-size: 1.5rem;
}

p{
 margin-bottom: 1rem;
 color: #666;
}

/* Buttons */
.btn{
 display: inline-block;
 padding: 12px 30px;
 border: none;
 border-radius: 6px;
 text-decoration: none;
 font-weight: 500;
 font-size: 1rem;
 cursor: pointer;
 transition: all 0.3s ease;
 text-align: center;
}

.btn-primary{
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color: white;
}

.btn-primary:hover{
 transform: translateY(-2px);
 box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.btn-secondary{
 background: transparent;
 color: #667eea;
 border: 2px solid #667eea;
}

.btn-secondary:hover{
 background: #667eea;
 color: white;
 transform: translateY(-2px);
}

/* Header */
.site-header{
background: rgba(255, 255, 255, 0.98);
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1000;
 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 transition: all 0.3s ease;
 height: 80px;
}

.site-header.scrolled{
 background: rgba(255, 255, 255, 0.98);
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.header-content{
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 1rem 0;
}

.logo a{
 display: flex;
 align-items: center;
 text-decoration: none;
 color: #333;
}

.logo-img{
 width: 40px;
 height: 40px;
 margin-right: 10px;
}

.logo-text{
 font-size: 1.5rem;
 font-weight: 700;
 color: #667eea;
}

.main-navigation{
 display: flex;
}

.nav-menu{
 display: flex;
 list-style: none;
 gap: 2rem;
}

.nav-link{
 text-decoration: none;
 color: #333;
 font-weight: 500;
 transition: color 0.3s ease;
 position: relative;
}

.nav-link:hover{
 color: #667eea;
}

.nav-link::after{
 content: '';
 position: absolute;
 bottom: -5px;
 left: 0;
 width: 0;
 height: 2px;
 background: #667eea;
 transition: width 0.3s ease;
}

.nav-link:hover::after{
 width: 100%;
}

.mobile-menu-toggle{
 display: none;
 flex-direction: column;
 background: none;
 border: none;
 cursor: pointer;
 padding: 5px;
}

.mobile-menu-toggle span{
 width: 25px;
 height: 3px;
 background: #333;
 margin: 3px 0;
 transition: 0.3s;
}

/* Main Content */
.site-main{
 margin-top: 0;
}

/* Hero Section */
.hero-section{
 background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
 padding: 120px 0 100px 0;
 min-height: 100vh;
 display: flex;
 align-items: center;
 position: relative;
}

.hero-section .container{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
 align-items: center;
 position: relative;
 z-index: 2;
}

.hero-title{
 font-size: 3.5rem;
 color: #333;
 margin-bottom: 1.5rem;
 line-height: 1.1;
}

.hero-subtitle{
 font-size: 1.25rem;
 color: #2d3748;
 margin-bottom: 2rem;
 line-height: 1.6;
}

.hero-buttons{
 display: flex;
 gap: 1rem;
 flex-wrap: wrap;
}

.hero-image{
 text-align: center;
 position: relative;
 z-index: 2;
}

.hero-img{
 max-width: 100%;
 height: auto;
 border-radius: 15px;
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s ease;
}

.hero-img:hover{
 transform: translateY(-5px);
}

/* Section Styles */
.section-header{
 text-align: center;
 margin-bottom: 4rem;
}

.section-title{
 color: #333;
 margin-bottom: 1rem;
}

.section-subtitle{
 font-size: 1.125rem;
 color: #666;
 max-width: 600px;
 margin: 0 auto;
}

/* About Section */
/* Passion Section */
.passion-section{
 padding: 80px 0;
 background: #ffffff;
 text-align: center;
}

.passion-content{
 max-width: 800px;
 margin: 0 auto;
}

.passion-title{
 font-size: 2.5rem;
 font-weight: 700;
 color: #333;
 line-height: 1.3;
 margin: 0;
}

/* Responsive Design for Passion Section */
@media (max-width: 768px){
 .passion-section{
 padding: 60px 0;
}
 
 .passion-title{
 font-size: 2rem;
}
}

@media (max-width: 480px){
 .passion-title{
 font-size: 1.75rem;
}
}

.about-section{
 padding: 100px 0;
 background: #fff;
}

.about-content{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
 align-items: center;
}

.about-visual{
 position: relative;
}

.about-images{
 position: relative;
 height: 400px;
}

.about-image-1{
 position: absolute;
 top: 0;
 right: 0;
 width: 60%;
 height: 70%;
 z-index: 2;
}

.about-image-1 img{
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 8px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-image-2{
 position: absolute;
 bottom: 0;
 left: 0;
 width: 60%;
 height: 70%;
 z-index: 1;
}

.about-image-2 img{
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 8px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.experience-text{
position: absolute;
bottom: -20px;
left: 20px;
z-index: 3;
}

.experience-badge {
background: #ffffff;
padding: 1.5rem 2rem;
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.05);
transform: translateZ(0);
}

.experience-badge h2 {
font-size: 1.5rem;
font-weight: 700;
color: #1a202c;
margin: 0;
line-height: 1.2;
}

.about-category{
 font-size: 0.875rem;
 font-weight: 600;
 color: #667eea;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 margin-bottom: 1rem;
}

.about-title{
 font-size: 2.25rem;
 font-weight: 700;
 color: #333;
 margin-bottom: 1.5rem;
 line-height: 1.3;
}

.about-text p{
 font-size: 1rem;
 color: #666;
 line-height: 1.6;
 margin-bottom: 1.5rem;
}

.about-cta{
 display: inline-block;
 background: #667eea;
 color: white;
 padding: 1rem 2rem;
 border-radius: 8px;
 text-decoration: none;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 transition: all 0.3s ease;
 box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.about-cta:hover{
 background: #5a67d8;
 transform: translateY(-2px);
 box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* Responsive Design for About Section */
@media (max-width: 768px){
 .about-content{
 grid-template-columns: 1fr;
 gap: 3rem;
}
 
 .about-images{
 height: 300px;
}
 
 .about-title{
 font-size: 1.875rem;
}
 
.experience-badge h2{
font-size: 1.25rem;
}

.experience-badge {
padding: 1rem 1.5rem;
}
}

/* About Us Section (Original) */
.about-us-section{
 padding: 100px 0;
 background: #f8f9fa;
}

.about-us-content{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
 align-items: center;
}

.about-us-text p{
 font-size: 1.125rem;
 margin-bottom: 1.5rem;
 color: #666;
 line-height: 1.6;
}

.about-us-stats{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2rem;
}

.stat-item{
 text-align: center;
 padding: 2rem;
 background: white;
 border-radius: 15px;
 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s ease;
}

.stat-item:hover{
 transform: translateY(-5px);
}

.stat-number{
 display: block;
 font-size: 2.5rem;
 font-weight: 700;
 color: #667eea;
 margin-bottom: 0.5rem;
}

.stat-label{
 font-size: 1rem;
 color: #666;
 font-weight: 500;
}

/* Responsive Design for About Us Section */
@media (max-width: 768px){
 .about-us-content{
 grid-template-columns: 1fr;
 gap: 3rem;
}
 
 .about-us-stats{
 grid-template-columns: 1fr;
 gap: 1.5rem;
}
 
 .stat-item{
 padding: 1.5rem;
}
 
 .stat-number{
 font-size: 2rem;
}
}


/* Services Section */
.services-section{
 padding: 100px 0;
 background: #f8f9fa;
}

.services-grid{
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 2rem;
}

.service-card{
 background: white;
 padding: 2.5rem;
 border-radius: 15px;
 text-align: center;
 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.service-icon{
 width: 80px;
 height: 80px;
 margin: 0 auto 1.5rem;
 display: flex;
 align-items: center;
 justify-content: center;
}

.service-icon img{
 width: 40px;
 height: 40px;
}

.service-title{
 color: #333;
 margin-bottom: 1rem;
}

.service-description{
    color: #666;
    line-height: 1.6;
}

/* Services Slider */
.services-slider-container {
    position: relative;
    margin-top: 3rem;
    overflow: hidden;
    width: 100%;
}

.services-slider {
    display: flex;
    transition: transform 0.3s ease;
    gap: 2rem;
}

.service-card{
    min-width: 280px;
    flex-shrink: 0;
    width: 280px;
}

/* Slider Navigation */
.slider-navigation {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.slider-btn {
    background: #667eea;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: white;
}

.slider-btn:hover {
    background: #5a67d8;
}

.slider-btn:disabled {
    background: #cbd5e0;
    cursor: not-allowed;
}

.slider-btn svg {
    width: 20px;
    height: 20px;
}

/* Slider Dots */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dot.active {
    background: #667eea;
}

.dot:hover {
    background: #667eea;
}

/* Services Slider Responsive */
@media (max-width: 768px) {
    .services-slider-container {
        padding: 0 1rem;
    }
    
    .services-slider {
        gap: 1rem;
    }
    
    .service-card {
        min-width: 240px;
        width: 240px;
        padding: 1.5rem;
    }
    
    .slider-btn {
        width: 40px;
        height: 40px;
    }
    
    .slider-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .slider-navigation {
        margin-top: 1.5rem;
    }
    
    .slider-dots {
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    .services-slider-container {
        padding: 0 0.5rem;
    }
    
    .service-card {
        min-width: 200px;
        width: 200px;
        padding: 1.25rem;
    }
    
    .service-icon img {
        width: 35px;
        height: 35px;
    }
    
    .service-title {
        font-size: 1.1rem;
    }
    
    .service-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 375px) {
    .services-slider-container {
        padding: 0 0.25rem;
    }
    
    .service-card {
        min-width: 180px;
        width: 180px;
        padding: 1rem;
    }
    
    .service-icon img {
        width: 30px;
        height: 30px;
    }
    
    .service-title {
        font-size: 1rem;
    }
    
    .service-description {
        font-size: 0.85rem;
    }
}

/* Portfolio Section */
.creative-work-section{
 padding: 100px 0;
 background: white;
}

.section-category{
 font-size: 0.875rem;
 font-weight: 600;
 color: #667eea;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 margin-bottom: 0.5rem;
 text-align: center;
}

.creative-work-grid{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 3rem;
 margin-top: 3rem;
}

.creative-work-item{
 display: flex;
 flex-direction: column;
}

.creative-work-item.text-item{
 justify-content: center;
 padding: 2rem 0;
}

.creative-work-item.image-item img{
 width: 100%;
 height: 400px;
 object-fit: cover;
 border-radius: 8px;
}

.work-category{
 font-size: 0.875rem;
 font-weight: 600;
 color: #667eea;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 margin-bottom: 1rem;
}

.work-title{
 font-size: 1.75rem;
 font-weight: 700;
 color: #333;
 margin-bottom: 1.5rem;
 line-height: 1.3;
}

.work-description{
 font-size: 1rem;
 color: #666;
 line-height: 1.6;
 margin-bottom: 2rem;
}

.work-link{
 font-size: 0.875rem;
 font-weight: 600;
 color: #333;
 text-decoration: none;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 transition: color 0.3s ease;
}

.work-link:hover{
 color: #667eea;
}

/* Responsive Design for Creative Work */
@media (max-width: 768px){
 .creative-work-grid{
 grid-template-columns: 1fr;
 gap: 2rem;
}
 
 .work-title{
 font-size: 1.5rem;
}
 
 .creative-work-item.image-item img{
 height: 300px;
}
}

.portfolio-item{
 border-radius: 15px;
 overflow: hidden;
 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
 transition: transform 0.3s ease;
}

.portfolio-item:hover{
 transform: translateY(-5px);
}

.portfolio-image{
 position: relative;
 overflow: hidden;
}

.portfolio-image img{
 width: 100%;
 height: 250px;
 object-fit: cover;
 transition: transform 0.3s ease;
}

.portfolio-item:hover .portfolio-image img{
 transform: scale(1.1);
}

.portfolio-overlay{
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 opacity: 0;
 transition: opacity 0.3s ease;
 color: white;
 text-align: center;
 padding: 2rem;
}

.portfolio-item:hover .portfolio-overlay{
 opacity: 1;
}

.portfolio-title{
 font-size: 1.5rem;
 margin-bottom: 0.5rem;
}

.portfolio-category{
 margin-bottom: 1rem;
 opacity: 0.9;
}

.portfolio-link{
 color: white;
 text-decoration: none;
 padding: 10px 20px;
 border: 2px solid white;
 border-radius: 25px;
 transition: all 0.3s ease;
}

.portfolio-link:hover{
 background: white;
 color: #667eea;
}

/* Testimonials Section */
.testimonials-section{
 padding: 100px 0;
 background: #f8f9fa;
}

.testimonials-slider{
 max-width: 800px;
 margin: 0 auto;
}

.testimonial-item{
 background: white;
 padding: 3rem;
 border-radius: 15px;
 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
 text-align: center;
}

.testimonial-text{
 font-size: 1.25rem;
 font-style: italic;
 color: #666;
 margin-bottom: 2rem;
 line-height: 1.6;
}

.testimonial-author{
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 1rem;
}

.author-image{
 width: 60px;
 height: 60px;
 border-radius: 50%;
 object-fit: cover;
}

.author-name{
 color: #333;
 margin-bottom: 0.25rem;
}

.author-title{
 color: #666;
 font-size: 0.9rem;
}

/* Contact Section */
.contact-section{
 padding: 100px 0;
 background: white;
}

.contact-content{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
}

.contact-item{
 display: flex;
 align-items: center;
 gap: 1rem;
 margin-bottom: 2rem;
}

.contact-icon{
 width: 50px;
 height: 50px;
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}

.contact-icon img{
 width: 24px;
 height: 24px;
}

.contact-details h4{
 color: #333;
 margin-bottom: 0.25rem;
}

.contact-details p{
 color: #666;
 margin: 0;
}

/* Contact Form */
.contact-form{
 background: #f8f9fa;
 padding: 2.5rem;
 border-radius: 15px;
}

.form-group{
 margin-bottom: 1.5rem;
}

.form-group label{
 display: block;
 margin-bottom: 0.5rem;
 color: #333;
 font-weight: 500;
}

.form-group input,
.form-group textarea{
 width: 100%;
 padding: 12px 15px;
 border: 2px solid #e9ecef;
 border-radius: 6px;
 font-size: 1rem;
 transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus{
 outline: none;
 border-color: #667eea;
}

.form-group textarea{
 resize: vertical;
 min-height: 120px;
}

/* Footer */
.site-footer{
 background: #2c3e50;
 color: white;
 padding: 60px 0 20px;
}

.footer-content{
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 2rem;
 margin-bottom: 2rem;
}

.footer-logo{
 display: flex;
 align-items: center;
 margin-bottom: 1rem;
}

.footer-logo img{
 width: 40px;
 height: 40px;
 margin-right: 10px;
}

.footer-logo span{
 font-size: 1.5rem;
 font-weight: 700;
 color: #667eea;
}

.footer-description{
 color: #bdc3c7;
 margin-bottom: 1.5rem;
 line-height: 1.6;
}

.social-links{
 display: flex;
 gap: 1rem;
}

.social-link{
 width: 40px;
 height: 40px;
 background: #34495e;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 0.3s ease;
}

.social-link:hover{
 background: #667eea;
}

.social-link img{
 width: 20px;
 height: 20px;
}

.footer-title{
 color: white;
 margin-bottom: 1rem;
}

.footer-links{
 list-style: none;
}

.footer-links li{
 margin-bottom: 0.5rem;
}

.footer-links a{
 color: #bdc3c7;
 text-decoration: none;
 transition: color 0.3s ease;
}

.footer-links a:hover{
 color: #667eea;
}

.footer-contact p{
 color: #bdc3c7;
 margin-bottom: 0.5rem;
}

.footer-bottom{
 border-top: 1px solid #34495e;
 padding-top: 2rem;
 text-align: center;
}

.footer-bottom p{
 color: #bdc3c7;
 margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px){
 .container{
 padding: 0 15px;
}
 
 .hero-section .container{
 grid-template-columns: 1fr;
 gap: 2rem;
 text-align: center;
}
 
 .hero-title{
 font-size: 3rem;
}
 
 .about-content{
 grid-template-columns: 1fr;
 gap: 2rem;
}
 
 .contact-content{
 grid-template-columns: 1fr;
 gap: 2rem;
}
}

@media (max-width: 768px){
 .nav-menu{
 position: fixed;
 top: 80px;
 left: 0;
 width: 100%;
 height: calc(100vh - 80px);
 background: white;
 flex-direction: column;
 justify-content: flex-start;
 align-items: center;
 padding: 1rem 0 2rem 0;
 transform: translateX(-100%);
 transition: transform 0.3s ease-in-out;
 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
 z-index: 1000;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 display: flex;
 list-style: none;
 margin: 0;
}
 
 .nav-menu.active{
 transform: translateX(0);
}
 
 .nav-menu li{
 margin: 0.5rem 0;
 width: 100%;
 max-width: 300px;
 display: block;
 opacity: 1;
 visibility: visible;
 list-style: none;
 padding: 0;
}
 
 .nav-link{
 font-size: 1.25rem;
 padding: 1rem 2rem;
 display: block;
 text-align: center;
 border-radius: 8px;
 transition: all 0.3s ease;
 width: 100%;
 box-sizing: border-box;
}
 
 .nav-link:hover{
 background: #667eea;
 color: white;
 transform: translateY(-2px);
}
 
 /* Ensure all navigation items are visible */
 .nav-menu li:nth-child(1),
 .nav-menu li:nth-child(2),
 .nav-menu li:nth-child(3),
 .nav-menu li:nth-child(4),
 .nav-menu li:nth-child(5),
 .nav-menu li:nth-child(6){
 display: block !important;
 opacity: 1 !important;
 visibility: visible !important;
}
 
 .mobile-menu-toggle{
 display: flex;
 z-index: 1001;
}
 
 .mobile-menu-toggle.active span:nth-child(1){
 transform: rotate(45deg) translate(5px, 5px);
}
 
 .mobile-menu-toggle.active span:nth-child(2){
 opacity: 0;
}
 
 .mobile-menu-toggle.active span:nth-child(3){
 transform: rotate(-45deg) translate(7px, -6px);
}
 
 .menu-open{
 overflow: hidden;
}
 
 .site-header{
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 z-index: 1002;
 background: white;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
 
 .header-content{
 padding: 1rem 0;
}
 
 .logo-text{
 font-size: 1.5rem;
}
 
 .hero-title{
 font-size: 2.5rem;
}
 
 .hero-subtitle{
 font-size: 1.125rem;
}
 
 .hero-buttons{
 justify-content: center;
}
 
 .about-stats{
 grid-template-columns: 1fr;
 gap: 1rem;
}
 
 .services-grid{
 grid-template-columns: 1fr;
}
 
 .portfolio-grid{
 grid-template-columns: 1fr;
}
 
 .testimonial-author{
 flex-direction: column;
 text-align: center;
}
 
 .footer-content{
 grid-template-columns: 1fr;
 text-align: center;
}
 
 .social-links{
 justify-content: center;
}
}

@media (max-width: 480px){
 .container{
 padding: 0 1rem;
}
 
 .hero-title{
 font-size: 2rem;
}
 
 .section-title{
 font-size: 2rem;
}
 
 .nav-link{
 font-size: 1.125rem;
 padding: 0.75rem 1.5rem;
}
 
 .mobile-menu-toggle{
 padding: 8px;
}
 
 .mobile-menu-toggle span{
 width: 20px;
 height: 2px;
}
 
 .service-card,
 .contact-form{
 padding: 1.5rem;
}
 
 .testimonial-item{
 padding: 2rem;
}
 
 .btn{
 padding: 10px 20px;
 font-size: 0.9rem;
}
}

/* Animation Classes */
.fade-in{
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible{
 opacity: 1;
 transform: translateY(0);
}

/* Loading States */
.loading{
 opacity: 0.6;
 pointer-events: none;
}

/* Focus Styles for Accessibility */
.btn:focus,
.nav-link:focus,
input:focus,
textarea:focus{
 outline: 2px solid #667eea;
 outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high){
 .btn-primary{
 background: #000;
 color: #fff;
}
 
 .btn-secondary{
 border-color: #000;
 color: #000;
}
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce){
 *{
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
}
 
 html{
 scroll-behavior: auto;
}
}