@font-face {
    font-family: 'Poppins';
    src: url('../fnt/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fnt/poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fnt/poppins/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fnt/poppins/Poppins-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

:root {
    background-color: var(--secondary-1);

    font-size: 16px;
    font-family: Poppins;

    scroll-behavior: smooth;

    /* COLORS */

    --primary-1: #efefef;
    --primary-2: #e0e0e0;
    --primary-2t: #e0e0e074;
    --primary-3: #bbbbbb;

    --secondary-1: #0e0e0e;
    --secondary-1t:rgba(14, 14, 14, 0.444);
    --secondary-2: #171616;
    --secondary-3: #2f2a2a;
    --secondary-3t: #5f5d5dbf;
    --secondary-4: #999999;
    --secondary-5: #171616;

    --accent-1: #6faade;
    --accent-1t: #71dce43b;
    --accent-2: #bbaabd;
    --accent-3: #857785;
    --accent-4: #4b354b;
}

@media (max-width: 1024px) {
    :root {
        font-size: 8px;
    }
}

/* GENERAL */
* {
    .row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .box {
        flex: 1;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .down {
        margin-top: 1rem;
    }
    
    .big {
        font-size: 1.2em;
    }

    .narrow {
        width: 70%;
    }

    .inline {
        padding-inline: 10rem;
    }

    @media (max-width: 1024px) {
        .narrow {
            width: 90%;
        }
    }

    .center {
        margin: auto;
    }

    .sticky {
        position: sticky;
    }

    .line {
        width: 40%;
        border: none;

        margin: 3rem auto;

        height: 1px;
        background-color: var(--primary-2t);

        color: var(--primary-3);
    }

    html, body {
        font-size: 16px;

        margin: 0;
        padding: 0;
        max-width: 100%;
        
        overflow-x: hidden !important;
    }

    @media (max-width: 800px) {
        html, body {
            font-size: 14px;
        }

        .mobile-flip {
            flex-direction: column-reverse;
        }
    }

    footer {
        background-color: var(--secondary-2);
        color: var(--primary-2);
        padding: 1rem;
    }

    section h2 {
        font-size: 2em;
        margin-left: 3rem;
    }

    section a {
        color: var(--accent-1);
    }

    main section {
        background-color: var(--primary-1);
        padding: 0.6rem;
        padding-inline: 6rem;
    }

    @media (max-width: 1024px) {
        main section {
            padding-inline: 1rem;
        }
    }

    main section > div {
        margin: auto;
        max-width: 1200px;
    }

    .icon {
        margin-right: 1rem;
        margin-bottom: -0.4rem;
    }

}

/* MAIN */
* {

    picture {
        z-index: -1;
    }

    picture img {
        position: absolute;
    }

    .responsive-image {
        min-width: 100%;
        min-height: 1000px;

        background-attachment: fixed;
    }


    @media (max-width: 1024px) {
        .responsive-image {
            width: auto;
            height: 100vh;
            object-position: center;
        }
    }

    .btn-cta {
        font-family: Poppins;
        border: 1px solid var(--primary-1);
        border-radius: 1.4rem;
        padding: 0.8em 1.6em;
        color: var(--primary-1);
        background-color: var(--secondary-1); 
        font-size: 1.2em;

        transition: 0.2s;
        text-decoration: none;
    }

    .btn-cta:hover {
        background-color: var(--secondary-3);
        border-color: var(--primary-3);

        border-radius: 1.8rem;

        cursor: pointer;
    }

    #front .btn-container {
        margin-top: 4rem;
    }

    main#home .content {
        padding: 10rem 5rem 23rem 5rem;

        color: var(--primary-1);

        max-width: 800px;
        min-height: 40vh;
    }

    main#home picture {
        position: absolute;

        width: 100%;
        height: 100%;

        filter: brightness(0.4);
    }

    main#home h1 {
        font-size: 3em;

        margin: 1rem 0;
    }

    main#home p {
        font-size: 1.3em;
    }

}

