/* all tetrpek css  */


/* =========================================
   Tetrapak Page Styles
   ========================================= */
.tetrapak-campaign {
    --brand-blue:#00bdf2; /* Cyan/Blue specified by user */
    --text-light: #ffffff;
    --font-main: 'Poppins', sans-serif;
}

.tetrapak-campaign {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    overflow-x: hidden;
    background-color: #ffffff;
}

.hero-section__divider {
    width: 244px;
    height: 2px;
    background-color: #ffffff;
    margin: 2rem 0px;
    padding-right: 60px;
}
.ecosystem-text h2{
	width:600px;
}

/* --- Global Section Alignment Rules --- */
.tetrapak-campaign p {
    text-align: left !important;
	line-height:1.4 !important;
}

/* ==========================================================================
   GLOBAL RESPONSIVE STYLES (PIXEL-PERFECT AUDIT)
   ========================================================================== */

/* Prevent horizontal scroll globally */
.tetrapak-campaign {
    overflow-x: hidden;
    max-width: 100vw;
}

/* =========================================
   Tetrapak Responsive Styles
   ========================================= */

/* Large Desktop (<=1440px) */
@media (max-width: 1440px) {
    .tetrapak-campaign .ecosystem-text h1 { font-size: 80px; }
    .tetrapak-campaign .recart-title, .tetrapak-campaign .game-changer-title { font-size: 55px; }
    .tetrapak-campaign .recart-media-grid { gap: 20px; }
}

/* Desktop (<=1200px) */
@media (max-width: 1200px) {
    .tetrapak-campaign .ecosystem-text h1 { font-size: 65px; }
    .tetrapak-campaign .recart-title, .tetrapak-campaign .game-changer-title { font-size: 45px; }
    .tetrapak-campaign .highlights-title { font-size: 50px; }
}

/* Laptop (<=1024px) */


/* Tablet (<=768px) */



