/* Universal styling */
body {
    --primary-background: #eee;
}

.absolute-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}





/*#LANDING => Style rules for main landing page starts here*/
.landing {
    display: flex;
    width: 100%;
    height: 44.465vw;
    margin-top: 70px;
    background-image: url(../images/lakefront5.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-origin: 50% 50%;
    overflow: hidden;
    justify-content: flex-end;
    align-items: center;
}

.landing > .landing-wrapper {
    background: rgb(0, 0, 0, 0.3);
    gap: 16px;
    justify-content: flex-end;
    margin-bottom: 50px;
    padding: 20px 0;
    width: 80%;
    max-width: 1080px;
}

.landing h2 {
    text-align: center;
    margin: 0 auto;
    color: #333333;
    color: #fff;
    font-family: "Bodoni Moda SC", serif;
    font-size: 2.8rem;
    font-weight: 400;
    text-shadow: 0em 0.1em 0.1em rgba(0, 0, 0, 0.4);
    opacity: 0;
    animation: fade-in 1.2s forwards;
}

.landing > .showcase-img-wrapper {
    background-position: 0 50%;
}

.landing > .showcase-img-wrapper > div {
    box-shadow: -120px -120px 50px -50px #eee inset;
    border-right: 5px solid #eee;
}

.landing > .intro-texts {
    flex-direction: column;
    font-family: Helvetica, sans-serif;
    text-align: center;
}

.landing  h3 {
    text-align: center;
    color: #fff;
    text-shadow: -.70px 0 #000000, 0 .70px #000000, .70px 0 #000000, 0 -.70px #000000;
    font-size: 1.4rem;
    font-family: "Quintessential", serif;
    opacity: 0;
    margin-top: -16px;
    animation: fade-in 1.2s 0.6s forwards;
}

.underline-button {
    --opace-bg: rgba(255, 255, 255, 0.3);
    --btn-color: #fff;
    --btn-border-color: #fff;
    text-align: center;
    font-size: 23px;
    color: var(--btn-color);
    background: transparent;
    border: none;
    outline: none;
    font-family: "Cormorant SC", serif;
    border-bottom: 1px solid var(--btn-border-color);
    padding: 0 8px;
    transition: background 0.5s;
    opacity: 0;
    animation: fade-in 1.2s 1s forwards;
    cursor: pointer;
}

.underline-button:hover {
    background: var(--opace-bg);
}

@keyframes fade-in {
    from{opacity: 0} to{opacity: 1;}
}
@keyframes txt-slide-in {
    from{transform: translateX(-100%); opacity: 0}
    to{transform: translateX(0); opacity: 1;}
}

@keyframes txt-slide-in-right {
    from{transform: translateX(100%); opacity: 0}
    to{transform: translateX(0); opacity: 1;}
}

@keyframes fade-zoom {
    from{transform: scale(0) translateY(-128px); opacity: 0}
    to{transform: scale(1) translateY(0); opacity: 1}
}
/**STYLE RULES FOR MAIN LANDING PAGE ENDS HERE**/




/*Style rules for #services section starts here***/
.slide-show, #about_us {
    background-color: var(--primary-background);
    text-align: center;
}

.page-section {
    z-index: 1;
    position: relative;
    padding: 82px;
}

.page-section > h3 {
    margin-bottom: 88px;
    font-size: 2rem;
    font-family: "Cormorant SC", serif;
    text-align: center;
}

.page-section > h3 {
    filter: blur(12px);
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: filter 1.5s, opacity 1.5s, clip-path 1.5s;
    transition-timing-function: ease-out;
}

.page-section.visible > h3 {
    filter: blur(0);
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

#services {
    padding: 82px 0;
}

#services > div {
    width: calc(100% - 164px);
    margin: auto;
    background: #eee;
}

#services > div > article {
    width: 100%;
}

#services > div article > section {
    width: 50%;
}

#services > div article:nth-child(2){
    flex-direction: row-reverse;
}

#services > div article > .img-wrapper {
    background-size: cover;
    background-repeat: no-repeat;
}

#services > div article > .img-wrapper > canvas {
    width: 100%;
}

#services > div article:first-child .img-wrapper {
    background-image: url(../images/kitchen.jpg);
}

#services > div article:nth-child(2) .img-wrapper {
    background-image: url(../images/ex_pool.jpg);
}

#services > div > article > .img-wrapper > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}


#services article .desc {
    padding: 60px 4vw;
    overflow: hidden;
}


#services article .desc h2 {
    margin-bottom: 20px;
    font-size: 33px;
    opacity: 0;
    transform: translateY(24px);
    transition: transform 1s, opacity 1s;
    transition-timing-function: ease-out;
}

#services article .desc h2.visible {
    opacity: 1;
    transform: translateY(0);
}

