.project-layout {
  display: block;
   padding: 40px;
}

.project-intro {
  width: 100%;

  min-height: 450px;

  display: grid;
  grid-template-columns: repeat(12, 1fr);

  align-items: end;

  padding: 40px 40px 24px;
}

.project-intro-content {
  grid-column: 7 / 10;

  width: 100%;
  max-width: 450px;
}

.project-intro-title {
  margin: 0 0 2px;

  font-family: "Titillium Web", sans-serif;
  font-weight: 700;
  font-style: normal;

  font-size: 1.5rem;

  line-height: 1.1;
  letter-spacing: 0.03em;
}

.project-intro-title2 {
  margin: 0 0 10px;

  font-family: "Titillium Web", sans-serif;
  font-weight: 200;
  font-style: normal;

  font-size: 1.15rem;
  line-height: 1.2;
}

.project-intro-description {
  margin: 0;
  font-family: "Titillium Web", sans-serif;
  font-weight: 200;
  font-style: normal;

  color: rgba(255, 255, 255, 0.5);

  font-size: 1rem;
  line-height: 1.35;
}

.section-title {

    font-family: "Titillium Web", sans-serif;
    font-weight: 200;

    font-size: 1.15rem;

    padding-bottom: 5px;

    color: white;

}

.section-one {
    width: 100%;
    gap: 10px;
  padding: 20px;
}

.section-one picture {
    display: block;
    width: 100%;
}

.section-one img {
    display: block;
    width: 100%;
    height: auto;
}

.section-two {
    width: 100%;
    min-height: 50vh;

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

    padding: 40px 40px;
    box-sizing: border-box;
}

.brief-box {
    width: 100%;
    max-width: 850px;

    padding: 60px 70px;

    box-sizing: border-box;
    border-radius: 6px;

    text-align: center;
}

