/* Media Queries for Responsiveness */
@media (max-width: 480px) {
    header {
		align-items: center;
	}
	
	.span_logo {
		font-size: 5vw;
	}
		
	.nav-links {
        flex-direction: column;
        position: absolute;
        top: 10vh;
        right: 0;
		background: linear-gradient(136deg, #dfd6c0, #97988d 67%, #213439);
        width: 100vw;
        display: none;
        left: 0;
        height: 100vh;
        text-align: center;
        transition: 0.5s;
		justify-content: start;
		padding-inline-start: 0;
    }
	
	header.shrink {
		align-items: center;
		height: 5vh;
	}
	header.shrink .nav-links {
		top: 4vh; /* Smaller size of the logo */
	}
	
	header.shrink .hamburger .bar {
		width: 8vw;
		height: 0.2vh;
		margin-bottom: .2vh;
	}
		
	.nav-links .dropdown-content {
        position: static;
        box-shadow: none;
        padding: 10px;
        width: 100%;
    }
	
	.nav-links .dropdown-content a {	
		padding: 0.6vh 10vw;
        font-size: 5vw;
		letter-spacing: 0.5vw;
		font-weight: normal;
	}
		
	.nav-links .dropdown-content .column h3, .nav-links .dropdown-content a h3 {
		font-size: 5vw;
		letter-spacing: .2vw;
	}

	.nav-links .dropdown:focus .dropdown-content {
		display: block;
	}

	.nav-links .dropdown-content .row {
		display: block;
		margin: 0 5vw;
	}
	
	.nav-links .dropdown-content .row .separate_border {
		border-bottom: 1px solid #FF6F61;
        border-right: 0px solid #FF6F61;
        width: 100%;
        margin: 0 0;
        padding: 1vh 0;
    }
	
	.nav-links.active {
        display: flex;
        left: 0;
    }
	
	.nav-links .dropdown-content .column {
		margin: 1vh 1vw;
	}
    
	.nav-links li {
        margin: 0;
        text-align: left;
        padding: 1vh 0;
    }

    .nav-links a, .nav-links span {
        margin: 0;
        text-align: left;
		font-size: 5vw;
		letter-spacing: 0.5vw;
		font-weight: normal;
        padding: 1vh 3vw;
    }

    .hamburger {
        display: flex;
    }
		
	.hamburger .bar {
		width: 8vw;
		height: 0.2vh;
		margin-bottom: 1vh;
	}
	
	.full-height {
		height: auto;
	}
	
	/*Sections */
	
	.hero_content {
		background-color: #dfd6c042;
	}
	
	.website_content {
		background-color: #3283a8ad;
	}

	.app_content {
		background-color: #F4F5F799;
	}

	.marketing_content {
		background-color: #68b995db;
				 
	}

	.recruitment_content {
		background-color: #F4F5F799;
			
	}

	.hero_content, .website_content, .app_content, .marketing_content, .recruitment_content {
		position: absolute;
		z-index: 1;
		height: 100vh;
        width: 100vw;
		align-content: center;
		margin: 0 0;		   
	}

	.hero_content h1, .hero_content p, 
	.website_content h1, .website_content p, 
	.app_content h1, .app_content p, 
	.marketing_content h1, .marketing_content p, 
	.recruitment_content h1, .recruitment_content p {
		margin: 0 2vw;
	}
	
	.hero_content h1 {
		font-size: 5rem;
	}
	
	.website_content h1,
	.app_content h1,
	.marketing_content h1,
	.recruitment_content h1 {
		font-size: 2.5rem
	}

	.hero_image, .website_image, .app_image, .marketing_image, .recruitment_image {
		width: 100vw;
		background-position: center;
	}

	.contact_section {
		align-items: baseline;
	}
	
	.contact_content {
		display: grid;
        margin: 10vh 0;
	}
	
	.contact_company {
		width: 90vw;
		height: 25vh;
	}
	
	.contact_company h3 {
		padding: 0 0 0 0;
	}
	
	.about_content, .corporate_content {
		width: 100vw;
		padding: 10vh 5vw;
	}
	
	.knowledge_content {
		width: 100vw;
		padding: 10vh 5vw 1vh 5vw;
	}
	
	.timeline-content {
		width: 50vw;
	}
	
	.timeline-item:nth-child(odd) .timeline-content {
		left: -90%;
	}
	
	.timeline-item:nth-child(even) .timeline-content {
		left: -25%;
	}

	.footer {
		height: 10vh;
	}
	
	.footer p {
		font-size: 3vw;
	}	
}

@media (min-width: 481px) and (max-width: 767px) {	
    header {
		align-items: center;
	}
	
	.span_logo {
		font-size: 3vw;
	}
				
	.nav-links {
        flex-direction: column;
        position: absolute;
        top: 10vh;
        right: 0;
		background: linear-gradient(136deg, #dfd6c0, #97988d 67%, #213439);
        width: 100vw;
        display: none;
        left: 0;
        height: 100vh;
        text-align: center;
        transition: 0.5s;
		justify-content: start;
		padding-inline-start: 0;
    }
	
	header.shrink {
		align-items: center;
		height: 5vh;
	}
	
	header.shrink .nav-links {
		top: 4vh; /* Smaller size of the logo */
	}

	header.shrink .hamburger .bar {
		width: 8vw;
		height: 0.2vh;
		margin-bottom: .2vh;
	}
		
	.nav-links .dropdown-content {
        position: static;
        box-shadow: none;
        padding: 10px;
        width: 100%;
    }
	
	.nav-links .dropdown-content a {	
		padding: 0.6vh 10vw;
        font-size: 4vw;
		letter-spacing: 0.5vw;
		font-weight: normal;
	}
		
	.nav-links .dropdown-content .column h3, .nav-links .dropdown-content a h3 {
		font-size: 4vw;
		letter-spacing: .2vw;
	}

	.nav-links .dropdown:focus .dropdown-content {
		display: block;
	}

	.nav-links .dropdown-content .row {
		display: block;
		margin: 0 5vw;
	}
	
	.nav-links .dropdown-content .row .separate_border {
		border-bottom: 1px solid #FF6F61;
        border-right: 0px solid #FF6F61;
        width: 100%;
        margin: 0 0;
        padding: 1vh 0;
    }

	.nav-links.active {
        display: flex;
        left: 0;
    }
	
	.nav-links .dropdown-content .column {
		margin: 1vh 1vw;
	}
    
	.nav-links li {
        margin: 0;
        text-align: left;
        padding: 1vh 0;
    }

    .nav-links a, .nav-links span {
        margin: 0;
        text-align: left;
		font-size: 4vw;
		letter-spacing: 0.5vw;
		font-weight: normal;
        padding: 1vh 3vw;
    }

    .hamburger {
        display: flex;
    }
		
	.hamburger .bar {
		width: 8vw;
		height: 0.2vh;
		margin-bottom: 1vh;
	}
	
	.full-height {
		height: auto;
	}
	
	/*Sections */
	
	.hero_content {
		background-color: #dfd6c042;
	}
	
	.website_content {
		background-color: #3283a8ad;
	}

	.app_content {
		background-color: #F4F5F799;
	}

	.marketing_content {
		background-color: #68b995db;
				 
	}

	.recruitment_content {
		background-color: #F4F5F799;
			
	}

	.hero_content, .website_content, .app_content, .marketing_content, .recruitment_content {
		position: absolute;
		z-index: 1;
		height: 100vh;
        width: 100vw;
		align-content: center;
		margin: 0 0;		   
	}

	.hero_content h1, .hero_content p, 
	.website_content h1, .website_content p, 
	.app_content h1, .app_content p, 
	.marketing_content h1, .marketing_content p, 
	.recruitment_content h1, .recruitment_content p {
		margin-left: 2vw;
	}

	.hero_image, .website_image, .app_image, .marketing_image, .recruitment_image {
		width: 100vw;
		background-position: center;
	}

	.contact_section {
		align-items: baseline;
	}
	
	.contact_content {
		display: grid;
        margin: 10vh 0;
	}
	
	.contact_company {
		width: 90vw;
		height: 20vh;
	}
	
	.contact_company h3 {
		padding: 0 0 0 0;
	}
	
	.about_content, .corporate_content {
		width: 100vw;
		padding: 10vh 5vw;
	}
	
	.knowledge_content {
		width: 100vw;
		padding: 10vh 5vw 1vh 5vw;
	}
	
	.timeline-content {
		width: 40vw;
	}
	
	.timeline-item:nth-child(odd) .timeline-content {
		left: -90%;
	}
	
	.timeline-item:nth-child(even) .timeline-content {
		left: -10%;
	}
	
	.footer {
		height: 10vh;
	}
	
	.footer p {
		font-size: 3vw;
	}	

}

@media (min-width: 768px) and (max-width: 1200px) {
	header {
		align-items: center;
	}
	
	.span_logo {
		font-size: 2vw;
	}
		
	.nav-links li {
		margin-left: 0;
	}
	
	.nav-links .dropdown-content {
		left: -55vw;
	}
	
    .nav-links a, .nav-links span {
		font-size: 2vw;
        text-align: left;
		padding: 1vh 5vw;
    }
	
	.nav-links .dropdown-content .row {
		margin: 0 25vw;
	}
	
	.nav-links .dropdown-content .column h3, .nav-links .dropdown-content a h3 {
		font-size: 2vw;
		letter-spacing: .2vw;
	}
	
	.nav-links .dropdown-content a {	
        font-size: 1.7vw;
	}
		
	.full-height {
		height: auto;
	}

	/*Sections */
	
	.app_content {
		background-color: #F4F5F799;
	}
	
	.app_content {
		position: absolute;
		z-index: 1;
		height: 100vh;
        width: 100vw;
		align-content: center;
		margin: 0 0;		   
	}
	
	.app_content h1, .app_content p {
		margin-left: 2vw;
	}

	.footer {
		height: 10vh;
	}
	
	.footer p {
		font-size: 2vw;
	}
}