/* ui.general.css */
@font-face {
    font-family             : 'railway';
    src                     : url(./fonts/railway.otf) format('opentype');
}

@font-face {
    font-family             : 'helveticathin';
    src                     : url(./fonts/helveticalight.otf) format('opentype');
}

@font-face {
    font-family             : 'ibm';
    src                     : url(./fonts/ibmplexregular.otf) format('opentype');
}

@font-face {
    font-family             : 'helveticaneue';
    src                     : url(./fonts/helveticaneue.otf) format('opentype');
}

/* Define Color Variables */
:root {
    --Blue100               : rgb(  0,  17,  65);
    --Blue80                : rgb(  7,  58, 160); 
    --Blue60                : rgb( 15,  98, 254);
    --Blue50                : rgb( 59, 130, 246);   /* #3B82F6 - Mid-tone blue */
    --Blue30                : rgb(166, 200, 255);
    --Blue20                : rgb(208, 226, 255);
    --Blue10                : rgb(237, 245, 255);
    --CoolGray70            : rgb(100, 116, 139);  /* #64748B - Slate blue */
    --Blue30                : rgb(147, 197, 253);  /* #93C5FD - Soft blue */
    --Blue10                : rgb(219, 234, 254);  /* #DBEAFE - Lightest blue */
    --White                 : rgb(255, 255, 255);  /* #FFFFFF - Pure white */
    --CoolGray10            : rgb(249, 250, 251);  /* #F9FAFB - Light gray */
    --Shadow10              : rgba(0, 0, 0, 0.1);  /* Light shadow */
    --Blue50Shadow20        : rgba(59, 130, 246, 0.2); /* Shadow using Blue50 with 20% opacity */
}

/* Reset and Base Styles */
* {
    margin                  : 0;
    padding                 : 0;
    box-sizing              : border-box;
    font-family             : 'helveticaneue';
}

body {
    background-color        : var(--White);
    color                   : var(--CoolGray70); /* Slate Blue for body text */
}

/* Header and Navigation */
header {
    position                : fixed;
    top                     : 0;
    width                   : 100%;
    background-color        : var(--White);
    padding                 : 20px 40px;
    display                 : flex;
    justify-content         : space-between;
    align-items             : center;
    z-index                 : 1000;
    box-shadow              : 0 2px 10px var(--Shadow10);
}

#logo {
    display                 : flex;
    flex-direction          : column;
    width                   : 60px;
    gap                     : 5px;
}

.logo-row {
    display                 : flex;
    justify-content         : center;
    gap                     : 5px;
}

#firstbox { background-color: var(--Blue100); } /* Row 1: Darkest blue */
#secondbox { background-color: var(--Blue80); } /* Row 2: Mid-tone blue (left) */
#thirdbox { background-color: var(--Blue60); } /* Row 2: Slate blue (right) */
#forthbox { background-color: var(--Blue50); } /* Row 3: Slate blue (left) */
#fifthbox { background-color: var(--Blue30); } /* Row 3: Soft blue (right) */
#sixthbox { background-color: var(--Blue20); } /* Row 4: Lightest blue */
#whitebox { background-color: white; } /* Row 4: Lightest blue */

#firstbox, #secondbox, 
#thirdbox, #forthbox, 
#fifthbox, #sixthbox, #whitebox {
    display                 : inline-block;
    width                   : 25px;
    height                  : 25px;
}

#navigation ul {
    list-style              : none;
    display                 : flex;
    gap                     : 20px;
}

#navigation li {
    color                   : var(--CoolGray70);
    font-family             : 'railway';
    font-weight             : 500;
    cursor                  : pointer;
    transition              : color 0.3s ease;
}

#navigation li:hover {
    color                   : var(--Blue50); /* Mid Blue on hover */
}

/* Hero Section */
#hero {
    height                  : 100vh;
    display                 : flex;
    flex-direction          : column;
    justify-content         : center;
    align-items             : center;
    text-align              : center;
    background              : linear-gradient(to bottom, var(--Blue10), var(--White)); /* Light Blue gradient */
    padding                 : 0 20px;
}

