html {
    margin: 0;
    padding: 0;
    height: 100%;
    max-width: 580vw;
}

body {
    margin: 0;
}

/* Html- throughout doc */

h1, h2, h3, .h4_project, a {
    font-family: "anek-malayalam-variable", montserrat, sans-serif;
    font-variation-settings: "wdth" 100, "wght" 500;
    text-transform: uppercase;
}

h2 {
    padding: 0;
    margin: 0;
    color: white;
    text-transform: none;
}

p {
    font-family: "anek-malayalam-variable", montserrat, sans-serif;
    font-variation-settings: "wdth" 100, "wght" 500;
}

a {
    font-size: 1.25rem;
    text-align: center;
    line-height: 3.75rem;
    text-decoration: none;
    text-transform: uppercase;
}

.menu_header {
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(
    330deg,
    hsl(46deg 68% 87%) 0%,
    hsl(46deg 65% 84%) 12%,
    hsl(46deg 63% 81%) 20%,
    hsl(45deg 61% 78%) 26%,
    hsl(45deg 60% 75%) 32%,
    hsl(45deg 59% 73%) 37%,
    hsl(45deg 59% 70%) 42%,
    hsl(45deg 58% 67%) 47%,
    hsl(45deg 57% 64%) 52%,
    hsl(46deg 57% 61%) 57%,
    hsl(46deg 56% 59%) 63%,
    hsl(46deg 56% 56%) 68%,
    hsl(46deg 56% 53%) 73%,
    hsl(46deg 56% 50%) 79%,
    hsl(46deg 64% 46%) 86%,
    hsl(47deg 76% 42%) 97%
  );
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.menu {
    padding: .875rem 1.125rem 0 1.125rem;
}

.logo_link img {
    display: block;
    width: 4rem;
    height: 4rem;
}

.nav_bar {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #E94606;
    border-radius: 2rem;
    width: 100%;
}

.nav_bar a {
    margin: .625rem;
    font-family: "anek-malayalam-variable", montserrat, sans-serif;
    text-transform: uppercase;
    font-size: .93rem;
    color: white;
    text-decoration: none;
}

.nav_bar a:hover {
    color: #074491;
}

.nav_bar a:active {
    color: #F4E9C6;
}

a.contact_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8rem; 
    height: 4rem;
}

.contact_button:hover {
    background-color: white;
    color: #E94606;
}

.contact_button:active {
    background-color: black;
    color: white;
}

.hero_button, .contact_button {
    background-color: #074491;
    border: none;
    color: white;
    border-radius: 2.375rem;
}

/* Hero section */

.hero {
    height: 90vh;
    display: flex;
    max-width: 100%;
    width: 100%;
}

.large_swirl, .small_swirl {
    position: absolute; 
}

.large_swirl {
    left: 0;
    height: 90vh;
}

.large_swirl img, .small_swirl img {
    max-width: 100%;
    height: 100%;
    min-width: 30%;
} 

.hero_text {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: space-evenly;
    margin-left: 2rem;
}

 .hero_text h1 {
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    font-size: 6rem;
    color:#074491;
} 

.hero_text h2 {
    display: flex;
    text-align: center;
    color: white;
    font-family: "anek-malayalam-variable", montserrat, sans-serif;
    font-size: 2.8rem;
    width: 70%;
    padding-bottom: 2rem;
}

.hero_button {
    display: inline-flex;
    padding: 0.5rem 2rem;
}

a.hero_button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15rem; 
    height: 3rem;
}

.hero_button:hover {
    background-color: white;
    color: #E94606;
}

.hero_button:active {
    background-color: black;
    color: white;
}

.small_swirl {
    height: 65vh;
    right: 0;
    top: 60%;
    transform: translateY(-50%);
}

/* About Section */

.about {
    width: 100%;
}

.about_inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 4rem;
}

.h3_about { 
    color: #E94606;
    font-size: 4.06rem;
    margin: 3rem 0 1.5rem 0;
}

.about_row_1 {
    display: flex;
    align-items: stretch;
    gap: 4rem;
}

.about_image {
    display: flex;
    flex: 1.2;
}

.about_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about_text h4 {
    font-size: 2.18rem;
    margin-top: 0;
}

.about_text p {
    font-size: 1.25rem;
    line-height: 1.8;
    max-width: 55ch;
}

.about_row_2 {
    display: flex;
    align-items: center;
    background-color: #074491;
    color: white;
    padding: 4rem;
    gap: 4rem;
}

.about_content {
    position: relative;
    left: 10%;
    max-width: 800px;
}

.about_content h5 {
    margin: 1rem 0 0.5rem 0;
    font-size: 1.56rem;
}

.about_content p {
    font-size: 1.12rem;
    line-height: 1.8rem;
    margin-bottom: 1.5rem;
    width: 60%;
}

.about_container {
    display: flex;
}

.about_button {
    display: flex;
    justify-content: center;
    background-color: #AED2FF; 
    border: none;
    color: #074491;
    width: 15.625rem; 
    height: 3.75rem;
    border-radius: 2.375rem;
}

.about_button:hover {
    background-color: white;
    color: #074491;
}

.about_button:active {
    background-color: black;
    color: white;
}


/* Approach section */

.approach {
    display: flex; 
    align-items: stretch;
}

.approach_div {
    display: flex;
    flex: 2; /*Takes up more space than text */
    position: relative;
}

