/*
    Theme Name: AG Theme
    Text Domain: Ag theme
    Version: 1.0
    Description: AG theme
    Author: OGDiMut22
*/

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




.logo {
    height: 40px; width: auto;
}
.logo img {
    height: 40px; width: auto;
}

body {
    background-color: #383B33;
    font-family: 'Inter', sans-serif;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
    height:100%;

    }


h1 {
    text-transform: uppercase;
    font-weight: 200;
    letter-spacing: 1px;
    margin: 32px 0 32px 0;
}
h1 a {
    font-size: 34px;
    color: #000;
    text-transform: uppercase;
}
h2 {
    text-transform: uppercase;
    letter-spacing: 12px;
    font-size: 42px;
    margin: 32px 0 32px 0;
    font-weight: 300;
}
@media (max-width: 768px) {
    h2 {
        font-size: 28px;
    }
}
@media (max-width: 480px) {
    h2 {
        font-size: 20px;
    }
}
h3 {
    text-transform: uppercase;
    font-size: 18px;
    margin: 32px 0 32px 0;
    font-weight: 300;
}
h4 {
    font-weight: 500;
    letter-spacing: 4px;
    margin: 0 0 6px 0;
    text-transform: uppercase;
}

p{
    letter-spacing: 0.5px;
}

.hide {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
 }

a {
    text-decoration: none;
    color: #000;
    }
    a:hover {
    opacity: .65;
}
.project-link:hover {
    opacity: 1;
}


/* 
.intro {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vmax;
    background-color: #464A40;
    z-index: 5;
    animation-name: intro-anim;
    animation-duration: 2s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    pointer-events: none;
}

.logo {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translate(0, -74px);
    margin: 0;
    width: 100%;
    animation: intro-animation;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}

.logo img {
    max-height: 148px;
    width: auto;
}

@keyframes intro-animation {

    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}  */


.nav-container {
    position: fixed;
    top: 0;
    transition: 200ms;

}
.main-nav {
    transition: 200ms;
    top: 0;
}

@keyframes nav-anim {
    from {
        top: -60px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}


.main-background {
    width: 100%;
    min-height: calc(100vh - 160px);
    height: auto;
    background-color: #F7F6F5;
}
.main-container {
    position: relative;
    /* margin: 128px auto; */
    padding: 96px 0 64px 0;
    width: 1024px;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    /* min-height: 100vh; */
    overflow: hidden;
    background-color: #F7F6F5;
}
.nav-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 10;
    display: flex;
    justify-content: center;
    background-color: #F7F6F5;

}

.logo {
    position: relative;
    top: -3px;
}

.main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100px;
    padding: 32px 32px 0 32px;
    display: flex;
    justify-content: space-between;

    }

   
    
    .nav-links, .nav-links.active {
        display: flex;

        list-style: none;
        gap: 64px;
        position: relative;
        font-size: 15px;
        font-weight: 300;
        letter-spacing: 2px;
  
    }


.fa-angle-down {
    position: absolute;
    left: 32px;
    top: 3px;
    font-size: 12px;
    
}

.lang-picker-btn {
    display: block;
    position: absolute;
    height: 20px;
    width: 100%;
    overflow: hidden;
    opacity: .5;
    cursor: pointer;
    }
  
.lang-picker-btn.active .fa-angle-down {
    transform: rotate(180deg);
    top: 4px;
}
.lang-picker {
    width: 50px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    list-style: none;
    height: 20px;
    overflow: hidden;
    border-radius: 10px;
    transition: 60ms ease-out;
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 2px;
    }
    .lang-picker.active {
        height: auto;
        box-shadow: none;
        background-color: #F7F6F5;

  
    }
    
    .lang-picker li:first-child {
        border-radius: 8px;  
    }
    .lang-picker.active li:first-child {
        font-weight: bold;
    }
    .lang-picker li {
        padding: 0 8px 0px 8px;
        display: inline-block;
        text-transform: uppercase;
    }

.lang-selection-container {
    position: absolute;
    right: 40px;
}

.back-to-projects {
    width: 100%;
    display: flex;
    text-align: left;
}

.hamburger {
    height: 23px;
    display: none;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    flex-direction: column;
    margin-top: 0px;
}
.hamburger:hover .bar {
    opacity: .65;
}
.bar {
    width: 30px;
    height: 2px;
    background-color: #000;
    transition: 120ms;
    }

.hamburger.active .bar:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}
.hamburger.active .bar:nth-child(2) {
    transform: translateY(-3px) rotate(-45deg);
}



.services-links-container {
    width: calc(100% - 64px);
    display: flex;
    list-style: none;
    border-bottom: 1px solid black;
}

.services-links {
    width: 100%;
    display: flex;
    list-style: none;
    justify-content: space-between;
    padding: 16px 0 0 0;
    }
    .service-link.active {
        font-weight: bold;
    }
    .service-link {
        font-size: 16px;
        align-items: center;
        padding: 4px 0px 16px 0px;
        margin: 0px;
        flex-wrap: wrap;
        font-weight: 200;
        text-transform: uppercase;
        display: inline-flex;
        flex-direction: column;
        font-size: 14px;
        letter-spacing: 3px;
    }
    .service-link.active:after {
        width: 100%;
        height: 4px;
        position: relative;
        top: 18px;
        content: " ";
        border-bottom: 3px solid black;
        animation-name: services-active;
        animation-timing-function: ease-out;
        animation-duration: 280ms;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
    }
    
@keyframes services-active {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}




.categories {
    width: 970px;
    margin-top: 128px;
}




