@font-face {
    font-family: Merriweather-light;
    src: url(font/Merriweather/Merriweather-Light.ttf);
  }


  @font-face {
    font-family: Merriweather-regular;
    src: url(font/Merriweather/Merriweather-Regular.ttf);
  }

  @font-face {
    font-family: Merriweather-light-italic;
    src: url(font/Merriweather/Merriweather-LightItalic.ttf);
  }

  @font-face {
    font-family: Nunito;
    src: url(font/Nunito_Sans/static/NunitoSans_10pt-Medium.ttf);
  }


  @font-face {
    font-family: Merriweather;
    src: url(font/Merriweather/Merriweather-Regular.ttf);
  }



/* ================================================= */
/* 1. Global Reset & Basic Styling */
/* ================================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth; 
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #242424;
}

a {
    text-decoration: none;
    color: #007bff;
}

.long-text-block {
    text-align: left;
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    border-top: 1px solid #ddd;
}
.long-text-block h3 {
    margin-bottom: 15px;
    color: #007bff;
}
.long-text-block p {
    margin-bottom: 15px;
    line-height: 1.8;
}

/* --- Buttons/CTA --- */
.btn {
    display: inline-block;
    background: #ffffff;
    color:#000000;
    padding: 10px 20px;
    border-radius: 5px;
    border: #000000 1px solid;
    margin-top: 10px;
    transition: background-color 0.3s ease;
    font-family: Nunito;
    font-size: 1.1em;
}



.current-page{
    color:#595959;
    padding: 10px 20px;
    font-family: Nunito;
    font-size: 1.2em;
}

.btn:hover {
    background:rgba(255, 255, 255, 0.7);
}

button{
    font-family: Nunito;
    padding: 10px 20px;
}


/* ================================================= */
/* 2. Navigation & Progress Bar */
/* ================================================= */

/* --- Scroll Progress Bar (Status Bar) --- */
.progress-container {
    width: 100%;
    height: 1.5px; /* Reduced height for a subtle line */
    background: #cccccc;
    position: absolute; /* Changed from fixed to absolute */
    bottom: 0; /* Positions it at the bottom edge of the nav */
    left: 0;
    border:none;
    z-index: 10;
}

.progress-bar {
    height: 1.5px; /* Must match the container height */
    background:#ab4fff; 
    width: 0%; 
}