/* Merged 1024px Queries for Tetrapak */
@media (max-width: 1024px) {
    .tetrapak-campaign .recart-title{
        font-size: 3.25rem;
        text-align: left;
        line-height: 1;
    }
    .small-pack-item{
            height: 180px;
    }
    .recart-features{
            font-size: 1.4rem;
    text-align: left;
    }
    .recart-main-pack{
        max-width: 240px;
    }
    .ecosystem-text h2 {
        font-size: 40px;
        line-height: 48px;
    }
    .ecosystem-text h1 {
        font-size: 58px;
        line-height: 66px;
    }
    .ecosystem-bg {
        padding: 63px 40px ;
    }
    .ecosystem-images {
        width: 400px !important;
        height: 480px !important;
        margin: 0 auto !important; /* Center the container */
    }
    .box-two {
        width: 230px !important;
            top: 5px;
    left: 60px;
    }
    .box-one {
        width: 200px !important;
            bottom: -20px;
    right: 10px;
    }
	
	
	.brief-header h2 {
		    font-size: 1.4rem;
    font-weight: 500;
		line-height:1.4;
	}
	
    .brief-section {
        padding: 0 17px;
        height: auto;
        min-height: auto; /* Reduced from 400px */
        padding-top: 30px; /* Reduced from 60px */
        padding-bottom: 30px; /* Reduced from 60px */
    }
    .brief-content p {
        font-size: 1.1rem;
		font-weight:400;
		line-height:1.4;
    }
    .brief-header h2 {
        font-size: 1.3rem;
		font-weight:500;
		line-height:1.4;
    }
    .brief-line {
        width: 150px;
    }
    .brief-container {
        width: 99% !important;
        max-width: 990px !important;
        padding-top: 0px !important;
    }
    .recart-card-container {
        padding: 40px;
    }
    .tetrapak-recart-section {
        padding: 2rem 2rem !important;
    }
    .recart-content {
        padding: 58px 40px !important;
    }
    .recart-orange-title { font-size: 40px;  padding: 0px 0px 0px 0px;  margin: 0px; }
    .recart-black-desc { font-size: 17px; }
    .recart-text-container { padding: 0 95px !important; }
    .game-changer-card {
        padding: 4rem !important;
        margin: 1px 0px !important;
        position: relative !important;
        width: 100% !important;
    }
    .approach-block{
            padding-left: 66px !important;
    padding-right: 75px !important;
    }

    .recart-padding {
        padding: 0px 0px 0px 0px !important;
    }
    .game-changer-content{
            padding: 0px 0px !important;
    }
	.laptop-wrapper {
		    max-width: 620px;
	}

        .highlights-container {
        padding: 0 7rem !important;
    }

        .dairy-conference-section {
        padding: 2rem !important;}
    .approach-description {
        font-size: 20px;
        padding: 10px 0px 0px 0px;
    }
    .approach-title {
        font-size: 20px;
        font-weight: 100;
    }
    .startup-india-section,
    .dairy-conference-section {
        padding: 0px 2rem 4rem;
    }
        .dairy-container {
        margin: 0rem 1rem !important;
    }
	
	.tetrapak-campaign .brief-section{
		
	}
	
	
		.monitor-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
			max-width: 569px;
	}
	
	.monitor-blue-stripe {
    position: absolute;
    top: 76%;
    left: 0px;
    width: 100%;
		height: 110%;
	}
    .protein-banner-section{
            padding: 2rem 0rem;
    }
    .protein-card{
            min-height: 500px;
    }
    .game-changer-subtitle,  .tetrapak-campaign .game-changer-title {
        font-size: 2.25rem;
    }
    .game-changer-packs{
        flex: 0 0 40%;
        max-width: 40%;
    }
    .tetrapak-campaign .game-changer-content{
        flex-direction: row;
        text-align: left ;
        align-items: flex-start ;
        display: flex;
    }
    .game-changer-text {
    color: #ffffff;
    flex: 0 0 50%;
    max-width: 50%;
}
.pack-left,.pack-right{
    width: 10rem;
}
.monitor-wrapper{
        top: -60px;
    left: 30px;
}
.monitor-showcase-section{
        padding: 6rem 0 0rem 0rem;
}
    .tetrapak-campaign .ecosystem-section, .tetrapak-campaign .brief-section, .tetrapak-campaign .tetrapak-recart-section, .tetrapak-campaign .tetrapak-grid-section, .tetrapak-campaign .game-changer-section { padding-left: 2rem !important; padding-right: 2rem !important; }
    .tetrapak-campaign .recart-content { flex-direction: column ; text-align: left ; align-items: flex-start; }
    .tetrapak-campaign .recart-image-block, .tetrapak-campaign .game-changer-packs { width: 100% !important; justify-content: center !important; margin-top: 2rem !important; }
    .tetrapak-campaign .recart-text-block, .tetrapak-campaign .game-changer-text { width: 100% !important; padding: 0 !important; }
    .tetrapak-campaign .recart-small-packs-row { justify-content: center !important; }
    .tetrapak-campaign .ecosystem-text h1 { font-size: 50px; }
    .tetrapak-campaign .ecosystem-text h2 { font-size: 35px; }
    .tetrapak-campaign .brief-content { flex-direction: column; }
    .tetrapak-campaign .brief-content p { width: 100% !important; margin-bottom: 20px; }
    .tetrapak-campaign .recart-media-grid { grid-template-columns: repeat(0, 1fr) !important; }
}

