/*
Theme Name: Skelt
Theme URI: 
Author: Quentin CERNO
Author URI: 
Description: Theme Skelt
Requires at least: WordPress 5.0
Version: 1.0
*/

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

*{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

body{
    background-color: rgb(255, 255, 255);
}

html{
    height: 100%;
}


/* Hero section */

.hero-section{
    position: relative;
    height: 100%;
    min-height: 100%;
}

.hero-section .hero-background img{
    position: absolute;
    height: 100vh;
    width: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-section .hero-background > video{
    position: absolute;
    height: 100vh;
    width: 100%;
    object-fit: cover;
    z-index: 2;
}

.hero-content {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    z-index: 3;
}

.hero-content .title h1{
    text-align: center;
    color: white;
    font-size: 6vw;
    font-weight: 600;
}

.hero-content .sub-title h2{
    text-align: center;
    color: white;
    font-size: 4vw;
    font-weight: 300;
}

.hero-content .button { 
    display: flex;
    justify-content: center;  
    align-items: center;
    flex-wrap: wrap; 
    margin-top: 25px;
}

.hero-content .button #first {
    margin: 10px;
    background-color: transparent;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid white ;    
}

.hero-content .button #first:hover {
    margin: 10px;
    background-color: white;
    color: black;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid white ;    
}

.hero-content .button #second {
    margin: 10px;
    background-color: var(--secondary-color);
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--secondary-color) ;    
}

.hero-content .button #second:hover {
    margin: 10px;
    background-color: white;
    color: black;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid white ;    
}

.hero-content .video-button{
    margin-top: 20px;
}

.hero-content .video-button button{
    display: flex;
    align-items: center;
    background-color: transparent;
    fill: white;
    color: white;
    font-size: 15px;
    font-weight: 400;
    border: 2px solid white;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.hero-content .video-button button:hover{
    fill: black;
    color: black;
    border: 2px solid white;
    background-color: white;
    transition: all 0.3s ease;
}

.hero-content .video-button svg{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}


@media (max-width: 750px){
    .hero-content .button { 
        display: flex;
        flex-direction: column;
        justify-content: center;  
        align-items: center;
    }
}

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

/* Pitch section */
.pitch-section-title {
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px;
    color: var(--main-color);
    font-size: 50px;
    font-weight: 400;
    text-align: center;
    justify-content: center;
}
.pitch-section {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.pitch-section-container{
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 30px;
}

.pitch-section-container .container{
   width: 30%;
   height: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
}

.pitch-section-container .container img{
    width: 60%;
 }

.pitch-section-container .container .content { 
    padding: 25px;
    text-align: center;
}

.pitch-section-container .container .content h3{
  
  margin-bottom: 10px;
  padding-top: 10px;
  color: var(--main-color);
  font-size: 25px;
}

.pitch-section-container .container .content p{
    color: #666;
}

@media (max-width: 760px){
    .pitch-section-container{
        flex-direction: column;
        align-items: center;
    }

    .pitch-section-container .container{
        width: 70%;
        margin-bottom: 15px;
     }
  }


  @media (max-width: 500px){
    .pitch-section-title {
        font-size: 30px;
    }

    .pitch-section-container .card{
        margin: 20px;
     }
  }
/*Video list section */

.video-list-section {
    margin-top: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.video-list-section .title {
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    color: var(--main-color);
    font-size: 50px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 40px;
}

.video-list-section .container{
    height: 300px;
    width: 100%;
    z-index: 1;
}

.video-list-section .container video{
    position: absolute;
    height: 300px;
    width: 100%;
    object-fit: cover;
    z-index: 2;
}

.video-list-section .container .content{
    position: relative;
    display: flex;
    height: 300px;
    width: 100%;
    justify-content: start;
    align-items: center;
    background-color: rgba(0,0,0,0.3);
    z-index: 3;
}
.video-list-section .container .content .content-container-left{
    display: flex;
    height: auto;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 70px;
}

.video-list-section .container .content .content-container-right{
    display: flex;
    height: auto;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    margin-right: 70px;
}


.video-list-section .container .content .content-container-left h3{
    color: white;
    font-size: 40px;
}

.video-list-section .container .content .content-container-left a{
    margin: 10px;
    background-color: transparent;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid white ;    
    cursor: pointer;
}


.video-list-section .container .content .content-container-left a:hover{
    margin: 10px;
    background-color: white;
    color: black;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid white ;    
}

.video-list-section .container .content .content-container-right h3{
    color: white;
    font-size: 40px;
}

.video-list-section .container .content .content-container-right a{
    margin: 10px;
    background-color: transparent;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid white ;  
    cursor: pointer;  
}


.video-list-section .container .content .content-container-right a:hover{
    margin: 10px;
    background-color: white;
    color: black;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid white ;    
}

@media (max-width: 500px){
    .video-list-section .title {
        font-size: 30px;
    }
    .video-list-section .container .content{
        justify-content: center;
    }

    .video-list-section .container .content .content-container-left{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 0px;
    }

    .video-list-section .container .content .content-container-left h3{
        font-size: 30px;
    }

    .video-list-section .container .content .content-container-right{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 0px;
    }

    .video-list-section .container .content .content-container-right h3{
        font-size: 30px;
    }
}
/*Video list section */

/*Call to action section */

.cta-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #e7e7e7;
}

.cta-section h2{
   text-align: center;
   color: var(--main-color);
   font-size: 40px;
   font-weight: 400;
   margin-left: 10px;
   margin-right: 10px;
}

.cta-section h3{
    text-align: center;
    color: var(--main-color);
    font-size: 20px;
    font-weight: 400;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
 }

 .cta-section a{
    margin: 10px;
    margin-top: 20px;
    background-color: var(--secondary-color);
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--secondary-color);
    cursor: pointer;
 }

 .cta-section a:hover{
    margin: 10px;
    margin-top: 20px;
    background-color: var(--main-color);
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--main-color) ;
 }

 @media (max-width: 500px){
    .cta-section h2{
        font-size: 30px;
     }
     
     .cta-section h3{
         font-size: 20px;
      }
 }

 /*Image and text section */