/* HOME - SERVICES */
* {
    #services {
        padding: 0.5rem 0;

        background-color: var(--secondary-5);
    }

    #services h1 {
        text-align: center;
        color: var(--primary-2);
        font-size: 2em;
    }

    #services h2 {
        margin: 0;
        width: 100%;

        background-color: black;
        background-image: linear-gradient(
            60deg, 
            var(--accent-1t) 15%, 
            transparent 16%, 
            transparent 48%,
            rgba(0, 225, 255, 0.219) 49%,
            var(--accent-1t) 50%, 
            var(--accent-1t) 65%, 
            rgba(0, 225, 255, 0.219) 66%,
            transparent 70%, 
    transparent
        );
        background-size: 3rem 5rem;
        color: #ffffff;

        font-size: 2.6em;
        font-weight: 400;
        text-align: center;

        text-shadow: 1px 1px 1px black;

        border-bottom: 3px solid var(--accent-1t);
        border-top: 3px solid var(--accent-1t);
    }

    #services h3 {
        color: var(--primary-2);
        text-shadow: 1px 1px 5px var(--secondary-1);
        margin-top: auto;
        margin-left: 2rem;

        font-size: 2em;

        position: relative;

        z-index: 2;

        font-weight: 200;
    }

    #services .row {
        width: 100%;
        padding: 0;
    }

    #services .box {
        border-radius: 1rem;
        min-width: 40%;
        width: fit-content;
        max-width: 700px;
        min-height: 500px;
        height: fit-content;
        max-height: 50%;

        background-position: center;
        background-size: cover;

        margin: 0.6rem;
        cursor: pointer;

        /* box-shadow: 0px 0px 15px 2px var(--secondary-1t); */
        border: 2px solid var(--primary-2t);
        overflow: hidden;

        transition: 0.2s;
        filter: grayscale(1) ;
    }

    @media (max-width: 1024px) {
        #services .box {
            margin: 0.5rem auto;
        }
    }

    #services .box .info {
        opacity: 0;
        position: absolute;
        padding: 2rem;
        margin-top: 1rem;
        background-color: var(--secondary-1);
        color: var(--primary-2);
        border-radius: 1rem;
        font-size: 0.8em;
        margin-inline: 1rem;
    }

    #services .box .info p {
        max-width: 80%;
        margin: auto;
    }

    #services .box:hover .info {
        font-size: 1.2em;
        animation: flip 0.4s forwards;
    }

    

    @media (max-width: 1024px) {
        #services .box {
            min-width: 80%;
        }

    }

    #services .box:hover {
        /* background-position-y: 60%;
        background-position-x: 65%; */
        filter: grayscale(0.5);
    }

    #services .box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
        transition: 0.2s;
    }

    #services .box:hover::before {
        background: rgba(0, 0, 0, 0.3);
    }

    #services .box#residential {
        flex: 4;
        background-image: url(../img/services/residential-construction.jpeg);
    }

    #services .box#interior {
        background-image: url(../img/services/interior-construction.jpeg);
        transition: 2s;
    }

    #services .box#commercial {
        flex: 4;
        background-image: url(../img/services/industrial-commercial.jpg);
    }

    #services .box#retail {
        background-image: url(../img/services/retail-construction.jpeg);
    }
    
    #service-compare-1 figure .before {
        background-image: url(../img/services/stairs-before2.jpeg);
    }
    
    #service-compare-1 figure.after {
        background-image: url(../img/services/interior-construction.jpeg);
    }
    
    #service-compare-2 figure .before {
        background-image: url(../img/services/door-before.jpeg);
    }
    
    #service-compare-2 figure.after {
        background-image: url(../img/services/door-after1.jpeg);
    }
}

@keyframes flip {
    0% {
        opacity: 0;
        transform: rotate3d(0, 1, 0, 160deg) scale3d(0.2, 0.2, 0.2);
    }
    100% {
        opacity: 0.9;
        transform: rotate3d(0, 1, 0, 360deg) scale3d(1, 1, 1);
    }
}

/* WORK */
* { 

    #work {
        background-color: var(--secondary-3);
    }

    #work .row {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #work .box, #work figure {
        margin: 1rem auto;
    }

    #work figure {
        filter: grayscale(0.4);
    }

    #work figure:hover {
        filter: grayscale(0.1);
    }

    #work {
        color: var(--accent-3);
    }

    #work h2 {
        color: var(--accent-2);
        text-align: center;
        margin: 1rem;
    }

    #work .btn-container {
        width: 40%;
        max-width: 1000px;
        margin: 2rem auto;

        text-align: center;
        border-radius: 1.4rem;

        border: 2px solid var(--primary-2t);
        filter: brightness(0.7);

        background: url(../img/services/interior-construction.jpg);
        background-position: bottom;
        background-size: 120%;
        
        transition: 0.5s;
    }

    #work .btn-portfolio {
        display: flex;
        justify-content: center;

        width: 100%;
        padding: 2rem 0;

        font-family: Poppins;
        color: var(--primary-1);
        background-color: var(--secondary-1);
        font-size: 1.8em;

        border-radius: 1.4rem;
        transition: 0.2s;
        text-decoration: none;
    }

    @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        #work .btn-portfolio {
          -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(15px);
          background-color: rgba(255, 255, 255, 0);  
        }
      }

    #work .btn-portfolio::before {
        content: "View our full portfolio";
    }

    #work .btn-portfolio:hover {
        /* background-color: var(--secondary-3); */
        border-color: var(--primary-3);

        border-radius: 1.8rem;

        cursor: pointer;
        backdrop-filter: blur(3px);
    }

    #work .btn-container:hover {
        border-radius: 2rem;
    }

    #work .comparison {
        margin: 0;
    }

    #work .comparison .after {
        border: 2px solid rgba(255, 255, 255, 0.336);
    }

}

