*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    width:100%;
    position: relative;
    background: #000;
    color: #d4d4d4;
    font-family:'Poppins', sans-serif, "Codec Cold Trial", Arial, "Times New Roman", serif;
}

/* navbar*/
nav{
    position:fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #000;
    padding: 2% 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    z-index: 9;
}
.logo{
	font-size: 120%;
	text-decoration: none;
	color: #d4d4d4;
	font-family: 'Monoton', cursive, "Codec Cold Trial";
}
.nav-links{
	flex: 1;
	text-align: right;
}

.nav-links ul li{
	list-style: none;
	display: inline-block;
	padding: 8px 12px;
	position: relative;
}
.nav-links ul li a{
	color: #d4d4d4;
	text-decoration: none;
	font-size: 14px;

}
.nav-links ul li a:active{
	color: #e6be8a;
}
.nav-links ul li::after{
	content: '';
	width: 0%;
	height: 2px;
	background: #e6be8a;
	display: block;
	margin: auto;
	transition: 0.5s;
}
.nav-links ul li:hover::after{
	width: 100%;
}
nav ul li.activen a{
	color: #e6be8a;
}
nav ul li.res a:active{
	color:#e6be8a;
}

.logo:hover, .logo:active{
	color: #e6be8a;
	transition: 0.5s;
}
.burger{
	display: none;
	position: relative;
	z-index: 1;
	user-select: none;
	border: none;
	outline: none;
	background: none;
	cursor: pointer;
}
.burger span{
	display: block;
	width: 22px;
	height: 3px;
	margin: 3px;
	background-color: #d4d4d4;
	position: relative;
	border-radius: 6px;
	transform-origin: 0 0;
	transition: 0.4s;
}

/*tablet view*/
@media screen and (max-width: 996px){
    .nav-links ul li{
		display: block;
	}
	.nav-links{
		position: absolute;
		transform: translateY(-100%);
		z-index: 1;
		height: 100vh;
		top: 0vh;
		background-color: #000;
		text-align: center;
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 30px;
		transition: .5s;
		padding: 20px;
		padding-top: 90px;
		right: 0;
	}
	.nav-links.is-active{
		transform: translateY(0%);
	}
	.nav-links li{
		opacity: 100%;
	}
	.burger{
		display: block;
	}
	.logo {
		font-size: 16px;
	}
	.burger.is-active span:nth-child(1){
		transform: translate(.2px,-3.7px) rotate(45deg);
	}
	.burger.is-active span:nth-child(2){
		opacity: 0;
		transform: translateX(15px);
	}
	.burger.is-active span:nth-child(3){
		transform: translate(-1.8px,.1px) rotate(-45deg);
	}
}



.light{
    background-color: #F7F7F7;
}
.intro{
	width: 70%;
	min-height: calc(40vh- 80px);
	height: auto;
	margin-top: 40px;
    padding-top: 7%;
    padding-right: 6%;
    padding-bottom: 4%;
    padding-left: 4%; 
}

.intro h1{
	padding-bottom: 12px;
    color: #2F2F2F;
    font-size: 32px;
    font-weight: 500;
}
.intro p{
	color: #5C5751;
	font-weight: 400;
}
.intropara{
	padding-bottom: 2%;
	font-size: 16px;
	line-height: 2;
}
.introindent{
    padding-left: 13%;
}
.roledescription{
	flex-basis: 30%;
	
}
.roledescription h4{
	font-weight: 500;
	font-size: 16px;
	color: #121212;
}
.role{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 20px;
}
.main{
	width: 100%;
	padding-right: 6%;
	padding-bottom: 2%;
	height: auto;
}
.main h1, .main h3{
	padding-bottom: 15px;
}
.main p{
	width: 100%;
	line-height: 2;
}

.group p{
    color: #5C5751;
}
.group h1{
	font-weight: 400;
	padding-bottom: 2%;
	color: #3e3e3e;
}
.group h2{
    color: #3e3e3e;
}