.approach_div img {
    /*Scales images proportionally*/
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.approach_div_content {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    padding: 4rem;
}

.h3_approach {
    font-size: 4.06rem;
    color: #FFD49D;
    margin: 0;
}

.approach_center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    text-align: center;
    gap: 2rem;
    margin-top: 8rem;
}

.approach_center q {
    width: 70%;
    max-width: 100%;
    font-family: "anek-malayalam-variable", montserrat, sans-serif;
    font-variation-settings: "wdth" 100, "wght" 500;
    color: white;
    font-size: 1.75rem;
}

.approach_button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.approach_button:hover {
    background-color: white;
    color: black;
}

.approach_button:active {
    background-color: black;
    color: white;
}

.approach_button, .project_button {
    background-color: #FFD49D;
    border: none;
    color: black; 
    width: 15.625rem; 
    height: 3.75rem;
    border-radius: 2.275rem;
}

.approach_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 3rem;
    color: white;
    background-color: black;
    font-size: 1.12rem;
}

/* Portfolio section */

.portfolio {
    background-color: white;
}

.h3_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.h3_portfolio {
    color: #074491;
    font-size: 4.06rem;
    margin-bottom: 2rem;
    text-align: center;
}

.portfolio_container {
    display: flex;  
    gap: 2rem;
    background-color: black;
    padding: 2rem;
    margin-bottom: 4rem;
}

.digital, .print, .marketing {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.digital img, .print img, .marketing img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9; /*determines the ratio*/
    object-fit: cover; /*crops evenly and fills the space without distorting*/
}

.digital_button, .print_button, .marketing_button {
    background-color: white;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    max-width: 15.625rem;
    height: 3.75rem;
    border-radius: 2.375rem;
    margin-top: 2rem;
}

.digital_button:hover:active, .print_button:hover:active, .marketing_button:hover:active {
    background-color: black;
    color: white;
    border: .1875rem solid white;
}

/* Project section */

.project {
    position: relative;
    overflow: hidden;
    background-color: #074491;
    padding: 6rem 2rem;
}

.project_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.h3_project {
    color: #AED2FF;
    font-size: 3.06rem; 
    max-width: 700px;
}

span {
    color: #F4E9C6;
}

 .large_circle {
    position: absolute;
    top: -14%;
    right: 10%;
    width: 17.5rem;
    height: 15.3rem;
    background-image: url("../images/White_Hollow_Circle.png");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
} 

.yellow_circle {
    position: absolute;
    top: 20%;
    left: -10%;
    width: 15.375rem;
    height: 15.375rem;
    background-image: url("../images/Yellow_Circle.svg");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.85;
}

.h4_project {
    margin-top: 2rem;
    font-size: 2.5rem;
    color: white;
}

.project_p {
    max-width: 900px;
}

.project_p p {
    color: white;
    font-size: 1.25rem;
    line-height: 1.8;
}

.small_circle {
    position: absolute;
    bottom: 10%;
    right: -13%;
    width: 5.2rem;
    height: 10.4rem;
    background-image: url("../images/Small_Hollow_Circle.png");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.9;
}

.project_button {
    background-color: #F4E9C6;
    border: none;
    color: #074491;
    width: 15.625rem; 
    height: 3.75rem;
}

.project_button:hover {
    background-color: white;
    color: #074491;
}

.project_button:active {
    background-color: #D6C48C;
    color: #074491;
}

/* Footer section */

.footer {
    background-color: #F4E9C6;
    color: #897C57;
    height: 33.3rem;
}

.footer h3 {
    font-size: 4.06rem;
    padding-left: 4rem;
    padding-top: 4rem;
    margin-bottom: 0;
}

.footer_nav ul {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 0;
}

.footer_nav li {
    list-style-type: none;
}

.footer_nav li a {
    color: #897C57;
    font-size: 1.12rem;
}

.footer_nav li a:hover {
    color: white;
}

.footer_nav li a:active {
    color: #E94606;
}

.footer_contact {
    display: flex;
    justify-content: flex-end;
    font-size: .87rem;
    padding-right: 1.4rem;
}

.contact_message {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}

.message_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 19.875rem;
    height: 3.75rem;
    background-color: white;
    text-transform: uppercase;
    color: #A2A2A2;
    border-radius: 0.25rem;
    margin-right: 2rem;
    padding: 0rem;
}

.footer a {
    font-size: 1.56rem;
}

.message_button {
    background-color: #D6C48C;
    border: none;
    color: white;
    display: inline-block;
    width: 12.5rem; 
    height: 3.75rem;
    border-radius: 2.375rem;
    margin-top: 1.2rem;
    margin-left: 2rem;
}

.message_button:hover {
    background-color: #BE9A1A;
    color: white;
}

.message_button:active {
    background-color: #E94606;
    color: white;
} 

.footer_logo {
    display: flex;
    justify-content: center;
    position: relative;
    left: -22%;
    bottom: -8%;
}

.footer_logo img {
    width: 160px;
}

.polygon_box {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.polygons {
    margin: 0 auto;
}

.polygons img {
    display: flex;
    width: 42.87rem;
    margin-bottom: 2rem;
}

.social_media {
    padding-right: 1.5rem;
}

.highlight {
    border: 2px solid white;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    border-radius: 0.5rem;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}