/* Home Page Animation */

/* Clip Paths */
.expanding-block.btm-right,
.two-col .btm-rig,
.expanding-block.top-right,
.expanding-block.top-left{clip-path:polygon(0 0,calc(100% - 60px) 0,100% 60px,100% 100%,0 100%);}
.expanding-block.top-left.active {clip-path:none;}

	@media only screen and (max-width:768px) {
		.two-col .btm-right { clip-path: none; }
	}

/* Content for blocks */
.close-btn{position:absolute;top: 10px;left: 10px;padding:5px 10px;cursor:pointer;display:none; font-weight:bold;}

.expanding-block .close-btn { display: none; }
.expanding-block.active .close-btn { display: block; opacity: 0; animation: fadeIn 1s ease-in-out 1s forwards;z-index:4;  }
  
  @keyframes fadeIn {
	0% {
	  opacity: 0; /* Start as fully transparent */
	}
	100% {
	  opacity: 1; /* Fade in to fully visible */
	}
  }

.close-btn .times-symbol { font-size: 1.5em; }
.expanding-block{position:relative; width:200px;height:200px;background:#333;color:#fff;margin:20px;transition:all 0.3s ease-in-out;overflow:hidden;}
.expanding-block.active .close-btn{display:block;background:transparent;border:none;color:#fff;font-size: 1.2em;font-family:inherit;font-weight:300}

.first-paint {position:relative; z-index:1; width:100%;height:100%;overflow:hidden;}
.first-paint .image{position:relative; z-index:2; width:100%;height:102%;overflow:hidden; margin-top:-1%;}
.first-paint{background:#808A28;background:linear-gradient(180deg,rgb(111,144,156) 51%,rgb(42,88,107) 100%);opacity:1;transition:all 0.3s ease-in-out;}
.first-paint .image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;object-fit:cover;/* Ensures the image covers the div */}
.first-paint h3{position:absolute;bottom:20px;left:20px;z-index:3;color:white;text-shadow:1px 1px rgba(0,0,0,1);font-size:1.25em}

.open-content {position: absolute;width:100%;height:100%;top:0px;left:0px;z-index:4;display: none;}
.expanding-block.active .open-content {display:block}

/* Delay on each block on page Load */
.expanding-block.one { opacity: 0; animation: fadeIn 0.3s ease-in 0.3s forwards; }
.expanding-block.two { opacity: 0; animation: fadeIn 0.3s ease-in 0.6s forwards; }
.expanding-block.three { opacity: 0; animation: fadeIn 0.3s ease-in 0.9s forwards; }
.expanding-block.four { opacity: 0; animation: fadeIn 0.3s ease-in 1.2s forwards; }
.expanding-block.five { opacity: 0; animation: fadeIn 0.3s ease-in 1.5s forwards; }
.expanding-block.six { opacity: 0; animation: fadeIn 0.3s ease-in 1.8s forwards; }
.expanding-block.seven { opacity: 0; animation: fadeIn 0.3s ease-in 2.1s forwards; }
.expanding-block.eight { opacity: 0; animation: fadeIn 0.3s ease-in 2.4s forwards; }
	
@keyframes fadeIn {
		to {opacity: 1;}
	}




/* Fade Animations */

/* Fade in Left */
.expanding-block .fade-in-left { display: none; }
.expanding-block.active .fade-in-left { display: block; opacity: 0; transform: translateX(-100%); animation: fadeInLeft 0.5s ease-in-out 1s forwards; }

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-100%); /* Off-screen to the left */
	}
	100% {
		opacity: 1;
		transform: translateX(0); /* End at the original position */
	}
}

/* Fade in Right */
.expanding-block .fade-in-right { display: none; }
.expanding-block.active .fade-in-right { display: block; opacity: 0; transform: translateX(100%); animation:fadeInRight 1s ease-in-out 1.5s forwards; }

