@keyframes rainbow { 0% {background-position: 0%;} 100% {background-position: 100%;} }


body {
  margin: 0px;
  font-family: WF Visual Sans Variable, sans-serif;
  overflow-x: hidden; 
  /* Prevents horizontal scroll on all screens */
}


/* NAVBAR ------------------------------------------------ */



.nav{
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between; 
  gap: 30px;
  margin-left: 8%;
  margin-right: 8%;
  padding: 15px 0px;
}

.nav:hover{
  /* background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet); background-size: 400%; */
  /* margin-left: 0; */
  /* margin-right: 0; */
}

  #nav_logo{
    display: flex;
    padding: 0px;
    font-family: "Playwrite IN", serif;
  }

  #nav_contacts{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 12px;
  }
 
  #sep{
    display: flex;
  }
 
  #email a{
    text-decoration: none;
    color: black 
  }

  #email a:hover{
    color: green;
    cursor: pointer; 
  }

  #ligne_hr { 
    border: 0; 
    height: 1px; 
    background: #c4c3c3;
    /* margin: 0;  */
  }


/* navbar max 320px ------------------------------------- */

      @media  (max-width: 320px) {
        .wrapper{
          margin-left: 0%;
          margin-right: 0%;
        }

        .nav{
        flex-direction: column;
        background-color: black;
        color: white;
        margin: 0;
        justify-content: center;
        gap: 0px;
      }

        #nav_logo{
          display: none; 
        }

            #nav_logo_verysmall{
              display: block; 
              /* clamp(minimum, preferred, maximum) */
              font-size: clamp(18px, 8vw, 20px);
              text-align: center;
              font-family: "Playwrite IN", serif;
            }

        #nav_contacts{
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0;
          margin-top: 20px;
        }

        #sep{
          display: none;
        }

        #email a{
          text-decoration: none;
          color: white
        }
      
        #email a:hover{
          color: green;
          cursor: pointer; 
        }

        #ligne_hr { 
          display: none;
        }

      }

/* navbar min 320.1px (max 450)------------------------------------- */

      @media  (min-width: 320.1px) {

        .nav{
          flex-direction: column;
          margin: 0;
          align-items: center;
          justify-content: center;
          gap: 0px;
        }
      
        #nav_logo_verysmall{
          display: none; 
          }
        
        #nav_logo{
          display: block; 
          /* clamp(minimum, preferred, maximum) */
          font-size: clamp(18px, 6vw, 20px);
        }

        #nav_contacts{
          display: flex;
          flex-direction: column;
          align-items: left;
          margin: 0;
          margin-top: 20px;
        }
  
        #sep{
          display: none;
        }

        #email a{
          text-decoration: none;
          color: black;
        }
      
        #email a:hover{
          color: green;
          cursor: pointer; 
        }

        #ligne_hr { 
          display: block;
        }

      }


/* navbar min 450px ------------------------------------- */

      @media  (min-width: 400px) {
        
        .nav{
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between; 
          gap: 30px;
          margin-left: 8%;
          margin-right: 8%;
          padding: 15px 0px;
        }
        #nav_contacts{
          display: flex;
          flex-direction: column;
          align-items: left;
          margin: 0;
          margin-top: 20px;
        }
  
        #sep{
          display: none;
        }

      }


/* navbar min 700px ------------------------------------- */
      @media  (min-width: 700px) {
              
        #nav_contacts{
          display: flex;
          flex-direction: row;
          margin: 0;
        }

        #sep{
          display: block;
        }

      }


/* BODY ------------------------------------------------ */

  .wrapper{
    margin-left: 8%;
    margin-right: 8%;
  }

  #image_profile {
    text-align: center;
    margin-top: 50px;
  }

  #image_profile img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
  }

  #h1_title{
    margin-top: 0;
    margin-bottom: 20px;
    /* font-family: WF Visual Sans Variable, sans-serif; */
    font-size: 5.25rem;
    font-weight: 600;
    line-height: 1.04em;
    text-align: center;
  }