/* Merged 768px Queries for Tetrapak */
@media (max-width: 768px) {
	.tetrapak-campaign .ecosystem-section{
		padding-top:107px;
	}
	.monitor-wrapper {
        top: -82px;
		left: 15px;
	margin-top:20px;
	}
	    .startup-india-section, .dairy-conference-section {
        padding: 0px 1rem 0rem;
    }
	    .dairy-container {
        margin: 0rem 1rem !important;
    }
	
	    .dairy-conference-section {
        padding: 0rem !important;
    }
    .tetrapak-campaign .ecosystem-section, .tetrapak-campaign .brief-section, .tetrapak-campaign .tetrapak-recart-section, .tetrapak-campaign .tetrapak-grid-section, .tetrapak-campaign .game-changer-section { padding-left: 1rem !important; padding-right: 1rem !important; }
    .tetrapak-campaign .ecosystem-text h1 { font-size: 2.25rem;line-height:1.2;letter-spacing: -1px; }
    .tetrapak-campaign .ecosystem-text h2 {font-size: 1.2rem;width: 210px;line-height: 1.2;margin: 0 auto;}
	.hero-section__divider{width:170px;margin: 1rem auto;}
    .tetrapak-campaign .recart-main-pack, .tetrapak-campaign .pack-left, .tetrapak-campaign .pack-right, .tetrapak-campaign .small-pack-item { max-width: 100% !important; height: auto !important; object-fit: contain !important; }
    .tetrapak-campaign .recart-card-container { overflow: hidden !important; }
    .tetrapak-campaign .recart-features { text-align: left !important; display: inline-block !important; }
    .tetrapak-campaign .ecosystem-images { flex-direction: column !important; align-items: center;transform: translateY(3%) !important; }
     .tetrapak-campaign .ecosystem-images img {width: 150px}
    .tetrapak-campaign .box-one, .tetrapak-campaign .box-two, .tetrapak-campaign .box-three { position: relative !important; margin-bottom: -175px; max-width: 45% !important; }
	
	.ecosystem-images{
		height:300px !important;
	}
    .tetrapak-campaign .box-one{left: 20px;}
    .tetrapak-campaign .box-two{left: 170px;}
    .tetrapak-campaign .game-changer-title { font-size: 1.4rem !important; }
    .tetrapak-campaign .highlights-title, .tetrapak-campaign .startup-title, .tetrapak-campaign .dairy-title { font-size: 34px !important; }
    .tetrapak-campaign .recart-media-grid { grid-template-columns: 1fr !important; }
    .tetrapak-campaign .monitor-container { width: 100% !important; }
    .tetrapak-campaign .orange-cards-grid { grid-template-columns: 1fr !important; }
    .tetrapak-campaign .approach-header-row, .tetrapak-campaign .startup-header-row { flex-direction: column; text-align: left;        align-items: flex-start; }
    .tetrapak-campaign .dairy-metric-block { flex-direction: column; gap: 20px; }
    .brief-section{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .brief-container{
        width: 100% !important;
        padding-top: 0px !important;
    }
    .ecosystem-section{
        padding-top: 70px;
    }
    .ecosystem-images {
                width: 370px !important;
	
    }
    .ecosystem-text h2 {
        font-size: 36px;
        line-height: 44px;
        letter-spacing: -1px;
    }
    .ecosystem-text h1 {
        font-size: 64px;
        line-height: 72px;
        letter-spacing: -2px;
    }
    .ecosystem-bg {
        flex-direction: column;
        justify-content: center;
        padding: 20px 0px;
    }
    .ecosystem-text {
        width: 100%;
        text-align: center;
    }
    .ecosystem-images {
        position: relative !important;
        margin-top: 40px;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }
    .recart-content {
        position: relative;
        z-index: 30;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 64px 48px;
    }
    .recart-text-block {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: left;
    }
    .recart-image-block {
        flex: 1 1 100%;
        max-width: 100%;
        justify-content: center;
        margin-top: 2rem;
    }
    .small-pack-item {
        height: 116px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3));
    }
    .recart-small-packs-row {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        padding-top: 16px;
        padding-bottom: 8px;
        justify-content: center;
    }
        .recart-content {
        padding: 20px 20px !important;
    }
    .tetrapak-campaign p {
    text-align: left !important;
		padding-bottom: 0px;
}
.tetrapak-campaign .small-pack-item{
            max-width: 25% !important;
}
    .tetrapak-campaign .recart-main-pack{
                max-width: 50% !important;
    }
    .recart-title {
        font-family: 'Poppins', sans-serif;
        font-size: 1.4rem !important;   
        font-weight: 600;
        line-height: 1.1;
        margin: 0 0 12px 0;
        color: #ffffff;
        white-space: normal;
    }
    .recart-subtitle {
        font-family: Poppins, sans-serif;
        font-size: 1.25rem;
        font-weight: 500;
        color: rgb(255, 255, 255);
        margin-bottom: 24px;
        text-align: center !important;
    }
    .recart-features {
        font-family: Poppins, sans-serif;
        font-size: .9rem;
        color: rgb(255, 255, 255);
        list-style: none;
        padding: 30px 0px;
        margin: 0px;
        line-height: 1.4;
    }
    .recart-main-pack {
        width: 100%;
        max-width: 200px !important; /* Make it large and prominent */
        filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 25px 25px);
    }
    .recart-black-desc br {
        display: none;
    }
    .desktop-break {
        display: none !important;
    }
    .highlights-title {
        font-size: 2rem !important;
        font-weight: 800 !important;
        color: #000 !important;
        margin: 0 0 10px 0 !important;
    }
    .highlights-subtitle {
        font-size: 1.4rem !important;
        font-weight: 700 !important;
        color: #fbab17 !important;
        margin: 0 0 20px 0 !important;
        line-height: 1.1 !important;
    }
    .dairy-metric-label{
            font-size: 1.2rem;
    }
    .dairy-metric-value{
        font-size: 1.8rem;
    }
    .protein-banner-section{
            padding: 2rem 1rem;
    }
    .recart-media-grid {
        grid-template-columns: repeat(12, 1fr);
    }
    .grid-card-main {
        grid-column: span 8;
        aspect-ratio: 16/9;
    }
    .grid-card-small,
    .md\:col-span-4 {
        grid-column: span 8;
    }
    .grid-card-banner {
        grid-column: span 12;
    }
    .grid-card-bottom { grid-column: span 12; height: 340px; }
    .grid-card-shelf {
        grid-column: span 8; /* Approx 70% width */
    }
    .grid-card-coco-milk {
        grid-column: span 4; /* Approx 30% width */
    }
    .grid-card-stack-right {
        grid-column: span 8;
        display: flex;
        flex-direction: column;
        gap: 24px;
        height: 100%;
    }
    .grid-card-stack-right .grid-card {
        flex: 1;
        height: auto;
    }
    .game-changer-title { font-size: 20px !important;
        padding: 0px 10px 0px 10px !important;  } /* Matches recart-title scaling */
    .game-changer-title { font-size: 20px; padding: 0px 10px 0px 10px; } /* Matches recart-title scaling */
    .game-changer-subtitle { font-size: 20px; }
    .monitor-heading {
    font-size: 16px;
    padding: 4px 8px;
  }
    .startup-title,
    .dairy-title { font-size: 24px; }
    .startup-desc,
    .dairy-desc { 
		font-size: 1.1rem;
	font-weight:400;
		line-height:1.4;
	}

       .recart-content {
        position: relative;
        z-index: 30;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 64px 48px;
    }

    .recart-padding {
    padding: 0px 0px 0px 0px;   
} 
.laptop-showcase-section{
    padding-top: 40px;
    padding-bottom: 40px;
}
.horizontal-orange-divider{
    margin-top: 40px;
    height: 2px;
}
    .game-changer-content {
        flex-direction: column !important;
              padding: 1px 1px 47px 0px !important;
    }
    .game-changer-text {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
	.game-changer-content{
		gap:0px;
	}
    .game-changer-packs {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        margin-top: 2rem !important;
    }
    .game-changer-card {
        position: relative !important;
        width: calc(100% - 0px) !important;
        overflow: hidden !important;
        padding: 1rem 1rem !important;
        min-height: auto !important;
        display: flex !important;
        align-items: center !important;
        margin: 0px !important;
        background-color: rgb(13, 20, 36) !important;
    }
    .game-changer-subtitle {
        font-family: Poppins, sans-serif !important;
        font-size: 1.5rem !important;
        color: rgb(248, 251, 255) !important;
        margin: 10px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }
    .game-padding {
        padding: 0px !important;
    }
    .game-changer-section {
                position: relative !important;
        width: 100% !important;
        padding: 0rem 0px !important;
        right: 0px !important;
    }
    .approach-block {
        max-width: 1200px !important;
               padding: 2rem 23px !important;
    }
    .highlights-text-container {
        max-width: 1200px !important;
        margin-bottom: 0 !important;
        padding-left: 15px !important;
    }

    .highlights-desc {
        padding: 0px 0px 0px 0px !important;
    }

	    .monitor-showcase-section {
        padding: 12rem 0 0rem 0rem;
    }
    
.monitor-screen-area{
    left: 6px !important;
}
.monitor-blue-stripe{
        top: 90% !important;
    left: 0 !important;
    width: 100% !important;
    height: 85% !important;
}
    .laptop-blue-stripe {
        position: absolute !important;
        top: 54% !important;
        left: 0 !important;
        width: 100% !important;
        height: 452px !important;
        margin-top: -249px !important;
        background-color: rgb(1, 190, 245) !important;
        z-index: 0 !important;
    }
    .dairy-conference-section {
        padding-top: 0px !important;
    }
    .protein-banner-section {
        width: 100% !important;
    }
    .protein-card {
        min-height: 300px !important;
    }
    .animated-blue-border{
        stroke-width: 12px !important;
    }
    
}
/* 2. iPad Mini (768px - 819px) */