.categories-links {
    width: 970px;
    display: flex;
    list-style: none;
    justify-content: space-between;

 
    border-bottom: 1px solid black;
    align-items: center;
    
    }
    .category-links {
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: 32px;
       
       
    }
    .category-link, .category-link-de {
        align-items: center;
        padding: 4px 0px 16px 0px;

        flex-wrap: wrap;
        font-weight: 200;
        text-transform: uppercase;
        display: inline-flex;
        flex-direction: column;
        font-size: 14px;
        letter-spacing: 2px;
    }
    .category-link:first-child {
        margin: 0 0px 0 0px;
    }
    .category-link:last-child {
        margin: 0 0px 0 0px;
    }



    .category-link.active a, .category-link-de.active a {
        font-weight: 400;
        transform: translateY(2px);

    }
    .category-link.active:after, .category-link-de.active:after {
        width: 0%;
        height: 4px;
        position: relative;
        top: 18px;
        content: " ";
        border-bottom: 3px solid black;
        animation-name: category-active;
        animation-timing-function: ease-out;
        animation-duration: 280ms;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
       
    }

    @keyframes category-active {
        0% {
            width: 0%;
        }
        100% {
            width: 100%;
        }
    }
  
    .front-page-sub-nav li a {
        font-weight: 200;
    }

    .about-main {
        position: relative;
        width: 100%;
        min-height: 400px;
        margin-top: 128px;
        display: flex;
        justify-content: center;
    }
    .customize-support {
        padding: 0;
    }
    .front-page-main {
        margin: 0 auto;
         position: relative;

     }
     .front-page-main img {  
         width: 100%;
         height: auto; 
     }
    .front-page-image {

        margin: 0 auto;
        width: 100%;
        margin-bottom: -4px;
        overflow: hidden;
    }

    .front-page-sub-nav  {
        z-index: 4;
        font-size: 23px;
       
    }

   


    .lets-build-the-future-container {
        position: absolute;
        display: flex;
        right: 300px;
        top: 200px;
        flex-direction: column;
        gap: 16px;
        padding: 32px;
        width: auto;
        height: auto;
        background-color: #F7F6F5;
        border-radius: 20px;
        color: black;

}
        .slogan-span1, .how-to-build-span, .materials-span {
            display: block;
            font-weight: 600;
            font-size: 32px;
        }
        .slogan-span2 {
            display: block;
            font-weight: 200;
            font-size: 62px;
            margin-bottom: 64px;
        }
        .lets-build-links {
            text-align: right;
        }
        .how-to-build-span {margin-bottom: 46px;}
     
.materials-header {
    min-height: 200px;
    width: 500px;
    gap: 16px;
    padding: 16px;
}
.introduction-container {
    min-height: 100px;
    margin-top: 18px;
    gap: 16px;
    width: 100%;
    padding: 0 32px 0 32px;
}
.services-container {
    display: flex;
    flex-direction: column;
    min-height: 200px;
    gap: 20px;
    margin-top: 50px;
    /* padding: 0 32px 0 32px; */
}
.services-container p:nth-child(3) {

    padding: 0 32px 0 32px;

}






        p.services-architecture-p {
            width: 45%;
            margin: 0;
        }

        p.services-consulting-p{
            width: 45%;
            margin-left: 32px;
        }

        @media (max-width: 768px) {
            
            .services-architecture-p , .services-consulting-p {
                margin: 0 32px 0 32px;
            }
        }


.project-header {
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: center;
    }
    .date {
        width: 100%;
        height: 32px;
    }

.project-content {
    display: block;
    padding: 32px;
    width: 100%;
    
}

.single-project-header-image {

}
.single-project-header-image img {
    width: 100%;
    height: auto;
}