/* --- Main Header (Sticky) --- */
.header {
    background: #FFFFFF;
    color: #242424;
    padding: 10px 20px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky; 
    top: 0px; 
    z-index: 900000; /* CHANGED from 101 to 102 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
    padding: 8px 10px;
    font-family: Merriweather; 
}

.logo a{
    color:rgba(0, 0, 0, 0.8);
}

.menu-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.login-btn {
    background: #642a9b;
    background: linear-gradient(335deg,rgba(100, 42, 155, 1) 0%, rgba(216, 83, 237, 1) 100%);
    margin-top: 0; 
    color:#ffffff;
    border:none;
    transition: background-color 0.3s;
}

.logo .long-copy, .show-desktop {
    display: inline;
}

/* Default: Hide the short text */
.login-btn .short-copy, .logo .short-copy, .show-mobile {
    display: none;
}

/* Media Query: When the screen is narrow, swap the text */
@media (max-width: 600px) {
    
  
    
  .logo .long-copy, .show-desktop {
        display: none; /* Hide the long text */
    }
    
   .logo .short-copy, .show-mobile  {
        display: inline; /* Show the short text */
    }


    .logo{
        font-size: 2em !important;
        overflow: hidden;
        width:75px;
    }



  

    .short-copy img{
        width:100%;
    }
}






.login-btn:hover {
    background: #943BBD;
    background: linear-gradient(85deg,rgba(148, 59, 189, 1) 0%, rgba(148, 59, 189, 1) 41%);
    
    margin-top: 0; 
    color:#ffffff;
    border:none;
    transition: background-color 0.3s;
}

/* --- Desktop Dropdown Menu Styles --- */
.desktop-dropdown-menu {
    position: relative;
    display: none; /* Hidden by default (mobile-first) */
}

.dropdown-toggle {
    background:white;
    padding: 12px 22px;
    border: #242424 1px solid;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 0;
    transition: background-color 0.3s;
}

.dropdown-toggle:hover {
    background:#F0F0F0;
}

.dropdown-content {
    display: none; 
    position: absolute;
    right: 0;
    top: 100%;
    background-color: #fff;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 400; 
    border-radius: 5px;
    overflow: hidden;
    margin-top: 5px; 
}

.dropdown-content a {
    color: #333;
    padding: 12px 16px;
    display: block;
    text-align: left;
    font-weight: normal;
}

.dropdown-content a:hover {
    background-color: #F7F7F7;
    color: #5B2574;
}

.dropdown-content a:focus {
    background-color: #F7F7F7;
}


.desktop-dropdown-menu.active .dropdown-content {
    display: block;
}

/* --- Hamburger Menu Toggle Button (Mobile/Small Screens) --- */
.menu-toggle {
    background: none;
    border:none;
    color: #242424;
    font-size: 3.5em;
    padding: 0px 6px 6px 6px;
    cursor: pointer;
    border-radius: 5px;
    min-width: 44px; 
    min-height: 44px;
    transition: background-color 0.3s;
    display: block; 
}


/* --- Secondary Navigation (Sticky on Scroll) --- */
.secondary-nav {
    background:rgba(255, 255, 255, 0.9);
    justify-content: center;
    align-items: center;
    margin:0 auto;
    text-align: center;
    padding: 16px 20px 10px 20px;
    position: fixed;
    width: 100%;
    z-index: 3000; /* CHANGED from 99 to 100 */
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-out; 
    transform: translateY(-100%);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .secondary-nav {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
}

.secondary-nav.show {
/* Slides into view */
transform: translateY(0); 
top: 100px; /* Let's try 66px as the previous 68px might have been too generous */
}

.secondary-nav a {
    color:#242424;
    padding: 0 15px;
    font-weight: medium;
}


/* --- NEW: Secondary Navigation Active State --- */
.secondary-nav a.active {
    border-bottom: 2px dashed;
    color:#5B2574;
}

/* --- Full-Screen Popup Menu (Mobile Only) --- */
.popup-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 90000000000; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.popup-menu.show {
    opacity: 1;
    visibility: visible;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 3em;
    cursor: pointer;
}

.popup-nav-links {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.popup-nav-links a {
    color: #fff;
    font-size: 2em;
    padding: 15px 0;
    transition: color 0.3s;
}

.popup-nav-links a:hover {
    color: #ab4fff;
}




/* ================================================= */
/* 3. Section and Footer Styling */
/* ================================================= */


.section {
    padding: 40px 20px; 
    font-family: Nunito;

    margin:0 auto;
}

.about {
    background: #FFFFFF;
    text-align: center;

}

.bridge{
    overflow: hidden;
    margin:0 auto;
    height:350px;
    overflow: hidden;
}

.bridge img{
    width:300px;
   
    position: relative;
    
}

.contact{
    color:#ffffff;
    background-color:#231d38;
    padding: 150px 0px 500px 0px;
    margin-top:-110px;
    margin-bottom:-10px;
}

.row img{
    width:200px;
    position: relative;
    top:200px;
    z-index: 2000;
}

.portfolio .row {

    position: relative;
    bottom:100px;
}

.process .row {
    position: relative;
    top:50px;
}

.section .link-text{
    color:#E9C7FF;
    border-bottom: #E9C7FF 1px dashed;
}

.infoBox{
    margin:30px 0px 50px 0px;
}

.infoBox div{
    float:left;
    border-bottom:2px solid #cccccc;
    margin-bottom:50px;
    margin-right:120px;
}

.infoBox div p{
    margin-bottom: .3em !important;
}

.list-paragraph p{
    margin-bottom:0.5em !important;
}


.section .regularList li{
    font-size: 1.5em;
    padding-left:20px;
    padding-bottom:16px;
}

.regularList{
    margin-bottom:80px;
    margin-left: 30px;
}

.skills .regularList {
    margin-left:24px;
}

.email-block{

    width:100%;
}

.email-block{
    margin-right:2px;
    float:left;
}

#email-row {
margin-top:-16px;
}

#email-row p{
   display: block;
}

.email-block p{
    display: inline-block;

}




#copyButton{
    border: white 1px solid;
    color:#ffffff;
    background:none;
    border-radius:4px;
    font-size: 1.1em !important;
    margin-top:-60px;
}

