@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

*,
*::after,
*::before {
    box-sizing: border-box;
}

::selection {
    background-color: #F26B6B;
    color: #fff;
}

html {
    position: relative;
    height: 100%;
    font-family: 'Italiana', serif;
    font-family: 'Lato', sans-serif;
    -webkit-font-smooth: always;
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    position: relative;
    height: 100%;
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    color: #000;
    margin: 0;
    padding: 0;
}

h1 {
    font-family: 'Italiana';
    font-style: normal;
    font-weight: 400;
    font-size: 4.8rem;
    line-height: 140%;
    text-align: center;
    color: #222426;
}

h2 {
    font-family: 'Italiana';
    font-style: normal;
    font-weight: 400;
    font-size: 4.4rem;
    line-height: 52px;
    color: #222426;
}

h3 {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 800;
    font-size: 3.2rem;
    line-height: 38px;
    color: #222426;
}

h4 {
    font-family: 'Italiana';
    font-style: normal;
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 150%;
    color: #222426;
}

p {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 2.0rem;
    line-height: 32px;
    color: #222426;
}

.container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.center-text { text-align: center; }

.left-text { text-align: left; }

.right-text { text-align: right; }

.row {
    display: flex;
    flex-flow: row wrap;
}

.col-2 {
    flex: 0 50%;
    padding: 0;
}

.col-3 {
    flex: 0 33.3333%;
    border: 15px solid transparent;
}

/* ********************************************************
********************** Header *****************************
*********************************************************** */


.main-header {
    position: relative;
    min-height: 115px;
    background-color: #fff;
}

.logo {
    position: relative;
    top: 32px;
    left: -9px;
}

.logo span { color: #F26B6B; }

.menu-burger {
    position: absolute;
    top: 18px;
    right: -9px;
    cursor: pointer;
}

.menu-burger.active {
    width: 100%;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.25);
}


/* ********************************************************
********************** Menu OffCanvas *********************
*********************************************************** */
.main-header {
    z-index: 1;
}

.sidenav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    width: 0;
    height: 100%;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 100px;
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.25);
  }
  
  .sidenav a {
    display: block;
    font-family: 'Italiana', serif;
    font-size: 2.8rem;
    color: #222426;
    text-decoration: none;
    padding: 8px 8px 25px 32px;   
    transition: all 0.3s;
  }

  .sidenav-anima a:hover {
    color: #F20519;
    transition: all 0.3s;
  }

  .sidenav-anima a:hover {
    transform: scale(0.9);
  }

  .closebtn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    opacity: 1;
  }

  .closebtn:hover {
    opacity: 0.5;
    transition: all 0.3s;
  }

  #main {
    font-size: 3.2rem;
    color: #222426;
    padding: 16px;
    transition: margin-left .5s;
    cursor: pointer;
  }

  .icons-offCanvas {
    position: relative;
    top: 300px;
    display: flex;
    justify-content: center;
    
  }

  .icons-offCanvas a {
    padding: 0;
  }



/* ********************************************************
********************** HOME - About ***********************
*********************************************************** */

.about { margin-top: 45px; }

.about p:first-child {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 24px;
    letter-spacing: 7.5px;
    color: #222426;
}

.about span {
    display: block;
    width: 16px;
    height: 2px;
    background-color: #D9D9D9;
}

.about-me { margin-top: 2%; }

.about-me p,
.about-me span { margin-bottom: 20px; }

.about-me button { margin-top: 40px; }

.btn {
    width: 200px;
    height: 44px;
    font-family: 'Lato', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #F20519;
    border: 1px solid #F20519;
    border-radius: 16px;
    border-color: #F20519; 
    margin-top: 25px;
    padding-top: 7px;
}

.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: #F20519;
    border-color: #F20519;
    transform: scale(0.9);
    transition: all 0.3s ease-in;
}

.icons-top {
    position: relative;
    top: 32px;
    left: 20px;
    opacity: 1;
    cursor: pointer;
}

a { text-decoration: none; }

.icon-1:hover,
.icon-2:hover,
.icon-3:hover { opacity: 0.5; }

