/* CSS Document */

 body {
            font-family: 'Inter', sans-serif;
        }
.form-container {
            background-image: url("../img/hydro-flex-fundal.jpg");
			    background-size: cover;
        }
		
.submit-button {
            background: linear-gradient(90deg, #d30a8b, #7b2a92);
        }
        
.voucher-card img {
            height: 1.5rem;
         }
		 
	.hidethis{
	display: none;
	}
       
		 
		 


   

    /* ----- Hero Section ----- */
    .hero {
      position: relative;
      display: grid;
      grid-template-columns: var(--gutter) 1fr var(--gutter);
      grid-template-rows: var(--gutter) 1fr var(--gutter);
      overflow: hidden;
      isolation: isolate;
    }

    .hero img.hero-bg {
      width: 100%;
      height: auto;
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      z-index: 0;
    }
	
	.hero-bg-desktop{
			display: block;
	}
	
	.hero-bg-mobile{
			display: none;
	}

     /*
	 .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.15);
      z-index: 1;
    }
	*/
	
	
    /* ----- Text Panel (the black rectangle) ----- */
    .text-panel {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: start;
    /* background: #000; */
    color: #fff;
    padding: var(--panel-padding);
    margin-left: var(--gutter);
    margin-top: var(--gutter);
    max-width: var(--text-max-width);
    /* border-radius: 6px; */
    position: relative;
    z-index: 2;
	}

    .text-panel h1 {
    font-size: clamp(1.75rem, 3.5vw, 2.3rem);
    line-height: 1.1;
    margin: 0.5em 0 0.5em 0;
	}

    .text-panel p {
      font-size: clamp(1rem, 1.2vw, 1.25rem);
      line-height: 1.5;
      margin: 0.4em 0 0.2em;
      opacity: 0.95;
    }
	
	
	 /* Letter animation */
    @keyframes fadeInLetter {
      from { opacity: 0; transform: translateY(20%); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-letters span {
      opacity: 0;
      display: inline-block;
      animation: fadeInLetter 0.5s forwards;
    }

    .animate-letters span:nth-child(n) {
      animation-delay: calc(var(--i) * 0.07s);
    }

    /* ----- Packshot (the red square placeholder) ----- */
     /* Animation */
    @keyframes slideInFromRight {
      0% {
        transform: translateX(120%) scale(0.9);
        opacity: 0;
      }
      80% {
        transform: translateX(-5%) scale(1.02);
        opacity: 1;
      }
      100% {
        transform: translateX(0) scale(1);
        opacity: 1;
      }
    }

    .packshot {
    position: absolute;
    right: clamp(1.25rem, 6vw, 3rem);
    bottom: clamp(1.25rem, 6vw, 3rem);
    width: min(38vw, 230px);
    max-width: 100%;
    height: auto;
    z-index: 3;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.35));
    animation: slideInFromRight 1.2s ease-out forwards;
	}
	
	.ceresit_logo {
		display: nonel
	}


	/* ----- Diverse tweaks ----- */
	.h-area-16 {
		height: 16rem;
	}

	.w-min-4 {
    	min-width: 1rem;
	}
	
	.w-33{
	width: 33%;
	}
	
	#file-upload{
	opacity: 0;
	}


button{
cursor: pointer;
}

.premii_div_flex_row{
flex-direction: row;
}

    /* ----- Responsive tweaks ----- */
    @media (max-width: 900px) {
      .hero {
        grid-template-columns: var(--gutter) 1fr var(--gutter);
        grid-template-rows: var(--gutter) auto 1fr var(--gutter);
       /*  min-height: 75vh;*/
      }

      .text-panel {
        grid-column: 2; /* center column on smaller screens */
        grid-row: 2;    /* top area */
        margin: 0;      /* gutters handled by grid */
      }

      
    }
	
	@media (min-width: 768px) {
    	h1.md\:text-5xl {
			font-size: 2rem;
			line-height: 1;
		}
		
		.md\:p-12 {
			padding: 2rem!important;
		}
	}
	
	
	@media (max-width: 720px) {
		.hero-bg-desktop{
			display: none;
		}
		
		.hero-bg-mobile{
			display: block;
		}
		
		.packshot {
        right: var(--gutter);
        bottom: var(--gutter);
        width: min(36vw, 360px);
      }
	  
		.text-panel  {
			background: #000;
			width: 100%;
		}
	  
	  	.ceresit_logo {
		position: absolute;
        right: clamp(0.25rem, 2vw, 2rem);
        top: clamp(0.25rem, 2vw, 2rem);
        width: min(28vw, 230px);
		max-width: 100%;
		height: auto;
		z-index: 4;
		}
	
	
		.gdpr_class_fields div{
			width: 100%;
		}
		

	
	}

    @media (max-width: 520px) {
      .text-panel {
        border-radius: 4px;
      }
      .packshot {
        /* position: static; /* stack under text when very narrow */
        margin: var(--gutter) auto var(--gutter) var(--gutter);
        display: block;
      }
      .hero {
        grid-template-rows: var(--gutter) auto auto var(--gutter);
      }
    }