.image-and-text-section{
    width: 100%;
    height: 500px;
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.image-and-text-section .image-container{
    width: 50%;
    height: 500px;
}

.image-and-text-section .image-container img{
    position: absolute;
    width: 50%;
    height: 500px;
    object-fit: cover;
    box-shadow: 7px 1px 11px -1px rgba(0,0,0,0.50);
}

.image-and-text-section .container{
   width: 50%;
   height: 500px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: var(--main-color);
}

.image-and-text-section .container h2{
    text-align: start;
    font-size: 30px;
    color: white;
    text-transform: uppercase;
    margin-bottom: 20px;
 }

 .image-and-text-section .container p{
    text-align: justify;
    font-size: 20px;
    color: white;
    padding-left: 50px;
    padding-right: 50px;
    margin-bottom: 20px;
 }

 .image-and-text-section .container a{
    font-size: 15px;
    background-color: transparent;
    color: white;
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid white ;
 }

 .image-and-text-section .container a:hover{
    font-size: 15px;
    background-color: white;
    color: var(--main-color);
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid white ;
 }

 @media (max-width: 780px){

    .image-and-text-section{
        width: 100%;
        height: 1000px;
        margin-top: 50px;
        margin-bottom: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: space-between;
    }

    .image-and-text-section .image-container{
        width: 100%;
        height: 500px;
    }
    
    .image-and-text-section .image-container img{
        width: 100%;
        height: 500px;
    }

    .image-and-text-section .container{
        width: 100%;
        height: 500px;
     }
     
     .image-and-text-section .container h2{
         text-align: start;
         font-size: 30px;
         color: white;
         text-transform: uppercase;
         margin-bottom: 20px;
      }
     
      .image-and-text-section .container p{
         text-align: justify;
         font-size: 20px;
         max-width: 500px;
         color: white;
         padding-left: 20px;
         padding-right: 20px;
         margin-bottom: 20px;
      }
    
}
 /*Image and text section */

/*Product field section */

.product-section-title {
    margin-top: 50px;
    margin-left: 10px;
    margin-right: 10px;
    color: var(--main-color);
    font-size: 50px;
    font-weight: 400;
    text-align: center;
}

.product-section {
    width: 100%;
}

.product-section-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.product-section-container .card{
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   width: 300px;
   height: 420px;
   background: #fff;
   margin-top: 25px;
   border-radius: 20px;
   padding: 30px;
   overflow: hidden;
   box-shadow: 0 15px 25px rgba(0,0,0,0.2);
   transition: 0.5s;
   margin-left: 20px;
   margin-right: 20px;
 }

 .product-section-container .card img{
    width: 55%;
    height: 30%;
    object-fit: cover;
    border-radius: 5px;
 }

 .product-section-container .card .content{
    height: auto;
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
 }

 .product-section-container .card .content h3{
    color: var(--main-color);
    text-transform: uppercase;
    font-size: 22px;
    text-align: center;
 }


 .product-section-container .card .content p{
    margin-top: 5px;
    color: var(--main-color);
    font-size: 15px;
    text-align: center;
 }

 .product-section-container .card .content a{
    font-size: 15px;
    background-color: transparent;
    color: var(--secondary-color);
    font-size: 18px;
    margin-top: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--secondary-color) ;
 }

 .product-section-container .card .content a:hover{
    font-size: 15px;
    background-color: var(--secondary-color);
    color: white;
    font-size: 18px;
    margin-top: 10px;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid var(--secondary-color) ;
 }

 @media (max-width: 1020px){

     .product-section-container .card {
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        width: 400px;
        height: 620px;
     }

     .product-section-container .card img{
        height: 370px;
        width: 400px;
        object-fit: contain;
        border-radius: 5px;
    }

    .product-section-container .card .content{
        height: 370px;
        width: 370px;
        display: flex;
        flex-direction: column;
        align-items: center;
     }

     .product-section-container .card .content p{
        text-align: justify;
     }

 }

 @media (max-width: 500px){

    .product-section-title {
        font-size: 30px;
    }

    .product-section-container .card {
       flex-direction: column;
       justify-content: space-around;
       align-items: center;
       width: 80%;
       height: 520px;
    }

    .product-section-container .card img{
       height: 270px;
       width: 250px;
       object-fit: contain;
       border-radius: 5px;
   }

   .product-section-container .card .content{
       height: 280px;
       width: 230px;
       display: flex;
       flex-direction: column;
       align-items: center;
    }

    .product-section-container .card .content h3{
        font-size: 25px;
        text-align: center;
     }

    .product-section-container .card .content p{
       font-size: 12px;
       text-align: justify;
    }

}

.news-section{
    height: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}


.news-section h2{
    margin-top: 40px;
    margin-bottom: 30px;
    color: var(--main-color);
    font-size: 50px;
    font-weight: 400;
    text-align: center;
}

