/**********************************/
/********** General CSS ***********/
/**********************************/
:root {
    /* Two-font system: a serif for headlines, a sans for everything that
       needs to read easily in a dense CV (body copy, nav, buttons). */
    --font-body: 'Open Sans', sans-serif;
    --font-display: 'PT Serif', Georgia, 'Times New Roman', serif;
}

body {
    color: #666666;
    background: linear-gradient(to right, #0c1b32, #4a5e79);
    font-family: var(--font-body);
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%;
    max-width: 100%;
}

/* Every headline-level heading uses the display serif; everything else
   (labels, body copy, nav, buttons) stays on the sans body font. */
.header h1,
.content-header h2,
.education .edu-col h3,
.experience .exp-col h3,
.service .srv-col h3,
.certificates .cert-col h3 {
    font-family: var(--font-display);
}

a {
    color: #222222;
    transition: all .3s;
}

a:hover,
a:active,
a:focus {
    color: #8998af;
    outline: none;
    text-decoration: none;
}

.btn:focus {
    box-shadow: none;
}



/**********************************/
/****** Layout with Sidebar *******/
/**********************************/
.wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1140px;
    overflow: hidden; /* Prevent content from causing horizontal scroll */
    box-sizing: border-box; /* Include padding in width calculation */
}

.wrapper .sidebar {
    position: relative;
    width: 100%;
    float: left;
    background: #222222;
    box-sizing: border-box; /* Include padding in width calculation */
}

.wrapper .content {
    position: relative;
    width: 100%;
    padding: 15px;
    float: left;
    /*background: #9dcf4a;*/
    box-sizing: border-box; /* Include padding in width calculation */
    overflow-x: hidden; /* Prevent horizontal scrolling in content area */
}

.wrapper .sidebar-header,
.wrapper .sidebar-footer {
    display: none;
}

.navbar {
    padding: 15px;
    background: #222222 !important;
}

.navbar-expand-md .navbar-nav .nav-item {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

.navbar-expand-md .navbar-nav .nav-item:first-child{
    border-top: none;
}

.navbar-expand-md .navbar-nav .nav-link {
    position: relative;
    color: #ffffff;
    padding: 5px 15px 7px 15px;
    transition: all .3s;
}

.navbar-expand-md .navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 2px;
    height: 2px;
    background: #8998af;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}

.navbar-expand-md .navbar-nav .nav-link:hover::before,
.navbar-expand-md .navbar-nav .nav-link.active::before {
    transform: scaleX(1);
}

.navbar-expand-md .navbar-nav .nav-link i {
    color: #8998af;
    float: right;
    padding-top: 5px;
    transition: all .3s;
}

.navbar-expand-md .navbar-nav .nav-link:hover,
.navbar-expand-md .navbar-nav .nav-link.active {
    color: #8998af;
}

.navbar-expand-md .navbar-nav .nav-link:hover i,
.navbar-expand-md .navbar-nav .nav-link.active i{
    color: #ffffff;
}


.wrapper .sidebar,
.wrapper .content {
    -webkit-transition: margin 200ms ease-out;
    -moz-transition: margin 200ms ease-out;
    -o-transition: margin 200ms ease-out;
    transition: margin 200ms ease-out;
}


@media (min-width: 768px) {
    .wrapper .content {
        padding: 30px 0px 30px 30px;
    }
    
    .wrapper .content::before,
    .wrapper .content::after {
        position: fixed;
        content: "";
        width: 100%;
        height: 30px;
       /* background: #9dcf4a; */
        z-index: 1;
    }
    
    .wrapper .content::before {
        top: 0;
    }
    
    .wrapper .content::after {
        bottom: 0;
    }
    
    .wrapper .sidebar {
        position: fixed;
        width: 300px;
        height: 100%;
        margin-left: -250px;
        float: left;
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: gray;
        z-index: 2;
    }

    .wrapper .sidebar:hover {
        margin-left: 0px;
    }
    
    .wrapper .content {
        position: relative;
        width: calc(100% - 50px);
        margin-left: 50px;
        float: right;
    }
    
    .wrapper .sidebar:hover  .sidebar-header {
        position: relative;
        display: block;
        width: 100%;
    }

    .wrapper .sidebar .sidebar-header img {
        width: 100%;
        height: auto;
    }
    
    .navbar-brand {
        display: none;
    }
    
    .navbar {
        padding: 15px 0;
        flex-direction: column;
    }
    
    .wrapper .sidebar:hover .navbar-expand-md .navbar-nav .nav-link {
        padding: 5px 30px 7px 30px;
    }
    
    .wrapper .sidebar::-webkit-scrollbar {
        width: 7px;
    }

    .wrapper .sidebar::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    }

    .wrapper .sidebar::-webkit-scrollbar-thumb {
        background-color: darkgrey;
        outline: 1px solid slategrey;
        border-radius: 7px
    }
    
    .navbar-brand {
        display: none;
    }
    
    .sidebar .sidebar-footer {
        width: 300px;
        position: fixed;
        bottom: 0;
        padding: 15px;
        font-size: 0;
        text-align: center;
        background: #222222;
    }
    
    .sidebar .sidebar-footer a {
        display: inline-block;
        width: 40px;
        height: 40px;
        padding: 5px 0;
        margin: 0 15px 15px 0;
        text-align: center;
        font-size: 18px;
        color: #222222;
        background: #8998af;
    }
    
    .sidebar .sidebar-footer a:last-child {
        margin-right: 0;
    }
    
    .sidebar .sidebar-footer a:hover {
        color: #8998af;
        background: #ffffff;
    }
    
    .sidebar:hover .sidebar-footer {
        display: block;
    }
}

