header{height: 100svh;}
.heroOverlay{background-color: #25252550; position: absolute; width: 100%; height: 100svh; top: 0; left: 0; z-index: -1;}
h1{max-width: 900px; text-align: center; color: #fff;}


.emails > * > a, .phone > a{text-decoration: underline dotted #ccc !important;}


        #heroVid{
  object-fit: cover;
  width: 100svw;
  height: 100svh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
}

@media screen and (min-width: 1200px){
    

    
    #heroSection{
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 100px;
        
    }

    .heroBtns{
        margin-top: 100px;
        display: flex;
        column-gap: 35px;
        justify-content: center;
    }
    
    .hero-con{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        
    }



.socials{display: flex; column-gap: 15px;}
.left-footer{display: flex; 
    flex-direction: column; 
    row-gap: 50px; 
    max-width: 600px;
}
.right-footer{display: flex; width: 100%; justify-content: space-around; max-width: 600px;}
footer{display: flex; width: 100%; justify-content: space-around; padding-block: 100px 25px; padding-inline: 50px; max-width: 1440;}
.right-footer > ul > li{margin-block: 15px;}
.emails{display: flex; justify-content: space-between;}
.emails > * > p, .phone > p{padding-bottom: 5px;}


article{width: 700px; background-color: #fff; padding: 35px; display: flex; flex-direction: column; row-gap: 15px; border-radius: 8px; border-left: solid 5px var(--primary);}

article > div > .info{ color: var(--primary); background-color: var(--primary-10); font-weight: 500; padding: 5px 15px; width: fit-content; border-radius: 6px;}
article > div > .date{color: var(--light-text); font-weight: 500;}
article > div {display: flex; width: 100%; justify-content: space-between; align-items: center;}
article > p {color: var(--light-text);}
article > div > .cta{color: var(--primary); font-weight: bold;}
article > h2, .author, .cta {margin-top: 25px;}

.author > img {width: 50px; height: 50px;}
.author, .cta{display: flex; align-items: center; column-gap: 10px; font-weight: 700; padding: 10px 15px; border-radius: 6px; cursor: pointer;} 

.cta-img{width: 25px;}

.blogg-con{display: flex; gap: 50px; width: fit-content; margin-block: 50px; flex-wrap: wrap;}
.blogg-section{padding-left: 150px;}

}





@media screen and (max-width: 1200px){
    h1{text-align: left !important;}
    
    #heroSection{
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 35px;
        
    }

    .heroBtns{
        display: flex;
        row-gap: 25px;
        justify-content: center;
        flex-direction: column;
        margin-top: 50px;
    }
    
    .hero-con{
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        padding: 15px 25px;
    }



    .socials{display: flex; column-gap: 15px;}
.left-footer{display: flex; 
    flex-direction: column; 
    row-gap: 50px; 
    
}
.right-footer{display: flex; width: 100%; justify-content: space-between; margin-top: 50px; flex-wrap: wrap; }
footer{display: flex; width: 100%; justify-content: space-around; flex-wrap: wrap; padding-block: 50px; padding-inline: 15px;}
.right-footer > ul > li{margin-block: 15px;}
.emails{display: flex; justify-content: space-between; flex-wrap: wrap; }
.emails > * > p, .phone > p{padding-bottom: 5px;}


.right-footer, .emails{row-gap: 35px;}

.right-footer, .left-footer{width: 100%; max-width: 750px;}



article{width: 100%; max-width: 700px; background-color: #fff; padding: 20px; display: flex; flex-direction: column; row-gap: 15px; border-radius: 4px; border-left: solid 5px var(--primary);}

article > div > .info{ color: var(--primary); background-color: var(--primary-10); font-weight: 500; padding: 5px 15px; width: fit-content; border-radius: 6px;}
article > div > .date{color: var(--light-text); font-weight: 500;}
article > div {display: flex; width: 100%; justify-content: space-between; align-items: center;}
article > p {color: var(--light-text);}
article > div > .cta{color: var(--primary); font-weight: bold;}
article > h2, .author, .cta {margin-top: 25px;}



.author > img {width: 50px; height: 50px;}
.author, .cta{display: flex; align-items: center; column-gap: 10px; font-weight: 700; padding: 10px 15px; border-radius: 6px; cursor: pointer;} 

.cta-img{width: 25px;}

.blogg-con{display: flex; gap: 50px; width: fit-content; margin-block: 50px; flex-wrap: wrap; justify-content: flex-start;}
.blogg-section{padding-inline: 10vw;}
    
.blogg-section > h2{text-align: left;}

}