body img{
    display: block;
    max-width: 100%;
}

body {
    overflow-x: hidden;
}
#area{
    background-color: hsl(0, 0%, 100%);
    width: 40%;
    height: 8.5em;
    position: relative;
    bottom: 8.1em;
}
.lky{
    text-decoration: none;
    display: inline;
    padding-left: 8%;
    position: relative;
    top: 2em;
    font-size: 1.5em;
    font-family: gio;
    color: hsl(240, 91%, 8%);
}
#ments{
    font-size: 1.5em;
    font-family: gio;
    color: hsl(240, 91%, 8%);
    position: relative;
    left: 34%;
    font-weight:900;
}
#f_sc{
    position: relative;
    right: 6%;
}
#q_btn{
    padding-top: 0.8em;
    padding-bottom: 0.5em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    border: 2px solid  hsl(0, 0%, 0%);
    position: relative;
    color: hsl(0, 0%, 0%);
    left: 46%;
    background-color: hsl(0, 0%, 100%);
    text-decoration: none;
}

#q_btn:hover{
    cursor: pointer;
    background-color: hsl(240, 91%, 8%);
    color: hsl(0, 0%, 100%);
    border: 2px solid  hsl(240, 91%, 8%);
}
#we_are{
    color: hsl(240, 100%, 10%);
    position: relative;
    left: 3%;
    top: 1em;
}
#calls{
    display: inline;
    color: hsl(240, 100%, 10%);
    position: relative;
    left: 2%;
    top: 1em;
    font-size: 1.2em;
}

#calls a{
    margin-left: 1em;
    text-decoration: none;
    color: hsl(0, 0%, 33%);
}

#calls a:hover{
    color: hsl(240, 100%, 10%);
}

#calls #us, #tm{
    border-right: 1px hsl(0, 3%, 78%) solid;
}
#top_bar {
    background-color: transparent; /* initial transparent background */
    padding: 4em;
    position: fixed;
    top: 0;
    width: 100%;
    transition: background-color 0.3s ease;
    z-index: 1000;
}

#top_bar .srv_hdr{
    text-decoration: none;
    position: relative;
    left: 50%;
    margin-left: 1em;
    color: transparent;
}

#prj.scrolled{
    color: hsl(240, 100%, 10%);
}

#SRVC.scrolled{
    color: hsl(240, 100%, 10%);
}

#US.scrolled{
    color: hsl(240, 100%, 10%);
}

#top_bar.scrolled {
    background-color: hsla(0, 0%, 100%, 0.932); /* opaque color when scrolled */
}

#qoute{
    background-color: hsl(240, 100%, 10%);
    padding: 0.5em;
    color: hsl(0, 0%, 100%);
    position: relative;
    nav-left: auto;
    text-decoration: none;
}
#qoute.scrolled {
    background-color: transparent;
    color: transparent;
}
/* second row images */
.inds_sc .image-container {
    display: inline-block;
    width: 40%;
    max-width: 430px;
    position: relative;
    left: 2%;
}

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

.inds_sc a {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid white;
    text-decoration: none;
    font-size: 1em;
    color: white;
    padding: 0.5em 1em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    transition: background-color 0.3s ease;
}

.inds_sc a:hover {
    background-color: hsl(0, 0%, 100%);
    color:  hsl(240, 100%, 10%);
}

/* first row images */
.inds_fs .image-container {
    display: inline-block;
    width: 40%;
    max-width: 430px;
    position: relative;
    left: 2%;
}
.image-container #agr_img{
    height: 40em;
}
.image-container #ind_img{
    height: 40em;
}
.inds_fs .sc_row {
    width: 100%;
    height: auto;
    display: block;
}

.inds_fs a {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid white;
    text-decoration: none;
    font-size: 1em;
    color: white;
    padding: 0.5em 1em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    transition: background-color 0.3s ease;
}

.inds_fs a:hover {
    background-color: hsl(0, 0%, 100%);
    color:  hsl(240, 100%, 10%);
}

/* Remove the .sc_btns styles as they're no longer needed */
#we_state{
    font-size: 1.2em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    position: relative;
    color: hsla(0, 0%, 0%, 0.877);
}

#indur{
    font-size: 2em;
    display: inline;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: hsl(240, 100%, 10%);
    position: relative;
    left: 45%;
}

#indur_ment{
    font-size: 1.2em;
    display: inline;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: hsl(0, 0%, 0%);
    position: relative;
    left: 35%;
}

#all_inds{
    text-decoration: none;
    font-size: 1.1em;
    display: inline;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: hsl(0, 0%, 0%);
    position: relative;
    left: 46%;
}

#ursrv{
    font-size: 1.5em;
    display: inline;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: hsl(240, 100%, 10%);
    position: relative;
    left: 43%;
}

