/* Commom */
.r_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	background-color: rgba(0,0,0,0.5);
	display: none;
}

/* About us page * */
.maxWidth {
  width : 100%;
}

.r_aboutus-masthead {
  margin-top : -30px;
}

.r_aboutus-content-block {
  z-index           : 9;
  background-image  : url(../images/about/Masthead-Image.jpg);
  background-color  : transparent !important;
  background-repeat : no-repeat;
  background-size   : cover;
	height: 60rem;
}

.r_about {
  height : 80vh !important;
}

@media
  screen
  and (max-width : 767px) {
  .r_about {
    height         : auto !important;
    padding-bottom : 2.5rem;
  }
}

.r_aboutus-img {
  background-image    : url(../images/about/A-Little-About-Me-Image.jpg) !important;
  background-position : 38% !important;
}

/* Project Detail */
.r_caption-title {
	font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
	white-space: normal !important;
	font-size: 52px !important;
	line-height: 58px !important;
}

.r_proj-vdosection-block {
	padding-top: 7rem;
	padding-bottom: 0rem;
}

.r_iframe {
	min-height: 550px;
}
.r_proj-grid-container {
	margin-left: -1.5rem;
	margin-right: -1.5rem;
}

@media
  screen
  and (max-width : 767px) {
		.r_iframe {
			min-height: 250px;
		}
		.r_masthead-slider img{
			top: 0px !important;
		}
		.r_caption-title {
			font-size: 4vw !important;
			line-height: 4.2vw !important;
		}
		.r_proj-content-block {
			padding-top: 5rem !important;
		}
		.r_proj-grid-container .column {
			margin-bottom: 2rem;
		}
		.r_proj-grid-container .column:last-child {
			margin-bottom: 0rem;
		}
}
@media
  screen
  and (max-width : 600px) {
		.r_caption-title {
			font-size: 20px !important;
			line-height: 23px !important;
		}
	}

.r_proj-qantas {
	background-image    : url(../images/project-detail/qantas/2-Concept.jpg) !important;
}
.r_proj-hbo {
	background-image    : url(../images/project-detail/hbo/2-Concept.jpg) !important;
}
.r_proj-klook {
	background-image    : url(../images/project-detail/klook/2-Concept.jpg) !important;
}
.r_proj-mediacorp {
	background-image    : url(../images/project-detail/mediacorp/2-Concept.jpg) !important;
}
.r_proj-shine {
	background-image    : url(../images/project-detail/shine/2-Concept.jpg) !important;
}
.r_proj-scootsocial {
	background-image    : url(../images/project-detail/scootsocial/2-Concept.jpg) !important;
}
.r_proj-scootwedding {
	background-image    : url(../images/project-detail/scootwedding/2-Concept.jpg) !important;
}
.r_proj-scootsg50 {
	background-image    : url(../images/project-detail/scootsg50/2-Concept.jpg) !important;
}
.r_proj-scootmobile {
	background-image    : url(../images/project-detail/scootmobile/2-Concept.jpg) !important;
}
.r_proj-scootaus {
	background-image    : url(../images/project-detail/scootaus/2-Concept.jpg) !important;
}
.r_proj-audisg50 {
	background-image    : url(../images/project-detail/audisg50/2-Concept.jpg) !important;
}
.r_proj-underarmour {
	background-image    : url(../images/project-detail/underarmour/2-Concept.jpg) !important;
}
.r_proj-breadtalk {
	background-image    : url(../images/project-detail/breadtalksocial/2-Concept.jpg) !important;
}
.r_proj-sentosasocial {
	background-image    : url(../images/project-detail/sentosasocial/2-Concept.jpg) !important;
}
.r_proj-urasocial {
	background-image    : url(../images/project-detail/ura/2-Concept.jpg) !important;
}
.r_proj-salonpas {
	background-image    : url(../images/project-detail/salonpas/2-Concept.jpg) !important;
}
.r_proj-drugfree {
	background-image    : url(../images/project-detail/cnb/2-Concept.jpg) !important;
}
.r_proj-etiqainsurance {
	background-image    : url("../images/project-detail/etiqainsurance/2-Concept.jpg") !important;
}

.tiktok-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px;
}

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(326px, 1fr)); /* Adjusts for responsiveness */
    gap: 16px; /* Space between items */
    max-width: 100%;
    margin: 0 auto; /* Center grid if needed */
}

/* Responsive for Mobile */
@media (max-width: 768px) {
    .tiktok-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}