#myH1 {
    font-family             : ibm;
    font-size               : 3.5rem;
    font-weight             : 700;
    color                   : var(--Blue100); /* Deep Navy */
    line-height             : 1.2;
    margin-bottom           : 10px;
}

#hero .slogan {
    font-family: 'railway';
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--Blue50); /* Mid Blue */
    margin-bottom: 10px;
}

#hero p {
    font-size: 1.2rem;
    color: var(--CoolGray70);
    margin-bottom: 20px;
}

.cta-button {
    background-color: var(--Blue50); /* Mid Blue */
    color: var(--White);
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: 'helveticaneue';
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: var(--Blue30); /* Soft Blue on hover */
}

/* About Section */
#about {
    padding                 : 80px 40px;
    display                 : flex;
    justify-content         : left;
    gap                     : 40px;
    background-color        : var(--White);
}

#about .text {
    max-width               : 500px;
}

#about h2 {
    font-family: 'helveticathin';
    font-size: 2rem;
    color: var(--Blue100);
    margin-bottom: 20px;
}

#about p {
    font-size: 1rem;
    line-height: 1.6;
}

#about .image {
    width: 200px;
    height: 200px;
    border: 3px solid var(--Blue30);
    border-radius: 50%; /* Make the image circular */
    object-fit: cover; /* Ensure the image fits without distortion */
    transition: transform 0.3s ease;
}

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

/* Work Section */
#work {
    padding: 80px 40px;
    background-color: var(--CoolGray10);
    text-align: center;
}

#work h2 {
    font-family: 'helveticaneue';
    font-size: 2rem;
    color: var(--Blue100);
    margin-bottom: 40px;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.work-card {
    background-color: var(--White);
    padding: 20px;
    border: 2px solid var(--Blue10);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.work-card:hover {
    border-color: var(--Blue50);
    box-shadow: 0 4px 8px var(--Blue50Shadow20);
}

.work-card h3 {
    font-family: 'helveticaneue';
    font-size: 1.2rem;
    color: var(--Blue100);
    margin-bottom: 10px;
}

/* Contact Section */
#contact {
    padding: 80px 40px;
    text-align: center;
}

#contact h2 {
    font-family: 'helveticaneue';
    font-size: 2rem;
    color: var(--Blue100);
    margin-bottom: 40px;
}

#contact form {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#contact input, #contact textarea {
    padding: 10px;
    border: 2px solid var(--Blue10);
    border-radius: 8px;
    font-family: 'Inter';
    color: var(--CoolGray70);
}

#contact button {
    background-color: var(--Blue100);
    color: var(--White);
    padding: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#contact button:hover {
    background-color: var(--Blue50);
}

/* Footer */
footer {
    background-color: var(--Blue100);
    color: var(--White);
    padding: 20px;
    text-align: center;
}

footer a {
    color: var(--Blue30);
    margin: 0 10px;
    text-decoration: none;
}

/* Loading Message */
.content-loading {
    font-family: 'Inter';
    font-size: 1rem;
    color: var(--CoolGray70);
    text-align: center;
    padding: 20px;
}

.articles-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.article-card {
    width: 350px; /* Fixed width for articles */
    background-color: var(--White);
    padding: 20px;
    border: 2px solid var(--Blue10);
    border-radius: 8px;
    text-align: left; /* Left-align content */
    transition: all 0.3s ease;
}

.article-card:hover {
    border-color: var(--Blue50);
    box-shadow: 0 4px 8px var(--Blue50Shadow20);
}

.article-card h3 {
    font-family: 'helveticaneue';
    font-size: 1.2rem;
    color: var(--Blue100);
    margin-bottom: 10px;
}

.article-card .article-image {
    width: 300px;
}

.article-card .date {
    font-size: 0.9rem;
    color: var(--CoolGray70);
    margin-bottom: 10px;
}

.article-card .abstract {
    font-size: 1rem;
    line-height: 1.6;
}