.lines {
    position: absolute;
    top: -75px;
    right: 0;
    z-index: -1;
    opacity: 0.6;
}


/* ********************************************************
********************** Portfolio **************************
*********************************************************** */

.portfolio { margin-top: 120px; }

.title-port { margin-bottom: 90px; }

.content-text { margin-top: 8%; }

.content-text:first-child { padding-right: 10px; }

.button-proj-left p {
    position: relative;
    top: 10px;
    left: 0;
    width: 119px;
    height: 40px;
    font-family: Lato;
    font-size: 14px;
    line-height: 1.25rem;
    border: solid 1px #222426;
    border-radius: 16px;
    background-color: #fff;
    padding: 12px 0 0 18px;
}

.button-proj-left p:hover {
    color: #fff;
    background-color: #222426;
    border: solid 1px #fff;
    transition: all 0.3s;
}

.button-proj p {
    position: relative;
    top: 20px;
    right: -80%;
    width: 119px;
    height: 40px;
    font-family: Lato;
    font-size: 14px;
    line-height: 1.25rem;
    border: solid 1px #222426;
    border-radius: 16px;
    background-color: #fff;
    padding: 12px 0 0 18px;
}

.button-proj p:hover {
    color: #fff;
    background-color: #222426;
    border: solid 1px #fff;
    transition: all 0.3s;
}





/* ********************************************************
********************** Contact ****************************
*********************************************************** */

.contact { 
    margin-top: 160px;
    background-color: #F2F2F2;    
    padding-top: 25px;       
}

.contact p { margin-bottom: 2rem; }

.contact img { vertical-align: sub; }

.image { margin-left: 10px; }

.text-contact { padding: 200px 34px; }

.text-contact img { padding-right: 30px; }

.text-contact a {
    margin-top: 0;
}

.bar-contact {
    display: flex;
    max-width: 403px;
    height: 1px;
    background-color: #000000;
    margin-bottom: 25px;
}

#img { margin-left: 1px;}

#see {
    position: relative;
    top: -26px;
    left: 54px;
    cursor: pointer;
}

#see:hover { 
    opacity: 0.5;
    transition: all 0.4s; 
}


/* ********************************************************
***********************************************************
********************* SUPERLIST - Title ******************* 
***********************************************************
*********************************************************** */

.main-title {
    position: absolute;
    display: contents;
}

.main-title img {
    position: relative;
    top: -328px;
    z-index: -10;
    display: flex;
    margin: 0 auto;  
}

.main-title h1 { margin: 50px 0; }

.menu-title a {
    display: inline-flex;
    font-family: 'Italiana';
    font-style: normal;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 52px;
    color: #222426;
    text-decoration: none;
    padding: 20px;
    transition: all 0.3s ease-in; 
}
.menu-title a:hover { 
    color: #F20519;
    transition: all 0.3s ease-in; 
    transform: scale(0.9);
}

.bg-lines { opacity: 0.4; }



/* ********************************************************
********************** The concept ************************
*********************************************************** */

.concept {
    position: relative;
    top: -183px;
}

.concept h2 { margin-bottom: 16px; }

.concept p { padding-top: 16px; }

.video-super {
    position: relative;
    top: 60px;
    display: flex;
    max-height: 548px;
    justify-content: center;
    margin-top: 15px;
}

.video-super video {
    position: relative;
    width: fit-content;
    height: 570px;
}

/* ********************************************************
********************** The problem / The solution *********
*********************************************************** */

.problem-col h2,
.solution-col h2,
.problem-super h2,
.problem-found h2,
.develop h2 { margin-bottom: 12px; }

.prob-1 { padding-right: 52px; }

.prob-1 p:nth-child(odd) { margin-bottom: 25px; }

.prob-2,
.prob-4,
.sol-2,
.prob-foud-2,
.sol-2 { padding-left: 52px; }

.sol-2 {
    position: relative;
    top: 10px;
}

.prob-2,
.prob-3,
.prob-4 {
    position: relative;
    top: 55px;
}

.ans {
    font-weight: 700;
    margin: 0;
}

.solution { margin-top: 160px; }

