/* Importing web fonts and icons */
/* Brings in font styles and icons from the internet */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/* Basic Reset */
/* Clears out default styles that browsers add */
*,
*:before, /* This part clears default styles for anything before an element */
*:after { /* This part clears default styles for anything after an element */
    box-sizing: border-box; /* Makes sure padding and borders are included in the total size of the elements */
    margin: 0; /* Removes space around elements */
    padding: 0; /* Removes space inside elements */
    border: 0; /* Removes any borders */
    font-size: 100%; /* Sets the font size to normal */
    vertical-align: baseline; /* Aligns text to the bottom */
    background: transparent; /* Makes the background see-through */
}

/* HTML Element */
/* Sets up the base size and makes text smooth */
html {
    font-size: 62.5%; /* Makes the base font size 10px to make it easier to scale sizes */
    -webkit-font-smoothing: antialiased; /* Makes text look smoother */
}

/* Body Element */
/* Styles the main part of the page */
body {
    background-color: #121212; /* Sets a dark background color */
    color: #e0e0e0; /* Sets a light color for text */
    font-family: 'Roboto', sans-serif; /* Uses the Roboto font */
    font-weight: normal; /* Sets the normal weight for text */
    font-size: 1.5em; /* Makes text a bit bigger */
    line-height: 2.5em; /* Adds space between lines of text */
    -webkit-font-smoothing: antialiased; /* Makes text look smoother */
    -webkit-text-size-adjust: 100%; /* Keeps text size the same when the screen rotates */
    text-size-adjust: 100%; /* Standard setting for text size */
    text-align: center; /* Centers the text */
}

/* Header Section */
/* Styles the top section of the page where the title goes */
header {
    background-color: #1e1e1e; /* Dark background for the header */
    color: #ffffff; /* White text color */
    text-align: center; /* Centers the header text */
    padding: 20px 0; /* Adds space inside the header */
    border-bottom: 4px solid #4a90e2; /* Adds a blue line at the bottom */
}

/* Name Class */
/* Styles the name inside the header */
.name {
    font-size: 2.5em; /* Makes the name text big */
    font-weight: 700; /* Makes the name text bold */
    text-transform: uppercase; /* Makes the name text all uppercase letters */
    letter-spacing: 2px; /* Adds space between the letters */
}

/* Title Class */
/* Styles the job title inside the header */
.title {
    font-size: 1.5em; /* Makes the title text a bit smaller than the name */
    font-weight: 400; /* Normal weight for the title text */
    margin-top: 10px; /* Adds space above the title */
}

/* LinkedIn Icon Container Class */
/* Styles the box around the LinkedIn icon */
.linkedin-icon-container {
    margin-top: 10px; /* Adds space above the LinkedIn icon */
}

/* Top LinkedIn Icon Class */
/* Styles the LinkedIn icon at the top */
.linkedin-top-icon, .github-top-icon {
    width: 60px; /* Sets the width of the icon */
    height: auto; /* Keeps the height in proportion with the width */
    margin-top: 10px; /* Adds space above the icon */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Adds a shadow for a 3D effect */
    border-radius: 4px; /* Rounds the corners */
}

/* Bottom LinkedIn Icon Class */
/* Styles the LinkedIn icon at the bottom */
.linkedin-icon, .github-icon {
    width: 40px; /* Sets the width of the icon */
    height: auto; /* Keeps the height in proportion with the width */
    margin-left: 10px; /* Adds space to the left of the icon */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Adds a shadow for a 3D effect */
    border-radius: 4px; /* Rounds the corners */
}

/* Main Content */
/* Styles the main part of the resume */
main {
    padding: 20px; /* Adds space inside the main area */
    background-color: #1e1e1e; /* Dark background for the main area */
    margin: 20px auto; /* Adds space around the main area and centers it */
    max-width: 900px; /* Sets the maximum width */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); /* Adds a shadow around the main area */
    border-radius: 8px; /* Rounds the corners */
    text-align: center; /* Centers the text inside the main area */
}


