.contact_slide .contact-info{
    /* border: 1px solid black; */
    /* background-color: #fff; */
    position: relative;
    width: 100%;
    height: 100%;
    

}

.contact_slide .sub-contact-info{
    /* background-color: red; */
    /* border: 1px solid black; */
    height: 100%;
    
    display: flex;                /* enables flexbox */
    justify-content: center;      /* centers horizontally */
    align-items: center;          /* centers vertically */
}

.contact_slide .contact-info .card{
    width: 40%;
    height: 25%;
    margin: 10px;
    /* background-color: transparent; */
    /* border: transparent; */

    display: flex;                /* enables flexbox */
    justify-content: center;      /* centers horizontally */
    align-items: center;          /* centers vertically */

    cursor: pointer;
}

.contact_slide .contact-info .card-item{
    text-align: center;
}

.contact_slide .contact-info .card-item i {
  display: flex;                /* enables flexbox */
  justify-content: center;      /* centers icon horizontally */
  align-items: center;          /* centers icon vertically */
  
  height: 70px;
  width: 70px;
  /* background-color: red; */
  /* color: white;                 icon color */
  border-radius: 50%;           /* optional: makes it circular */
  font-size: 24px;              /* adjust icon size */

  margin: 12px;
  font-size: 35px;
  
}



.contact_slide .email-icon{
    color: #ec5051;
}

.contact_slide .email-card {
  position: relative;
  display: flex;
  align-items: center;
  /* gap: 10px; */
  padding: 12px 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  /* border: 1px solid #ddd; */
  border-radius: 10px;
  background-color: #fff;
}

.contact_slide .email-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

/* Copy icon */
.contact_slide .email-card .copy-icon {
  position: absolute;
  right: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #666;
  font-size: 20px;
}
.contact_slide .email-card:hover .copy-icon {
  opacity: 1;
}

/* Tooltip styling */
.contact_slide .email-card .copy-tooltip {
  position: absolute;
  right: 16px;
  top: -30px;
  background: #222;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(5px);
}
.contact_slide .email-card .copy-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}
.contact_slide .phone-icon{
    background: linear-gradient(45deg, #ffe68a, #FF7E00); /* yellow → orange */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact_slide .phone-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

/* Copy icon */
.contact_slide .phone-card .copy-icon {
  position: absolute;
  right: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #666;
  font-size: 20px;
}

.contact_slide .phone-card:hover .copy-icon {
  opacity: 1;
}

/* Tooltip styling */
.contact_slide .phone-card .copy-tooltip {
  position: absolute;
  right: 16px;
  top: -30px;
  background: #222;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(5px);
}
.contact_slide .phone-card .copy-tooltip.show {
  opacity: 1;
  transform: translateY(0);
}

.contact_slide .location-icon{
    color: #EA4335;
}

.contact_slide .location-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

.contact_slide .linkedin-icon{
    color: #0077B5;
}

.contact_slide .linkedin-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

.contact_slide .web-icon{
    
  background: linear-gradient(45deg, #00c6ff, #7a00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
}

.contact_slide .website-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

@media only screen and (max-width:990px){
    .contact_slide .card-item.email-text,
    .contact_slide .card-item.phone-text,
    .contact_slide .card-item.location-text,
    .contact_slide .card-item.linkedin-text,
    .contact_slide .card-item.web-text
    {
        
        font-size: x-small;
    }

    .contact_slide .contact-info .card{
        height: 25%
    }
    

}


@media (max-width: 376px) {
.contact_slide .contact-info .card{
      width: 71%;
      height: 15%;
}
}