* {
       margin: 0;
       background-color: #111;
        padding: 0;
        box-sizing: border-box;
        
   }

   

   body {


       color: #ffffff;
       overflow-x: hidden;
   }


   /* service */
   .anton-regular {
       font-family: "Anton", sans-serif;
       font-weight: 100;
       font-style: normal;
   }
   /* section1 */
       /* Navigation */
        .section1-nav {
           
            top: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            background-color: transparent;
            font-family: Instrument Sans, Arial, sans-serif;
            z-index: 1000;
        }

        .section1-nav-left {
            display: flex;
            gap: 30px;
        }

        .section1-nav-center {
            font-size: 30px;
            font-weight: bold;
            letter-spacing: 2px;
            background-color: transparent;
             z-index: 1000;
        }

        .section1-nav-right {
            display: flex;
            gap: 30px;
        }

        .section1-nav a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 1px;
            transition: opacity 0.3s ease;
        }

        .section1-nav a:hover {
            opacity: 0.7;
        }

        /* Main Content */
        .section1-main-container {
            height:100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding-top: 30px;
            padding-bottom: 0px;
            
        }

        /* Product Grid - Original orbital rotation */
        .section1-product-grid {
            position: absolute;
            width: 700px;
            height: 700px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 0px;
            z-index: 0;
            animation: section1OrbitRotation 20s linear infinite;
            transform-origin: center center;
            
        }

        .section1-product-item {
            background-color: #111;
            overflow: hidden;
            transition: transform 0.3s ease;
            animation: section1CounterRotation 20s linear infinite;
            transform-origin: center center;
           
        }


        .section1-product-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
           
        }

        /* Original animations from first code */
        @keyframes section1OrbitRotation {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes section1CounterRotation {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(-360deg);
            }
        }

        /* Individual item spin animation - happens only once */
        @keyframes section1ItemCycleOnce {
            0% {
                transform: rotate(0deg) scale(1);
                opacity: 1;
            }
            /* Start 360° rotation and scale down */
            20% {
                transform: rotate(180deg) scale(0.7);
                opacity: 0.8;
            }
            35% {
                transform: rotate(360deg) scale(0.3);
                opacity: 0.3;
            }
            /* Disappear */
            45% {
                transform: rotate(360deg) scale(0);
                opacity: 0;
            }
            /* Stay disappeared for 1 second */
            65% {
                transform: rotate(360deg) scale(0);
                opacity: 0;
            }
            /* Reappear with 360° rotation and scale up */
            75% {
                transform: rotate(540deg) scale(0.3);
                opacity: 0.3;
            }
            85% {
                transform: rotate(720deg) scale(0.7);
                opacity: 0.8;
            }
            100% {
                transform: rotate(720deg) scale(1);
                opacity: 1;
            }
        }

        /* Grid positioning with individual animations starting after orbital 180° rotation (10s delay) - ONE TIME ONLY */
        .section1-product-item:nth-child(1) {
            grid-area: 1 / 1 / 2 / 2;
            animation: 
                section1CounterRotation 20s linear infinite,
                section1ItemCycleOnce 8s ease-in-out 10s;
        }

        .section1-product-item:nth-child(2) {
            grid-area: 1 / 2 / 2 / 3;
            animation: 
                section1CounterRotation 20s linear infinite,
                section1ItemCycleOnce 8s ease-in-out 10.3s;
        }

        .section1-product-item:nth-child(3) {
            grid-area: 1 / 3 / 2 / 4;
            animation: 
                section1CounterRotation 20s linear infinite,
                section1ItemCycleOnce 8s ease-in-out 10.6s;
        }

        .section1-product-item:nth-child(4) {
            grid-area: 2 / 1 / 3 / 2;
            animation: 
                section1CounterRotation 20s linear infinite,
                section1ItemCycleOnce 8s ease-in-out 10.9s;
        }

        .section1-product-item:nth-child(5) {
            grid-area: 2 / 3 / 3 / 4;
            animation: 
                section1CounterRotation 20s linear infinite,
                section1ItemCycleOnce 8s ease-in-out 11.2s;
        }

        .section1-product-item:nth-child(6) {
            grid-area: 3 / 1 / 4 / 2;
            animation: 
                section1CounterRotation 20s linear infinite,
                section1ItemCycleOnce 8s ease-in-out 11.5s;
        }

        .section1-product-item:nth-child(7) {
            grid-area: 3 / 2 / 4 / 3;
            animation: 
                section1CounterRotation 20s linear infinite,
                section1ItemCycleOnce 8s ease-in-out 11.8s;
        }

        .section1-product-item:nth-child(8) {
            grid-area: 3 / 3 / 4 / 4;
            animation: 
                section1CounterRotation 20s linear infinite,
                section1ItemCycleOnce 8s ease-in-out 12.1s;
        }

         /* BOLDMARK Title */
         
        .section1-title {
            font-size: 300px;
            font-weight: 900;
            letter-spacing: 0px;
            text-align: center;
            z-index: 4000;
            position: relative;
            text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5);
            mix-blend-mode: difference;
            font-family: "Anton", sans-serif;
           color: white;
           display: flex;
            background-color: transparent;

        }
   
        


    
        .section1-footer {
           
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            font-family: Instrument Sans, Arial, sans-serif;
            font-size: 14px;
            color: #a4a4a4;
          
           
           
        }
       


        .section1-footer-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section1-footer-center {
            font-weight: 500;
        }

        .section1-footer-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* Copyright symbol */
        .section1-copyright-symbol {
            width: 20px;
            height: 20px;
            border: 1px solid #888;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        /* Location marker */
        .section1-location-marker {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Responsive Design */
      

   /* section2 */
     .section2-container {
           
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            padding: 0px 20px;
            font-family: 'Arial', sans-serif;
            position: relative;
        
            padding-bottom: 0px;
            max-width: 1400px;
            width: 100%;
            margin: 0 auto;
            perspective: 1200px;
            transform: scale(0.3);
            cursor: pointer;
        }

        /* Background that rotates */
        .section2-container::before {
            content: '';
            position: absolute;
            top: 0px;
            left: 0;
            right: 0;
            bottom: 0;
            background: white;
            transform-style: preserve-3d;
            transition: transform 0.1s ease-out;
            z-index: -1;
            transform: var(--bg-rotation, rotateZ(0deg));
        }

        .section2-star {
            font-size: 80px;
            color: #141414;
            font-weight: bold;
            margin-bottom: 40px;
            margin-top: 300px;
            position: relative;
            z-index: 1;
            background-color: white;
        }

        .section2-main-content {
            text-align: center;
            position: relative;
            z-index: 1;
             background-color: white;
        }

        .section2-title {
            font-size: 11rem;
            font-weight: 100;
            line-height: 1.1;
            margin-bottom: 40px;
            letter-spacing: -0.02em;
            font-family: "Anton", sans-serif;
            position: relative;
            z-index: 1;
             background-color: white;
        }

        .section2-title-line1 {
            color: #000;
            display: block;
             background-color: white;
        }

        .section2-title-line1 span {
            color: #888;
             background-color: white;
        }

        .section2-title-line2 {
            color: #000;
            display: block;
             background-color: white;
        }

        .section2-description {
            max-width: 530px;
            font-family: "Instrument Sans", sans-serif;
            margin: 0 auto 80px auto;
            margin-top: 40px;
            font-size: 16px;
            line-height: 1.5;
            color: black;
            text-align: center;
            position: relative;
            z-index: 1;
             background-color: white;
        }

        .section2-stats {
            display: flex;
            align-items: center;
            gap: 880px;
            position: relative;
            z-index: 1;
             background-color: white;
        }

        .section2-stat {
            text-align: center;
             background-color: white;
        }

        .section2-stat div {
            display: flex;
             background-color: white;
        }

        .section2-stat-number {
            font-size: 8rem;
            font-weight: 900;
            color: #000;
            line-height: 1;
            margin-bottom: 10px;
            font-family: "Anton", sans-serif;
             background-color: white;
        }

        .section2-stat-plus {
            color: #ccc;
            font-size: clamp(3rem, 6vw, 6rem);
             background-color: white;
        }

        .section2-stat-label {
            font-size: 14px;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 500;
             background-color: white;
             padding-top: 40px;
        }

        .section2-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 1300px;
            margin-top: 40px;
            padding: 120px 20px;
            /* padding-top: 50px; */
            position: relative;
            z-index: 1;
             background-color: white;
        }

        .section2-footer-left {
            display: flex;
            gap: 250px;
            align-items: center;
            flex: 1;
             background-color: white;
        }

        .section2-footer-center {
            flex: 0 0 auto;
            display: flex;
            justify-content: center;
            margin: 0 60px;
             background-color: white;
        }

        .section2-footer-right {
            display: flex;
            gap: 250px;
            align-items: center;
            flex: 1;
            justify-content: flex-end;
             background-color: white;
        }

        .section2-social-icon {
            width: 40px;
            height: 40px;
            background-color: transparent;
            border-radius: 50%;
            border: 0.2px solid rgb(236, 234, 234);
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
            text-decoration: none;
            font-size: 18px;
            transition: all 0.3s ease;
        }

        .section2-social-icon:hover {
            color: #000;
            border-color: #777777;
            transform: translateY(-2px);
        }

        .section2-social-icon svg {
            width: 15px;
            height: 15px;
            fill: black;
            transition: fill 0.3s ease;
             background-color: white;
        }

        .section2-social-icon:hover svg {
            fill: #000;
             background-color: white;
        }

        .section2-all-services-btn {
            border: none;
            padding: 0;
            cursor: pointer;
            display: flex;
            align-items: stretch;
            text-transform: uppercase;
            font-size: 14px;
            font-weight: 100;
            transition: all 0.3s ease;
            overflow: hidden;
            background: transparent;
            margin-top: 0px;
            color: #797979;
        }

        .section2-btn-arrow-box {
            background-color: #666;
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.6s ease, background 0.3s ease;
        }

        .section2-btn-arrow-box:hover {
            transform: rotate(180deg) scale(0.5);
        }

        .section2-btn-text-box {
            background-color: black;
            color: white;
            padding: 15px 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .section2-btn-arrow {
            font-size: 16px;
            font-weight: bold;
            background-color: #666;
            transition: transform 0.6s ease;
        }

        .section2-btn-arrow-box:hover .section2-btn-arrow{
            transform: rotate(-180deg);
        }

        .section2-all-services-btn:hover .section2-btn-arrow-box {
            background-color: #666;
        }

        .section2-all-services-btn:hover .section2-btn-text-box {
            background-color: black;
        }

      

   /* section3 */
   .section3-container {
       width: 100%;
       height: 95vh;
       background-color: #111;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       position: relative;
       overflow: hidden;
   }

   .section3-header {
       position: absolute;
       top: 180px;
       left: 50%;
       transform: translateX(-50%);
       color: #ffffff;
       font-family: "Instrument Sans", sans-serif;
       font-size: 14px;
       font-weight: 100;
       letter-spacing: 0px;
       text-transform: uppercase;
       background-color: #111;
   }

   .section3-main-text {
       display: flex;
       align-items: center;
       font-size: 10rem;
       overflow: hidden;
       font-weight: 100;
       line-height: 0.9;
       text-transform: uppercase;
       letter-spacing: 0px;
       font-family: "Anton", sans-serif;
       background-color: #111;


   }

   .section3-selected {
       font-family: "Anton", sans-serif;
       font-size: 10rem;
       font-weight: 100;
       color: #ffffff;
       letter-spacing: -2px;
       line-height: 0.9;
       background-color: #111;
       text-transform: uppercase;
   }

   .section3-projects {
       font-family: "Anton", sans-serif;
       font-size: 10rem;
       font-weight: 100;
       color: rgba(255, 255, 255, 0.3);
       letter-spacing: -2px;
       background-color: #111;
       padding-left: 30px;
       text-transform: uppercase;
   }

   .section3-year {
       position: absolute;
       bottom: 150px;
       left: 45px;
       color: rgba(255, 255, 255, 0.6);
       font-family: 'Arial', sans-serif;
       font-size: 14px;
       font-weight: 400;
       background-color: #111;
   }

   .section3-number {
       position: absolute;
       bottom: 150px;
       right: 45px;
       color: rgba(255, 255, 255, 0.6);
       font-family: 'Arial', sans-serif;
       font-size: 14px;
       font-weight: 400;
       background-color: #111;
   }

   /* Responsive adjustments */
  

   /* portfolio */
   .portfolio {
       background-color: #111;
   }

   .portfolio-frame-container:first-child {
       margin-top: 0px;
   }

   .portfolio-frame-container {
       margin: 150px auto;
       width: 70%;
       transition: width 0.3s ease;
       position: relative;
       background-color: #111;


   }

   .portfolio-frame {
       width: 100%;
       height: 700px;
       overflow: hidden;
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
       background-color: #111;
       position: relative;
   }

   .portfolio-frame img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       background-color: #111;
   }

   .portfolio-center-button {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 200px;
       height: 200px;
       background: #111;
       color: white;
       font-size: 2px;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 3;
       cursor: pointer;
       transition: transform 0.6s ease, background 0.3s ease;
       background-color: #111;
   }

   .portfolio-center-button:hover {
       transform: translate(-50%, -50%) rotate(180deg) scale(0.9);

   }

   .portfolio-center-button svg {
       width: 60px;
       height: 60px;
       transition: transform 0.6s ease;
   }

   .portfolio-center-button:hover svg {
       transform: rotate(-180deg);
   }

   .portfolio-text-track-left {
       position: absolute;
       top: 50%;
       transform: translate(15%, -50%);
       white-space: nowrap;
       overflow: visible;
       z-index: 2;
       font-size: 250px;
       font-weight: bold;
       text-transform: uppercase;
       mix-blend-mode: difference;
       opacity: 0.8;
       display: flex;
       pointer-events: none;
       background-color: transparent;
   }

   .portfolio-text-track-right {
       position: absolute;
       top: 50%;
       transform: translate(-15%, -50%);
       white-space: nowrap;
       overflow: visible;
       z-index: 2;
       font-size: 250px;
       font-weight: bold;
       text-transform: uppercase;
       mix-blend-mode: difference;
       opacity: 0.8;
       display: flex;
       pointer-events: none;
       background-color: transparent;
   }

   .portfolio-text-track-left {
       right: 50%;
       justify-content: flex-end;
   }

   .portfolio-text-track-right {
       left: 50%;
       justify-content: flex-start;
   }

   .portfolio-word {
       display: inline-block;
       margin: 0 40px;
       color: white;
       background-color: transparent;
       font-family: "Instrument Sans", sans-serif;
       font-weight: 600
   }

   /* service */

   .service-container {

       background-color: #111;
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       min-height: 100vh;
       padding: 40px 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }

   .service-header {
       text-align: center;
       margin-bottom: 160px;
       margin-top: 90px;

   }

   h1 {
       display: contents;
   }

   .service-label {
       color: white;
       font-size: 14px;
       font-weight: 100;
       font-family: "Instrument Sans", sans-serif;
       margin-bottom: 40px;
       text-transform: uppercase;
   }

   .service-main-title {
       font-size: 10rem;
       overflow: hidden;
       font-weight: 100;
       line-height: 0.9;
       text-transform: uppercase;
       letter-spacing: 0px;
       font-family: "Anton", sans-serif;
       line-height: 180px;


   }

   .service-main-title div {
       display: contents;
   }

   .service-strategic {
       color: white;
   }

   .service-branding {
       color: #666;
   }

   .service-solutions {
       color: white;

   }

   .services-grid {
       display: flex;
       flex-direction: row;
       gap: 30px;
       max-width: 1400px;
       width: 100%;
       margin-bottom: 60px;
       justify-content: center;
       flex-wrap: wrap;
   }

   .service-card {

       border: 1px solid rgba(255, 255, 255, 0.1);

       padding: 40px 30px;
       transition: all 0.3s ease;
       cursor: pointer;
       position: relative;
       overflow: hidden;
       flex: 1;
       min-width: 250px;
       max-width: 250px;
   }



   .service-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 3px;

       transform: scaleX(0);
       transition: transform 0.3s ease;
   }

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

   .service-icon {
       width: 50px;
       height: 50px;


       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 25px;
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
   }

   .service-icon img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 6px;
   }



   .service-title {
       font-size: 35px;
       font-weight: 100;
       margin-bottom: 20px;
       text-transform: uppercase;
       line-height: 45px;
       padding-bottom: 20px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
       font-family: "Anton", sans-serif;
   }

   .service-description {
       font-size: 14px;
       line-height: 1.6;
       color: #ccc;
       margin-top: 30px;
       font-family: "Instrument Sans", sans-serif;
   }

   .service-all-services-btn {
       border: none;
       padding: 0;
       cursor: pointer;
       display: flex;
       align-items: stretch;
       text-transform: uppercase;
       font-size: 14px;
       font-weight: 100;
       transition: all 0.3s ease;
       overflow: hidden;
       background: transparent;
       margin-top: 60px;
       color: #797979;

   }

   .service-btn-arrow-box {
       background-color: #666;
       color: white;
       padding: 15px 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
   }
   
   .service-btn-arrow-box:hover {
       transform: rotate(180deg) scale(0.5);
   }

   .service-btn-text-box {
       background-color: white;
       color: #3c3c3c;
       padding: 15px 30px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
   }

   .service-btn-text {
       background-color: white;
   }

   .service-btn-arrow {
       font-size: 16px;
       font-weight: bold;
       background-color: #666;

   }
        .service-btn-arrow-box:hover .service-btn-arrow{
       transform: rotate(-180deg);
   }

   .service-all-services-btn:hover .service-btn-arrow-box {
       background-color: #666;
   }

   .service-all-services-btn:hover .service-btn-text-box {
       background-color: #f5f5f5;
   }





   @media (max-width: 1200px) {
       .services-grid {
           flex-wrap: wrap;
           justify-content: center;
       }

       .service-card {
           flex: 1 1 calc(50% - 15px);
           min-width: 280px;
       }
   }

  
   /* section5 */
      

    /* NEW wrapper that replaces the old body‑level height/background  */
    .section5-scroll-stage{
      height:150vh;          /* gives us scroll distance     */
      background:#111;       /* dark backdrop for animation  */
      position:relative;
    }

    /* The rest is unchanged */
    .section5-hero{
      /* position:fixed; */
      top:50%;
      left:50%;
      /* transform:translate(-50%,-50%); */
      width:100vw;
      height:200vh;
      z-index:10;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .section5-white-box{
      position:absolute;
      width:var(--white-size,0%);
      height:var(--white-size,0%);
      background:#fff;
      transform:rotateZ(var(--white-rotation,0deg));
      transition:all 0.1s linear;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .section5-image-box{
      width:var(--img-size,2%);
      height:var(--img-size,2%);
      background:url('../images/section5-img.png') center/cover no-repeat;
      transform:rotateZ(var(--img-rotation,0deg));
      opacity:var(--img-opacity,0);
      transition:all 0.2s ease;
    }

    .section5-container{
      position:absolute;
      text-align:center;
      color:#000;
      opacity:var(--text-opacity,0);
      transition:opacity 0.3s ease-in-out;
    }
    /* section5 */
      .section5-container {
            background-color: white;
            text-align: center;
            max-width: 1200px;
            width: 100%;
            line-height: 0;
            margin-top: 500px;
        }
                
        .section5-asterisk div{
            display: contents;
            
        }
                
        .section5-asterisk {
            font-size: 12rem;
            color: #232323;                                  
            font-weight: bold;
            display: contents;                         
            font-family: "Anton", sans-serif;
             background-color: white;
        }

        .section5-main-text {
            font-size: 8rem;
            line-height: 1.2;
            letter-spacing: -0.02em;
             
            text-transform: uppercase;                          
            font-family: "Anton", sans-serif;
             background-color: white;
             max-width: 600px;
              margin: 0px auto 0rem;
             
        }
                
        .section5-main-text div{
            display:flex;
             background-color: white;
             
            
        }

        .section5-word-lets {
            color: #333;
            font-weight: 100;
            font-weight: 800;  
             background-color: white;                          
        }

        .section5-word-brand {
            color: #888;
            font-weight: 800;                                  
            margin-right: 0.2em;
             background-color: white;
        }

        .section5-word-your {
            color: #333;                                    
            font-weight: 800;       
             background-color: white;                      
        }

        .section5-word-idea {
            color: #333;
            font-weight: 800;   
             background-color: white;                         
        }

        .section5-subtitle {
            font-size:15px;
            color: black;
            font-weight: normal;
            line-height: 1.4;
            max-width: 600px;
            margin: 0px auto 0rem;
            font-weight: 100;
            font-family: "Instrument Sans", sans-serif;
             background-color: white;
        }

        .section5-cta-text {
            position: absolute;
            right: 50px;
            bottom: 0px;
            font-size: 1.2rem;
            color: #ccc;
            text-align: right;
            line-height: 1.4;
            font-weight: 100;
             background-color: white;
        }

     

   /* footer */
   .footer-main {
       background-color: #111;
       padding: 500px 0px 0px 0px;

   }

   .footer-container {
       margin: 0 auto;
       padding: 0 40px;
   }

   .footer-top {
       display: flex;
       justify-content: space-between;
       align-items: baseline;
       padding-bottom: 50px;
       margin-bottom: 100px;
       border-bottom: 1px solid #1d1d1d;
   }

   .footer-logo {
       flex: 1;
   }

   .footer-brand-text {
       width: 130px;
       height: 50px;
   }

   .footer-tagline {
       font-size: 16px;
       color: rgb(155, 155, 155);
       text-transform: uppercase;
       letter-spacing: 0px;
       font-family: "Instrument Sans", sans-serif;
   }

   .footer-social {
       display: flex;
       gap: 25px;
   }

   .footer-social-icon {
       width: 40px;
       height: 40px;
       background-color: transparent;
       border-radius: 50%;
       border: 1px solid rgb(44, 43, 43);
       display: flex;
       align-items: center;
       justify-content: center;
       color: #ffffff;
       text-decoration: none;
       font-size: 18px;
       transition: all 0.3s ease;
   }

   .footer-social-icon:hover {
       background-color: #555555;
       border-color: #777777;
       transform: translateY(-2px);
   }

   .footer-social-icon svg {
       width: 20px;
       height: 20px;
       fill: #ffffff;
       transition: fill 0.3s ease;
   }

   .footer-social-icon:hover svg {
       fill: #ffffff;
   }

   .footer-content {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 278px;
       margin-bottom: 50px;
   }

   .footer-column {
       display: flex;
       flex-direction: column;
   }

   .footer-link {
       color: white;
       text-decoration: none;
       margin-bottom: 25px;
       font-size: 16px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       transition: color 0.3s ease;
       font-family: "Instrument Sans", sans-serif;
   }

   .footer-link:hover {
       color: #ffffff;
   }

   .footer-bottom {
       border-top: 1px solid #404040;
       padding-top: 60px;
       padding-bottom: 60px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-family: "Instrument Sans", sans-serif;
   }

   .footer-credits {
       display: flex;
       gap: 30px;
       font-size: 14px;
       color: #888888;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   .footer-credit-text {
       color: #888888;
   }

   .footer-credit-link {
       color: white;
       text-decoration: none;
       transition: color 0.3s ease;
   }

   .footer-credit-link:hover {
       color: #ffffff;
   }

   .footer-legal {
       display: flex;
       gap: 20px;
       font-size: 14px;
   }

   .footer-legal-link {
       color: #888888;
       text-decoration: none;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       transition: color 0.3s ease;
   }

   .footer-legal-link:hover {
       color: #cccccc;
   }

   .footer-arrow {
       position: absolute;
       bottom: 0px;
       top: 270%;
       right: 3%;
       width: 80px;
       height: 80px;
       background-color: transparent;
       border: 1px solid rgb(44, 43, 43);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
       z-index: 1000;
       opacity: 1;
       visibility: visible;
   }

   .footer-arrow:hover {
       background-color: #555555;
       border-color: #777777;
       transform: translateY(-2px);
   }

   .footer-arrow svg {
       width: 24px;
       height: 24px;
       fill: #ffffff;
       transition: fill 0.3s ease;
   }