/* Custom overrides for Mostafa Saeed's portfolio (not part of the original theme) */

/* Brand palette — overrides the theme's default pink/red palette with the
   logo's navy + light blue, via the same CSS variables the theme already
   uses everywhere (buttons, links, borders, gradients, section backgrounds). */
:root {
    --color-primary: #CAE8FF;
    --color-primary-alt: #A9D6FCd9;
    --color-primary-2nd: #9FCBFF;
    --color-primary-3rd: #E8F4FF;
    --color-primary-4th: #050A30;
    --color-secondary: #050A30;
    --color-subtitle: #CAE8FF;
    --background-color-1: #050A3057;
    --background-color-2: #0A1240;
    --background-color-3: #0D1550;
    --background-color-4: #10184F;
    --color-card: #0A1240;
    --color-dark: #050A30;
    --gradient-box: linear-gradient(to right, #050A30, #CAE8FF);
    --gradient-one: linear-gradient(to right bottom, #050A30, #CAE8FF);
    --gradient-two: linear-gradient(to right, #050A30, #CAE8FF);
    --gradient-three: linear-gradient(to right, #03041c, #0A1240);
    --text-gradient-one: linear-gradient(to right, #CAE8FF, #ffffff);
    --color-border: #CAE8FF24;
    --color-gray-2: #0A1240;
}

/* A few spots in the theme use hardcoded red rgba() values instead of the
   variables above — patch those individually so nothing clashes with the
   navy/light-blue palette. */
.contact-info .contact-icon {
    background: rgba(202, 232, 255, 0.16) !important;
}

.service-card-v1,
.service-card-v1.vc-primary-2nd {
    border-color: rgba(202, 232, 255, 0.16) !important;
}

/* Buttons: background is var(--color-primary), which is now a light blue —
   swap the text color to the brand navy so it stays readable. */
.tmp-btn,
.tmp-btn.btn-border:hover,
.tmp-btn.btn-border.color-white-off:hover {
    color: #050A30 !important;
}

/* Outline buttons need a visible border/fill of their own — the theme's
   default border color is too faint to read against busy backgrounds
   like the hero artwork. */
.tmp-btn.btn-border {
    border-color: rgba(202, 232, 255, 0.5) !important;
    background: rgba(5, 10, 48, 0.45);
    color: #ffffff !important;
    backdrop-filter: blur(6px);
}

/* Header hamburger button: its circular background is var(--color-primary),
   now the brand's light blue, but the theme sets the icon itself to white —
   white bars on a light blue circle have almost no contrast. Swap the icon
   to the brand navy; the circle, size and position all stay as the theme
   defines them. */
.tmp-menu-bars {
    color: #050A30;
}

.site-logo-text {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.site-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ffffff;
    padding: 3px;
    transition: width 0.3s ease, height 0.3s ease, padding 0.3s ease;
}

.header--sticky.sticky .site-logo-mark {
    width: 48px;
    height: 48px;
    padding: 2px;
}

.site-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The theme's ".footer-style-one .description" rule is sized for a big
   footer headline (50px); our footer uses it for a short bio blurb, so
   bring it back down to normal paragraph size. */
.footer-style-one .description {
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
    color: var(--color-body);
}

@media only screen and (max-width: 767px) {
    .site-logo-mark {
        width: 56px;
        height: 56px;
        padding: 3px;
    }
}

@media only screen and (max-width: 575px) {
    .site-logo-mark {
        width: 48px;
        height: 48px;
        padding: 2px;
    }
}

/* Custom-built dropdown for the contact form's "service" field. Browsers on
   Linux/macOS mostly ignore CSS on a native <select>'s open popup (it always
   renders as an OS-themed white list), so a real <select> can't be made to
   match the dark card. Build the visible control ourselves and keep a native
   <select> (visually hidden) in sync for form submission. */
.custom-select {
    position: relative;
}

.custom-select-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.custom-select-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    background: transparent;
    height: inherit;
    padding: 15px 20px;
    border-radius: 10px;
    border: 2px solid var(--color-border);
}

.custom-select-toggle:focus,
.custom-select.is-open .custom-select-toggle {
    border-color: var(--color-primary);
    outline: none;
}

.custom-select-toggle i {
    color: var(--color-primary);
    font-size: 13px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.custom-select.is-open .custom-select-toggle i {
    transform: rotate(180deg);
}

.custom-select-value {
    color: var(--color-gray);
    font-family: var(--font-secondary);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select-value.has-value {
    color: var(--color-heading);
    font-weight: 600;
}

.custom-select-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    background: #0A1240;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.custom-select.is-open .custom-select-menu {
    display: block;
}

.custom-select-option {
    padding: 12px 16px;
    border-radius: 8px;
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.custom-select-option:hover,
.custom-select-option.is-active {
    background: rgba(202, 232, 255, 0.14);
}

.custom-select-option.is-selected {
    color: var(--color-primary);
    font-weight: 600;
}

/* Contact form validation */
.input-field.is-invalid {
    border-color: #e6543a !important;
}

.field-error {
    display: block;
    color: #e6543a;
    font-size: 13px;
    margin-top: 6px;
}

#form-messages:empty {
    display: none;
}

#form-messages.success {
    color: #2fae66;
}

#form-messages.error {
    color: #e6543a;
}

/* Portfolio filters */
.portfolio-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}

.portfolio-filter-btn {
    width: auto;
    border: 1px solid rgba(202, 232, 255, 0.5);
    background: rgba(5, 10, 48, 0.45);
    color: #ffffff;
    padding: 8px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
}

.portfolio-filter-btn.is-active,
.portfolio-filter-btn:hover {
    background: var(--color-primary, #FF014F);
    border-color: var(--color-primary, #FF014F);
    color: #050A30;
}

/* Portfolio card thumbnails: uploaded images vary wildly in their own
   aspect ratio (a tall mockup vs. a landscape photo), and the theme only
   constrained width, so each card ended up a different height. Locking
   every card to the same 5:3 box keeps the grid even. */
.portfoli-card-img .img-box.v2 {
    height: auto;
    aspect-ratio: 5 / 3;
    overflow: hidden;
}

/* The image's own height:100% can only resolve against a containing block
   with a definite height — the wrapping <a> is inline by default and would
   otherwise just shrink-wrap the image, making the percentage a no-op. */
.portfoli-card-img .img-box.v2 a {
    display: block;
    height: 100%;
}

.portfoli-card-img .img-box.v2 img {
    height: 100%;
    object-fit: fill;
}

/* The hover arrow icon's circle background is var(--color-primary), now the
   brand's light blue, but the theme sets the icon itself to white — same
   low-contrast issue as the header hamburger button above. */
.latest-portfolio-card.v5 .portfoli-card-img .img-link-icon i {
    transform: rotate(45deg);
    transition: all 0.4s ease;
    color: #0a1240;
}

/* Skill tags (no fake percentage bars) */
.skill-category {
    margin-bottom: 28px;
}

.skill-category-title {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px;
    opacity: 0.7;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skill-tag {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--color-primary, #CAE8FF);
    font-size: 14px;
    color: #ffffff;
}

/* Hero section background — replaces the theme's default red banner image
   with the brand navy/light-blue artwork, so it flows into the rest of the
   (now navy) page instead of cutting off sharply. */
.tmp-banner-one-area {
    background-image: linear-gradient(180deg, rgba(5, 10, 48, 0) 0%, #050A30 100%), url("../images/banner/hero-background.webp") !important;
    background-position: center !important;
    background-size: cover !important;
}

/* Ground the cutout photo to the bottom of the hero instead of letting the
   row's vertical centering leave empty background underneath it. */
.tmp-banner-one-area .col-lg-6.order-lg-2 {
    align-self: flex-end;
}

.hero-photo-wrap {
    display: flex;
    justify-content: center;
}

.hero-cutout {
    display: block;
    max-width: 520px;
    width: 100%;
    height: auto;
    margin-bottom: -1px;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));
}

@media only screen and (max-width: 575px) {
    .hero-cutout {
        max-width: 300px;
    }
}

/* The rotating role text (typewriter effect) is sized in JS to the pixel
   width of its longest word ("Full Stack Web Developer") at the title's
   font-size. On phones the hero column is narrower than that word at the
   theme's mobile title size (32px), which pushed the word past the
   viewport edge and caused horizontal scrolling on the whole homepage.
   Shrinking the rotating word specifically (not the "Mostafa Saeed" line
   above it) keeps it inside the column at common phone widths. */
@media only screen and (max-width: 767px) {
    .banner-one-main-wrapper .inner .title .header-caption {
        font-size: 26px;
    }
}

@media only screen and (max-width: 400px) {
    .banner-one-main-wrapper .inner .title .header-caption {
        font-size: 22px;
    }
}

/* Hide the hero intro paragraph on phones so the portrait comes into view
   right after the name/role instead of sitting below a multi-line
   paragraph — the same copy still reads fine on tablet/desktop. */
@media only screen and (max-width: 767px) {
    .banner-one-main-wrapper .inner .disc {
        display: none;
    }

    .hero-photo-wrap {
        margin-top: 10px;
    }
}

/* Mobile hero CTAs: this block is the mobile-only copy of the buttons/social
   row (see hero-mobile-cta in home.blade.php), placed after the portrait so
   the photo shows up right under the intro text instead of after a full-size
   button row. Sized down and laid out with wrap+gap so the two buttons sit
   side by side on most phones instead of each taking a full-height row. */
.hero-mobile-cta {
    margin-top: 24px;
    text-align: center;
}

.hero-mobile-cta .button-area-banner-one {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.hero-mobile-cta .tmp-btn {
    height: 44px;
    line-height: 42px;
    padding: 0 14px;
    font-size: 13px;
}

.hero-mobile-cta .hero-social {
    justify-content: center;
}

.hero-social {
    display: flex;
    gap: 14px;
    margin-top: 30px;
}

.hero-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: inherit;
    transition: all 0.3s ease;
}

.hero-social a:hover {
    background: var(--color-primary, #FF014F);
    border-color: var(--color-primary, #FF014F);
    color: #050A30;
}

/* Full-width experience list on the homepage (no side image) */
.experiences-wrap-left-content.full-width {
    padding: 0 !important;
    max-width: 900px;
    margin: 0 auto;
}

/* Remote experience strip */
.remote-experience-strip .subtitle {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 18px;
}

.remote-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.remote-country-badge {
    padding: 10px 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
}

/* CTA area */
.cta-area .get-in-touch-wrapper {
    padding: 70px 40px;
}

/* Placeholder case-study note */
.placeholder-note {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.25);
    font-size: 13px;
    opacity: 0.75;
}

/* Move "back to top" to the left so it doesn't collide with the floating
   WhatsApp button on the right. */
.scrollToTop {
    right: auto;
    left: 20px;
}

/* Floating WhatsApp contact button */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #ffffff;
    border-radius: 50%;
    font-size: 26px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    z-index: 999;
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    color: #ffffff;
    transform: translateY(-15%);
}

@media only screen and (max-width: 575px) {
    .whatsapp-float {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }
}

/* Breadcrumb (page title header on About/Services/Portfolio detail pages):
   the theme lays it out as a non-wrapping centered flex row, so a longer
   page title ("Custom Laravel Development", a portfolio project name, …)
   overflows past the row width and visually overlaps the heading above it
   on narrow screens instead of wrapping onto a second centered line. */
@media only screen and (max-width: 767px) {
    .breadcrumb-inner .page-list {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/* Mobile nav drawer: the theme sizes the links like a small dropdown
   (14px, 8px padding), so on a full-height phone drawer the six links
   only fill a small band under the logo, leaving a large empty gap
   above the social row. Sizing them like primary navigation — bigger
   text, roomier tap targets — fills the drawer naturally instead of
   leaving that dead space. */
.tmp-popup-mobile-menu .tmp-mainmenu li {
    padding: 16px 0;
}

.tmp-popup-mobile-menu .tmp-mainmenu li a {
    font-size: 22px;
}