.sizing{
	width: 70%;
    padding-left: 4%;
	padding-bottom: 3%;
}
.sizing h1{
    font-size: 28px;
    font-weight: 500;
}
.sizing p{
    width: 715px;
}
.color1{
	color: #c51a2d !important;
	padding-left: 4%;
	padding-top: 3% !important;
}


.color2{
	color: #036E0C !important;
	padding-left: 4%;
	padding-top: 3% !important;
}

.color3{
	color: #007EB8 !important;
	padding-left: 4%;
	padding-top: 3% !important;
}

.split-container {
    display: flex;
    justify-content: space-between;
    gap: 10%;
    align-items: flex-start; 
	width: 80%;
	padding-left: 4%;
	padding-bottom: 5%;
}

.left-section {
    width: 40%;
}

.right-section {
    width: 60%; 
}

.split-container h1 {
    font-size: 12px; 
	font-weight: 600;
}

.split-container h2 {
    font-size: 28px; 
	font-weight: 500;
}
.split-container h3 { 
	font-weight: 600;
}

.split-container p {
    font-size: 16px;
}

.split-container h3.topspace {
    color: #28282B;
}
.split-container p span{
    font-weight: 400;
}



.split-container4 {
    display: flex;
    justify-content: space-between;
    gap: 10%;
    align-items: flex-start; 
	width: 80%;
	padding-left: 4%;
	padding-bottom: 3%;
}

.left-section4 {
    width: 40%;
}

.right-section4 {
    width: 60%; 
}

.split-container4 h1 {
    font-size: 12px; 
	font-weight: 600;
}

.split-container4 h2 {
    font-size: 28px; 
	font-weight: 500;
}
.split-container4 h3 { 
	font-weight: 600;
}

.split-container4 p {
    font-size: 16px;
}

.split-container4 h3.topspace {
    color: #28282B;
}
.split-container4 p span{
    font-weight: 400;
}



.split-container5 {
    display: flex;
    justify-content: space-between;
    gap: 10%;
    align-items: flex-start; 
	width: 80%;
	padding-left: 4%;
	padding-bottom: 4%;
}

.left-section5 {
    width: 50%;
}

.right-section5 {
    width: 70%; 
}

.split-container5 h1 {
    font-size: 18px; 
	font-weight: 400;
}

.split-container5 h2 {
    font-size: 24px; 
	font-weight: 400;
}
.split-container5 h3 { 
	font-weight: 600;
}

.split-container5 p {
	padding-top: 4%;
    font-size: 16px;
}

.split-container5 h3.topspace {
    color: #28282B;
}
.split-container5 p span{
    font-weight: 400;
}



.sizing2{
	width: 80%;
    padding-left: 4%;
	padding-bottom: 3%;
}
.sizing2 h1{
    font-size: 28px;
    font-weight: 500;
}
.sizing2 p{
    font-size: 16px;
    line-height: 2;
    margin: 0; /* Remove default margins */
	font-weight: 400;
}
.sizing2 h2{
    font-weight: 500;
	font-size: 18px;
    margin: 0; /* Remove default margins */
    color: #3e3e3e;
}
.sizing2 h3.topspace {
    color: #28282B;
}
.sizing2 p span{
    font-weight: 400;
}

.sizing2 .section-row {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Divide into two parts: 1/3 for h2, 2/3 for p */
    gap: 5% !important; /* Spacing between columns */
    align-items: start; /* Align h2 and p at the top */
	margin-bottom: 4%;
}



.sizing3{
	width: 80%;
    padding-left: 4%;
}
.sizing3 h1{
    font-size: 28px;
    font-weight: 500;
}
.sizing3 h3{
    font-size: 18px;
    font-weight: 400;
	color: #3e3e3e;
}

.iframe {
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow effect */
	width: 70%;
	display: block;
    padding-top: 1%;
	color: #28282B;
	width: 100%; /* Full width of the parent container */
    aspect-ratio: 16 / 9; /* Ensures the height maintains a 16:9 ratio */
    position: relative;
    overflow: hidden; 
	margin-bottom: 8%;
}