#services article:first-child h2 {
    font-family: "Libre Baskerville", serif;
}

#services article:nth-child(2) .desc h2 {
    font-family: "Aref Ruqaa Ink", serif;
}

#services article .desc p {
    margin-bottom: 30px;
    line-height: 30px;
    font-family: "Crimson Text", serif;
    font-size: 22px;
    transition: transform 0.8s, opacity 1.8s;
    opacity: 0;
}

#services article:first-child .desc p {
   transform: translateX(-50%);
}

#services article:nth-child(2) .desc p {
    transform: translateX(50%);
}

#services article .desc p.visible {
    transform: translateX(0);
    opacity: 1;
}


#services article .desc-link {
    text-decoration: none;
    --opace-bg: rgba(0, 0, 0, 0.1);
    --btn-color: #391e15;
    --btn-border-color: #000;
    font-family: "Arizonia", serif;
    font-size: 32px;
    margin-left: auto;
    margin-top: auto;
}


/*STYLE RULES FOR ABOUT US SECTION STARTS HERE**/

#about_us {
    background-image: url("../images/port_comercial.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-color: #383536;
    font-family: garamond-premier-pro, serif;
    padding: 0;
}

#about_us > article {
    color: #fff;
    text-align: left;
    gap: 48px;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    padding: 82px;
    overflow: hidden;
}

#about_us > article > h4 {
    font-size: 32px;
    align-items: center;
    gap: 28px;
    text-align: center;
    max-width: 360px;
    font-family: "Libre Bodoni", serif;
}


#about_us > article > section {
    max-width: 85%;
    font-family: "Aref Ruqaa Ink", serif;
}

#about_us > article > section p {
    font-size: 20px;
    margin: auto;
    font-family: "Crimson Text", serif;
    font-family: "Aref Ruqaa Ink", serif;
    font-size: 22px;
    transition: transform 0.8s;
}

#about_us > article > section p:first-child {
    transform: translateX(64px);
}

#about_us > article > section p:nth-child(2) {
    transform: translateX(-64px);
}

#about_us > article > section p.visible {
    transform: translateX(0);
}

#about_us > article > section p:nth-child(2) {
    margin-top: 32px;
}



/**Show case section*/
.collab {
    gap: 30px;
    flex-wrap: wrap;
}

.collab > h3 {
    width: 100%;
    text-align: center;
}

.collab > .left {
    flex: 5;
}

.collab > .right {
    flex: 3;
    padding-bottom: 32px;
    align-items: flex-end;
}

.collab > .right h3{
    font-family: "Libre Baskerville", serif;;
    font-size: 33px;
    margin-bottom: 20px;
    transform: translateY(70px);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

.collab > .right h3.visible {
    transform: translateY(0);
    opacity: 1;
}

.collab > .right h5 {
    margin-top: auto;
}

.collab > .right p {
    font-family: "Crimson Text", serif;
    opacity: 0;
    transform: rotateY(90deg);
    transition: transform 0.5s, opacity 0.5s;
}

.collab > .right p.visible {
    opacity: 1;
    transform: rotateY(0);
}

.collab > .right .shannon_link {
    --opace-bg: rgba(0, 0, 0, 0.3);
    --btn-color: #a92c3a;
    --btn-border-color: #000;
    font-family: "Arizonia", serif;
    font-size: 28px;
    margin-top: auto;
}

.collab img {
    width: 100%;
}


.collab-gallery {
    gap: 30px;
    padding: 0 48px 37px 48px;
    flex-wrap: wrap;
}


.collab-gallery img {
    width: 100%;
}

.collab-gallery .left {
    width: calc(31.1% - calc(0.311 * 30px));
}

.collab-gallery .right {
    width: calc(68.9% - calc(0.689 *30px));
}

.link-to-published {
    --opace-bg: rgba(0, 0, 0, 0.3);
    --btn-color: #000;
    --btn-border-color: #000;
    font-family: "Cormorant SC", serif;
}


#contact-section {
    background: var(--primary-background);
    font-family: garamond-premier-pro, serif;
    flex-wrap: wrap;
    align-items: center;
}

#contact-section .coverage > h3 {
    font-size: 1.5rem;
}

#contact-section .coverage .places {
    flex-wrap: wrap;
    gap: 8px;
}

#contact-section .coverage .places .place {
    border: 1px solid #383536;
    border-radius: 4px;
    text-decoration: none;
    color:#383536;
    padding: 4px;
    flex-grow: 1;
}


#contact-section .contact-wrapper {
    display: flex;
    gap: 48px;
    max-width: 1080px;
}

#contact-section .contact-wrapper form, #contact-section .contact-wrapper .form-submitted {
    width: 480px;
    gap: 16px;
    align-items: flex-start;
}