.brief-box .section-title {
    margin: 0 0 30px 0;

    font-size: 1.2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

.section-two-text {
    margin: 0;

   font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    
    font-size: 1.3rem;
    line-height: 1.35;
}

.section-three {
    width: 100%;
    padding: 20px;
}

.section-three-scroll {
    width: 100%;
}

.section-three img {
    display: block;
    width: 100%;
    height: auto;
}

.section-four {
    width: 100%;
    padding: 80px 40px;
    box-sizing: border-box;
}

.section-four-title {
    margin: 0 0 40px 0;
    text-align: center;
    padding-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 2px;
}

.section-four-layout {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 10px;

    align-items: center;
}


.instagram-carousel {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.instagram-slider-row {
    width: 100%;

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

    gap: 20px;
}

.instagram-window {
    position: relative;

    width: 100%;
    max-width: 400px;

    aspect-ratio: 1080 / 1650;

    overflow: hidden;

    background: #000;
}

.instagram-track {
    position: absolute;

    top: 9.09%;
    left: 0;

    width: 100%;
    height: 81.82%;

    display: flex;

    transition: transform 0.4s ease;
}

.instagram-slide {
    flex: 0 0 100%;

    width: 100%;
    height: 100%;
}

.instagram-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.instagram-frame {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 10;

    pointer-events: none;
}


.instagram-arrow {
    flex: 0 0 auto;

    width: 35px;
    height: 35px;

    border: none;
    border-radius: 50%;

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

    color: white;

    font-size: 20px;
    font-weight: 700;
    line-height: 1;

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

    cursor: pointer;

    transition: .2s ease;
}

.instagram-arrow:hover {
    background: rgba(255,255,255,.25);
}

.instagram-dots {
    display: flex;

    justify-content: center;

    gap: 7px;

    margin-top: 12px;
}

.instagram-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: rgba(255,255,255,.35);
}

.instagram-dot.active {
    background: white;
}

.instagram-prev,
.instagram-next {
    position: static;
}


.section-four-content {
    width: 100%;
}

.section-four-block {
    margin-bottom: 40px;
}

.section-four-block:last-child {
    margin-bottom: 0;
}

.section-four-block h3 {
    margin: 0 0 10px 0;

    font-family: "Titillium Web", sans-serif;

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

    letter-spacing: .08em;
}

.section-four-block p {
    margin: 0;

    font-family: "Titillium Web", sans-serif;

    font-size: 1rem;
    font-weight: 200;

    line-height: 1.35;

    color: rgba(255,255,255,.75);
}
.section-four-list {
    margin: 0;
    padding-left: 18px;

    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.35;

    color: rgba(255,255,255,.75);
}

.section-four-list li {
    padding-left: 5px;
    margin-bottom: 7px;
}

.section-five {
    width: 100%;
    padding: 80px 40px;
    box-sizing: border-box;
}

.section-five-title {
    margin: 0 0 40px 0;
    text-align: center;
    padding-bottom: 10px;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.section-five-layout {
    width: 100%;

    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: 60px;

    align-items: center;
}

.section-five-image {
    width: 100%;
    padding: 60px;
}

.section-five-image img {
    display: block;
    width: 100%;
    height: auto;
}

.section-five-content {
    width: 100%;
    padding-top: 5px;
}

.section-five-block {
    margin-bottom: 45px;
}

.section-five-block h3 {
    margin: 0 0 12px 0;

    font-family: "Titillium Web", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.section-five-block p {
    margin: 0;

    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.35;
    color: rgba(255,255,255,.75);
}

.section-five-list {
    margin: 10px 0 22px 0;
    padding-left: 18px;

    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.35;
    color: rgba(255,255,255,.75);
}

.section-five-list li {
    padding-left: 5px;
    margin-bottom: 6px;
}
.section-six {
    width: 100%;
    padding: 40px 40px;
    box-sizing: border-box;
}

.section-six-title {
   margin: 0 0 40px 0;
    text-align: center;
    padding-bottom: 20px;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.section-six-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    max-width: 1400px;
    margin: 0 auto;
}

.section-six-item {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 10px;

    align-items: center;
}

.section-six-video {
    width: 100%;
    aspect-ratio: 9 / 16;
     border-radius: 12px;
}

.section-six-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.section-six-text {
    width: 100%;
}
.section-six h3 {
    margin: 0 0 12px 0;

    font-family: "Titillium Web", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.section-six-list {
    margin: 0 0 22px 0;
    padding-left: 18px;

  font-family: "Titillium Web", sans-serif;
    font-size: 1.1rem;
    font-weight: 200;
    line-height: 1.35;
    color: rgba(255,255,255,.75);
}

.section-six-list li {
    padding-left: 5px;
    margin-bottom: 6px;
}
.section-six-text p {
    margin: 0 0 22px 0;
    font-family: "Titillium Web", sans-serif;
    font-size: 1.1rem;
    font-weight: 200;
    line-height: 1.35;
    color: rgba(255,255,255,.75);
}

.section-six-text p:last-child {
    margin-bottom: 0;
}

.section-six-video-wrapper {

    position: relative;
}

.video-unmute {

    position: absolute;

    top: 10px;
    left: 10px;

    width: 36px;
    height: 36px;

    border: none;

    border-radius: 50%;

    background: rgba(0,0,0,.45);

    color: white;

    cursor: pointer;

    backdrop-filter: blur(5px);
}

.section-seven {
    width: 100%;
    padding: 40px 40px;
    box-sizing: border-box;
}

.section-seven-title {
    margin: 0 0 40px 0;
    text-align: center;
    padding-bottom: 10px;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.section-seven-layout {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;

    align-items: center;
}

.section-seven-images {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.section-seven-image img {
    display: block;
    width: 100%;
    height: auto;
}

.section-seven-image.post {
    width: 68%;
}

.section-seven-image.story {
    width: 44%;
}

.section-seven-content {
    width: 100%;
}

.section-seven-block {
    margin-bottom: 35px;
}

.section-seven-block:last-child {
    margin-bottom: 0;
}

.section-seven-block h3 {
    margin: 0 0 10px 0;

    font-family: "Titillium Web", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.section-seven-block p {
    margin: 0;

    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.35;

    color: rgba(255,255,255,.75);
}

.section-seven-list {
    margin: 0;
    padding-left: 18px;

    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.35;

    color: rgba(255,255,255,.75);
}

.section-seven-list li {
    padding-left: 5px;
    margin-bottom: 7px;
}

.media-caption{
    display: none;
}

.section-eight {
    width: 100%;
    padding: 80px 40px;
    box-sizing: border-box;
}

.section-eight-title {
    margin-bottom: 10px;
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2px;
      color: rgba(255, 255, 255, 0.5);
}

.section-eight-layout {
    width: 60%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;

    align-items: center;
}

.section-eight-feed {
    width: 100%;
}

.section-eight-arrow {
    display: none;
}

.section-eight-feed img {
    display: block;
    width: 100%;
    height: auto;
}

.section-eight-square {
    width: 100%;
}

.section-eight-square img {
    display: block;
    width: 100%;
    height: auto;
}

.campaign-optimisation,
.performance-metrics,
.content-distribution,
.optimisation {
    width: 100%;
    padding: 40px 40px;
}

.campaign-optimisation .section-title {
    margin: 0 0 20px 0;
    text-align: center;
    padding-bottom: 10px;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.campaign-optimisation-intro {
    width: 70%;
    margin: 20px auto 100px auto;
     font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    text-align: center;
      font-size: 1.3rem;
    line-height: 1.35;
}

.content-distribution-intro{
      font-family: "Titillium Web", sans-serif;
    font-weight: 200;
    font-style: italic;
    text-align: left;
      font-size: 1.2rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.5);
}

.platform-strategy {
    width: 100%;
}

.campaign-subheading {
    margin-bottom: 10px;
    font-family: "Titillium Web", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2px;
      color: rgba(255, 255, 255, 0.5);
}

.platform-list,
.metrics-list{
    width: 85%;
    margin: 0 auto;
}

.content-list{
    padding-top: 40px;
     width: 90%;
    margin: 0 auto;

}

.platform-item{
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: start;

    padding: 25px 0;
    border-bottom: 1px solid #ffffff5d;
}

.metrics-item {
 display: grid;
    grid-template-columns: 40% 60%;
    align-items: start;
    gap: 15px;

    padding: 10px 0;
    border-bottom: 1px solid #ffffff5d;
}

.content-item,
.content-item-optimisation {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 10px 0;

}

.platform-item:last-child,
.metrics-item:last-child {
    border-top: 1px solid #ffffff5d;
}

.platform-item h4,
.metrics-item h4,
.content-item h4,
.content-item-optimisation h4 {
    margin: 0;
   font-family: "Titillium Web", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.platform-item p{
    margin: 0;
   font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.35;

    color: rgba(255,255,255,.75);
    max-width: 550px;
}

.metrics-item p {
    display: flex;
    gap: 20px;
    margin: 0;
    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.35;
    color: rgba(255,255,255,.75);
}

.content-item p,
.content-item-optimisation p {
    display: flex;
    gap: 20px;
    margin: 0;
    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.35;
    color: rgba(255,255,255,.75);
}

.optimisation-flow {
    width: 100%;

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

    gap: 30px;

    margin: 20px 0;
}

.optimisation-step {
    font-family: "Titillium Web", sans-serif;

    font-size: 1.2rem;
    font-weight: 700;

    letter-spacing: 0.1em;

    white-space: nowrap;
}

.optimisation-arrow {
    font-family: "Titillium Web", sans-serif;

    font-size: 1.5rem;
    font-weight: 200;

    color: rgba(255,255,255,.6);
}


@media (max-width: 700px) {

    .project-layout{
    flex-direction:column;

    gap:20px;

    padding:10px;
    margin-top: 20px;
  }

  .project-intro {
    min-height: 350px;

    grid-template-columns: repeat(8, 1fr);

    padding: 70px 20px 10px;
  }

 .project-intro-content {
    grid-column: 3 / 9;

    max-width: 420px;
  }
    .project-intro-title {
  font-size: 1.1rem;
}
.project-intro-title2 {
  font-size: 1rem;
}
.project-intro-description {
  font-size: 0.9rem;
}

.section-title{
     color:white;
  font-size: 0.9em;
  font-weight: 700;
  padding-bottom: 5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.section-one{
    padding: 0px;
}

.section-one-picture{
    padding: 0;
}

.section-two {
    min-height: 20vh;
    padding: 10px 20px;
}

.brief-box {
    max-width: 100%;
    padding: 10px 25px;
}

.brief-box .section-title {
    margin-bottom: 10px;
     color:white;
  font-size: 0.9em;
  font-weight: 700;
  padding-bottom: 5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.section-two-text{
    font-size: 0.8rem;
}
.section-three {
    width: 100%;
    padding: 20px 0;
}

.section-three-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.section-three img {
    width: auto;
    height: 450px;
    max-width: none;
}
.instagram-arrow{
    width: 25px;
    height: 25px;
      font-size: 15px;
    font-weight: 700;
}
.instagram-carousel{
    max-width: 350px;
}
    .section-five,
    .section-four {
        padding: 20px 20px;
    }

    .section-five-title,
    .section-four-title {
        margin-bottom: 25px;
    }

    .section-five-layout,
    .section-four-layout {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .section-five-image {
        width: 100%;
         padding: 20px;
    }

    .section-five-list,
    .section-four-list{
     font-size: 0.8rem;
}
    .section-five-content,
    .section-four-content {
        width: 100%;
        padding-top: 0;
    }

    .section-five-block,
    .section-four-block {
        margin-bottom: 15px;
    }

    .section-five-block h3,
    .section-four-block h3{
        font-size: 0.9rem;
        margin-bottom: 2px;
    }

    .section-five-block p,
    .section-four-block p {
        font-size: 0.8rem;
        line-height: 1.45;
    }

.section-six {
    padding: 20px 20px;
}

.section-six-title {
    margin-bottom: 25px;
}

.section-six-grid {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.section-six-item {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 15px;
    align-items: center;
}

.section-six-video {
    width: 100%;
    aspect-ratio: 9 / 16;
    align-self: center;
}

.section-six-text {
    width: 100%;
}

 .section-six-text h3 {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }
.section-six-text p {
    font-size: 0.8rem;
    line-height: 1.35;
    margin-bottom: 15px;
}

.section-six-list {
    font-size: 0.8rem;
    line-height: 1.35;
    margin-bottom: 15px;
}


    .section-seven {
        padding: 20px 20px;
    }

    .section-seven-title {
        margin-bottom: 25px;
    }

    .section-seven-layout {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .section-seven-images {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .section-seven-image.post {
        width: 55%;
    }

    .section-seven-image.story {
        width: 32%;
    }

    .section-seven-content {
        width: 100%;
    }

    .section-seven-block {
        margin-bottom:10px;
    }

    .section-seven-block h3 {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }

    .section-seven-block p {
        font-size: 0.8rem;
        line-height: 1.35;
    }

    .section-seven-list {
        font-size: 0.8rem;
        line-height: 1.35;
        padding-left: 16px;
    }

    .section-seven-list li {
        padding-left: 3px;
        margin-bottom: 5px;
    }

    .section-eight{
        padding: 20px 20px;
    }

    .section-eight-title {
      margin-bottom: 10px;
    font-weight: 700;
   font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.5);
}

.section-eight-carousel {
    position: relative;
    width: 100%;

    padding: 0 45px;

    box-sizing: border-box;
}

.section-eight-layout {
    display: flex;

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    gap: 10px;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

.section-eight-layout::-webkit-scrollbar {
    display: none;
}

.section-eight-square,
.section-eight-feed {
    flex: 0 0 100%;
    width: 100%;

    scroll-snap-align: start;
}

.section-eight-arrow {
    display: flex;

    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 32px;
    height: 32px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: rgba(0,0,0,.45);

    color: white;
    font-size: 1rem;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 5;

    backdrop-filter: blur(5px);
}

.section-eight-prev {
    left: 0;
}

.section-eight-next {
    right: 0;
}
    .campaign-optimisation,
    .performance-metrics{
    width: 100%;
    padding: 20px 20px;
}

    .content-distribution,
    .optimisation{
    width: 100%;
    padding: 20px 10px;
}
.content-distribution-intro{
      font-size: 0.8rem;
  
}
.campaign-optimisation .section-title {
   font-size: 0.9rem;
     margin: 0 0 10px 0;
      padding-bottom: 5px;
}

.campaign-optimisation-intro {
    width: 90%;
    margin: 10px auto 50px auto;
    font-size: 0.8rem;
}

.campaign-subheading {
    margin-bottom: 10px;
    font-weight: 700;
   font-size: 0.9rem;
}
.platform-list,
.metrics-list {
    width: 100%;
}

.content-list{
    padding-top: 10px;
     width: 100%;

}

.platform-item {
    grid-template-columns: 35% 65%;
    gap: 10px;
    padding: 10px 0;
}
.metrics-item {
    grid-template-columns: 35% 65%;
    gap: 10px;
    padding: 5px 0;
}

.platform-item h4,
.metrics-item h4,
.content-item h4,
 .content-item-optimisation h4{
  font-size: 0.8rem;
    margin-bottom: 5px;
}

.platform-item p,
.metrics-item p {
    margin: 0;
       gap: 10px;
     font-size: 0.8rem;
        line-height: 1.35;

    color: rgba(255,255,255,.75);
    max-width: 550px;
}

.content-item,
.content-item-optimisation {
    display: block;
    padding: 10px 0;
}

.content-item p,
.content-item-optimisation p {
    display: block;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: rgba(255,255,255,.75);
}

.optimisation-flow {
    gap: 5px;
    margin: 10px 0;

}
.optimisation-step {

    font-size: 0.8rem;
}
.optimisation-arrow {

    font-size: 0.6rem;

}
}


@media (min-width: 701px) and (max-width: 900px) {

  .project-layout{
    flex-direction:column;

    gap:20px;

    padding:10px;
  }

    .project-intro {
  width: 100%;

  min-height: 450px;

  display: grid;
  grid-template-columns: repeat(12, 1fr);

  align-items: end;

  padding: 40px 40px 24px;
}
    .project-intro-content {
  grid-column: 6 / 12;

  width: 100%;
  max-width: 650px;
}
  .project-intro-title {
    font-size: 1.5rem;
    padding-top: 50px;
  }

  .project-intro-title2 {
    font-size: 1.15rem;
  }

  .project-intro-description {
    font-size: 1rem;
  }
  .section-one,
  .section-two,
  .section-three,
  .section-four,
  .section-five,
  .section-six, 
  .section-seven,
  .section-eight,
  .campaign-optimisation{
    padding-top: 20px;
}
  .section-title {
    font-size: 1.2rem;
  }

.section-two {
    padding: 20px 20px;
    min-height: 25vh;
}

.brief-box {
    width: 100%;
    max-width: 650px;

    padding: 20px 70px;
}

.brief-box .section-title {
    margin: 0 0 10px 0;

    font-size: 1.2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

.section-two-text {
    
    font-size: 1rem;
    line-height: 1.35;
}
.section-three {
    width: 100%;
    padding: 0px;
}
.section-three-scroll {
    width: 100%;
}
.section-three img {
    display: block;
    width: 100%;
    height: auto;
}
.section-four {
    width: 100%;
    padding: 60px 10px;
}

.section-five {
    width: 100%;
    padding: 60px 10px;
    box-sizing: border-box;
}

.section-five-title,
.section-four-title {
    margin: 0 0 20px 0;
    text-align: center;
    padding-bottom: 10px;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.section-five-layout, 
.section-four-layout {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1.5fr;

    align-items: center;
}
.section-four-layout{
    gap: 10px
}
.section-five-layout{
    gap: 20px;
}

.section-five-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
}

.section-five-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.section-five-content,
.section-four-content {
    width: 100%;
    padding-top: 5px;
}
.section-five-block,
.section-four-block {
    margin-bottom: 15px;
}
.section-five-block h3,
.section-four-block h3 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.section-five-block p,
.section-four-block p {
    margin: 0;

    font-family: "Titillium Web", sans-serif;
    font-size: 0.9rem;
    font-weight: 200;
    line-height: 1.35;
    color: rgba(255,255,255,.75);
}

.section-five-list,
.section-four-list {
    margin: 10px 0 22px 0;
    padding-left: 18px;

    font-family: "Titillium Web", sans-serif;
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.35;
    color: rgba(255,255,255,.75);
}
.section-six {
    width: 100%;
    padding: 30px 20px;
}
.section-six-title {
    padding-bottom: 20px;
}
.section-six-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 100%;
}

.section-six-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.section-six-video-wrapper {
    width: 70%;
}

.section-six-video {
    width: 100%;
    aspect-ratio: 9 / 16;
}

.section-six-text {
    width: 80%;
}

.section-six-text h3 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.section-six-text p {
    font-size: 1rem;
    line-height: 1.35;
    margin-bottom: 15px;
}

.section-six-list {
    font-size: 1rem;
    line-height: 1.35;
}
.section-seven {
    width: 100%;
    padding: 40px 40px;
}

    .section-seven-layout {
        display: flex;
        flex-direction: column;
        gap: 15px;
    } 
        .section-seven-images {
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding-bottom: 30px;
    }
    .section-seven-image.post {
        width: 55%;
    }
     .section-seven-image.story {
        width: 32%;
    }
     .section-seven-content {
        width: 95%;
    }

.section-seven-block h3 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.section-seven-block p {
    font-size: 1rem;
    line-height: 1.35;
}

.section-seven-list {
    font-size: 1rem;
    line-height: 1.35;
}

.section-seven-list li {
    margin-bottom: 5px;
}
 .section-seven-block {
        margin-bottom:5px;
    }

.section-eight-layout {
    width: 80%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 20px;

    align-items: center;
}
.section-eight {
    width: 100%;
    padding: 40px 40px;
}

    .campaign-optimisation .section-title {
    margin: 0 0 10px 0;

}
    .campaign-optimisation-intro {
 font-size: 1rem;
   width: 90%;
    line-height: 1.35;
    margin: 10px auto 70px auto;

    }
    .platform-list,
    .metrics-list {
    width: 90%;
    margin: 0 auto;
}

.content-list{
    padding-top: 20px;
     width: 100%;

}
.content-item,
.content-item-optimisation  {
    display: block;
    padding: 15px 0;
}

.content-distribution-intro{
      font-size: 1.1rem;

}

.content-item h4,
 .content-item-optimisation h4{
    margin: 0 0 4px 0;
}

.content-item p{
    margin: 0;
     gap: 5px;
}

.platform-item{
    grid-template-columns: 40% 60%;
    padding: 15px 0;
}

.metrics-item {
    grid-template-columns: 40% 60%;
    padding: 10px 0;
}
.platform-item h4,
.metrics-item h4{
      font-size: 1rem;
    margin-bottom: 5px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.optimisation-flow {

    gap: 20px;
    margin: 10px 0;

}
.optimisation-step {
    font-family: "Titillium Web", sans-serif;

    font-size: 1rem;
}

.content-item-optimisation p{
 gap: 20px;
}
}

@media (max-width: 380px) {

    .project-layout {
        padding: 5px;
        margin-top: 20px;
    }

    .project-intro {
        min-height: 260px;
        padding: 20px 10px 10px;
    }

    .project-intro-content {
        grid-column: 3 / 9;
        max-width: 250px;
    }

    .project-intro-title {
        font-size: 0.9rem;
    }

    .project-intro-title2 {
        font-size: 0.8rem;
    }

    .project-intro-description {
        font-size: 0.8rem;
    }
.section-title-mobile{
    font-size: 0.85rem;
}
.section-title,
.brief-box .section-title,
    .section-five-block h3,
    .section-four-block h3,
 .section-six-text h3 ,
    .section-seven-block h3,
      .section-eight-title  {
    font-size: 0.85rem;

}
.section-two-text,
.section-five-list,
    .section-four-list,
  .section-five-block p,
    .section-four-block p ,
.section-six-text p,
.section-six-list,
    .section-seven-block p,
        .section-seven-list,
        .campaign-optimisation-intro,
        .campaign-subheading,
        .platform-item p,
.metrics-item p,
.content-item p,
.content-item-optimisation p,
.optimisation-step    {
        font-size: 0.7rem;
    }


}

@media (min-width: 901px) and (max-width: 1100px) {

    body {
        overflow-x: hidden;
    }

    .project-layout {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    
.project-intro-content {
  grid-column: 6 / 11;
  width: 100%;
  max-width: 450px;
}
 .project-intro-title {
    font-size: 1.6rem;
  }
    .project-intro-title2 {
    font-size: 1.3rem;
  }
    .project-intro-description {
    font-size: 1.2rem;
  }

  .section-title,
  .section-title-mobile,
  .section-title,
.brief-box .section-title,
    .section-five-block h3,
    .section-four-block h3,
 .section-six-text h3 ,
    .section-seven-block h3,
      .section-eight-title  {
    font-size: 1.3rem;
  }
  .section-two-text,
.section-five-list,
    .section-four-list,
  .section-five-block p,
    .section-four-block p ,
.section-six-text p,
.section-six-list,
    .section-seven-block p,
        .section-seven-list,
        .campaign-optimisation-intro,
        .campaign-subheading,
        .platform-item p,
.metrics-item p,
.content-item p,
.content-item-optimisation p,
.optimisation-step    {
        font-size: 1.2rem;
    }
    .section-one,
    .section-two,
    .section-three,
    .section-four,
    .section-five,
    .section-six,
    .section-seven,
    .section-eight,
  .campaign-optimisation{
        max-width: 100%;
        box-sizing: border-box;
    }

    img,
    video {
        max-width: 100%;
    }
    .section-two {
    padding: 20px 20px;
    min-height: 25vh;
}

.brief-box {
    width: 100%;
    max-width: 650px;

    padding: 20px 70px;
}
.section-three {
    width: 100%;
    padding: 0px;
}
.section-three-scroll {
    width: 100%;
}
.section-three img {
    display: block;
    width: 100%;
    height: auto;
}
.section-four {
    width: 100%;
    padding: 60px 10px;
}
.section-five {
    width: 100%;
    padding: 60px 10px;
    box-sizing: border-box;
}
.section-five-layout, 
.section-four-layout {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1.5fr;

    align-items: center;
}
.section-four-layout{
    gap: 10px
}
.section-five-layout{
    gap: 20px;
}

.section-five-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
}

.section-five-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.section-five-content,
.section-four-content {
    width: 100%;
    padding-top: 5px;
}
.section-five-block,
.section-four-block {
    margin-bottom: 15px;
}
.section-six {
    width: 100%;
    padding: 30px 20px;
}
.section-six-title {
    padding-bottom: 20px;
}
.section-six-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 100%;
}

.section-six-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.section-six-video-wrapper {
    width: 70%;
}

.section-six-video {
    width: 100%;
    aspect-ratio: 9 / 16;
}

.section-six-text {
    width: 80%;
}
.section-seven {
    width: 100%;
    padding: 40px 40px;
}

    .section-seven-layout {
        display: flex;
        flex-direction: column;
        gap: 15px;
    } 
        .section-seven-images {
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding-bottom: 30px;
    }
    .section-seven-image.post {
        width: 55%;
    }
     .section-seven-image.story {
        width: 32%;
    }
     .section-seven-content {
        width: 95%;
    }
    .section-seven-list li {
    margin-bottom: 5px;
}
 .section-seven-block {
        margin-bottom:5px;
    }

.section-eight-layout {
    width: 80%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 20px;

    align-items: center;
}
.section-eight {
    width: 100%;
    padding: 40px 40px;
}

  .platform-list,
    .metrics-list {
    width: 90%;
    margin: 0 auto;
}

.content-list{
    padding-top: 20px;
     width: 100%;

}
.content-item,
.content-item-optimisation  {
    display: block;
    padding: 15px 0;
}

.content-item p{
    margin: 0;
     gap: 5px;
}

.platform-item{
    grid-template-columns: 40% 60%;
    padding: 15px 0;
}

.metrics-item {
    grid-template-columns: 40% 60%;
    padding: 10px 0;
}

.optimisation-flow {

    gap: 20px;
    margin: 10px 0;

}

.content-item-optimisation p{
 gap: 20px;
}
}