@media (min-width: 992px) {
    .wrapper .sidebar {
        margin: 0;
    }

    .wrapper .content {
        width: calc(100% - 300px);
        margin-left: 300px;
    }

    .sidebar .sidebar-header {
        position: relative;
        display: block;
        width: 100%;
    }
    
    .navbar-expand-md .navbar-nav .nav-link {
        padding: 5px 30px 7px 30px;
    }
    
    .sidebar .sidebar-footer {
        display: block;
    }
}





/**********************************/
/******** Back to Top CSS *********/
/**********************************/
.back-to-top {
    position: fixed;
    display: none;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 1;
    font-size: 30px;
    right: 30px;
    bottom: 30px;
    transition: background 0.5s;
    z-index: 11;
}

.back-to-top i {
    color: #222222;
}

.back-to-top i:hover {
    color: #8998af;
}

.back-to-top {
    -webkit-animation: action 1s infinite  alternate;
    animation: action 1s infinite  alternate;
}

@-webkit-keyframes action {
    0% { transform: translateY(0); }
    100% { transform: translateY(-15px); }
}

@keyframes action {
    0% { transform: translateY(0); }
    100% { transform: translateY(-15px); }
}


/**********************************/
/*********** Header CSS ***********/
/**********************************/
.header {
    position: relative;
    background: #ffffff;
}

.header .content-inner {
    padding: 100px 30px;
    background: url(../img/profile.png) right bottom no-repeat;
    background-size: contain;
}