@keyframes projects-main-anim {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.projects-main {
    position: relative;
    top: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    padding: 16px 0 128px;
    width: 980px;
    animation-name: projects-main-anim;
    animation-duration: 800ms;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    }
    .project-section {
        margin: 0px;
   
        text-align: center;
        cursor: pointer;
        height: 305px;
        width: 305px;

        border: 0.1px solid transparent;

        transform: perspective(400px) rotateY(0deg);
        animation-name: pro-mouseleave-anim;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: ease-out;
        animation-duration: 800ms;
    }

    @keyframes pro-mouseleave-anim {
        0% {transform: perspective(400px) rotateY(4deg) rotateX(4deg) scale(1);}
        100% {transform: perspective(400px) rotateY(0deg) rotateX(0deg) scale(1);}  
    }
    @keyframes proHoverAnim {
        0% {transform: perspective(400px) rotateY(0deg) rotateX(0deg) scale(1);}
        100% {transform: perspective(400px) rotateY(4deg) rotateX(4deg) scale(1);}
    }

    .project-thumbnail {
        display: inline-block;
        overflow: hidden;
        width: 295px;
        height: 295px;
        

        
        }
        .project-thumbnail img {
            width: 295px;
            height: 295px;
            object-fit: cover;
            filter: contrast(100%);
         
        }    
        .project-section:hover .project-thumbnail img {
            filter: contrast(105%);
       
        }
        .project-name {
            display: flex;
            position: relative;
            justify-content: left;
            align-items: center;
            width: 100%;
            text-transform: uppercase;
            height: 32px;
            font-weight: 300;
            top: -7px;
            left: 5px;
    }
    .project-hover {
        position: absolute;
        display: block;
        width: 295px;
        height: 295px;
        transition: 300ms ease-out;
        

    }




   
    .project-section:hover .project-hover {

       
        background-color: rgba(255,255,255,0.1);
     
        transform: scale(1.05) translateX(0px);


      
    } 

    .project-section:hover{

        opacity: .95;
        animation-name: proHoverAnim;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: ease-out;
        animation-duration: 400ms;
        
    }
    @keyframes hover-anim {
        0% {
            transform: scale(1);
            opacity: 0;
        }
        100% {
            transform: scale(1.1);
            opacity: 1;
        }
    }

    .project-page {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 32px;
   
    }
.project-page-heading {
   display: flex;
   justify-content: center;

    }
    .project-page-name {
    margin: 0 0 64px 0;
    font-weight: 500;
    font-size: 22px;
}
    
.project-page {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 32px;
    }
    .project-main-image {
        width: 100%;
        height: auto;
        }
        .project-main-image img {
            width: 100%;
    }
    .project-page-block {
        padding: 32px;
        width: 100%;
        height: auto;
    }

.breadcrumbs {

    padding: 128px 20px 0px 32px;
    }
    .breadcrumb {
        margin: 125px 10px 125px 0px;
        }
        .breadcrumb:not(:first-child)::before{
            content: ">";
            padding: 0 12px 0 0;
    }
    


.about {
        display: grid;
    }
    .about-link.active a {
        padding: 4px 32px 4px 32px;
        border-radius: 20px;
        border: 1px solid #000;
    }
    .about-links a:hover {
        cursor: not-allowed;
        
    }
    .about-links {

        display: grid;
        

        width: 100%;
        display: flex;
        list-style: none;
        justify-content: space-around;
        padding: 16px 0 16px 0;
        margin: 0 0 32px 0;
        background-color: #F7F6F5;
        border-radius: 20px;

        margin-top: 128px;
        
        }

    .ag-image {
        height: 420px;
        width: 300px;
        background-color: #ddd;
    }

    .ag-section {
        width: 600px;
        height: 380px;
        background-color: #aaa;
    }

    .single-project-header-image { 
        width: 100%;
        min-height: 256px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin: 0px auto;
        padding: 0;
    }
    

.front-page-sub-nav {
    width: 100%; height: 70px;
    position: sticky;
    bottom: 0;
    background-color: #464A40;
    color: #F7F6F5;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    gap: 32px;
    text-align: center;
    text-transform: uppercase;
    list-style: none;
    
    
    }
    .front-page-sub-nav a {
        font-size: 20px;
        letter-spacing: 4px;
        font-weight: 500;
        color: #F7F6F5;
    }
    
    .separator {
        font-size: 32px;
        font-weight: 200;
        
    }
    .front-page-sub-nav .arrow { 
        display: inline-block;
        transition: 120ms;
        transform: translateY(2px);
    }
    .front-page-sub-nav a:hover .arrow {
        transform: translateY(-3px) rotate(-90deg);  
    }
  

footer {
    position: relative;
    letter-spacing: 2px;
    font-weight: 300;
    width: 100%;
    height: 160px;
    padding: 128px 16px 96px 16px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 16px;
    background-color: #383B33;
    color: #F7F6F5;

    }
    footer a {
        margin: 0 6px 0 6px;
        color: #F7F6F5;
     
    }
    .footer-info {
        display: flex;
        justify-content: center;
    }

   .footer-img {
        height: 40px; width: 40px;
        margin: 0 auto;
   }
        .footer-heading {
            font-size: 20px;
            font-weight: 500;
            display: inline-block;
            padding-bottom: 16px;
        }
        .footer-list {
            list-style: none;
        }
        .footer-info {
           
            text-align: center;
        }

        .footer-links {
            
            display: block;
        }
    
    .footer-copyright {
        text-transform: uppercase;
        
    }
    .footer-contact {
        display: flex;
    }
    @media (max-width: 1280px) {
        .footer-contact {
            flex-direction: column;
            }
            .footer-num {
                padding-bottom: 32px;
            }
        
        .footer-info {
            flex-direction: column;
        }
        
    }
    


        .nav-links {
       
            opacity: 1;
 
            color: #000;

            margin-right: 100px;
        }
     

        .main-nav.active {

           

            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 80px;
            padding: 32px 32px 0 32px;
            display: flex;
            justify-content: space-between;
 
        }
    
        .main-nav.active h1 {
            width: 100px;
            position: absolute;

        }
      
        .main-nav.active .lang-selection-container {
            top: 32px;
        }



        .keep-reading-container {
            width: 100%;
            min-height: 400px;
            padding: 32px;
            background-color: #464A40;
            color: #EAE9E6;
        }

    
        .keep-reading-links-container {
            width: 270px;
            

        }
        .keep-reading-links-container a {
            color: #EAE9E6;
            letter-spacing: 1px;
            

        }
    
        
        .interested {
            font-size: 16px;
            letter-spacing: 2px;
        }
        .interested-line {
            margin: 16px 0 64px 0;
            border-bottom: 1px solid #EAE9E6;
            width: 128px;
        }
        
        .keep-reading-main-content {
            max-width: 1111px;
            padding: 64px;
            display: flex;
            gap: 124px;
            margin: 0 auto;
        }
        
        .building-sustainably {
            width: 100%;
        }
        
        
        .about-materials {
          
            width: 100%;
        }
        .about-materials h3, .building-sustainably h3 {
            margin-bottom: 32px;
            font-size: 27px; font-weight: 300;
            letter-spacing: 7px;
        }
        .about-materials p, .building-sustainably p {
            margin-bottom: 32px;
            font-size: 15px; font-weight: 200;
        }
        .keep-reading-link {
            display: inline-block;
            text-transform: uppercase;
            font-size: 16px;
            letter-spacing: 3px;
        }
        .keep-reading-link a {
            color: #EAE9E6;
        }
        
        .interested-separator {
            height: 128px;
            width: 1px;
            border-left: 1px solid #EAE9E6;
        }


@media (max-width: 1024px) {

    .keep-reading-main-content {

        gap: 32px;
    }

    .lang-selection-container {
        right: 80px;
    }

    .categories-overflow-mask {
   
        width: calc(768px - 46px);
        height: 200px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        overflow-y: auto;

 
    }

    .categories-overflow-mask::-webkit-scrollbar {
        display: none;
    }
 

    .categories-links { 
        width: 100%;
        
        gap: 32px;
  
    }  
 
   
    .project-content {
        display: block;
        padding: 32px 0 32px 0;
        max-width: 100vw;
   
    }

    .nav-links {
        position: absolute;
        opacity: 0;
        top: -50px;
  
        
    }
    .nav-links.active {
        margin: 0 auto;
        position: relative;
        top: 160px;
        flex-direction: column;
        gap: 32px;
        opacity: 1;
        width: 100px;
        
        
    }
   
    .hamburger {
        display: flex;
    }
    .main-nav {
        width: 100%;
      
    }
    .main-nav.active {
        background-color: #F7F6F5;
        position: fixed;
        display: flex;
        justify-content: space-between;
  
        height: 100vmax;
        z-index: 1;

    }
    .main-nav.active h1 {
        position: absolute;
   
    }
    .main-nav.active .nav-links {
        margin: 0 auto;
        position: relative;
        top: 140px;
        flex-direction: column;
        gap: 32px
    }
    
    .main-container {
        margin: 0 auto;
        width: 100%;
   
    }





    .projects-main {
        grid-template-columns: 1fr 1fr;
        justify-items: center;  
        gap: 32px;
        width: 768px;
        padding: 16px 16px 0 16px;
        margin: 0 0 96px 0;
    }
    .project-section {
        width: 340px;
        height: 350px;    
    }
    .project-thumbnail {
        width: 340px;
        height: 340px;
        }
        .project-thumbnail img {
            width: 340px;
            height: 340px;
    }  
    .project-hover {
        width: 340px;
    }
    .footer-info {

        flex-direction: column;
     
    }
    footer {
        flex-direction: column;
        align-items: center;
 
    }
    .footer-num:before {
        content: " "
    }
    .footer-links:before {
  
        content: " "
    }

    .footer-num {
        padding-bottom: 32px;
    }
 
    .front-page-main img {
    
        height: 700px;
        object-fit: cover;
     
    }


    .services-links-container {
        width: calc(100% - 64px);
    }


    
    
} 

@media (max-width: 768px) {
   
    .keep-reading-main-content {
        padding: 0;
        flex-direction: column;
    }
    .interested-separator {
        transform: rotate(90deg) translateY(-64px);
    }

    .front-page-sub-nav {
        

        gap: 32px;
        font-size: 16px; 
        }
   
        .front-page-sub-nav a {
            font-size: 16px;
   
        }
     
   

    .front-page-main {
        position: relative;
        width: 100%;
        height: 200px;
        flex-direction: column;
        padding: 0;
     
    }
  


    .about {
        width: 400px;
        margin: 0 auto;
    }
    .about-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        gap: 30px;
    }

    .project-page {
        grid-template-columns: 1fr;
   
        }

        .project-main-image {
            width: 100%;
      
    
        }
        .project-main-image img {
            width: 100%;
        }
      
        .project-page-block {
            padding: 20px;
            width: 100%;    
        }

    .project-section {
        max-width: 310px;
        height: 330px;
        }
        .project-thumbnail {
            height: 310px;
            width: 310px;
        }
        .project-thumbnail img{
            height: 400px;
            width: 100%;
       
        }

        .project-section:hover .project-hover {
        
            box-shadow: inset 0 0 10px 1px #F7F6F5;
        }
        .project-section:hover{

            opacity: .95;
            
        }
        .project-hover {
        
            display: none
        }

    .projects-main {
        grid-template-columns: 1fr;
        column-gap: 16px;
        width: 100%;
        padding: 16px 0 0 0;
        
    }
    .project-link {
        width: auto;
        height: auto;
    }
    


    .categories-overflow-mask {

        width: calc(100% - 64px);

        height: 200px;
        overflow-y: scroll;
 
    }

    .nav-links.active {
        margin: 0 auto;
        transform: translateX(-50%) translateY(70px);
        font-size: 22px;
        
    }
  
    .main-nav.active .nav-links {
        position: relative;
        left: 0;
    }


    .front-page-main {
        height: 700px;
    }


    footer {
        grid-template-columns: 1fr;
    }


    .front-page-sub-nav {
        flex-direction: column-reverse;
        padding-top: 14px;
        gap: 16px;
        font-size: 16px; 
        height: 100px;
    
    }
    .front-page-sub-nav a {
        display: block;
        padding: 0;
    }

    footer {
        font-size: 14px;
    }

} 