#copyButton:focus{
    border:white 3px solid !important;
}

#copyButton:hover{
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.08);
}


.sec-container{
    width:90%;
    max-width: 900px;
    margin:0 auto;
    padding-bottom:50px;
}

.skills, .process{
    background: #e3e9ff;
    background: linear-gradient(198deg, rgba(227, 233, 255, 1) 0%, rgba(243, 209, 255, 1) 100%);
}

.process{
    margin-bottom:-30px !important;
}

.portfolio {
    background: #fae1e1;
background: linear-gradient(178deg, rgba(250, 225, 225, 1) 0%, rgba(239, 219, 255, 1) 99%);
margin-bottom:-120px;
}





.wins{
    background: #dee6ff;
background: linear-gradient(198deg, rgba(222, 230, 255, 1) 0%, rgba(219, 243, 255, 1) 100%);
}


.curved-edge1 {
    --c: 30px; /* control the curvature (works with percentage) */
    height: 200px;
    aspect-ratio: 3/2;
    /* you can also update the 60%  */
    mask: radial-gradient(60% var(--c) at top,#0000 calc(100% - 1px),#000);
  }

  .curved-edge2 {
    --c: 30px; /* control the curvature (works with percentage) */
    height: 50px;
    aspect-ratio: 3/2;
    /* you can also update the 60%  */
    mask: radial-gradient(60% var(--c) at top,#0000 calc(100% - 1px),#000);
  }

  .curved-edge3 {
    --c: 30px; /* control the curvature (works with percentage) */
    height: 50px;
    aspect-ratio: 3/2;
    /* you can also update the 60%  */
    mask: radial-gradient(60% var(--c) at top,#0000 calc(100% - 1px),#000);
  }

.win-point {
    background-color: white;
    border-radius: 20px;
    border:#007bff;
    padding:18px 24px;
    margin-right:20px;
    margin-bottom:20px;
    display:inline-block;
    width:100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Lighter base shadow */
}

.process-entire{
    margin-bottom:24px;
}

  .process-point{
    background-color: white;
    border-radius: 0px 0px 20px 20px;
    border:#007bff;
    padding:32px 24px 18px 24px;
    margin-right:20px;
    margin-bottom:20px;
    display:inline-block;
    width:100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Lighter base shadow */
}


.ol-header{
    background-color:#164898;
    color:#ffffff;
    border-radius: 20px 20px 0px 0px;
    padding:18px 16px 0px 16px;
}

.ol-header h3{
    display:inline-block;
    font-size: 1.8em !important;
    line-height: 1.2em !important;
    font-weight: 100;
}

.win-point h3 {
    font-size: 1.8em !important;
    line-height: 1.2em !important;
    font-weight: 100;
    color:#1954B3;
  margin-bottom:.5em !important;
}

.process-point p{
    width:100%;
    font-size: 1.3em !important;
    padding-right:24px;
    padding-bottom:12px !important;
}

.process-point ul{
    margin-left:50px;
}

.process-point ul li{
    width:100%;
    font-size: 1.3em !important;
    margin-bottom:20px;
}


.win-point p, .process-point p{
    font-size: 1.3em !important;
    margin-bottom:10px !important;
    width:100%;
    max-width:100% !important;
}



.skills p {
    width:100%;
    max-width:100% !important;
}


.clear{
    clear:both;
}


.section h1{
    font-size: 3.0em;
    line-height: 1.3em;
    font-family: Merriweather;
    margin-bottom: 50px;
}

.about h1{
color: #757575;
margin-bottom:10px;
}

.about p{
    color:#474747;
    width:100%;
    margin:0 auto;
}


.section h2{
    font-size: 2.5em;
    line-height: 1.2em;
    margin-bottom: 20px;
}

.section h3{
    font-size: 1.8em;
    line-height: 1.6em;
    margin-bottom: 20px;
}

.chip{
    list-style-type:none;
    font-size: 1.5em;
}

.chip li{
    float:left;
    margin-bottom:20px;
    font-size: .9em;
}

.last{
    border-right:1px dashed rgba(0, 0, 0, 0.5);
}

.highlight{
    color:#2D72E1;
}

.section p{
    font-size: 1.5em;
    line-height: 1.4em;
    margin-bottom:1em;
}

.section p {
    max-width: 800px;
}

.footer {
    background: #999999;
    color: #fff;
    text-align: center;
    padding: 15px 0;
    font-size: 0.8em;
}


@media (min-width: 700px) {
  .about .header-container{
    width:600px !important;
    margin:0 auto;
  }
}





/* ================================================= */
/* 4. Carousel Styling */
/* ================================================= */

/* --- Carousel Container --- */

.solution{
    overflow-x: hidden;
}

.solution{
    background-color: rgba(0, 0, 0, 0.9);
    color:#ffffff;
}

.caption{
    font-size: 1.2em;
}

.carousel-container {
    max-width: 1200px;
    margin: 40px auto;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden; /* Contains the images */
}

/* --- Scroll Track (The Core of the Carousel) --- */
.carousel-track {
    /* KEY FOR MOBILE SWIPING: Use Flexbox to align slides horizontally */
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory; /* Snap precisely to each slide */
    scroll-behavior: smooth; /* Smooth scrolling for button clicks */
    -webkit-overflow-scrolling: touch; /* Improved inertia scrolling on iOS */
    
    /* Hide the scrollbar (optional, but common for carousels) */
    scrollbar-width: none; /* Firefox */
}
.carousel-track::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* --- Individual Slides --- */
.carousel-slide {
    /* KEY: Ensure each slide takes up exactly the container width */
    flex: 0 0 100%; 
    scroll-snap-align: start; /* Snap point */
    max-height: 800px;
    overflow: hidden;
}

.carousel-slide img {
    display: block;
    width: 100%;
    /* Maintain aspect ratio and fill the container height */
    height: auto; 
    object-fit: cover;
}

.carousel-slide-mobile {
    /* KEY: Ensure each slide takes up exactly the container width */
    flex: 0 0 100%; 
    scroll-snap-align: start; /* Snap point */
    max-height:800px;
    overflow: hidden;
}

.carousel-slide-mobile img {
    display: block;
    width: 150%;
    position: relative;
    right:25%;
    /* Maintain aspect ratio and fill the container height */
    height: auto; 
    object-fit: cover;
}




/* --- Navigation Buttons --- */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5rem;
    line-height: 1;
    border-radius: 50%;
    transition: opacity 0.3s;
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }

.nav-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.nav-btn:focus{
    border: 10px solid blue !important;
}


/* Hide buttons on smaller screens (rely on touch scrolling) */
@media (max-width: 500px) {
    .nav-btn {
        display: none;
    }
}

/* --- Indicator --- */
.carousel-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.9rem;
    border-radius: 4px;
    z-index: 10;
}

.dark-bg{
    background-color: rgba(0, 0, 0, 0.9);

}

.bridge2 img{
    width:100%;
    
}




 .trophy{
    overflow: hidden; 
    margin-bottom:24px; 
    overflow: hidden !important;
    border-radius: 50px;
    width: 300px;
    height: 400px;
}

.trophy img{
    position: relative; 
    bottom:150px;
    height:659px;
    width: 300px;
}

.regularList li{
    font-size: 1.5em;
    padding-left:20px;
}



@media (min-width: 1016px) {

    .copy-move{
        text-align: left;
        width:500px;
        float:left;
    }

    .trophy {
        float:left;
        margin-right:54px;
    }



    .bridge2{
        margin-right:24px;
        float:left;
      
        width:300px;
        overflow: hidden;
        
    }

    .about-plus .regularList li{
        position: relative;
        left:50px;
  
      }

   

}

@media (max-width: 1015px) {

    .copy-move{
        text-align: center;
        width:100%;

    }

    .trophy{
        margin:0 auto;
    }

    .mobile-top-space{
        margin-top:24px;
    }


    .bridge2{
        margin:0 auto;
        overflow: hidden;
        width:300px;
        height:370px;

    }

 

}





/* ================================================= */
/* 5. Media Query for Desktop (768px and wider) */
/* ================================================= */
@media (min-width: 768px) {
    
    .header {
        padding: 10px 50px; 
    }
    
    .section {
        padding: 60px 50px; 
    }
    
    /* 1. Show the desktop dropdown */
    .desktop-dropdown-menu {
        display: block; 
    }

    /* 2. Hide the mobile hamburger toggle */
    .menu-toggle {
        display: none; 
    }

    .secondary-nav.show {
        /* Slides into view */
        transform: translateY(0); 
        top: 66px; /* Let's try 66px as the previous 68px might have been too generous */
        }
}


.project-grid {
    display: grid;
    /* Forces 1 column at all times */
    grid-template-columns: 1fr; 
    gap: 50px; /* Increased gap for visual separation */
    margin: 30px auto;
    max-width: 800px; /* Limits the overall width of the project list */
    padding: 0 20px;
}

.project-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Lighter base shadow */
    /* Ensure the transition is defined on the default state */
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out; 
    text-align: left;
    padding:20px 20px 40px 20px;
}

