.portfolio{
  padding: 0 3rem;
}
.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.slide {
  display: flex;
  width: 100%;
  flex-shrink: 0;
  gap: 2rem;
}
.image-container {
  width: 50%;
  overflow: hidden;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid rgb(161, 161, 161);
  border-radius: var(--border-one);
}
.text-container {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 0px;
}
.text-info{
  background: var(--main-darker-grey);
  padding: 2rem 2rem 2rem 0;
  border: 1px solid var(--main-light-grey);
  border-radius: var(--border-one);
}
.text-info h3{
  font-family: var(--ff-titles);
  font-size: var(--fs-titles);
  font-weight: bolder;
  background: var(--main-blue);
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.8rem 2rem;
  text-transform: uppercase;
  border-top-right-radius: var(--border-one);
  border-bottom-right-radius: var(--border-one);  
}
.text-info p{
  font-family: var(--ff-main);
  margin-bottom: 1.5rem;
  padding-left: 2rem;
  color:white;
  line-height: 180%;
}
.text-info a{
  padding-left: 2rem;
  letter-spacing: 2px;
  font-weight: 700;
  transition: all ease-in-out 500ms;
  color: white;
}
.text-info a:hover{
  color: var(--main-blue);
  font-size: 1.2rem;
}
.text-info a:active, .text-info a:focus{
  color: var(--main-blue);
  font-size: 1.2rem;
}
.buttons-slide{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
  margin: 6rem 0 1rem 0;
}
.arrow {
  border: none;
  cursor: pointer;
  transition: color 3s;
  border-radius: 100%;
}
.arrow i{
  font-size: 3rem;
  transition: color 0.5s;
}
.arrow i:hover {
  color: rgba(0, 204, 250, 0.8);
}
.arrow i:active, .arrow i:focus{
  color: rgba(0, 204, 250, 0.8);
}
.left-arrow {
  left: 40%;
}
.right-arrow {
  right: 40%;
}



/*****************************MEDIA QUERIES***************************/

/*************MEDIAQUERIES**************/

@media (max-width: 1483px) { }
@media (max-width: 1280px) { }
@media (max-width: 1150px) { }

@media (max-width: 950px) {/*2 REM padding*/
  .portfolio{
    padding: 0 2rem;
  }
  .slide {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .image-container {
    width: 100%;
  }
  .text-container {
    width: 100%;
  }
  .text-info{
    height: 100%;
    width: 100%;
  }
}

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

@media (max-width: 576px) { /*1 REM padding*/
  .portfolio{
    padding: 0 1rem;
    
  }

}

@media (max-width: 480px) { }
@media (max-width: 455px) { }
@media (max-width: 350px) { }

/**************************************/