/* GLOBAL */
* {
    font-family: "Afacad Flux", sans-serif;
}

body {
    margin: 0;
    background-color: #ddd4cb;

}

a {
    cursor: pointer;
    text-decoration: none;
    color: #000;
}

/* ELEMENTS */
.button-01 {
    border: 2px solid #ddd4cb;
    background-color: rgba(0, 0, 0, 0);
    color: #fff;
}

.button-02 {
    border: 2px solid rgb(0, 99, 93);
    background-color: rgba(0, 0, 0, 0);
    color: #000;
}

.button-03 {
    border: 2px solid rgb(0, 99, 93);
    background-color: rgba(0, 0, 0, 0);
    color: #000;
}

.button-01,
.button-02 {
    font-weight: 600;
    border-radius: 25px;
    padding: 10px 25px;
    margin: 25px;
    transition: 0.5s;
    box-shadow: 2px 3px rgba(0, 0, 0, 0.2);
}

.button-03 {
    font-size: 110%;
    border-radius: 25px;
    padding: 15px 20px;
    margin: 25px;
    transition: 0.5s;
}

.button-01:hover {
    cursor: pointer;
    color: rgba(0, 99, 93, 1);
    background-color: #ddd4cb;
    transition: 0.5s;
}

.button-02:hover,
.button-03:hover {
    cursor: pointer;
    color: #ddd4cb;
    background-color: rgba(0, 99, 93, 1);
    transition: 0.5s;
}

/* REPETITIVE */

.title-holder {
    width: 100%;
    background-color: #ece8e5;
    border-radius: 15px;
    padding-top: 1px;
    margin-bottom: 25px;
}

.translucent-title {
    margin: 10px;
    color: rgba(0, 0, 0, 0.1);
    text-align: center;
    letter-spacing: 55px;
    padding-bottom: 50px;
}

.colorful-title {
    color: rgb(219, 169, 93);
    -webkit-text-fill-color: transparent;
    background: linear-gradient(to right, rgb(4, 134, 144), rgb(158, 73, 155)) text;
}

@media(max-width: 700px) {
    .translucent-title {
        letter-spacing: 35px;
    }

    .title-holder {
        width: 100%;
    }

    .title-holder>* {
        margin: 25px auto;
        width: 90%;
    }
}

@media(max-width: 560px) {
    .translucent-title {
        letter-spacing: 20px;
    }
}

/* NAV BAR */
#insert-navbar {
    width: 100%;
    background-color: rgb(0, 99, 93);
    position: fixed;
    z-index: 1;
}

.navbar-container {
    width: 90%;
    margin: 25px auto;
    display: flex;
    gap: 15px;
    font-size: 120%;
    text-transform: uppercase;
}

.navbar-logo {
    width: 50px;
}

.navbar-links-opener {
    display: none;
}

.navbar-menu {
    display: flex;
    gap: 15px;
    transition: 0.5s;
}

.menu-button {
    color: #fff;
    font-size: larger;
    background-color: transparent;
    border: none;
}

.navbar-link {
    color: #fff;
    padding-top: 15px;
    transition: 0.5s;
}

.navbar-link:hover {
    font-size: 110%;
    text-shadow: 2px 2px rgb(0, 42, 39);
    transition: 1s;
}

@media(max-width: 550px) {
    .navbar-link {
        font-size: 80%;
    }

    .navbar-container {
        margin: 25px;
    }
}

@media(max-width: 475px) {

    .insert-navbar {
        border-bottom: solid 0.5px black;
    }

    .navbar-container,
    .navbar-links-opener {
        display: flex;
    }

    .navbar-links-opener {
        justify-content: center;
        padding-top: 15px;
        font-size: 80%;
        color: #fff;
    }

    .navbar-menu {
        flex-direction: column;
        display: none;
    }

    .navbar-link {
        margin: 0 auto;
    }

    .navbar-menu-dropdown {
        display: block;
        text-align: center;
        flex-grow: 1;
    }

    .navbar-link:hover {
        font-size: 80%;
        font-weight: 600;
        color: rgb(17, 151, 142);
        text-shadow: none;
    }

    .navbar-menu-dropdown:hover .navbar-menu {
        display: flex;
        background-color: #222;
        border-radius: 5px;
        gap: 0;
    }

    .navbar-link {
        padding: 15px 0;
    }

    .navbar-link:hover {
        width: 100%;
        border-radius: 5px;
        background-color: #333;
    }
}

/* HEADER */
#insert-header {
    width: 100%;
}

.header-container {
    margin: 0 auto;
    padding-bottom: 25px;
    background-color: rgb(0, 99, 93);
}

.header-title-container {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    width: 50%;
    height: 50px;
    margin: 0 auto;
    gap: 10px;
}

