/* CSS Reset */
*
{
    margin: 0;
    padding: 0;
}

html 
{
    scroll-behavior: smooth;

    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
}

body
{
    background-color: #FFBA00;

    height: 200vh;
    /* height: 100vh; */
}

/* Navigation Bar CSS Styling start here*/
#navbar
{
    display: flex;
    align-items: center;

    position: relative;

    position: sticky;
    top: 0;
}

#navbar::before
{
    content: "";
    background-color: gray;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.5;
}

#left
{
    margin: 10px 25px;
}

#logo
{
    border-radius: 12.5%;

    display: flex;
    align-items: center;
    width: 75px;
    aspect-ratio: 1/1;
}

#centre
{
    position: absolute;
    margin: 0px 25%;
    
    width: 50%;
    /* border: 2px solid red; */

    padding: 10px;
}

#centre ul
{
    display: flex;
    list-style: none;

    justify-content: space-evenly;
}

.item
{
    list-style: none;
}

.item a
{
    display: block;
    color: #FFDB58;
    padding: 2.25px 18px;

    font-size: 1.5rem;
    text-decoration: none;
    text-shadow: 1px 2px 3px black;
}

.item a:hover
{
    color: gray;
    background-color: #FFDB58;
    border-radius: 100px;
    text-shadow: none;
}

@media (max-width:976.25px)
{
    .item a
    {
        font-size: 1.2418749928rem;
        /* font-size: 1.0231249928rem; */
    }
}

@media (max-width:781px)
{
    .item a
    {
        padding: 2.25px;
        font-size: calc(13px + 0.390625vw);
    }

    .item a:hover
    {
    color: gray;
    background-color: #FFDB58;
    border-radius: 6.25px;
    text-shadow: none;
    }
}

.line_1
{
    height: 5px;
    background-color: tomato;
    border: none;

    position: sticky;
    top: 95px;
}
/* Navigation Bar CSS Styling start here*/
/* ------------------------------------- */
/* Home Section CSS Styling start here */
#container
{
    height: 330vh;
}

@media (max-width:798px)
{
    #container
    {
        height: 304vh;
    }
}


#home
{
    width: 50%;
    margin: 100px 75% 100px 6.25%;
}

#home::before
{
    content: "";
    background: url(/img/bg.jpg) no-repeat center center/cover;

    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;

    width: 100%;
    aspect-ratio: 1/1;
}

@media (max-width:798px)
{
    #home
    {
        margin: 50px 68.75% 50px 6.25%;
    }
}

#btn_1_home
{
    border: 2px solid black;
    background-color: tomato;
    width: 50%;
}

#btn_1_home:hover
{
    background-color: #FFDB58;
}

/* Home Section CSS Styling end here */
/* ------------------------------------- */
/* Services Section CSS Styling start here */
#services
{
    margin: 0px 6.25% 100px 6.25%;
}

@media (max-width:798px)
{
    #services
    {
    margin: 0px 1.5625% 50px 1.5625%;
    }
}

#services_container
{
    display: flex;
    margin: auto;
}

.box_services_container
{
    margin: 0px 10px;
    padding: 40px 20px;
    background-color: rgba(255, 255, 255, 0.875);
    border-radius: 25px;
}

@media (max-width:798px)
{
    .box_services_container
    {
        padding: 20px 10px;
        background-color: rgba(255, 255, 255);
    }
}

#bx_1, #bx_2, #bx_3
{
    display: flex;
    flex-direction: column;
}

.services_images
{
    width: 200px;
    aspect-ratio: 1/1;

    display: block;
    margin: 0px auto;

    border: 2px solid tomato;
    border-radius: 12.5%;
}

#h2_1_services, #h2_2_services, #h2_3_services
{
    color: tomato !important;
}

#p_2_services, #p_4_services, #p_6_services
{
    padding-bottom: 0;
}