/*
.project-card:hover {
   /* Slightly lift the card up */
/*   transform: translateY(-8px) scale(1.01); 
   /* Apply a deep shadow to emphasize the lift */
/*   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 70, 200, 0.2);
}
*/


.img-header{
    max-width: 750px;
    max-height: 400px;
    margin: 0 auto;
    border-radius: 6px;
    border: #000000 solid 1px;
    overflow: hidden;
}

.headerOverview{
    margin:60px 0px;
}




.question{
  
    /*border-top:#333333 1px solid;*/
    /*border-bottom: #333333 1px solid;*/
    padding: 8px 0px;
    font-size: 1.5em;
    width:100%;
    margin:0 auto;
  }

.project-card h3 {
    color: #333;
 
}

.project-card .chip{
    font-size: 1.2em !important;
    float:left;
    margin-bottom:54px !important;
    margin-top:-20px !important;
}

.project-card .chip li{
    margin-bottom:0px !important;
    margin-right:8px !important;
}

.project-card p {
    padding: 24px 0px 12px 0px;
    font-size: 1.5em !important;
    line-height: 1.5em !important;
    color: #333333;
    max-width: none;
}

.project-container{
    padding:0px 15px;
}

.project-card .small-btn {
    display: block;
    text-align: center;
    background: #000000;
    color:white;
    margin:0 auto;
    padding: 12px 22px;
    min-width: 190px;
    max-width: 200px;
    font-size: 1.5em;
}