/* Make header responsive */
@media (max-width: 767px) {
    /* Prevent sidebar from causing overflow */
    .wrapper .sidebar {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Stack the portrait above the text instead of behind it. The background
       is pinned to a fixed height band at the top and the padding clears it,
       so the two can never overlap regardless of viewport width. */
    .header .content-inner {
        position: relative;
        padding: 445px 15px 30px 15px;
        text-align: center;
        background-position: top center;
        background-size: auto 420px;
    }

}

@media (max-width: 576px) {
    /* The portrait spans the full width of the card. profile.png is
       1245x1337, so its rendered height is 107.4% of the width - the top
       padding tracks that ratio, which keeps the text clear of the photo
       at every phone width. */
    .header .content-inner {
        padding: calc(107.4% + 25px) 15px 25px 15px;
        background-size: 100% auto;
    }
}

@media (max-width: 375px) {
    .header .content-inner {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.header p {
    color: #8998af;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}

.header h1 {
    color: #222222;
    font-size: 50px;
    font-weight: 700;
}

.header h2 {
    display: inline-block;
    margin: 0;
    min-height: 25px;
    font-size: 25px;
}

/* The portrait occupies the right of the header on desktop, so cap the
   headline width - it must never run underneath the photo. */
@media (min-width: 768px) {
    .header h1,
    .header h2 {
        max-width: 58%;
    }
}

.header .typed-text {
    display: none;
}

.header .typed-cursor {
    font-size: 25px;
    font-weight: 300;
    color: #222222;
}

.large-btn .content-inner {
    font-size: 0;
    border-bottom: 30px solid transparent;
}

.large-btn .btn {
    position: relative;
    width: 50%;
    padding: 15px 0;
    color: #8998af;
    font-size: 20px;
    background: #222222;
    border-radius: 0;
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Make buttons responsive on small screens */
@media (max-width: 576px) {
    .large-btn .btn {
        font-size: 16px;
        padding: 12px 0;
    }
}

.large-btn .btn:last-child {
    color: #222222;
    background: #8998af;
}

.large-btn .btn i {
    margin-right: 8px;
}

.large-btn .btn::after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    transition: all .3s;
}

.large-btn .btn:hover::after {
    width: 100%;
    background: rgba(255, 255, 255, .1);
}


/**********************************/
/******* Content Header CSS *******/
/**********************************/
.content-header {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    padding-bottom: 10px;
    box-sizing: border-box; /* Include padding in width calculation */
}

.content-header h2 {
    color: #222222;
    font-size: 35px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    position: relative; /* Ensure the pseudo-element is positioned relative to the header */
}

.content-header h2::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%; /* Matches the width of the header text */
    height: 3px;
    bottom: -10px; /* Adjusts the spacing between the header and the line */
    left: 0;
    background: #8998af; /* Blue color for the line */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .8s ease;
}

.content-header.is-visible h2::after {
    transform: scaleX(1);
}


/**********************************/
/*********** About CSS ************/
/**********************************/
.about {
    position: relative;
    padding: 60px 30px;
    background: #ffffff;
    border-bottom: 30px solid transparent; /* Transparent border */
    border-image: linear-gradient(to right, #0c1b32, #4a5e79) 1; /* Linear gradient border */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Make about section responsive */
@media (max-width: 767px) {
    .about {
        padding: 40px 15px;
    }
}


.about img {
    width: 100%;
    height: auto;
}

@media(max-width: 767.98px) {
    .about img {
        margin-bottom: 15px;
    }
}

.about .btn {
    border-radius: 0;
    color: #222222;
    background: #8998af;
    transition: all .3s;
}

.about .btn:hover {
    color: #8998af;
    background: #222222;
}


/**********************************/
/********* Education CSS **********/
/**********************************/
.education {
    position: relative;
    padding: 60px 30px;
    background: #ffffff;
    border-bottom: 30px solid transparent;
    border-image: linear-gradient(to right, #0c1b32, #4a5e79) 1;
}

.education .edu-col {
    position: relative;
    width: 100%;
    padding: 20px 0 20px 20px;
    border-left: 1px solid #8998af;
    border-bottom: 1px solid #8998af;
    transition: transform .3s ease, box-shadow .3s ease;
}

.education .edu-col:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(12, 27, 50, .1);
}

.education .col-md-6:first-child .edu-col {
    padding-top: 0;
}

.education .col-md-6:last-child .edu-col {
    border-bottom: none;
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .education .col-md-6:nth-child(-n+2) .edu-col {
        padding-top: 0;
    }

    .education .col-md-6:last-child .edu-col,
    .education .col-md-6:nth-last-child(2) .edu-col {
        border-bottom: none;
        padding-bottom: 0;
    }
}

.education .edu-col span {
    position: relative;
    display: block;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.education .edu-col span::before {
    position: absolute;
    content: "";
    width: 11px;
    height: 11px;
    background: #8998af;
    top: 5px;
    left: -26px;
    border-radius: 5px;
}

.education .edu-col span i {
    color: #8998af;
}

.education .edu-col h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
}

.education .edu-col p {
    margin: 0;
}


/**********************************/
/******** Certificates CSS ********/
/**********************************/
.certificates {
    position: relative;
    padding: 60px 30px;
    background: #ffffff;
    border-bottom: 30px solid transparent;
    border-image: linear-gradient(to right, #0c1b32, #4a5e79) 1;
}

.certificates .cert-item + .cert-item {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #8998af;
}

.certificates .cert-col {
    position: relative;
    width: 100%;
    padding: 0 0 20px 20px;
    border-left: 1px solid #8998af;
}

.certificates .cert-col .cert-date {
    position: relative;
    display: block;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.certificates .cert-col .cert-date::before {
    position: absolute;
    content: "";
    width: 11px;
    height: 11px;
    background: #8998af;
    top: 5px;
    left: -26px;
    border-radius: 5px;
}

.certificates .cert-col h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.certificates .cert-col h4 {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 15px;
}

.certificates .cert-col p {
    margin: 0 0 5px 0;
}

.certificates .cert-meta {
    list-style: none;
    margin: 15px 0 0 0;
    padding: 0;
}

.certificates .cert-meta li {
    font-size: 14px;
    margin-bottom: 6px;
}

.certificates .cert-meta li i {
    width: 20px;
    margin-right: 8px;
    color: #8998af;
}

.certificates .cert-actions {
    margin-top: 20px;
}

.certificates .cert-actions .btn {
    border-radius: 0;
    color: #222222;
    background: #8998af;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: all .3s;
}

.certificates .cert-actions .btn:hover {
    color: #8998af;
    background: #222222;
}

.certificates .cert-actions .btn i {
    margin-right: 8px;
}

.certificates .cert-actions .btn-verify {
    margin-left: 10px;
    color: #222222;
    background: transparent;
    border: 1px solid #8998af;
}

.certificates .cert-actions .btn-verify:hover {
    color: #ffffff;
    background: #222222;
    border-color: #222222;
}

@media (max-width: 575.98px) {
    .certificates .cert-actions .btn {
        display: block;
        width: 100%;
    }

    .certificates .cert-actions .btn-verify {
        margin-left: 0;
        margin-top: 10px;
    }
}

.certificates .cert-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -7px;
}

.certificates .cert-gallery .cert-page {
    position: relative;
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 7px 14px 7px;
    overflow: hidden;
    border: 1px solid #dfe3e9;
    box-shadow: 0 2px 10px rgba(12, 27, 50, .12);
}

/* From tablet up, the first page is the hero preview and any further pages sit
   below it as smaller thumbnails. Stacking every page full-size made the
   gallery column tower over the text and left a large void beside it. */
@media (min-width: 768px) {
    .certificates .cert-gallery {
        align-items: flex-start;
    }

    .certificates .cert-gallery .cert-page {
        width: 100%;
        max-width: 300px;
    }

    .certificates .cert-gallery .cert-page ~ .cert-page {
        width: calc(50% - 14px);
        max-width: 165px;
    }
}

.certificates .cert-gallery .cert-page img {
    display: block;
    width: 100%;
    height: auto;
    transition: all .3s;
}

.certificates .cert-gallery .cert-page:hover img {
    transform: scale(1.06);
}

.certificates .cert-gallery .cert-zoom {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #ffffff;
    font-size: 24px;
    background: rgba(12, 27, 50, .65);
    opacity: 0;
    transition: all .3s;
}

.certificates .cert-gallery .cert-page:hover .cert-zoom {
    opacity: 1;
}

@media (max-width: 767.98px) {
    .certificates .cert-gallery {
        margin-top: 25px;
    }
}


/**********************************/
/********* Experience CSS *********/
/**********************************/
.experience {
    position: relative;
    padding: 60px 30px;
    background: #ffffff;
    border-bottom: 30px solid transparent;
    border-image: linear-gradient(to right, #0c1b32, #4a5e79) 1;
}

.experience .exp-col {
    position: relative;
    width: 100%;
    padding: 20px 0 20px 20px;
    border-left: 1px solid #8998af;
    border-bottom: 1px solid #8998af;
    transition: transform .3s ease, box-shadow .3s ease;
}

.experience .exp-col:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(12, 27, 50, .1);
}

.experience .col-md-6:first-child .exp-col {
    padding-top: 0;
}

.experience .col-md-6:last-child .exp-col {
    border-bottom: none;
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .experience .col-md-6:nth-child(-n+2) .exp-col {
        padding-top: 0;
    }

    .experience .col-md-6:last-child .exp-col,
    .experience .col-md-6:nth-last-child(2) .exp-col {
        border-bottom: none;
        padding-bottom: 0;
    }
}

.experience .exp-col span {
    position: relative;
    display: block;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.experience .exp-col span::before {
    position: absolute;
    content: "";
    width: 11px;
    height: 11px;
    background: #8998af;
    top: 5px;
    left: -26px;
    border-radius: 5px;
}

.experience .exp-col span i {
    color: #8998af;
}

.experience .exp-col h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.experience .exp-col h4 {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 5px;
}

.experience .exp-col h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.experience .exp-col p {
    margin: 0;
}


/**********************************/
/*********** Service CSS **********/
/**********************************/
.service {
    position: relative;
    padding: 60px 30px 30px 30px;
    background: #ffffff;
    border-bottom: 30px solid transparent; /* Transparent border */
    border-image: linear-gradient(to right, #0c1b32, #4a5e79) 1; /* Linear gradient border */
    border-image-slice: 1; /* Ensures the gradient is applied properly */
}

.service .srv-col {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.service .srv-col:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(12, 27, 50, .1);
}

.service .srv-col i {
    font-size: 30px;
    color: #8998af;
    margin-bottom: 15px;
}

.service .srv-col h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.experience .exp-col h4 {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 5px;
}

.experience .exp-col h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.experience .exp-col p {
    margin: 0;
}


/**********************************/
/*********** Contact CSS ***********/
/**********************************/
.contact {
    position: relative;
    padding: 60px 30px 30px 30px;
    background: #ffffff;
    border-image: linear-gradient(to right, #0c1b32, #4a5e79) 1; /* Linear gradient border */
}

.contact .contact-info {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.contact .contact-info p {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.contact .contact-info p i {
    width: 25px;
    color: #8998af;
}

.contact .contact-info p a {
    color: #666666;
}

.contact .contact-info p a:hover {
    color: #8998af;
    text-decoration: none;
}

.contact .social {
    font-size: 0;
}

.contact .social a {
    width: 35px;
    height: 35px;
    padding: 5px 0;
    color: #222222;
    background: #8998af;
    border-radius: 0;
    margin-top: 15px;
    margin-right: 15px;
    transition: all .3s;
}

.contact .social a:last-child {
    margin-right: 0;
}

.contact .social a:hover {
    color: #8998af;
    background: #222222;
}

.contact .form {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}

.contact .form .form-control {
    border-radius: 0;
}

.contact .form .form-control:focus {
    box-shadow: none;
    border-color: #8998af;
}

.contact .form .form-group.d-flex {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Align items vertically */
}

.contact .form .btn {
    color: #222222;
    background: #8998af;
    border-radius: 0px; /* Ensure consistent border radius */
    transition: all .3s;
    padding: 10px 10px; /* Adjust padding for consistent size */
    margin: 0; /* Remove any margin */
}

.contact .form .btn:hover {
    color: #8998af;
    background: #222222;
}

#popupMessage {
    margin-top: 15px; /* Add spacing above the message */
    margin-left: 10px; /* Add spacing between the buttons */
    border-radius: 0px; /* Match the border radius of the button */
    padding: 10px 10px; /* Adjust padding for consistent size */
    display: inline-block;
    white-space: nowrap;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    line-height: 1.7; /* Ensure consistent height */
}

.alert-success {
    background-color: #28a745;
    border: 1px solid #218838;
}

.alert-danger {
    background-color: #dc3545;
    border: 1px solid #c82333;
}


/**********************************/
/*********** Footer CSS ***********/
/**********************************/
.footer {
    position: relative;
    width: 100%;
    padding: 0px 30px 0px 0px;
    background: #ffffff;
    border-top: 30px solid transparent; /* Top border for footer */
    border-image: linear-gradient(to right, #0c1b32, #4a5e79) 1;
}

.footer .col-md-6:last-child {
    text-align: right;
}

@media(max-width: 767.98px) {
    .footer .col-md-6,
    .footer .col-md-6:last-child{
        text-align: right   ;
    }
}

.footer p {
    color: #222222;
    margin: 0;
    white-space: nowrap; /* Prevents text from wrapping */
    text-align: center; /* Optional: Center-align the text */
}

.footer a {
    color: #8998af;
    font-weight: 600;
}

.footer a:hover {
    color: #222222;
}

.sidebar-header img {
    transform: scale(1.3); /* Static zoom */
    object-fit: cover; /* Ensures the image covers the container */
    object-position: top; /* Centers the image on the top side */
    width: 100%; /* Ensures the image spans the full width of the container */
    height: auto; /* Maintains aspect ratio */
}


.alert {
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    display: inline-block;
    white-space: nowrap;
}

.alert-success {
    background-color: #28a745;
    border: 1px solid #218838;
}

.alert-danger {
    background-color: #dc3545;
    border: 1px solid #c82333;
}

.ml-3 {
    margin-left: 15px;
}


/**********************************/
/****** Mobile Overrides CSS ******/
/**********************************/
/* These blocks must stay at the end of the file: they override the
   component rules above, which would otherwise win on source order. */

@media (max-width: 767px) {
    /* Mobile specific styling */
    .wrapper {
        overflow-x: hidden;
        width: 100%;
    }

    /* Keep the nav reachable while scrolling. The sidebar photo and social
       icons are hidden on mobile (.sidebar-header/.sidebar-footer above),
       so on this breakpoint the sidebar IS the nav bar - pinning the whole
       element to the top glues it there from the first scroll pixel.
       (position: sticky doesn't work here: .wrapper has overflow: hidden,
       which breaks sticky's scroll-container containment; fixed isn't
       affected by that, so it's the reliable choice.) */
    .wrapper .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 20;
    }

    /* Force the body to be full width with no overflow */
    body {
        overflow-x: hidden;
        width: 100vw;
        max-width: 100vw;
        position: relative;
    }
    
    /* Adjust section paddings for mobile */
    .about, .education, .certificates, .experience, .service, .contact {
        padding: 40px 15px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Make sure content images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Constrain all content elements */
    .content-inner {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* Header layout for mobile lives with the Header CSS below, so that it
       overrides the desktop .header .content-inner rule in source order. */

    /* Center align all text in the header for mobile */
    .header p,
    .header h1,
    .header h2,
    .header .typed-text,
    .header .typed-cursor {
        text-align: center;
        width: 100%;
    }

    /* Let the typed tagline and its cursor flow as one run of text, so the
       cursor is never stranded on a row of its own when the line wraps. */
    .header h2 {
        display: inline;
        width: auto;
        height: auto;
    }
    
    /* Adjust buttons for mobile */
    .large-btn .btn {
        font-size: 16px;
    }
    
    /* Better nav menu for mobile */
    .navbar-nav {
        width: 100%;
    }
    
    /* Ensure row elements don't overflow */
    .row {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    /* Column handling for mobile */
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media (max-width: 1140px) {
    .wrapper .content {
        padding: 30px;
    }
    
    /* Ensure that all content is visible without horizontal scrolling */
    .wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
}
@media (max-width: 576px) {
    .wrapper .content {
        padding: 15px;
    }

    /* Reduce font sizes for better mobile fit */
    .header h1 {
        font-size: 32px;
    }
    
    .header h2, .header .typed-text, .header .typed-cursor {
        font-size: 18px;
    }
    
    /* Make section titles smaller */
    .content-header h2 {
        font-size: 24px;
    }
    
    /* Adjust contact section for smaller screens */
    .contact .contact-info p {
        font-size: 14px;
    }
    
    /* Ensure all form elements fit on tiny screens */
    .form-control {
        width: 100%;
        max-width: 100%;
    }
    
    /* Adjust the size of social media icons */
    .sidebar-footer a,
    .contact .social a {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}
/* Fix for very small devices */
@media (max-width: 375px) {
    /* Ensure absolutely no overflow */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    /* Further reduce font sizes */
    .header h1 {
        font-size: 28px;
    }
    
    /* Reduce padding to make more space */
    .about, .education, .certificates, .experience, .service, .contact {
        padding: 30px 10px;
    }
    
    /* Make buttons more compact */
    .large-btn .btn {
        font-size: 14px;
        padding: 10px 0;
    }
}


/**********************************/
/************ Motion CSS **********/
/**********************************/
/* Scroll-reveal: JS toggles .is-visible via IntersectionObserver (see
   main.js). Wrapped in the media query so visitors who've asked for less
   motion just see the final state immediately - nothing to opt out of. */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .6s ease, transform .6s ease;
    }

    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .header h1 {
        animation: fade-up .7s ease both;
    }

    .large-btn .btn {
        animation: fade-up .7s ease .15s both;
    }

    .large-btn .btn:last-child {
        animation-delay: .25s;
    }

    @keyframes fade-up {
        from {
            opacity: 0;
            transform: translateY(16px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}


/**********************************/
/**** Fixed Mobile Nav Spacing ****/
/**********************************/
/* Must be the true last rule in the file. .wrapper .content's padding is
   also set by the 1140px/767px/576px blocks above, at widths that overlap
   each other - source order between them doesn't follow their width order,
   so a rule placed inside any single one of them can get clobbered by
   another. Living down here, after all of them, is what makes this the
   one that always wins within its own media query. */
@media (max-width: 767px) {
    .wrapper .content {
        padding-top: 85px;
    }
}