/* body ------------------------------------- */

      @media  (max-width: 320px) {
        #h1_title{
          /* clamp(minimum, preferred, maximum) */
          font-size: clamp(20px, 11vw, 36px);
        }
      }

      @media  (min-width: 320.1px) {
        #h1_title{
        /* clamp(minimum, preferred, maximum) */
        font-size: clamp(36px, 10vw, 84px);
        }
      }


  /* CARDS ------------------------------------------------ */

  .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 100px;
  }

  .card_mobile{
    display: flex;
    flex-direction: column;
    align-items: left; 
    width: 280px;
    height: 450PX; 
  }

      .image-wrapper {
        position: relative;
        display: inline-block; 
      }

      .hover-button {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          /* background-color: #146ef5; */
          /* background-color: yellow; */
          background-color: black;
          color: white;
          /* color: black; */

          /* background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet); background-size: 400%; */
          border: 1px solid white;
          border-radius: 8px;
         
          padding: 25px 25px;
          /* border: none; */
          cursor: pointer;
          display: none; /* Hide by default */
          text-decoration: none; 
          font-size: 14px;
          font-weight: 600;
      }

      .image-wrapper:hover .hover-button {
          display: block; 
      }
    

  .card_mobile img{ 
    aspect-ratio: 150 / 205;
    object-fit: cover;
    object-position: 50% 0%;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    display: block;
    transition: box-shadow 0.2s ease;
   
  }

  .card_mobile img:hover {
    box-shadow: -5px 10px 10px rgba(16, 16, 16, 0.4); /* Shadow on bottom and left */
  }



  .card_mobile_icons{
    display: flex;
    flex-direction: row;
  }

  .card_mobile_icons img{
    width: 35px;
    height: 35px;
    border: 1px solid black;
    border-radius: 50%;
    /* padding: 10px 5px 20px 5px; */
    margin-right: 10px;
    margin-top: 15px;
  }


/* cards max/min 768 ------------------------------------- */

      @media  (max-width: 768px) {
        .cards {
          display: none;
        }
      }

      @media  (min-width: 768.1px) {
        .tech_mobile .card_mobile_icons img {
          display:none;
        }
      }


  /* SITES ------------------------------------------------ */


  .site_wraper_color_1{
    background-color: #146ef5;
  }

    .site_wraper_color_2{
      background-color: #f1f3f7;
    } 

  .site_1 {
    display: flex;
    color: white;
    padding: 0;
  }

    .site_2 {
      display: flex;
      color: black;
      padding: 0;
    }


  .title_and_link{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
      i {
        font-size: clamp(10px, 6vw, 22px);
      }
  }



  /* mobile ---------------- */

  #img_site_mobile{
    display: flex;
    display: none;
    margin-top:20px;

    aspect-ratio: 150 / 266;
    object-position: 50% 0%;
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }

  #img_site_mobile2{
    display: flex;
    display: none;
    margin-top:20px;

    aspect-ratio: 1/1;
    object-position: 50% 0%;
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }

  .tech_mobile{
    display: block;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 30px;
    }
 

 
  /* sites MAX 768 PX -------------- */

      @media  (max-width: 768px) {
               
        .site_1, .site_2 {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0px;
          margin-top: 50px;
        }
        
        .site_info_1, .site_info_2{
          margin-left: 8%;
          margin-right: 8%;
          margin-top: 20px;
        }

        .site_1 .site_info_1 h2 a{
          text-decoration: none;
          font-size: clamp(18px, 8vw, 68px);
          /* font-family: "Playwrite IN", serif; */
        }

          .site_2 .site_info_2 h2 a{
            text-decoration: none;
            font-size: clamp(18px, 8vw, 68px);
            /* font-family: "Playwrite IN", serif; */
          }

      }

        /* icons imgs at mobile ---------------------------- */
            
              @media  (max-width: 450px) {    
              .tech_mobile .card_mobile_icons img {
                width: 30px;
                height: 30px;
                }
              }

              @media  (min-width: 450.1px) {      
                .tech_mobile .card_mobile_icons img {
                  width: 35px;
                  height: 35px;
                }
              }
    

        /* .images  ---------------------------- */

              @media  (max-width: 370px) {
       
                .siteimg_montage_1, .siteimg_montage_2{
                  display: none
                }
                .siteimg_mobile #img_site_mobile{
                  display: block;
                }
                .siteimg_mobile2 #img_site_mobile2{
                  display: none;
                }

                .siteimg_mobile, .siteimg_mobile2{
                  margin-right: 8%;
                  margin-left: 8%;
                }
              }

              @media  (min-width: 370.1px) and (max-width: 768px){
       
                .siteimg_montage_1, .siteimg_montage_2{
                  display: none
                }
                .siteimg_mobile #img_site_mobile{
                  display: none;
                }
                .siteimg_mobile2 #img_site_mobile2{
                  display: block;
                }
                .siteimg_mobile, .siteimg_mobile2{
                  margin-right: 8%;
                  margin-left: 8%;
                }
              }
  
        