.pad{
	padding-bottom: 6% !important ;
}

.green{
	color: #2e6f40 !important;
	
}
.green2{
	color: #2e6f40 !important;
	font-weight: 500;
	
}

.blue{
	color: #1cb5d8 !important;
}


.blue2{
	color: #007EB8 !important;
}

.brown{
	color: #bf7b52 !important;

}

.black{
	padding-left: 0%;
	color: #7e848e !important;
	font-weight: 300 !important;
	padding-bottom: 2%;
}



.imagefive {
    width: 75%;
    height: auto;
    display: block;
}
.caption{
	font-size: 14px;
	color: #B3B3B3 !important;
	width: 80%;
}


.split-container2 {
    display: flex;
    justify-content: space-between;
    gap: 10%;
    align-items: flex-start; 
	width: 80%;
	padding-left: 6%;
	padding-bottom: 8%;
}

.left-section2 {
    width: 40%;
	flex: 1; /* Takes one part of the available space */
    display: flex;
    justify-content: flex-end; /* Aligns the image to the right within the left section */
    align-items: flex-start; /* Ensures the image aligns with the top of the right section */
    padding-right: 20px; /* Optional: Adds padding between the image and the container */
}

.right-section2 {
    width: 60%; 
	flex: 1; /* Takes one part of the available space */
    padding-top: 10%; /* Ensures the text starts 40px below the top line */
}
.right-section2 h2{
	font-size: 24px !important; 
	font-weight: 400 !important;
    color: #3e3e3e;
}
.right-section2 p{
    color: #999999;
}

.split-container2 h1 {
    font-size: 12px; 
	font-weight: 600;
}

.split-container2 h2 {
    font-size: 28px; 
	font-weight: 500;
	padding-bottom: 30px;
}
.split-container2 h3 { 
	font-weight: 600;
}

.split-container2 p {
    font-size: 16px;
}

.split-container2 h3.topspace {
    color: #28282B;
}
.split-container2 p span{
    font-weight: 400;
}



.split-container8 {
    display: flex;
    justify-content: space-between;
    gap: 5%;
    align-items: flex-start; 
	width: 90%;
	padding-left: 6%;
	padding-bottom: 8%;
}

.left-section8 {
    width: 80%;
	flex: 3; /* Takes one part of the available space */
    display: flex;
    justify-content: flex-end; /* Aligns the image to the right within the left section */
    align-items: flex-start; /* Ensures the image aligns with the top of the right section */
    padding-right: 20px; /* Optional: Adds padding between the image and the container */
}

.right-section8 {
    width: 10%; 
	flex: 1; /* Takes one part of the available space */
    padding-top: 10%; /* Ensures the text starts 40px below the top line */
}
.right-section8 h2{
	font-size: 24px !important; 
	font-weight: 400 !important;
    color: #3e3e3e;
}
.right-section8 p{
    color: #999999;
}

.split-container8 h1 {
    font-size: 12px; 
	font-weight: 600;
}

.split-container8 h2 {
    font-size: 28px; 
	font-weight: 500;
	padding-bottom: 30px;
}
.split-container8 h3 { 
	font-weight: 600;
}

.split-container8 p {
    font-size: 16px;
}

.split-container8 h3.topspace {
    color: #28282B;
}





.imagefive {
    width: 100%; /* Ensures image fills the section */
    height: auto;
}




.image90{
    width: 100%;
    height: auto;
    display: block;
}





.split-container3 {
    display: flex;
    justify-content: space-between;
    gap: 10%;
    align-items: flex-start; 
	width: 80%;
	padding-left: 6%;
	padding-bottom: 8%;
}

.right-section3 {
    width: 40%;
	flex: 1; /* Takes one part of the available space */
    display: flex;
    justify-content: flex-start; /* Aligns the image to the right within the left section */
    align-items: flex-start; /* Ensures the image aligns with the top of the right section */
    padding-right: 20px; /* Optional: Adds padding between the image and the container */
}