/* Badges Grid */
.badges-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.badge-box {
    width                   : 200px; /* Fixed width for badges */
    background-color        : var(--White);
    padding                 : 20px;
    border                  : 2px solid var(--Blue10);
    border-radius           : 8px;
    text-align              : center; /* Center content */
    transition              : all 0.3s ease;
}

.badge-box:hover {
    border-color            : var(--Blue50);
    box-shadow              : 0 4px 8px var(--Blue50Shadow20);
}

.badge-box .badge-image {
    width                   : 150px;
}

.badge-box h3 {
    font-family             : 'helveticaneue';
    font-size               : 0.9rem;
    color                   : var(--Blue100);
    margin-bottom           : 10px;
}

.badge-box p {
    font-size               : 0.8rem;
    line-height             : 1.2;
}

/* Certificates Grid */
.certificates-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.certificate-box {
    width: 300px; /* Fixed width for certificates, matching badges */
    background-color: var(--White);
    padding: 20px;
    border: 2px solid var(--Blue10);
    border-radius: 8px;
    text-align: center; /* Center content */
    transition: all 0.3s ease;
}

.certificate-box:hover {
    border-color: var(--Blue50);
    box-shadow: 0 4px 8px var(--Blue50Shadow20);
}

.certificate-box .certificate-image {
    width: 100%;
    height: 150px; /* Fixed height for consistency */
    object-fit: contain; /* Ensure the entire image is visible without cropping */
    margin-bottom: 15px;
}

.certificate-box h3 {
    font-family: 'helveticaneue';
    font-size: 1.2rem;
    color: var(--Blue100);
    margin-bottom: 10px;
}

.certificate-box p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--CoolGray70);
}

.about-container {
    max-width: 800px; /* Constrain the content width for readability */
    margin: 0 auto; /* Center the container */
}

.about-image {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* Circular image for a modern look */
    object-fit: cover; /* Ensure the image fills the circle without distortion */
    margin-bottom: 30px;
    border: 2px solid var(--Blue10);
    transition: border-color 0.3s ease;
}

.about-image:hover {
    border-color: var(--Blue50);
}

.about-text {
    margin-bottom: 40px;
}

.about-text h3 {
    font-family: 'helveticaneue';
    font-size: 1.8rem;
    color: var(--Blue100);
    margin-bottom: 15px;
}

.about-text h4 {
    font-family: 'helveticaneue';
    font-size: 1.4rem;
    color: var(--Blue80);
    margin: 20px 0 10px;
}

.about-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--CoolGray70);
    margin-bottom: 15px;
}

.about-text ul {
    list-style              : none;
    padding                 : 0;
    margin-bottom           : 20px;
}

.about-text ul li {
    list-style              : none;
    font-size               : 1rem;
    line-height             : 1.6;
    color                   : var(--CoolGray70);
    margin-bottom           : 10px;
    position                : relative;
    padding-left            : 20px;
}

.about-text .cta {
    font-weight             : 600;
    color                   : var(--Blue100);
    margin-top              : 20px;
}

/* Skills Grid */
.about-skills {
    margin-bottom           : 40px;
}

.about-skills h3 {
    font-family: 'helveticaneue';
    font-size: 1.8rem;
    color: var(--Blue100);
    margin-bottom: 20px;
}

.skills-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.skill-tag {
    background-color: var(--Blue10);
    color: var(--Blue100);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.skill-tag:hover {
    background-color: var(--Blue50);
    color: var(--White);
}

/* Links Grid */
.about-links h3 {
    font-family: 'helveticaneue';
    font-size: 1.8rem;
    color: var(--Blue100);
    margin-bottom: 20px;
}

.links-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.link-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--Blue100);
    color: var(--White);
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.link-button:hover {
    background-color: var(--Blue80);
}

/* Hero CTAs */
.hero-subtitle {
    font-size: 1.1rem;
    margin: 15px 0 25px;
    color: #555;
    font-weight: 400;
}