/* sites MIN 768 PX -------------- */

      @media  (min-width: 768.1px) {
                        
            .site_1, .site_2 {
              margin-top: 100px;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              gap: 20px;
              /* border: 2px solid BLACK; */
              margin-left: 8%;
              margin-right: 8%;
            }

            .siteimg_mobile, .siteimg_mobile2, .tech_mobile {
              display: none;
            }

            .siteimg_montage_1, .siteimg_montage_2  {
                display: flex;
                justify-content: flex-end; /* Align to the right */
                /* margin-top: 10px; */
                align-items: center;
                position: relative; /* Required for positioning hover image */
                overflow: hidden; /* Ensures hover image stays within bounds */
                width: calc(50% - 8%);
                height: 350px;
                /* border: 2px solid RED; */
                margin-bottom: 10px;
                /* width: 100% */
              }

              .siteimg_montage_2  {
                justify-content: flex-start; 
              }  

                        
              .img-wrapper {
                position: relative; /* Makes hover-img position relative to this wrapper */
                width: 100%;
                max-height: 350px;
                /* border: 1px solid purple; */
              }

              .default-img {
                display: block;
                width: 100%;
                height: auto;
                position: relative; /* Ensure hover-img centers relative to this */
                /* object-fit: cover; */
                /* border: 2px solid blue; */
              }

              .hover-img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%); /* Center hover-img relative to the default-img */
                width: auto; /* Maintain aspect ratio */
                height: 100%; /* Fit within the height of the container */
                  max-width: 100%; /* Ensure it doesn’t exceed the width of the container */
                  max-height: 100%; /* Ensure it doesn’t exceed the height of the container */
                  object-fit: contain; /* Keep the aspect ratio and fit within bounds */
                display: block;
                transition: opacity 0.3s ease;
                opacity: 0; /* Initially hidden */
                z-index: 1;
                margin-top: 10px;
                /* border: 2px solid green; */
              }

              .siteimg_montage_1:hover .hover-img,
              .siteimg_montage_2:hover .hover-img {
                opacity: 1; /* Show hover image on hover */
              }

              .siteimg_montage_1:hover .default-img,
              .siteimg_montage_2:hover .default-img {
                opacity: 0; /* Hide default image on hover */
              } 



          .site_info_1{
            margin-top: 20px;
            max-width: 40%; 
          }

          .site_info_2{
            margin-top: 20px;
            max-width: 50%; 
          }

          .site_1 .site_info_1 h2 a, .site_2 .site_info_2 h2 a{
            text-decoration: none;
            font-size: clamp(18px, 8vw, 68px);
            /* position: relative; */
          }


            /* .site_info_1 h2 a::before {
              content: attr(data-default-text);
            } */

            /* .site_1 .site_info_1 h2 a:hover::before{
              text-decoration: underline;
              text-decoration-thickness: 5px;
              content: attr(data-hover-text);
            } */

          .site_1 .site_info_1 h2 a:hover, .site_2 .site_info_2 h2 a:hover{
            text-decoration: underline;
          }
          
        }
       




  /* ACCORDION  XXXXXXXXXXXXXXXXXXXXXXX */

  .FAQ{}
  
    .accordion{}

      .accordion-header { 
        cursor: pointer; 
        } 

      .accordion-content { 
        max-height: 0; 
        overflow: hidden; 
        transition: max-height 0.2s ease-out; 
        margin-top: 5px;
        border-radius: 8px;
      }

        .accordion-content li {
          padding-right: 15px;
        }
        
    .icon-rotated { 
      transform: rotate(180deg); 
      transition: transform 0.2s ease-out; 
    }

  


  /* ACCORDION ------------------------ */

    @media  (max-width: 320px) {
      .accordion-content {
        margin-top: 20px;
      }
    }

    @media  (min-width: 768px) {
      .accordion-content {
        margin-top: 20px;
        margin-bottom: 30px;
        min-width: 400px;
        /* z-index: 5;     */
        /* position: relative;  */
        /* To control stacking order */
        /* overflow: visible;   */
        /* Ensure it stays visible */
  }
}



/* OTHER PROJECTS ------------------------ */

.other_projects{
  margin-top: 100px;
  padding-top: 10px;
  /* margin-bottom: 0px; */
  padding-bottom: 10px;
}

.other_sites{
  background-color: black;
  margin-top: 0;
  padding-top: 0;
}

#title3, #p3{
  text-align: center;
  color: white;
  padding: 0px 10px 15px 10px;
}

#title3 h2 {
  font-size: clamp(18px, 8vw, 60px);
  padding: 15px;
  margin: 0px;
}