.left-section3 {
    width: 60%; 
	flex: 1; /* Takes one part of the available space */
    padding-top: 10%; /* Ensures the text starts 40px below the top line */
	padding-left: 20px;
}

.left-section3 h2{
	font-size: 24px !important; 
	font-weight: 400 !important;
    color: #3e3e3e;
}
.left-section3 p{
    color: #999999;
}

.split-container3 h1 {
    font-size: 12px; 
	font-weight: 600;
}

.split-container3 h2 {
    font-size: 28px; 
	font-weight: 500;
	padding-bottom: 30px;
}
.split-container3 h3 { 
	font-weight: 600;
}

.split-container3 p {
    font-size: 16px;
}

.split-container3 h3.topspace {
    color: #28282B;
}
.split-container3 p span{
    font-weight: 400;
}








.list li{
    width: 715px;
}
.sizing h3{
    font-weight: 500;
}


.imageone{
	width: 70%;
	display: block;
    padding-top: 1%;
    padding-left: 4%;
	color: #28282B;
	padding-bottom: 6%;
}

.image1{
	width: 70%;
	display: block;
    padding-top: 1%;
    padding-left: 4%;
	color: #28282B;
}
.imagetwo{
	width: 65%;
	display: block;
    padding-top: 1%;
	color: #28282B;
}
.imagethree{
	width: 50%;
	display: block;
    padding-top: 1%;
	padding-left: 4%;
	color: #28282B;
}
.image3{
	width: 70%;
	display: block;
    padding-top: 1%;
	padding-left: 4%;
	color: #28282B;
}

.full-width-image {
    width: 100vw; /* Ensures the container spans full viewport width */
    margin: 0;
    padding: 0;
    position: relative; /* Allows for layering or stacking if needed */
    z-index: 1; /* Keeps it above background but below nav */
	padding-bottom: 3%;
	padding-top: 2%;
}

.imagefour {
    width: 100%;
    height: auto;
    display: block;
}

.topspace{
	padding-top: 6%;
}


.similarprojects{
	padding-top: 2%;
	padding-bottom: 0%;
	padding-left: 4%;
}

.similarprojects h1{
	font-size: 24px;
	font-weight: 500;
}


.sizing h3.topspace {
    color: #28282B;
}

.hierachy{
    font-size: 20px;
    color: #28282B;
}
.hierachy2{
    font-size: 16px;
    color: #28282B;
    padding-top: 3%;
}
.highlight{
    font-weight: 500!important;
	color: #4A48AF;
}

.hierachyweight{
    color: #28282B;
    font-weight: 500;
}
.sizing p span{
    font-weight: 400;
}
.indent{
	padding-left: 4%;
	padding-top: 1%;
}

ul li.list {
    line-height: 1.5; 
    margin-bottom: 10px;
}

ul.indent li.list {
    line-height: 1.5; 
    margin-bottom: 10px; 
    width: 715px;
}
ol.indent li.list {
    line-height: 1.5;
    margin-bottom: 10px;
    width: 715px;
}



.list{
	color: #5C5751;
}
.list p{
	color: #5C5751;
}
.linkdec{
	font-size: 16px;
    color: #28282B;
}
.linkdec a{
	color: #BA4A0A;
    text-decoration: none;
}


.bottomnav{
	padding: 6%;
    padding-top: 4%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}

.leftnav{
	text-decoration: underline;
	color: #28282B;
    opacity: 0.8;
	font-size: 16px;
}
.leftnav:hover, .leftnav:active{
	color: #BA4A0A;
}

.rightnav:hover, .rightnav:active{
	color: #BA4A0A;
}
.rightnav{
    color: #28282B;
}