@media (max-width: 500px) {
    p.services-architecture-p {
        width: 100%;

    }
    .services-links {
        margin: 0 0 32px 0;
        justify-content: space-between;
        flex-direction: column;

    }
    .service-link.active:after {
        animation-name: none;
        border: none;
    }
    .service-link.active {
        animation-name: none;
        border: none;
    }
    .project-page {
        padding: 0;
    }

 
}



.impressum-group {
    margin: 32px;
}
 
.impressum-group h2 {
    letter-spacing: 0;
    font-size: 16px;
}
 
.impressum-group h3 {
    letter-spacing: 0;
    font-size: 16px;
}







.has-text-align-right {
    margin: 0 0 -55px 0;
}
.materials-container {
    width: 100%;

    padding: 0 0 550px 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #F7F6F5;
}
.material-heading {
    width: 100%;
    min-height: 20px;
    padding: 16px 12px 3px 12px;
    text-align: center;
    border-radius: 20px;
    position: absolute;
    top: 20px;
    left: 0px;
    display: inline-block;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.material-info-text {
    position: relative;
    top: 0px;
    padding: 8px 12px 3px 12px;
    margin-top: 12px;
    min-height: 100px;
    max-width: 300px;
}

.material-grid {
    padding: 30px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    perspective: 100rem;
    gap: 74px;
}

.material {
    height: 74px;
    width: 74px;
    cursor: pointer;
    transition: 200ms;
    
}

.material-parent {
    position: relative;
    transition: 0.6s;
}

.material-parent .info {
    
    position: absolute;
    top: -86px;
    left: -110px;
    display: none;
    background: #474a41;
    color: #eae9e6;
    padding: 96px 32px 32px 32px;
    animation-name: material-anim;
    animation-duration: .6s;
    animation-fill-mode: forwards;
}

@keyframes material-anim {
    0% {

        transform: perspective(400px) rotateY(5deg) rotateX(5deg);
    }

    100% {
        
        transform: perspective(400px) rotateY(0deg) rotateX(0deg);
    }
}



.info.active {
    display: block;
    z-index: 1;
}

.info{
    cursor: pointer;
    position: absolute;
    width: 300px;
    height: auto;
    /* height: auto; */
    background-color: blue;
    pointer-events: none;
    transition: 120ms;
}
.info p {
    margin-top: 96px;
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 300;
}

.material.active {
    position: absolute;
    z-index: 100;
    transform: scale(1.1);

}
.material.mobile-active {
    position: absolute;
    z-index: 100;
}
.material-parent.active {
    margin-top: 32px;
    
}

@media (max-width: 480px) {
    .material-grid {
        grid-template-columns: 1fr;

    }
    .material-parent.active {
        margin-top: 44px;
        margin-bottom: 300px;
    }
 
}
@media (min-width: 481px) and (max-width: 621px) {
    .material-grid {
        grid-template-columns: 1fr 1fr;

    }
    .material-parent.active {
        margin-top: 44px;
        margin-bottom: 300px;
    }
}
@media (min-width: 622px) and (max-width: 767px) {
    .material-grid {
        grid-template-columns: 1fr 1fr 1fr;

    }
    .material-parent.active {
        margin-top: 44px;
        margin-bottom: 300px;
    }
}
@media (min-width: 768px) and (max-width: 900px) {
    .material-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;

    }
    .material-parent.active {
        margin-top: 44px;
        margin-bottom: 300px;
    }

}

