/*************************************************************************
              Keyframes for animated text and images
              parasyti texta  services gallery index ir contacts pakeisti nuotraukas.
              website loading speed slow.
              hero image letai krauna.

  ****************************************************************************/

  @keyframes moveInLeft {
    0% {
      opacity: 0;
      transform: translateX(-10rem); }
    80% {
      transform: translateX(1rem); }
    100% {
      opacity: 1;
      transform: translate(0); } }
  
  @keyframes moveInRight {
    0% {
      opacity: 0;
      transform: translateX(10rem); }
    80% {
      transform: translateX(-1rem); }
    100% {
      opacity: 1;
      transform: translate(0); } }
  
  @keyframes moveInBottom {
    0% {
      opacity: 0;
      transform: translateY(3rem); }
    100% {
      opacity: 1;
      transform: translate(0); } }
  
  
       /*************************************************************************
                Typography and  custom classes  and header styles
    ****************************************************************************/
        *,
  *::after,
  *::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit; }
  
  html {
    font-size: 82.5%; }
    @media only screen and (max-width: 75em) {
      html {
        font-size: 56.25%; } }
    @media only screen and (max-width: 56.25em) {
      html {
        font-size: 50%; } }
    
        .footer {
          margin: 0; }
        
        #main-footer {
          height: 100%;
          width: auto;
          background-color: #383A37 !important; }
  body {
    box-sizing: border-box; }
    @media only screen and (max-width: 56.25em) {
      body {
        padding: 0; } }
  
  p {
    color: rgb(255, 255, 255);
  }
  
  img {
    box-shadow: 3px;
    color: black; }
    .header {
      height: 100vh;
      background-image: linear-gradient(to left bottom, rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.699)), url(https://images.unsplash.com/photo-1704391893814-57c02fa3f67f?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
      background-size: cover;
      background-position: bottom;
      position: relative;
      
      
    
    
    }
    
      
      .header__logo-box {
        position: absolute;
        top: 4rem;
        left: 4rem; }
      .header__logo {
        height: 3.5rem; }
      .header__text-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center; }
    
  
  body {
    font-family: 'Montserrat', sans-serif;
  
    font-size: 2.2rem;
    /*font-size: 16px;*/
    line-height: 1.7;
    overflow-x: hidden;
    box-sizing: border-box;
  
   
   background-color: #000000;
  
   }
  
   
  .color-gold {
    color: #929134;
  }

  .color-blacksm {
    color:#000000;
  }
  
  h3 {
    font-size: 1.4em;
    font-weight: 700;
    color: rgb(255, 255, 255); }
    .heading-primary {
      color: rgb(233, 194, 20);
  
      text-transform: uppercase;
      backface-visibility: hidden;
      margin-bottom: 2rem; }
      .heading-primary--main {
        
        display: block;
        font-size: 1.8rem;
        letter-spacing: 2rem;
        }
  
  
  
           /*************************************************************************
                Fixed background images disabled on mobile and hero image headings
    ****************************************************************************/
        @media only screen and (max-width: 37.5em) {
          .heading-primary--main {
            animation: moveInLeft 2s ease-out;
            letter-spacing: 0.1rem;
            font-size: 0.9em;
           }
            
            #page-header {
            background-repeat: no-repeat;
              background-position: center center;
              background-size: cover;
            }
   
  
          #vienas {
            background-image: url('../img/IMG_0711.JPG');
           
            background-position: center center;
            background-size: cover;
            height: 50vh;
            position: relative;
            background-repeat: no-repeat;
          }
          #du {
            background-image: url('../img/rockwool.jpg');
          
            background-position: center center;
            background-size: cover;
            height: 50vh;
            position: relative;
            background-repeat: no-repeat;
          }
          #trys {
            background-image: url('../img/hs8.jpg');
          
            background-position: center center;
            background-size: cover;
            height: 50vh;
            position: relative;
            background-repeat: no-repeat;
          }
          #keturi {
            background-image: url('../img/brickslipexample.jpg');
         
            background-position: center center;
            background-size: cover;
            position: relative;
            height: 50vh;
            background-repeat: no-repeat;
          }
          
          
         
        }
  
  
  
        
    .heading-primary--sub {
      display: block;
      font-size: 2rem;
      letter-spacing: 1.75rem;
      animation: moveInRight 2s ease-out; }
      @media only screen and (max-width: 37.5em) {
        .heading-primary--sub {
          letter-spacing: .5rem; } }
  
  
          @media only screen and (max-width: 576px) {
            
            #page-header {
              background-repeat: no-repeat;
                background-position: center center;
                background-size: cover;
              }
            #vienas {
              background-image: url('../img/sitassitas.JPG');
             
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
            }
            #du {
              background-image: url('../img/rockwool.jpg');
              
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
            }
            #trys {
              background-image: url('../img/hs8.jpg');
         
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
              
              
            }
            #keturi {
              background-image: url('../img/brickslipexample.jpg');
              
              background-position: center center;
              background-size: cover;
              position: relative;
              height: 50vh;
              background-repeat: no-repeat;
            }
  
            #vienas2 {
              background-image: url('../img/towerglass.jpg');
             
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
            }
            #du2 {
              background-image: url('../img/999.jpg');
              
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
            }
            #trys2 {
              background-image: url('../img/windowcladding.jpg');
         
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
              
              
            }
            #keturi2 {
              background-image: url('../img/metsecwalll.jpg');
              
              background-position: center bottom ;
              background-size: cover;
              position: relative;
              height: 50vh;
              background-repeat: no-repeat;
            }
            #penki2 {
              background-image: url('../img/rockwool.jpg');
              
              background-position: center bottom ;
              background-size: cover;
              position: relative;
              height: 50vh;
              background-repeat: no-repeat;
            }
  
            .mob-top {
              margin-top: 30px;
              font-size: 2em;
            }
            .mob-top-2 {
              margin-top: 10px;
              font-size: 1.7em;
            }
            h1 {
              font-size: 3rem;
              width: 90vw;
              line-height: 1.5; } 
            .img-fluid {
              max-width: 90%;
              left: 5%;
              position: relative;
              
              
            }
          
            }
            @media (min-width: 768px) {
              .carousel-cell {
                width: 66%;
                height: 800px;
                margin-right: 10px;
                border-radius: 5px;
                counter-increment: carousel-cell; }
              
              
                #vienas {
                  background-image: url('../img/sitassitas.JPG');
                  
                  background-position: center center;
                  background-size: cover;
                  height: 50vh;
                  position: relative;
                  background-repeat: no-repeat;
                }
                #du {
                  background-image: url('../img/rockwool.jpg');
                
                  background-position: center center;
                  background-size: cover;
                  height: 50vh;
                  position: relative;
                  background-repeat: no-repeat;
                }
                #trys {
                  background-image: url('../img/hs8.jpg');
                  
                  background-position: center center;
                  background-size: cover;
                  height: 50vh;
                  position: relative;
                  background-repeat: no-repeat;
                }
                #keturi {
                  background-image: url('../img/brickslipexample.jpg');
                
                  background-position: center center;
                  background-size: cover;
                  position: relative;
                  height: 50vh;
                  background-repeat: no-repeat;
                }
              
            #vienas2 {
              background-image: url('../img/towerglass.jpg');
             
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
            }
            #du2 {
              background-image: url('../img/sqwin.JPG');
              
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
            }
            #trys2 {
              background-image: url('../img/windowcladding.jpg');
         
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
              
              
            }
            #keturi2 {
              background-image: url('../img/metsecwalll.jpg');
              
              background-position: center bottom ;
              background-size: cover;
              position: relative;
              height: 50vh;
              background-repeat: no-repeat;
            }
            #penki2 {
              background-image: url('../img/rockwool.jpg');
              
              background-position: center bottom ;
              background-size: cover;
              position: relative;
              height: 50vh;
              background-repeat: no-repeat;
            }
              }
  
            @media only screen and (min-width: 768px) {
              h1 {
                font-size: 1.4rem;
                width: 80vw;
                margin-bottom: 3rem; }
                .heading-primary--sub {
                  display: block;
                  font-size: 2rem;
                  letter-spacing: 1.75rem;
                  animation: moveInRight 2s ease-out; }
                  p {
                    font-size: 0.8em;
                   }
                  .heading-primary--main {
                    display: block;
                    font-size: 2rem;
                    letter-spacing: 2rem;
                    /*
                        animation-delay: 3s;
                        animation-iteration-count: 3;
                        */ }
                        .carousel-cell {
                          width: 66%;
                          height: 400px !important;
                          margin-right: 10px;
                          background: rgb(248, 255, 248);
                          border-radius: 5px;
                          counter-increment: carousel-cell; }
                        
              }
  
              @media only screen and (min-width: 992px) {
                   .videomhm {
                    width: 650px!important;
                    margin-left: 210px!important;
                   }
                   .tel {
                    margin-top: 1px!important;
                   }
                .carousel-cell {
                  width: 66%;
                  height: 600px !important;
                  margin-right: 10px;
                  background: rgb(248, 255, 248);
                  border-radius: 5px;
                  counter-increment: carousel-cell; }
                
                #page-header {
                  background-repeat: no-repeat;
                    background-position: center center;
                    background-size: cover;
                  }
                 
                #vienas {
                   background-image: url('../img/sitassitas.JPG');
              
                  background-position: center center;
                  background-size: cover;
                  height: 50vh;
                  position: relative;
                  background-repeat: no-repeat;
                }
                #du {
                  background-image: url('../img/rockwool.jpg');
                 
                  background-position: center center;
                  background-size: cover;
                  height: 50vh;
                  position: relative;
                  background-repeat: no-repeat;
                }
                #trys {
                  background-image: url('../img/hs8.jpg');
                  
                  background-position: center center;
                  background-size: cover;
                  height: 50vh;
                  position: relative;
                  background-repeat: no-repeat;
                }
                #keturi {
                  background-image: url('../img/brickslipexample.jpg');
                 
                  background-position: center center;
                  background-size: cover;
                  position: relative;
                  height: 50vh;
                  background-repeat: no-repeat;
                }
                
            #vienas2 {
              background-image: url('../img/towerglass.jpg');
             
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
            }
            #du2 {
              background-image: url('../img/sqwin.JPG');
              
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
            }
            #trys2 {
              background-image: url('../img/windowcladding.jpg');
         
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
              
              
            }
            #keturi2 {
              background-image: url('../img/metsecwalll.jpg');
              
              background-position: center bottom ;
              background-size: cover;
              position: relative;
              height: 50vh;
              background-repeat: no-repeat;
            }
            #penki2 {
              background-image: url('../img/rockwool.jpg');
              
              background-position: center bottom ;
              background-size: cover;
              position: relative;
              height: 50vh;
              background-repeat: no-repeat;
            }
                h1 {
                  font-size: 2.5rem;
                  width: 60vw;
                  margin-bottom: 5rem; } 
                  .heading-primary--sub {
                    display: block;
                    font-size: 2rem;
                    letter-spacing: 1.75rem;
                    animation: moveInRight 2s ease-out; }
              
                    .heading-primary--main {
                      display: block;
                      font-size: 2rem;
                      letter-spacing: 2rem;
                      /*
                          animation-delay: 3s;
                          animation-iteration-count: 3;
                          */ }
                         p {
                          font-size: 0.7em;
                         }
                          
                      
                        }
                        @media only screen and (min-width: 1023px) {
                          .videomhm {
                            width: 650px!important;
                            margin-top: 30px;
                            margin-left: 130px!important;
                           }
                           .videomhm {
                            width: 650px!important;
                            margin-top: 30px;
                            margin-left: 10px!important;}}
                           @media only screen and (min-width: 1279px) {
                            .videomhm {
                              width: 650px!important;
                              margin-top: 30px;
                              margin-left: 210px!important;
                             }
    
  
                        }
  
                        @media only screen and (min-width: 1023px) {
                          .videomhm1 {
                            width: 650px!important;
                            margin-top: 100px;
                            margin-left: -320px!important;
                           }
                           .videomhm1 {
                            width: 650px!important;
                            margin-top: 100px;
                            margin-left: -320px!important;}}
                           @media only screen and (min-width: 1279px) {
                            .videomhm1 {
                              width: 650px!important;
                              margin-top: 100px;
                              margin-left: -320px!important;
                             }
    
  
                        }
  
  
                        @media only screen and (min-width: 1023px) {
                          .videomhm2 {
                            width: 550px!important;
                            margin-bottom: 120px !important;
                            margin-left: 30px!important;
                           }
                           .tete {
                            margin-top: -40px !important;
                           }
                           .videomhm2 {
                            width: 550px!important;
                            margin-bottom: 120px !important;
                            margin-left: 10px!important;}}
                           @media only screen and (min-width: 1279px) {
                            .videomhm2 {
                              width: 550px!important;
                              margin-bottom: 120px !important;
                              margin-left: 10px!important;
                             }
                             .tete {
                              margin-top: -40px !important;
                             }
    
  
                        }
  
                         
  
  
  
  
                        @media only screen and (min-width: 1199px) {
  
                       
                          .carousel-cell {
                            width: 66%;
                            height: 500px !important;
                            margin-right: 10px;
                            background: rgb(248, 255, 248);
                            border-radius: 5px;
                            counter-increment: carousel-cell; }
                          
                          #page-header {
                            min-height: 500px;
                            background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(https://images.unsplash.com/photo-1704391896148-e704703f28c4?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
                            background-position: center;
                            background-attachment: fixed;
                            background-size: cover;
                            color: rgb(255, 255, 255); }
                          #vienas {
                            background-image: url('../img/sitassitas.JPG');
                            background-attachment: fixed;
                            background-position: center center;
                            background-size: cover;
                            height: 50vh;
                            position: relative;
                            background-repeat: no-repeat;
                          }
                          #du {
                            background-image: url('../img/rockwool.jpg');
                            background-attachment: fixed;
                            background-position: center center;
                            background-size: cover;
                            height: 50vh;
                            position: relative;
                            background-repeat: no-repeat;
                          }
                          #trys {
                            background-image: url('../img/hs8.jpg');
                            background-attachment: fixed;
                            background-position: center center;
                            background-size: cover;
                            height: 50vh;
                            position: relative;
                            background-repeat: no-repeat;
                          }
                          #keturi {
                            background-image: url('../img/brickslipexample.jpg');
                            background-attachment: fixed;
                            background-position: center center;
                            background-size: cover;
                            position: relative;
                            height: 50vh;
                            background-repeat: no-repeat;
                          }
  
                          
            #vienas2 {
              background-image: url('../img/towerglass.jpg');
             background-attachment: fixed;
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
            }
            #du2 {
              background-image: url('../img/sqwin.JPG');
              background-attachment: fixed;
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
            }
            #trys2 {
              background-image: url('../img/windowcladding.jpg');
              background-attachment: fixed;
              background-position: center center;
              background-size: cover;
              height: 50vh;
              position: relative;
              background-repeat: no-repeat;
              
              
            }
            #keturi2 {
              background-image: url('../img/metsecwalll.jpg');
              background-attachment: fixed;
              background-position: center bottom ;
              background-size: cover;
              background-position: center;
              position: relative;
              height: 50vh;
              background-repeat: no-repeat;
            }
            #penki2 {
              background-image: url('../img/rockwool.jpg');
              background-attachment: fixed;
              background-position: center bottom ;
              background-size: cover;
              position: relative;
              height: 50vh;
              background-repeat: no-repeat;
            }
                          h1 {
                            font-weight: 900;
                            font-size: 2rem;
                            width: 80vw;
                            margin-bottom: 5rem; }
                            h3 {
                              font-weight: 900;
                              font-size: 1.4em;
                              width: 40vw;
                          
                              position: relative;
  
                             }
                             p {
                               font-size: 1.7rem;
                             }
                            .heading-primary--sub {
                              display: block;
                              font-size: 2.8rem;
                              letter-spacing: 1.25rem;
                              animation: moveInRight 2s ease-out; }
                        
                              .heading-primary--main {
                                display: block;
                                font-size: 2em;
                                letter-spacing: 0.5rem;
                                
                                /*
                                    animation-delay: 3s;
                                    animation-iteration-count: 3;
                                    */ }
                                    .header-gallery {
                                      height: 95vh;
                                      background-image: linear-gradient(to right bottom, rgba(42, 51, 134, 0.6), rgba(13, 8, 34, 0.438)), url(https://images.unsplash.com/photo-1604027284657-be209d7aec47?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTcwfHxjb25zdHJ1Y3Rpb258ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60);
                                      background-size: cover;
                                      background-position: top;
                                      position: relative;
                                      
                                      }
                        .heading-primary--main {
                                animation: moveInLeft 2s ease-out;
                                letter-spacing: 0.1rem;
                                font-size: 2.2em; }
                        
                                      
                          }
                          @media only screen and (max-width: 1350px) { 
                            h3 {
                              font-weight: 900;
                              
                             
                            
  
                             }}
  
                          @media only screen and (min-width: 1480px) { 
                            h3 {
                              font-weight: 900;
                              font-size: 1em;
                             width: 33vw;
                            
                             
  
                             }
                          }
                         
                       
  
  /*************************************************************************
               card styles
    ****************************************************************************/
  
  
    .wrapper {
      display: flex;
      flex-flow: row wrap;
      justify-content: center; }
    
      .card {
        width: 420px;
        height: 340px;
        margin: 1em;
        perspective: 1500px; }
        .card .content {
          position: relative;
          width: 100%;
          height: 100%;
          transform-style: preserve-3d;
          transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1); }
      
      .more {
        display: none; }
        .more:checked ~ .content {
          transform: rotateY(180deg); }
      
      .front,
      .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        border-radius: 6px; }
        .front .inner,
        .back .inner {
          height: 100%;
          display: grid;
          padding: 1.5em;
          transform: translateZ(80px) scale(0.94); }
      
      .front {
        background-color: #fff;
        background-size: cover;
        background-position: center center; }
        .front:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 6px;
          backface-visibility: hidden;
          background: linear-gradient(40deg, rgba(11, 48, 49, 0.1), rgb(30, 39, 44)); }
        .front .inner {
          grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
          justify-items: center; }
        .front h2 {
          grid-row: 2;
          margin-bottom: 0.3em;
          text-transform: uppercase;
          letter-spacing: 3px;
          color: #fff;
          font-weight: 700;
          text-shadow: 0 0 6px rgba(0, 0, 0, 0.1); }
      
      .back {
        transform: rotateY(180deg);
        background-color: #fff;
        border: 2px solid #f0f0f0; }
        .back .inner {
          grid-template-rows: 1fr 2fr 1fr 2fr 14fr 1fr 1fr;
          grid-template-columns: repeat(4, auto);
          grid-column-gap: 0.8em;
          justify-items: center; }
        .back .info {
          position: relative;
          display: flex;
          align-items: center;
          color: #14091d;
          grid-row: 3; }
          .back .info:not(:first-of-type):before {
            content: '';
            position: absolute;
            left: -0.9em;
            height: 18px;
            width: 1px;
            background-color: #ccc; }
          .back .info span {
            font-size: 2em;
            font-weight: 700; }
          .back .info i {
            font-size: 1.2em; }
            .back .info i:before {
              background: linear-gradient(40deg, #14091d, #43f37e);
              -webkit-text-fill-color: transparent;
              -webkit-background-clip: text; }
          .back .info .icon {
            margin-left: 0.3em; }
            .back .info .icon span {
              display: block;
              margin-top: -0.25em;
              font-size: 0.8em;
              font-weight: 600;
              white-space: nowrap; }
        .back .description {
          grid-row: 5;
          grid-column: 1/-1;
          font-size: 0.86em;
          border-radius: 5px;
          font-weight: 600;
          line-height: 1.4em;
          overflow: auto;
          color: #14091d;
          padding-right: 10px; }
        .back .location,
        .back .price {
          font-weight: 600;
          color: #1d1b09;
          grid-row: 1;
          font-size: 0.86em; }
        .back .location {
          grid-column: 1/3;
          justify-self: left; }
        .back .price {
          grid-column: 3/-1;
          justify-self: right; }
        .back .button {
          grid-column: 1/-1;
          justify-self: center; }
      
      .button {
        grid-row: -1;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        cursor: pointer;
        display: block;
        padding: 0 1.5em;
        height: 3em;
        line-height: 2.9em;
        min-width: 3em;
        background-color: transparent;
        border: solid 2px #5e0606;
        color: #fff;
        border-radius: 4px;
        text-align: center;
        left: 50%;
        backface-visibility: hidden;
        transition: 0.3s ease-in-out;
        text-shadow: 0 0 6px rgba(0, 0, 0, 0.3); }
        .button:hover {
          background-color: #fff;
          box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
          text-shadow: none;
          color: #14091d; }
        .button.return {
          line-height: 3em;
          color: #000000;
          border-color: #5e0606;
          text-shadow: none; }
          .button.return:hover {
            background-color: #14091d;
            color: #fff;
            box-shadow: none; }
      
      ::-webkit-scrollbar {
        width: 5px; }
      
      ::-webkit-scrollbar-track {
        background: #f1f1f1; }
      
      ::-webkit-scrollbar-thumb {
        background: #000000; }
      
      ::-webkit-scrollbar-thumb:hover {
        background: #14091d; }
      
      
  
  /*************************************************************************
                gallery page header styles 
    ****************************************************************************/
    .header-gallery {
      height: 95vh;
      background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0.6), rgba(13, 8, 34, 0.438)), url(https://images.unsplash.com/photo-1704391897712-95d7bcadbe06?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
      background-size: cover;
      
      background-position: center;
      position: relative;
       }
      /*****
       @include respond(phone) {
           -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
           clip-path: polygon(50% 0%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0);
       }
    ***/ 
      
      .header-gallery__logo-box {
        position: absolute;
        top: 4rem;
        left: 4rem; }
      .header-gallery__logo {
        height: 3.5rem; }
      .header-gallery__text-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center; }
    
    .header-services {
      height: 100vh;
      background-image: linear-gradient(to left bottom, rgba(0, 0, 0, 0.671), rgba(29, 26, 26, 0.767)), url(https://images.unsplash.com/photo-1496495375945-1c9f13f06cc8?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
      background-size: cover;
      background-position: center;
      position: relative;
      
    
    }
  
  
  /*************************************************************************
                background video
    ****************************************************************************/
  
  
    .bg-video {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: -1;
      opacity: 0.3;
      overflow: hidden; }
    
    .bg-video__content {
      height: 100%;
      width: 100%;
      object-fit: cover; }
  
  
  /*************************************************************************
                button styles
    ****************************************************************************/
  
    .btn, .btn:link, .btn:visited {
      text-transform: uppercase;
      text-decoration: none;
      padding: 1.5rem 4rem;
      display: inline-block;
      border-radius: 10rem;
      transition: all .2s;
      position: relative;
      font-size: 1.6rem;
      border: none;
      cursor: pointer; }
    
    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
      .btn:hover::after {
        transform: scaleX(1.4) scaleY(1.6);
        opacity: 0; }
    
    .btn:active, .btn:focus {
      outline: none;
      transform: translateY(-1px);
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }
    
    .btn--white {
      background-color: #fff;
      color: #777; }
      .btn--white::after {
        background-color: #fff; }
    
    .btn--green {
      background-color: #55c57a;
      color: #fff; }
      .btn--green::after {
        background-color: #55c57a; }
    
    .btn::after {
      content: "";
      display: inline-block;
      height: 100%;
      width: 100%;
      border-radius: 10rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: all .4s; }
    
    .btn--animated {
      animation: moveInBottom .5s ease-out .75s;
      animation-fill-mode: backwards; }
  
  
  
  .btn-text:link, .btn-text:visited {
    color: #55c57a;
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid #55c57a;
    padding: 3px;
    transition: all .2s; }
  
  .btn-text:hover {
    background-color: #55c57a;
    color: #fff;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
    transform: translateY(-2px); }
  
  .btn-text:active {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    transform: translateY(0); }
  
    
  
  /*************************************************************************
                carousel styles
    ****************************************************************************/
  .carousel {
    background: rgb(14, 13, 13); }
  
  .carousel-cell {
    width: 66%;
    height: 300px;
    margin-right: 10px;
    background: rgb(248, 255, 248);
    border-radius: 5px;
    counter-increment: carousel-cell; }
  
  #carousel-image {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(../img/herobrik020\ \(1\).jpg)
  
    ;
   
    background-size: cover;
    background-position: center;
    position: relative; }
    
  
  #carousel-image1 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/brickslip.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel-image2 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/brickslipcorner.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel-image3 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/brickslipexample.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel-image4 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/brik.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  
  /*second carousel*/
  #carousel1-image {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/hd10.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel1-image1 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/hd11.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel1-image2 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/hd12.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel1-image3 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/hd13.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel1-image4 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/hd7.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  



  
  /* third carousel */
  #carousel2-image {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/building.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel2-image1 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/butas.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel2-image2 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/cladding.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel2-image3 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/building.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel2-image4 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/carousel01.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }




  /* fourth carousel */
  #carousel3-image {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/222.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel3-image1 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/222.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel3-image2 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/444.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel3-image3 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/555.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  #carousel3-image4 {
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.2), rgba(3, 0, 0, 0.2)), url(/img/666.jpg);
    background-size: cover;
    background-position: center;
    position: relative; }
  
  
  /*************************************************************************
              header services and styles related to this page
    ****************************************************************************/
    @media only screen and (min-resolution: 192dpi) and (min-width: 37.5em), only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em), only screen and (min-width: 125em) {
      .header-services {
        background-image: linear-gradient(to left bottom, rgba(92, 92, 94, 0.637), rgba(0, 0, 0, 0.699)), url(https://images.unsplash.com/photo-1558464678-2f1570e8d60e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MzF8fGNvbnN0cnVjdGlvbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60);} }
    .header-services__logo-box {
      position: absolute;
      top: 4rem;
      left: 4rem; }
    .header-services__logo {
      height: 3.5rem; }
    .header-services__text-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center; }
      
      
  
  
  #page-header-services {
    min-height: 450px;
    background-image: linear-gradient(to right bottom, rgba(5, 29, 5, 0.6), rgba(3, 0, 0, 0.6)), url(https://images.unsplash.com/photo-1588332039066-f145965edf10?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTIwfHxoYXJkaGF0JTIwY29uc3RydWN0aW9ufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60);
    background-position: bottom;
    
    background-attachment: fixed;
    background-size: cover;
    color: white; }
  
  /*************************************************************************
                navbar styles
    ****************************************************************************/
  
    .navbar {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0.4rem;
      background-color: #ffffff;
      overflow: hidden;
      
      
     }
    
    /*brand could be name or image*/
    .brand img {
      width: 150px;
      height: 100px; }
    
    .navbar .nav-list {
      padding: 20rem 0;
      list-style-type: none;
      text-align: center;
      overflow: hidden; }
    
    .nav-list li {
      margin: 1rem 0;
      letter-spacing: 0.1rem; }
    
    .nav-list li a {
      
      display: block;
      text-decoration: none;
      text-transform: uppercase;
      padding: 1.4rem;
      color: #000000;
      font-size: 2.4rem; }
    
    /*toggler button*/
    .navbar .toggler {
      background-color: transparent;
      border: none;
      cursor: pointer;
      z-index: 3;
      outline: none; }
    
    /*hamburger*/
    .toggler .line {
      display: block;
      width: 30px;
      height: 5px;
      background-color: #000000;
      margin-bottom: 0.4rem;
      /*from hamburger to cross*/
      transition: 0.4s; }
    
    /*close icon*/
    .cross .line:nth-child(1) {
      transform: rotate(-45deg) translate(-7px, 4px); }
    
    .cross .line:nth-child(2) {
      opacity: 0; }
    
    .cross .line:nth-child(3) {
      transform: rotate(45deg) translate(-7px, -5px); }
    
    /*only for mobile and tablets devices*/
    @media (max-width: 767px) {
      /*hide nav by transform*/
      .nav-list-container {
      
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: inherit;
        z-index: 2;
        transform: translateX(-100%);
        /*nav sidebar speed*/
        transition: all 0.5s linear;
        opacity: 0.5; }
      .brand img {
        width: 75px;
        height: 75px; }
        .brand2 img {
          width: 60px;
          height: 60px; }
      .nav-list li a {
       
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        padding: 1.4rem;
        color: #000000;
        font-size: 3.4rem; } }
    
    /*make nav visible by transform*/
    .nav-active {
      transform: translateX(0%);
      opacity: 1; }
    
    /*navigation for tablet and desktops*/
    @media (min-width: 768px) {
      .navbar {
        justify-content: space-around;
        padding: 0.4rem 0; }
      /*make nav-list horizontal on big screens*/
      .navbar .nav-list {
        display: flex;
        flex-direction: row;
        padding: 0; }
      .nav-list li {
        margin: 0 0.4rem; }
      /*hide toggler button on big screens*/
      .navbar .toggler {
        display: none; } }
    
    
    
  
    /*************************************************************************
                For responsive H1 text
    ****************************************************************************/