.imagegrid{
	width: 100%;
	padding-left: 4%;
	padding-right: 6%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 2px;
}
.imagegrid .one{
	background-image: url('../images/Paidea2.jpeg');
	height: 350px;
	background-position: center;
	background-size: contain;
	clear: both;
	overflow: hidden;
}
.imagegrid .one:nth-child(2){
	background-image: url('../images/Paidea1.jpeg');
	background-position: center;
	background-size: contain;
	clear: both;
	overflow: hidden;

}
.packagetwo{
	background-image: url('../images/Pasketch1.png');
	height: 350px;
	background-position: center;
	background-size: contain;
	clear: both;
	overflow: hidden;
}
.packagetwo:nth-child(2){
	background-image: url('../images/Pasketch3.png');
	background-position: center;
	background-size: contain;
	clear: both;
	overflow: hidden;
}
.packagetri{
	background-image: url('../images/diorpic1.jpg');
	height: 350px;
	background-position: center;
	background-size: cover;
	clear: both;
	overflow: hidden;
}
.packagetri:nth-child(2){
	background-image: url('../images/diorpic2.jpg');
	background-position: center;
	background-size: cover;
	clear: both;
	overflow: hidden;

}

@media screen and (max-width: 996px){
	.imagegrid{
		grid-template-columns: 1fr;
		padding-left: 0px;
	}
	.imagethree{
		padding-left: 0px;
	}
	.image3{
		padding-left: 0px;
	}

}
@media screen and (max-width: 2000px){
	.imageone{
        width: 1050px;
    }
}


@media screen and (max-width: 1500px){
    .imageone{
        width: 950px;
    }
	.image1{
		width: 950px;
	}
    .imagetwo{
        width: 950px;
    }
    .sizing p{
        width: 715px;
    }
    .intro{
        width: 78%;
    }
    ol.indent li.list {
        width: 715px;
    }
    ul.indent li.list {
        max-width: auto;
    }
}

@media screen and (max-width: 1250px){
    .imageone{
        width: 820px;
    }
	.image1{
		width: 820px;
	}
    .imagetwo{
        width: 820px;
    }
    .sizing p{
        width: 650px;
    }
    .intro{
        width: 85%;
    }
    ol.indent li.list {
        width: 650px;
    }
    ul.indent li.list {
        width: auto;
    }

}

@media screen and (max-width: 1100px){
    .imageone{
        width: 745px;
    }
	.image1{
		width: 745px;
	}
    .imagetwo{
        width: 745px;
    }
    .sizing p{
        width: 581px;
    }
    .intro{
        width: 85%;
    }
    ol.indent li.list {
        width: 581px;
    }
    ul.indent li.list {
        width: auto;
    }
       
}

@media screen and (max-width: 996px){
    .imageone{
        width: 600px;
    }
	.image1{
		width: 600px;
	}
    .imagetwo{
        width: 600px;
    }
	.imagethree{
        width: 70%;
    }
	.image3{
		width: 70%;
	}
    .intro h1{
        padding-top: 30px;
    }
    .sizing p{
        width: 450px;
    }
    .intro{
        width: 78%;
    }
    ol.indent li.list {
        width: 420px;
    }
    ul.indent li.list {
        width: 420px;
    }
	.color1{
		font-size: 17px;
	}
	.color2{
		font-size: 17px;
	}
	.split-container h2{
		font-size: 24px;
	}
	.sizing h1{
		font-size: 24px;
	}
	.right-section2 h2{
		font-size: 22px !important;
	}
	.left-section3 h2{
		font-size: 22px !important;
	}
	.split-container4 h2{
		font-size: 24px;
	}
	.sizing3 h1{
		font-size: 24px;
	}
	.sizing2 h1{
		font-size: 24px;
	}
	.sizing2 h2{
		font-size: 16px;
	}
	.split-container5 h1{
		font-size: 16px;
	}
	.split-container5 h2{
		font-size: 22px;
	}
	.similarprojects h1{
		font-size: 22px;
		font-weight: 500;
	}

}