#title3 {
  padding-top: 15px;
  background-color: rgb(34, 31, 31);
  
}

    .line {
      display: flex;
      justify-content: center;
      width: 100%; 
      margin-bottom: 15px;
    }

    .line::before {
      content: "";
      width: 150px;
      border-top: 1px solid rgb(198, 196, 196);
    }


#imgsfour {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  /* box-sizing: border-box; */
}

#imgstwo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.img_overlay {
  position: relative;
  /* display: inline-block; */
  width: 100%; /* Ensure it takes up full width */
  margin: 0;
  padding: 0;
}

/* Apply styles to the images within each div */
#imgstwo #img4{
  width: 100%;
  max-height: 300px; 
  object-fit: cover; 
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
}


  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(205, 100, 100);
    /* background-color: #0e4aa3; */
    color: white;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    opacity: 0;
    transition: opacity 0.3s ease;
    margin: 0;
    padding-left: 15px;
    gap: 10px;
  }

  .overlay a, p {
    color: white;
    text-decoration: none;
    /* margin-top: 10px; */
    /* display: inline-block;   */
    font-family: WF Visual Sans Variable, sans-serif;
    font-size: clamp(8px, 4vw, 20px);

  }

  .overlay p{
    width: 80%;
  }

  /* .overlay p {
    flex: 0 1 80%;
  }
  
  .overlay i {
    flex: 0 1 20%;
  } */

  .img_overlay:hover .overlay {
    opacity: 1;
  }

  .img_overlay:hover img {
    opacity: 0; /* Optionally fade out the image */
  }


/* media queries --------------------------------------------  */

/* For screens 1400px and above ------------------------------ */

@media (min-width: 1400px) {
 
  /* Fully responsive images */

  #imgstwo img {
    width: 100%; /* Always occupy full width */
    aspect-ratio: 16 / 9; /* Maintain aspect ratio */
    object-fit: cover; /* Scale to fill container */
    object-position: center; /* Center the image within its container */
    }
  }

/* For screens between 768px and 1400px ----------------------- */

@media (min-width: 768px)  {

  #imgsfour {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #imgstwo {
    flex: 0 0 50%; 
    margin: 0;
    box-sizing: border-box;
  }

  #imgstwo img {
    width: 100%; /* Make the width fully responsive */
    max-height: 100%; /* Allow the height to adjust proportionally */
    object-fit: cover; 
    object-position: center; /* Keep the focus centered */
  }

  .overlay a, pre {
    font-size: clamp(12px, 8vw,20px);
  }

  .title_and_link i{
    display:none;
  }

  /* <div class="site_info"> 
  <div class="title_and_link">
    <h2 id="site_vitopreps">
      <a href="https://vitopreps.ukrzmi.com/" target="_blank" style="color: white;">VitoPreps</a>
    </h2> 
    <a href="https://vitopreps.ukrzmi.com/" target="_blank"><i class="fa-solid fa-link" style="color: white;"></i></a>
  </div> */


}


/* For screens below 768px --------------------------------*/

@media (max-width: 768px) {
  #imgsfour {
    flex-direction: column; 
  }

  #imgstwo {
    flex: 0 0 100%; 
    margin: 0;
    box-sizing: border-box;
  }

  #imgstwo img {
    width: 100%; /* Make the width fully responsive */
    max-height: 100%; /* Allow the height to adjust proportionally */
    object-fit: cover; /* Ensure the image fills its container without distortion */
    object-position: center; /* Keep the focus centered */
    border: 1px solid black;
  }


}


/* BOTTOM  ------------------------------------------------ */

.footer{
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  background-color: transparent;
  color: black;
  font-family: "Playwrite IN", serif;
}

.footer a{
  color: black;
  padding-top: 3px;
  padding-bottom: 5px;
  text-decoration: none;
}


#top {
  position:fixed;
  right: 5px;
  bottom: 5px;
  background-color: black;
  /* text-align: center; */
  font-size: 30px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  /* vertical-align: middle; */
  /* padding-bottom: 10px; */
}

#top a {
display:flex; 
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 6px;
color: white;
text-decoration: none;
}

    /* footer & top: max 320 px----------------------------- */

    @media  (max-width: 320px) {
      #top{
        display:none;
      }
      .footer{
        background-color: black;
        padding: 5px;
        
      }
      .footer a{
        color: white;
        font-size: 4vw;
    }
  }
  
  @media  (max-width: 320px) {

  }
    /* min 320 px---------------------------- */