/* Summary Section Styling */
/* Styles the section that contains the summary */
.summary {
    background-color: #1a1a1a; /* Dark background color */
    padding: 20px; /* Adds space inside the section */
    border-radius: 8px; /* Rounds the corners */
    margin: 20px auto; /* Centers the section and adds space around it */
    max-width: 800px; /* Sets the maximum width */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Adds a shadow for a 3D effect */
    text-align: center; /* Centers the text inside this section */
}

/* Summary Header (h2) Styling */
/* Styles the heading (h2) inside the summary section */
.summary h2 {
    color: #4a90e2; /* Blue color for the text */
    margin-bottom: 10px; /* Adds space below the heading */
    text-transform: uppercase; /* Makes the text all uppercase letters */
    letter-spacing: 1.5px; /* Adds space between the letters */
    text-align: center; /* Centers the heading text */
    font-size: 1.5em; /* Sets the font size to be bigger */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Adds a shadow to the text */
}

/* Summary Text Styling */
/* Styles the main text inside the summary section */
.summary-text {
    font-size: 1.1em; /* Sets the font size */
    line-height: 1.5em; /* Adds space between lines for readability */
    color: #e0e0e0; /* Light color for the text */
    text-align: center; /* Centers the text */
    margin: 0 auto; /* Centers the paragraph and adds some space around it */
    max-width: 700px; /* Sets a maximum width for the text */
}

/* Sections - Styling for section headers */
/* Styles all h2 headers */
h2 {
    color: #4a90e2; /* Blue color for the text */
    border-bottom: 2px solid #4a90e2; /* Adds a blue line under the text */
    padding-bottom: 5px; /* Adds space below the text */
    margin-bottom: 10px; /* Adds space below the text */
    text-transform: uppercase; /* Makes the text all uppercase letters */
    letter-spacing: 1.5px; /* Adds space between the letters */
    text-align: center; /* Centers the text */
}

/* Typography - Styling for different heading levels */
/* Styles all header tags (h1, h2, h3, h4, h5, h6) */
h1, h2, h3, h4, h5, h6 {
    color: #4a90e2; /* Blue color for the text */
    font-family: 'Roboto', sans-serif; /* Uses the Roboto font */
    font-weight: normal; /* Sets the font weight to normal */
    text-align: center; /* Centers the text */
}

/* Specific font sizes and line heights for each header level */
h1 { 
    font-size: 38px; /* Big font size */
    line-height: 42px; /* Line height for spacing */
    margin-bottom: 12px; /* Space below the text */
    letter-spacing: -1px; /* Reduces space between letters */
}
h2 { 
    font-size: 28px; /* Font size */
    line-height: 36px; /* Line height */
    margin-bottom: 6px; /* Space below the text */
}
h3 { 
    font-size: 22px; /* Font size */
    line-height: 30px; /* Line height */
    margin-bottom: 12px; /* Space below the text */
}
h4 { 
    font-size: 20px; /* Font size */
    line-height: 30px; /* Line height */
    margin-bottom: 6px; /* Space below the text */
}
h5 { 
    font-size: 18px; /* Font size */
    line-height: 30px; /* Line height */
}
h6 { 
    font-size: 14px; /* Font size */
    line-height: 30px; /* Line height */
}

/* Paragraph Styling */
/* Styles the paragraph text (p) */
p { 
    margin: 0 0 30px 0; /* Adds space below the paragraph */
    text-align: center; /* Centers the paragraph text */
}
/* Lead Paragraph Styling */
/* Styles a specific type of paragraph with the class "lead" */
p.lead {
    font: 19px/36px 'Roboto', sans-serif; /* Sets font size and line height */
    margin-bottom: 18px; /* Adds space below the paragraph */
    text-align: center; /* Centers the text */
}

/* Strong and Bold Text Styling */
/* Styles text that is strong or bold */
strong, b { 
    font: 15px/30px 'Roboto', sans-serif; /* Sets font size and line height */
    text-align: center; /* Centers the text */
}