@media screen and (min-width: 768px) and (max-width: 819px) {
	.ecosystem-bg {
         flex-direction: row; 
        justify-content: center;
        padding: 20px 0px;
    }
	
	.tetrapak-campaign .box-one {
        top: 70px;
        left: -37px;
    }
	
element.style {
    opacity: 1;
    transform: translate3d(0px, -11.8177px, 0px) rotate(4.637deg);
}


    .tetrapak-campaign .box-one,.tetrapak-campaign .two-one {
         
		max-width:65% !important;
    }
	.tetrapak-campaign .box-two{
		left:79px;
		max-width:65% !important;
	}
	

 .tetrapak-campaign .ecosystem-text h2 {
        font-size: 3.25rem;
    }
	.tetrapak-campaign .ecosystem-text h1 {
		     font-size: 3.25rem;
	}
	
	
	    .tetrapak-campaign .recart-title {
        font-size: 3.25rem !important;
        text-align: left;
        line-height: 1;
    }
	.game-changer-subtitle {
        font-family: Poppins, sans-serif !important;
		font-size: 4.5rem !important;
	}
	    .game-changer-content {
        flex-direction: column !important;
        padding: 0px 0px !important;
    }
	
	    .tetrapak-campaign .game-changer-title {
        font-size: 2rem !important;
    }
	
	
	.tetrapak-campaign .game-changer-packs{
		        margin-bottom: 3rem !important;
    }
	    .game-changer-packs {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        margin-top: 2rem !important;
    }
	.pack-left, .pack-right {
        width: 7rem;
    }
	
	.tetrapak-campaign .recart-image-block, .tetrapak-campaign .game-changer-packs {
		margin-top: 0rem !important;
    }
	
	.laptop-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
		max-width: 654px;
	}
	    .monitor-wrapper {
        top: -19px;
        left: 30px;
    }
	
	    .dairy-container {
        margin: 3rem 1rem !important;

	}
	
	    .protein-card {
        min-height: 411px !important;
    }
	
}