@import url("colors.css");

/* --- About Section --- */
.about {
    display: flex; /* Use flexbox for flexible layout */
    flex-direction: row; /* Stack elements by default on small screens */
    align-items: center; /* Center items horizontally in column layout */
    gap: 40px; /* Increased space between image and text */
    padding: 30px;
    background-color: var(--pri);
    border-radius: 10px; /* Slightly more rounded corners */
    box-shadow: 0 8px 25px var(--shadow1); /* More prominent, soft shadow */
    margin-bottom: 60px; /* More space after the section */
    overflow: hidden; /* Ensure content respects border-radius */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
    border: 2px solid var(--priAcc); /* Darker border for emphasis */
}

.about:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 12px 35px var(--shadow2); /* Enhanced shadow on hover */

}

.about img#photo {
    width: 80%; /* Start with a larger percentage on small screens */
    max-width: 280px; /* Limit max size for the image */
    height: auto;
    border-radius: 50%; /* Keep it perfectly round */
    border: 4px solid var(--priAcc); /* Slightly thicker border around the image */
    box-shadow: 0 0 20px rgba(0,0,0,0.25); /* Stronger, softer shadow for the image */
    object-fit: cover; /* Ensures image covers the circular space without distortion */
    flex-shrink: 0; /* Prevent image from shrinking smaller than content */
}

#photo:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

.goals{
	text-align: left;
	display: inline;
}
.about-text {
    text-align: center; 
    font-size: 1.15em; 
    max-width: 800px; 
    color: #444;
    background-color: var(--bkg2);

}

.career-goals{
	text-align: left;
}

.career{
	margin-top: 10px !important;
	margin-bottom: 10px;
	    box-shadow: 0 12px 35px var(--shadow1);
font-size: 1.15em; 
    max-width: 800px; 
    color: #444;
    background-color: var(--bkg2);
}
.goals{
	display: inline-block;
	margin: 0px 20px 0px;
	background-color: var(--priAcc);
	border-radius: 10px;
    border: 2px solid var(--pri);
	color: var(--bkg);
}

.goals:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px var(--shadow2);
}

.reusme{
	display: flex;
	flex-direction: column;
}

.btn-resume{
    text-align: left;
	background-color: var(--secAcc) !important;
	border: 2px solid var(--priAcc);
	padding: 10px;
	margin: 20px;
	border-radius: 10px;
	box-shadow: 0 2px 8px var(--shadow1);
	color: var(--priAcc)
}

.btn-resume:hover{
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 12px 35px var(--shadow2); /* Enhanced shadow on hover */
	color: var(--link);
}

.links-btn{
    align-items: center;
	padding-top:20px;
}

.link-btn:hover{
	transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 12px 35px var(--shadow2); /* Enhanced shadow on hover */
	color: var(--secAcc);
}

.link-btn{
	margin: 20px;
	transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */

}

.bit img{
	height: 38px;
}

/* --- Education Section --- */
.edu-color{
	border: 2px solid var(--priAcc); /* Darker border for emphasis */
    display: flex;
    flex-direction: column; /* Stack on small screens */
    background-color: var(--secAcc);
    box-shadow: 0 8px 25px var(--shadow1);
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */

}
.edu-color h2 {
	margin: 0px 160px;; 
	background-color: var(--pri);
	border-radius: 10px;
    box-shadow: 0 12px 35px var(--shadow1);
	border: 2px solid var(--priAcc); /* Darker border for emphasis */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */

}
.edu-color h2:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px var(--shadow2);
}

.education {
    display: flex;
    flex-direction: row; /* Stack on small screens */
    align-items: center;
    gap: 40px; /* Space between text content and image */
    padding: 30px;
    text-align: center; /* Center text within education blocks */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.edu-color:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px var(--shadow2);
}

.education .text-content {
    flex: 1; /* Allows text content to take up available space */
}

.actual-text {
    background: var(--bkg2);
    border: 2px solid var(--priAcc); /* Darker border for emphasis */
    padding: 20px; /* More padding inside the text box */
    border-radius: 10px;
    display: block; /* Make it a block element to take full width */
    width: 100%; /* Ensure it spans full width in its container */
    box-shadow: 0 4px 12px rgba(134,186,205,0.15); /* More prominent shadow */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    text-align: left; /* Align text within the box to the left */
}

.actual-text h4 {
    margin-top: 0; /* Remove top margin for internal h4 */
    margin-bottom: 0.5em; /* Space below h4 */
    text-align: left; /* Align h4 to the left */
}

.actual-text p {
    margin-bottom: 0.5em; /* Reduce space after paragraphs */
    text-align: left; /* Align paragraphs to the left */
}