/* Small Text Styling */
/* Styles small text */
small { 
    font-size: 11px; /* Small font size */
    line-height: inherit; /* Keeps the same line height as the parent element */
}

/* Blockquote Styling */
/* Styles blockquotes */
blockquote {
    margin: 30px 0px; /* Adds space above and below */
    padding-left: 40px; /* Adds space to the left */
    position: relative; /* Relative positioning for custom bullet */
    color: #b3b3b3; /* Gray color for the text */
    text-align: center; /* Centers the text */
}

/* Blockquote Opening Quote Styling */
/* Styles the opening quote mark in blockquotes */
blockquote:before {
    content: "\201C"; /* Unicode for opening double quote mark */
    opacity: 0.45; /* Makes the quote mark slightly see-through */
    font-size: 80px; /* Big font size for the quote mark */
    line-height: 0px; /* No extra space above or below the quote mark */
    margin: 0; /* No extra space around the quote mark */
    font-family: Arial, sans-serif; /* Sets the font for the quote mark */
    position: absolute; /* Positions the quote mark relative to its container */
    top:  30px; /* Moves it down 30px from the top */
    left: 0; /* Positions it at the left edge */
}

/* Blockquote Paragraph Styling */
/* Styles the paragraph inside blockquotes */
blockquote p {
    font-family: 'Roboto', sans-serif; /* Uses the Roboto font */
    padding: 0; /* No extra space inside */
    font-size: 18px; /* Font size */
    line-height: 36px; /* Adds space between lines */
    text-align: center; /* Centers the text */
}

/* Blockquote Citation Styling */
/* Styles the citation in blockquotes */
blockquote cite {
    display: block; /* Displays as a block element */
    font-size: 12px; /* Small font size */
    font-style: normal; /* Normal font style */
    line-height: 18px; /* Line height for readability */
    text-align: center; /* Centers the text */
}

/* Custom Citation Symbol */
/* Adds a custom symbol before the citation */
blockquote cite:before { 
    content: "\2014 \0020"; /* Unicode for an em dash followed by a space */
}

/* Links Styling */
/* Styles for links and visited links */
a, a:visited {
    text-decoration: none; /* Removes underlines */
    outline: 0; /* Removes outline */
    color: #11ABB0; /* Link color */
    transition: color .3s ease-in-out; /* Smooth color change */
}

/* Links Hover and Focus Styling */
/* Styles for links when hovered or focused */
a:hover, a:focus { 
    color: #4a90e2; /* Changes color on hover/focus */
}

/* List Item Styling */
/* Styles for list items */
ul li {
    line-height: 24px; /* Space between lines */
    margin-bottom: 12px; /* Space below each item */
    display: flex; /* Align items using flexbox */
    align-items: center; /* Center items vertically */
}

/* Custom Bullet Points for List Items */
/* Adds custom bullet points */
ul li::before {
    content: "•"; /* Unicode for bullet point */
    color: #4a90e2; /* Bullet color */
}

/* Remove Bullets from Certification List */
/* Removes custom bullet points in certification list */
.certification-list li::before {
    content: none; /* No bullet point */
}

/* Education Link Styling */
/* Styles for education links */
.education-link {
    color: #4a90e2; /* Link color */
    text-decoration: none; /* Removes underlines */
    border-bottom: 1px dashed #4a90e2; /* Adds a dashed underline */
    transition: color 0.3s ease, border-bottom-color 0.3s ease; /* Smooth transition */
}

/* Education Link Hover Styling */
/* Styles for education links when hovered */
.education-link:hover {
    color: #0056b3; /* Darker color on hover */
    border-bottom-color: #0056b3; /* Darker underline on hover */
}

/* Certifications Section Styling */
/* Styles the certifications section */
.certifications {
    background-color: #141414; /* Dark background for contrast */
    padding: 20px; /* Adds padding inside */
    border-radius: 8px; /* Rounds the corners */
    margin: 20px auto; /* Centers the section */
    max-width: 900px; /* Sets maximum width */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); /* Adds a shadow for depth */
    text-align: center; /* Centers the text */
}