.project-card a:focus{
    border:5px #f1dbff solid !important;
}


.project-card .small-btn:hover {

    background:rgba(0, 0, 0, 0.8);

}

/* Desktop Grid Layout */
@media (min-width: 768px) {
    .project-grid {
        /* Ensure it remains a single column on desktop */
        grid-template-columns: 1fr;
    }

 
}
@media (min-width: 1024px) {
    .project-grid {
        /* Ensure it remains a single column on large screens */
        grid-template-columns: 1fr;
    }

 
}


.mobile-pic-only{
    margin:0 auto;
    border-radius: 6px;
    text-align: center;
}

@media (min-width: 390px) {
    .mobile-pic-only{
        width:390px;
    }
}

@media (max-width: 389px) {
    .mobile-pic-only{
    width:100%;
    }
}


.desktop-pic-only{
    margin:0 auto;
    border-radius: 6px;
    text-align: center;
    width:90%;
    margin-top:20px;
}



.desktop-web-carousel{
    /* KEY: Ensure each slide takes up exactly the container width */
    flex: 0 0 100%; 
    scroll-snap-align: start; /* Snap point */
    max-height: 1200px;
    overflow: hidden;
}

.desktop-web-carousel img {
    display: block;
    width: 100%;
    /* Maintain aspect ratio and fill the container height */
    height: auto; 
    object-fit: cover;
}