/* === RESET AND BASE STYLES === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', Helvetica, sans-serif;
}

html, body {
  width: 100%;
  min-height: 100vh; /* Use min-height to ensure it covers the full viewport */
  background-color: rgb(34, 33, 33);
  color: #202020; /* Default text color for light backgrounds */
  overflow-x: hidden; /* <--- REVERTED: Re-added this for general page overflow control.
                           The carousel fix is in the media query. */
}


.contact-container{
    width:100%;
    height:100vh;
    min-height:300px;
    
}

.contact-wrapper{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 120px;
  margin: 42px auto;
  margin-bottom: 100px;
  flex-wrap: wrap;
}

.upper-text{
    color:#fff;
}

.bottom-text{
    color:#fff;
    font-size: 24px;
}

.contact-title h2{
    margin-top:24px;
     font-size: 36px;
    text-align: center;
}


#image-side{
    width:40px;
    height:40px;
}

#image-side img{
    width:100%;
    height:100%;
    
}

#line{
    border: 1px solid #fff;
    margin:0 40px 50px 40px;
    
}


.email ,.phone, .linkedin{
    display: flex;
  align-items: center;
  gap:16px;
  justify-content: center;
 
  
}

#contact-text {
  display: flex;
  flex-direction: column;
}

/* __________ */
.phone .bottom-text,
.linkedin .bottom-text,
.email .bottom-text {
  position: relative;
  display: inline-block;
  z-index: 1;
  transition: color 0.3s ease;
}

.phone .bottom-text::before,
.linkedin .bottom-text::before,
.email .bottom-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: scaleX(0);         /* fully collapsed horizontally */
  transform-origin: left;       /* starts growing from the left edge */
  transition: transform 0.3s ease;
  z-index: -1;
}

.phone:hover .bottom-text::before,
.linkedin:hover .bottom-text::before,
.email:hover .bottom-text::before {
  transform: scaleX(1);         /* grows to full width */
}

.phone:hover .bottom-text,
.linkedin:hover .bottom-text,
.email:hover .bottom-text {
  color: #000;
}

.phone:hover .bottom-text::before,
.linkedin:hover .bottom-text::before,
.email:hover .bottom-text::before {
  transform: translateX(0);
}

.phone:hover .bottom-text,
.linkedin:hover .bottom-text,
.email:hover .bottom-text {
  color: #000;
}