#srv_ment{
    font-size: 1.2em;
    display: inline;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: hsl(0, 0%, 0%);
    position: relative;
    left: 27%;
}

#fnd_mr{
    text-decoration: none;
    font-size: 1.1em;
    display: inline;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: hsl(0, 0%, 0%);
    position: relative;
    left: 44%;
}

#flw_us{
    background-color: hsl(240, 100%, 12%);
    border-top: 1px hsl(0, 2%, 77%) solid;
    padding-top: 1em;
    padding-bottom: 1em;
    height: auto;
    height: 20em;
}

#flw_us .flw_icns{
    display: inline;
    width: 3em;
    padding-left: 1.3em;
    position: relative;
    left: 36%;
}
#flw_us #insta{
    height: 3em;
    width: 4em;
}

#flw_us #gt{
    text-decoration: none;
    border: 2px hsl(0, 0%, 100%) solid;
    color: hsl(0, 0%, 100%);
    padding: 1em;
    position: relative;
    left: 20%;
    top: 40%;
}

#flw_us #gt:hover{
    color: hsl(0, 0%, 0%);
    background-color: white;
}

/* qoute screen css */
#sc_hdr{
    background-color:hsl(0, 0%, 100%);
    padding: 3em;
    position: fixed;
    top: 0;
    width: 100%;
    transition: background-color 0.3s ease;
    z-index: 1000;
}

#sc_hdr.scrolled {
    background-color: hsla(0, 0%, 100%, 0.932); /* opaque color when scrolled */
}

#srv_hdr .scrolled {
    color:hsl(240, 100%, 12%); /* opaque color when scrolled */
}
#sc_hdr .sc_hdr{
    color:  hsl(240, 100%, 12%);
    text-decoration: none;
    position: relative;
    left: 50%;
    margin-left: 2em;
}

#sc_hdr #hme{
    text-decoration: underline;
}

#sc_hdr .sc_hdr:hover{
    text-decoration: underline;
}

#hd_ln{
    display: inline;
    font-size: 3.5em;
    color: hsl(0, 0%, 100%);
    position: relative;
    bottom: 4em;
    left: 5%;
}

.jump{
    position: relative;
    bottom: 10em;
    left: 5%;
}

#jmp_to{
    position: relative;
    bottom: 5.5em;
    right: 8em;
    font-size: 2em;
    text-decoration: none;
    color: hsla(0, 100%, 100%, 0.863);    
}

.jump .j_t{
    font-size: 1.4em;
    text-decoration: none;
    color: hsla(0, 0%, 89%, 0.863);
}

.jump .j_t:hover{
    font-size: 1.4em;
    text-decoration: none;
    color: hsl(0, 0%, 100%);
}

.jump #GAQ{
    padding-left: .4em;
    border-right: white .1em solid;
}

.jump #GCF{
    position: relative;
    left: 1%;    
}

#state_ment{
    font-size: 1.2em;
    text-align: center;
}

#frm_str{
    font-size: 2.5em;
    color: hsl(240, 100%, 12%);
    text-align: center;
}

/* Qoute form*/

#main_form input{
    width: 30%;
    height: 1.5em;
    position: relative;
    left: 10%;
}

#main_form #surname{
    position: relative;
    left: 50%;
    bottom: 2em;
}

#main_form #sr_nm{
    position: relative;
    left: 19%;
    bottom: 1.4em;
}

#main_form #nm_lbl{
    position: relative;
    left: 10%;
    color: hsl(240, 95%, 25%);
}

#main_form .lft_nm{
    position: relative;
    right: 21%;
    color: hsl(240, 95%, 25%);
}

#main_form .rght{
    position: relative;
    left: 10%;
    color: hsl(240, 95%, 25%);
}

#COP{
    top: .5em;
}

#COP_i{
    width: 30.5%;
    height: 2em;
    position: relative;
    left: 10%;
    top: .5em;
}

#stlow_i{
    width: 30.5%;
    height: 2em;
    position: relative;
    left: 10%;
    top: 1.1em;
}

#main_form #lnd_loc{
    position: relative;
    top: 1em;
}

#main_form #prj_sct{
    position: relative;
    left: 50%;
    bottom: 2em;
    color: hsl(240, 95%, 25%);
}

#sub_button{
    position: relative;
    left: 10%;
    color: hsl(0, 0%, 100%);
    background-color: hsl(240, 100%, 12%);
    padding: 1em;
}

#sub_button:hover{

    color: hsl(240, 100%, 12%);
    background-color: hsl(0, 0%, 100%);
    border-color:hsl(240, 100%, 4%);

}