.material1 {background: url(assets/images/materials/tadelakt.jpg)}
.material2 {background: url(assets/images/materials/clay.jpg);}
.material3 {background: url(assets/images/materials/reed.jpg);}
.material4 {background: url(assets/images/materials/concrete.jpg);}
.material5 {background: url(assets/images/materials/co2reducedconcrete.jpg);}
.material6 {background: url(assets/images/materials/straw.jpg);}
.material7 {background: url(assets/images/materials/gypsum.jpg);}
.material8 {background: url(assets/images/materials/wood_clt_or_xlam.jpg);}
.material9 {background: url(assets/images/materials/wood.jpg);}
.material10 {background: url(assets/images/materials/wood_products.jpg);}
.material11 {background: url(assets/images/materials/woodfiber.jpg);}
.material12 {background: url(assets/images/materials/cellulose.jpg);}
.material13 {background: url(assets/images/materials/foamglass.jpg);}
.material14 {background: url(assets/images/materials/perimeter_insulation.jpg);}
.material15 {background: url(assets/images/materials/mineralwool.jpg);}
.material16 {background: url(assets/images/materials/brick.jpg);}
.material17 {background: url(assets/images/materials/stucco.jpg);}
.material18 {background: url(assets/images/materials/naturalstonewall.jpg);}
.material19 {background: url(assets/images/materials/tiles.jpg);}
.material20 {background: url(assets/images/materials/window.jpg);}
.material21 {background: url(assets/images/materials/moss.jpg);}
.material22 {background: url(assets/images/materials/ui-value.jpg);}
.material23 {background: url(assets/images/materials/mushroom.jpg);}
.material24 {background: url(assets/images/materials/linseedoil.jpg);}
.material25 {background: url(assets/images/materials/claypaint.jpg);}

/* blocks/front-page-image-slider-threeimages/block.css */
.front-site-images { 
    overflow: hidden;
    padding: 0;
    width: 100%;
    }
    .front-site-images img {
       
        
    }

    .front-site-images img:nth-child(1) { 
        z-index: 1;
        position: absolute;
        animation: front-site-images-anim 20s ease-in-out 0s infinite normal;
    }
    .front-site-images img:nth-child(2) { 
        z-index: 0;
        position: absolute;
        animation: front-site-images-anim2 20s ease-in-out 0s infinite normal;
    }
    .front-site-images img:nth-child(3) { 
        z-index: -1;
    }
  

@keyframes front-site-images-anim { 
    0% {opacity: 1;}
    10% {opacity: 1;}
    20% {opacity: 1;}
    30% {opacity: 0;}
    40% {opacity: 0;}
    50% {opacity: 0;}
    60% {opacity: 0;}
    70% {opacity: 0;}
    80% {opacity: 0;}
    90% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes front-site-images-anim2 { 
    0% {opacity: 1;}
    10% {opacity: 1;}
    20% {opacity: 1;}
    30% {opacity: 1;}
    40% {opacity: 1;}
    50% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0;}
    80% {opacity: 0;}
    90% {opacity: 0;}
    100% {opacity: 0;}
}

/* blocks/contact-profile/block.css */
.contact-profile-wrap {                                    
    display: flex;                     
    width: 100%;         
    margin:  32px 32px 32px 32px ;
    justify-content: space-between;
    flex-direction: column; 
    padding: 32px 0 32px 0;
    }                    
    .contact-profile-header-bar {
        display: flex;
        flex-direction: column;
                                                           
    }                                                                                                                                                                                                                                      
    .contact-profile-info-container { 
        display: flex;      
        margin-left: 96px;             
    }                       
    .contact-profile-left-column {   
            max-width: 540px;
        }

        .contact-profile-header {
            text-transform: uppercase;
            font-weight: 500;
            margin: 36px 0 36px 0;

        }
        .contant-profile-hl {
            padding-bottom: 5px;
            border-bottom: 1px solid black;
            width: 25px;
        }
        .contact-profile-name { 
            font-size: 28px;
            letter-spacing: 12px;
            text-transform: uppercase;
            font-weight: 300;
            padding: 0 0 16px 0;
            margin-left: 64px;
        }

        .contact-profile-textarea { 
            margin:0px 100px 0 0;  
        }

        .contact-profile-textarea p { 
            font-size: 18px;
        }
   .contact-profile-image {
        min-width: 250px;
        max-width: 250px;
        margin-right: 32px;
        padding-right: 32px;
    }
   .contact-profile-image img { 
        width: 100%;
    }
     
     
@media (max-width: 768px) {
     
.contact-profile-wrap { 

    margin: 0 32px 0 32px;

    }
    .contact-profile-info-container { 
        display: flex;
        flex-direction: column-reverse;
        margin-left: 32px;
    }
   
    .contact-profile-name { 
        font-size: 26px;
        margin-left: 32px;
        margin-right: 128px;
        }
        @media (max-width: 640px) {
            .contact-profile-name { 
            
          
            }
        }

    .contact-profile-image {  
        margin-bottom: 32px;
        max-width: 300px;
     
        margin-bottom: 32px;
    }

}



@media (max-width: 480px) {

    .contact-profile-header {


    }
  
     
.contact-profile-wrap { 

    margin: 0 32px 0 32px;

    }
    .contact-profile-info-container { 
        display: flex;
        flex-direction: column-reverse;
        margin-left: 0px;
    }
   
    .contact-profile-name { 

        margin-left: 0px;
    }

    .contact-profile-image {  
        margin-bottom: 32px;
        max-width: 300px;
      
        margin-bottom: 32px;
    }

}

/* blocks/basic-info/block.css */
.basic-info-container { 
    width: 100%;
    justify-content: space-between;
}

