/* =========================================
   RESPONSIVE CSS
========================================= */


/* =========================================
   LARGE LAPTOPS
========================================= */

@media (max-width:1200px){

  .container{
    width:94%;
  }

  .hero{
    gap:40px;
    padding:120px 6% 60px;
  }

  .hero h1{
    font-size:3rem;
  }

  .about h2{
    font-size:3.5rem;
  }

  .service-row{
    gap:60px;
  }

  .process-grid{
    gap:20px;
  }

}



/* =========================================
   SMALL LAPTOPS / TABLETS
   KEEP DESKTOP LAYOUT
========================================= */

@media (max-width:900px){

  section{
    padding:100px 0;
  }

  .nav-links{
    gap:24px;
  }

  .socials{
    gap:10px;
  }

  .hero{
    grid-template-columns:1.1fr .9fr;
    gap:30px;
    padding:120px 5% 60px;
  }

  .hero h1{
    font-size:2.7rem;
    line-height:1.1;
  }

  .hero p{
    font-size:1rem;
  }

  .hero-main-image img{
    width:90%;
  }

  .hero-card{
    padding:8px 10px;
  }

  .hero-card strong{
    font-size:.9rem;
  }

  .hero-stats{
    gap:16px;
  }

  .stat-card{
    min-width:160px;
  }

  .stat-card h3{
    font-size:1.8rem;
  }

  .about-grid{
    gap:60px;
  }

  .about h2{
    font-size:3rem;
  }

  .about-right p{
    font-size:1rem;
  }

  .service-row{
    gap:40px;
    margin-bottom:100px;
  }

  .service-content{
    padding:40px;
  }

  .service-content h3{
    font-size:1.8rem;
  }

  .service-image img{
    max-width:380px;
  }

  .section-header{
    margin:0 auto 80px;
  }

  .section-header h2{
    font-size:3rem;
  }

  .testimonials-slider{
    min-height:460px;
    height:auto;
  }

  .testimonial-card{
    padding:40px;
  }

  .seo-content ul li{
    padding:20px 30px;
  }

  .seo-content ul li .card{
    padding:28px;
  }

  .process-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .contact-form{
    padding:50px;
  }

}



/* =========================================
   MOBILE START
========================================= */

@media (max-width:750px){

  html{
    font-size:15px;
    overflow-x:hidden;
  }

  body{
    overflow-x:hidden;
  }

  section{
    padding:80px 0;
  }

  .container{
    width:98%;
  }



  /* =========================================
     MOBILE NAVIGATION
  ========================================= */

  .header{
    padding:14px 0;
  }

  .hamburger{
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1201;
  }

  .nav{

    position:fixed;

    top:0;
    right:-100%;

    width:100%;
    height:100vh;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    transition:.45s ease;

    z-index:1200;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  .nav.active{
    right:0;
  }

  .nav-links{

    flex-direction:column;

    gap:30px;
  }

  .nav-links a{

    font-size:1.15rem;
    font-weight:700;
  }

  body.nav-open{
    overflow:hidden;
  }

  /* =========================================
     HERO
  ========================================= */

  .hero{

    grid-template-columns:1fr;

    text-align:center;

    gap:50px;

    min-height:auto;

    padding:140px 20px 80px;
  }

  .hero-content{
    order:2;
  }

  .hero-visual{
    order:1;
  }

  .hero h1{

    font-size:2.5rem;

    line-height:1.1;

    letter-spacing:-2px;
  }

  .hero p{
    font-size:1rem;
  }

  .hero-buttons{

    justify-content:center;

    flex-direction:column;

    width:100%;
  }

  .hero-buttons a{
    width:100%;
  }

  .hero-stats{

    justify-content:center;

    flex-direction:column;

    width:100%;
  }

  .stat-card{

    width:100%;

    min-width:100%;

    padding:16px 18px;
  }

  .hero-main-image img{

    width:75%;

    margin:auto;
  }


  .hero-expert{

    position:relative;

    bottom:auto;
    left:auto;

    transform:none;

    margin-top:20px;

    width:100%;
  }



  /* =========================================
     ABOUT
  ========================================= */

  .about{
    overflow:visible;
  }

  .about-grid{

    grid-template-columns:1fr;

    gap:50px;
  }

  .about-left{

    position:relative;

    top:auto;
  }

  .about h2{

    font-size:2.4rem;

    max-width:100%;
  }

  .about-right::before{
    inset:-15px;
  }

  .about-features{
    grid-template-columns:1fr;
  }

  .feature-item{
    padding:18px;
  }



  /* =========================================
     LOOP BANNER
  ========================================= */

  .loop-banner{
    padding:25px 0;
  }

  .loop-content{
    gap:24px;
  }

  .loop-content span{
    font-size:28px;
  }

  .loop-content img{
    width:100px;
  }



  /* =========================================
     SERVICES
  ========================================= */

  .service-row,
  .service-row.reverse{

    grid-template-columns:1fr;

    direction:ltr;

    gap:40px;

    margin-bottom:80px;
  }

  .service-content{

    padding:30px 22px;
  }

  .service-content h3{
    font-size:1.7rem;
  }

  .service-content p{
    max-width:100%;
  }

  .service-image img{
    max-width:100%;
  }

  .service-image::before{

    width:240px;
    height:240px;
  }


  /* =========================================
     TIMELINE
  ========================================= */

  .seo-content h2{
    margin-bottom:60px;
  }

  .seo-content .timeline::before,
  .seo-content .progress-line{
    left:20px;
  }

  .seo-content ul li,
  .seo-content ul li:nth-child(even){

    width:100%;

    left:0;

    text-align:left;

    padding:0 0 35px 55px;
  }

  .seo-content ul li::before,
  .seo-content ul li:nth-child(even)::before{
    left:20px;
  }

  .seo-content ul li.active::after,
  .seo-content ul li:nth-child(even).active::after{
    left:20px;
  }

  .seo-content ul li .card{
    padding:22px;
  }



  /* =========================================
     PROCESS
  ========================================= */

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

  .process-card{
    padding:30px 22px;
  }



  /* =========================================
     FAQ
  ========================================= */

  .faq-wrapper{
    gap:18px;
  }

  .faq-question{
    padding:22px 18px;
  }

  .faq-question span{
    font-size:1rem;
  }

  .faq-question i{

    width:38px;
    height:38px;
  }

  .faq-answer p{
    padding:0 18px 22px;
  }



  /* =========================================
     CONTACT
  ========================================= */

  .contact-form{

    padding:32px 20px;

    border-radius:26px;
  }

  .form-group input,
  .form-group textarea{

    padding:15px 16px;
  }

  .contact-form .btn-primary{
    width:100%;
  }



  /* =========================================
     FOOTER
  ========================================= */

  .footer .container{

    flex-direction:column;

    text-align:center;
  }

}

@media (max-width:750px){

  .testimonials{
    padding:70px 0;
  }

  .testimonial-slider{
    max-width:100%;
  }

  .testimonial-card{

    padding:28px 22px;

    border-radius:18px;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }

  .stars i{
    font-size:.9rem;
    margin-bottom:12px;
  }

  .testimonial-card p{

    font-size:.95rem;

    line-height:1.75;

    margin-bottom:22px;
  }

  .client{
    gap:12px;
  }

  .client img{

    width:46px;
    height:46px;
  }

  .client h4{
    font-size:.95rem;
  }

}