body {
    font-family: 'Raleway', sans-serif;
    position: relative;
}

html {
    scroll-padding-top: 7em;
  }

#weare{
    font-family: 'Noto Sans', sans-serif;
    font-weight: bolder;
}

.divider {
    display: none;
}

/*---NAVBAR---*/
.navbar {
    height: 7em;
    scroll-behavior: smooth;
}

/*---LINKS---*/
.gggranite-links{
    text-align: end;
    padding-bottom: 10px;
    color: black;
}

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

.gggranite-links a:hover {
    color: darkgray;
}

/*---BANNER---*/
#gggranite-banner {
    margin-top: 8em;
    padding-bottom: 8em;
    position: relative;
}

#gggranite-banner-content {
    padding-left: 4em;
    padding-right: 4em;
}

/*---SERVICES---*/

/* The popup form - hidden by default */
.gggranite-services {
    padding: 8em 8em;
    display: flex;
}

.container-pic {
    position: relative;
    width: 33%;
}

.image {
    display: block;
    width: 100%;
    height: auto;
}
  
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #008CBA;
}
  
.container-pic:hover .overlay {
    opacity: 1;
}

.container-pic .btn-pic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
}

.container-pic .btn-pic:hover {
    background-color: black;
}

/*---MESSAGE---*/
.message{
    padding-bottom: 8em;
    text-align: center;
}

.message p{
    padding-left: 16em;
    padding-right: 16em;
    font-size: x-large;
}

/*---ABOUT---*/
.gggranite-about{
    padding-top: 4em;
    padding-bottom: 4em;
    color: black;
    background-color:rgb(238, 196, 69);
}

.gggranite-about .row .col-one .aboutus-one{
    text-align: left;
    size: 200%;
    margin-left: 9em;
    margin-right: 9em;
}

.gggranite-about .aboutus-one h1{
    font-family: 'Noto Sans', sans-serif;
    font-weight: bolder;
    text-align: left;
}

iframe {
    width: 600px;
    height: fit-content;
}

#letter {
    text-align: right;
}

/*---CONTACT---*/
.gggranite-contact{
    padding-top: 4em;
    padding-bottom: 4em;
    background-color: rgb(121, 187, 230);
    font-weight: bolder;
}

.contact-one {
    padding: 0em 5em;
    text-align: center;
    align-items: center;
}

.contact-two{
    text-align: center;
    color: black;
}

/*---FOOTER---*/
.gggranite-footer{
    padding-top: 2em;
    height: 5em;
    text-align: center;
}

/*---RESIZING---*/
@media screen and (max-width: 600px) {

    .divider{
        display: block;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .navbar img{
        margin-left: 1em;
    }

    #gggranite-banner-content{
      font-size: 24px;
      text-align: center;
      padding-left: 0em;
      padding-right: 0em;     
    }

    .gggranite-services {
        text-align: center;
        padding-left: 0em;
        padding-right: 0em;
    }

    .gggranite-services {
        padding: 4em 0em;
        display: block;
    }

    .container-pic {
        width: 100%;
        height: auto;
    }

    .gggranite-about .row .col-two .aboutus-two iframe{
        height: 18em;
        width: 80%;
    }

    .message{
        padding-left: 0em;
        padding-right: 0em;
        padding-bottom: 8em;
        text-align: center;
    }

    .message + h1{
        font-size: 30%;
        text-align: center;
        padding-left: -5em;
        padding-right: 0em;
    }

    .message h1 span {
        display: none;
    }
    
    .message p{
        padding-left: 0em;
        padding-right: 0em;
        font-size: x-large;
    }

    .gggranite-about .row .col-one .aboutus-one{
        text-align: center;
        size: 150%;
        margin-left: 0em;
        margin-right: 0em;
        padding-left: 2em;
        padding-right: 2em;
    }

    iframe {
        width: auto;
        height: auto;
        margin: 0%;
        padding: 0%;
    }


}