.expanding-block.active .fade-in-right.one { animation:fadeInRight 1s ease-in-out 2s forwards;/ }
.expanding-block.active .fade-in-right.two { animation:fadeInRight 1s ease-in-out 2.5s forwards;/ }
.expanding-block.active .fade-in-right.three { animation:fadeInRight 1s ease-in-out 3s forwards;/ }
.expanding-block.active .fade-in-right.four { animation: fadeInRight 1s ease-in-out 3.5s forwards;/ }
.expanding-block.active .fade-in-right.five { animation: fadeInRight 1s ease-in-out 4s forwards;/ }
.expanding-block.active .fade-in-right.six { animation: fadeInRight 1s ease-in-out 4.5s forwards;/ }

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(100%);/* Off-screen to the right */
	}
	100% {
		opacity: 1;
		transform: translateX(0);/* End at the original position */
	}
}


/* Fade in */
.expanding-block .fade-in { display: none; }
.expanding-block.active .fade-in { display: block; opacity: 0; /* Start fully transparent */ animation: fadeIn 2s ease-in-out 0.1s forwards; /* 1s duration, ease-in-out timing, 0.5s delay */ }
  
  @keyframes fadeIn {
	0% {
	  opacity: 0; /* Start as fully transparent */
	}
	100% {
	  opacity: 1; /* Fade in to fully visible */
	}
  }


	@media only screen and (min-width:769px) {

		/* Home Page Animation */
		.home-page-animation {position:relative; width:100%; overflow:hidden;}

		.intro {width:48.5vw; height:27vh; position:absolute; right:0px; display: flex; justify-content: center; align-items: center;}
			.intro .content {padding: 25px;}
			.intro .content p {margin:0;}
			
		.row-blocks { width:100vw; margin:0; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; overflow: hidden; flex-direction: row; }
		.expanding-block { position:relative; padding: 0px; margin:0px; cursor: pointer; width: 25vw; border:1px solid white; height: 27vh; overflow: hidden; transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out, height 0.3s ease-in-out 0.3s; }
			.first-paint .image {opacity:1;  transition: opacity 0.3s ease-in-out 0.2s; /* Transition for fading back in */}
			.expanding-block:hover .first-paint .image,
			.expanding-block.active .first-paint .image { opacity: 0; transition: opacity 0.3s ease-in-out; /* Transition for fading out */}
		.empty-block { cursor:default; background-color:transparent; position:relative; padding: 0px; margin:0px; width: 25vw; height: 27vh; overflow: hidden; }
		.expanding-block.spantwo,
		.empty-block.spantwo {width:50vw;}
		.parent-active .expanding-block{background-color:#eee;width:0vw;}
		.parent-active .empty-block{width:0vw;}
		.expanding-block.active{background-color:#B1BF00;width:100vw !important; height:600px;} 
		.expanding-block.active.one{height:600px}
		.expanding-block.active.two,
		.expanding-block.two .slider .left-col .repeater-item{height:600px}
		.expanding-block.active.three{height:550px}
		.expanding-block.active.four{height:600px}
		.expanding-block.active.five{height:905px}
		.expanding-block.active.six{height:36vw}
		.expanding-block.active.seven{height:1000px}
		.expanding-block.active.eight{height:500px}

		figure.logo {height:100px;width:auto;margin-bottom:40px}
		figure.logo img {height:100%;width:auto}	
	}



	@media only screen and (max-width:1572px) {
	    .expanding-block.active.two,
		.expanding-block.two .slider .left-col .repeater-item{ height: 650px;}
	}

	@media only screen and (max-width:1300px) {
	    .expanding-block.active.two,
		.expanding-block.two .slider .left-col .repeater-item{ height: 700px;}
		.expanding-block.three.active .left-col p br {display:none}
		.expanding-block.active.three {height:600px;}
	}

	@media only screen and (max-width:1200px) {
	    .expanding-block.active.three {height:700px;}
		.expanding-block.active.six{height:43vw}
		

	}


	@media only screen and (max-width:1070px) {
	    .expanding-block.active.two,
		.expanding-block.two .slider .left-col .repeater-item{ height: 750px;}
		.expanding-block.active.three {height:800px;}
	
	}
	@media only screen and (max-width:991px) {
	    .expanding-block.active.six{height:62vw}
		

	}

	@media only screen and (max-width:940px) {
	    .expanding-block.active.two,
		.expanding-block.two .slider .left-col .repeater-item{ height: 800px;}
		.expanding-block.active.three {height: 850px;}
		
	}

	@media only screen and (max-width:794px) {
	    .expanding-block.active.two,
		.expanding-block.two .slider .left-col .repeater-item{ height: 850px;}
		
	}

	@media only screen and (max-width:768px) {
		.expanding-block.two .slider .left-col .repeater-item{ height: auto;}
		
		/* Home Page Animation */

		.home-page-animation {position:relative; width:100%; overflow:hidden;}

		.intro {padding:1.5em 1em;}
		.intro p {margin:10px 0 0;}
		
		.row-blocks { width:100%; margin:0; display:block; }
		.expanding-block { position:relative; padding:0px; margin:5px 0px; cursor: pointer; display:block; height: 27vh; width:100%; transition: height 0.3s ease-in-out, background-color 0.3s ease-in-out; }

		.empty-block{display:none;}	
		.expanding-block.active { background-color: #B1BF00; width: 100vw !important; height: auto !important; }
		
		.first-paint .image,
		.expanding-block:hover .first-paint .image {opacity:1;  transition: opacity 2s ease-in-out; }
		.expanding-block.active .first-paint .image { opacity: 0; transition: opacity 0.3s ease-in-out; } 

		.expanding-block.three .two-col.thirty-seventy h2 br{display:block;}

	}




/* Columns */
.two-col{position: relative;top:0;display:grid;grid-template-columns: repeat(2, 1fr);grid-column-gap: 24px;grid-row-gap: 0px;min-height:100%;width: 100%;padding: 4em;align-items: center;height: 100%;}
.two-col.sixy-forty{grid-template-columns: 65% auto;}

.slider.two-col {padding:0; align-items:normal}
	.slider .left-col  {background:rgba(0,0,0,0.75);padding: 4vw}

.two-col.slider .left-col{max-height: 100%; overflow: auto;}
	.two-col.slider .left-col .button-container:first-of-type{margin-bottom:6em}




/* slider */
.expanding-block.two .slider .left-col  {padding:0}
.expanding-block.two .slider .left-col .repeater-item {padding:4vw}

.two-col.slider .left-col {
  max-height: 100%;overflow: auto;scrollbar-width: none; /* Firefox */-ms-overflow-style: none; /* IE & Edge */}

.two-col.slider .left-col::-webkit-scrollbar {display: none; /* Chrome, Safari */}

	
	@media only screen and (max-width:768px) {
		.expanding-block.two .slider .left-col  {padding:0 1em}
		.expanding-block.two .slider .left-col .repeater-item {padding:0}

	}



	/* Contact Us Block */
	.eight .open-content .map {position:absolute;width:50%;height:100%;overflow:hidden;top:0;left:auto; right:0;}
	.two-col.contact-us {grid-template-columns: 45% auto;}	
		.contact-us .left-col {background:transparent}
			.contact-us .left-col h2{color:black}



	@media only screen and (max-width:768px) {
		.two-col  {grid-template-columns: repeat(1, 1fr) !important;min-height:100%}
		.two-col{position:relative;}
		.slider .left-col, .contact-us .left-col,.two-col { padding: 2em 1em 1em 1em; }

		.two-col.slider .left-col {max-height: 100%;}
			.two-col.slider .left-col .button-container:first-of-type{margin-bottom:2em}
	}

	




/* Cover image container */
.open-content figure.cover {position: absolute;width: 100%;height: 100%;overflow: hidden;top:0;left:0;min-height: 55vh;}
	.open-content figure.cover img {width: 100%;height: 100%;object-fit: cover;opacity: 0;animation: fadeIn 1s ease-in-out forwards;display: block;position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

	@media only screen and (max-width:768px) {
		.active  .open-content  {position:relative}
		.open-content  figure.cover {height:33vh;position:relative;min-height: 100%; }

		}




/* Images */
	@media only screen and (max-width:768px) {
		.expanding-block .logo img {max-height: 85px; width: auto; margin-bottom: 1em;height:100%; max-width: 50%; }
	}




/* Expanding block */
.open-content h2,.open-content p{color:#ffffff}
.open-content span.vs-green{color:#b6be45}
	.open-content h2 span.vs-green{font-weight:700}
.open-content.fade-in-colour { display: flex; flex-direction: column; gap: 20px; }

	@media only screen and (max-width:768px) {
		.open-content span.vs-green{color:#ffffff}
		.expanding-block.three .open-content span.vs-green{color:#b6be45}
	}




/* Smart container */
.smart-container {display: grid;grid-template-columns: auto 1fr;gap: 20px;margin-left: 8px;}
  .smart-letters { display: flex; flex-direction: column; gap: 35px; margin-top: 15px; }
  .letter-box:after {content: "";border-left: 2px solid grey;height: 20px;transform: rotate(-45deg);position: absolute;bottom: -19px;left: 44px;}
  .letter-box:last-child:after { display: none; }
  .letter-box { display: flex !important; justify-content: center; align-items: center; width: 40px; height: 40px; border: 2px solid grey; font-weight: bold; transform: rotate(45deg);opacity: 1;transition: opacity 2s; }
  .letter-box p { transform: rotate(-45deg); margin: 0; font-size: 1.5em; font-weight: bold; color: grey; opacity: 1;transition: opacity 2s; /* Fade-in transition */ }
  
.smart-text p { margin:0; padding:9px 0 0; height:75px; font-size: 1.5em; line-height: 1.1em; }

/* Smart container box animation */
.expanding-block.active .fade-in-colour.one p { animation: fadeInColor 1s forwards; animation-delay: 2.5s; }
.expanding-block.active .fade-in-colour.two p { animation: fadeInColor 1s forwards; animation-delay: 3s; }
.expanding-block.active .fade-in-colour.three p { animation: fadeInColor 1s forwards; animation-delay: 3.5s; }
.expanding-block.active .fade-in-colour.four p { animation: fadeInColor 1s forwards; animation-delay: 4s; }
.expanding-block.active .fade-in-colour.five p { animation: fadeInColor 1s forwards; animation-delay: 4.5s; }
.expanding-block.active .fade-in-colour.six p { animation: fadeInColor 1s forwards; animation-delay: 5s; }
 
  @keyframes fadeInColor {
	0% {
	  opacity: 1; 
	  color: grey;
	}
	100% {
	  opacity: 1; 
	  color: white;
	}
  }

  /* Smart container line animation */
.expanding-block.active .fade-in-colour.one,.expanding-block.active .fade-in-colour.one:after  { animation: fadeInborder 1s forwards; animation-delay: 2.5s; }
.expanding-block.active .fade-in-colour.two,.expanding-block.active .fade-in-colour.two:after  { animation: fadeInborder 1s forwards; animation-delay: 3s; }
.expanding-block.active .fade-in-colour.three,.expanding-block.active .fade-in-colour.three:after  { animation: fadeInborder 1s forwards; animation-delay: 3.5s; }
.expanding-block.active .fade-in-colour.four,.expanding-block.active .fade-in-colour.four:after  { animation: fadeInborder 1s forwards; animation-delay: 4s; }
.expanding-block.active .fade-in-colour.five,.expanding-block.active .fade-in-colour.five:after  { animation: fadeInborder 1s forwards; animation-delay: 4.5s; }
.expanding-block.active .fade-in-colour.six,.expanding-block.active .fade-in-colour.six:after  { animation: fadeInborder 1s forwards; animation-delay: 5s; }
  
  @keyframes fadeInborder {
	0% {
	  opacity: 1; 
	  border-color: grey;
	}
	100% {
	  opacity: 1; 
	  border-color: white;
	}
  }

	@media only screen and (max-width:768px) {
		.smart-text p {max-width:60%;}
	}

	@media only screen and (max-width:372px) {
	
	}