.solution-col,
.solution-col img { padding-bottom: 80px; }

.solution p+p,
.solution-found p+p {
    font-size: 1.8rem;
    margin-left: 25px;
}

/* ********************************************************
********************** Approach ***************************
*********************************************************** */

.prob-foud-2 {
    position: relative;
    top: 5px;
}

.approach { background-color: #F2F2F2; }

.approach h2 { margin-bottom: 22px; }

.ap-text { padding: 80px 0; }

.ap-text p:last-child { margin-bottom: 0; }

.ap-img {
    display: block;
    margin: 0 auto;
}


/* ********************************************************
***********************************************************
********************* FOUDATION *************************** 
***********************************************************
*********************************************************** */

.concept img,
.approach-2 {
    position: relative;
    top: 90px;
    display: block;
    margin: 0 auto;
    width: 700px;
}

.problem-found { margin-top: 100px; }

.prob-foud-1 p { margin-bottom: 5px; }

.solution-found { margin-top: 150px; }

.approach-2 { top: -10px; }

.col-foud img {
    width: 340px;
    height: auto;
}

.col-foud div:first-child {
    text-align: end;
    padding: 5px 5px 0 0;
}

.col-foud div:last-child {
    text-align: start;
    padding: 5px 0 0 13px;
}

.margin-up { margin-top: 150px; }

/* ********************************************************
***********************************************************
********************* HOUSE PLANNER *********************** 
***********************************************************
*********************************************************** */

.develop { margin: 24px 0 145px 0; }

.dev1,
.dev2,
.dev3,
.dev4 { margin-top: 80px; }

.dev1 { padding: 55px 55px 0 0; }

.dev2,
.dev4 { 
    display: flex;
    justify-content: end;}

.video-house video {
   
    display: block;
    max-height: 400px;
    margin: 0 auto;
}


/* ********************************************************
********************** Footer / button-up *****************
*********************************************************** */

.button-up {
    background-color: #f2f2f2;
    padding-top: 150px;
}

.up {
    position: absolute;
    left: 48%;
    margin-bottom: 90px;
    cursor: pointer;
}

.up-hover {
    position: relative;
    left: 48%;
    opacity: 0;
    margin-bottom: 90px;
}

.up-hover:hover {
    opacity: 1;
    transition: all 0.3s;
}

.bg {
    background-color: #F2F2F2;
}

.main-footer {
    position: absolute;
    width: 100%;
    min-height: 238px;
    background-color: #222426; 
}

.main-footer p {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 130%;
    color: #8C8C8C;
}

.main-footer ul { display: inline-flex; }

.bar-footer {
    display: flex;
    max-width: 100%;
    height: 1px;
    background-color: #D2D5DA;
    margin: 80px 24px 24px 24px;
}

.wh { color: #fff;}

.col-3 span { color: #F26B6B; }

.col-3 a {
    display: flex;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 130%;
    align-items: center;
    color: #FFFFFF;
    border-right: 24px solid transparent;
    cursor: pointer;
    text-decoration: none;
}

.col-3 a:hover { color: #8C8C8C; }

.icons {
    display: flex;
    justify-content: end;
}

.icons img {
    max-width: 44px;
    height: auto;
}

.icons img:hover { opacity: 0.5; }


/* ********************************************************
***********************************************************
********************* MEDIA QUERIS ************************ 
***********************************************************
*********************************************************** */


@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }



@media (min-width: 1300px) {
    html { font-size: 64%; }
}

@media (max-width: 1300px) {
    html { font-size: 62,5%; }
}

@media (max-width: 1200px) {
    html { font-size: 60%;} 

    .button-proj p { right: -78%; }

    .main-title h1 { margin: 40px 0; }

    .content-text { margin-top: 7%; }

    .text-contact { padding: 170px 34px; }

    .col-3 { border: 4px solid transparent; }
    
    .prob-3,
    .sol-1 { padding-right: 55px;}

    .prob-2 { top: 78px; }
    
    .sol-2 { top: -4px; }

    .ap-img { width: 800px; }

    .dev1,
    .dev3 { padding-right: 8px;}

    .dev2,
    .dev4 { padding-left: 8px;}

}

@media (max-width: 1090px) {
    html { font-size: 57%; }

    .button-proj p { right: -76%; }

    .text-contact { padding: 160px 34px; }

    .ap-img { width: 700px; }

    .concept img { width: 600px; }

    .prob-2 { top: 83px; }

    .content-text { padding-right: 8px; }

    .video-super video { height: 450px; }

    .bar-footer { margin: 80px 24px 48px 24px; }

}

@media (max-width: 992px) {
    html { font-size: 52%; }

    .button-proj p { right: -74%; }

    .content-text { margin-top: 5%; }

    .concept img { width: 500px; }

    .button-proj-left p,
    .button-proj p { top: 10px; }
   
    .col-3 { border: 0; }

    .problem-super .col-2,
    .solution-col .col-2,
    .develop .col-2 { flex: 0 100%; }

    .prob-1 { padding-right: 0; }

    .sol-2 { padding-left: 0; }
    
    .prob-2,
    .prob-4,
    .prob-3,
    .sol-1 {
        position: relative;
        top: 40px;
        display: flex;
        justify-content: center;
        padding: 40px 0;
    }

    .problem-super .order1,
    .solution .order1,
    .solution-found .order1 {order: 1;}

    .problem-super .order2,
    .solution .order2,
    .solution-found .order2 {order: 2;}

    .problem-super .order3 {order: 3;}

    .ap-img { width: 600px; }

    .dev1 { padding: 0;}

    .dev2,
    .dev3,
    .dev4 {
        display: flex;
        justify-content: center;
        margin-top: 90px;
    }

    .problem-found-1 p+p { line-height: 0; }

    .prob-foud-2 { top: 35px; }

    .solution-found { margin-top: 120px; }
}



@media (max-width: 890px) {
    .button-proj p { right: -72%; }

    .text-contact { padding: 130px 34px; }

    .col-3 a { border-right: 14px solid transparent; }
}



@media (max-width: 825px) {
    .button-proj p { right: -70%; }

    .text-contact { padding: 112px 34px; }

    .lines {
        width: 280px;
        height: auto;
    }

    .bar-contact { margin-bottom: 16px; }

    .text-contact a { margin-top: -16px; }

    .bar-footer { margin: 60px 24px 56px 24px; }

    .col-3 a { border-right: 8px solid transparent; }
}



@media (max-width: 768px) {
    html { font-size: 50%; }

    p { line-height: 25px; }

    .container { padding: 0 40px; }

    .lines {
        right: -16px;
        width: 170px;
        height: auto;
    }

    .button-proj p { right: -75%; }

    .button-proj-left p, 
    .button-proj p {
        top: 0;
        width: 92px;
        height: 34px;
    }

    .button-proj-left p,
    .button-proj p {
        padding: 10px 0 0 8px;
    }

    .about p { margin-bottom: 12px; }

    .btn { width: 145px; }

    .icons-top {
        top: 16px;
        left: 4px;
    }

    .content-text { margin-top: 6%; }

    .content-text h4 { font-size: 200%; }

    .content-text p { font-size: 120%; }

    .portfolio { margin-top: 100px; }

    .portfolio h4 { line-height: 125%; }

    .contact .container { padding: 0 10px; }

    .text-contact { padding: 79px 16px; }

    .text-contact img { padding-right: 12px; }

    #see {
        top: -23px;
        left: 37px;
    }

    .main-footer .row>* { padding-right: 0; }

    .main-footer .container { padding: 0 12px; }

    .icons { padding-bottom: 8px; }

    .main-title h1 { margin: 30px 0; }

    .main-title img {
        top: -256px;
        width: 250px;
        height: auto;
    }

    .menu-title a { padding: 10px; }

    .dev1 { margin-top: 35px; }

    .problem-found .col-2,
    .col-foud .col-2 { flex: 0 100%; }

    .problem-found { margin-top: 0; }

    .prob-foud-2 {
        top: 60px;
        padding-left: 0;
    }

    .solution-found { margin-top: 180px; }

    .sol-1 { top: 20px; }

    .solution-col img { padding-bottom: 50px; }

    .solution { margin-top: 90px; }

    .col-foud div:first-child,
    .col-foud div:last-child {
        text-align: center;
        padding: 0;
        margin-bottom: 10px;
    }
}



@media (max-width: 690px) {
    .button-proj p { right: -71%; }
}



@media (max-width: 610px) {
    .button-proj p { right: -68%; }

    .content-text { margin-top: 4%; }
}



@media (max-width: 600px) {
    html { font-size: 45%; }

    .container { padding: 0 25px; }
  
    .lines {
        top: -12%;
        right: 20%;
        width: 132px;
    }

    .btn {
        width: 130px;
        height: 40px;
    }

    .icons-top {
        top: 6px;
        left: -4px;
    }

    .about .col-2 { flex: 0 100%; }

    .about .col-2:nth-child(2) img {
        display: block;
        max-width: 300px;
        margin: auto;
    }

    .about .col-2:last-child { margin-top: 50px; }

    .portfolio .col-2 { flex: 0 100%; }
   
    .portfolio img {
        display: block;
        max-width: 80%;
        margin: auto;
    }

    .portfolio .col-2:nth-child(2), 
    .portfolio .col-2:nth-child(3) { padding-bottom: 70px; }

    .title-port { margin-bottom: 60px; }

    .title-port h1,
    .title-port p { text-align: start; }


    .content-text h4,
    .content-text p {
        text-align: center;
        margin: 10px 12px;
    }

    .content-text div { display: none; }

    .content-text h4 { font-size: 250%; }

    .content-text p { font-size: 150%; }

    .contact { margin-top: 100px; }

    .contact .col-2 { flex: 0 100%; }

    .image {
        display: block;
        max-width: 200px;
        margin: auto;
    }

    .bar-contact { 
        display: block;
        max-width: 300px;
        margin: auto auto 25px auto;
    }

    #order-1 {order: 1;}
    #order-2 {order: 2;}
    #order-3 {order: 3;}
    #order-4 {order: 4;}
    #order-5 {order: 5;}
    #order-6 {order: 6;}

    .text-contact { padding: 20px 8px 60px 8px; }

    .text-contact h4 {
        display: flex;
        justify-content: center;
    }

    .text-contact a {
        display: block;
        margin: auto;
    }

    #location {
        display: flex;
        justify-content: center;
    }

    #location img,
    #email img { max-width: 30px; }

    #email { text-align: center; }

    #img { margin-left: -189px; }

    #see { left: 8px; }

    .up,
    .up-hover { 
        left: 47%;
        width: 30px;
        height: auto;
        margin-bottom: 60px;
    }

    .margin-up { margin-top: 60px; }

    .bar-footer { margin: 40px 24px 30px 24px; }

    .main-footer .col-3 {
        flex: 0 100%;
        padding: 0;
    }

    .main-footer .col-3 li { border-right: 8px solid transparent; }

    .main-footer ul { padding: 0; }

    .main-footer p { margin-top: 16px; }

    .logo-footer {
        display: flex;
        justify-content: center;
        margin-bottom: 8px;
    }

    .icons {
        justify-content: center;
        margin-bottom: 12px;
    }

    .icons img { max-width: 36px; }

    #or1 { order: 1; }
    #or2 { order: 2; }
    #or3 { order: 3; }

    .menu-title a {
        display: block;
        padding: 0;
    }

    .main-title img {
        top: -377px;
        width: 215px;
    }

    .lines-600 img {
        top: -332px;
        width: 215px;
    }
  
    .concept { top: -150px; }

    .video-super video { height: 360px; }

    .concept img { width: 380px; }

    .video-house video { max-height: 270px; }

    .button-up { padding-top: 70px; }

    .concept img { top: 50px; }

    .col-foud img { width: 279px; }

    .develop { margin-top: 0; }
    
}



@media (max-width: 430px) {
    html { font-size: 43%; }

    .up,
    .up-hover {
        left: 46%;
    }

    .concept img { width: 270px; }
   
    #img { margin-left: -182px; }

}