/* Certifications Header (h2) Styling */
/* Styles the header in certifications section */
.certifications h2 {
    color: #4a90e2; /* Blue color for the header */
    margin-bottom: 20px; /* Space below the header */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 1.5px; /* Adds space between letters */
    text-align: center; /* Centers the header text */
}

/* Certification Columns Styling */
/* Styles for certification columns using flexbox */
.certification-columns {
    display: flex; /* Uses flexbox layout */
    justify-content: center; /* Centers columns horizontally */
    gap: 20px; /* Space between columns */
}

/* Single Column Styling */
/* Styles each single column */
.column {
    flex: 1; /* Each column takes up equal space */
    display: flex; /* Uses flexbox layout */
    flex-direction: column; /* Aligns items in a column */
    align-items: center; /* Centers items vertically */
}

/* Certification List Styling */
/* Styles the list in the certifications section */
.certification-list {
    list-style: none; /* Removes default bullets */
    padding-left: 0; /* Removes left padding */
    margin: 0; /* Removes default margin */
}

/* Certification List Item Styling */
/* Styles each item in the certification list */
.certification-list li {
    display: flex; /* Align items using flexbox */
    align-items: center; /* Centers items vertically */
    margin-bottom: 20px; /* Space below each item */
}

/* Certification Link Styling */
/* Styles the certification links */
.cert-link {
    position: relative; /* Allows positioning of hover text */
    display: inline-block; /* For positioning */
    text-decoration: none; /* Removes underlines */
}

/* Certification Logo Styling */
/* Styles the certification logos */
.cert-logo {
    width: 30px; /* Sets width */
    height: auto; /* Keeps aspect ratio */
    margin-right: 10px; /* Space between logo and text */
    transition: transform 0.3s ease-in-out; /* Smooth transition for hover effect */
}

/* Hover Text Styling for Certification Logos */
/* Styles the text that appears when hovering over logos */
.hover-text {
    position: absolute; /* Positions the text relative to the logo */
    bottom: -45px; /* Positions below the logo */
    left: 50%; /* Centers horizontally */
    transform: translateX(-50%); /* Fixes centering */
    background-color: rgba(0, 0, 0, 0.8); /* Dark semi-transparent background */
    color: #ffffff; /* White text color */
    padding: 10px 15px; /* Adds padding */
    border-radius: 8px; /* Rounds the corners */
    font-size: 0.9em; /* Font size */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition */
    white-space: nowrap; /* Prevents text wrapping */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Adds a shadow for depth */
    z-index: 10; /* Keeps it above other elements */
}

/* Hover Effect for Certification Links */
/* Shows the hover text when hovering over the link */
.cert-link:hover .hover-text {
    opacity: 1; /* Makes hover text visible */
    transform: translateX(-50%) translateY(-5px); /* Moves the hover text slightly up */
}

/* Experience Section Styling */
/* Styles the experience section */
.experience {
    text-align: center; /* Centers all text in the experience section */
}

/* Experience List Styling */
/* Styles the list in the experience section */
.experience ul {
    display: inline-block; /* Centers the list */
    text-align: left; /* Left-aligns text inside the list */
    padding-left: 0; /* Removes left padding */
}

/* Experience List Item Styling */
/* Styles each item in the experience list */
.experience ul li {
    text-align: left; /* Left-aligns the text */
}

/* Footer Section Styling */
/* Styles the footer section */
footer { 
    text-align: center; /* Centers the text in the footer */
    padding: 20px 0; /* Adds padding inside the footer */
}

/* Footer List Styling */
/* Styles the list in the footer */
footer ul { 
    display: inline-block; /* Centers the list */
    text-align: left; /* Left-aligns text inside the list */
    padding-left: 0; /* Removes left padding */
}

/* Footer List Item Styling */
/* Styles each item in the footer list */
footer ul li { 
    text-align: left; /* Left-aligns the text */
}