#prjsct_i{
    width: 30.5%;
    height: 2em;
    position: relative;
    left: 50%;
    bottom: 2em;
}

#main_form #cmp_nm{
    position: relative;
    left: 50%;
    bottom: 2.5em;
}

#main_form #Cmpy_nm_i{
    position: relative;
    left: 50%;
    bottom: 3em;
}

#main_form #cmp_reg{
    position: relative;
    
}

#main_form #cmpy_reg_i{
    position: relative;
}

#main_form #cmp_eml{
    position: relative;
    left: 19%;
    bottom: 1.5em;
}

#main_form #cmpy_eml_i{
    position: relative;
    left: 50%;
    bottom: 2em;
}

#main_form #cmp_mb_no{
    position: relative;
    top: .5em;
}

#main_form #Cmpy_nm{
    position: relative;
    top: .5em;
}

#main_form #cmp_bs_ln{
    position: relative;
    left: 19%;
    bottom: 1em;
}

#main_form #cmp_bus_ln{
    position: relative;
    left: 50%;
    bottom: 1em;
}

/* service screen */

#srv_hdr{
    background-color:hsl(0, 0%, 100%);
    padding: 3em;
    position: fixed;
    top: 0;
    width: 100%;
    transition: background-color 0.3s ease;
    z-index: 1000;
}

#srv_ln{
    display: inline;
    font-size: 3.5em;
    color: hsl(0, 0%, 100%);
    position: relative;
    bottom: 4em;
    left: 5%;
}

#srv_hdr.scrolled {
    background-color: hsla(0, 0%, 100%, 0.932); /* opaque color when scrolled */
}
#srv_hdr .srv_hdr{
    color:  hsl(240, 100%, 12%);
    text-decoration: none;
    position: relative;
    left: 50%;
    margin-left: 2em;
}

#srv_hdr #SRVC{
    text-decoration: underline;
}

#srv_hdr .srv_hdr:hover{
    text-decoration: underline;
}

#lock_img{
    width: 100%;
    height: 45em;
}

#jmp_tosrv{
    color: black;
    font-size: 3em;
    position: relative;
    bottom: 30%;
}

#jmp_tosrv{
    position: relative;
    bottom: 5.5em;
    right: 8em;
    font-size: 2em;
    text-decoration: none;
    color: hsla(0, 100%, 100%, 0.863);    
}

.jump_srv{
    position: relative;
    bottom: 7em;
    left: 5%;
    font-size: 1.5em;
}

.jump_srv .j_t{
    font-size: 1.4em;
    text-decoration: none;
    color: hsla(0, 0%, 89%, 0.863);
}

.jump_srv .j_t:hover{
    color: hsl(0, 0%, 100%);
}

#line{
    padding-left: 5em;
    text-align: center;
}

.AST{
    display: inline;
    text-decoration: none;
    padding-left : 1em;
    padding-right: 1em;
    margin-right: .5em;
    border: 1px rgb(0, 0, 0) solid;
    font-size: 2em;
    background-color: hsl(240, 100%, 12%);
    color: hsl(0, 0%, 100%);
}

.AST:hover{
    color: hsl(240, 100%, 12%);
    background-color: hsl(0, 0%, 100%);
}

#dsgn{
    color: hsl(240, 100%, 12%);
    position: relative;
    left: 5%;
    top: 2em;
}

#spch_1{
    display: inline;
    position: relative;
    left: 1%;
}

#lft{
    position: relative;
    left: 40%;
    bottom: 20em;
    width: 60%;
}

#rgt{
    display: inline;
    position: relative;
    bottom: 15em;
    width: 40%;
    height: 40em;
}

#spch_2{
    display: inline;
    position: relative;
    left: 50%;
    bottom: 67em;
}

#flw_us_srv{
    background-color: hsl(240, 100%, 12%);
    border-top: 1px hsl(0, 2%, 77%) solid;
    padding-top: 1em;
    padding-bottom: 1em;
    height: auto;
    height: 20em;
}

#flw_us_srv .flw_icns{
    display: inline;
    width: 3em;
    padding-left: 1.3em;
    position: relative;
    left: 36%;
}
#flw_us_srv #insta{
    height: 3em;
    width: 4em;
}

#flw_us_srv #gt{
    text-decoration: none;
    border: 2px hsl(0, 0%, 100%) solid;
    color: hsl(0, 0%, 100%);
    padding: 1em;
    position: relative;
    left: 20%;
    top: 40%;
}

#flw_us_srv #gt:hover{
    color: hsl(0, 0%, 0%);
    background-color: white;
}

#fnd_mr_srv{
    text-decoration: none;
    font-size: 1.1em;
    display: inline;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: hsl(0, 0%, 0%);
    position: relative;
    left: 44%;
    bottom: 2em;
}