.news-section .flexbox{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.news-section .container{
    width: 70%;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.news-section .container .first-post{
    width: 50%;
    height: 600px;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0px 2px 5px grey;
    border-radius: 8px;
    cursor: pointer;
}

.news-section .container .first-post:hover{
    transition: all 0.2s ease;
    box-shadow: 0px 6px 5px grey;
}

.news-section .container .first-post img{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.news-section .container .first-post .overlay{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-color: #666;
    opacity: 0.5;
}

.news-section .container .first-post .content{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    top: 0;
    left: 0;
}

.news-section .container .first-post .content h3{
    color: white;
    font-size: 30px;
    font-weight: 400;
    margin-left: 10px;
    margin-right: 10px;
}

.news-section .container .first-post .content .excerpt{
    color: white;
    font-size: 15px;
    font-weight: 200;
    margin-left: 10px;
    margin-right: 10px;
}

.news-section .container .first-post .content .info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-top: 15px;
 }

.news-section .container .first-post .content .info .date {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-left: 15px;
 }

 .news-section .container .first-post .content .info .author {
    display: flex;
    align-items: center;
 }

 .news-section .container .first-post .content .info .date .fa-calendar-day{
   margin-right: 8px;
   color: white;
 }

 .news-section .container .first-post .content .info .author .fa-pen{
    margin-right: 8px;
    color: white;
  }

  .news-section .container .first-post .content .info .date p{
    padding: 0;
    font-weight:400;
    font-style: italic;
    min-width: 150px;
    color: white;
 }

 .news-section .container .first-post .content .info .author p{
    padding: 0;
    font-weight:400;
    font-style: italic;
    color: white;
 }




 .news-section .container-right{
    width: 40%;
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.news-section .container-right .second-third-post{
    width: 100%;
    height: 48%;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0px 2px 5px grey;
    border-radius: 8px;
    cursor: pointer;
}

.news-section .container-right .second-third-post:hover{
    transition: all 0.2s ease;
    box-shadow: 0px 6px 5px grey;
}

.news-section .container-right .second-third-post img{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.news-section .container-right .second-third-post .overlay{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-color: #666;
    opacity: 0.5;
}

.news-section .container-right .second-third-post .content{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    top: 0;
    left: 0;
}

.news-section .container-right .second-third-post .content h3{
    color: white;
    font-size: 25px;
    font-weight: 400;
    margin-left: 10px;
    margin-right: 10px;
}

.news-section .container-right .second-third-post .content .excerpt{
    color: white;
    font-size: 12px;
    font-weight: 200;
    margin-left: 10px;
    margin-right: 10px;
}

.news-section .container-right .second-third-post .content .info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-top: 15px;
    font-size: 15px;
 }

.news-section .container-right .second-third-post .content .info .date {
    display: flex;
    align-items: center;
    margin-right: 20px;
 }

 .news-section .container-right .second-third-post .content .info .author {
    display: flex;
    align-items: center;
 }

 .news-section .container-right .second-third-post .content .info .date .fa-calendar-day{
   margin-right: 8px;
   color: white;
   margin-left: 15px;
 }

 .news-section .container-right .second-third-post .content .info .author .fa-pen{
    margin-right: 8px;
    color: white;
  }

 .news-section .container-right .second-third-post .content .info .date p{
    padding: 0;
    font-weight:400;
    font-style: italic;
    min-width: 150px;
    color: white;
 }

 .news-section .container-right .second-third-post .content .info .author p{
    padding: 0;
    font-weight:400;
    font-style: italic;
    color: white;
 }

 .news-section .cta{
     margin-top: 20px;
     background-color: transparent;
     padding: 10px;
     color: var(--main-color);
     text-decoration: none;
     border-radius: 8px;
     border: 2px solid var(--main-color);
     text-align: center;
     width: 15%;
     transition: all 0.3s ease;
     min-width: 100px;
 }

 .news-section .cta:hover{
    background-color: var(--main-color);
    color: white;
    transition: all 0.3s ease;
}

@media(max-width: 1050px){
    
    .news-section .container .first-post .content .info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
     }
    
     .news-section .container .first-post .content .info .date {
        margin-left: 0px;
        margin-top: 10px;
     }
    
    .news-section .container-right .second-third-post .content h3{
        font-size: 18px;
    }

    .news-section .container-right .second-third-post .content .info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .news-section .container-right .second-third-post .content .info .date .fa-calendar-day{
        margin-left: 0px;
      }

      .news-section .container-right .second-third-post .content .info .date {
        margin-top: 10px;
     }
}

@media(max-width: 785px){
    .news-section{
        height: 1400px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    
    .news-section .container{
        width: 70%;
        height: 1200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
    }

    .news-section .container .first-post{
        width: 100%;
        height: 350px;
    }

    .news-section .container .first-post .content h3{
        color: white;
        font-size: 18px;
    }

    .news-section .container .first-post .content .excerpt{
        font-size: 12px;
    }

    .news-section .container .first-post .content .info {
        font-size: 15px;
     }

     .news-section .container-right .first-post .content .info {
        flex-direction: row;
        align-items: flex-start;
    }

    .news-section .container-right{
        width: 100%;
        height: 80%;
    }

    .news-section .container .second-third-post{
        margin-top: 30px;
    }
}

/* images gallery section */

.images-gallery-section{
    width: 100%;
    height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
}

.images-gallery-section h2{
    margin-top: 40px;
    margin-bottom: 30px;
    color: var(--main-color);
    font-size: 50px;
    font-weight: 400;
    text-align: center;
}

.images-gallery-section .images-gallery{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.images-gallery-section .images-gallery .first-row{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin-bottom: 15px;
}

.images-gallery-section .images-gallery .first-row .img{
    width: calc((100% - 30px) / 3);
    height: auto;
    border-radius: 5px;
    box-shadow: 0px 2px 5px grey;
    cursor: zoom-in;
    transition: all 0.2s ease;
}

.images-gallery-section .images-gallery .first-row .img:hover{
    filter: grayscale(80%);
    transition: all 0.2s ease;
}



.images-gallery-section .images-gallery .second-row{
    display: flex;
    justify-content: space-between;
    width: 90%;
}

.images-gallery-section .images-gallery .second-row .img{
    width: calc((100% - 15px) / 2);
    height: auto;
    border-radius: 5px;
    box-shadow: 0px 2px 5px grey;
    cursor: zoom-in;
    transition: all 0.2s ease;
    object-fit: cover;
}

.images-gallery-section .images-gallery .second-row .img:hover{
    filter: grayscale(80%);
    transition: all 0.2s ease;
}


.images-gallery-section .images-gallery .mySlides{
    display: none;
}

/* Slideshow container */
.images-gallery-section .slideshow-container {
    position: relative;
    margin: auto;
    width: 90%;
    height: auto;
    margin-top: 15px;
  }

  .images-gallery-section .slideshow-container .img{
    object-fit: cover;
    width: 100%;
    height: 500px;
    border-radius: 5px;
    box-shadow: 0px 2px 5px grey;
    transition: all 0.2s ease;
    cursor: zoom-in;
  }

  .images-gallery-section .slideshow-container .img:hover{
    filter: grayscale(80%);
    transition: all 0.2s ease;
  }

/* Next & previous buttons */
.images-gallery-section .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

  .images-gallery-section .prev, .next i{
    color: white;
    font-size: 30px;
  }

/* Position the "next button" to the right */
.images-gallery-section  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

/* On hover, add a black background color with a little bit see-through */
.images-gallery-section .prev:hover, .next:hover {
    background-color: #6180BB;
  }

/* The dots/bullets/indicators */
.images-gallery-section .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #6180BB;
    opacity: 0.2;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .images-gallery-section  .dot-active {
    background-color: #6180BB;
    opacity: 1;
    transition: 0.3s ease;
  }

  .images-gallery-section .dot:hover {
    background-color: #6180BB;
    opacity: 0.6;
    transition: 0.3s ease;
  }

  /* Fading animation */
  .images-gallery-section .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }


  @-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }

  /* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .images-gallery-section .prev, .next,.text {font-size: 11px}
  }

  .product-categories-section{
    background-color: #ebebeb;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-categories-section #categories-section-title{
    margin-bottom: 20px;
    font-size: 40px;
    color: var(--main-color);
    text-align: center;
}

.product-categories-section .container{
    width: 80%;
    height: fit-content;
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.product-categories-section .container .categorie{
    width: 30%;
    height: 300px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

.product-categories-section .container .categorie img{
    width: 100%;
    height: 80%;
    object-fit: cover;
}

.product-categories-section .container .categorie h3{
    color: var(--main-color);
    font-size: 25px;
    margin-top: 10px;
}

.product-categories-section .container .categorie a{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(190, 190, 190);
    opacity: 0;
    transition: all 0.3s ease;
}

.product-categories-section .container .categorie a:hover{
    opacity: 0.5;
    transition: all 0.3s ease;
}


/* footer */
footer{
    margin-top: auto;
}
.site-footer
{
  display: flex;
  flex-direction: column;
  background-color:#26272b;
  padding:45px 20px 45px 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
  bottom: 0;
}

.site-footer .footer-container
{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-footer .footer-container .footer-content
{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.site-footer .footer-container .about
{
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  max-width: 40%;
}

.site-footer .footer-container .about h3
{
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.site-footer .footer-container .quick-links
{
  display: flex;
  flex-direction: column;
  padding-left: 30px;
  max-width: 700px;
}

.site-footer .footer-container .quick-links h3
{
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.site-footer .footer-container .quick-links  ul
{
    list-style: none;
}

.site-footer .footer-container .quick-links  a
{
  color: #737373;
  font-size: 15px;
  margin-bottom: 10px;
  text-decoration: none;
}

.site-footer .footer-container .quick-links  a:hover
{
  color: white;
  font-size: 15px;
  margin-bottom: 10px;
  text-decoration: none;
}

.site-footer .footer-info{
    padding-top: 45px;
}

@media (max-width: 480px){
    .site-footer .footer-container .about
    {
        max-width: unset;
    }

    .site-footer .footer-container .quick-links
    {
        padding-left: 0px;
    }

    .site-footer .footer-container .footer-content
    {
        justify-content: flex-start;
    }
}


/*Services page */

.hero-section-services{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: auto;
    padding-top:150px;
    margin-bottom: 50px;
}

.hero-section-services img{
    object-fit: cover;
    width: 500px;
    height: auto;
}

.hero-section-services .content{
    width: 500px;
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    margin-right: 20px;
}

.hero-section-services .content h1{
    font-size: 40px;
    color: var(--main-color);
    margin-bottom: 15px;
}

.hero-section-services .content p{
    font-size: 20px;
    font-weight: 100;
    color: var(--main-color);
    margin-bottom: 15px;
}

.hero-section-services .content h2{
    font-size: 30px;
    color: var(--main-color);
    margin-bottom: 15px;
}

.hero-section-services .content .cta-container{
    display: flex;
    flex-direction: column;
}

.hero-section-services .content .cta-container .cta-1{
    margin: 10px;
    text-align: center;
    background-color: var(--secondary-color);
    color: white;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid var(--secondary-color) ;
    transition: all 0.3s ease;
    box-shadow: 0px 2px 5px grey; 
}

.hero-section-services .content .cta-container .cta-1:hover{
    margin: 10px;
    background-color: var(--secondary-color);
    color: white;
    font-size: 20px;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.1s ease;
    border: 2px solid var(--secondary-color) ; 
    box-shadow: 0px 5px 5px grey; 
}

.hero-section-services .content .cta-container .cta-2{
    margin: 10px;
    text-align: center;
    background-color: var(--main-color);
    color: white;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0px 2px 5px grey; 
    border: 2px solid  var(--main-color); 
}

.hero-section-services .content .cta-container .cta-2:hover{
    margin: 10px;
    background-color:  var(--main-color);
    color: white;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.1s ease;
    border: 2px solid  var(--main-color) ; 
    box-shadow: 0px 5px 5px grey; 
}

.video-list-services-section{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 15px;
}

.video-list-services-section .container{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 30px;
    padding-top: 30px;
}

.video-list-services-section .container .content-container{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.video-list-services-section .container .content-container .location{
   display: flex;
   align-items: center;
   margin-bottom: 8px;
}

.video-list-services-section .container .content-container .location img{
    width: 10%;
    height: auto;
    margin-right: 4px;
 }

.video-list-services-section .container .content-container h2{
    color: var(--main-color);
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.video-list-services-section .container .content-container h3{
    color: var(--main-color);
    font-size: 30px;
    font-style: italic;
    font-weight: 300;
}

.video-list-services-section .container .content-container p{
    color: var(--main-color);
    font-size: 20px;
    margin-bottom: 8px;
}

.video-list-services-section .container .thumbnail-container{
    position: relative;
    width: 35%;
    height: 250px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 5px 5px grey;
    transition: all 0.2s ease;
    max-width: 500px;
    cursor: pointer;
}

.video-list-services-section .container .thumbnail-container:hover{
    box-shadow: 0px 10px 5px grey;
    transition: all 0.2s ease;
}

.video-list-services-section .container .thumbnail-container img{
    position: absolute;
    object-fit: cover;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.video-list-services-section .container .thumbnail-container .content{
    position: absolute;
    border-radius: 15px;
    background-color: rgb(104, 104, 104);
    opacity: 0.5;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.video-list-services-section .container .thumbnail-container .content {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    z-index: 3;
}

.video-list-services-section .container .thumbnail-container .content  img{
    position: absolute;
    height: 50%;
    width: 50%;
    z-index: 4;
    object-fit: contain;
}

 

.video-player{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10000;
    background: rgba(0, 0, 0, 0.95);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
}

.video-player .close{
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
    max-width: 32px;
    max-height: 32px;
}

 .video-player.active{
    visibility: visible;
    opacity: 1;
}


 .video-player video{
    position: relative;
    max-width: 900px;
    outline: none;
}

.image-section-title{
    color: var(--main-color);
    font-weight: 400;
    font-size: 35px;
    text-align: center;
    margin-bottom: 40px;
    margin-left: 20px;
    margin-right: 20px;
}


.image-list-services-section{
    width: 100%;
    height: auto;
    min-height: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(245, 245, 245);
}

.image-list-services-section .container{
    width: 100%;
    height: 100%;
    margin: 5%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.image-list-services-section .image-container{
    width: 30%;
    height: 250px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    z-index: 0;
    margin-bottom: 30px;
    box-shadow: 0px 4px 10px rgb(195, 195, 195);
    transition: all 0.3s ease;
    cursor: pointer;
}

.image-list-services-section .image-container:hover{
    box-shadow: 0px 15px 10px rgb(195, 195, 195);
    transition: all 0.3s ease;
    
}

.image-list-services-section .image-container img{
    height: 100%;
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    z-index: 1;
}

.image-list-services-section .image-container .description{
    height: 20%;
    width: 100%;
    background-color: white;
    bottom: 0%;
    opacity: 0.8;
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-list-services-section .image-container .description h3{
    color: black;
    font-weight: 300;
    font-size: 1.7vw;
    
}

.image-full{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10000;
    background: rgba(0, 0, 0, 0.90);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    opacity: 0;
}

.image-full .close{
    position: absolute;
    top: 30px;
    right: 30px;
    cursor: pointer;
    max-width: 32px;
    max-height: 32px;
}

.image-full.active{
    visibility: visible;
    opacity: 1;
}

.image-full img{
    position: relative;
    width: 70%;
    height: auto;
    max-width: 900px;
    outline: none;
    border-radius: 8px;
}

@media (max-width: 1050px){
    .hero-section-services img{
        object-fit: cover;
        width: 400px;
        height: auto;
    }

    .hero-section-services .content{
        width: 400px;
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        margin-right: 20px;
    }

    .video-list-services-section .container .content-container h2{
        font-size: 40px;
    }
    
    .video-list-services-section .container .content-container h3{
        color: var(--main-color);
        font-size: 30px;
        font-style: italic;
        font-weight: 300;
    }
    
    .video-list-services-section .container .content-container p{
        font-size: 20px;
    }
}

@media (max-width: 950px){
    .video-player video{
        position: relative;
        max-width: 700px;
        outline: none;
    }
}

@media (max-width: 840px){
    .hero-section-services img{
        object-fit: cover;
        width: 400px;
        height: auto;
    }

    .hero-section-services .content{
        width: 700px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 30px;
        margin-right: 30px;
    }

    .hero-section-services .content p{
        text-align: justify;
        
    }

    .video-list-services-section .container .content-container h2{
        font-size: 30px;
    }
    
    .video-list-services-section .container .content-container h3{
        color: var(--main-color);
        font-size: 20px;
        font-style: italic;
        font-weight: 300;
    }
    
    .video-list-services-section .container .content-container p{
        font-size: 17px;
        text-align: center;
        margin-bottom: 20px;
    }

    .video-list-services-section .container .thumbnail-container{
        width: 60%;
    }

    .video-list-services-section .container{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-bottom: 30px;
        padding-top: 30px;
    }

    .video-list-services-section .container .content-container{
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .video-player video{
        position: relative;
        max-width: 500px;
        outline: none;
    }

    .image-section-title{
        font-size: 30px;
    }
    
    
    
}
@media (max-width: 540px){
    .hero-section-services img{
        width: 280px;
    }

    .video-player video{
        position: relative;
        max-width: 300px;
        outline: none;
    }

    .image-section-title{
        font-size: 25px;
    }
        
    .image-list-services-section .container{
        flex-direction: column;
    }
    
    .image-list-services-section .image-container{
        width: 70%;
    }
    
    
    
    .image-list-services-section .image-container .description{
        height: 20%;
        width: 100%;
        background-color: white;
        bottom: 0%;
        opacity: 0.8;
        position: absolute;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .image-list-services-section .image-container .description h3{
        color: black;
        font-weight: 300;
        font-size: 3vw;
        
    }
}

@media (max-width: 450px){
    .hero-section-services img{
        width: 280px;
    }

    .video-player video{
        position: relative;
        max-width: 300px;
        outline: none;
    }
}

/* Contact page */

.contact-page-margin{
    margin-top: 100px;
}


.appointment-section{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.appointment-section .card{
    width: 900px;
    height: auto;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0px 4px 10px grey;
    display: flex;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
}

.appointment-section .card img{
    width: 28%;
    height: auto;
}   

.appointment-section .card .cta-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
}

.appointment-section .card .cta-content h2{
    text-align: center;
    color: var(--main-color);
    font-size: 25px;
    margin-bottom: 15px;
}

.appointment-section .card .cta-content .cta{
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    background-color:  var(--main-color);
    border: 2px solid  var(--main-color);
    border-radius: 5px;
    padding: 10px 20px;
    box-shadow: 0px 4px 5px grey;
    transition: all 0.3s ease;
    cursor: pointer;
}

.appointment-section .card .cta-content .cta:hover{
    background-color: var(--main-color);
    border: 2px solid var(--main-color);
    transition: all 0.3s ease;
}

.title-transition h3{
    font-size: 30px;
    color: var(--main-color);
    text-align: center;
}

.contact-form-section{
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-form-section .form-card{
    position: relative;
    width: 600px;
    height: 600px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0px 4px 10px grey;
    margin-left: 250px;
}

.contact-form-section .form-card .info-card{
    position: absolute;
    width: 350px;
    height: 500px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px grey;
    top: 40px; left: -250px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-form-section .form-card .info-card .text{
    display: flex;
    color: white;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.contact-form-section .form-card .info-card .text p{
    padding-top: 15px;
    font-size: 3
    20px;
    text-align: center;
    margin-left: 30px;
    margin-right: 30px;
}

.form-content{
    padding-top: 70px;
    padding-left: 150px;
    padding-right: 40px;
}

@media (max-width: 1024px){

    .contact-form-section{
        height: 1200px;
        padding-top: 30px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .contact-form-section .form-card{
        margin-left: 0px;
    }
    
    .contact-form-section .form-card .info-card{
        top: 650px; left: 130px;
    }

    .form-content{
        padding-top: 70px;
        padding-left: 50px;
        padding-right: 40px;
    }

    .appointment-section .card{
        width: 600px;
    }
}

@media (max-width: 768px){

    .contact-form-section .form-card{
        margin-left: 0px;
        width: 400px;
    }
    
    .contact-form-section .form-card .info-card{
        top: 650px; left: 25px;
    }

    .appointment-section .card{
        width: 400px;
        height: auto;        
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .appointment-section .card img{
        margin-bottom: 10px;
    }  

}

@media (max-width: 480px){

    .contact-form-section .form-card{
        margin-left: 0px;
        width: 300px;
    }
    
    .contact-form-section .form-card .info-card{
        width: 300px;
        top: 650px; left: 0px;
    }

    .appointment-section .card{
        width: 300px;
        height: auto;        
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

}

.social-media-footer{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30px;
    font-size: 10px;
}
.social-media-footer i{
    margin-left: 10px;
    margin-right: 10px;
    color: #666;
    transition: all 0.3s ease;
}

.social-media-footer #facebook:hover{
    opacity: 1;
    color: #1877f2;
    transition: all 0.3s ease;
}

.social-media-footer #instagram:hover{
    opacity: 1;
    color: #c32aa3;
    transition: all 0.3s ease;
}

.social-media-footer #youtube:hover{
    opacity: 1;
    color: #ff0000;
    transition: all 0.3s ease;
}

.social-media-footer #linkedin:hover{
    opacity: 1;
    color: #0a66c2;
    transition: all 0.3s ease;
}


.social-media{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 30px;
}
.social-media i{
    margin-left: 7px;
    margin-right: 7px;
    color: white;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.social-media i:hover{
    opacity: 1;
    transition: all 0.3s ease;
}

.control-label{
    color: var(--main-color);
    font-weight: 100;
}

#fld_8768091_1{
    border-radius: 5px;
    border-color: transparent;
    box-shadow:none;
    background-color: rgb(241, 241, 241);
}

#fld_9970286_1, #fld_566973_1 {
    border-radius: 5px;
    border-color: transparent;
    box-shadow:none;
    background-color: rgb(241, 241, 241); 
}

#fld_7683514_1{
    border-radius: 5px;
    border-color: transparent;
    box-shadow:none;
    background-color: rgb(241, 241, 241); 
    resize: none;
}

#fld_7908577_1{
    border-radius: 5px;
    background-color: #6180BB;
    border-color: #6180BB;
    box-shadow: 0px 4px 8px grey;
    color: white;
    transition: all 0.3s ease;
}

#fld_7908577_1:hover{
    background-color: var(--main-color);
    border-color: var(--main-color);
    transition: all 0.3s ease;
}

/* page.php styles */

.page-body{
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.page-title{
    width: 100%;
    padding-top: 150px;
    margin-bottom: 50px;
}

.page-title h1{
    padding-left: 80px;
    padding-right: 80px;
    text-align: center;
    font-size: 40px;
    font-weight: 300;
    color: var(--main-color);
}

.page-content{
    max-width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
}

.page-content figure {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

.page-content img{
    width: 50%;
    height: auto;
    border-radius: 8px;
}

/* single.php styles */

.single-body{
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.single-title{
    width: 100%;
    padding-top: 150px;
    margin-bottom: 50px;
}

.single-title h1{
    padding-left: 80px;
    padding-right: 80px;
    text-align: center;
    font-size: 50px;
    font-weight: 400;
    font-weight: 300;
    color: var(--main-color);
}

.single-content{
    max-width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
}

.single-content figure {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
}

.single-content img{
    width: 50%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}

.single-content h2{
    font-size: 35px;
    font-weight: 300;
    color: var(--main-color);
    margin-bottom: 25px;
}

.single-content h3,h4,h5{
    font-size: 30px;
    font-weight: 300;
    color: var(--main-color);
    margin-bottom: 25px;
}

.single-content p{
    text-align: justify;
    font-size: 20px;
    font-weight: 200;
    color: var(--main-color);
    margin-bottom: 35px;
}

.single-head-section{
    display: flex;
    width: 100%;
    height: auto;
    margin-bottom: 50px;
}

.single-head-section .single-head-container{
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding-left: 10%;
    padding-right: 10%;
}

.single-head-section .single-head-container img{
    object-fit: cover;
    width: 70%;
    height: 400px;
    border-radius: 8px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}

.single-head-section .single-head-container .categories{
    display: flex;
    justify-content: space-around;
    position: absolute;
    z-index: 2;
    bottom: 15px;
    right: 37%;
}

.single-head-section .single-head-container .categories h3{
    padding: 10px;
    margin: 5px;
    background-color: white;
    color: var(--main-color);
    font-size: 15px;
    font-weight: 400;
    border-radius: 8px;
}

.single-head-section .single-head-container .card{
    width: 25%;
    background-color:  var(--secondary-color);
    border-radius: 8px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.2);
    height: fit-content;
}

.single-head-section .single-head-container .card .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}

.single-head-section .single-head-container .card h2{
    margin-bottom: 10px;
    margin-top: 15px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 30px;
    font-weight: 300;
    color: #fff;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.single-head-section .single-head-container .card .post{
    width: 90%;
    height: 80px;
    position: relative;
    margin-bottom: 20px;
    border-radius: 8px;
}

.single-head-section .single-head-container .card .post img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-head-section .single-head-container .card .post h3{
    color: white;
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.single-head-section .single-head-container .card .post a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.2;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.single-head-section .single-head-container .card .post a:hover{
    opacity: 0.5;
    transition: all 0.3s ease;
}



.single-body .adjacent-link{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 30px;
    margin-left: 30px;
    margin-right: 30px;
}
.single-body .adjacent-link .adjacent-link-container{
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-body .adjacent-link .adjacent-link-container a{
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 18px;
    margin-right: 10px;
    margin-left: 10px;
    background-color: var(--main-color);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}


.single-body .adjacent-link .adjacent-link-container i{
    margin-left: 10px;
    margin-right: 10px;
    font-size: 25px;
}

.comment{
    background-color: white;
    padding: 15px;
    width: 80%;
    border-radius: 8px;
    border: 2px solid #dddddd;
    list-style: none;
    box-shadow: 6px 7px 14px 0px rgba(176,176,176,0.75);
    margin-bottom: 5px;
}

.comment-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comment-modify i{
    color: #b4b4b4;
}

.comment-modify a{
    color: #b4b4b4;
    text-decoration: none;
}

.comment-body{
    margin-bottom: 15px;
}

.comment-details{
    justify-self: flex-end;
    display: flex;
    justify-content: space-between;
}

.comment-author{
    color: #666;
    display: flex;
    align-items: center;
    font-size: 18px;
}

.comment-author .fn{
    margin-left: 10px;
    color: #6180BB;
}

.comment-author .url{
    text-decoration: none;
    font-size: 18px;
    color: #6180BB;
}


.comment-text{
    margin-top: 15px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 15px;
    color: #999999;
}

.comment-meta{
    margin-left: 50px;
}

.comment-meta a{
    color:  var(--main-color);
    font-size: 12px;
    text-decoration: none;
}

.reply i{
    color:  var(--main-color);
}

.reply a{
    color:  var(--main-color);
    text-decoration: none;
}

.children{
    margin-left: 10%;
    width: 100%;
}

.avatar{
    border-radius: 50%;
}


.comment-respond{
    display: flex;
    flex-direction: column;
    width: 80%;
    background-color: #f3f3f3;
    padding: 15px;
    border-radius: 8px;
    border: 2px solid #b1b1b1;
    box-shadow: 6px 7px 14px 0px rgba(176,176,176,0.75);
    margin-bottom: 20px;
    margin-top: 20px;
}

.comment-reply-title{
    color:  var(--main-color);
    text-align: center;
    margin-bottom: 15px;
}

.comment-notes{
    color:  var(--main-color);
    margin-bottom: 10px;
    font-weight: 200;
}

.comment-form-comment{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.comment-form-comment label{
    color:  var(--main-color);
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: 500;
}

.comment-form-comment textarea{
    border-radius: 8px;
    margin-bottom: 15px;
    resize: none;
    width: 80%;
}


.comment-form-author{
    display: flex;
    flex-direction: column;
}

.comment-form-author label{
    color:  var(--main-color);
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: 500;
}

.comment-form-author input{
    border-radius: 8px;
    margin-bottom: 10px;
    width: 80%;
    outline: none;
    padding: 3px 0px 3px 3px;
    border: 1px solid #DDDDDD;
}

.comment-form-author input:focus{
    box-shadow: 0 0 5px var(--main-color);
    border: 2px solid var(--main-color);
}

.comment-form-email{
    display: flex;
    flex-direction: column;
}

.comment-form-email label{
    color:  var(--main-color);
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: 500;
}

.comment-form-email input{
    border-radius: 8px;
    margin-bottom: 10px;
    width: 80%;
    outline: none;
    padding: 3px 0px 3px 3px;
    border: 1px solid #DDDDDD;
}

.comment-form-email input:focus{
    box-shadow: 0 0 5px var(--main-color);
    border: 2px solid var(--main-color);
}

.comment-form-url{
    display: flex;
    flex-direction: column;
}

.comment-form-url label{
    color:  var(--main-color);
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: 500;
}

.comment-form-url input{
    border-radius: 8px;
    margin-bottom: 10px;
    width: 80%;
    outline: none;
    padding: 3px 0px 3px 3px;
    border: 1px solid #DDDDDD;
}

.comment-form-url input:focus{
    box-shadow: 0 0 5px var(--main-color);
    border: 2px solid var(--main-color);
}

.comment-form-cookies-consent{
    color:  var(--main-color);
    margin-bottom: 10px;
    font-weight: 200;
}

.form-submit .submit{
    padding: 10px;
    background-color: transparent;
    border-radius: 8px;
    color:  var(--main-color);
    border: 2px solid  var(--main-color);
    cursor: pointer;
}

.form-submit .submit:hover{
    background-color:  var(--main-color);
    color: white;
    transition: all 0.3s ease;
}

.logged-in-as{
    margin-bottom: 10px;
}



@media (max-width: 1050px){
    
    .single-head-section .single-head-container{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 30%;
    }

    .single-head-section .single-head-container img{
        object-fit: cover;
        width: 90%;
        height: 200px;
        margin-bottom: 15px;
    }

    .single-head-section .single-head-container .categories{
        bottom: unset;
        top: 140px;
        right: 15%;
    }

    .single-head-section .single-head-container .card{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 85%;
        height: fit-content;
    }

    .single-head-section .single-head-container .card .posts-links{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 100%;
        width: 100%;
    }

    .single-head-section .single-head-container .card .posts-links .container {
        width: 30%;
        height: 100px;
    }

    .single-head-section .single-head-container .card .posts-links .container a {
        position: absolute;
        z-index: 2;
        text-decoration: none;
        color: #fff;
        bottom: 5px;
        left: 7px;
        padding-left: 0px;
        padding-bottom: 0px;
    }
    
    .single-head-section .single-head-container .card .posts-links .container h3 {
        font-size: 12px;
        color: white;
        text-align: center;
        text-align: start;
    }

}
    


@media (max-width: 480px){
    
    .single-head-section .single-head-container .card{
        display: none;
    }
    .single-head-section .single-head-container .categories{
        bottom: 460px;
        right: 15%;
    }
    
    
   
    .single-head-section .single-head-container .card .posts-links .container h3 {
        font-size: 12px;
    }
    
    .single-head-section .single-head-container .card .posts-links{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 100%;
        width: 100%;
    }

    .single-head-section .single-head-container .card .posts-links .container {
        width: 90%;
        height: 100px;
        text-align: center;
        position: relative;
        cursor: pointer;
    }
   
}

/* archive file */

.archive-body{
    min-height: 100%;
    padding-top: 150px;
    margin-left: 40px;
    margin-right: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.archive-body .title-section {
    width: 100%;
    max-width: 1200px;
    align-self: center;
}

.archive-body .title-section h1 {
    color: var(--main-color);
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 10px;
}

.archive-body .title-section .section-divider{
    min-height: 8px;
    width: 100%;
    background-color: var(--main-color);
    border-radius: 8px;
}

.archive-body .post-list-section{
    padding-top: 20px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.archive-body .post-list-section .container{
    display: flex;
    width: 100%;
    background-color: #e7e7e7;
    height: 30%;
    border-radius: 8px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.2);
    margin-top: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    max-width: 1200px;
}

.archive-body .post-list-section .container:hover{
    display: flex;
    width: 100%;
    background-color: #e7e7e7;
    height: 30%;
    border-radius: 8px;
    box-shadow: 0 25px 25px rgba(0,0,0,0.2);
    margin-top: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.archive-body .post-list-section .container img{
    width: 20%;
    height: 80%;
    object-fit: cover;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.2);
}

.archive-body .post-list-section .container .content{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.archive-body .post-list-section .container .content h2{
    color:  var(--main-color);
    font-size: 30px;
    font-weight: 500;
    padding-top: 15px;
    padding-left: 25px;
 }

 .archive-body .post-list-section .container .content p{
    color:  var(--main-color);
    font-size: 15px;
    font-weight: 200;
    padding-top: 15px;
    padding-left: 25px;
    padding-right: 15px;
 }

 .archive-body .post-list-section .container .content .info{
    display: flex;
    width: 40%;
    padding-left: 25px;
    padding-top: 20px;
    margin-bottom: 10px;
 }

 .archive-body .post-list-section .container .content .info .date {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-left: 10px;
 }

 .archive-body .post-list-section .container .content .info .author {
    display: flex;
    align-items: center;
 }

 .archive-body .post-list-section .container .content .info .date i{
   margin-right: 8px;
   color:  var(--main-color);
 }

 .archive-body .post-list-section .container .content .info .author i{
    margin-right: 8px;
    color:  var(--main-color);
  }

 .archive-body .post-list-section .container .content .info .date p{
    padding: 0;
    font-weight:400;
    font-style: italic;
    min-width: 150px;
 }

 .archive-body .post-list-section .container .content .info .author p{
    padding: 0;
    font-weight:400;
    font-style: italic;
 }

 .pagination{
     margin-top:15px;
     margin-bottom: 20px;
     font-size: 25px;
     color: var(--main-color);
 }
 
 .pagination .page-numbers{
    color: var(--main-color);
 }


 @media (max-width: 780px){
    
    .archive-body .post-list-section .container{
        display: flex;
        flex-direction: column;
    }

    .archive-body .post-list-section .container img{
        width: 90%;
        height: 200px;
        object-fit: cover;
        margin: 10px;
        border-radius: 8px;
        box-shadow: 0 15px 45px rgba(0,0,0,0.2);
        align-self: center;
    }

    .archive-body .post-list-section .container .content .info{
        flex-direction: column;
     }

     
     .archive-body .post-list-section .container .content .info .author {
        margin-top: 10px;
     }

     .archive-body .post-list-section .container .content .info .date {
        margin-top: 10px;
        margin-left: 0px;
     }
    
    
}

.centered-image-and-text-section {
    width: 100%;
    height: auto;
    padding-top: 70px;
    padding-bottom: 70px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.centered-image-and-text-section img{
    width: 70%;
    height: auto;
    -webkit-box-shadow: 0px 8px 11px 2px #CCCCCC; 
    box-shadow: 0px 8px 11px 2px #CCCCCC;
    border-radius: 8px;
}

.centered-image-and-text-section .divider{
    width: 10%;
    height: 3px;
    background-color: var(--main-color);
    margin-top: 5%;
    margin-bottom: 4%;
}


.centered-image-and-text-section p{
    width: 70%;
    height: auto;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    color: var(--main-color);
}

.simple-text-section {
    padding: 10%;
}

.simple-text-section p{
    text-align: center;
    font-size: 20px;
    color: var(--main-color);
}

@media (max-width: 480px){
    .simple-text-section p{
        font-size: 16px;
    }
}




.news-section-2{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.news-section-2 h2{
    font-size: 40px;
    text-transform: uppercase;
    color: var(--main-color);
    margin-bottom: 40px;
}

.news-section-2 .container{
    display: flex;
    max-width: 1500px;
    width: 90%;
    justify-content: space-between;
}

.news-section-2 .container .article{
    position: relative;
    display: flex;
    flex-direction: column;
    height: fit-content;
    width: 29%;
}

.news-section-2 .container .article img{
    height: 60%;
    width: 100%;
    object-fit: cover;
}

.news-section-2 .container .article h3{
    font-size: 20px;
    color: #666;
    margin-top: 10px;
    margin-bottom: 10px;
}

.news-section-2 .container .article p{
    font-size: 15px;
    color: #666;
    margin-top: 10px;
    margin-bottom: 10px;
}

.news-section-2 .container .article a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #737373;
    opacity: 0;
    transition: all 0.3s ease;
}

.news-section-2 .container .article a:hover{
    opacity: 0.3;
    transition: all 0.3s ease;
    box-shadow: 0px 2px 12px 7px #CCCCCC;
}

@media (max-width: 780px){
    .news-section-2 .container .article{
        height: fit-content;
        width: 70%;
        margin-bottom: 30px;
    }

    .news-section-2 .container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .news-section-2 .container .article h3{
        font-size: 20px;
    }
    
    .news-section-2 .container .article p{
        font-size: 15px;
    }
}