*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    }
html{
    scroll-behavior:auto;
    scroll-padding-top:80px;
    
}
body{
    font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
    line-height:1.6;
    color:#fff;
    background:linear-gradient(135deg,#0c0c0c,#1a0a2e,#16213e,#0f3460,#0c0c0c);
    background-attachment:fixed;
    overflow-x:hidden
    }
    ::-webkit-scrollbar{width:10px}
    ::-webkit-scrollbar-track{
        background:#ffffff0d}
    ::-webkit-scrollbar-thumb{
        background:linear-gradient(45deg,#667eea,#764ba2);
        border-radius:5px}
        ::-webkit-scrollbar-thumb:hover{
            background:linear-gradient(45deg,#764ba2,#667eea)}
    .container{
        max-width:1200px;
         margin:0 auto;
         padding:0 20px}
    .section-padding{
        padding:80px 0}
    .text-center{
        text-align:center}
    
    .section-title{
        font-size:3rem;
        font-weight:700;
        margin-bottom:1rem;
        background:linear-gradient(45deg,#667eea,#764ba2);
        -webkit-background-clip:text; 
        -webkit-text-fill-color:transparent;
        background-clip:text;
        transform:translateY(20px);
        opacity:0;transition:all .2s ease-out}
    .section-title.animate{
        transform:translateY(0);
        opacity:1}
    .section-subtitle{
        font-size:1.2rem;
        color:#b0b0b0;
        margin-bottom:3rem;
        transform:translateY(20px);
        opacity:0;transition:all .2s ease-out .05s}
    .section-subtitle.animate{
        transform:translateY(0);
        opacity:1}
    .btn{padding:12px 24px;
        border:none;
        border-radius:50px;
        font-size:1rem;
        font-weight:600;
        cursor:pointer;
        transition:all .15s ease-out;
        text-decoration:none;
         display:inline-block;
         position:relative;
         overflow:hidden;
         transform:translateY(0)}
    .btn:before{
        content:"";
        position:absolute;
        top:0;
        left:-100%;
        width:100%;
        height:100%;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
        transition:left .3s ease}
    .btn:hover:before{
        left:100%}
    .btn-primary{
        background:linear-gradient(45deg,#667eea,#764ba2);
        color:#fff;
        box-shadow:0 4px 15px #667eea66}
    .btn-primary:hover{
            transform:translateY(-2px) scale(1.01);
            box-shadow:0 6px 20px #667eea99}
     .btn-primary:active{
                transform:translateY(0) scale(1);
                transition:all .05s ease-out}
    .btn-outline{
        background:transparent;
        color:#667eea;
        border:2px solid #667eea}
    .btn-outline:hover{
        background:#667eea;
        color:#fff;
        transform:translateY(-2px) scale(1.01);
        box-shadow:0 6px 20px #667eea66}
    .btn-secondary{
        background:linear-gradient(45deg,#f093fb,#f5576c);
        color:#fff;
        box-shadow:0 4px 15px #f093fb66}
    .btn-secondary:hover{
            transform:translateY(-2px) scale(1.01);
            box-shadow:0 6px 20px #f093fb99}
    .header{position:fixed;
          top:0;
          left:0;
          width:100%;
          background:#0c0c0cf2;
          -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
          z-index:1000;
          transition:all .15s ease;
          box-shadow:0 2px 10px #0000004d}
    .navbar{
        padding:1rem 0}
    .nav-container{
        display:flex;
        justify-content:space-between;
        align-items:center;
        max-width:1200px;
        margin:0 auto;
        padding:0 20px}
    .nav-logo h2{
        font-size:1.8rem;
        font-weight:700;
        color:#fff;
        transition:transform .15s ease}
    .nav-logo h2:hover{
        transform:scale(1.05)}
    .nav-logo span{
        color:#667eea}
    .nav-menu{
        display:flex;
        list-style:none;
        gap:2rem}
    .nav-item{
        position:relative}
    .nav-link{
        color:#fff;
        text-decoration:none;
        font-weight:500;
        transition:all .15s ease;
        padding:.5rem 0;
        position:relative}
    .nav-link:after{
        content:"";
        position:absolute;
        bottom:0;
        left:0;
        width:0;
        height:2px;
        background:linear-gradient(45deg,#667eea,#764ba2);
        transition:width .2s ease}
    .nav-link:hover:after{
        width:100%}
    .nav-link:hover{
        color:#667eea}
    .dropdown-menu{
        position:absolute;
        top:100%;
        left:0;
        background:#0c0c0cf2;
        -webkit-backdrop-filter:blur(10px);
        backdrop-filter:blur(10px);
        border-radius:8px;
        padding:1rem 0;
        min-width:180px;
        opacity:0;
        visibility:hidden;
        transform:translateY(-10px);
        transition:all .15s ease;
        list-style:none;
        box-shadow:0 4px 20px #0000004d}
    .dropdown:hover .dropdown-menu{
        opacity:1;
        visibility:visible;
        transform:translateY(0)}
    .dropdown-menu li{
        padding:.5rem 1.5rem;
        transition:background .15s ease}
    .dropdown-menu li:hover{
        background:#667eea1a}
    .dropdown-menu a{
        color:#b0b0b0;
        text-decoration:none;
        transition:color .15s ease}
    
    .dropdown-menu a:hover{
        color:#667eea}
    .nav-buttons{
        display:flex;
        gap:1rem;
        align-items:center}
    .currency-selector{
        position:relative}
    .currency-dropdown{
        padding:10px 35px 10px 16px;
        border:2px solid #667eea;
        border-radius:50px;
        background:#667eea1a;
        color:#667eea;
        font-size:.95rem;
        font-weight:600;
        cursor:pointer;
        transition:all .15s ease;
        outline:none;
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:right 12px center}
    .currency-dropdown:hover{
        background:#667eea33;
        border-color:#764ba2;
        transform:translateY(-2px)}
    .currency-dropdown:focus{
        box-shadow:0 0 12px #667eea80}
    .hamburger{
        display:none;
        flex-direction:column;
        cursor:pointer;
        gap:4px}
    .bar{
        width:25px;
        height:3px;
        background:#fff;
        transition:.15s ease;
        border-radius:3px}
    .hamburger.active .bar:nth-child(1){
        transform:rotate(-45deg) translate(-5px,6px)}
    .hamburger.active .bar:nth-child(2){
        opacity:0}
    .hamburger.active .bar:nth-child(3){
        transform:rotate(45deg) translate(-5px,-6px)}
    .hero{min-height:100vh;
        display:flex;
        align-items:center;
        padding-top:80px;
        position:relative;
        overflow:hidden}
    .hero:before{
        content:"";
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:radial-gradient(ellipse at center,rgba(102,126,234,.15) 0%,transparent 70%);
        pointer-events:none;
        animation:pulse 4s ease-in-out infinite}
        
        @keyframes pulse{0%,to{
            opacity:.5}
            50%{
                opacity:1}
        }
    .hero-container{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:4rem;
        align-items:center;
        max-width:1200px;
        margin:0 auto;
        padding:0 20px}
    .hero-content{
        animation:slideInLeft .3s ease-out}
    .hero-title{
        font-size:3.5rem;
        font-weight:700;
        line-height:1.2;
        margin-bottom:1.5rem;
        color:#fff}
    .rotating-text{
        position:relative;
        display:inline-block;
        height:1.4em;
        overflow:hidden;
        vertical-align:top;
        min-width:500px}
    .text-item{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        opacity:0;
        transform:translateY(100%);
        transition:all .3s ease-out;
        font-weight:700}
    .text-item.active{
        opacity:1;
        transform:translateY(0)}
    .text-item.fade-out{
        opacity:0;
        transform:translateY(-100%)}
    .text-item.fade-in{
        opacity:1;
        transform:translateY(0)}
    .text-item:nth-child(1){
        background:linear-gradient(45deg,#667eea,#764ba2);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        background-clip:text}
    .text-item:nth-child(2){
        background:linear-gradient(45deg,#f093fb,#f5576c);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        background-clip:text}
    .text-item:nth-child(3){
        background:linear-gradient(45deg,#667eea,#f093fb);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        background-clip:text}
    
    .text-item:nth-child(4){
        background:linear-gradient(45deg,#764ba2,#f5576c);
        font-size:40px;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        background-clip:text}
    .text-item:nth-child(5){
        background:linear-gradient(45deg,#764ba2,#f5576c);
        font-size:40px;
        -webkit-background-clip:text;
        
        -webkit-text-fill-color:transparent;
        background-clip:text}
    .text-item:nth-child(6){
        background:linear-gradient(45deg,#764ba2,#f5576c);
        font-size:40px;
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
        background-clip:text}
    .hero-description{
        font-size:1.2rem;
        color:#b0b0b0;
        margin-bottom:2rem;
        line-height:1.8;
        animation:slideInLeft .3s ease-out .05s both}
    .hero-buttons{
        display:flex;
        gap:1rem;
        margin-bottom:3rem;
        flex-wrap:wrap;
        animation:slideInLeft .3s ease-out .1s both}
    .hero-stats{
        display:flex;
        gap:2rem;
        animation:slideInLeft .3s ease-out .15s both}
    .stat-item{
        text-align:center;
        transform:translateY(20px);
        opacity:0;transition:all .2s ease-out}
    .stat-item.animate{
        transform:translateY(0);
        opacity:1}
    .stat-number{
        font-size:2.5rem;
        font-weight:700;
        color:#667eea;
        margin-bottom:.5rem}
    .stat-label{
        color:#b0b0b0;
        font-size:.9rem}
    .hero-image{
        display:flex;
        justify-content:center;
        animation:slideInRight .3s ease-out .1s both}
    .profile-container{
        position:relative;
        width:350px;
        height:350px;
        transform:scale(.9);
        animation:scaleIn .4s ease-out .15s both}
        
        @keyframes scaleIn{0%{
            transform:scale(.9);
            opacity:0}to{transform:scale(1);
            opacity:1}}
        
    .rotating-border{
        position:absolute;
        top:-10px;
        left:-10px;
        right:-10px;
        bottom:-10px;
        background:conic-gradient(from 0deg,#667eea,#764ba2,#f093fb,#f5576c,#667eea);
        border-radius:50%;
        animation:rotate 4s linear infinite}
    .profile-img{
        position:relative;
        width:100%;
        height:100%;
        border-radius:50%;
        object-fit:cover;
        border:5px solid #0c0c0c;
        z-index:2;
        transition:transform .2s ease}
    .profile-img:hover{
            transform:scale(1.05)}
            
            @keyframes rotate{
                0%{
                transform:rotate(0)}
                to{
                    transform:rotate(360deg)}
            }
            @keyframes slideInLeft{
                0%{
                    opacity:0;
                    transform:translate(-30px)}
                    to{
                        opacity:1;
                        transform:translate(0)}}
                        
            @keyframes slideInRight{
                0%{
                    opacity:0;
                    transform:translate(30px)}
                    to{opacity:1;
                    transform:translate(0)}}
    .about{
        background:linear-gradient(135deg,#1a0a2e,#16213e,#0f3460)}
    .about-content{
        display:grid;
        grid-template-columns:1fr 2fr;
        gap:4rem;
        align-items:center}
    .about-image{
            position:relative;
            transform:translate(-30px);
            opacity:0;
            transition:all .3s ease-out}
    .about-image.animate{
        transform:translate(0);
        opacity:1}
    .about-img{
        width:100%;
        max-width:400px;
        border-radius:20px;
        box-shadow:0 20px 40px #0000004d;
        transition:transform .2s ease}
    .about-img:hover{
        transform:translateY(-5px) scale(1.01)}
    .about-text{
        opacity:0;
        transform:translateY(30px);
        transition:all .3s ease-out .05s}
    .about-text.animate{
        opacity:1;
        transform:translateY(0)}
    .about-description{
        font-size:1.1rem;
        color:#b0b0b0;
        margin-bottom:1.5rem;
        line-height:1.8}
    .about-highlights{
        display:grid;
        gap:1.5rem;
        margin-top:2rem}
    .highlight-item{
        transform:translateY(20px);
        opacity:0;
        transition:all .2s ease-out}
    .highlight-item.animate{
        transform:translateY(0);
        opacity:1}
    .highlight-item h4{
        color:#667eea;
        margin-bottom:.5rem;
        font-size:1.2rem}
    .highlight-item p{
        color:#b0b0b0}
    .projects{
        background:linear-gradient(135deg,#0c0c0c,#1a0a2e,#16213e)}
    .project-filters{
        display:flex;
        justify-content:center;
        gap:1rem;
        margin-bottom:3rem;
        flex-wrap:wrap}
    .filter-btn{
        padding:10px 24px;
        border:2px solid #667eea;
        border-radius:50px;
        background:transparent;
        color:#667eea;
        font-size:.95rem;
        font-weight:600;
        cursor:pointer;
        transition:all .15s ease}
    .filter-btn:hover{
        background:#667eea1a;
        transform:translateY(-2px)}
    .filter-btn.active{
        background:linear-gradient(45deg,#667eea,#764ba2);
        color:#fff;
        box-shadow:0 4px 15px #667eea66}
    .projects-grid{
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
        gap:1.5rem;
        margin-top:3rem}
    .project-card{
        background:#ffffff0d;
        border-radius:12px;
        overflow:hidden;
        transition:all .2s ease-out;
        opacity:1;
        transform:translateY(0) scale(1);
        -webkit-backdrop-filter:blur(10px);
        backdrop-filter:blur(10px);
        border:1px solid rgba(255,255,255,.1)}
    .project-card.animate{
        opacity:1;
        transform:translateY(0) scale(1)}
    .project-card:hover{
        transform:translateY(-5px) scale(1.01);
        box-shadow:0 15px 30px #667eea66;
        border-color:#667eea80}
    .project-image{
        width:100%;
        height:160px;
        overflow:hidden;
        position:relative}
    .project-image:after{
        content:"";
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.3) 100%);
        opacity:0;
        transition:opacity .2s ease}
    .project-card:hover.project-image:after{
        opacity:1}
    .project-image img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition:transform .2s ease}
    .project-card:hover .project-image img{
        transform:scale(1.05)}
    .project-content{
        padding:1rem}
    .project-title{
        font-size:1.1rem;
        font-weight:600;
        margin-bottom:.4rem;
        color:#fff;
        line-height:1.3}
    .project-description{
        color:#b0b0b0;
        margin-bottom:1rem;
        line-height:1.5;
        font-size:.9rem;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden}
    .project-buttons{
        display:flex;
        gap:.5rem;
        flex-wrap:wrap}
    .project-buttons .btn{
        flex:1;
        min-width:90px;
        text-align:center;
        padding:8px 14px;
        font-size:.85rem}
    .skills{
        background:linear-gradient(135deg,#16213e,#0f3460,#1a0a2e)}
    .skills-grid{
        display:grid;
        gap:2rem;
        margin-top:3rem}
    .skill-item{
        opacity:0;
        transform:translate(-30px);
        transition:all .3s ease-out}
    .skill-item.animate{
        opacity:1;
        transform:translate(0)}
    .skill-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin-bottom:.5rem}
    .skill-header h4{
        font-size:1.2rem;
        color:#fff}
    .skill-years{
        
        color:#667eea;
        font-weight:600}
    .skill-bar{
        background:#ffffff1a;
        height:10px;
        border-radius:5px;
        overflow:hidden}
    .skill-progress{
        height:100%;
        background:linear-gradient(45deg,#667eea,#764ba2);
        border-radius:5px;
        width:0%;
        transition:width .6s ease-out}
    .pricing{
        background:linear-gradient(135deg,#0c0c0c,#1a0a2e,#16213e)}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}.pricing-card{background:#ffffff0d;border-radius:20px;padding:2rem;text-align:center;position:relative;transition:all .2s ease-out;opacity:0;transform:translateY(30px) scale(.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.pricing-card.animate{opacity:1;transform:translateY(0) scale(1)}.pricing-card:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 15px 30px #667eea66}.pricing-card.featured{border:2px solid #667eea;transform:scale(1.05)}.pricing-card.featured:hover{transform:translateY(-5px) scale(1.06)}.pricing-badge{position:absolute;top:-10px;left:50%;transform:translate(-50%);background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;font-weight:600}.pricing-header h3{font-size:1.5rem;margin-bottom:1rem;color:#fff}.price{margin-bottom:2rem}.currency-symbol{font-size:1.5rem;color:#667eea;vertical-align:top}.amount{font-size:3rem;font-weight:700;color:#667eea;transition:all .2s ease}.period{color:#b0b0b0;font-size:1rem}.pricing-features{list-style:none;margin-bottom:2rem}.pricing-features li{padding:.5rem 0;color:#b0b0b0;border-bottom:1px solid rgba(255,255,255,.1)}.pricing-features li:last-child{border-bottom:none}.experience{background:linear-gradient(135deg,#1a0a2e,#16213e,#0f3460)}.timeline{position:relative;max-width:800px;margin:0 auto}.timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,#667eea,#764ba2);transform:translate(-50%)}.timeline-item{position:relative;margin-bottom:3rem;opacity:0;transform:translateY(30px);transition:all .3s ease-out}.timeline-item.animate{opacity:1;transform:translateY(0)}.timeline-item:nth-child(odd) .timeline-content{margin-right:50%;padding-right:2rem;text-align:right}.timeline-item:nth-child(2n) .timeline-content{margin-left:50%;padding-left:2rem}.timeline-item:before{content:"";position:absolute;left:50%;top:20px;width:12px;height:12px;background:#667eea;border-radius:50%;transform:translate(-50%);z-index:2;transition:all .2s ease}.timeline-item:hover:before{transform:translate(-50%) scale(1.3);box-shadow:0 0 15px #667eeacc}.timeline-date{display:inline-block;background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;padding:.5rem 1rem;border-radius:20px;font-weight:600;margin-bottom:1rem}.timeline-content h3{font-size:1.3rem;margin-bottom:.5rem;color:#fff}.timeline-content h4{color:#667eea;margin-bottom:1rem}.timeline-content p{color:#b0b0b0;line-height:1.6}.services{background:linear-gradient(135deg,#0c0c0c,#1a0a2e,#16213e)}.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:3rem}.service-card{background:#ffffff0d;border-radius:15px;padding:2rem;text-align:center;transition:all .2s ease-out;opacity:0;transform:translateY(30px) scale(.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.service-card.animate{opacity:1;transform:translateY(0) scale(1)}.service-card:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 15px 30px #667eea66}.service-icon{font-size:3rem;margin-bottom:1rem;transform:scale(1);transition:transform .2s ease}.service-card:hover .service-icon{transform:scale(1.05) rotate(5deg)}.service-card h3{font-size:1.3rem;margin-bottom:1rem;color:#fff}.service-card p{color:#b0b0b0;line-height:1.6}.testimonials{background:linear-gradient(135deg,#16213e,#0f3460,#1a0a2e)}.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:4rem}.testimonial-card{background:#ffffff0d;border-radius:15px;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);transition:all .2s ease-out;opacity:1;transform:translateY(0)}.testimonial-card.animate{opacity:1;transform:translateY(0)}.testimonial-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #667eea4d}.testimonial-rating{color:gold;margin-bottom:1rem;font-size:1.2rem}.testimonial-text{color:#b0b0b0;font-style:italic;margin-bottom:1rem;line-height:1.6}.testimonial-author{color:#667eea;font-weight:600}.review-form{max-width:600px;margin:0 auto;background:#ffffff0d;border-radius:15px;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(30px);transition:all .3s ease-out}.review-form.animate{opacity:1;transform:translateY(0)}.review-form h3{text-align:center;margin-bottom:2rem;color:#fff}.form-group{margin-bottom:1.5rem}.form-group input,.form-group textarea{width:100%;padding:1rem;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:#ffffff0d;color:#fff;font-size:1rem;transition:all .15s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 12px #667eea66;transform:translateY(-2px)}.form-group input::placeholder,.form-group textarea::placeholder{color:#b0b0b0}.rating-input{display:flex;align-items:center;gap:1rem}.stars{display:flex;gap:.25rem}.star{font-size:1.5rem;color:#666;cursor:pointer;transition:all .15s ease}.star:hover,.star.active{color:gold;transform:scale(1.1)}.contact{background:linear-gradient(135deg,#0c0c0c,#1a0a2e,#16213e)}.contact-content{display:grid;grid-template-columns:1fr 2fr;gap:4rem;margin-top:3rem}.contact-info{display:flex;flex-direction:column;gap:2rem;opacity:0;transform:translate(-30px);transition:all .3s ease-out}.contact-info.animate{opacity:1;transform:translate(0)}.contact-item{transition:transform .15s ease}.contact-item:hover{transform:translate(5px)}.contact-item h4{color:#667eea;margin-bottom:.5rem;font-size:1.2rem}.contact-item p{color:#b0b0b0;font-size:1.1rem}.contact-form{background:#ffffff0d;border-radius:15px;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);opacity:0;transform:translateY(30px);transition:all .3s ease-out .05s}.contact-form.animate{opacity:1;transform:translateY(0)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.newsletter{background:linear-gradient(135deg,#1a0a2e,#16213e,#0f3460);text-align:center}.newsletter-content{opacity:0;transform:translateY(30px);transition:all .3s ease-out}.newsletter-content.animate{opacity:1;transform:translateY(0)}.newsletter-content h2{font-size:2.5rem;margin-bottom:1rem;color:#fff}.newsletter-content p{font-size:1.2rem;color:#b0b0b0;margin-bottom:2rem}.newsletter-form{display:flex;max-width:500px;margin:0 auto;gap:1rem}.newsletter-form input{flex:1;padding:1rem;border:1px solid rgba(255,255,255,.2);border-radius:50px;background:#ffffff0d;color:#fff;font-size:1rem;transition:all .15s ease}.newsletter-form input:focus{outline:none;border-color:#667eea;box-shadow:0 0 12px #667eea66}.newsletter-form input::placeholder{color:#b0b0b0}.footer{background:#0c0c0c;padding:3rem 0 1rem}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem;opacity:0;transform:translateY(30px);transition:all .3s ease-out}.footer-content.animate{opacity:1;transform:translateY(0)}.footer-section h3,.footer-section h4{margin-bottom:1rem;color:#fff}.footer-section p,.footer-section li{color:#b0b0b0;line-height:1.6}.footer-section ul{list-style:none}.footer-section ul li{margin-bottom:.5rem}.footer-section a{color:#b0b0b0;text-decoration:none;transition:color .15s ease}.footer-section a:hover{color:#667eea}.social-links{display:flex;gap:1rem}.social-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#ffffff1a;border-radius:50%;transition:all .15s ease}.social-link:hover{background:#667eea;transform:translateY(-3px) scale(1.05)}.social-link img{width:20px;height:20px;filter:invert(1)}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);color:#b0b0b0}@media (max-width: 768px){.projects-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}@media (max-width: 680px){.nav-menu,.nav-buttons{position:fixed;left:-100%;top:70px;flex-direction:column;background:#0c0c0cf2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;text-align:center;transition:.2s ease;padding:2rem 0}.nav-menu.active,.nav-buttons.active{left:0}.nav-menu{gap:1rem}.nav-buttons{top:300px;gap:1rem;padding:1rem 0}.hamburger{display:flex}.dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;background:#ffffff1a;margin-top:1rem}.hero-container{grid-template-columns:1fr;text-align:center;gap:2rem}.hero-title{font-size:2.5rem}.rotating-text{min-width:300px}.hero-buttons{justify-content:center;flex-wrap:nowrap;overflow-x:auto;gap:.5rem;padding:0 10px}.hero-buttons .btn{flex-shrink:0;white-space:nowrap;padding:10px 18px;font-size:.9rem}.hero-stats{justify-content:center;flex-wrap:wrap;gap:1rem}.about-content{grid-template-columns:1fr;text-align:center;gap:2rem}.contact-content{grid-template-columns:1fr;gap:2rem}.form-row{grid-template-columns:1fr}.newsletter-form{flex-direction:column;gap:1rem}.timeline:before{left:20px}.timeline-item:nth-child(odd) .timeline-content,.timeline-item:nth-child(2n) .timeline-content{margin-left:40px;margin-right:0;padding-left:1rem;padding-right:0;text-align:left}.timeline-item:before{left:20px;transform:translate(-50%)}.section-title{font-size:2rem}.section-padding{padding:60px 0}.project-buttons{flex-direction:column}.project-buttons .btn{width:100%}.project-filters{gap:.5rem}.filter-btn{padding:8px 16px;font-size:.85rem}.projects-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}@media (max-width: 480px){.hero-buttons{flex-direction:row;justify-content:center;align-items:center;gap:.5rem;overflow-x:auto;padding:0 10px;scrollbar-width:none;-ms-overflow-style:none}.hero-buttons::-webkit-scrollbar{display:none}.hero-buttons .btn{flex-shrink:0;padding:8px 16px;font-size:.85rem;min-width:auto}.hero-title{font-size:2rem}.rotating-text{min-width:350px}.services-grid,.pricing-grid{grid-template-columns:1fr}.projects-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.project-image{height:120px}.project-content{padding:.75rem}.project-title{font-size:1rem}.project-description{font-size:.85rem}}.fade-in{opacity:0;transform:translateY(20px);transition:all .2s ease-out}.fade-in.animate{opacity:1;transform:translateY(0)}.slide-in-left{opacity:0;transform:translate(-30px);transition:all .2s ease-out}.slide-in-left.animate{opacity:1;transform:translate(0)}.slide-in-right{opacity:0;transform:translate(30px);transition:all .2s ease-out}.slide-in-right.animate{opacity:1;transform:translate(0)}*{will-change:auto}.hero-container,.project-card,.service-card,.pricing-card,.testimonial-card{will-change:transform}html{scroll-behavior:auto}@media (prefers-reduced-motion: no-preference){html{scroll-behavior:auto}}.btn,.project-card,.service-card,.pricing-card,.testimonial-card,.nav-link,.filter-btn{transform:translateZ(0);backface-visibility:hidden;perspective:1000px}
       
       @media (min-width:700px) {
        .rotating-text{
            min-width:400px;
        }
        }
        @media (min-width:1024px) {
        .rotating-text{
            min-width:500px;
        }
        }