body{
color: #303131; font-size: 15px;
font-family: "semplicitapro", sans-serif;
font-weight: 300;
font-style: normal;
}

.burger-menu, .mob-vis {
visibility:hidden; display:none;
}

.sub-image img{max-width:100%;}
.sub-head{font-family:'Ephesis', cursive !important; text-align:center; font-size:46px; line-height:100% !important;}
.sub-head span{font-family: "semplicitapro", sans-serif !important; text-align:center; font-size:18px;}
.slide-holder{width:80%; margin:auto; border: thin black solid; padding: 20px;}

.mid-content{visibility: hidden; display:none;}

.title-text{ font-size:25px; font-weight:400; margin:40px 0px; text-align:center }
strong{font-weight:500;}

.contact-left{width:30%; margin: 0 30px; display:flex; align-items: top;}
.contact-right{width:30%; margin: 0 30px}
.contact-right-head{visibility:hidden; display:none;}
.contact-left a{color:white; text-decoration:none; border-bottom:thin dotted white; padding-bottom:3px}

  .projects-pg-left{width:49.2%;}
  .projects-pg-left img{height:100%; width:100%;}
  
  .projects-pg-right{width:49.2%; display:flex; justify-content:space-between; flex-wrap:wrap;}
  .projects-pg-subs{width:48.5%;}
  .projects-sub-1{margin-bottom:16px;}
  .projects-pg-subs img{width:100%; height:100%}
  
  .slider-logo-position{width:100%; position:relative;}
  .slider-logo{ position: absolute; bottom:22px; z-index:1; left:50%; margin-left: -12px }
  .slider-logo img{width:50px;}
  
  .new-project-container{display:flex; justify-content:space-between; width:100%; margin-top: 40px}
  .new-project-sub{width:49.2%; position:relative; height:auto; overflow:hidden;}
  .new-project-sub img{width:100%; height:100%}
  .new-project-title{width:100%; position:absolute; top: 20%;  background-image:url(../images/back-fifty.png); background-repeat:repeat; padding-bottom:20px}
  
.new-project-title p{font-size:16px; width:85%; margin: 20px auto 0px; font-weight:400; color:white}
.new-project-title strong{font-size:45px; margin-bottom:10px; line-height:100%; font-family: 'Ephesis', cursive !important; }
.proj-logo{width:75px !important; margin-top:0px;}