@media screen and (max-width: 768px){
    .intro h1{
		font-size: 24px;
		padding-top: 30px;
		padding-bottom: 8px;
	}
    .intro{
		margin-left: 0%;
        padding-left: 0;
		width: 95%;
	}
    .intropara{
		font-size: 14px;
		line-height: 2;
	}
    .role{
		display: block;
	}
	.roledescription h4{
		font-size: 14px;
	}
	.roledescription p{
		font-size: 14px;
		line-height: 0.8;
	}
    .f{
		padding-top: 40px;
	}
    .main p{
		font-size: 14px;
	}
    .group h1{
		margin-left: 0px;
	}
    .group p{
		font-size: 14px;
	}
    .group{
		width: 100%;
	}
	.sizing li{
		font-size: 14px;
	}
    .imageone{
		width: 95%;
		padding-left: 0px;
	}
	.image1{
		width: 95%;
		padding-left: 0px;
	}
    .imagetwo{
		width: 95%;
	}
	.hierachy h3{
		font-size: 14px;
	}
    .hierachy2 h3{
		font-size: 14px;
	}

	.indent{
		font-size: 14px;
        margin-left: 3%;
	}

	ul li.list {
		font-size: 14px;
	}
	.gin{
		font-size: 10px;
	}
	.rightnav{
		font-size: 14px;
	}
	.leftnav{
		font-size: 14px;
	}
    .imageone{
        width: 95%;
    }
	
    .image90{
    width: 100%;
    }

	.imagethree{
        width: 80%;
    }
	.image3{
		width: 100%;
	}
	
    .sizing h3{
    font-size: 14px;
    }
    .sizing{
        padding-left: 0%;
        width: 90%;
    }
    .topspace{
        padding-top: 8%;
    }
    .introindent{
        padding-left: 6%;
    }
    .sizing p{
        width: 100%;
    }
    .introindent{
        width: 100%;
    }
    ol.indent li.list {
        width: 90%;
    }
    ul.indent li.list {
        width: 90%;
    }
	.caption{
		font-size: 10px;
		color: #B3B3B3 !important;
		width: 100%;
	}
	.color1{
		font-size: 14px !important;
		padding-left: 0%;
	}
	.color3{
		font-size: 14px !important;
		padding-left: 0%;
	}

	.color2{
		font-size: 14px !important;
		padding-left: 0%;
	}

	.split-container{
		padding-left: 0%;
		flex-direction: column; 
        gap: 20px;
		width: 100%;
	}

	.split-container2{
		padding-left: 0%;
		flex-direction: column; 
        gap: 20px;
		width: 100%;
	}

	.left-section2 {
		width: 60%;
		flex: 1; /* Takes one part of the available space */
		display: flex;
		justify-content: flex-end; /* Aligns the image to the right within the left section */
		align-items: flex-start; /* Ensures the image aligns with the top of the right section */
		padding-right: 20px; /* Optional: Adds padding between the image and the container */
	}
	.right-section2 {
		width: 80%; 
		flex: 1; /* Takes one part of the available space */
		padding-top: 3%; /* Ensures the text starts 40px below the top line */
	}


	.split-container h2{
		font-size: 20px;
	}
	.sizing h1{
		font-size: 20px;
	}
	.right-section2 h2{
		font-size: 18px !important;
		padding-bottom: 3%;
	}

	.split-container3{
		padding-left: 0%;
		flex-direction: column-reverse; 
        gap: 20px;
		width: 100%;
	}

	.right-section3 {
		width: 60%;
		flex: 1; /* Takes one part of the available space */
		display: flex;
		justify-content: flex-end; /* Aligns the image to the right within the left section */
		align-items: flex-start; /* Ensures the image aligns with the top of the right section */
		padding-right: 20px; /* Optional: Adds padding between the image and the container */
	}
	.left-section3 {
		width: 80%; 
		flex: 1; /* Takes one part of the available space */
		padding-top: 3%;
		padding-left: 0%; /* Ensures the text starts 40px below the top line */
	}
	.left-section3 h2{
		font-size: 18px !important;
		padding-bottom: 3%;
	}

	.split-container4{
		padding-left: 0%;
		flex-direction: column; 
        gap: 20px;
		width: 100%;
	}



	.split-container4 h2{
		font-size: 20px;
	}
	.sizing3 h1{
		font-size: 20px;
	}
	.sizing2 h1{
		font-size: 20px;
	}
	.sizing2 h2{
		font-size: 14px;
	}
	.split-container5 h1{
		font-size: 14px;
	}
	.split-container5 h2{
		font-size: 18px;
	}
	.similarprojects h1{
		font-size: 16px;
		font-weight: 500;
	}
	.left-section {
		width: 100%;
	}
	
	.right-section {
		width: 100%; 
	}
	.sizing3 {
		padding-left: 0%;
		width: 100%;
	}
	.sizing2 .section-row {
		grid-template-columns: 1fr; /* Stack h2 and p */
		width: 95%;
		margin-bottom: 30px;
	}
	.sizing2 {
		width: 100%;
		padding-left: 0%;
	}

	.split-container5{
		padding-left: 0%;
		flex-direction: column; 
        gap: 20px;
		width: 100%;
	}
	.left-section5 {
		width: 100%;
	}
	
	.right-section5 {
		width: 100%; 
	}
	
	.similarprojects{
		padding-top: 4%;
		padding-bottom: 0%;
		padding-left: 0%;
	}


	.split-container8{
		padding-left: 0%;
		flex-direction: column; 
        gap: 20px;
		width: 100%;
	}

	.left-section8 {
		width: 80%;
		flex: 1; /* Takes one part of the available space */
		display: flex;
		justify-content: flex-end; /* Aligns the image to the right within the left section */
		align-items: flex-start; /* Ensures the image aligns with the top of the right section */
		padding-right: 20px; /* Optional: Adds padding between the image and the container */
	}
	.right-section8 {
		width: 80%; 
		flex: 1; /* Takes one part of the available space */
		padding-top: 3%; /* Ensures the text starts 40px below the top line */
	}


	.split-container h2{
		font-size: 20px;
	}
	.sizing h1{
		font-size: 20px;
	}
	.right-section8 h2{
		font-size: 18px !important;
		padding-bottom: 3%;
	}

}