.header-title {
    margin: 0;
    color: #fff;
    letter-spacing: 2px;
    transition: 0.5s;
    font-size: 250%;
}

.header-title:hover {
    font-size: 275%;
    text-shadow: 3px 3px rgb(0, 42, 39);
    transition: 0.5s;
}

.header-subtitle {
    color: #fff;
    text-align: center;
    letter-spacing: 10px;
    font-size: 175%;
}

.header-description {
    width: 90%;
    margin: 50px auto 0;
    color: #fff;
    background-color: rgb(1, 77, 71);
    background-image: linear-gradient(to top left, rgb(1, 77, 71), rgb(1, 77, 71), rgb(1, 57, 52));
    border-radius: 15px;
    text-align: center;
    letter-spacing: 5px;
}

.header-description h3 {
    padding-top: 25px;
    margin: 5px;
}

@media (max-width: 550px) {
    .header-title-container h1 {
        font-size: 225%;
    }

    .header-subtitle {
        font-size: 150%;
        width: 60%;
        margin: auto;
    }

    .header-description h3 {
        font-size: 110%;
        width: 70%;
        margin: auto;
    }
}

@media(max-width: 475px) {
    .header-title-container {
        padding-top: 150px;
    }
}

/* MAIN CONTENT */

#main {
    width: 90%;
    margin: 0 auto;
}

.home-heading,
.about-heading,
.portfolio-heading,
.services-heading {
    margin: 0;
    padding: 50px 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
}

/* HOME CONTENT */

.home-description {
    margin: 0 auto;
    padding: 35px 50px;
    width: 60%;
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: 2px 3px #beb8b2;
}

.home-description p {
    text-transform: none;
    letter-spacing: 1px;
}

.highlighted-words {
    font-weight: 600;
    font-size: 120%;
    color: rgb(17, 151, 142);
}

.home-badges {
    width: 100%;
    background-color: #444;
    background-image: linear-gradient(to bottom right, #444, #777);
    border-radius: 15px;
    padding: 25px 0;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.badge {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    animation: float1 3s ease-in-out infinite;
}

.float-01 {
    animation: float1 3s ease-in-out infinite;
}

.float-02 {
    animation: float2 3s ease-in-out infinite;
}

@keyframes float1 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);

    }

    100% {
        transform: translateY(0);

    }
}

@keyframes float2 {
    0% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10px);
    }
}

.badge h4 {
    color: white;
    font-size: 80%;
    text-align: center;
    letter-spacing: 0;
    margin: 0;
    padding-top: 30px;
}

.first {
    background-color: coral;
    background-image: linear-gradient(to bottom right, coral, orange, yellow)
}

.second {
    background-color: lightseagreen;
    background-image: linear-gradient(to bottom right, rgb(57, 57, 220), rgb(54, 163, 200), lightseagreen)
}

.third {
    background-color: plum;
    background-image: linear-gradient(to bottom right, rgb(238, 63, 86), plum);
}

.fourth {
    background-color: rgb(0, 128, 85);
    background-image: linear-gradient(to bottom right, rgb(28, 168, 121), rgb(0, 128, 85), green);
}

.fift {
    background-color: rgb(1, 57, 52);
    background-image: linear-gradient(to top left, rgb(0, 51, 47), rgb(1, 77, 71), rgb(1, 125, 115));
}

@media (max-width: 500px) {
    .home-badges {
        gap: 7.5px;
    }
}

/* IMAGES */
.images-container-01 {
    width: 100%;
    margin: 0 auto;
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px;
}

.client-cover-image {
    width: 100%;
    border-radius: 5px;
    height: 175px;
    object-position: center center;
    object-fit: cover;
}

.container-image {
    padding: 15px;
    background-color: #ece8e5;
    border-radius: 5px;
}

.container-image:hover .client-cover-title {
    color: rgb(255, 103, 80);
    transition: 0.5s;
}

.visit-external-site-link {
    transition: 0.5s;
    margin-top: 100px;
}

.visit-external-site-link:hover {
    transition: 0.5s;
    font-weight: 600;
    color: rgb(0, 99, 93);
}


@media(max-width: 1061px) {
    .client-cover-image {
        height: 275px;
    }
}

/* ABOUT */

.content-logo-container {
    width: 80%;
    margin: 0 auto;
}

.content-logo {
    width: 20%;
}

/* PORTFOLIO */

.client {
    background-color: #ece8e5;
    border-radius: 25px;
    padding: 25px;
}

.client-images-container {
    width: 100%;
    margin: 0 auto;
    max-width: 1000px;
    display: grid;
    grid-template-areas: 'first second';
    grid-gap: 20px;
}

.client-collection-image {
    width: 100%;
    height: 270px;
    border-radius: 5px;
    object-position: center center;
    object-fit: cover;
}