#contact-section .contact-wrapper .form-submitted{
    color: green;
    font-family: "Crimson Text", serif;
    font-size: 22px;
    display: none;
}

#contact-section .contact-wrapper .form-submitted p:last-child {
    margin-top: 4px;
    margin-left: auto;
}

#contact-section .contact-wrapper .form-submitted.submitted {
    display: flex;
}

#contact-section .contact-wrapper form .field {
    width: 100%;
    gap: 4px;
}

#contact-section  .field > input {
    padding: 8px;
    background: transparent;
    border: none;
    border-bottom: 2px solid #383536;
    outline: none !important;
}

#contact-section .field textarea {
    resize: none;
    border: none;
    background: transparent;
    outline: none !important;
    border-bottom: 2px solid #383536;
}

#contact-section .field.textarea-field span {
    transform: none;
    top: 4px;
}

#contact-section .field span {
    position: absolute;
    left: 4px;
    top: 50%;;
    transform: translateY(-50%);
    opacity: 50%;
    transition: opacity 0.5s;
}

#contact-section .field input:focus + span, #contact-section .field textarea:focus + span{
    display: none;
}

#contact-section .field:hover > span {
    opacity: 100%;
}

#contact-section form .submit-btn {
    background:#383536;
    padding: 16px;
    border: none;
    color: #fff;
}


#contact-section .social-links   .social-link {
    font-size: 16px;
    color: #eee;
    /* background-color:  #383536; */
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 10px;
}

#contact-section .social-link .social-icon {
    font-family: cp-icon-font;
    background: black;
}

#contact-section .social-links  .social-link > .tooltip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 16px;
    opacity: 0;
    width: 200px;
    pointer-events: none;
    transition: all 0.3s;
    border-radius: 15px;
    background: #000;
    text-align: center;
    color: #fff;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
        inset -5px -5px 15px rgba(255, 255, 255, 0.1),
        5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
}

#contact-section .social-links  .social-link .icon {
    text-decoration: none;
    color: #fff;
    display: block;
    position: relative;
}

#contact-section .social-links .social-link:hover > .tooltip {
    transform: translate(-50%, calc(-100% - 32px));
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    font-size: 14px;
}

#contact-section .social-links  .social-link .layer {
    width: 48px;
    height: 48px;
    transition: transform 0.3s;
}

#contact-section .social-links  .social-link .icon:hover .layer {
    transform: rotate(-35deg) skew(20deg);
}

#contact-section .social-links .social-link .layer > span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid #000;
    border-radius: 50%;
    transition: all 0.3s;
}

#contact-section .social-links .social-link .icon .text {
    position: absolute;
    left: 50%;
    bottom: -5px;
    opacity: 0;
    font-weight: 500;
    transform: translateX(-50%);
    color: #000;
    transition: bottom 0.3s ease, opacity 0.3s ease;
}

#contact-section .social-links  .social-link .icon:hover .text {
    bottom: -35px;
    opacity: 1;
}
  
#contact-section .social-links  .social-link .icon:hover .layer span:nth-child(1) {
    opacity: 0.2;
}
  
#contact-section .social-links  .social-link .icon:hover .layer span:nth-child(2) {
    opacity: 0.4;
    transform: translate(5px, -5px);

}

#contact-section .social-links  .social-link .icon:hover .layer span:nth-child(3) {
    opacity: 0.6;
    transform: translate(10px, -10px);
}

#contact-section .social-links  .social-link .icon:hover .layer span:nth-child(4) {
    opacity: 0.8;
    transform: translate(15px, -15px);
}

#contact-section .social-links  .social-link .icon:hover .layer span:nth-child(5) {
    opacity: 1;
    transform: translate(20px, -20px);
}

#contact-section .social-links  .social-link .layer span.social-icon {
    font-size: 16px;
    text-align: center;
}

#contact-section .contact-info {
    justify-content: center;
    gap: 24px;
}

#contact-section .trustee > img {
    width: 64px;
}

#contact-section .social-links > div {
    gap: 20px;
}

/**STYLE RULES FOR FOOTER STARTS HERE*/
footer {
    padding: 16px;
    gap: 32px;
    width: 100%;
    background: #bbb;
}

footer *{
    font-size: 16px;
    font-family: "Cormorant SC", serif;
}

footer a {
    color: #000;
}





/**
#   DEVICE BREAKPOINTS STARTS HEE
#   Breakpoints are with respect to design and not specified
#   You can adjust as the design changes
**/
@media  screen and (max-width: 1200px) {
    #about_us > article section {
        max-width: 100%;
    }
}


@media screen and (max-width: 1024px){

    .page-section {
        padding: 57px 32px;
    }

    #contact-section .contact-wrapper {
        gap: 32px;
    }

    #services > div {
        gap: 32px;
    }

    #about_us > article  {
        padding: 32px;
    }

    #about_us > article > h4 {
        max-width: none;
    }

    #about_us > article > section {
        max-width: 100%;
    }
}