/* Add subtle shadow to headers */
/* Styles for h2 and h3 headers to add a shadow effect */
h2, h3 {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8); /* Adds a soft shadow effect */
}

/* Add a box shadow to the main content and sections */
/* Styles for adding a shadow and rounded corners to main content, certifications, experience, and footer sections */
main, .certifications, .experience, footer {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Adds a soft shadow for a 3D effect */
    border-radius: 8px; /* Rounds the corners */
}

/* Add hover effect to certification logos */
/* Styles for certification logos to add a hover effect */
.cert-logo {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}

/* Hover effect for certification logos */
/* Styles for certification logos when hovered */
.cert-logo:hover {
    transform: scale(1.1); /* Slightly enlarges the logo on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Adds a shadow on hover */
}

/* Enhance buttons and interactive elements */
/* Styles for links and buttons to add hover effects */
a, button {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

/* Hover effect for links and buttons */
/* Styles for links and buttons when hovered */
a:hover, button:hover {
    transform: translateY(-2px); /* Slight lift effect on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* Adds a shadow on hover */
}

/* Header Section Styling */
/* Styles the header section at the top of the page */
header {
    background-color: #1e1e1e; /* Dark background for the header */
    color: #e0e0e0; /* Light text color for contrast */
    padding: 20px; /* Adds space inside the header */
    border-radius: 8px; /* Rounds the corners of the header */
    margin: 20px auto; /* Centers the header section and adds space above and below */
    max-width: 900px; /* Maximum width for the header */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Adds a soft shadow for a 3D effect */
    text-align: -10px; /* Centers the text inside the header (this value seems off; typically you would use "center") */
    
}

/* Name Class Styling */
/* Styles the name element inside the header */
header .name {
    font-size: 2.5em; /* Makes the name text large */
    font-weight: 700; /* Makes the name text bold */
    text-transform: uppercase; /* Converts the name text to uppercase */
    letter-spacing: 2px; /* Adds space between the letters */
    margin-bottom: 10px; /* Adds space below the name */
}

/* Title Class Styling */
/* Styles the title element inside the header */
header .title {
    font-size: 1.5em; /* Font size for the title text */
    font-weight: 400; /* Normal font weight for the title text */
    margin-top: 10px; /* Adds space above the title */
}

/* Blue Line Styling for Blocks */
.block {
    position: relative; /* Allows for absolute positioning of the pseudo-element */
    padding-bottom: 10px; /* Adds space at the bottom for the line */
    margin-bottom: 20px; /* Adds space between blocks */
    background-color: #1e1e1e; /* Dark background for blocks */
    color: #e0e0e0; /* Light text color */
    padding: 20px; /* Padding inside the blocks */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Adds a shadow for a 3D effect */
}

/* Pseudo-element for blue line at the bottom */
.block::after {
    content: ""; /* Ensures the pseudo-element is displayed */
    display: block; /* Makes it a block element */
    height: 4px; /* Height of the blue line */
    background-color: #4a90e2; /* Blue color */
    position: absolute; /* Positions the line at the bottom */
    bottom: 0; /* Positions it at the bottom of the block */
    left: 0; /* Stretches it to the left edge */
    right: 0; /* Stretches it to the right edge */
    border-bottom-left-radius: 8px; /* Keeps the bottom-left corner rounded */ 
    border-bottom-right-radius: 8px; /* Keeps the bottom-right corner rounded */
}

/* ===========================
   Visitor Counter Styling
   =========================== */
.visitor-counter {
  text-align: center;         /* Center the counter under the footer */
  margin-top: 12px;           /* Add space above the counter */
  font-family: Arial, sans-serif;
  font-size: 1rem;
}

#counter {
  font-weight: bold;          /* Make the number stand out */
  color: #2c3e50;             /* Dark slate color for readability */
  background-color: #ecf0f1;  /* Light background highlight */
  padding: 4px 8px;           /* Breathing room around the text */
  border-radius: 6px;         /* Rounded corners for a modern look */
  margin-left: 6px;           /* Space between label and number */
}