.basic-info-block { 
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

        h2.basic-info-title { 
            font-size: 28px;
            letter-spacing: 6px;
            font-weight: 400;
            margin: 64px 0 0 0;
        }

                .basic-info-sub-heading { 
                    font-size: 18px;
                    margin-top: 5px;
                    text-transform: capitalize;
                }

.sidebyside {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 64px 0 64px 0;
}

ul.basic-infos { 
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 28px;
    }

     .basic-info-item { 
         display: inline-block;
         display: flex;
         flex-direction: column;       
     }

        .basic-info-info-title {
            letter-spacing: 1px;
            font-size: 16px;
            text-transform: uppercase;
            padding-top: 2px;
        }

                .basic-info-info-answ { 
                    font-weight: 200;
                }


.basic-info-textarea { 
    letter-spacing: 0.5px;
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-weight: 300;
}

        .basic-info-highlight { 
            font-size: 22px;
            font-weight: 400;
        }


        @media (max-width: 768px) {
        
            .sidebyside {
                flex-direction: column;
                margin: 12px 0 0 0;
            }

            .basic-info-block { 
                margin-top:0;
            }
            
            h2.basic-info-title { 
                font-size: 24px;
                letter-spacing: 6px;
                font-weight: 300;
                margin: 32px 0 0 0;
            }

            .basic-info-textarea { 
                margin-top: 32px;
            }
        }
        @media (max-width: 500px) {
            .basic-info-container { 
                padding: 0 16px 0 16px;
            }
            .basic-info-textarea { 
                width: 100%;
            
            }

        }

/* blocks/basic-info-fin/block.css */
.basic-info-container { 
    width: 100%;
    justify-content: space-between;
}

.basic-info-block { 
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

        h2.basic-info-title { 
            font-size: 28px;
            letter-spacing: 6px;
            font-weight: 400;
            margin: 64px 0 0 0;
        }

                .basic-info-sub-heading { 
                    font-size: 18px;
                    margin-top: 5px;
                    text-transform: capitalize;
                }

.sidebyside {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 64px 0 64px 0;
}

ul.basic-infos { 
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 28px;
    }

     .basic-info-item { 
         display: inline-block;
         display: flex;
         flex-direction: column;       
     }

        .basic-info-info-title {
            letter-spacing: 1px;
            font-size: 16px;
            text-transform: uppercase;
            padding-top: 2px;
        }

                .basic-info-info-answ { 
                    font-weight: 200;
                }


.basic-info-textarea { 
    letter-spacing: 0.5px;
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-weight: 300;
}

        .basic-info-highlight { 
            font-size: 22px;
            font-weight: 400;
        }


        @media (max-width: 768px) {
          

            .sidebyside {
                flex-direction: column;
                margin: 12px 0 0 0;
            }

            .basic-info-block { 
                margin-top:0;
            }

            h2.basic-info-title { 
                font-size: 24px;
                letter-spacing: 6px;
                font-weight: 300;
                margin: 32px 0 0 0;
            }

            .basic-info-textarea { 
                margin-top: 32px;
            }
        }
        @media (max-width: 500px) {
            .basic-info-container { 
                padding: 0 16px 0 16px;
            }
            .basic-info-textarea { 
                width: 100%;
            
            }

        }

/* blocks/contact-action/block.css */
.contact-action-wrap { 
    display: flex;
    flex-direction: column;
    width: 88%;
    margin: 96px 32px 32px 32px;
    }

    .contact-info-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-left: 23px;
        padding-right: 32px;
        gap: 64px;
    }

.action-hl{
    padding-top: 5px;
    border-bottom: 1px solid black;
    width: 25px;
}

.contant-action-header2 , .contant-action-header3 , .contant-action-header4{
    margin-top: 86px;
}
.action-some , .contact-action-textarea2 , .contact-action-textarea3 {
    margin-top: 32px;
 }
 .contant-action-right-column, .contant-action-mid-column, .contant-action-left-column  {
    display: flex;
    flex-direction:column;
 }
 .contant-action-right-column {
    margin-left: 155px;
 }
 .action-some {
    text-decoration: underline;
    text-transform: capitalize;
 }


@media (max-width: 768px) {
    
    .contact-action-wrap { 
        display: flex;
        flex-direction: column;
        margin: 32px 0 0 0;
        padding-left: 32px;
    }

    .contact-info-content {
        flex-direction: column-reverse;
        gap: 0;
        margin-bottom: 16px;
        margin-left: 64px;
    }
  
    .contant-action-right-column {
        margin: 0;
    }

    .action-some-container {
        display: flex;
        flex-direction:row;
        gap: 18px;
    }

    .contact-action-textarea3 , .contact-action-textarea2 {
        margin-top: 0;
     }

}
@media (max-width: 480px) {
    

    .contact-info-content {
        margin-left: 0px;
    }

    .contant-action-header2, .contant-action-header3, .contant-action-header4 {
        margin-top: 0;
    }
    .contant-action-right-column , .contant-action-mid-column ,.contant-action-left-column {
        margin-top: 64px;
    }


}

/* blocks/front-page-images/block.css */
.front-site-images { 

    padding: 0;
    width: 100%;
    }
    .front-site-images img {
       
        
    }
    .front-site-images img:first-child { 
        position: absolute;
        animation: front-site-images-anim 7s ease-in-out 0s infinite forwards;
    }
  

@keyframes front-site-images-anim { 
    0%, 25% {opacity: 1;}
    50% {opacity: 0;}
    85% {opacity: 0;}
    100% {opacity: 1;}
}


/* blocks/front-page-image-slider-twoimages/block.css */
.front-site-images { 
    overflow: hidden;
    padding: 0;
    width: 100%;
    
    }
    .front-site-images img {

        
    }
    .front-site-images img:first-child { 
        position: absolute;
        animation: front-site-images-anim 7s ease-in-out 0s infinite forwards;
    }
  

@keyframes front-site-images-anim { 
    0%, 25% {opacity: 1;}
    50% {opacity: 0;}
    85% {opacity: 0;}
    100% {opacity: 1;}
}


/* blocks/image-left/block.css */

.image-left-container {
    display: flex;
    width: 100%;
    margin: 32px 0 32px 0;
    gap: 32px;

}

.image-left-container img {
    width: 60%;
    height: auto;
    margin-left: 32px;
}

.img-l-t {
    align-self: end;
}


@media (max-width: 768px) {

    .image-left-container {
        width: 100%;
        flex-direction: column;
    }

  
    .img-l-t {
        width: 88%;
        margin: 6px 6px 0 0;
        padding-right: 40px;
    }
    
    .image-left-container img {
        width: 100%;
        height: auto;
        margin-left: 0;
    }
}
/* blocks/image-right/block.css */
.oo-image-right-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    margin: 32px 0 32px 0;
    gap: 16px;
    /* padding: 0 32px 0 32px; */
}