/* seemoreprojects*/


.projects-grid{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
    gap: 40px;
    padding-bottom: 4%;
    padding-top: 3%;
    width: 90%;
    padding-left: 4%;
}

.project a {
    width: 100%;
    height: 100%;
    display: block;
    color: transparent;
    text-decoration: none;
}


.project .Zen, .project .San, .project .par, .project .das, .project .gen,  .project .ui, .project .oth {
	width: 250px;
	height: 225px;
	border-radius: 10px;
	overflow: hidden;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 
	0 2px 4px rgba(28, 5, 77, 0.1),
	0 12px 32px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: flex-end;
	position: relative; 
	transition: width 0.5s ease, height 0.5s ease;
	background-image: url('../images/ZenmileIcon.png');
}

.project:nth-child(1) .Zen {
	background-image: url('../images/AfyaIcon.png');
}

.project:nth-child(2) .Zen {
	background-image: url('../images/SanvelloIcon.png');
}


.project:nth-child(1) .San {
	background-image: url('../images/AfyaIcon.png');
}
.project:nth-child(2) .San {
	background-image: url('../images/ParadiseIcon.png');
}



.project:nth-child(2) .par {
	background-image: url('../images/DashrIcon.png');
}
.project:nth-child(1) .par {
	background-image: url('../images/SanvelloIcon.png');
}

.project:nth-child(2) .das {
	background-image: url('../images/GenotaIcon.png');
}
.project:nth-child(1) .das {
	background-image: url('../images/ParadiseIcon.png');
}

.project:nth-child(1) .gen {
	background-image: url('../images/ZenmileIcon.png');
}
.project:nth-child(2) .gen {
	background-image: url('../images/UIDesignIcon.png');
}
.project:nth-child(3) .gen {
	background-image: url('../images/OverpackagingIcon.png');
}


.project:nth-child(1) .ui {
	background-image: url('../images/ZenmileIcon.png');
}
.project:nth-child(2) .ui {
	background-image: url('../images/SanvelloIcon.png');
}
.project:nth-child(3) .ui {
	background-image: url('../images/OverpackagingIcon.png');
}

