html, body {
   min-height: 100vh;
   padding-bottom: 100px; /* Better than margin-bottom */
   margin: 0;
   font-family: 'Times New Roman', Times, serif;
}

/* Ensures adaptability on all screen sizes */
body {
   max-width: 1500px;
   margin: 0 auto;
   padding: 0;
}

/* Heading styles */
h2 {
    margin-top: 5px; /* Reduce top spacing */
    margin-bottom: 5px; /* Reduce bottom spacing */
}

/* Fixed positioned elements */
.fixed {
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 1000; /* Ensures it stays above other elements */
}

/* ------- About Me Information Section ------*/
.container {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   padding: 50px 10%; /* Responsive padding */
   flex-wrap: wrap; /* Allows sections to wrap on small screens */
}

/* NEW: Wrap left and right sections together */
.section-container {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   flex-wrap: wrap;
   width: 100%;
}

.left-section, .right-section {
   padding: 20px;
   box-sizing: border-box;
}

.left-section {
   width: 25%;
   margin-right: 20px;
   text-align: center; /* Centers image & text on small screens */
}

.circular-image {
   width: 180px; /* Reduced for mobile */
   height: 180px;
   border-radius: 50%;
   object-fit: cover;
}

.right-section {
   width: 70%;
   font-size: 18px;
   line-height: 1.5;
}

/* Ensures proper spacing on larger screens */
.full_sections {
    padding: 5px 200px;  /* Adjust padding for readability */
    margin-bottom: 10px; /* Reduce space below the heading */
}

/* Reduce space between sections */
.container_for_caption {
    padding: 10px 200px; /* Adjust padding */
    margin-bottom: 20px; /* Adjust gap between sections */
}

/* ------- Responsive Adjustments - Fix for Overlapping ------ */
@media (max-width: 1100px) {  
   .container {
      padding: 40px 5%; /* Reduce side padding */
      flex-direction: column; /* Stack sections on smaller screens */
      align-items: center;
   }

   /* NEW: Make sure left-right sections stack together */
   .section-container {
      flex-direction: column; /* Stack left and right sections */
      align-items: center;
   }

   .left-section, .right-section {
      width: 100%; /* Full width for both sections */
      text-align: center;
   }

   .left-section {
      margin-right: 0; /* Remove unnecessary margin */
   }

   .circular-image {
      width: 150px; /* Reduce size for smaller screens */
      height: 150px;
   }
}

/* ------- General Button ------*/
.btn {
   background-color: #eeecec;
   color: #444;
   border: none;
   border-radius: 5px;
   padding: 8px 18px;
   margin-right: 10px;
   cursor: pointer;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
}

.button-container {
    margin-top: 10px; /* Ensures button is placed correctly */
}

.btn:hover {
   background-color: rgb(172, 169, 169);
}

/* ------- Company Logos and Interactive Button ------*/
.icon-container {
   display: block;
   margin-bottom: 10px;
   text-align: center;
}

.icon-container a {
   text-decoration: none;
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center; /* Center icons */
}

.icon-container img {
   width: 28px;
   height: 28px;
   margin-right: 5px;
   transition: transform 0.2s;
}

.icon-container span {
   font-size: 16px;
   line-height: 32px;
}

.icon-container:hover img {
   transform: scale(1.1);
}

.icon-container:hover span {
   font-size: 18px;
}

/* ------- Image and Caption (Responsive-Friendly) ------*/
.container_for_caption {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 8%; /* Adjust padding for better responsiveness */
    margin-bottom: 15px;
    gap: 20px; /* Space between image & text */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.image {
   flex: 0 0 180px; /* Prevents excessive shrinking */
}

.image img {
    width: 150px; /* Fixed width for all images */
    height: 150px; /* Fixed height to maintain consistency */
    object-fit: cover; /* Ensures images fill the space without distortion */
    border-radius: 8px; /* Keeps the slightly rounded corners for aesthetics */
    display: block;
}


.description {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 600px; /* Prevents text from stretching too wide */
    font-size: 16px; /* Slightly reduced for readability on phones */
}

/* ------- Full Mobile Optimization ------- */
@media screen and (max-width: 768px) {
    /* Stack sections fully */
    .container {
        padding: 30px 5%;
    }

    .full_sections,
    .container_for_caption {
        padding: 10px 5%; /* Adjust padding */
    }

    .container_for_caption {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px 8%;
        gap: 10px; /* Reduce gap between image and text */
    }

    .image {
        margin-right: 0;
        margin-bottom: 5px;
    }

    .image img {
        max-width: 140px; /* Slightly smaller images for better fit */
    }

    .description {
        max-width: 100%; /* Prevents text from being too narrow */
    }

    /* Adjust button for smaller screens */
    .btn {
        font-size: 14px;
        padding: 6px 12px;
    }
}

/* Additional styles for ultra-small devices */
@media screen and (max-width: 480px) {
    .circular-image {
        width: 120px; /* Make images smaller */
        height: 120px;
    }

    .right-section {
        font-size: 16px; /* Reduce font size for better fit */
    }

    .icon-container img {
        width: 24px;
        height: 24px;
    }

    .btn {
        font-size: 13px;
        padding: 5px 10px;
    }
}