/*html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
*/




/* ============================================
   SRPEPL TYPOGRAPHY — MONTSERRAT
   ============================================ */

/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');*/

/* ── Token overrides ── */
/*:root {
    --tp-ff-body: 'Montserrat', sans-serif;
    --tp-ff-heading: 'Montserrat', sans-serif;
    --tp-ff-p: 'Montserrat', sans-serif;*/
    /* Weight tokens */
    /*--tp-fw-regular: 400;
    --tp-fw-medium: 500;
    --tp-fw-bold: 700;
}*/

/* ── Global reset ── */
/**,
body,
html {
    font-family: 'Montserrat', sans-serif !important;
}*/

/* ── Headings — Bold ── */
/*h1, h2, h3, h4, h5, h6,
.tp-section-title-clash-600,
.tp-section-title-clash,
.tp-section-title-teko,
.tp-section-title-mango,
.tp-section-title-platform,
.tp-pd-3-title,
.ar-about-title-sm,
.ar-hero-title,
.ar-step-title-sm,
.des-team-title,
.des-footer-title,
.crp-hero-title,
.crp-about-us-item-title,
.crp-footer-big-text,
.pp-about-me-title,
.pp-footer-title,
.tp-funfact-title,
.tp-funfact-number span,
.tp-copyright-big-text,
.ar-copyright-big-text {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}*/

/* ── Subtitles & labels — Medium ── */
/*.tp-section-subtitle,
.tp-section-subtitle-satisfy,
.tp-section-subtitle-clash,
.tp-section-subtitle-teko,
.tp-pd-3-subtitle,
.ar-award-year,
.ar-award-title,
.ar-step-number,
.ar-blog-category,
.ar-project-category span,
.ar-funfact-item span,
.tp-award-year,
.tp-award-position,
.des-team-item span,
.crp-service-title-sm,
.crp-footer-widget-title,
.ar-footer-widget-title,
.tp-footer-widget-title,
.tp-footer-widget-title-sm,
.tp-offcanvas-title,
.accordion-buttons,
.tp-brand-title,
.tp-brand-item span,
.tp-btn-red-circle-text,
.tp-btn-black-solid,
.tp-btn-border,
.tp-btn-yellow-green span,
.tp-btn-yellow-border span,
.ar-footer-widget-btn,
.back-to-top-btn,
.ar-about-exp-box span,
.ar-step-title-sm,
.ar-category-item a span,
nav ul li a,
.tp-header-8-bar span,
.tp-header-2-bar span,
.tp-header-14-bar-wrap button span {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
}*/

/* ── Body copy — Regular ── */
/*p,
li,
span,
label,
input,
textarea,
select,
blockquote,
.tp-pd-3-overview-text p,
.ar-about-content p,
.ar-step-content span,
.ar-blog-content,
.ar-footer-widget-content p,
.ar-footer-widget-menu ul li a,
.ar-footer-widget-info a,
.ar-copyright-text p,
.ar-copyright-social a,
.accordion-body p,
.tp-offcanvas-contact ul li a,
.tp-offcanvas-social ul li a,
.crp-about-text p,
.crp-service-content p,
.tp-work-content p,
.des-project-top-text p {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
}*/

/* ── Large display numbers — Bold ── */
/*.ar-funfact-item h4,
.ar-about-exp-box h4,
.des-project-total span,
.tp-funfact-number span,
.crp-hero-funfact-item h4,
.tp-about-funcact-item span {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em;
}*/

/* ── Navigation — Medium ── */
/*.tp-header-menu nav ul li > a,
.tp-megamenu-list ul li a,
.tp-submenu li a,
.tp-mobile-menu-active ul li a,
.tp-offcanvas-menu nav ul li a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em;
}

.tp-megamenu-title,
.tp-offcanvas-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}*/

/* ── Size adjustments — Montserrat reads slightly larger
      than Clash Display / Teko at the same px value,
      so we pull the biggest display sizes down slightly ── */

/* H1 hero */
/*h1.tp-section-title-clash-600,
.ar-hero-title,
.crp-hero-title {
    font-size: clamp(36px, 5vw, 60px) !important;
    line-height: 1.1 !important;
}*/

/* H2 section titles */
/*h2.tp-section-title-clash-600,
.tp-section-title-clash,
.studio-award-title-box h3 {
    font-size: clamp(32px, 4vw, 52px) !important;
    line-height: 1.12 !important;
}*/

/* fs-60 utility used throughout */
/*.fs-60 {
    font-size: clamp(28px, 3.5vw, 52px) !important;
}*/

/* fs-84 / fs-140 / fs-200 — pull way down */
/*.fs-84 {
    font-size: clamp(40px, 5.5vw, 68px) !important;
}

.fs-140 {
    font-size: clamp(40px, 6vw, 80px) !important;
}

.fs-200 {
    font-size: clamp(40px, 7vw, 100px) !important;
}*/

/* copyright big text */
/*.tp-copyright-big-text {
    font-size: clamp(40px, 6vw, 90px) !important;
    line-height: 1 !important;
}*/

/* des-about large paragraph */
/*.des-about-text p {
    font-size: clamp(22px, 2.5vw, 36px) !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}*/

/* ar-about-title-sm */
/*.ar-about-title-sm {
    font-size: clamp(20px, 2vw, 28px) !important;
    line-height: 1.3 !important;
}*/

/* step title */
/*.ar-step-title-sm {
    font-size: 16px !important;
    line-height: 1.4 !important;
}*/

/* footer big text */
/*.crp-footer-big-text {
    font-size: clamp(36px, 5vw, 72px) !important;
}*/





/* ========================================
   SRP PRELOADER
======================================== */
.water-fill {
  /* Increased duration to 5s for a better look */
  /* Added 'both' so it stays at the end state if you remove 'alternate' */
  animation: wave 0.7s infinite linear, 
             fill-up 5s infinite ease-out alternate;
}

@keyframes wave {
  0% { x: -400px; }
  100% { x: 0; }
}

@keyframes fill-up {
  0% {
    height: 0;
    y: 120px; /* Start at the bottom of the viewBox */
  }
  100% {
    height: 120px; /* Match the viewBox height */
    y: 0px; /* End at the top */
  }
}