#fsu-logo {
    max-width: 250px; /* Control FSU logo size */
    height: auto;
    display: block;
    margin: 0 auto;
    border: none;
    transition: transform 0.3s ease;
}

#fsu-logo:hover {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* --- Mentionable Courses Section --- */
.courses {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to next line */
    justify-content: center; /* Center items when they wrap */
    gap: 25px; /* More space between course boxes */
    margin: 40px;
    padding: 30px;
    background-color: var(--priAcc); /* Light background for the section */
    border-radius: 10px;
    box-shadow: inset 0 0 10px var(--shadow1); /* Subtle inner shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 2px solid var(--pri); 

}

.class {
    background: var(--bkg2);
    border-radius: 10px;
    padding: 20px 25px; /* More padding inside each course box */
    flex: 1 1 calc(50% - 25px); /* Two columns on larger screens, one on small */
    max-width: 400px; /* Limit max width of each card */
    border: 2px solid var(--pri);
    box-shadow: 0 4px 15px rgba(134,186,205,0.12); /* Softer, more pronounced shadow */
    display: flex;
    flex-direction: column; /* Stack h4 and ul */
    align-items: flex-start; /* Align content to the left */
}

.courses:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px var(--shadow2); /* Enhanced shadow on hover */
}

.uni-title {
    margin-top: 0; /* Remove top margin */
    margin-bottom: 15px; /* Space between title and list */
    text-align: left; /* Align title to the left */
}

.course {
    list-style: disc inside;
    padding-left: 0;
    margin: 0;
    flex-grow: 1; /* Allow list to grow and push title up if needed */
    text-align: left; /* Align list items to the left */
}

.course li {
    margin-bottom: 8px; /* Slightly more space between list items */
    font-size: 1.05em; /* Slightly larger text */
}

/* --- Employment Section --- */
.employment{
    background-color: var(--pri);
    padding: 40px; 
    border-radius: 10px;
    padding-bottom: 1px;
    border: 2px solid var(--priAcc);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */

}

.employment:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px var(--shadow2);
}
.job {
    background: var(--bkg2);
    padding: 25px 30px; /* More padding */
    border-radius: 10px;
    box-shadow: 0 8px 25px var(--shadow1);
    margin-bottom: 60px;
    border: 2px solid var(--priAcc);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Ensure content respects border-radius */
}

.job:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px var(--shadow2);
}

.emptitle {
    text-align: left; /* Align job titles to the left within their card */
    color: var(--titleTxt);
    margin-top: 0; /* Remove extra top margin */
    margin-bottom: 10px; /* Space below title */
}

.emp {
    display: flex;
    flex-direction: row; /* Stack company and dates on small screens */
    align-items: flex-start; /* Align text to the left */
    margin-bottom: 15px;
    gap: 5px; /* Reduce gap between company and dates */
    font-size: 0.95em;
    color: #555;
}

.empcomp {
    font-weight: 700; /* Bold company name */
    margin: 0;
}

.empdates {
    margin: 0;
    font-style: italic;
}

.job-logo {
    display: flex;
    flex-direction: column; /* Stack tasks and image on small screens */
    align-items: center; /* Center items when stacked */
    gap: 30px; /* Space between tasks and image */
    margin-top: 20px; /* Space below company/dates */
}

.tasks {
    flex: 1;
    padding-left: 20px; 
    margin: 0;
    list-style: disc; /* Ensure bullet points are visible */
    /*text-align: left;  Align tasks to the left */
}

.tasks li {
    margin-bottom: 10px;
    line-height: 1.6;
    padding: 0; 
    font-size: 1.05em;
}

.empimg {
    max-width: 150px; /* Default max width for company logos */
    height: auto;
    display: block;
    margin: 0 auto; /* Center image when stacked */
    opacity: 0.8; /* Slightly subdue logos */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.empimg:hover {
    opacity: 1; /* Full opacity on hover */
    transform: scale(1.05); /* Slight zoom */
}

#gsi { max-width: 120px; }
#sol { max-width: 180px; }
#ld { max-width: 100px; }




/* --- Skills Section --- */
.skill-section {
	display: flex;
    background: var(--priAcc);
    padding: 20px 35px 30px;;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    margin-bottom: 60px;
    border: 2px solid var(--pri); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
    flex-direction: column;
}

.skill-section h2{
	margin-top: 10px;
	background-color: var(--pri);
	border-radius: 10px;
    border: 2px solid var(--priAcc); 
	padding: 10px;
	margin-left: 100px;
	margin-right: 100px;
}

.tech-prof-skills{
	display:flex;
	flex-direction: row;
}

.theatre-group{
	flex: 0;
	background: var(--secAcc);
	padding: 10px;
	margin: 20px;
	border-radius: 10px;
    box-shadow: 0 8px 25px var(--shadow1);
    border: 2px solid var(--pri); 
	transition: transform 0.3s ease, box-shadow 0.3s ease;

}
.skill-group{
	flex: 1;
	background: var(--secAcc);
	padding: 10px;
	margin: 20px;
	border-radius: 10px;
    box-shadow: 0 8px 25px var(--shadow1);
    border: 2px solid var(--pri); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
}

.skill-group:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px var(--shadow2);
}