.large-text{font-size:35px; line-height: 140% !important}
.sub-text p{font-size:16px; line-height:200%; text-align:justify;}
.work-top{width:100%; margin: 30px auto; }
.work-title{font-size:35px; font-family: 'Ephesis', cursive !important; color:white; margin:20px 0px 0px 0px } 
.work-title-alt{font-size:45px; font-family: 'Ephesis', cursive !important; color:#303131; margin:0px } 
.work-logo{margin-top:40px; margin-bottom:0px;}
.work-sub-content{ width:80%; margin:auto; color:white; text-align:justify; font-size:16px; line-height: 200% }
.work-sub-content-alt{ width:80%; margin:auto; color:#303131; text-align:justify; font-size:16px;  line-height: 200% }

		/*.SliderMainClass{width:100%; height:100vh;}*/
.sliderwidth{width:100%; height:100vh; position:relative}
.main-content{margin:auto; width:1240px;}	
.main-content-reduced {width:80%; margin:auto}

.main-content ul{line-height:250%}

.project-content{margin:auto; width:1240px;}

.project-top-text{width:80%; margin:auto}
.project-top-text p{font-size:35px; text-align:center; margin-bottom: 0px}
.project-top-flex{display:flex; justify-content:space-between}
.project-top-left{width:48%; margin:20px auto; font-size:16px; line-height:200%;}
.project-top-left span{font-size:35px; line-height:130%;}
.project-top-right{width:48%; margin:20px auto; font-size:16px; line-height:200%;}
.project-sub-content{width:96%; margin:20px auto; font-size:16px; line-height:200%; text-align:justify}

		
header{ /*Important not specified as a class because header is reducing*/
top:0px;
position: fixed; 
height: 65px; 
width:100%; 
z-index:100; 
background-position:center center; 
background-repeat: repeat;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
}

  .introvid{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
}

#extra-bar{ /*Important not specified as a class because header is reducing*/
position: fixed; 
bottom: 0px;
height: 60px; 
width:100%; 
z-index:100;
background-color:#303131;
color:white;
font-weight:normal;
opacity:.7;
font-family: "semplicitapro", sans-serif;
font-weight: 300;
font-style: normal;}


.header-back{width:100%; height:100%; background-color:#FFFFFF; opacity:.8;}

header.smaller {
    height: 65px;
	background-color: #FFFFFF;
	opacity: 1;
	/* animation: smallFade 1s forwards;*/
}

header #logo{
/*    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;*/
	
	margin-top: 7px;
	}

/* 
@keyframes smallFade {
  0%{ background-color: #FFFFFF;}
  100% { background-color: #303131;}
}*/

@keyframes dreamFade {
  0%{ opacity: 1; }
  60% { opacity: 0; }
  80% { opacity: 0; font-size:12px;}
  100% { opacity: 1;}
}

@keyframes fadeInText {
  0%{ opacity: 0; }
  10% { opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  90% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes fadeOutText {
  0%{ opacity: 1; }
  60% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes heightAnimation {
  0%{
   margin-top: 20vh; width: 220px;
  }
  40% {
	opacity: 0; margin-top: 15vh; width: 300px;
  }
  60% {
	opacity: 0; margin-top: 0vh; width: 300px;
  }
  
  100% {
  	opacity: 1; margin-top: -72px; width: 50px;  
  }
}

@keyframes heightAnimationRev {
  0% {
  	opacity: 0; margin-top: 20vh; width: 301px;
  }
  25% {
   	margin-top: 20vh; width: 301px; opacity: 1;
  }
  85% {
   	margin-top: 20vh; width: 301px; opacity: 1;
  }  
  90% {
	margin-top: 15vh; width: 400px;
  }  
  95% {
  	opacity: 0; margin-top: 5vh; width: 400px;
  }  
   100%{
	margin-top: -115px; width: 130px; opacity: 1; 
  } 
  
}


@keyframes heightAnimationMob {
  0%{
	margin-top: 15vh; width: 50px; opacity: 1; 
  }
  5% {
  	opacity: 0; margin-top: 15vh; width: 300px;
  }
  10% {
	opacity: 0; margin-top: 15vh; width: 300px;
  }
  15% {
   	margin-top: 20vh; width: 300px; opacity: 1;
  }
  85% {
   	margin-top: 20vh; width: 300px; opacity: 1;
  }  
  90% {
	margin-top: 15vh; width: 300px;
  }  
  95% {
  	opacity: 0; margin-top: 5vh; width: 300px;
  }  
   100%{
	margin-top: -110px; width: 120px; opacity: 1; 
  } 
  
}

	
header.smaller #logo{margin-top: 13px; } /*width:50px;*/
footer.smaller #extra-bar{animation: fadeOutText 2s forwards; } /*width:50px;*/

#logo-container-static{width:130px; margin:auto; position:relative; z-index:10; margin-top: -115px;}
#logo-container{width:301px; margin:auto; position:relative; z-index:10; animation: heightAnimationRev 7s forwards;}
/* height:300px; background-color:#000000; padding: 50px; border-radius:290px; background-color: rgba(0, 0, 0, 0.6);*/
#logo-text{width:500px; margin:auto; position:relative; z-index:10; animation: fadeInText 5s forwards;}
#logo-container img, #logo-text img, #logo-container-static img{width:100%;}
header.smaller #logo-container{width:50px; animation: heightAnimation 1s forwards;}
header.smaller #logo-text{animation: fadeOutText 1s forwards;}

.header-fixed-padding{width:100%; height:160px;} /* If fixed header padding required to shift content down below */  
	
.top-links-left{width:46%; position: absolute; top:50px; left:0px; height:30px; text-align:right; display:flex; justify-content:space-evenly;}	
.top-links-right{width:46%; position: absolute; top:50px; right:0px; height:30px; text-align:left; display:flex; justify-content:space-evenly;}
.top-links-background{background-color:#000; opacity: .8; width:100%; height:115px;}	

header.smaller .dreams{animation: dreamFade 1s forwards;}

.tlink a {text-decoration:none; margin:0px; font-size:15px; color:#FFFFFF; font-family: "semplicitapro", sans-serif; font-weight: 500; font-style: normal; white-space: nowrap; }
.tlink a:link {color:#CCCCCC;}
.tlink a:visited {color:#CCCCCC;}
.tlink a:active {color:#CCCCCC;}
.tlink a:hover {color:#999999;}

.nav-button{position:relative;}
.nav-button-sub-1{min-width:120px; height:50px; position:absolute; top:22px; visibility:hidden; display:inline-block; z-index:200; padding-top:20px}
.nav-button-sub-1 a{margin: 0px !important; color:#FFFFFF; padding:none !important; font-size:14px !important;}
.nav-button-sub-1 a:hover{color:#999999;}
.nav-button:hover > .nav-button-sub-1{visibility:visible;}
.nav-button-sub-menu{background-color:#303131; width:100%; height:32px; opacity: .7; /*border-bottom:2px solid #FFFFFF;*/ padding: 20px 0px 6px 0px; white-space:nowrap;  box-sizing:content-box; margin-bottom: 0px} /*Margin bottom is important otherwise menu can close as moving between elements*/
.nav-button-sub-menu span{padding: 0px 15px}
.nav-button-sub-menu:hover{}
.nbs-right{right: 0px;} /* Required for positioning of the sub menu */
.nbs-left{left: 0px; text-align:left;}
.nbs-center{text-align:center; left: 50%; transform: translate(-50%, 0);}
.nbs-r{text-align:right;}
.nbs-l{text-align:left;}
.nbs-c{text-align:center;}


.main-content p, main-content ul{ line-height:200%;}

.flex-3{width:31%;}	
.flex-3 img{width:100%;}	

.sliderwidth-project{width:66%; position:relative;}
	
.slider-overlay{position:absolute;  top:0px; left:0px; height:100vh; width:100%; z-index:9; background-color:#303131; opacity:.2}

	
.slider-title-pages, .slider-title{
	position:absolute;  
	top:35vh;
	width:100%;
	font-size:80px; 
	color:#333333; 
	text-align:center;
	z-index:99;
	font-weight: 600;
	 -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
	}	
	
.slider-title{font-family: 'Ephesis', cursive;}

/*.sl1{font-family: 'Ephesis', cursive;}
.sl2{font-family: 'Fuggles', cursive;}
.sl3{font-family: 'Oooh Baby', cursive;	}
.sl4{font-family: 'La Belle Aurore', cursive;}
.sl5{font-family: 'Allison', cursive;}*/
	
.slider-title span{font-family: "semplicitapro", sans-serif !important; font-size:20px;  }
 
	
.slider-title p{	   
color: #fff;
margin: 0px;
  text-shadow:
    0 0 2px #fff,
    0 0 5px #646464,
    0 0 8px #646464,
    0 0 12px #646464;
	}

	.inter-banner-outer{display:flex; width:100%; background-color:#303131; justify-content:space-between;}
	.inter-banner-title{width:48%;  padding:24px 0px 15px 0px}
	.inter-banner-text{width:48%; color:#FFFFFF; padding:0px 0px; font-size:15px; line-height:200%;  margin-top:20px}
	.inter-banner-title strong{font-size:42px; color:#FFFFFF; margin:0px;}
	.inter-banner-title p{color:#FFFFFF; font-size:15px; line-height:200%}


 @keyframes fade-in-outA { /*Heritage*/
            0% {opacity: 0;transform: translate(0, 0);font-size:100px;}
			10% {opacity: .3;transform: translate(0, -17%);font-size:120px}
			20% {opacity: 1;transform: translate(0, 0);font-size:50px;}
			100% {opacity: 1;transform: translate(0, 0);font-size:50px;}
			/*95% {opacity: 0;}
			100% {opacity: 0;transform: translate(-25%, -780%);font-size:25px;visibility:hidden;}*/
        } 	
  
 @keyframes fade-in-outB {/*We Work*/
            0% {opacity: 0;transform: translate(0, 0);font-size:100px;}
			10% {opacity: .3;transform: translate(0, -17%);font-size:120px}
			20% {opacity: 1;transform: translate(0, 0);font-size:70px;}
			100% {opacity: 1;transform: translate(0, 0);font-size:70px;}
			/*95% {opacity: 0;}
			100% {opacity: 0;transform: translate(-80%, -780%);font-size:25px;visibility:hidden;}*/
        } 

 @keyframes fade-in-outC {
            0% {opacity: 0;transform: translate(0, 30%);font-size:80px;}
			50% {opacity: 1;transform: translate(0, 0);font-size:120px}
			100% {opacity: 1;transform: translate(0, 10%);font-size:70px;}
        } 

 @keyframes fade-in-outD {/*Porfolio*/
			
			
			 0% {opacity: 0;transform: translate(0, 0);font-size:50px;}
			50% {opacity: .3;transform: translate(0, -17%);font-size:80px}
			100% {opacity: 1;transform: translate(0, 0);font-size:70px;}
        } 		

 @keyframes fade-in-outE { /*Contact*/
            0% {opacity: 0;transform: translate(0, 0);font-size:100px;}
			10% {opacity: .3;transform: translate(0, -17%);font-size:120px}
			20% {opacity: 1;transform: translate(0, 0);font-size:70px;}
			100% {opacity: 1;transform: translate(0, 0);font-size:70px;}
			/*95% {opacity: 0;}
			100% {opacity: 0;transform: translate(80%, -780%);font-size:25px;visibility:hidden;}*/
        } 			
		
.animA {animation: fade-in-outA 4s ease-in-out forwards;}
.animB {animation: fade-in-outB 4s ease-in-out forwards;}
.animC {animation: fade-in-outC 1s ease-in-out forwards;} /*font-family:'Ephesis', cursive !important*/
.animD {animation: fade-in-outD 1s ease-in-out forwards;}
.animE {animation: fade-in-outE 4s ease-in-out forwards;}


 /* Project Styling */


			.project-left{width:33%; height:100%; background-color:#303131; overflow:hidden}

			 .plcover{height:100%; width:100%;  background-color:#303131;}
			 .project-left img{width: 100%;}
			 .sm-logo{width:75px !important; margin-top:70px;}
			 .vs-logo{width:20px !important; vertical-align:middle;}
			 
			 .sliderwidth-project:hover .overcontent{visibility:hidden;}
			 .plshow{position:relative;}
			 
			 .plcover{position:absolute; opacity:1; } /*opacity:0;*/
			 .pl-content{width:100%; height:100%; position:absolute; z-index:1;  opacity:1;} /*opacity:0;*/
			 .project-container:hover .plcover{} /*animation: fadeInCover 1s forwards;*/
			 .project-container:hover .pl-content{} /*animation: fadeInCoverText 1s forwards;*/
			 
			
			 
			 .pl-content p{font-size:15px; width:65%; margin: 20px auto 0px; font-weight:400; color:white}
			 .pl-content strong{font-size:45px; margin-bottom:10px; line-height:100%; font-family: 'Ephesis', cursive !important;}
			 .prc-content strong{font-size:35px; margin-bottom:10px; line-height:140%; font-family: 'Ephesis', cursive !important;}
			 .project-container{display:flex; justify-content:space-between; margin-bottom:40px}
			 
			 
			 @keyframes fadeInCover {
				  0%{ opacity: 0; }
				  100% { opacity: .9; }
				}
			 @keyframes fadeInCoverText {
				  0%{ opacity: 0; }
				  100% { opacity: 1; }
				}			


 /* Contact Form */
			 
			  .form_field {width:100%;}
			 		
			 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
					  color: #FFFFFF;
					  opacity: 1; /* Firefox */
					}	 
			 ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
				  color: #FFFFFF;
				}
				::-moz-placeholder { /* Firefox 19+ */
				  color: #FFFFFF;
				}
				:-ms-input-placeholder { /* IE 10+ */
				  color: #FFFFFF;
				}
				:-moz-placeholder { /* Firefox 18- */
				  color: #FFFFFF;
				}
			 
			 input:focus::placeholder {
				  opacity: .3;
				}
			 textarea:focus::placeholder {
				  opacity: .3;
				}
			 
			 
			 .form_field input[type="email"], .form_field input[type="text"], .form_field select, .form_field textarea{
			 display: inline-block;
			  width: 99%;
			  height: 47px;
			  padding: 0px;
			  border-bottom: 1px solid #5c5c5c !important;
			  letter-spacing: 1px;
			  transition: all .2s ease;
			  font-family: "semplicitapro", sans-serif;
				font-weight: 300;
				font-style: normal;
			  font-size:15px;
			  color:#FFFFFF;
			  background:#303131;
			  border: none;
			  outline: none;
			 }
			 
			 .form_field textarea{ padding: 0px 0px 20px 0px; height:200px; }
			 .form_field select { height:47px; width:100%;  -webkit-appearance: none; appearance: none;}
			 .form_block{width:100%;}
			 .form_block p{margin:4px 0px;}
			 .form_comments{width:100%;}
			 .form-button input{
				  padding: 15px 20px;
				  color: #303131;
				  background: background-image: url(../images/back-seventy.png); background-repeat:repeat;;
				   border: thin solid #303131;
				  border-radius: 10px;
				  text-shadow: none;
				  box-shadow: none;
				  font-weight: bold;
				  display:inline-block;
				  font-size:15px;
				  cursor:pointer;
				}
				
			.form-button input:hover{background: #303131; color:#FFFFFF; border: thin solid #FFFFFF}			 

	 .footer-banner, .footer-banner-alt{width:100%;  height:auto;  padding:0px 0px;  display:flex; justify-content:space-between; flex-wrap: wrap}
	 .footer-banner-alt{background-color:#303131; opacity: .7}
	 .footer-banner{background-image: url(../images/back-seventy.png); background-repeat:repeat; position:absolute; bottom:0px;}
	 .footer-content-mid{width:50%;}
	 .footer-content-icons-left, .footer-content-icons-right{width:25%;}
	 .footer-content-mid p{ margin: 8px 0px 0px 0px; text-align:center; font-size:15px; color:white; font-family: "semplicitapro", sans-serif;
font-weight: 500;
font-style: normal;}
	 .footer-content-icons-left p, .footer-content-icons-right p{margin: 10px 0px 0px 0px; text-align:center}		
	 
/* We Work Page */	 
.flex-wework{display:flex; justify-content:space-between; align-items:stretch}
.flex-wetext{width:59%; background-color:#303131;}
.flex-wepic{width:39%;}
.flex-realise{width:49.5%}	

.sl2{top: 35vh !important;}

.project-reduced-content{visibilty:hidden; display:none;}

.toggle-checkbox {display: none;}
.view-more {display: none;}


 .video-container {
            position: relative;
            width: 100%;
            max-width: 1000px; /* Adjust the max-width as needed */
            margin: auto;
        }
        .video-container video {
            width: 100%;
            display: block;
        }
        .video-container .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 64px; /* Adjust the size of the play button */
            height: 64px;
            background: url("../play-button.png") no-repeat center center; /* Replace with your play button image */
            background-size: contain;
            cursor: pointer;
            display: none; /* Initially hide the button */
        }
        .video-container .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 24px;
            text-align: center;
			cursor: pointer;
        }
	
	/* Style for the loading message */
.loading-message {
    display: none; /* Initially hidden */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
}

/* Optional: Add spinner */
.loading-spinner {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

	
	
		
	.arrows-container {
			position:absolute;	
			bottom:20%;
			left:50%;
			z-index:1;
            display: flex;
            flex-direction: column;
            gap: 0px;
        }

        .arrow {
            opacity: 0;
            font-size: 28px;
			transform: scale(1.2); /* Scale the arrow to make it thicker */
			color: black;
            text-shadow: 
                1px 1px 0px white, 
                -1px -1px 0px white, 
                -1px 1px 0px white, 
                1px -1px 0px white; /* Creates a white outline */
            animation: arrowFadeInOut 5s linear infinite;
        }

        .arrow:nth-child(1) {
            animation-delay: 0s;
        }

        .arrow:nth-child(2) {
            animation-delay: .5s;
        }

        .arrow:nth-child(3) {
            animation-delay: 1s;
        }

        .arrow:nth-child(4) {
            animation-delay: 1.5s;
        }

        .arrow:nth-child(5) {
            animation-delay: 2s;
        }

        @keyframes arrowFadeInOut {
            0%, 100% {
                opacity: 0;
            }
            10%, 30% {
                opacity: 1;
            }
            40%, 100% {
                opacity: 0;
            }
        }
			
@media screen and (max-width:1250px)
{ 
.project-content, .main-content{width:96%; margin:auto;}
.contact-left{width:40%; }
.contact-right{width:40%; }
.sl2{top: 30vh !important;}
.pl-content .sm-logo{margin-top:30px}
.pl-content p{width: 90%}
.pl-content strong{font-size: 36px}
}
@media screen and (max-width:1000px)
{ 	
.new-project-title{top: 15%;}
.proj-logo{width:45px !important;}
.projects-pg-subs{width:48%;}
.pl-content span{visibility:hidden; display:none;}
.pl-content strong{font-size: 30px}
.pl-content .sm-logo{margin-top:10px; width: 55px !important}
.slide-holder{width:100%; margin:auto; border: none; padding: 0px;}
/*.work-top{width:85%;}*/
}


@media screen and (max-width:990px)
{ 
.plcover{opacity:1; }
.pl-content{width:100%; height:100%; position:absolute; z-index:1;  opacity:1;}
}

@media screen and (max-width:900px)
{ 
.pl-content p:nth-of-type(3){visibility:hidden; display:none;}
.project-left{visibilty:hidden; display:none;}
.sliderwidth-project{width:100%;}
.project-container{margin-bottom:1px;}

.project-reduced-content{visibilty:visiible; display:block; width:100%; position:relative}
.project-reduced-content img{ width:100%;}
.prc-content{ background-color:#303131; padding:20px 0px; margin-bottom: 40px}
.prc-content p{font-size:14px; width:94%; margin: 0px auto 0px; font-weight:400; color:white}
.project-reduced-content a{ text-decoration:none !important;}
}


@media screen and (max-width:850px)
{ 
.new-project-title{top: 10%;}
/*We work page*/
.flex-wework{max-width:800px; margin-left:auto; margin-right:auto; flex-wrap:wrap}
.flex-wetext{width:100%; order: 1 !important;}
.flex-wepic{width:100%; order: 0 !important; height:400px; max-height:400px; overflow:hidden; position:relative}  
.flex-wepic img{width:100%; position:absolute; top: -100px; height:auto}  
.flex-wetext .sm-logo{margin-top: 0px;}
.flex-realise{width:100%;}
.sl2{top: 20vh !important;}
}
@media screen and (max-width:800px)
{ 

.top-link-display{visibility:hidden; display:none;}

.project-top-flex{flex-direction:column;}
.project-top-left{width:96%; margin:30px auto 0px; text-align:justify}
.project-top-left p:nth-of-type(1){text-align:justify;}
.project-top-right{width:96%; margin:0px auto 30px;}
.project-top-text{width:90%;}

.view-more {
    color: blue; /* Change color as needed */
    text-decoration: underline;
    cursor: pointer;
	display: block;
}

.project-top-right {
    display: none; /* Hide initially */
}
.mid-content{visibility: visible; display:block; margin-bottom:40px}

.toggle-checkbox:checked ~ .project-top-right {
    display: block; /* Show when checkbox is checked */
}

.view-more {
    color: #303131;
    text-decoration: none;
    cursor: pointer;
    /*border: 1px solid #303131;*/
    border-radius: 8px; /* Adjust the border-radius as needed */
    padding: 2px 6px; /* Adjust padding as needed */
	margin-left: 10px;
}

.view-more:hover {
    color: #999999;
}    

.new-project-title{top: 30%;}
.new-project-container{ flex-direction: column;}
.new-project-sub{ width:100%; margin:10px 0px}

.contact-left{width:80%; margin: auto 30px;}
.contact-right{width:80%; margin: auto 30px;}
.contact-right-head{visibility:visible; display:block; width:80%; margin: auto 30px;}

/*Start Burger*/
.burger-menu {
  position: relative; /* Sets relative positioning for absolute child elements */
  visibility:visible; 
  display: block;
  width: 100%; /* Ensures it spans the full width of the viewport */
}

.burger-icon {
  font-size: 32px;
  cursor: pointer;
  color: #999999; /* Burger icon color */
  position: absolute; /* Absolute positioning relative to nearest positioned ancestor */
  top: 40px; /* 50px from the top */
  right: 40px; /* 50px from the right */
  z-index: 200; /* Ensures it sits above other content */
}

.dropdown-content {
  display: none;
  position: absolute;
  width: 100%; /* Full width */
  background-color: #000;
  opacity: .8;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  top: 115px; /* Adjust this value based on the height of the burger icon */
  left: 0; /* Aligns to the left side of the screen */
  z-index: 200; /* Ensures dropdown is directly beneath the icon when displayed */
  padding-bottom: 20px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align:center
}

/*End Burger*/

}
@media screen and (max-width:700px)
{ 	
.project-container{flex-wrap: wrap;}
.project-content, .main-content{width:90%;}

.projects-pg-left{width:100%; margin-top: 10px;}
.projects-pg-right{width:100%;}
.projects-pg-subs{width:48.5%;}
.projects-sub-1{margin-top:16px}
.new-project-title p{margin: 12px auto 0px;}
.new-project-title strong{font-size:35px}
.new-project-sub{ height:auto;}

/*.project-main-content{visibilty:hidden; display:none;}*/



}	
@media screen and (max-width:650px)
{ 
.tlink a { margin:0px 20px;}
.top-links-left{flex-direction:column; height:20px}	
.top-links-right{flex-direction:column; height:20px}	
.nav-button:hover > .nav-button-sub-1{visibility:hidden;}

.slider-title-pages{margin-left:10%; width:80%}
 @keyframes fade-in-outD {

			 0% {opacity: 0;transform: translate(0, 0);font-size:50px;}
			50% {opacity: .3;transform: translate(0, -3%);font-size:50px}
			100% {opacity: 1;transform: translate(0, 0);font-size:50px;}
        } 		

}
@media screen and (max-width:600px)
{ 
.flex-wepic img{top: 0px;} 
.new-project-title{top: 20%;}
.sl2{top: 13vh !important;}
#logo-text{width:300px;}
#logo-container{width:220px; margin:auto; position:relative; z-index:10; animation: heightAnimationMob 5s forwards;}

	.arrows-container {
			bottom:0%;
        }





}
@media screen and (max-width:450px)
{ 
.flex-wepic{max-height:300px; height:300px;}  
.footer-content-icons-left p {text-align:right}
.footer-content-icons-right p{text-align:left}
.footer-content-mid{order: 0 !important; width:100%;}
.footer-content-icons-left{order: 1 !important; width:46%;}
.footer-content-icons-right{order: 2 !important;  width:52%;}
.sl2{top: 10vh !important;}
}