/* Global Styles */
body {
    margin: 0;
  font-family: "Kantumruy Pro", sans-serif;
    color: #333;
    background-color: #f9f9f9;
} 

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 700

.kantumruy-pro-<uniquifier> {
  font-family: "Kantumruy Pro", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} 

li { 
    font-size: 18px;
    line-height: 2.2;
    color: #32343A;
    font-weight: 300;
    max-width: 790px;
    margin-bottom: 20px;

}

/* Header Styles */
header {
    opacity: 0;
    /* Initially hidden */
    transition: opacity 1s ease-in-out 1s;
    /* Fade-in with 1s delay after page load */
    z-index: 1;
    /* Ensure header stays on top of the content */
    position: relative;
}

/* Once the page is loaded, header fades in */
body.loaded header {
    opacity: 1;
}
/* General hidden state for items */
.portfolio-item {
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}

/* Parent grid animation */
.portfolio-grid {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* When grid is visible, animate its children */
body.loaded .portfolio-grid {
    opacity: 1;
}

/* Stagger child animations for each item */
body.loaded .portfolio-item.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Add staggered delay using nth-child selector */
body.loaded .portfolio-item:nth-child(1).animate {
    transition-delay: 2.5s;
}

body.loaded .portfolio-item:nth-child(2).animate {
    transition-delay: 2.7s;
}

body.loaded .portfolio-item:nth-child(3).animate {
    transition-delay: 2.9s;
}

/* Add more nth-child rules as needed */


/* Content Styles */
.container {
    width: 100%;
    max-width: 1261px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Header layout */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 90px 0;
    box-sizing: border-box;
    width: 100%;
}

header .logo {
    font-size: 20px;
    font-weight: normal;
}

header nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

header nav ul li {
    margin-left: 20px;
}

header nav ul li a {
    text-decoration: none;
    color: #333;
    font-size: 19px;
    font-weight: 300;
}

/* #5D5555; */

header nav ul li a:hover {
    color: #0077b5;
}

/* Intro */
.intro {
    width: 100%;
    max-width: 760px;
    padding: 60px 0;
    text-align: left;
    opacity: 0;
        /* Initially hidden */
        transition: opacity 1s ease-in-out 0.4s;
        /* Fade-in with 0.5s delay after page load */
} 

/* Once the page is loaded, portfolio grid fades in */
body.loaded .intro {
    opacity: 1;
}

.intro h3 {
    font-size: 29px;
    font-weight: normal;
    line-height: 1.5;
    color: #333;
    margin: 0;
} 

/* Intro */
.intro-port {
    width: 100%;
    max-width: 900px;
    padding: 60px 0;
    text-align: left;
    opacity: 0;
    /* Initially hidden */
    transition: opacity 1s ease-in-out 0.4s;
    /* Fade-in with 0.5s delay after page load */
}

/* Once the page is loaded, portfolio grid fades in */
body.loaded .intro-port {
    opacity: 1;
}

.intro-port h3 {
    font-size: 29px;
    font-weight: normal;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* Portfolio Item Styles */
.portfolio-item {
    position: relative;
    overflow: hidden;
    text-align: left;
    height: 800px;
}

.portfolio-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: none !important;
} 

/* Initial state of the overlay */
.portfolio-item .overlay {
    transform: translateY(0);
    /* Start at the original position */
    bottom: 10px;
    /* Keep the bottom at 10px by default */
}

/* Overlay Styles */
.overlay {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 50%;
    height: 50%;
    object-fit: cover;
    z-index: 5;
    left: -20px;
    right: -40px;
    width: calc(20% + 40px);
    transition: transform 0.6s ease-out, bottom 0.6s ease-out;
    /* Apply a smooth transition on transform and bottom with a 0.6s delay */
}

/* Hover effect for overlay */
.portfolio-item:hover .overlay {
    transform: translateY(-20%);
    /* Apply translation to move the overlay upwards */
    bottom: 0;
    /* Ensure the overlay stays aligned properly */
}

.text-overlay {
    position: absolute;
    top: 43px;
    left: 43px;
    right: 43px;
    z-index: 10;
    color: #fff;
}

.text-overlay h3 {
    margin: 0;
    font-size: 29px;
    font-weight: normal;
    line-height: 1.5;
}

.text-overlay p {
    margin: 15px 0 0;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* Unique Item Styles */
.unique-item {
    position: relative;
    overflow: hidden;
    text-align: left;
    height: 800px;
}

/* Image inside unique portfolio item */
.unique-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: none !important;
    /* Disable scaling completely */
}

/* Overlay for unique portfolio item */
.unique-item .overlay {
    position: absolute;
    bottom: -32%;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    z-index: 5;
    transform: scale(0.8);
    /* Initial scale for overlay */
    transform-origin: center center;
    transition: transform 0.3s ease, bottom 0.3s ease;
}

/* Hover effect for unique portfolio item overlay */
.unique-item:hover .overlay {
    bottom: -25%;
    transform: translateY(-10%) scale(0.8);
    /* Move overlay up */
}

/* Ensure image does not grow on hover */
.unique-item:hover img {
    transform: none;
    /* Disable scaling of the image */
}

/* Dark overlay */
.portfolio-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 6;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Hover Effects */
.portfolio-item:hover::before {
    opacity: 0;
}

/* Active Link */
a.active {
    color: rgba(93, 85, 85, 0.5);
    font-weight: normal;
    letter-spacing: 1px;
    padding-bottom: 6px;
} 


/* Ensure the about page section is centered */
.about-page {
    display: flex;
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
    gap: 30px; /* Adds space between the image and the text */
    width: 100%;
    max-width: 1261px; /* Optional: Control the max width of the section */
    margin: 0 auto; /* Centers the entire section */
    padding: 50px 20px; /* Optional: Adds padding to create spacing around the section */
    box-sizing: border-box;
}

/* Ensures the image and text are centered properly */
.about-content {
    display: flex;
    justify-content: space-between; /* Ensures the content is spaced out correctly */
    align-items: flex-start; /* Align items to the top of the container */
    gap: 30px; /* Adds space between the image and text */
    width: 100%;
    max-width: 1200px; /* Optional: Control the width of the content */
}

/* Portfolio Grid Styles */
.about-text {
    opacity: 0;
    /* Initially hidden */
    transition: opacity 1s ease-in-out 3s;
    /* Fade-in with 2s delay after page load */
}

/* Once the page is loaded, portfolio grid fades in */
body.loaded .about-text {
    opacity: 1;
}

/* Portfolio Grid Styles */
.about-img {
    opacity: 0;
    /* Initially hidden */
    transition: opacity 1s ease-in-out 2s;
    /* Fade-in with 2s delay after page load */
}

/* Once the page is loaded, portfolio grid fades in */
body.loaded .about-img {
    opacity: 1;
}

/* Styling for the image on the left side */
.about-img img {
    width: 100%;
    max-width: 500px; /* Ensures the image has a maximum width */
    height: auto;
    object-fit: cover; /* Ensures the image is scaled and cropped appropriately */
}

/* Styling for the text on the right side */
.about-text {
    max-width: 600px; /* Control the max width of the text container */
    width: 100%;
}

/* Heading for the About Text */
.about-text h2 {
    font-size: 30px;
    font-weight: 500;
    color: #32343A;
    margin-bottom: 20px;
    margin-top: 0px;
}

/* Paragraph text styling */
.about-text p {
    font-size: 17px;
    line-height: 2.1;
    color: #32343A;
}

/* List item styling */
.about-text ul li {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.6;
    color: #32343A;
}

/* Fancy Link Style for Resume */
.resume-link {
    text-align: left;
    margin-top: 20px;
}

.resume-button:hover {
    background-color: #005f87;
    transform: translateY(-2px);
}

/* Grey Tile */
.grey-tile {
    width: 100%;
    height: 150px; /* Adjust height as needed */
    background-color: #f2f2f2;
    margin-top: 30px;
}

/* Reset margin and padding for the body and parent container */
body, .portfolio-page {
    margin: 0;
    padding: 0;
    width: 100%; /* Ensure it spans the full width */
}

/* Ensure the portfolio content also spans the full width */
.portfolio-content {
    display: flex;
    justify-content: center; /* Optional: Center content horizontally */
    align-items: center; /* Optional: Center content vertically */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Style the image container to take full width */
.port-img {
    width: 100%; /* Ensure full width */
    max-width: 100%; /* Remove any limiting maximum width */
    overflow: hidden; /* Prevent any overflow */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
      opacity: 0;
    /* Initially hidden */
    transition: opacity 1s ease-in-out 2s;
    /* Fade-in with 2s delay after page load */
}

/* Style the image itself */
.port-img img {
    width: 100%; /* Make the image fit the container's width */
    height: auto; /* Maintain the aspect ratio */
    display: block; /* Remove any extra spacing below the image */
    margin: 0; /* Ensure no gaps from margin */
    margin-bottom: 40px;
    padding: 0; /* Ensure no gaps from padding */
} 

/* Once the page is loaded, portfolio grid fades in */
body.loaded .port-img {
    opacity: 1;
}


/* General Tile Styles */
.tile {
    background: #f2f2f2;
    color: #fff;
    border-radius: 12px;
    padding: 70px;
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: 1261px; /* Matches the header width */
    margin: 20px auto; /* Centers the tile */
/*   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); */
    transition: transform 0.3s, box-shadow 0.3s;
}


/* Tile Header */
.tile-header h2 {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: normal;
    color: #32343A;
}

/* Tile Summary Section */
.tile-summary {
    margin-bottom: 15px;
}

.tile-summary p {
    font-size: 18px;
    line-height: 1.9;
    color: #32343A;
}

/* Tile Details Section */
.tile-details {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
} 

/* General Tile Styles */
.tile {
    background: #f2f2f2;
    color: #fff;
    border-radius: 12px;
    padding: 70px;
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: 1261px; /* Matches the header width */
    margin: 20px auto; /* Centers the tile */
/*   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); */
    transition: transform 0.3s, box-shadow 0.3s;
}

/* General Tile Styles */
.tile-2 {
    background: #3F2AAA;
    color: #fff;
    border-radius: 12px;
    padding: 200px;
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: 1261px; /* Matches the header width */
    margin: 20px auto; /* Centers the tile */
/*   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); */
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Tile Header */
.tile-header h2 {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: normal;
    color: #32343A;
}

.tile-2 .tile-header h2 {
font-size: 34px;
    margin-bottom: 25px;
    font-weight: normal;
    color: #fff;
}

/* Tile Summary Section */
.tile-summary {
    margin-bottom: 15px;
}

.tile-summary p {
    font-size: 18px;
    line-height: 1.9;
    color: #32343A;
} 

.tile-2 .tile-summary p {
    font-size: 18px;
    line-height: 1.9;
    color: #fff;
} 

/* Tile Details Section */
.tile-details {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
}

.detail-item {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 17px;
    color: #333;
}

.detail-item strong {
    font-weight: bold;
    color: #32343A;
}

.tile-content {
    display: flex;
    /* Enables flexbox */
    justify-content: space-between;
    /* Creates space between items */
    align-items: flex-start;
    /* Aligns items to the top */
    gap: 20px;
    /* Optional: Adds spacing between left and right sections */
}

.tile-summary {
    flex: 1;
    /* Allows it to grow and take available space */
    max-width: 57%;
    /* Optional: Restricts width for better alignment */
}

.tile-2 .tile-summary {
    flex: 1;
    /* Allows it to grow and take available space */
    max-width: 100%;
        padding: 40px;
}

.tile-details {
    flex: 1;
    /* Allows it to grow and take available space */
    max-width: 40%;
    /* Optional: Restricts width for better alignment */
} 

b, strong {
  font-weight: bold;
}


/* General Tile Styles */
.alinea {
    color: #32343A;
    float: left;
    border-radius: 12px;
    padding-top: 40px;
    padding-bottom: 40px;
    margin: 20px auto;
        max-width: 1261px;
            width: 1261px;
    /* Centers the tile */
}

/* Tile Header */
.alinea-header h2 {
    font-size: 34px;
    margin-bottom: 25px;
    font-weight: normal;
    color: #32343A;
}

/* Tile Summary */
.alinea-summary p {
    font-size: 18px;
    line-height: 2.0;
    color: #32343A;
    max-width:850px;
    margin-bottom: 20px;
    /* Add spacing between paragraphs */
}

/* Tile Content Section: Flex Layout */
.alinea-content {
    display: flex;
    justify-content: space-between;
    /* Align content to left and right */
    align-items: flex-start;
    gap: 20px;
    /* Space between the summary and quote */
}

/* Tile Summary (Left side) */
.alinea-summary {
    flex: 1;
    /* Takes up available space */
    max-width: 100%;
    /* Optional max width to control how much space it takes */
}

/* Tile Quote (Right side) */
.tile-quote {
    flex-shrink: 0;
    max-width: 850px;
    /* Optional: Limit the width of the quote */
    background-color: #f4f4f4;
    /* Light background color for the tile effect */
    padding: 20px;
       margin-top: 30px;
    margin-bottom: 50px;
    /* Add some padding around the quote */
    border-radius: 12px;
    /* Round the corners to match the overall design */
    /* Optional: add a shadow for a more "tile-like" feel */
} 

/* Tile Quote (Right side) */
.tile-quote-two {
    flex-shrink: 0;
    max-width: 570px;
    /* Optional: Limit the width of the quote */
    background-color: #3F2AAA;
    /* Light background color for the tile effect */
    padding: 20px;
    /* Add some padding around the quote */
    border-radius: 12px;
    /* Round the corners to match the overall design */
    /* Optional: add a shadow for a more "tile-like" feel */
}

/* Quote Text Style */
.tile-quote .quote-item {
    font-style: italic;
    color: #5e6c84;
    line-height: 2.0;
    font-weight: 300;
    font-size: 18px;
    text-align: left;
    /* Align text to the right */
    /* Optional padding to visually separate quote */
} 

.quote-two p {
    font-size: 16px;
    color: #5e6c84;
} 

.quote-two h4 {
    font-size: 20px;
    color: #5e6c84;
    font-weight: normal;
}

.tile-quote-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    /* Space between the quotes */
}

.dropdown-container {
    display: flex;
    gap: 20px;
    /* Space between the dropdowns */
    flex-wrap: wrap;
    /* Allow dropdowns to wrap if needed */
}

 /* Container for holding the dropdowns side by side */
 .dropdown-container {
     display: flex;
     margin-bottom: 10px;
    margin-top: 40px;
     gap: 20px;
     /* Space between the dropdowns */
     flex-wrap: wrap;
     /* Allow dropdowns to wrap if needed */
 }

 /* Styling for the individual dropdown */
 .dropdown {
     margin: 10px 0;
     border: 1px solid #fff;
     border-radius: 5px;
     width: 49%;
     /* Adjust the width to fit side by side */
     box-sizing: border-box;
     background-color: #32343A;
 }

 .dropdown .title {
     padding: 25px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #fff;
     background-color: #32343A;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
 } 


 .dropdown .title h4 {
font-weight: normal;
 }

 .dropdown .content {
     display: none;
     padding: 25px;
     background-color: #32343A;
     border-top: 1px solid #32343A;
     box-sizing: border-box;
 }

 .dropdown .content p {
     margin: 0;
     color: #fff;
     font-size: 14px;
 } 

  .dropdown .content h4 {
      margin: 0;
      font-size: 16px;
font-weight: normal;
  }

 .plus-icon {
     font-size: 20px;
     transform: rotate(0deg);
     transition: transform 0.3s;
 }

 .dropdown.open .plus-icon {
     transform: rotate(45deg);
 }

 .dropdown.open .content {
     display: block;
 }


/* Responsive Design */
@media (max-width: 1024px) {
    .container {
        padding: 0 10px;
    }

    header {
        padding: 60px 0;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    header {
        padding: 40px 0;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    header {
        padding: 30px 0;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }
} 

/* Responsive Design Adjustments */
@media (max-width: 1024px) {
    .about-page {
        flex-direction: column; /* Stacks the image and text vertically on smaller screens */
        align-items: center; /* Ensures content is centered */
        padding: 20px; /* Adds padding for better spacing */
    }

    .about-img img {
        max-width: 100%; /* Makes sure the image takes full width on smaller screens */
    }

    .about-content {
        flex-direction: column; /* Ensures content is stacked vertically */
        align-items: center; /* Centers the content vertically */
        gap: 20px; /* Adds space between the image and text */
    }
} 

/* Responsive Design */
@media (max-width: 1261px) {
    .tile,
    header {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (min-width: 1261px) {
    .container {
        width: 100%;
        max-width: 1261px;
        padding: 0;
    }

    .portfolio-wrapper {
        width: 100%;
        max-width: 1261px;
        margin: 0 auto;
        margin-bottom: 70px;
        padding: 0;
    }

    header {
        padding: 90px 0;
    }

    header nav ul li a {
        color: #333;
        font-size: 19px;
        font-weight: 400;
        margin-left: 20px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .portfolio-item img {
        object-fit: cover;
    }
}