/* CONTACT */
* {

    #contact {
        background-color: var(--primary-2);
    }

    #contact h2 {
        margin-left: 0;
        text-align: center;
        color: #6faade;

        font-size: 2.5em;
    }

    #contact #email {
        display: flex;

        width: 400px;
        height: 400px;

        margin: 4rem auto;

        text-align: center;

        background-color: var(--accent-1);
        border-radius: 14rem;

        transition: 0.2s;
        box-sizing: border-box;
    }

    #contact #email:hover {
        cursor: pointer;
        background-color: #518bbd;
        animation: oscillates 0.3s both;
    }

    #contact #email img {
        display: flex;
        margin: auto;
        width: 70%;

    }
}

@keyframes oscillates {
  0% {
    border: none;
  }
  10% {
    border: 3px solid var(--accent-1t);
  }
  20% {
    border: 6px solid var(--accent-1t);
  }
  30% {
    border: 9px solid var(--accent-1t);
  }
  40% {
    border: 12px solid var(--accent-1t);
  }
  50% {
    border: 15px solid var(--accent-1t);
  }
  60% {
    border: 18px solid var(--accent-1t);
  }
  70% {
    border: 21px solid var(--accent-1t);
  }
  80% {
    border: 24px solid var(--accent-1t);
  }
  90% {
    border: 27px solid var(--accent-1t);
  }
  100% {
    border: 30px solid var(--accent-1t);
  }
}

/* PORTFOLIO */
* {
    #portfolio {
    }

    #portfolio h1 {
        text-align: center;
        color: var(--primary-2);
        font-size: 2em;
    }

    #portfolio-compare-1 figure .before {
        background-image: url(../img/services/door-before.jpeg);
    }
    
    #portfolio-compare-1 figure.after {
        background-image: url(../img/services/door-after1.jpeg);
    }

    #portfolio-compare-2 figure .before {
        background-image: url(../img/services/stairs-before2.jpeg);
    }
    
    #portfolio-compare-2 figure.after {
        background-image: url(../img/services/interior-construction.jpeg);
    }
}

/* ABOUT */
* {
    #about {
        background-color: var(--primary-1);
    }

    #about h1 {
        text-align: center;
        color: var(--primary-2);
        font-size: 2em;

        padding: 3rem;

        background-color: var(--secondary-1);
    }

    #about p {
        font-size: 1.5em;
    }

    #about section {
        margin: auto;
        padding-inline: 10rem;
    }

    @media (max-width: 1024px) {
        #about section {
            padding-inline: 1rem;
        }
    }

    #about #values {
        /* background-color: #c0f9eb; */
    }

    #values .box {

        padding: 0 0.5rem;
        padding-inline: 4rem;
        margin: 0.25rem 0.5rem;

        padding-top: 0;
        margin-top: 0;

        min-width: 50px;
        max-height: 60px;


        text-align: center;
        align-items:center;
        font-size: 1em;
    }
    
    #values-list {
        border: 1px dashed var(--secondary-1);
        border-radius: 1rem;

        padding-bottom: 2rem;
        margin: 2rem 0;
    }

    #values-list::before {
        content: "Our values";
        position: relative;
        padding: 0.6rem;

        left: 10px;
        top: -12px;
        background-color: var(--primary-1);
    }

    #values .box h3 {
        color: var(--secondary-1);
    }
}

/* FOOTER */ 
* {
    footer {
        padding: 2rem;
    }

    footer a {
        color: var(--accent-1);
    }

    footer .box p {
        margin: 0;
        padding: 0;
    }

    footer .box {
        margin: 1rem;
        min-width: 300px;
    }
}

/* SERVICES */
* {
    #services-a {
        background-color: var(--primary-2);

    }

    #services-a section {
        background: none;
    }

    #services-a h1 {
        font-size: 2em;
    }

    #services-list {
        margin: 3rem auto;
    }

    #services-list .box {
        min-width: 20%;
        min-height: 100px;

        text-align: center;

        color: var(--primary-1) !important;
        text-shadow: 2px 2px 12px var(--secondary-1);

        border: 1px solid black;
        border-radius: 1rem;

        margin: 2rem;

    }

    #services-list .box:nth-child(1) {
        background: url(../img/services/industrial-construction.jpg);
    }

    #services-list .box:nth-child(2) {
        background: url(../img/services/industrial-construction.jpg);
    }

    #services-list .box:nth-child(3) {
        background: url(../img/services/industrial-construction.jpg);
    }

    #services-list .box:nth-child(4) {
        background: url(../img/services/industrial-construction.jpg);
    }

    #services-list .box:nth-child(5) {
        background: url(../img/services/industrial-construction.jpg);
    }

    #services-list .box:nth-child(6) {
        background: url(../img/services/industrial-construction.jpg);
    }

    #services-list .box:nth-child(7) {
        background: url(../img/services/industrial-construction.jpg);
    }

    #services-list .box:nth-child(8) {
        background: url(../img/services/industrial-construction.jpg);
    }

    #services-list .box:nth-child(9) {
        background: url(../img/services/industrial-construction.jpg);
    }

    #services-list .box:nth-child(10) {
        background: url(../img/services/industrial-construction.jpg);
    }

    #services-list .box:nth-child(11) {
        background: url(../img/services/industrial-construction.jpg);
    }

    #services-list .box:nth-child(12) {
        background: url(../img/services/industrial-construction.jpg);
    }
}