@media screen and (max-height: 650px) {
      .brittany-left {
            padding: 50px 108px;
        }

      .porject-sec {
            padding: 50px 0 30px;
      }
      .porject-sec .View-btn {
            margin-bottom: 60px;
        }
        .navbar {
            min-height: calc(100vh - 300px);
            padding: 40px 0; 
        }
        .porject-sec .text-inner {
            margin-left: 24px;
            margin-top: 60px;
        }
}


@media screen and (max-width: 1199px) {

      .container,
      .container-lg,
      .container-md,
      .container-sm {
            max-width: 100%;
      }

      .brittany-sec {
            padding: 0 38px;
      }

      .brittany-left {
            min-height: auto;
            padding: 80px 0 0;
            position: static;
            top: 0;
      }

      .navbar {
            display: none;
      }


      .brittany-left .text-box p {
            max-width: 350px;
            margin-bottom: 30px;
      }

      .about-sec .text-box {
            max-width: 100%;
            width: 100%;
            margin-left: 0;
            margin-top: 20px;
      }

      .about-sec h2,
      .experience-sec h2,
      .porject-sec h2 {
            display: block;
            position: sticky;
            top: 0;
            text-transform: uppercase;
            padding: 23px 50px;
            margin: 0 -50px 16px;
            background-color: rgb(15, 23, 42, 0.75);
            backdrop-filter: blur(8px);
      }

      .experience-box {
            margin-bottom: 70px;
            max-width: 100%;
      }

      .experience-box a {
            border-radius: 0;
            padding: 0;
      }

    .porject-box {
          margin-bottom: 50px;
    }

    .porject-box a {
          padding: 0;
          gap: 0;
          /* Görsel ve metin arasındaki boşluğu sıfırlıyoruz */
          flex-direction: column;
          /* Elemanları dikey hizala */
    }

    .porject-box a .image-holder {
          max-width: 200px;
          width: 100%;
          order: 2;
          /* Görseli ikinci sıraya taşı */
    }

    .porject-box a .text-box h4 {
          order: 1;
          /* Başlığı birinci sıraya taşı */
    }

    .porject-box a .text-box p {
          order: 3;
          /* Paragrafı üçüncü sıraya taşı */
          max-width: 100%;
    }
      .gradient-container {
            display: none;
      }

      .experience-box a:hover,
      .experience-box a:hover,
      .porject-box a:hover {
            box-shadow: none;
            background-color: transparent;
      }
}

@media screen and (max-width: 991px) {}

@media screen and (max-width: 767px) {
      .brittany-left {
            padding: 40px 0 0;
      }

      .brittany-sec {
            padding: 0 16px;
      }

      .brittany-left .text-box h2 {
            font-size: 36px;
      }

      .about-sec h2,
      .experience-sec h2,
      .porject-sec h2 {
            padding: 23px 16px;
            margin: 0 -16px 16px;
      }

      .experience-box a {
            flex-direction: column;
      }

      .about-sec,
      .experience-sec,
      .porject-sec {
            padding: 50px 0 40px;
      }

      .porject-box a {
            flex-direction: column-reverse;
            gap: 20px;
      }

      .porject-sec .text-inner {
            margin-left: 0;
            margin-top: 40px;
      }
}

@media screen and (max-width: 575px) {
      .experience-box .text-box h4 {
            font-size: 12px;
      }

      .porject-box a .text-box h4 {
            font-size: 14px;
      }
}