.theatre-group:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px var(--shadow2);
}

.skill-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px var(--shadow2);
}

.skills {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 15px 25px;
	list-style: square inside;
	padding: 12px;
    background: var(--bkg2);
    border: 2px solid var(--priAcc);
    box-shadow: 0 2px 5px rgba(134,186,205,0.08);
    border-radius: 10px;
	 flex: 1 1 auto;      /* This makes the list grow to fill the vertical space */
  min-height: 0; 
}

.the-skills {
    justify-content: left;
    gap: 15px 25px;
	list-style: square inside;
	padding: 12px;
    background: var(--bkg2);
    border: 2px solid var(--priAcc);
    box-shadow: 0 2px 5px rgba(134,186,205,0.08);
    border-radius: 10px;
}
.skills li, .the-skills li {
    border-radius: 10px;
    padding: 6px 24px;           /* More generous, proportional padding */
    color: #133c55;
    font-weight: 600;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
    flex-shrink: 0;
    min-width: 120px;             /* Lowered to allow more flexibility */
        white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;

}


.skills li:hover, .the-skills li:hover {
    background: var(--pri); /* Your lighter blue on hover */
    color: #fff;
    border-color: var(--priAcc);
    transform: translateY(-3px) scale(1.03); /* Lift and slight scale on hover */
    box-shadow: 0 4px 10px rgba(134,186,205,0.25);
}

.skills li, .the-skills li {
padding: 8px;
}


/* --- Mobile Responsiveness (Media Queries) --- */

/* Small devices (phones, less than 768px) */
@media (max-width: 767.98px) {
  
    .about {
        padding: 20px;
      flex-direction: column;
        gap: 25px;
    }
    .about img#photo {
        max-width: 200px; /* Smaller image on tiny screens */
    }
    .about-text {
        font-size: 1em; /* Standard text size */
    }

    .education, .job {
        padding: 20px;
      flex-direction: column;
        gap: 25px;
    }

    .actual-text {
        padding: 15px;
    }

    .tech-prof-skills{
        flex-direction:column;
    }

    .courses {
        gap: 15px; /* Closer gap for course boxes on small screens */
        padding: 15px;
    }
    .class {
        flex: 1 1 100%; /* Single column on very small screens */
        max-width: 100%; /* Full width */
    }

    
    .emp {
        flex-direction: column; /* Ensure company and dates stack */
        align-items: left; /* Center them when stacked */
    }
    .empcomp, .empdates {
        text-align: left; /* Center company and dates */
    }

    .job-logo {
        flex-direction: column; /* Stack tasks and image */
        align-items: center; /* Center them */
        gap: 20px;
    }
    .tasks {
        padding-left: 0; /* Remove left padding for tasks on small screens */
        text-align: left; /* Center task list */
        list-style-position: inside; /* Keep bullets inside */
    }
    .tasks li {
        font-size: 0.95em;
    }

    .empimg {
        max-width: 100px; /* Smaller logos on small screens */
    }
    #gsi { max-width: 80px; }
    #sol { max-width: 140px; }
    #ld { max-width: 70px; }

    .skill-section {
        padding: 20px;
    }
    .skills, .the-skills {
        gap: 10px 15px; /* Tighter gap for skills */
    }
    .skills li, .the-skills li {
        padding: 8px 15px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .about {
        padding: 40px;
        gap: 60px;
    }
    .about img#photo {
        max-width: 300px;
    }
  
    .education {
        padding: 40px;
        gap: 60px;
    }
    #fsu-logo {
        max-width: 300px;
    }


}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
   
    .about-text {
        text-align: left; /* Align text to the left */
    }

  
    .actual-text {
        padding: 20px; /* Restore original padding */
    }

    .courses {
        justify-content: space-between; /* Distribute items evenly */
    }
    .class {
        flex: 1 1 calc(50% - 20px); /* Two columns */
        max-width: calc(50% - 20px); /* Max width for two columns */
    }

    .job-logo {
        flex-direction: row; /* Tasks and image side-by-side */
        align-items: flex-start; /* Align to the top */
        justify-content: space-between; /* Space out tasks and logo */
    }
    .tasks {
        padding-left: 20px;
        text-align: left;
        list-style-position: outside; /* Standard bullet position */
    }
}