.client p {
    width: 95%;
    margin: 15px auto;
    text-transform: none;
    letter-spacing: 1px;
}

@media(max-width: 900px) {
    .client-images-container {
        width: 80%;
        grid-template-areas: 'first' 'second';
    }
}

@media(max-width: 669px) {
    .client-collection-image {
        height: auto;
    }

    .client {
        padding: 25px 0;
    }

    .client-images-container {
        width: 90%;
    }
}

/* SERVICES */
.pillbox-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 5%;
}

.pillbox {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    margin: 25px auto;
    padding: 25px;
}

.pillbox-img-p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.pillbox-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
}

.pillbox-p {
    width: 100%;
    margin: 0 auto;
    letter-spacing: normal;
    text-transform: none;
}

.badges-with-title {
    flex-wrap: wrap;
}

.badges-with-title h4 {
    width: 100%;
    color: white;
}

@media(max-width: 718px) {
    .pillbox-container {
        gap: 15px;
    }

    .badges-with-title h4 {
        margin: 0 auto;
        width: 90%;
        padding-bottom: 15px;
    }
}


/* CONTACT */

.contact-form-container {
    max-width: 800px;
    margin: 3rem auto;
    border: 0.5px solid #9a9691;
    border-radius: 1rem;
    background-color: #beb8b2;
    transition: 0.25s;
    padding: 7px 2rem 2rem;
}

.contact-form {
    display: flex;
    flex-flow: row wrap;
    gap: 25px;
}

.contact-form-title {
    width: 100%;
    margin: 0;
    padding: 15px 0 25px;
    margin: 10px;
    color: #9a9691;
    text-align: center;
    border-bottom: 2px solid rgb(0, 99, 93);
}

.contact-form label {
    color: #615c56;
}

.contact-form .button-02 {
    margin: 25px 0;
    width: 100%;
    border-radius: 1rem;
}

.contact-form-input-div {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 15px;
}

.contact-form-input {
    padding: 0.75rem 1rem;
    color: #9a9691;
    background-color: #ddd4cb;
    border: 1px solid #9a9691;
    border-radius: 1rem;
}

.input-1,
.input-2 {
    width: calc(50% - 13px);
}

.input-3,
.input-4,
.input-5,
.form-button,
.form-terms {
    width: 100%;
}

.form-terms {
    font-size: 75%;
    text-align: center;
}

@media (max-width: 739px) {
    .contact-icons-info {
        display: block;
    }

    .contact-icons-info li {
        padding-bottom: 20px;
    }
}

@media (max-width: 549px) {

    .input-1,
    .input-2 {
        width: 100%;
    }
}

/* FOOTER */
#insert-footer {
    width: 100%;
}

.footer-container {
    margin: 0 auto;
    background-color: #333;
}

.footer-header {
    display: flex;
    justify-content: center;
    background-color: rgb(0, 99, 93);
}

.footer-header h2 {
    color: #ddd4cb;
    padding: 10px 0;
}

.footer-heading-container {
    padding: 50px 0;

}

.footer-heading {
    margin: 0;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.footer-write-to-us {
    display: flex;
    justify-content: center;
    gap: 10px;
    height: 25px;
    margin-top: 10px;
}

::placeholder {
    color: white;
    opacity: 70%;
}

.footer-write-to-us>* {
    background-color: #777;
    color: white;
    border: none;
    border-radius: 5px;
}

input[type=text] {
    min-width: 150px;
}

input[type=submit] {
    cursor: pointer;
}

.footer-dynamic {
    width: 90%;
    font-size: 120%;
    color: #ddd4cb;
    margin: 0 auto;
    display: flex;
    gap: 5%;
    /*HIDDEN*/
}

.footer-left {
    width: 30%;
    display: flex;
    flex-direction: column;
}

.footer-left a,
.footer-right a {
    color: #ddd4cb;
}

.footer-left a:hover,
.footer-right a:hover {
    color: rgb(0, 99, 93);
    font-weight: 600;
}

.footer-link {
    color: rgb(17, 151, 142);
}

.footer-link:hover {
    font-weight: 600;
    text-decoration: underline;
}

.footer-center {
    width: 30%;
}

.footer-right {
    width: 30%;
    display: flex;
    flex-direction: column;
}

.social-media-icon {
    cursor: pointer;
    width: 30px;
    transition: 0.5s;
}

.footer-p {
    margin: 10px 0 0;
    padding: 10px 0;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 120%;
}

.footer-copy {
    text-align: center;
    color: #ddd4cb;
    margin-top: 35px;
    padding-bottom: 25px;
}

@media(max-width: 669px) {
    .footer-dynamic {
        flex-direction: column;
        font-size: 100%;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        width: 100%;
        gap: 5px;
        font-size: 110%;
    }
}