/* ACCOUNT PAGE -------------------------------------------------------------- */

/* Main Profile Container ---------------------------------------*/
.account_profile {
  display: flex;
  justify-content: space-between;
  gap: 200px; /* Maintain initial gap for larger screens */
  flex-wrap: wrap; /* Allow wrapping for smaller screens */
  padding: 0px; /* Add padding for better spacing on small screens */
  margin-top: 15px;
}

    @media (max-width: 768px) {
      .account_profile {
        flex-direction: column;
        align-items: center; /* Center the content for smaller screens */
        gap: 30px;
        /* background-color: rgb(90, 164, 238); */
      }
    }

    
    @media (min-width: 769px) and (max-width: 992px) {
      .account_profile { 
        display: flex;
        justify-content: space-between;
        gap: 5%; /* Maintain initial gap for larger screens */
        flex-wrap: nowrap; /* Allow wrapping for smaller screens */
        padding: 0px; /* Add padding for better spacing on small screens */
        margin-top: 15px;
      }    
    }  

/* Profile Info Section ------------------------------------------*/
.profile_info {
  display: flex;
  flex-direction: column;
  flex: 1; /* Allow it to adjust proportionally */
  gap: 10px;
  /* background-color: red; */
}

.photo_and_account {
  display: flex;
  flex-direction: row;
  align-items: center; /* Center-align the content */
  gap: 20px; /* Reduced for responsiveness */
  flex-wrap: wrap; /* Wrap content for smaller screens */
  /* background-color: pink; */

}

    @media (max-width: 768px) {
      .photo_and_account {
      flex-direction: column;
      align-items: center; /* Center-align profile image and info */
      justify-content: left;
      gap: 20px;
      }
    }

    @media (max-width: 400px) {
      .photo_and_account img {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        border-radius: 50%;
        object-fit: cover;
        transition: all 0.3s ease;
        text-align: center;
      }
    }

    @media (min-width: 401px) {
      .photo_and_account img {
        width: 120px;
        height: 120px;
        border: 1px solid black;
        border-radius: 50%;
        object-fit: cover;
        transition: all 0.3s ease; 
      }
    }

    @media (min-width: 576px) {
      .photo_and_account img {
      width: 140px; /* Reduce profile image size */
      height: 140px;
      }
    }

    @media (min-width: 768px) {
      .photo_and_account img{
        width: 150px;
        height: 150px;
    }
  }


/* .photo_and_account img {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  border-radius: 50%;
  object-fit: cover;
  transition: all 0.3s ease; 
} */

.account_authorinfo {
  font-size: 1rem;
}

.account_authorinfo p {
  margin: 5px 0;

}

    @media (max-width: 768px) {
      .account_authorinfo p {
        font-size: 0.9rem; /* Adjust font size */
        /* background-color: blue; */
      }
    }





/* Advertising Section ------------------------------------------*/
.advertising {
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 30px;
  margin-right:0px;
}

    /* Ad Section: Move to full width */
    @media (max-width: 768px) {
      .advertising {
        margin-top: 10px;
      }
      }



.Ad p{
  text-align: right; 
  font-size:12px; 
  color:rgb(99, 112, 99); 
  margin:0; 
  padding:2px 0px;
}


.usertools {
  border: 1px solid rgb(99, 112, 99); 
  flex-grow: 1;
  margin-bottom: 50px;
}

.usertools a img {
  width: 100%; /* Full width for responsiveness */
  max-width: 400px;
  height: 150px;
  object-fit: cover;
}

    @media (max-width: 768px) {
      .usertools a img {
        min-width: 350px; 
        max-height: 200px; /* Maintain aspect ratio */
      }
      }

      @media (min-width: 769px) and (max-width: 992px) {
        .usertools a img {
          width: 100%; 
          max-width: 300px; /* Constrain maximum width */
          height: auto; /* Maintain aspect ratio */
        }
        .usertools {
          border: none; 
      }
        .Ad p{margin-top: 40PX;
    }
  }
        



/* Uploaded Videos Section ---------------------------------------*/
.mesvideos {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
}

.mesvideos h5{
  padding-top: 7px;
}

.user_tools_add a button {
  background-color: rgb(255, 51, 0);
  color: white;
  /* background-color: yellow;
  color: black; */
  border-radius: 8px;
  border: none;
  padding: 8px 16px;
  width: 150px;
  transition: background-color 0.3s ease;
}

.user_tools_add a button:hover {
  background-color: rgb(220, 45, 0);
  color: white;
}


    @media (max-width: 768px) {
      .user_tools_add a button {
        width: 136px;
        padding: 8px;
      }
      }


/* Video Cards Section ---------------------------------------------*/
.account_show_videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center the video cards */
  gap: 30px;
  margin-top: 30px;
}

.account_show_videos .card {
  width: 100%;
  max-width: 300px;
  background-color: rgb(240, 239, 239);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.account_show_videos .card iframe {
  width: 100%;
  aspect-ratio: 16 / 9; /* Maintain aspect ratio */
  border-radius: 8px 8px 0 0;
}

.account_show_videos .card-header p {
  font-size: 1.2rem;
  margin: 10px 0;
  text-align: left; /* Align text to the left */
}

.account_show_videos .card-body p {
  font-size: 0.9rem;
  line-height: 1.5;
}

.account_show_videos .card-footer .buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}


      @media (max-width: 768px) {
        .account_show_videos {
          gap: 20px; 
        }

        /* .account_show_videos .card {
          width: 100%; 
        } */

        /* .account_show_videos .card-header p {
          font-size: 1rem;
        } */

        .account_show_videos .card-body p {
          font-size: 0.85rem;
        }
      }