@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.the-gin-tub-body, .the-gin-tub-body * { box-sizing: border-box; }
.the-gin-tub-body { font-family: 'Poppins', Arial, sans-serif; color: #23272e; min-height: 100vh; }
.the-gin-tub-hero-banner { position: relative; min-height: 340px; height: 55vh; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.the-gin-tub-hero-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,38,66,0.7) 0%, rgba(33,37,41,0.4) 70%,rgba(0,0,0,0.32) 100%); z-index: 1; }
.the-gin-tub-hero-title { font-family: 'Poppins', Arial, sans-serif; font-size: 5rem; letter-spacing: -.5px; font-weight: 600; color: #fff; z-index: 2; line-height: 1.06; margin: 0; padding: 0 0.25em; position: relative; }
@media (max-width:800px){ .the-gin-tub-hero-title{font-size:1.9rem;} .the-gin-tub-hero-banner{min-height:180px;height:30vh;} }
.the-gin-tub-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.the-gin-tub-content-card { background: #fff; border-radius: 22px; padding: 70px 43px 50px; position: relative; z-index: 3; }
@media (max-width: 700px){ .the-gin-tub-content-card{padding:38px 10px 40px;} }
.the-gin-tub-heading{ font-family: 'Poppins', Arial, sans-serif; font-weight: 700; font-size: 2rem; color: #23272e; margin: 0 0 1.2em 0; line-height: 1.15; }
@media (max-width: 900px){ .the-gin-tub-heading{font-size:1.398rem;} }
.the-gin-tub-subheading { font-family: 'DM Sans', Arial, sans-serif; font-size: 2.5rem; font-weight: 700; color: #2a3344; margin: 1.2em 0 .7em 0; line-height: 1.28; letter-spacing: -0.02em; position: relative; display: inline-block; padding-bottom: 8px; }
.the-gin-tub-subheading::after { content: ''; display: block; width: 40px; height: 3px; margin-top: 7px; background: #53A2E8; border-radius: 4px; }
.the-gin-tub-paragraph { font-family: 'DM Sans', Arial, sans-serif; font-size: 1.5rem; color: #49505b; line-height: 1.85; margin: 0 0 1.1em 0; }
.the-gin-tub-content-flow{ display: grid; grid-template-columns: 1fr 1fr; gap: 55px; align-items: center; }
@media (max-width:900px){ .the-gin-tub-content-flow{grid-template-columns:1fr;gap:38px;} }
.the-gin-tub-text-block{background:none;padding:0;}
.the-gin-tub-image-block{ position:relative; border-radius:18px; overflow:hidden; background:#f7fbff; margin-bottom:12px; }
.the-gin-tub-image-block img{ display:block;width:100%;height:100%; max-height:450px;object-fit:cover;object-position:center;border-radius:16px;box-shadow:none; }
@media (max-width:1100px){.the-gin-tub-image-block img{ min-height:150px; height: 100%;}}
@media (max-width:600px){.the-gin-tub-image-block img{max-height: 200px; min-height:150px; height: 100%;}}
.the-gin-tub-full-image{grid-column:1/-1;margin:32px 0 28px 0;}
.the-gin-tub-image-gallery{ display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin:44px 0 0 0; }
@media (max-width:1000px){.the-gin-tub-image-gallery{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.the-gin-tub-image-gallery{grid-template-columns:1fr 1fr;gap:12px;}}
.the-gin-tub-image-gallery .the-gin-tub-image-block{ background:#f7fbff; padding:0; border-radius:14px; display:block; }
.the-gin-tub-nav-bar{ margin: 32px auto; max-width: 1400px; display:flex;justify-content:space-between;gap:16px; padding:40px 0 0 0;border-top:1px solid #ebecf0; }
.the-gin-tub-nav-btn{ display:inline-flex;align-items:center;gap:10px;font-family:'Poppins',sans-serif;font-size:1.14rem;font-weight:700;background:#53A2E8;color:#fff;text-decoration:none;padding:17px 38px;border-radius:14px; }
.the-gin-tub-nav-btn:hover{background:#3e95e0;color:#fff;}
.the-gin-tub-nav-bt span {color: #fff;}

.the-gin-tub-nav-btn--prev .the-gin-tub-nav-arrow { font-size: 1.6em; margin-right: 6px; }
.the-gin-tub-nav-btn--next .the-gin-tub-nav-arrow { font-size: 1.6em; margin-left: 6px; }

/* Video layout for The Gin Tub case study */
.gin-tub-videos-section { margin-top: 28px; }
.gin-tub-videos-container { max-width: 1200px; margin: 0 auto; }
.gin-tub-videos-container .video-section { display: flex; gap: 20px; align-items: flex-start; }
.gin-tub-videos-container .video-container { flex: 1 1 auto; }

/* Make first video (horizontal) ~70% and second (vertical) ~30% */
.gin-tub-videos-container .video-section .video-container:nth-child(1) { flex: 0 0 70%; max-width: 70%; }
.gin-tub-videos-container .video-section .video-container:nth-child(2) { flex: 0 0 30%; max-width: 30%; }

/* Ensure videos are responsive */
.gin-tub-videos-video { width: 100%; height: 600px; display: block; border-radius: 8px; object-fit: cover; }

/* Loading spinner and overlay positioning inside wrappers */
.video-wrapper { position: relative; width: 100%; }
.play-button-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; top: 50%; left: 50%; }
/* .loading-spinner { position: absolute; top: 50%; left: 50%;  inset: 0; display: flex; align-items: center; justify-content: center; } */

/* On narrower screens (<=1200px) stack videos vertically */
@media (max-width: 1200px) {
    .gin-tub-videos-container .video-section .video-container:nth-child(1) { flex: 0 0 100%; max-width: 100%; }
    .gin-tub-videos-container .video-section .video-container:nth-child(2) { flex: 0 0 100%; max-width: 100%; }
	.gin-tub-videos-container .video-section { flex-direction: column; }
	.gin-tub-videos-container .video-section .video-container { flex: 0 0 auto; max-width: 100%; }
	.gin-tub-videos-container .video-section .video-container + .video-container { margin-top: 18px; }
}






/* B2C videos layout  */

/* Video layout for The Gin Tub case study */
.b2c-video-videos-section { margin-top: 28px; }
.b2c-video-videos-container { max-width: 1600px; margin: 0 auto; }
.b2c-video-videos-container .video-section { display: flex; gap: 20px; align-items: flex-start; }
.b2c-video-videos-container .video-container { flex: 1 1 auto; }

/* Make first video (horizontal) ~70% and second (vertical) ~30% */
.b2c-video-videos-container .video-section .video-container:nth-child(1) { flex: 0 0 50%; max-width: 50%; }
.b2c-video-videos-container .video-section .video-container:nth-child(2) { flex: 0 0 50%; max-width: 50%; }

/* Ensure videos are responsive */
.b2c-video-videos-video { width: 100%; height: 600px; display: block; border-radius: 8px; object-fit: cover; }


/* On narrower screens (<=1200px) stack videos vertically */
@media (max-width: 1200px) {
    .b2c-video-videos-container .video-section .video-container:nth-child(1) { flex: 0 0 100%; max-width: 100%; }
    .b2c-video-videos-container .video-section .video-container:nth-child(2) { flex: 0 0 100%; max-width: 100%; }
	.b2c-video-videos-container .video-section { flex-direction: column; }
	.b2c-video-videos-container .video-section .video-container { flex: 0 0 auto; max-width: 100%; }
	.b2c-video-videos-container .video-section .video-container + .video-container { margin-top: 18px; }
}






/* Video layout for The Gin Tub case study */
.B2B-videos-section { margin-top: 28px; }
.B2B-videos-container { max-width: 1600px; margin: 0 auto; }
.B2B-videos-container .video-section { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.B2B-videos-container .video-container { flex: 1 1 auto; }

/* Make first video (horizontal) ~70% and second (vertical) ~30% */
.B2B-videos-container .video-section .video-container:nth-child(1) { flex: 0 0 70%; max-width: 67%; }
.B2B-videos-container .video-section .video-container:nth-child(2) { flex: 0 0 30%; max-width: 27%; }
.B2B-videos-container .video-section .video-container:nth-child(2) { flex: 0 0 30%; max-width: 88%; }

/* Ensure videos are responsive */
.B2B-videos-video { width: 100%; height: 600px; display: block; border-radius: 8px; object-fit: cover; }

/* Loading spinner and overlay positioning inside wrappers */
.video-wrapper { position: relative; width: 100%; }
.play-button-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; top: 50%; left: 50%; }
/* .loading-spinner { position: absolute; top: 50%; left: 50%;  inset: 0; display: flex; align-items: center; justify-content: center; } */

/* On narrower screens (<=1200px) stack videos vertically */
@media (max-width: 1200px) {
    .B2B-videos-container .video-section .video-container:nth-child(1) { flex: 0 0 100%; max-width: 100%; }
    .B2B-videos-container .video-section .video-container:nth-child(2) { flex: 0 0 100%; max-width: 100%; }
    .B2B-videos-container .video-section .video-container:nth-child(2) { flex: 0 0 100%; max-width: 100%; }
	.B2B-videos-container .video-section { flex-direction: column; }
	.B2B-videos-container .video-section .video-container { flex: 0 0 auto; max-width: 100%; }
	.B2B-videos-container .video-section .video-container + .video-container { margin-top: 18px; }
}