@media (max-width:798px)
{
    #p_2_services, #p_4_services, #p_6_services
    {
        display: none;
    }
}
/* Services Section CSS Styling end here */
/* ------------------------------------- */
/* About Section CSS Styling start here */
#about
{
    margin: 0px 118.938px 100px 118.938px
}

@media (max-width:798px)
{
    #about
    {
        margin: 0px 32.203px 50px 32.203px;
    }
}

.part
{
    display: flex;
    flex-direction: column;
    width: 100%;
}

#h2_who_are_we
{
    padding-top: 0 !important;
}

#p_1_who_are_we, #p_2_who_are_we
{
    text-align: center;
}

#p_2_who_are_we
{
    padding: 0 !important;
}

#clients_container
{
    display: flex;
    background-color: white;

    justify-content: space-evenly;
    align-items: center;

    padding: 40px 0;
    border-radius: 25px;
}

@media (max-width:798px)
{
    #clients_container
    {
        padding: 20px 0;
    }
}

#h2_who_are_we, #h2_our_clients
{
    text-decoration: underline;
    text-underline-offset: 2.5px;
}

.clients_images
{
    width: 200px;
    aspect-ratio: 1/1;

    display: block;
    margin: 0px auto;

    border: 2px solid tomato;
    border-radius: 12.5%;
}
/* About Section CSS Styling end here */
/* ------------------------------------- */
/* Contact Us Section CSS Styling start here */
#contact_us
{
    width: 37.5%;
    margin: 0 auto 100px auto
}

@media (max-width:798px)
{
    #contact_us
    {
        width: 62.5%;
        margin: 0 auto 50px auto
    }
}

#contact_box
{
    background-color: tomato;
    width: 100%;

    border: 2px solid white;
    border-radius: 25px;
}

#contact_us_form
{
    width: max-content;
    margin: 0 auto;
    padding: 140px 0;
}

@media (max-width:798px)
{
    #contact_us_form
    {
        padding: 120px 0;
    }
}

.form_group
{
    display: flex;
    justify-content: flex-end;

    font-size: 1.125rem;
    padding: 5px 0;
}

.form_group label
{
    padding-right: 10px;
    color: white;

    display: flex;
    align-items: center;

    width: 149.719px;
    margin: 0 auto;

    justify-content: flex-end;
}

#form_group_message
{
    height: 140px;
}

.form_group input, .form_group textarea
{
    border: 2px solid transparent;
    border-radius: 6.25px;

    background-color: white;
    color: tomato;
    text-align: center;

    width: 100%;
}

.form_group input::placeholder
{
    color: tomato;
    text-align: center;
}

@media (max-width:798px)
{
    #form_group_message
    {
        height: 120px;
    }
}

#btn_1_contact_us
{
    border: 2px solid white;
    background-color: #FFBA00;

    display: block;
    margin: 15px auto;
    width: 100%;
}

#btn_1_contact_us:hover
{
    background-color: #FFDB58;
}
/* Contact Us Section CSS Styling end here */
/* ------------------------------------- */
/* Footer CSS Styling start here */

footer
{
    background-color: black;
    color: white;
    padding: 40px 0;
}

footer div
{
    text-align: center;
}

/* Footer CSS Styling end here */
/* ------------------------------------- */
/* Utility Classes */
.page
{
    display: flex;
    flex-direction: column;

    padding: 10px;

    justify-content: center;
    align-items: center;
}

.h3_primary
{
    padding: 10px 10px 20px 10px;
    font-size: 1.5rem;
}

.p_page
{
    text-align: justify;
    padding: 0px 0px 5px 0px;

    font-size: 1.125rem;
}

.button_page
{
    margin: 15px 10px;
    padding: 5px 10px;
    
    color: black;

    border-radius: 100px;

    font-size: 1.0625rem;

    cursor: pointer;

    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
}

.button_page a
{
    text-decoration: none;
    color: black;
}

.button_page a:visited
{
    color: black;
}

.h2_secondary
{
    padding: 10px 0px;
    font-size: 1.25rem;
    text-align: center;
}