/********* GENERAL ********/
.clear-both {
    clear: both;
}

.grow1 {
    flex-grow: 1;
}

/***********************/
body {
    font-family: Inter, system-ui, sans-serif;
}


.layout-center-everything {
    width:95%;
    margin-left:auto;
    margin-right:auto;
    margin-top: 10px;
}

.layout-main {
    width: 100%;
    display: grid;
    grid:
    "header" auto
    "main" 1fr
    "footer" auto
    / 1fr;
    gap: 8px;
}

.header {
    grid-area: header;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
}

.header a:hover{
    color: red;
}

.main { grid-area: main; }
.footer { grid-area: footer; }


.layout-header {
    width: 100%;
    display: flex;
    gap: 16px;

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

/********* HEADER - Logo ***************/

.header-logo-container {
    margin-left: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.header-logo {
    height: 50px;
    width: 50px;
    float:left;
}

.header-logo-name {
    float:left;
    margin-left: 20px;
}

/********* HEADER - Links ***************/
.header-links {
    text-align: right;
    flex-grow: 1;
    margin-right: 5%;
}


/********* INDEX - Home ******************/
.home-container {
    min-height: 775px;
}



/********* INDEX - Services  ************/
.services-container {
    min-height: 850px;
}

/*********** Services - SECTIONS **********/
.section-header {
    width: 100%;
    min-height: 75px;
    background-color: black;
    color: white;
    vertical-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size:40px;
    line-height: 75px;
}

.section-header-text {
    margin-left: 50px;
}

.return-to-top {
    cursor:pointer;
    float:right;
    font-size: 30px;
    margin-right: 50px;
}

.return-to-top:hover {
    color: red;
}


/********* INDEX - Pricing ************/
.pricing-container {
    min-height: 850px;
}

.pricing-content {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}



/********* INDEX - Contact ************/

.contact-conatiner {
    min-height: 550px;
}

.contact-form {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

input[type=text], input[type=email], textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0 15px 0;
    border: 1px solid #ccc;
}
input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
}

.contact-success {
    text-align: center;
    font-size: 80px;
    color: green;
}



/******** Services - page**********/

.services-list-container {
    margin-left: 5%;
    margin-top: 10px;
}

.services-list:hover {
    font-size: 18px;
    color: red;
}

.services-list {
    font-size: 18px;
}

.service-active {
    font-weight: bold;
    text-decoration: underline;
    color: red;
}

.services-page-container {
    margin-top: 25px;
    min-height: 400px;
    margin-left: 5%;

}

.services-header{
    font-size:45px;
    font-weight: bold;
}

.services-content-container {
    float: left;
    width: 60%;
}

.services-image-container {
    float:left;
    width:35%;
    margin-left: 15px;
    margin-top:30px;
}
.services-image {

}

.services-description ul {
    list-style-type: disc;
    margin-left: 20px;
}

.services-description li {
    margin-bottom: 10px;
}


.services-contact{
    margin-left: 5%;
    margin-top: 25px;
    margin-bottom: 60px;
}

/********* FOOTER *************/

.footer-layout {
    width: 100%;

    display: flex;
    gap: 16px;
}

.footer-social {
    width:35%;
}

.footer-links {
    width:15%;
}

.footer-links a:hover {
    color: red;
}

.footer-location {
    width:25%;
}

.footer-contact {
    width:25%;
}