.hero-ctas {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.cta-button {
    padding: 14px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.cta-button.primary {
    background: #0077cc;
    color: white;
}

.cta-button.primary:hover {
    background: #005fa8;
    transform: translateY(-2px);
}

.cta-button.secondary {
    background: transparent;
    color: #0077cc;
    border: 2px solid #0077cc;
}

.cta-button.secondary:hover {
    background: #0077cc;
    color: white;
}

    /* ====================== CONSULTANCY SECTION ====================== */
#content h1 {
    font-size: 2.4rem;
    color: #0d3b66;
    text-align: center;
    margin: 40px 0 20px;
    font-weight: 700;
}

#content h2 {
    font-size: 1.8rem;
    color: #0d3b66;
    margin: 50px 0 20px;
    border-bottom: 3px solid #0077cc;
    padding-bottom: 10px;
}

#content h3 {
    font-size: 1.35rem;
    color: #0077cc;
    margin-top: 0;
}

#content p {
    line-height: 1.75;
    font-size: 1.1rem;
    color: #333;
}

#content ul {
    line-height: 1.8;
    font-size: 1.08rem;
}

#content ul li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 25px;
}

#content ul li:before {
    content: "✅";
    position: absolute;
    left: 0;
    color: #0077cc;
}

/* Service Cards - Much better look */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.service-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 119, 204, 0.15);
    border-color: #0077cc;
}

/* CTA Buttons inside content */
.content-cta {
    display: inline-block;
    background: #0077cc;
    color: white;
    padding: 18px 42px;
    font-size: 1.25rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    margin: 20px 10px;
    transition: all 0.3s;
}

.content-cta:hover {
    background: #005fa8;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 119, 204, 0.3);
}

.content-cta.secondary {
    background: transparent;
    color: #0077cc;
    border: 2px solid #0077cc;
}
    /* ====================== CONSULTANCY SECTION ====================== */
#content h1 {
    font-size: 2.4rem;
    color: #0d3b66;
    text-align: center;
    margin: 40px 0 20px;
    font-weight: 700;
}

#content h2 {
    font-size: 1.8rem;
    color: #0d3b66;
    margin: 50px 0 20px;
    border-bottom: 3px solid #0077cc;
    padding-bottom: 10px;
}

#content h3 {
    font-size: 1.35rem;
    color: #0077cc;
    margin-top: 0;
}

#content p {
    line-height: 1.75;
    font-size: 1.1rem;
    color: #333;
}

#content ul {
    line-height: 1.8;
    font-size: 1.08rem;
}

#content ul li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 25px;
}

#content ul li:before {
    content: "✅";
    position: absolute;
    left: 0;
    color: #0077cc;
}

/* Service Cards - Much better look */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.service-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 119, 204, 0.15);
    border-color: #0077cc;
}

/* CTA Buttons inside content */
.content-cta {
    display: inline-block;
    background: #0077cc;
    color: white;
    padding: 18px 42px;
    font-size: 1.25rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    margin: 20px 10px;
    transition: all 0.3s;
}

.content-cta:hover {
    background: #005fa8;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 119, 204, 0.3);
}

.content-cta.secondary {
    background: transparent;
    color: #0077cc;
    border: 2px solid #0077cc;
}

/* Ugly UL Fix */
#content ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 35px auto !important;
    max-width: 820px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

#content ul li {
    background      : var(--Blue10) !important;
    padding: 18px 24px !important;
    border-radius: 10px !important;
    border-left: 5px solid #0077cc !important;
    font-size: 1.1rem !important;
    line-height: 1.75 !important;
    color: #333 !important;
    position: relative !important;
}

#content ul li:before {
    content: "✓" !important;
    color: #0077cc !important;
    font-weight: bold !important;
    margin-right: 12px !important;
    font-size: 1.3rem !important;
}

/* CTA Buttons inside content */
.content-cta {
    display: inline-block !important;
    background: #0077cc !important;
    color: white !important;
    padding: 18px 45px !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 119, 204, 0.25) !important;
    transition: all 0.3s ease !important;
    margin: 15px 8px !important;
}

.content-cta:hover {
    background: #005fa8 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0, 119, 204, 0.35) !important;
}