/* Global Styles */
body {
    margin: 0;
    padding: 0;
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    box-sizing: border-box; /* Include padding and borders in width/height */
}

/* Hero Section */
.hero {
    background-color: #D4FFF6; /* Light blue background */
    text-align: center;
    padding: 30px 20px; /* Adjusted vertical padding */
    min-height: 70vh; /* Minimum height to avoid overlap */
    display: flex; /* Flexbox layout */
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    margin: 0;
    width: 100vw; /* Full width of the viewport */
}

/* Logo Styling */
.logo img {
    width: 480px; /* 20% larger than previous size */
    max-width: 100%; /* Ensure responsiveness for small screens */
    height: auto; /* Maintain aspect ratio */
    margin: 15px 0; /* Space around the logo */
}

/* Hero Description */
.hero-description {
    margin-top: 15px; /* Reduced margin above the description */
    font-size: 1.8rem; /* Font size for hero description */
    color: #333;
    width: 60%; /* Constrain width for better readability */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    word-wrap: break-word; /* Prevent overflow of long text */
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* Responsive Adjustments for Small Screens */
@media (max-width: 768px) {
    .hero {
        padding: 20px; /* Reduce padding for smaller viewports */
    }

    .logo img {
        width: 360px; /* Adjusted size for tablets */
        margin: 10px 0; /* Maintain proper spacing */
    }

    .hero-description {
        font-size: 1.5rem; /* Adjusted font size for tablets */
        width: 80%; /* Allow more width for readability */

    
    }
    .portfolio-description {
        font-size: 1.5rem; /* Adjusted font size for tablets */
        width: 80%; /* Allow more width for readability */
    }
}

@media (max-width: 480px) {
    .logo img {
        width: 300px; /* Adjusted size for mobile devices */
        margin: 10px 0; /* Maintain spacing */
    }

    .hero-description {
        font-size: 1.2rem; /* Smaller font size for mobile */
        width: 90%; /* Maximize width usage for readability */
    }
    .portfolio-description {
        font-size: 1.2rem; /* Smaller font size for mobile */
        width: 90%; /* Maximize width usage for readability */
    }
}



/* Introduction Section */
.intro {
    background-color: #fff; /* White background */
    text-align: center;
    padding: 50px 20px;
    height: auto; /* Allow height to adjust to content */
    min-height: 50vh; /* Minimum height for a balanced look */
    display: flex; /* Flexbox for centering */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%; /* Full width */
    overflow: hidden; /* Prevent overflow issues */
}

.intro-text {
    font-size: 1.5rem;
    color: #0a254f;
    margin: 10px 0; /* Space between elements */
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.intro .intro-text2 {
    font-size: 3rem; /* Larger font for emphasis */
    color: #333;
    font-family: "scriptorama-tradeshow-jf", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 10px 0;
}


.intro p {
    margin: 10px 0;
    word-wrap: break-word; /* Ensure long words break properly */
    font-size: 1.5rem;
}

/* Learn More Button */
.learn-more-btn {
    background-color: #0a254f; /* Dark blue background */
    color: #fff; /* White text */
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem; /* Standard font size */
    padding: 10px 30px; /* Adjust padding for pill shape */
    border: none; /* Remove default border */
    border-radius: 999px; /* Fully rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effects */
    margin-top: 20px; /* Space above the button */
    text-transform: uppercase; /* Capitalized text */
    letter-spacing: 0.05em; /* Slightly spaced letters */
}

/* Hover Effects */
.learn-more-btn:hover {
    background-color: #08203a; /* Darker blue on hover */
    transform: scale(1.05); /* Slight zoom effect */
}

/* Portfolio Button */
.portfolio-btn {
    background-color: #fff; /* Dark blue background */
    color: #0a254f; /* White text */
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem; /* Standard font size */
    padding: 10px 30px; /* Adjust padding for pill shape */
    border: none; /* Remove default border */
    border-radius: 999px; /* Fully rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effects */
    margin-top: 20px; /* Space above the button */
    text-transform: uppercase; /* Capitalized text */
    letter-spacing: 0.05em; /* Slightly spaced letters */
}

/* Hover Effects */
.portfolio-btn:hover {
    background-color: #fff; /* Dark blue background */
    transform: scale(1.05); /* Slight zoom effect */
}

/* Focus Outline for Accessibility */
.learn-more-btn:focus {
    outline: 2px solid #fff; /* White outline for focus state */
    outline-offset: 2px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .learn-more-btn {
        font-size: 1rem; /* Adjust font size for smaller screens */
        padding: 8px 24px; /* Adjust padding for smaller screens */
    }

    .portfolio-btn {
        font-size: 1rem; /* Adjust font size for smaller screens */
        padding: 8px 24px; /* Adjust padding for smaller screens */
    }
}

@media (max-width: 480px) {
    .learn-more-btn {
        font-size: 0.9rem; /* Smaller font size for mobile */
        padding: 6px 20px; /* Compact padding for mobile */
    }

    .portfolio-btn {
        font-size: 0.9rem; /* Smaller font size for mobile */
        padding: 6px 20px; /* Compact padding for mobile */
    }
}


/* Portfolio Section */
.portfolio {
    background-color: #0a254f; /* Dark blue background */
    color: white; /* White text for contrast */
    padding: 40px;
    text-align: center;
    width: 100%; /* Full width */
}

.portfolio-intro {
    font-size: 3rem; /* Larger font for emphasis */
    font-family: "scriptorama-tradeshow-jf", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 10px 0;
}

.portfolio-description {
    margin-top: 15px; /* Spacing above the description */
    font-size: 1.8rem; /* Font size for description */
    color: #fff;
    width: 60%; /* Match width with the intro description */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    word-wrap: break-word; /* Prevent overflow */
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid; /* Enable grid layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 20px; /* Space between grid items */
    margin-top: 40px; /* Space above the grid */
}

/* Portfolio Items */
.portfolio-item {
    background-color: white; /* White background for images */
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Clip overflow */
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.portfolio-item img {
    max-width: 100%; /* Responsive image */
    max-height: 100%; /* Prevent overflow */

}

/* Responsive Design */
@media (max-width: 768px) {
    .portfolio-description {
        font-size: 1.5rem; /* Adjusted font size for tablets */
        width: 80%; /* Allow more width */
        
    }

   
    
}

@media (max-width: 480px) {
    .portfolio-description {
        font-size: 1.2rem; /* Smaller font size for mobile */
        width: 90%; /* Maximize width usage */
    }


}



.project {
    background-color: #D4FFF6;
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Internal spacing */
    margin: 20px 0; /* Vertical spacing */
    color: #333;
}


.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header Styling */
header {
    background-color: transparent; /* Transparent background */
    padding: 10px 20px; /* Add spacing around the header */

    z-index: 1000; /* Ensure it stays above other content */
}

/* Container Styling */
.container {
    display: flex; /* Use Flexbox for layout */
    justify-content: flex-end; /* Align content to the right */
    align-items: center; /* Vertically center items */
    width: 100%; /* Full width of the header */
    
}

/* Navigation Menu */
.nav-menu {
    display: flex; /* Flex layout for menu items */
    gap: 30px; /* Add space between links */
    list-style: none; /* Remove default list styles */
    margin-top: 10px;
}

/* Menu Links */
.nav-menu a {
    text-decoration: none; /* Remove underline */
    color: #333; /* Dark text color */
    font-family: futura-pt, sans-serif;/* Default sans-serif font */
    font-size: 1rem; /* Standard font size */
    font-weight: 400;
    transition: color 0.3s ease; /* Smooth hover effect */
}

.nav-menu a:hover {
    color: #0a254f; /* Darker blue on hover */
}

body {
    background-color: #D4FFF6
}

/* Logo Styling */
.logo-sm {
    width: 200px; /* 20% larger than previous size */
    max-width: 100%; /* Ensure responsiveness for small screens */
    height: auto; /* Maintain aspect ratio */
    margin: 0px 0; /* Space around the logo */
}

/* Responsive Adjustments for Small Screens */
@media (max-width: 768px) {
    
    .logo-sm {
        width: 150px; /* Adjusted size for tablets */
        margin: 10px 0; /* Maintain proper spacing */
    }

}

@media (max-width: 480px) {
    .logo-sm {
        width: 150px; /* Adjusted size for mobile devices */
        margin: 10px 0; /* Maintain spacing */
    }
}

.two-column-section {
    margin: 30px;
    
}

.two-column-section .btn {
    display: inline-block; /* Ensure the button only takes up as much space as its content */
    width: 200px; /* Let the content define the width */
    text-align: center; /* Ensure text is centered */
    background-color: #0a254f; /* Dark blue background */
    color: #fff; /* White text */
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem; /* Standard font size */
    padding: 10px 10px; /* Adjust padding for pill shape */
    border: none; /* Remove default border */
    border-radius: 999px; /* Fully rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effects */
    margin-top: 20px; /* Space above the button */
    text-transform: uppercase; /* Capitalized text */
    letter-spacing: 0.05em; /* Slightly spaced letters */
}

.two-column-section .img-fluid {
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Subtle drop shadow */
border-radius: 8px; /* Optional: Rounded corners */
transition: box-shadow 0.3s ease; /* Smooth transition for hover effect */
}

.img-head {
    height: 450px;
}

.split-list ul {
    column-count: 2; /* Split list into two columns */
    column-gap: 20px; /* Add space between the columns */
    list-style-position: inside; /* Align bullet points inside the columns */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    list-style: none; /* Remove default bullets */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    margin-bottom: 20px;
}

.split-list ul li {
    font-size: 1rem; /* Adjust font size if needed */
    line-height: 1.5; /* Add spacing between lines */
    margin-bottom: 10px; /* Optional: Add spacing between items */
    position: relative; /* Allow positioning the bullet */
    padding-left: 20px; /* Space for the bullet */
   
    line-height: 1.5; /* Adjust line spacing */
}
.split-list ul li::before {
    content: "•"; /* Add a bullet manually */
    position: absolute;
    left: 0; /* Position the bullet at the start */
    top: 0;
    font-size: 1rem; /* Adjust bullet size */
    color: #333; /* Bullet color */
}

/* About Heading Styling */
.about-heading {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 20px;
}

.font-one {
    font-family: "futura-pt", sans-serif; /* First font */
    color: #0a254f; /* Optional: Blue color for contrast */
}

.font-two {
    font-family: "scriptorama-tradeshow-jf", cursive; /* Second font */
    color: #0a254f; /* Optional: Darker gray color */
}

.contact-info {
    text-align: center; /* Center-align text within the container */
    margin: 0 auto; /* Center the block horizontally */
    font-size: 1rem; /* Icon size */
}

.contact-info p {
    margin-bottom: 10px; /* Add spacing between lines */
}

.contact-info i {
    margin-right: 8px; /* Space between the icon and the text */
    color: #0a254f; /* Optional: Icon color */
    font-size: 1rem; /* Icon size */
    vertical-align: middle; /* Align icon with text */
}

/* Hero Description */
.portintro-description {
    margin-top: 15px; /* Reduced margin above the description */
    font-size: 1.5rem; /* Font size for hero description */
    color: #333;
    width: 60%; /* Constrain width for better readability */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    word-wrap: break-word; /* Prevent overflow of long text */
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #D4FFF6; /* Light blue background */
}

.portintro {
    
    background-color: #D4FFF6; /* Light blue background */
    margin: 40px;
}

/* Contact Info Styling */
.contact-info {
    text-align: center; /* Center-align the text */
    margin: 0 auto; /* Center the block within the container */
}

.contact-info p {
    margin-bottom: 10px; /* Add spacing between items */
}

/* Styling Links */
.contact-info a {
    text-decoration: none; /* Remove the underline */
    color: #333; /* Blue color for the links */
    font-weight: normal; /* Make the links bold */
    font-size: 1rem; /* Adjust font size */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

.contact-info a:hover {
    color: #333; /* Darker blue on hover */
    text-decoration: underline; /* Add underline on hover for clarity */
}

/* Icon Styling */
.contact-info i {
    color: #333; /* Match icon color with link color */
    margin-right: 8px; /* Add spacing between icon and text */
    font-size: 1rem; /* Adjust icon size */
    vertical-align: middle; /* Align icon with text */
}