@media screen and (max-width: 980px){
    .landing h2 {
        font-size: 2.6rem;
    }


    #services > div article, #services > div article:nth-child(2) {
        flex-direction: column;
    }
    
    #services > div article section {
        width: 100%;
    }

    .collab, .collab-gallery {
        flex-direction: column;
        width: 100%;
        margin: auto;
    }

    .collab .right, .collab .left, .collab-gallery .right, .collab-gallery .left {
        width: 100%;
        flex: auto;
    }
}

@media  screen and (max-width: 820px) {
    #peekaboo > nav > a {
        color: black;
        font-size: 20px;
    }

    .landing h2 {
        font-size: 2.3rem;
    }

    .landing > .landing-wrapper {
        padding: 16px 0;
        gap: 8px;
    }


    #contact-section {
        height: auto;
    }

    #contact-section .contact-wrapper {
        flex-direction: column;
    }

    #contact-section .contact-wrapper form, #contact-section .contact-wrapper .form-submitted {
        width: 100%;
    }

    #about_us > article > h4 {
        font-size: 36px;
    }

    #about_us > article > h4 > img {
        width: 28px;
    }
    
    #about_us > article > p {
        font-size: 18px;
    }
}

@media screen and (max-width: 720px){
    .landing h2 {
        font-size: 2.2rem;
        line-height: 1;
    }

    #peekaboo {
        width: 100%;
    }

    .landing {
        height: calc(100vh - 80.45px);
        margin-top: 80px;
        background-size: cover !important;
        background-image: url(../images/crust_rose.png);
        background-attachment: unset;
    }

    .landing {
        justify-content: center;
    }

    .landing h3 {
        display: none;
    }

    .landing > .landing-wrapper {
        margin-bottom: 25px;
    }

    #services > div {
        width: 90%;
    }


    #top-header {
        gap: 32px;
    }

    #top-header nav {
        gap: 16px;
    }

    #about_us > article > section p {
        font-size: 20px;
    }

    footer {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }
}

@media screen and (max-width: 560px){
    #top-header > nav > a {
        font-size: 12px;
    }

    .landing > .landing-wrapper {
        padding: 8px 0;
        width: 90%;
    }

    .landing h2 {
        margin-bottom: 20px;
    }

    #services article .desc h2 {
        font-size: 28px;
    }

    #services article .desc-link {
        font-size: 28px;
    }
    
    .collab > .right h3 {
        font-size: 38px;
    }

    .collab > .right .shannon_link {
        font-size: 28px;
    }

    .collab, .collab-gallery {
        width: 100%;
    }

    #about_us > article  {
        padding: 20px;
    }

    #about_us > article > section p {
        text-align: justify;
        line-height: 1.3;
    }

    #contact-section .social-links  .social-link > .tooltip {
        display: none;
    }
}

@media screen and (max-width: 480px) {

    #top-header > nav {
        display: none;
    }

    #services article .desc h2 {
        font-size: 24px;
    }

    #services article .desc-link {
        font-size: 24px;
    }

    #services article .desc p{
        font-size: 20px;
    }
    

    .collab > .right h3 {
        font-size: 24px;
    }

    .collab > .right .shannon_link {
        font-size: 24px;
    }

    footer a{
        font-size: 18px;
    }

    #about_us article {
        padding: 16px;
    }

    #about_us > article > h4 {
        font-size: 28px;
    }
}

@media  screen and (max-width: 400px) {
    .page-section {
        padding: 57px 16px;
    }

    #services > div > article {
        width: 100%;
    }

    #services article .desc h2 {
        font-size: 22px;
    }

    #services article .desc p {
        font-size: 20px;
    }

    #services article .desc-link {
        font-size: 22px;
    }

    .collab > .right h3 {
        font-size: 22px;
    }

    .collab > .right .shannon_link {
        font-size: 22px;
    }
    
}

@media screen and (max-width: 360px) {
    .page-section > h3 {
        font-size: 1.7rem;
    }

    #services article .desc p {
        font-size: 18px;
    }
}

/**Animatios

1. Design the press page (pc and mobile)
2. Desing gallery page (pc and mobile)
3. Design technique page (pc and mobile)
4. Optimize all pages => To be done last
5. Add animations to the home page
6. Upload all files to the server
7. Message Mr Mike and tell him you're done
8. Find design canvas about me file and send it 
9: Change text to proper social media on:hover to your special icons haha!
10: link all the links to where they are supposed to go. We have dead links everywhere!!(Edited)
10: connect contact form to email and change footer phone number to his phone number 
11: The Noe Valadares recommendation in bottom left square. The paragraph only needs text-align left. 
**/