/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (REMOVING ALL THE DEFAULT BROWSER STYLING) */
*
{

    margin: 0;

    padding: 0;

    box-sizing: border-box;                     /*default is content-box where width and height properties only apply to the element's content area therefore if you apply something like padding content wont shrink to fit in said area*/

}

body
{

    font-family: 'Inter', sans-serif;          /* fallback font type for all text that isnt a heading  */

    color: #FFFFFF;                         /* default text color */    

    background-color: #ffffff;              /* default background color */ 

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (SCROLLING BEHAVIOR) */

html 
{

  scroll-behavior: smooth;                  /* smooth scrolling when clicking on anchor links */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (HOMEPAGE STYLING) */

.homepage
{

    /* Figma: Vertical flow, padding 64px, gap 16px, width fill, height hug */

    display: flex;

    flex-direction: column;             /* Vertical flow (TOP to BOTTOM FLEXING) */

    padding:0 32px;                     /* Horizontal padding */

    padding-top: 2dvh;                  /* Top padding for spacing */

    gap: 4dvh;

    width: 100%;

    height: 100dvh;                     /* Height of the page*/

    background-color: #FFFFFF;        /* BG Color for the section */
 
    position: relative;                 /* Positon of the section is relative to the normal scroll of the website */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (NAVBAR STYLING)*/

.navbar 
{

    /* Figma: Horizontal flow, width fill, height hug, gap auto */

    display: flex;

    flex-direction: row;                /* Horizontal flow (LEFT to RIGHT FLEXING) */

    width: 100%;                        /* Width fill */

    height: fit-content;                /* Height hug */

    justify-content: space-between;     /* Gap "auto" = space-between */

    align-items: center;                /* Vertically center items */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (HAMBURGER MENU ICON FOR MOBILE) */

.hamburger 
{

  display: none;                     /* Hidden by default, shown on smaller screens */

  font-size: 28px;                  /* Size of the hamburger icon */

  cursor: pointer;                  /* Pointer cursor on hover */

  color:#003366;                 /* Color of the hamburger icon */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (LOGO CONTAINER) */  

.logo                           
{

    /* Figma: Vertical flow, vertical padding 8px, width hug, height hug */

    display: flex;

    flex-direction: column;         /* Vertical flow (TOP to BOTTOM FLEXING) */

    padding: 0;                    

    width: fit-content;             /* Width hug */

    height: fit-content;            /* Height hug */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (LOGO IMAGE) */ 

.logo-img
{

    /* Figma: Width 78px, Height 56px */

    width: 78px;

    height: 56px;
    
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (LINKS CONTAINER) */

.links
{

    /* Figma: Horizontal flow, gap 40px, vertical padding 24px, width hug, height hug */

    display: flex;

    flex-direction: row;               /* Horizontal flow (LEFT to RIGHT FLEXING) */

    padding:0 24px;                    /* horizontal padding (LEFT AND RIGHT PADDING) */

    gap: 48px;

    width: fit-content;

    height: fit-content;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (LINKS STYLING) */ 

.links a
{

    width: fit-content;

    height: fit-content;

    font-family: 'Inter', sans-serif;

    font-weight: 400;                  /* SAME AS REGULAR */

    font-size: 16px;

    line-height: 24px;

    text-decoration: none;             /* Remove  default styling of anchors/links */

    position: relative;
    
    color: #003366;

    transition: color 0.3s ease;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (LINKS ANIMATION ON HOVER) */

/* Adding underline effect using ::after */

.links a::after 
{

    content: "";

    position: absolute;

    left: 0;

    bottom: -2px;                       /* adjust spacing under text */

    width: 0%;
    
    height: 2px;

    background-color: #D4AF37;

    transition: width 0.3s ease;       /*transition is on width */

    border-radius: 8px;                /* Rounded underline */

}

.links a:hover 
{

    color: #D4AF37;                 /* Changes text color */

}

.links a:hover::after 
{

    width: 100%;                      /* Expands underline to full width on hover */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (HERO CONTAINER STYLING)*/

.hero-section 
{
    
    /* Figma: Vertical flow, vertical padding 24px, gap 32px, width fill, height hug */

    display: flex;

    flex-direction: column;          /* Vertical flow (TOP to BOTTOM FLEXING) */

    gap: 3vh;

    width: 100%;

    height: fit-content;

    margin: 0;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (HERO TEXT STYLING)*/

.herotitle 
{

    /* Figma: Width fill, height hug, font size 80px, Playfair Display regular, line height 96px */

    width: 100%;

    height: fit-content;

    font-family: 'Playfair Display', serif;

    font-weight: 400;

    font-size: clamp(48px, 15vh, 96px);

    line-height: 1.1;

    color: #003366;

    margin: 0;                          /* removes default h1 margin */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (HERO SUBTITLE STYLING) */

.herosubtitle 
{
    
    /* Figma: Width fill, height hug, font size 80px, Playfair Display regular, line height 96px */

    padding: 0 8px;                   /* slight horizontal padding for better readability on smaller screens */
    
    width: 100%;
    
    max-width: 886px;                   /* Limit of the width (design) */

    height: fit-content;

    font-family: 'inter', serif;

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #003366;

    margin: 0; /* removes default paragraph margin */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (BUTTON CONTAINER STYLING (REUSED OVER AND OVER AGAIN)) */

.cta 
{

    /* Figma: Width hug, height hug, gap 16px, vertical padding 24px */

    display: flex;
    
    flex-direction: row; 

    gap: 16px;
    
    width: fit-content;                 /* Width hug */

    height: fit-content;                /* Height hug */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (TARGETING ALL BUTTONS GENERAL BUTTON STYLING) */

.button 
{

    /* Figma: Width hug, height hug, horizontal padding 32px, vertical padding 16px */

    display: flex;

    padding: 16px 32px;
    
    width: fit-content;
    
    height: fit-content;
    
    font-family: 'Inter', sans-serif;
    
    font-weight: 400;
    
    font-size: 16px;
    
    line-height:24px;
    
    align-items: center;
    
    justify-content: center;
    
    border: none;
    
    border-radius: 32px;
    
    cursor: pointer;
    
    transition: all 0.3s ease;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (BUTTON 1 INITIAL STATE) */

.button-primary 
{

    background-color:transparent;

    color: #003366;

    border: 1px solid #003366;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (BUTTON 1 HOVER STATE) */

.button-primary:hover 
{
    
    background-color: #D4AF37;              /* Gold color on hover*/
    
    color: #FFFFFF;                         /* White text on hover */

    border: 1px solid #D4AF37;              /* Gold color on hover*/

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (BUTTON 2 INITIAL STATE) */

.button-secondary 
{
    
    background-color:transparent;

    color: #003366;

    border: 1px solid #003366;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (BUTTON 2 HOVER STATE) */

.button-secondary:hover 
{
    
    background-color: #D4AF37;              /* Gold color on hover*/

    color: #FFFFFF;                         /* White text on hover */

    border: 1px solid #D4AF37;              /* Gold color on hover*/

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (ALTERNATE BUTTON 1 INITIAL STATE) */

.button-primary-alt 
{
    
    background-color:transparent; 

    color: #FFFFFF;

    border: 1px solid #FFFFFF;

}

/* (ALTERNATE BUTTON 1 HOVER STATE) */

.button-primary-alt:hover 
{
    
    background-color: #D4AF37;              /* Gold color on hover*/  

    color: #003366;                         /* Blue text on hover */

    border: 1px solid #D4AF37;              /* Gold color on hover*/

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (ABOUT PAGE 1 STYLING)*/

.About
{

    /* Figma: Vertical flow, padding 64px, gap 16px, width fill, height hug */

    display: flex;

    flex-direction: row;             /* Horizontal flow (LEFT to RIGHT FLEXING) */

    padding: 0 32px;                 /* Horizontal padding (LEFT AND RIGHT PADDING) */

    padding-top: 2vh;

    padding-bottom: 2vh;

    align-items:center;

    gap: 5vw;

    width: 100%;

    height:100dvh;

    overflow: hidden;

    background-color: #FFFFFF;

    position: relative;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (IMAGE CONTAINER(LEFT)) */

.ellipse-container
{

    /* Figma: Vertical flow, width fill, height hug */

    display: flex;

    flex-direction: column;             /* Vertical flow */

    width: fit-content;                 /* Width hug */

    height: fit-content;                /* Height hug */

    align-items: center;                /* Center content horizontally */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (IMAGE STYLING) */

.ellipse
{

  width: 400px;

  height: 400px;

  border-radius: 50%;               /* Makes it a circle */

  object-fit: cover;                /* Ensures the image covers the circle */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (EVERYTHING IN THE RIGHT CONTAINER) */

.right-container
{

    /* Figma: Vertical flow, width fill, height hug */

    display: flex;

    flex-direction: column;         /* Vertical flow */

    gap: 4vh;

    width: 100%;                    /* Width fill */

    height: fit-content;            /* Height hug */

    align-items: flex-start;        /* Align content to the left */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (TEXT CONTAINER) */

.content 
{

    /* Figma: Vertical flow, width fill, height hug */

    display: flex;

    flex-direction: column;         /* Vertical flow */

    gap: 4vh;

    width: 100%;                    /* Width fill */

    height: fit-content;            /* Height hug */

    align-items: flex-start;        /* Align content to the left */

    /* background-color: green; */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (TITLE STYLING) */

.title 
{

    /* Figma: Width fill, height hug, font size 80px, Playfair Display regular, line height 96px */

    width: 100%;

    height: fit-content;

    font-family: 'Playfair Display', serif;

    font-weight: 400;

    font-size: clamp(48px, 15vh, 64px);

    line-height: 1.1;

    color: #003366;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (SUBTITLE STYLING) */

.subtitle 
{

    /* Figma: Width fill, height hug, font size 80px, Playfair Display regular, line height 96px */

    width: 100%;

    height: fit-content;

    font-family: 'Inter', serif;
    
    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #003366;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (BUTTON CONTAINER STYLING) */
/*  {
        ALREADY STYLED ABOVE IN THE HOMEPAGE SECTION SO HERE I AM JUST REFRENCING IT INSTEAD OF GIVING IT ANOTHER CLASS AND RESTYLING IT THUS MINIMIZING LINES OF CODE.
    }   
*/

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (ABOUT PAGE 2 STYLING)*/

.Aboutpage2
{

    /* Figma: Vertical flow, padding 64px, gap 16px, width fill, height hug */
   
    display: flex;

    flex-direction: row;            /* horizontal flow */

    padding: 0 64px;

    padding-top: 2vh;               /* Top padding for spacing */

    gap: 5vw;

    width: 100%;

    min-width: 256px;

    height:100dvh;                  /* Height of the viewport */

    background-color: #FFFFFF;

    position: sticky;               /* allow for the next page to go over this page as soon as the section hits the top of the screen i.e top 0 */

    top: 0;                         /* Sticks to the top of the viewport */

    align-items: center;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (TEXT CONTAINER) */

.AboutTILE
{

    /* Figma: Vertical flow, width fill, height hug */

    display: flex;

    flex-direction: column;         /* Vertical flow */

    gap:4vh;

    width: 100%;                    /* Width fill */

    min-width: 256px;

    height: fit-content;            /* Height hug */

    min-height: 392px;

    max-height: 392px;

    align-items: center;           /* Center content horizontally */

    padding: 24px 16px;            /* Vertical padding */ 
    
    border-radius: 8px;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (TITLE STYLING) */

.approachTitle, .expertiseTitle, .clientsTitle
{
    /* Figma: Width fill, height hug, font size 80px, Playfair Display regular, line height 96px */

    width: 100%;

    height: fit-content;

    font-size:clamp(24px, 15vh, 24px);

    font-family: 'Playfair Display', serif;

    font-weight: 400;

    line-height:1.1;

    text-align: center;

    color: #003366;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (LIST STYLING) */

.approachItems, .expertiseItems, .clientsItems
{
    /* Figma: Width fill, height hug, font size 16px, Inter regular, line height 24px */

    padding-left: 16px;

    width: 100%;

    height: fit-content;

    font-family: 'Inter', serif;

    font-weight: 400;

    font-size: 16px;

    line-height: 24px;

    color: #003366;

    text-align: left;

    align-items: center; 

    list-style-type:'- ';               /* Remove default list styling */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (CONTAINER TITLE ANIMATION ON HOVER) */

/* ( SKETCHING/DRAWING ANIMATION )*/

/* SIDE NOTE: the span class is called "highlight-pencil-layers" so any word that is ENCLOSED IN THIS SPAN will have this animation occur on it on hover of that word*/

.highlight-pencil-layers {

    position: relative;

    display: inline-block;

    color: #003366;

    font-weight: 400;

}

.highlight-pencil-layers::before,

.highlight-pencil-layers::after {

    content: '';

    position: absolute;

    top: -3px;

    left: -6px;

    right: -6px;

    bottom: -3px;

    border: 1px solid #003366;

    border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%;

    z-index: -1;

    opacity: 0;

    clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%);

}

.highlight-pencil-layers::before {

    transform: rotate(-1.5deg);
    
    border-color: #003366;

    filter: blur(0.2px);

}

.highlight-pencil-layers::after {

    transform: rotate(0.5deg);

    border-color: #003366;

    border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%;

    top: -2px;

    left: -5px;

    right: -5px;

    bottom: -2px;

    filter: blur(0.1px);

}

.AboutTILE:hover .highlight-pencil-layers::before {

    opacity: 0.6;

    animation: traceClockwise 0.6s ease-out forwards;

}

.AboutTILE:hover .highlight-pencil-layers::after {

    opacity: 0.6;

    animation:traceClockwise 0.6s cubic-bezier(0.4, 0, 1, 1) 0.6s forwards; /* Strong ease-in */

}

@keyframes traceClockwise {

    0% {

        clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%);

    }

    12.5% {

        clip-path: polygon(50% 0%, 75% 0%, 75% 25%, 50% 0%);

    }

    25% {

        clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 50% 0%);

    }

    37.5% {

        clip-path: polygon(50% 0%, 100% 0%, 100% 75%, 50% 75%);

    }
    
    50% {

        clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);

    }

    62.5% {

        clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 25% 100%);

    }

    75% {

        clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%);

    }

    87.5% {

        clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%);

    }

    100% {

        clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);

    }

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (SERVICE PAGE STYLING) */

.Services
{

    /* Figma: Vertical flow, padding 64px, gap 16px, width fill, height hug */

    display: flex;

    flex-direction: column;                     /* vertical flow */

    padding:0 32px;                             /* Horizontal padding */

    padding-top: 3vh;                           

    padding-bottom: 10vh;

    gap: 4vh;

    width: 100%;

    height:fit-content;                         /* Height hug (this is because the contnent of this section is longer than the viewport height of any device) */

    background-color: #003366;

    position:relative;                          /* prevent the next page from going over this page i.e it goes relative to the normal scroll of the website*/

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* ( ANIMATION WHEN THE SERVICES SECTION IS EXPANDED (JAVASCRIPT SIDE OF THINGS)) */
.Services.expanded 
{

    position: relative !important;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (CONTAINER STYLING) */

.Maincontainer
{
    display: flex;

    flex-direction:column; /* Vertical flow */

    gap: 4vh; /* Gap between service tiles */

    width: 100%; /* Width fill */

    height: fit-content; /* Height hug */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (ALTERNATE TITLE STYLING(DUE TO BACKGROUND BEING BLUE)) */

.title-alt
{

    /* Figma: Width fill, height hug, font size 80px, Playfair Display regular, line height 96px */

    width: 100%;

    height: fit-content;

    font-size: clamp(48px, 15vh, 64px);

    font-family: 'Playfair Display', serif;

    font-weight: 400;

    line-height: 1.1;

    color: #FFFFFF;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (ALTERNATE SUBTITLE STYLING(DUE TO BACKGROUND BEING BLUE)) */

.subtitle-alt 
{

    /* Figma: Width fill, height hug, font size 80px, Playfair Display regular, line height 96px */

    width: 100%;

    height: fit-content;

    font-size: 16px;

    font-family: 'Inter', serif;

    font-weight: 400;

    line-height: 24px;

    color: #ffffff;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (CONTAINER FOR THE SERVICE) */

.ServiceTile
{

    /* Figma: Vertical flow, width fill, height hug, gap 16px, padding 0px */

    display: flex;

    flex-direction: column;                 /* Vertical flow */

    width: 100%;                            /* Width fill */

    height: fit-content;                    /* Height hug */

    gap: 4vh;
    
    /* background-color: brown; */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (CONTAINER FOR THE SERVICE NAME) */

.Frame
{
    display: flex;

    flex-direction: row; /* Horizontal flow */

    width: 100%;      /* Width fill */

    height: fit-content;     /* Height hug */

    padding: 0px;

    border-bottom: 1px solid #FFFFFF; /* Thickness style color */

    /* background-color: aqua; */
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (THE SERVICE NAME) */

.BusinessName, .DataName, .EducationName, .ProjectName
{

    /* Figma: Width fill, height hug, font size 32px, Playfair Display regular, line height 48px */

    width: 100%;

    height: fit-content;

    font-size: clamp(32px, 15vh, 48px);

    line-height: 1.1;

    font-family: 'Playfair Display', serif;

    font-weight: 400;

    text-align: left;

    color: #FFFFFF;
       
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (THE SERVICE DESCRIPTION CONTAINER) */

.Servicelist
{

    font-size: 16px;

    font-family: 'Inter', serif;

    font-weight: 400;

    line-height: 24px;

    text-align: left;

    padding-left: 0;

    margin-left: 0;

    /* background-color: yellowgreen; */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (THE SERVICE LIST CONTAINER ) */

.Businesslist-item,.Datalist-item,.Educationlist-item,.Projectlist-item
{
    
    padding-left: 16px; /* Indentation for list items */

}

/* (THE SERVICE LIST STYLING ) */
.Businesslist-item li, .Datalist-item li, .Educationlist-item li, .Projectlist-item li
{

    margin-bottom: 0px; /* Space between list items */
    margin-left: 16px; /* enforce the bullets */


}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (CONTACT PAGE STYLING)*/

.Contact
{

    /* Figma: Vertical flow, padding 64px, gap 16px, width fill, height hug */

    display: flex;

    flex-direction: row;            /* VERTICAL flow */

    padding: 64px 32px;            

    gap: 5vw;

    width: 100%;

    height: 100dvh;                 

    background-color: #FFFFFF;

    box-shadow: 0px 0px 24px #FFFFFF;       

    position: relative;          /* ANY OTHER PAGE ADDED WILL NOT GO OVER IT */   

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (LEFT CONTENT CONTAINER) */

.LEFTContent
{
    /* Figma: Vertical flow, width fill, height hug */

    display: flex;

    flex-direction: column;                     /* Vertical flow */

    width: 100%;                                /* Width fill */

    height: fit-content;                        /* Height hug */

    align-items: flex-start;                    /* Align content to the left */

    gap: 4vh;

    padding: 24px 0;                            /* Vertical padding */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (TITLE STYLING) */

.Contact-t

{

    /* Figma: Width fill, height hug, font size 80px, Playfair Display regular, line height 96px */

    width: 100%;

    height: fit-content;

    font-size: clamp(48px, 15vh, 64px);

    font-family: 'Playfair Display', serif;

    font-weight: 400;

    line-height: 104px;

    color: #003366;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (SUBTITLE STYLING) */

.Contact-subtitle
{

    /* Figma: Width fill, height hug, font size 80px, Playfair Display regular, line height 96px */

    width: 100%;

    height: fit-content;

    font-size: 16px;

    font-family: 'Inter', serif;

    font-weight: 400;

    line-height: 24px;

    color: #003366;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (RIGHT CONTENT CONTAINER) */

.RIGHTContent
{
    /* Figma: Vertical flow, width fill, height hug */

    display: flex;

    flex-direction: column; /* Vertical flow */

    width: 100%;      /* Width fill */

    height: fit-content;     /* Height hug */

    align-items: left; /* Align content to the left */

    gap: 16px;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (CONTACT FORM CONTAINER) */

.ContactForm
{

    /* Figma: Vertical flow, width fill, height hug */

    display: flex;

    flex-direction: column; /* Vertical flow */

    width: 100%;      /* Width fill */

    height: fit-content;     /* Height hug */

    align-items: left; /* Align content to the left */

    gap: 8px;

    padding: 24px 0; /* Vertical padding */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (CONTAINER FOR THE NAMES) */

.Names
{

    display: flex;

    flex-direction: row; /* Vertical flow */

    width: 100%;      /* Width fill */

    height: fit-content;     /* Height hug */

    align-items: left; /* Align content to the left */

    gap: 32px;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (LEFT NAME CONTAINER (FIRSTNAME)) */

.LeftSide
{

    /* Figma: Vertical flow, width fill, height hug */

    display: flex;

    flex-direction: column; /* Vertical flow */

    width: 100%;      /* Width fill */

    height: fit-content;     /* Height hug */

    align-items: left; /* Align content to the left */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (RIGHT NAME CONTAINER (LASTNAME)) */

.RightSide
{

    /* Figma: Vertical flow, width fill, height hug */

    display: flex;

    flex-direction: column; /* Vertical flow */

    width: 100%;      /* Width fill */

    height: fit-content;     /* Height hug */

    align-items: left; /* Align content to the left */

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (FILL IN HEADINGS STYLING E.G ORGANIZATION , EMAIL) */

.Contact-title 
{
    /* Figma: Width fill, height hug, font size 80px, Playfair Display regular, line height 96px */

    width: 100%;

    height: fit-content;

    font-size: 16px;

    font-family: 'Inter', sans-serif;

    font-weight: 400;

    line-height: 24px;

    color: #003366;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* (INPUT STYLING) */
.ContactInput
{
    width: 100%;

    height: fit-content;

    font-size: 16px;

    font-family: 'Inter', sans-serif;

    font-weight: 400;

    line-height: 24px;

    border: none;                                      /* Remove all borders */

    border-bottom: 1px solid #003366;               /* Bottom border only */

    outline: none;                                    /* Remove default focus outline (optional) */

    background: none;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */