/* ===================================================================
 *  SCRA Theme Override — Blue Color Scheme:
 *  #1e2a4d  最深藏青蓝 (headings / nav / footer / hero overlay / dark bg)
 *  #2c4a7f  深蓝       (secondary dark bg / emphasis / focus state)
 *  #3c6eaf  主蓝       (links / buttons / icons / button text)
 *  #7ca6dc  中蓝       (button hover bg / subtitles / accents)
 *  #b3d4e0  浅蓝       (light bg / cards / decorations)
 * =================================================================== */

/* ===================================================================
 * 1. ROOT & BODY
 * =================================================================== */
html, body {
    /*background: #b3d4e0 !important;*/
    color: #1e2a4d !important;
}

/* ===================================================================
 * 2. PRELOADER — SCRA gradient shimmer
 * =================================================================== */
#preloader {
    background: #1e2a4d !important;
}

#loader {
    width: auto !important;
    height: auto !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 5.5rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.6rem !important;
    background: linear-gradient(
        90deg,
        #7ca6dc 0%,
        #b3d4e0 25%,
        #7ca6dc 50%,
        #3c6eaf 75%,
        #7ca6dc 100%
    ) !important;
    background-size: 250% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: scra-shimmer 1s ease-in-out infinite !important;
}

@keyframes scra-shimmer {
    0%   { background-position: 100% 50%; opacity: 0.65; }
    40%  { background-position: 0% 50%;   opacity: 1; }
    60%  { background-position: 0% 50%;   opacity: 1; }
    100% { background-position: 100% 50%; opacity: 0.65; }
}

/* ===================================================================
 * 3. HEADER & NAVIGATION — fixed top, transparent, horizontal layout
 * =================================================================== */
.s-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 70px !important;
    background: transparent !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 4rem !important;
    z-index: 500 !important;
    transition: background 0.35s ease, box-shadow 0.35s ease !important;
}
.s-header.scrolled {
    background: rgba(30, 42, 77, 0.92) !important;
    box-shadow: 0 2px 24px rgba(30, 42, 77, 0.3) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* logo */
.header-logo {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    flex-shrink: 0 !important;
    z-index: 501 !important;
}
.header-logo img {
    width: 220px !important;
}

/* ── horizontal nav (desktop) ── */
.header-nav-horizontal {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: 5rem !important;
}
.header-nav-horizontal__list {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2.8rem !important;
}
.header-nav-horizontal__list a {
    color: #ffffff !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    text-transform: uppercase !important;
    letter-spacing: .2rem !important;
    text-decoration: none !important;
    transition: color 0.3s !important;
    padding: 0.5rem 0 !important;
    position: relative !important;
    white-space: nowrap !important;
}
.header-nav-horizontal__list a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: #7ca6dc !important;
    transition: width 0.3s ease !important;
}
.header-nav-horizontal__list a:hover,
.header-nav-horizontal__list a:focus {
    color: #7ca6dc !important;
}
.header-nav-horizontal__list a:hover::after,
.header-nav-horizontal__list a:focus::after {
    width: 100% !important;
}

/* hamburger menu toggle */
.header-menu-toggle {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    flex-shrink: 0 !important;
}
.header-menu-icon,
.header-menu-icon::before,
.header-menu-icon::after {
    background-color: #ffffff !important;
}
.header-menu-toggle.opaque {
    background-color: rgba(60, 110, 175, 0.25) !important;
}

/* off-canvas nav panel */
.header-nav {
    background: #b3d4e0 !important;
    color: #1e2a4d !important;
    border-radius: 16px 0 0 16px !important;
}
.header-nav a,
.header-nav a:visited {
    color: #1e2a4d !important;
}
.header-nav a:hover,
.header-nav a:focus,
.header-nav a:active {
    color: #3c6eaf !important;
}
.header-nav h3 {
    color: #3c6eaf !important;
}
.header-nav h3::after {
    background-color: #3c6eaf !important;
}
.header-nav__list a::before {
    background: rgba(60, 110, 175, 0.3) !important;
}
.header-nav__list a:hover::before,
.header-nav__list .current a::before {
    background-color: #3c6eaf !important;
}
.header-nav__social li a {
    color: #1e2a4d !important;
}
.header-nav__social li a:hover,
.header-nav__social li a:focus {
    color: #3c6eaf !important;
}
.header-nav__close span::before,
.header-nav__close span::after {
    background-color: #1e2a4d !important;
}

/* hide horizontal nav on mobile, show only hamburger */
@media only screen and (max-width: 1023px) {
    .header-nav-horizontal {
        display: none !important;
    }
}

/* show hamburger only on mobile/tablet, hide on desktop */
.header-menu-toggle {
    display: none !important;
}
@media only screen and (max-width: 1023px) {
    .header-menu-toggle {
        display: block !important;
    }
}

/* ===================================================================
 * 4. HERO / HOME
 * =================================================================== */
.s-home {
    min-height: 700px !important;
    height: 90vh !important;
}
.s-home::before {
    background-color: #1e2a4d !important;
    opacity: 0.75 !important;
}
.s-home::after {
    background-color: rgba(60, 110, 175, 0.15) !important;
    opacity: 0.6 !important;
}
.home-content {
    padding-top: 4rem !important;
}
.home-content h1 {
    font-size: 8rem !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
}
.home-content h3 {
    color: rgba(179, 212, 224, 0.85) !important;
    font-size: 2.2rem !important;
}
.home-content__button {
    margin-top: 3.6rem !important;
}
.home-content__video .video-icon {
    background-color: #3c6eaf !important;
}
.home-content__video .video-icon:hover {
    background-color: #1e2a4d !important;
}
.home-content__video .video-text {
    color: rgba(179, 212, 224, 0.75) !important;
}

/* hero social */
.home-social li a {
    color: rgba(179, 212, 224, 0.55) !important;
}
.home-social li a:hover {
    color: #ffffff !important;
}
.home-social::before {
    background-color: rgba(179, 212, 224, 0.2) !important;
}
.home-content__scroll .scroll-link {
    color: rgba(179, 212, 224, 0.55) !important;
}
.home-content__scroll .scroll-link::before {
    border-right-color: rgba(179, 212, 224, 0.55) !important;
    border-bottom-color: rgba(179, 212, 224, 0.55) !important;
}

/* ===================================================================
 * 5. BUTTONS
 * =================================================================== */
/* primary button */
.btn--primary {
    background: #3c6eaf !important;
    border-color: #3c6eaf !important;
    color: #ffffff !important;
}
.btn--primary:hover,
.btn--primary:focus {
    background: #1e2a4d !important;
    border-color: #1e2a4d !important;
    color: #ffffff !important;
}
.btn--primary:focus {
    outline: 3px solid #7ca6dc !important;
    outline-offset: 2px !important;
}
.btn--primary:active {
    background: #2c4a7f !important;
    border-color: #2c4a7f !important;
    color: #ffffff !important;
}

/* ghost / stroke button */
.btn--stroke {
    background: transparent !important;
    border-color: #3c6eaf !important;
    color: #3c6eaf !important;
}
.btn--stroke:hover,
.btn--stroke:focus {
    background: #3c6eaf !important;
    border-color: #3c6eaf !important;
    color: #ffffff !important;
}
.btn--stroke:focus {
    outline: 3px solid #7ca6dc !important;
    outline-offset: 2px !important;
}
.btn--stroke:active {
    background: #2c4a7f !important;
    border-color: #2c4a7f !important;
    color: #ffffff !important;
}

/* contact-area buttons (on dark #1e2a4d background) */
.s-contact .btn--primary {
    background: #3c6eaf !important;
    border-color: #3c6eaf !important;
    color: #ffffff !important;
}
.s-contact .btn--primary:hover,
.s-contact .btn--primary:focus {
    background: #7ca6dc !important;
    border-color: #7ca6dc !important;
    color: #1e2a4d !important;
}
.s-contact .btn--primary:focus {
    outline: 3px solid #b3d4e0 !important;
    outline-offset: 2px !important;
}
.s-contact .btn--primary:active {
    background: #b3d4e0 !important;
    border-color: #b3d4e0 !important;
    color: #1e2a4d !important;
}
.s-contact .btn--stroke {
    background: transparent !important;
    border-color: #7ca6dc !important;
    color: #7ca6dc !important;
}
.s-contact .btn--stroke:hover,
.s-contact .btn--stroke:focus {
    background: #7ca6dc !important;
    border-color: #7ca6dc !important;
    color: #1e2a4d !important;
}
.s-contact .btn--stroke:focus {
    outline: 3px solid #b3d4e0 !important;
    outline-offset: 2px !important;
}

/* ===================================================================
 * 6. LINKS & ACCENTS
 * =================================================================== */
a {
    color: #3c6eaf !important;
}
a:hover, a:focus, a:active {
    color: #1e2a4d !important;
    text-decoration: underline !important;
}

/* ===================================================================
 * 7. SECTION BACKGROUNDS
 * =================================================================== */
/* "darker" sections → light */
.darker {
    background-color: #fff !important;
}

/* s-about */
.s-about {
    background-color: #b3d4e0 !important;
}

/* s-works (focus + publications) */
.s-works {
    background-color: #b3d4e0 !important;
}
.s-works::before {
    background-color: rgba(30, 42, 77, 0.06) !important;
    background-image: none !important;
    opacity: 1 !important;
}

/* s-contact */
.s-contact {
    background-color: #1e2a4d !important;
    color: rgba(179, 212, 224, 0.8) !important;
}
.s-contact .subhead {
    color: #7ca6dc !important;
}

/* ===================================================================
 * 8. TYPOGRAPHY — headings, subhead, display-1, lead
 * =================================================================== */
.display-1 {
    color: #1e2a4d !important;
    font-weight: 700 !important;
}
.subhead {
    color: #3c6eaf !important;
}
.item-title {
    color: #1e2a4d !important;
}
p.lead {
    color: #7ca6dc !important;
}
.section-header.has-bottom-sep::before {
    background-color: rgba(60, 110, 175, 0.3) !important;
}

/* dark-section overrides for headings */
.darker .display-1,
.s-works .display-1,
.s-contact .display-1 {
    color: #1e2a4d !important;
}
.darker .subhead,
.s-works .subhead {
    color: #3c6eaf !important;
}
.darker h1, .darker h2, .darker h3,
.s-works h1, .s-works h2, .s-works h3 {
    color: #1e2a4d !important;
}
.s-contact h1, .s-contact h2, .s-contact h3,
.s-contact .display-1 {
    color: #ffffff !important;
}
.s-contact .subhead {
    color: #7ca6dc !important;
}

/* general text on dark → readable */
.text-center p.lead {
    color: #2c4a7f !important;
}

/* ===================================================================
 * 9. SERVICES / FOCUS / CARDS
 * =================================================================== */
.item-service {
    /*background: #b3d4e0 !important;*/
    border-radius: 16px !important;
    padding: 3.6rem !important;
    /*box-shadow: 0 4px 24px rgba(30, 42, 77, 0.08) !important;*/
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.item-service:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 36px rgba(30, 42, 77, 0.15) !important;
}
.item-service__text p {
    color: #7ca6dc !important;
}
.item-service__icon {
    color: #3c6eaf !important;
}

/* about process cards */
.item-process {
    /*background: #fff !important;*/
    border-radius: 16px !important;
    padding: 3rem !important;
    /*box-shadow: 0 4px 24px rgba(30, 42, 77, 0.08) !important;*/
}
.item-process__text p {
    color: #2c4a7f !important;
}

/* ===================================================================
 * 10. PORTFOLIO / PUBLICATIONS (masonry)
 * =================================================================== */
.item-folio {
    border-radius: 16px !important;
    overflow: hidden !important;
}
.item-folio__thumb a::before {
    background-color: rgba(30, 42, 77, 0.85) !important;
}
.item-folio__thumb a::after {
    color: #ffffff !important;
}
.item-folio__text {
    background: linear-gradient(transparent, rgba(30, 42, 77, 0.9)) !important;
    padding: 3rem 2.4rem 1.8rem !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}
.item-folio__title {
    color: #ffffff !important;
}
.item-folio__cat {
    color: rgba(179, 212, 224, 0.75) !important;
}
.item-folio__project-link {
    color: #ffffff !important;
    box-shadow: 0 0 0 1px #ffffff !important;
    border-radius: 12px !important;
}
.item-folio__project-link::before {
    background-color: rgba(179, 212, 224, 0.2) !important;
}
.item-folio__project-link:hover {
    background-color: #3c6eaf !important;
    color: #ffffff !important;
}
.masonry-wrap {
    max-width: 1140px !important;
}

/* ===================================================================
 * 11. CONSTITUENT CLOUD (Who We Serve) — dynamic floating
 * =================================================================== */

/* ── keyframes ── */
@keyframes cc-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes cc-float-deep {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes cc-float-shallow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes cc-breathe {
    0%, 100% { opacity: 0.80; }
    50%      { opacity: 1; }
}

/* ── container ── */
.constituent-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.2rem 2rem;
    max-width: 780px;
    margin: 0 auto;
    padding: 2.4rem 1.2rem;
    line-height: 1.2;
}

/* ── float wrappers (each with staggered params) ── */
.constituent-cloud__float {
    display: inline-block;
    animation: cc-breathe 4s ease-in-out infinite;
}
.constituent-cloud__float--a { animation: cc-float 3.2s ease-in-out infinite, cc-breathe 3.2s ease-in-out infinite; animation-delay: 0s; }
.constituent-cloud__float--b { animation: cc-float-deep 3.8s ease-in-out infinite, cc-breathe 3.8s ease-in-out infinite; animation-delay: 0.45s; }
.constituent-cloud__float--c { animation: cc-float-shallow 2.6s ease-in-out infinite, cc-breathe 2.6s ease-in-out infinite; animation-delay: 0.85s; }
.constituent-cloud__float--d { animation: cc-float 3.5s ease-in-out infinite, cc-breathe 3.5s ease-in-out infinite; animation-delay: 1.3s; }
.constituent-cloud__float--e { animation: cc-float-deep 4.1s ease-in-out infinite, cc-breathe 4.1s ease-in-out infinite; animation-delay: 0.2s; }
.constituent-cloud__float--f { animation: cc-float-shallow 2.9s ease-in-out infinite, cc-breathe 2.9s ease-in-out infinite; animation-delay: 1.7s; }
.constituent-cloud__float--g { animation: cc-float 3.0s ease-in-out infinite, cc-breathe 3.0s ease-in-out infinite; animation-delay: 1.05s; }
.constituent-cloud__float--h { animation: cc-float-shallow 3.6s ease-in-out infinite, cc-breathe 3.6s ease-in-out infinite; animation-delay: 0.65s; }

/* ── size tiers ── */
.constituent-cloud__label--xl {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.constituent-cloud__label--lg {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}
.constituent-cloud__label--md {
    font-size: 1.4rem;
    font-weight: 600;
}
.constituent-cloud__label--sm {
    font-size: 1.05rem;
    font-weight: 500;
}

/* ── color map ── */
.constituent-cloud__label--c1 { color: #1e2a4d; }
.constituent-cloud__label--c2 { color: #3c6eaf; }
.constituent-cloud__label--c3 { color: #2c4a7f; }
.constituent-cloud__label--c4 { color: #7ca6dc; }

/* ── inner pill style + hover ── */
.constituent-cloud__label {
    display: inline-block;
    cursor: default;
    padding: 0.25em 0.5em;
    border-radius: 0.5em;
    transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
    white-space: nowrap;
}
.constituent-cloud__label:hover {
    transform: scale(1.12);
    background-color: rgba(60, 110, 175, 0.10);
    color: #1e2a4d;
    text-shadow: 0 0 8px rgba(60, 110, 175, 0.25);
}

/* --- responsive --- */
@media screen and (max-width: 600px) {
    .constituent-cloud {
        gap: 0.8rem 1.2rem;
        padding: 1.6rem 0.8rem;
    }
    .constituent-cloud__label--xl { font-size: 1.8rem; }
    .constituent-cloud__label--lg { font-size: 1.4rem; }
    .constituent-cloud__label--md { font-size: 1.1rem; }
    .constituent-cloud__label--sm { font-size: 0.9rem; }
}

/* legacy grid-overlay (unchanged) */
.s-clients .grid-overlay {
    border-color: rgba(60, 110, 175, 0.15) !important;
}
.s-clients .grid-overlay > div,
.s-clients .grid-overlay::before,
.s-clients .grid-overlay::after {
    background-color: rgba(60, 110, 175, 0.07) !important;
}

/* ===================================================================
 * 12. TESTIMONIALS
 * =================================================================== */
.s-testimonials {
    background-color: #fff !important;
}
.testimonials__slider {
    color: #1e2a4d !important;
}
.testimonials__slider .slick-dots li button {
    background-color: rgba(60, 110, 175, 0.3) !important;
}
.testimonials__slider .slick-dots li.slick-active button {
    background-color: #3c6eaf !important;
}
.testimonials__icon {
    color: #3c6eaf !important;
}
.testimonials__author {
    color: #2c4a7f !important;
}
.testimonials__position {
    color: #2c4a7f !important;
}

/* ===================================================================
 * 13. CONTACT
 * =================================================================== */
.s-contact {
    border-radius: 0 !important;
}
.contact-email a {
    color: #ffffff !important;
    border-bottom-color: rgba(179, 212, 224, 0.3) !important;
}
.contact-email a:hover,
.contact-email a:focus {
    border-bottom-color: rgba(179, 212, 224, 0.7) !important;
}
.contact-numbers a {
    color: #ffffff !important;
}
.contact-social li a {
    color: rgba(179, 212, 224, 0.75) !important;
}
.contact-social li a:hover {
    color: #fff !important;
}
.s-contact .grid-overlay {
    border-color: rgba(179, 212, 224, 0.1) !important;
}
.s-contact .grid-overlay > div,
.s-contact .grid-overlay::before,
.s-contact .grid-overlay::after {
    background-color: rgba(179, 212, 224, 0.08) !important;
}

/* ===================================================================
 * 14. FOOTER
 * =================================================================== */
footer {
    background-color: #1e2a4d !important;
    color: rgba(179, 212, 224, 0.75) !important;
    border-top: 1px solid rgba(179, 212, 224, 0.1) !important;
    padding-top: 6rem !important;
    padding-bottom: 4rem !important;
}
footer a {
    color: #b3d4e0 !important;
}
.ss-copyright span::after {
    color: rgba(179, 212, 224, 0.4) !important;
}
.ss-go-top {
    position: fixed !important;
    right: 50px !important;
    bottom: 24px !important;
    z-index: 600 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
}
.ss-go-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
.ss-go-top a {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    -ms-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    height: 60px !important;
    color: #ffffff !important;
    background-color: #3c6eaf !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(30, 42, 77, 0.35) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 60px !important;
    letter-spacing: 0 !important;
    padding: 0 !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
}
.ss-go-top a:hover {
    background-color: #1e2a4d !important;
    box-shadow: 0 6px 20px rgba(30, 42, 77, 0.45) !important;
    /*transform: translateY(-2px) !important;*/
    transform: scale(1.02) !important;
}

/* ===================================================================
 * 15. FORMS
 * =================================================================== */
input, textarea, select {
    background: #fff !important;
    border-color: rgba(60, 110, 175, 0.3) !important;
    color: #1e2a4d !important;
    border-radius: 10px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: #3c6eaf !important;
    box-shadow: 0 0 0 3px rgba(60, 110, 175, 0.15) !important;
}

/* ===================================================================
 * 16. SKILLBARS & METER
 * =================================================================== */
.skillbar {
    background: rgba(60, 110, 175, 0.12) !important;
    border-radius: 6px !important;
}
.skillbar__bar {
    background: #3c6eaf !important;
    border-radius: 6px !important;
}

/* ===================================================================
 * 17. GRID OVERLAYS & SEPARATORS
 * =================================================================== */
.grid-overlay {
    border-color: rgba(60, 110, 175, 0.12) !important;
}
.grid-overlay > div,
.grid-overlay::before,
.grid-overlay::after {
    background-color: rgba(60, 110, 175, 0.06) !important;
}

/* ===================================================================
 * 18. BORDERS, DIVIDERS & SHADOWS
 * =================================================================== */
hr, .sep {
    border-color: rgba(60, 110, 175, 0.2) !important;
}

/* ===================================================================
 * 19. PHOTOSWIPE OVERRIDES
 * =================================================================== */
.pswp__bg {
    background: #1e2a4d !important;
}
.pswp__button {
    color: #ffffff !important;
}
.pswp__counter {
    color: rgba(179, 212, 224, 0.75) !important;
}
.pswp__caption__center {
    color: #ffffff !important;
}
.pswp__preloader__icn {
    opacity: 0.75;
}

/* ===================================================================
 * 20. SCROLLBAR
 * =================================================================== */
::-webkit-scrollbar-thumb {
    background: #3c6eaf !important;
    border-radius: 8px !important;
}
::-webkit-scrollbar-track {
    background: #b3d4e0 !important;
}

/* ===================================================================
 * 21. ALERT BOXES
 * =================================================================== */
.alert-box {
    border-radius: 12px !important;
}
.alert-box--error {
    background: rgba(230, 81, 83, 0.1) !important;
    color: #c0392b !important;
}
.alert-box--success {
    background: rgba(60, 110, 175, 0.15) !important;
    color: #1e2a4d !important;
}
.alert-box--info {
    background: rgba(60, 110, 175, 0.12) !important;
    color: #1e2a4d !important;
}
.alert-box--notice {
    background: rgba(179, 212, 224, 0.5) !important;
    color: #1e2a4d !important;
}

/* ===================================================================
 * 22. GENERAL CARD / ELEVATION PATTERN
 * =================================================================== */
.home-content__main {
    max-width: 900px !important;
}

/* ===================================================================
 * 23. RESPONSIVE
 * =================================================================== */
@media only screen and (max-width: 1200px) {
    .home-content h1 { font-size: 6.5rem !important; }
}
@media only screen and (max-width: 900px) {
    .home-content h1 { font-size: 5rem !important; }
    .home-content h3 { font-size: 1.8rem !important; }
    .header-logo img { width: 160px !important; }
    .s-header { height: 60px !important; padding: 0 2.5rem !important; }
}
@media only screen and (max-width: 700px) {
    .home-content h1 { font-size: 3.8rem !important; }
    .home-content h3 { font-size: 1.6rem !important; }
    .item-service,
    .item-process {
        padding: 2.4rem !important;
        border-radius: 12px !important;
    }
}
@media only screen and (max-width: 600px) {
    .s-home { height: 85vh !important; min-height: 500px !important; }
    .home-content h1 { font-size: 3rem !important; }
    .header-logo img { width: 130px !important; }
    .s-header { padding: 0 1.5rem !important; }
    .item-folio__text { padding: 2rem 1.6rem 1.2rem !important; }
}
@media only screen and (max-width: 400px) {
    .home-content h1 { font-size: 2.4rem !important; }
    .home-content h3 { font-size: 1.4rem !important; }
    .item-service,
    .item-process {
        padding: 1.8rem !important;
    }
}