.project:nth-child(1) .oth {
	background-image: url('../images/ZenmileIcon.png');
}
.project:nth-child(2) .oth {
	background-image: url('../images/SanvelloIcon.png');
}
.project:nth-child(3) .oth {
	background-image: url('../images/ParadiseIcon.png');
}

.project .Zen:hover, .project .San:hover, .project .par:hover, .project .das:hover, .project .gen:hover, .project .ui:hover, .project .oth:hover {
    width: 235px;
	height: 210px;
}




@media screen and (max-width: 1200px){
	.project .Zen, .project .San, .project .par, .project .das, .project .gen,  .project .ui, .project .oth {
		width: 225px;
		height: 200px;
	}
	.project .Zen:hover, .project .San:hover, .project .par:hover, .project .das:hover, .project .gen:hover, .project .ui:hover, .project .oth:hover {
		width: 210px;
        height: 185px;
	}
}

@media screen and (max-width: 1080px){
	.project .Zen, .project .San, .project .par, .project .das, .project .gen,  .project .ui, .project .oth {
		width: 200px;
		height: 175px;
	}
	.project .Zen:hover, .project .San:hover, .project .par:hover, .project .das:hover, .project .gen:hover, .project .ui:hover, .project .oth:hover {
		width: 185px;
        height: 155px;
	}
}

@media screen and (max-width: 768px){
	.projects-grid{
		gap: 20px;
	}
	.project .Zen, .project .San, .project .par, .project .das, .project .gen,  .project .ui, .project .oth {
		width: 225px;
		height: 200px;
	}
	.project .Zen:hover, .project .San:hover, .project .par:hover, .project .das:hover, .project .gen:hover, .project .ui:hover, .project .oth:hover {
		width: 210px;
        height: 185px;
	}
}






/* footer*/

footer{
	width: 100%;
	padding-bottom: 64px;
	padding: 6%;
    padding-top: 3%;
	font-family: Poppins, inter
}
.row h3{
	font-size: 16px;
	opacity: .8;
	float: right;
	font-weight: 200;
	color: #f5f4f2;

}
.row{
	padding-bottom: 10px;
}
.col{
	flex-basis: 25%;
	padding-left: 10px;
}
.col h4{
	color: #f5f4f2;
	font-weight: 200;
	font-size: 16px;
	opacity: .8;
}

hr{
	margin: 30px auto;
}
.col a{
	text-decoration: none;
	margin-right: 14px;
}
.tw{
	color: #00acee;
}
.ig{
	color: #c13584;
}
.li{
	color: #0e76a8;
}
.git{
	color: #999999;
}
.mail{
	color: #F7F7F7;
}
.fly{
	text-align: center;
	padding-top: 6%;
	opacity: .8;
	font-size: 16px;
	font-weight: 200;
	color: #f5f4f2;
}
.raw{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 20px;
}

@media screen and (max-width: 500px){
	.row h3{
		text-align: center;
		float: none;
		font-size: 14px;
	}
	hr{
		margin: 10px auto;
	}
	.col h4{
		font-size: 14px;
	}
	.col p{
		font-size: 16px;
	}
	
	.col{
		margin-bottom: 20px;
	}
	.fly{
		font-size: 14px;
	}
}
@media screen and (max-width: 768px){
	.row h3{
		text-align: center;
		float: none;
		font-size: 14px;
	}
	hr{
		margin: 10px auto;
	}
	.col h4{
		font-size: 14px;
	}
	.col p{
		font-size: 14px;
	}
	
	.col{
		margin-bottom: 20px;
		padding-left: 0px;
	}
	.fly{
		font-size: 14px;
	}
	footer{
		padding-bottom: 10%;
	}
    .raw{
		display: block;
	}
}




#preloader{
	background: #000 url('../images/loader.gif') no-repeat center;
	position: fixed;
	background-size: 15%;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 1000;
}