.oo-image{
    width: 100%;
}

.oo-text{
    display: block;
    align-self: end;
    padding-bottom: 16px;
    width: 100%;
    padding: 0 32px 0 32px;
}

.oo-image-right-container img {
    align-self: right;
    width: 100%;
    padding-right: 32px;
}


@media (max-width: 768px) {
    .oo-image-right-container img {
        width: 100%;
        height: auto;
        padding-right: 0;
    }




    .oo-image-right-container {
        flex-direction: column-reverse;
    }

}
/* blocks/image-slider/block.css */

.slider-container {
    width: fit-content;
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
    position: relative;
    overflow: hidden;
    --position: 50%;
    padding: 0 32px 0 32px;
}

.image-container {
    width: 100%;
    height: auto;
    position: relative;
    aspect-ratio: 4/3;
}

.slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.image-before {
    position: absolute;
    inset: 0;
    height: var(--position); 
    border-bottom: 8px solid #F7F6F5;
}

.slider {
    position: absolute;
    cursor: pointer;
    width: 75%;
    height: 100%;
    transform: translateX(0px)  rotate(90deg) translateY(-17%) scaleY(1.35);
    opacity: 0;
}


.slider:focus-visible ~.slider-button {
    outline: 5px solid black;
    outline-offset: 3px;
}

.slider-line {
    position: absolute;
    inset: 0;
    height: .1rem;
    width: 100%;
    z-index: 10;
    top: var(--position);
    transform: translateX(-50%);
    pointer-events: none;
}

.slider-button {
    position: absolute;
    background-color: #F7F6F5;
    border-radius: 50%;
    color: black;
    padding: .5rem;
    display: grid;
    place-items: center;
    left: 50%;
    top: var(--position);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
    box-shadow: 0px 0px 3px black;
}

@media (max-width: 768px) {
    .slider-container {
        padding: 0 0 0 0;
    }
}









/* 

.complete-container {
    margin: 16px 0 32px 0;
}

img {
    display: block;
    max-width: 100%;
}

main {
    display: grid;
    place-items: center;
}

.slider-container {
    width: fit-content;
    min-width: 400px;
    max-width: 800px;
    height: auto;
    display: grid;
    place-content: center;
    position: relative;
    overflow: hidden;
    --position: 50%;
}


.slider-btn-icon {
    height: 20px;
    width: auto;
}

.image-container {
    width: 800px;
    height: auto;
    position: relative;
    aspect-ratio: 4/3;
}

.slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.image-before {
    position: absolute;
    inset: 0;
    height: var(--position); 
    border-bottom: 8px solid #ffffff;
}

.slider {
    position: absolute;
    cursor: pointer;
    opacity: 1;
    width: 100%;
    height: 100%;
    transform: rotate(90deg) translateX(-50px) translateY(-50px);
    opacity: 0;
}


.slider:focus-visible ~.slider-button {
    outline: 5px solid black;
    outline-offset: 3px;
}

.slider-line {
    position: absolute;
    inset: 0;
    width: .1rem;
    height: 100%;
    background-color: #fff;
    z-index: 10;
    top: var(--position);
    transform: translateX(-50%);
    pointer-events: none;
   
}

.slider-button {
    position: absolute;
    background-color: #383B33;
    border: 1px solid white;
    color: black;
    padding: .5rem;
    display: grid;
    place-items: center;
    left: 25%;
    top: var(--position);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
    box-shadow: 0px 0px 3px black;
}


.slider-text-container {
    margin:  16px 0 60px 0;
}



@media (max-width: 768px) {
    .slider-container {
        width: fit-content;
        max-width: 400px;
        height: 300px;
        display: grid;
        place-content: center;
        position: relative;
        overflow: hidden;
        --position: 50%;
    }
    
    
    .slider-btn-icon {
        height: 20px;
        width: auto;
    }
    
    .image-container {
        width: 400px;
        height: 300px;
        position: relative;
        aspect-ratio: 4/3;
    }
    
    .slider-image {
        width: 400px;
        height: 300px;
        object-fit: cover;
        object-position: top;
    }
    
    .image-before {
        position: absolute;
        inset: 0;
        height: var(--position); 
        border-bottom: 6px solid #ffffff;
    }
} */
/* blocks/intro-lm/block.css */
.intro-lm-container { 
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid black;
    padding: 0 32px 0 32px;
    margin-bottom: 96px;
    gap: 16px;
    }
    .intro-lm-title-heading-bar {
   
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }
    
    .intro-lm-title-text-area {
        width: 300px;
   
 
    }


    .intro-lm-main-content {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        }
        /* .intro-lm-image {
            width: 1000px;
        } */
        .intro-lm-image img {
            width: 100%;
        }
        .intro-lm-hl {
            width: 100%;
        }
        .intro-lm-container p {
            margin: 32px 0 32px 0;
            font-size: 13px;
    }
    .materials-quote-line {
        width: 50px;
        margin: 64px auto 0;
        border-bottom: 1px solid #464A40;
        opacity: .6;
    }

    .intro-lm-italic {
        margin: 0 auto 32px;
        max-width: 570px;

    }
    .intro-lm-italic p {
        font-style: italic;
        font-size: 15px;
        color: #464A40;
        text-align: center;
        opacity: .6;
       
    }

@media (max-width: 768px) {
    .intro-lm-main-content {
        flex-direction: column;
        }
        .intro-lm-image {
            width: 100%;
        }
        .intro-lm-container p {
            margin: 0px 0 32px 0;
            font-size: 13px;
    }
     
}
/* blocks/keep-reading/block.css */
.keep-reading-container {
        width: 100%;
        min-height: 400px;
        padding: 32px;
        background-color: #464A40;
        color: #EAE9E6;
    }
    
    .interested {
        font-size: 16px;
        letter-spacing: 2px;
    }
    .interested-line {
        margin: 16px 0 64px 0;
        border: 1px solid #EAE9E6;
        width: 128px;
    }
    
    .keep-reading-main-content {
        padding: 64px;
        display: flex;
        gap: 96px;
    }
    
    .building-sustainably {
        width: 100%;
    }
    
    .about-materials {
        width: 100%;
    }
    .about-materials h3, .building-sustainably h3 {
        margin-bottom: 32px;
        font-size: 27px; font-weight: 300;
        letter-spacing: 7px;
    }
    .about-materials p, .building-sustainably p {
        margin-bottom: 32px;
        font-size: 15px; font-weight: 200;
    }
    .keep-reading-link {
        display: inline-block;
        text-transform: uppercase;
        font-size: 16px;
        letter-spacing: 3px;
    }
    .keep-reading-link a {
        color: #EAE9E6;
    }
    
    .interested-separator {
        height: 128px;
        width: 1px;
        border-left: 1px solid #EAE9E6;
    }
/* blocks/services-introduction/block.css */
.services-introduction-wrap { 
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 32px;
    max-width: 100%;
    margin-bottom: 64px;
}

.services-introduction-text {
    margin: 0 0 0 auto;
    max-width: 300px;
}

.services-introduction-header { 
    font-size: 28px;
    letter-spacing: 12px;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0 0 0 auto;
}


@media (max-width: 768px) { 

    .services-introduction-header { 
        font-size: 22px;
    
    }
}

@media (max-width: 370px) { 

    .services-introduction-header { 
        font-size: 19px;
        letter-spacing: 5px;
    }
}
/* blocks/services-introduction/block.css */
.services-introduction-wrap { 
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 32px;
    max-width: 100%;
    margin-bottom: 64px;
}

.services-introduction-text {
    margin: 0 0 0 auto;
    max-width: 300px;
}

.services-introduction-header { 
    font-size: 28px;
    letter-spacing: 12px;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0 0 0 auto;
}


@media (max-width: 768px) { 

    .services-introduction-header { 
        font-size: 22px;
    
    }
}

@media (max-width: 370px) { 

    .services-introduction-header { 
        font-size: 19px;
        letter-spacing: 5px;
    }
}

/* blocks/text-image-sidebyside/block.css */
.text-image-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 0 16px 0 16px;
}

.text-image-wrap img { 
    width: 100%;
}

@media (max-width: 768px) {
    
    .text-image-wrap {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
}  
/* blocks/text-in-three-paragraphs/block.css */
.tip-wrap { 
    display: flex;
    flex-direction: column;
    width: 88%;
    margin: 64px 32px 64px 32px;
}

.tip-hl{
    padding-top: 5px;
    border-bottom: 1px solid black;
    width: 25px;
}

.tip-columns-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 32px;
    margin: 64px 0 0 32px ; 
}

.tip-column{
    width: 30%;
}

.tip-header1 , .tip-header2 , .tip-header3{
    margin: 32px 0;
}


@media (max-width: 768px) {
    
    .tip-wrap { 
        display: flex;
        flex-direction: column;
    }
    .tip-column{
        width: 70%;
    }

    .tip-columns-wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .tip-columns-wrapper {
        margin-left: 0px;
     }
}
/* blocks/text-with-lead-paragraph-left/block.css */
.textwlead-container { 
    display: block;
    width: 100%;
    margin-bottom: 16px;
    padding: 0 32px 0 32px;
}
.textwlead-container h2 {
    font-size: 26px;
    letter-spacing: 4px;
    font-weight: 400;
}

.textwlead-textarea { 
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
 .textwlead-lead {
    font-size: 20px;
    font-weight: 300;
 }

@media (max-width: 768px) {
   .textwlead-container { 
        flex-direction: column;

    } 

    .textwlead-textarea { 
        width: 100%;
    }

    .textwlead-title {
        letter-spacing: 8px;
        font-size: 26px;
    }
            .textwlead-lead { 
                font-size: 19px;
                font-weight: 400;
            }

}
/* blocks/text-with-lead-paragraph-right/block.css */
.right-textwlead-container { 
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 0 0 0 auto;
    padding: 0 32px 0 32px;
}

.right-textwlead-textarea { 
    display: flex;
    flex-direction: column;
    gap: 16px;

}
h2.right-textwlead-title {
    font-size: 26px;
    letter-spacing: 4px;
    font-weight: 400px;
}

        .right-textwlead-lead { 
            font-size: 20px;
            font-weight: 300;
        }


@media (max-width: 768px) {
    .right-textwlead-container { 
        margin: 0 0 32px 0;
      
        width: 100%;
    } 

    .right-textwlead-title {
        letter-spacing: 8px;
        font-size: 26px;
    }
            .right-textwlead-lead { 
                font-size: 19px;
                font-weight: 400;
            }
}
/* blocks/three-images-and-text/block.css */
.three-images-and-text-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 32px;
    margin: 32px 0 32px 0;
   
    }
        .three-images-and-text-image-container {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            position: block;
            width: 100%;
            max-height: 250px;
            gap: 32px;
            }
            .three-image-and-text-image img {
                object-fit: contain;
                height: 100%;
                width: 100%;
}




@media (max-width: 768px) {
    .three-images-and-text-image-container {
        flex-direction: column;
        max-height: 100%;
    }
    .three-images-and-text-text-container {
        padding: 0 32px 0 32px;
    }
}
/* blocks/two-images-and-text/block.css */
.two-images-and-text-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 32px 0 32px 0;
    gap: 16px;
}

.two-images-and-text-image-container {
    display: flex;
    width: 100%;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    gap: 32px;
    }
    .two-images-and-text-image-container img {
        display: block;
        width: 100%;
        height: 100%;
 }

 .two-images-and-text-text-container {
    display: flex;
    align-self: flex-end;
    width: 50%;
 }

@media (max-width: 500px) {
   
    .two-images-and-text-container {
        padding: 0 32px 0 32px;
    }
    .two-images-and-text-text-container {
        width: 100%;
     }

}