/*
* ===================================================================
*                  SECURISTA CUSTOM STYLESHEET (V FINAL + CALCULATOR FIX 3)
* ===================================================================
* This file contains all custom styles for the Securista website.
* It implements the new, unified color palette for brand consistency.
*/

/*
* STEP 1: DEFINE THE MASTER COLOR PALETTE
* -------------------------------------------------------------------
*/
:root {
  /* --- Primary Blue Hierarchy --- */
  --securista-blue-primary: #0D47A1; /* Darkest Blue */
  --securista-blue-medium: #1976D2;  /* Medium Blue */
  --securista-blue-light: #E3F2FD;   /* Lightest Blue */

  /* --- Strategic Accent Colors --- */
  --accent-amber-highlight: #FFC107;
  --accent-green-success: #2E7D32;
  --accent-red-alert: #C62828;

  /* --- Neutral Foundation --- */
  --neutral-dark-slate: #2D3748;
  --neutral-grey: #6C757D;
  --neutral-light-grey: #DEE2E6;
  --neutral-background: #F7FAFC;
  --neutral-white: #FFFFFF;

  /* --- Font Family --- */
  --default-font: "Inter", sans-serif;
  --heading-font: "Inter", sans-serif;
  --nav-font: "Inter", sans-serif;
}


/*
* STEP 2: APPLY GLOBAL & GENERAL STYLES
* -------------------------------------------------------------------
*/

body {
  font-family: var(--default-font);
  color: var(--neutral-dark-slate);
  background-color: var(--neutral-background);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--neutral-dark-slate);
}

/* --- Links & Active States --- */
a {
  color: var(--securista-blue-medium);
  text-decoration: none;
}

a:hover {
  color: var(--securista-blue-primary);
}

.navmenu {
  font-family: var(--nav-font);
}

.navmenu .active > a,
.navmenu .active > a:hover {
  color: var(--securista-blue-primary) !important;
}

/* --- Buttons --- */
.btn-getstarted,
.btn-get-started {
  background: var(--securista-blue-primary);
  color: var(--neutral-white) !important;
  border: 1px solid var(--securista-blue-primary);
  padding: 10px 25px;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-getstarted:hover,
.btn-get-started:hover {
  background: var(--securista-blue-medium);
  color: var(--neutral-white) !important;
  border-color: var(--securista-blue-medium);
}

.scroll-top {
  background: var(--securista-blue-primary);
}

.scroll-top:hover {
  background: var(--securista-blue-medium);
}

/* --- Header Font Weight --- */
.navmenu a,
.header .btn-getstarted {
    font-weight: 500 !important;
}


/*
* STEP 3: STYLE SPECIFIC SECTIONS ON INDEX.PHP
* -------------------------------------------------------------------
*/

/* === Hero Section === */
#hero .icon-box .icon {
  width: 64px;
  height: 64px;
}
#hero .icon-box .icon i {
  color: var(--securista-blue-medium);
  font-size: 32px;
  transition: 0.3s;
}
#hero .icon-box:hover .icon i {
  color: var(--securista-blue-primary);
}


/* === Stats Section === */
.stats .stats-item span {
  color: var(--securista-blue-primary);
}
.stats-item #stats-sources {
  font-size: 2.5rem;
  color: var(--securista-blue-primary);
}


/* === Services Section (Replaces the "rainbow" palette) === */
.services .service-item {
  background-color: var(--neutral-white);
  border: 1px solid var(--neutral-light-grey);
}
.services .service-item .icon i {
  color: var(--securista-blue-medium);
}
.services .service-item:hover .icon i {
  color: var(--neutral-white);
}
.services .service-item .icon svg path {
  fill: var(--securista-blue-light);
  transition: fill 0.3s;
}
.services .service-item:hover .icon svg path {
  fill: var(--securista-blue-medium);
}
.services .service-item h3 {
  color: var(--neutral-dark-slate) !important;
}
.services .service-item h3 a:hover {
  color: var(--securista-blue-primary);
}


/* === Call-to-Action (Data Access) Section on index.php === */
.call-to-action {
  background-color: var(--securista-blue-primary);
}
.call-to-action h3 {
    color: var(--neutral-white);
}
.call-to-action p {
    color: var(--securista-blue-light);
}
.call-to-action .cta-btn {
  background-color: var(--accent-amber-highlight) !important;
  color: var(--neutral-dark-slate) !important;
  border: 2px solid var(--accent-amber-highlight) !important;
  font-weight: 600;
}
.call-to-action .cta-btn:hover {
  background-color: var(--neutral-white) !important;
  color: var(--securista-blue-primary) !important;
  border-color: var(--neutral-white) !important;
}


/* === Pricing Section === */
.pricing .pricing-item h4 .price {
  color: var(--securista-blue-primary);
}
.pricing .pricing-item ul i.bi-check {
  color: var(--accent-green-success);
}
.pricing .featured {
  border: 2px solid var(--accent-amber-highlight);
  box-shadow: 0 0 25px rgba(255, 193, 7, 0.3);
}
.pricing .featured .buy-btn {
  background: var(--accent-amber-highlight) !important;
  color: var(--neutral-dark-slate) !important;
  border-color: var(--accent-amber-highlight) !important;
  font-weight: 600;
}
.pricing .featured .buy-btn:hover {
    background: var(--neutral-dark-slate) !important;
    color: var(--neutral-white) !important;
    border-color: var(--neutral-dark-slate) !important;
}

.pricing-item h4 .currency { font-size: 1.2rem; }
.pricing-item h4 .period { font-size: 1rem; }
.pricing-item .enterprise-disclaimer { color: var(--neutral-grey); }


/* === FAQ Section === */
.faq .faq-item h3 {
  color: var(--neutral-dark-slate) !important;
  font-weight: 600;
}
.faq .faq-item:hover h3 {
  color: var(--securista-blue-primary) !important;
}
.faq .faq-item.faq-active {
  background: var(--securista-blue-primary);
}
.faq .faq-item.faq-active h3 {
  color: var(--neutral-white) !important;
}
.faq .faq-item .faq-toggle {
  color: var(--securista-blue-medium) !important;
}
.faq .faq-item.faq-active .faq-toggle {
  color: var(--neutral-white) !important;
}
.faq .faq-content p {
    color: var(--neutral-dark-slate);
}
.faq .faq-item.faq-active .faq-content p,
.faq .faq-item.faq-active .faq-content ul li {
    color: var(--neutral-white);
}
.faq-content .bullet-point {
    color: inherit;
    font-size: 0.7em;
    margin-right: 0.5em;
    vertical-align: middle;
}
.faq .faq-item.faq-active .bullet-point {
    background-color: var(--neutral-white);
    border-radius: 50%;
    padding: 0.1em;
    color: transparent;
    display: inline-block;
    line-height: 0.7em;
}


/*
* STEP 4: MODAL & OTHER MISC STYLES
* -------------------------------------------------------------------
*/

/* === Data Access Modal Styles === */
#dataAccessApplicationModal .modal-content {
  border: 1px solid var(--neutral-light-grey);
  background-color: var(--neutral-white);
}
#dataAccessApplicationModal .modal-header,
#dataAccessApplicationModal .modal-footer {
  border-color: var(--neutral-light-grey);
}
#dataAccessApplicationModal .modal-title {
  color: var(--securista-blue-primary);
}
#dataAccessApplicationModal .btn-close-modal {
  background-color: #f0f0f0;
  border: 1px solid var(--neutral-light-grey);
  color: var(--neutral-grey);
}
#dataAccessApplicationModal .btn-close-modal:hover {
    background-color: var(--accent-red-alert);
    border-color: var(--accent-red-alert);
    color: var(--neutral-white);
}
.modal-body .form-control {
    border-color: var(--neutral-light-grey);
    color: var(--neutral-dark-slate);
}
.modal-body .form-control::placeholder {
    color: var(--neutral-grey);
}
.modal-body .text-danger {
  color: var(--accent-red-alert) !important;
}
.modal-body .info-tooltip {
    color: var(--securista-blue-medium);
    border: 1px solid var(--securista-blue-medium);
}
#dataAccessApplicationModal .modal-footer .btn-primary {
  background-color: var(--securista-blue-primary);
  border-color: var(--securista-blue-primary);
  color: var(--neutral-white);
}
#dataAccessApplicationModal .modal-footer .btn-primary:hover {
  background-color: var(--securista-blue-medium);
  border-color: var(--securista-blue-medium);
}
#dataAccessApplicationModal .modal-footer .btn-secondary {
  background-color: var(--neutral-grey);
  border-color: var(--neutral-grey);
  color: var(--neutral-white);
}
#dataAccessApplicationModal .modal-footer .btn-secondary:hover {
  background-color: var(--neutral-dark-slate);
  border-color: var(--neutral-dark-slate);
}

/* Structural Modal Styles */
body.modal-open { overflow: hidden; }
#dataAccessApplicationModal { display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.65); animation: dataAccessFadeInModalBg 0.3s; }
@keyframes dataAccessFadeInModalBg { from { background-color: rgba(0,0,0,0); } to { background-color: rgba(0,0,0,0.65); } }
#dataAccessApplicationModal .modal-dialog.modal-lg { max-width: 990px; margin: 3% auto; pointer-events: none; position:relative; }
#dataAccessApplicationModal .modal-content { padding: 25px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.3); position: relative; animation: dataAccessSlideInModal 0.4s ease-out; width: 100%; display: flex; flex-direction: column; pointer-events: auto; background-clip: padding-box; outline: 0; margin-top: 0; }
@keyframes dataAccessSlideInModal { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#dataAccessApplicationModal .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-top-left-radius: 0; border-top-right-radius: 0; position: relative; }
#dataAccessApplicationModal .modal-title { margin-bottom: 0; line-height: 1.5; font-size: 1.25rem; padding-right: 40px; }
#dataAccessApplicationModal .btn-close-modal { position: absolute; top: 22px; right: 25px; font-size: 24px; font-weight: bold; line-height: 32px; width: 32px; height: 32px; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; z-index: 1060; padding: 0; margin: 0; opacity: 1; text-shadow: none; border-radius: 50%; }
#dataAccessApplicationModal .btn-close-modal:focus { transform: scale(1.1); opacity: 1; }
#dataAccessApplicationModal .modal-body { position: relative; flex: 1 1 auto; padding-top: 1rem; padding-bottom: 1rem; padding-left: 0; padding-right: 15px; max-height: 70vh; overflow-y: auto; }
#dataAccessApplicationModal .modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: .75rem 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
#dataAccessApplicationModal .modal-footer > * { margin: .25rem; }
.modal-body .form-group { margin-bottom: 1rem; }
.modal-body textarea.form-control { min-height: calc(1.5em + .75rem + 2px); }
.modal-body .checkbox-group-vertical label { display: block; margin-bottom: 0.5rem;}
.modal-body .info-tooltip { position: relative; display: inline-block; cursor: help; font-weight: bold; margin-left: 5px; font-size:0.9em; border-radius:50%; width:18px; height:18px; text-align:center; line-height:16px; }
.modal-body .info-tooltip .tooltiptext { visibility: hidden; width: 280px; background-color: #333; color: #fff; text-align: left; border-radius: 6px; padding: 8px; position: absolute; z-index: 1060; bottom: 125%; left: 50%; margin-left: -140px; opacity: 0; transition: opacity 0.3s; font-size: 0.9em; font-weight:normal; }
.modal-body .info-tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }


/*
* STEP 5: STYLE THE 'IN-PLAIN-ENGLISH.PHP' PAGE
* -------------------------------------------------------------------
*/
/* Use a body class like body.in-plain-english-page if .content-section is too generic */
.content-section h1 {
    color: var(--securista-blue-primary);
    margin-bottom: 1.5rem;
}

.content-section h2,
.content-section h3 {
    color: var(--neutral-dark-slate);
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}
.content-section h2 {
    display: flex;
    align-items: center;
}


.content-section p,
.content-section ul li {
    color: var(--neutral-dark-slate);
    line-height: 1.6;
}
.content-section ul {
    padding-left: 1.5em;
    margin-bottom: 1em;
}
.content-section ul li {
    margin-bottom: 0.5em;
}
.content-section .icon {
    fill: var(--securista-blue-medium);
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.5em;
}
.content-section blockquote {
    border-left: 4px solid var(--securista-blue-medium);
    color: var(--neutral-grey);
    background-color: var(--securista-blue-light);
    padding: 1em 1.5em;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1.5em;
    font-style: italic;
}
.content-section blockquote p {
    color: var(--neutral-dark-slate);
    margin-bottom: 0;
}


/*
* STEP 6: STYLE THE FOOTER.PHP
* -------------------------------------------------------------------
*/
.footer .footer-top h4 {
    color: var(--securista-blue-primary);
    font-weight: 600;
    margin-bottom: 1rem;
}
.footer .footer-top p,
.footer .footer-top .footer-about .contact-info p {
    color: var(--neutral-grey);
}
.footer .footer-top .footer-about .contact-info i {
    color: var(--securista-blue-medium);
    margin-top: 4px;
}
.footer .footer-top .logo .sitename {
    color: var(--neutral-dark-slate);
}
.footer .footer-top a {
    color: var(--securista-blue-medium);
}
.footer .footer-top a:hover {
    color: var(--securista-blue-primary);
}

.footer .copyright {
    background-color: var(--securista-blue-primary) !important;
    color: var(--neutral-white) !important;
    padding: 15px 0 !important;
}
.footer .copyright p,
.footer .copyright .sitename,
.footer .copyright span,
.footer .copyright a {
    color: var(--neutral-white) !important;
}
.footer .copyright a:hover {
    color: var(--neutral-light-grey) !important;
}

/*
* STEP 7: STYLE THE 'DATA-BREACH-COST-CALCULATOR.PHP' PAGE
* -------------------------------------------------------------------
*/

#data-breach-cost-calculator-page .content-section {
    background-color: var(--neutral-white);
    padding: 20px 30px 30px 30px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    max-width: 1000px;
    margin: 0 auto 40px auto;
}

#data-breach-cost-calculator-page .content-section h1 {
    color: var(--securista-blue-primary);
    font-size: 2.2em;
    font-weight: 600;
    margin: 0 0 20px 0;
    letter-spacing: 1px;
}

#data-breach-cost-calculator-page .content-section h2 {
    color: var(--neutral-dark-slate);
    font-size: 1.7em;
    font-weight: 600;
    border-bottom: 3px solid var(--securista-blue-medium);
    padding-bottom: 12px;
    margin-top: 20px;
    margin-bottom: 1em;
}

#data-breach-cost-calculator-page .content-section h3 {
    color: var(--neutral-dark-slate);
    font-size: 1.4em;
    font-weight: 600;
    margin-top: 28px;
    margin-bottom: 0.75em;
}

/* --- Tabs --- */
#data-breach-cost-calculator-page .content-section .tabs {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 3px solid var(--securista-blue-medium);
    background-color: var(--neutral-background);
    border-radius: 8px 8px 0 0;
    padding-top: 5px;
}

#data-breach-cost-calculator-page .content-section .tab-button {
    padding: 15px 30px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 18px;
    margin-right: 5px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
    font-weight: 500;
    color: var(--neutral-grey);
}

#data-breach-cost-calculator-page .content-section .tab-button.active {
    background-color: var(--securista-blue-medium);
    color: var(--neutral-white);
    font-weight: bold;
}

#data-breach-cost-calculator-page .content-section .tab-button:hover:not(.active) {
    background-color: var(--securista-blue-light);
    color: var(--securista-blue-primary);
}

#data-breach-cost-calculator-page .content-section .tab-button.active:hover {
    background-color: var(--securista-blue-primary);
}

#data-breach-cost-calculator-page .content-section .calculator-section {
    display: none;
    animation: fadeIn 0.7s ease-out;
}

#data-breach-cost-calculator-page .content-section .calculator-section.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}


/* --- Fieldsets and Form Elements --- */
#data-breach-cost-calculator-page .content-section fieldset {
    border: 1px solid var(--neutral-light-grey);
    padding: 28px;
    margin-bottom: 35px;
    border-radius: 10px;
    background-color: var(--neutral-white);
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

#data-breach-cost-calculator-page .content-section legend {
    font-weight: 700;
    color: var(--securista-blue-primary);
    padding: 0 15px;
    font-size: 1.25em;
}

#data-breach-cost-calculator-page .content-section label {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--neutral-dark-slate);
}

#data-breach-cost-calculator-page .content-section select,
#data-breach-cost-calculator-page .content-section input[type="number"],
#data-breach-cost-calculator-page .content-section input[type="text"] {
    width: 100%;
    padding: 15px;
    margin-bottom: 22px;
    border: 1px solid var(--neutral-light-grey);
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1em;
    background-color: var(--neutral-white);
    color: var(--neutral-dark-slate);
    transition: border-color 0.2s, box-shadow 0.2s;
}
#data-breach-cost-calculator-page .content-section select::placeholder,
#data-breach-cost-calculator-page .content-section input[type="number"]::placeholder,
#data-breach-cost-calculator-page .content-section input[type="text"]::placeholder {
    color: var(--neutral-grey);
}

#data-breach-cost-calculator-page .content-section select:focus,
#data-breach-cost-calculator-page .content-section input[type="number"]:focus,
#data-breach-cost-calculator-page .content-section input[type="text"]:focus {
    border-color: var(--securista-blue-medium);
    box-shadow: 0 0 0 0.2rem var(--securista-blue-light);
    outline: none;
}

#data-breach-cost-calculator-page .content-section input[type="checkbox"],
#data-breach-cost-calculator-page .content-section input[type="radio"] {
    margin-right: 10px;
    vertical-align: middle;
    width: auto;
    transform: scale(1.15);
    accent-color: var(--securista-blue-medium);
}

#data-breach-cost-calculator-page .content-section .checkbox-group label,
#data-breach-cost-calculator-page .content-section .radio-group label {
    display: inline-flex;
    align-items: center;
    margin-right: 25px;
    font-weight: normal;
    color: var(--neutral-dark-slate);
    line-height: 1.8;
    cursor: pointer;
}

#data-breach-cost-calculator-page .content-section .checkbox-group br { display: none; }

/* --- Calculate Button --- */
#data-breach-cost-calculator-page .content-section button[type="button"] {
    background-color: var(--accent-green-success);
    color: var(--neutral-white);
    padding: 16px 35px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.3s, transform 0.1s;
    display: block;
    margin: 35px auto 15px auto;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

#data-breach-cost-calculator-page .content-section button[type="button"]:hover {
    background-color: var(--accent-green-success);
    filter: brightness(90%);
    transform: translateY(-2px);
}

#data-breach-cost-calculator-page .content-section button[type="button"]:active {
    transform: translateY(0px) scale(0.98);
}

/* --- Results Area --- */
#data-breach-cost-calculator-page .content-section .result {
    margin-top: 30px;
    padding: 28px;
    background-color: var(--securista-blue-light);
    border: 2px solid var(--securista-blue-medium);
    border-radius: 10px;
    animation: fadeInResult 0.5s;
    text-align: center;
}

@keyframes fadeInResult {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

#data-breach-cost-calculator-page .content-section .result h3 {
    margin-top: 0;
    color: var(--securista-blue-primary);
    text-align: center;
    font-size: 1.6em;
    margin-bottom: 18px;
}

#data-breach-cost-calculator-page .content-section .result p {
    margin-bottom: 15px;
    font-size: 1.2em;
    color: var(--neutral-dark-slate);
}

#data-breach-cost-calculator-page .content-section .result .cost-range {
    font-weight: 700;
    font-size: 1.9em;
    color: var(--securista-blue-primary);
    display: block;
    text-align: center;
    margin-bottom: 22px;
}
#data-breach-cost-calculator-page .content-section .result .cost-range span[style*="font-size:1em"] {
    font-size: 1em !important;
    display: inline !important;
}

#data-breach-cost-calculator-page .content-section .result .impact-comparison {
    background-color: var(--accent-green-success);
    filter: brightness(180%);
    padding: 18px;
    border-radius: 8px;
    margin-top: 22px;
    border: 1px solid var(--accent-green-success);
}
#data-breach-cost-calculator-page .content-section .result .impact-comparison p {
    color: var(--neutral-dark-slate) !important;
    margin-bottom: 10px;
    font-size: 1.15em;
}
#data-breach-cost-calculator-page .content-section .result .impact-comparison strong {
    color: var(--neutral-dark-slate) !important;
    font-size: 1.2em;
}

/* --- Disclaimer Link --- */
#data-breach-cost-calculator-page .content-section .disclaimer-link {
    display: block;
    margin-top: 40px;
    text-align: center;
}

#data-breach-cost-calculator-page .content-section .disclaimer-link a {
    color: var(--securista-blue-medium);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05em;
}

#data-breach-cost-calculator-page .content-section .disclaimer-link a:hover {
    text-decoration: underline;
    color: var(--securista-blue-primary);
}

/* --- Info Tooltip --- */
#data-breach-cost-calculator-page .content-section .info-tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    color: var(--securista-blue-medium);
    font-weight: bold;
    margin-left: 5px;
    font-size: 0.9em;
    background-color: var(--securista-blue-light);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}

#data-breach-cost-calculator-page .content-section .info-tooltip .tooltiptext {
    visibility: hidden;
    width: 340px;
    background-color: var(--neutral-dark-slate);
    color: var(--neutral-white);
    text-align: left;
    border-radius: 8px;
    padding: 15px;
    position: absolute;
    z-index: 101;
    bottom: 145%;
    left: 50%;
    margin-left: -170px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.95em;
    font-weight: normal;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#data-breach-cost-calculator-page .content-section .info-tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* --- Cost Breakdown List --- */
#data-breach-cost-calculator-page .content-section .cost-breakdown {
    margin-top: 28px;
    text-align: left;
}

#data-breach-cost-calculator-page .content-section .cost-breakdown h4 {
    font-size: 1.35em;
    color: var(--securista-blue-primary);
    margin-bottom: 12px;
}

#data-breach-cost-calculator-page .content-section .cost-breakdown ul {
    list-style-type: none;
    padding-left: 0;
}

#data-breach-cost-calculator-page .content-section .cost-breakdown li {
    padding: 12px 0;
    border-bottom: 1px solid var(--neutral-light-grey);
    font-size: 1.1em;
    color: var(--neutral-dark-slate);
}

#data-breach-cost-calculator-page .content-section .cost-breakdown li:last-child {
    border-bottom: none;
}

#data-breach-cost-calculator-page .content-section .cost-breakdown strong {
    color: var(--neutral-dark-slate);
    font-weight: 600;
}

/* --- Loader Spinner --- */
#data-breach-cost-calculator-page .content-section #loader {
    display: none;
    text-align: center;
    padding: 28px;
}
#data-breach-cost-calculator-page .content-section #loader p {
    color: var(--neutral-grey);
}

#data-breach-cost-calculator-page .content-section #loader .spinner {
    border: 7px solid var(--neutral-light-grey);
    border-top: 7px solid var(--securista-blue-medium);
    border-radius: 50%;
    width: 55px;
    height: 55px;
    animation: spin 1s linear infinite;
    margin: 0 auto 18px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Disclaimer Modal Styles --- */
#disclaimerModal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.65);
    animation: fadeInModalBg 0.3s;
}

#disclaimerModal .modal-content {
    background-color: var(--neutral-white);
    margin: 5% auto;
    padding: 25px;
    border: 1px solid var(--neutral-light-grey);
    width: 90%;
    max-width: 990px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    position: relative;
    animation: slideInModal 0.4s ease-out;
}

#disclaimerModal .modal-close {
    color: var(--neutral-grey);
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    line-height: 32px;
    width: 32px;
    height: 32px;
    text-align: center;
    background-color: #f0f0f0;
    border: 1px solid var(--neutral-light-grey);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    z-index: 10;
}

#disclaimerModal .modal-close:hover,
#disclaimerModal .modal-close:focus {
    color: var(--neutral-white);
    background-color: var(--accent-red-alert);
    border-color: var(--accent-red-alert);
    text-decoration: none;
    transform: scale(1.1);
}

#disclaimerModal .modal-body {
    max-height: 75vh;
    overflow-y: auto;
    padding-right: 15px;
}

#disclaimerModal .modal-body h2 {
    margin-top: 0;
    color: var(--securista-blue-primary);
    font-size: 1.8em;
    border-bottom: 2px solid var(--securista-blue-medium);
    padding-bottom: 10px;
    margin-bottom: 1em;
}

#disclaimerModal .modal-body h3 {
    color: var(--neutral-dark-slate);
    font-size: 1.3em;
    margin-top: 20px;
    margin-bottom: 10px;
}

#disclaimerModal .modal-body p,
#disclaimerModal .modal-body li {
    font-size: 1.05em;
    margin-bottom: 12px;
    line-height: 1.6;
    color: var(--neutral-dark-slate);
}

/* === STYLES FOR INTRODUCTORY AND HIGHLIGHTED TEXT IN DISCLAIMER MODAL === */
#disclaimerModal .modal-body p.emphasis {
    /* font-style: italic !important; -- Removed as per request */
    /* color: var(--securista-blue-medium) !important; -- Removed as per request, will inherit default p color */
    /* Retain any other desired styles for p.emphasis if needed, e.g., margin, padding */
}

#disclaimerModal .modal-body p.emphasis strong {
    color: var(--securista-blue-primary) !important; /* "business survival challenges" style */
    font-style: normal !important;
    font-weight: 700 !important;
}

#disclaimerModal .modal-body .highlight-words {
    color: var(--securista-blue-medium); /* For "if", "when", "how profoundly..." */
    font-style: normal; /* Ensure not italic */
    font-weight: 600; /* Make it stand out a bit, like medium weight */
}
/* === END OF DISCLAIMER MODAL TEXT STYLES === */

#disclaimerModal .modal-body strong:not(p.emphasis strong) {
    color: var(--neutral-dark-slate) !important; /* All other strong tags are dark slate */
    font-weight: 600;
}

#disclaimerModal .modal-body ul,
#disclaimerModal .modal-body ol {
    padding-left: 25px;
}

#disclaimerModal .modal-body .final-cta {
    font-weight: bold;
    color: var(--accent-green-success);
    margin-top: 20px;
    font-size: 1.1em;
}

#disclaimerModal .modal-body .formula-step {
    margin-left: 20px;
    margin-bottom: 12px;
}

#disclaimerModal .modal-body .formula-step-title {
    font-weight: bold;
    color: var(--neutral-dark-slate);
    display: block;
    margin-bottom: 5px;
}

#disclaimerModal .modal-body .example-text {
    font-style: italic;
    color: var(--neutral-grey);
    font-size: 0.95em;
    margin-left: 15px;
}

@keyframes fadeInModalBg { from { background-color: rgba(0,0,0,0); } to { background-color: rgba(0,0,0,0.65); } }
@keyframes slideInModal { from { top: -120px; opacity: 0; } to { top: 0; opacity: 1; } }


/* End of custom.css */

/*
 * ===================================================================
 *         STYLES for Service Details Page (V5 - Final Palette & Button Refinement)
 * ===================================================================
 * This file styles the service-details.php page, particularly
 * the Swiper component, using the new Securista color palette.
 * It includes refined styles for buttons within slides.
 */

/* --- GENERAL SWIPER & SLIDE STYLING --- */
.fullscreen-swiper {
  height: 75vh; /* Or adjust to preferred height */
  width: 100%;
}

.subject-slide { /* This is the main container for each service slide */
  height: 100%;
  display: block;
  text-align: left;
  padding: 3rem 4rem; /* Consider 2.5rem 3rem for slightly less padding if needed */
  background-color: var(--neutral-background) !important; /* Using light page background for slide */
  border: 1px solid var(--neutral-light-grey); /* Adding a subtle border */
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Softened shadow */
}

/* --- SWIPER NAVIGATION & PAGINATION --- */
.swiper-button-prev,
.swiper-button-next {
  color: var(--securista-blue-primary) !important;
  --swiper-navigation-size: 28px; /* Or 32px for slightly larger arrows */
}

.swiper-pagination-bullet {
  background: var(--neutral-grey); /* Using neutral grey for inactive dots */
  opacity: 0.6;
}

.swiper-pagination-bullet-active {
  background: var(--securista-blue-primary); /* Primary blue for active dot */
  opacity: 1;
}

/* --- SLIDE CONTENT: TEXT & ICON STYLING --- */
.subject-slide h2 { /* Targeting the main heading in each slide */
  color: var(--securista-blue-primary);
  margin-bottom: 1.5rem; /* Or 1.25rem */
  font-size: 1.75rem; /* Or 2rem, adjust as needed */
}

.subject-slide .subject-content p {
  font-size: 1rem; /* Or 0.95rem if text feels too large */
  line-height: 1.6;
  color: var(--neutral-dark-slate);
  margin-bottom: 1rem; /* Consistent bottom margin for paragraphs */
}

.subject-slide .subject-content ul {
  list-style: none;
  padding-left: 0;
  margin-top: 1.5rem; /* Or 1.25rem */
  margin-bottom: 1.5rem; /* Added for spacing before button */
}

.subject-slide .subject-content ul li {
  margin-bottom: 0.75rem; /* Slightly increased spacing */
  display: flex;
  align-items: center;
  color: var(--neutral-dark-slate);
  font-size: 0.95rem; /* Slightly smaller list item text */
}

.subject-slide .subject-content ul li .bi-check2-all {
  margin-right: 10px;
  color: var(--accent-green-success); /* Explicitly making checkmarks green */
  font-size: 1.2em; /* Make checkmarks a bit larger */
}

/* Styles for "Coming Soon" text and the "View Pricing" button (if not part of btn-get-started) */
.subject-slide .subject-content span[style*="font-style: italic"] {
    display: inline-block;
    margin-top: 10px;
    color: var(--neutral-grey);
    font-size: 0.9em;
}
/* If "View Pricing" is a link but not styled as a button, it inherits default link styles */
/* If it *is* a .btn-get-started, the rule below handles it */


/* --- STYLING FOR "GET STARTED" / "VIEW PRICING" BUTTONS WITHIN SERVICE SLIDES --- */
.subject-slide .subject-content .btn-get-started {
  /*
    Background color (var(--securista-blue-primary)) and other structural button properties
    (padding, border-radius, font-weight, text-decoration, etc.)
    are inherited from the global .btn-get-started rule in custom.css.
  */
  color: var(--securista-blue-light) !important; /* Lighter blue text */
  padding: 0.6rem 1.2rem; /* Custom padding for slide buttons if needed */
  font-weight: 500; /* Custom font-weight */
  margin-top: 1rem; /* Ensure consistent spacing above the button */
}

.subject-slide .subject-content .btn-get-started:hover {
  /*
    Background color on hover (var(--securista-blue-medium))
    is inherited from the global .btn-get-started:hover rule in custom.css.
  */
  color: var(--neutral-white) !important; /* Text must be white for contrast on medium blue background */
}


/* --- ICON CONTAINER & SVG/ICON ELEMENTS --- */
.subject-slide .icon {
  margin-bottom: 1.5rem; /* Or 1.25rem */
  width: 90px; /* Slightly smaller for a more refined look */
  height: 90px;
  position: relative;
}

.subject-slide .icon svg { /* The decorative bubble path */
  position: absolute;
  top: 0;
  left: 0;
  transition: fill 0.4s ease;
  z-index: 1; /* Sits behind the icon */
  fill: var(--securista-blue-light); /* Default light blue fill for the bubble */
}

.subject-slide .icon i { /* The Material Icon */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px; /* Adjusted to new icon container size */
  transition: color 0.4s ease;
  z-index: 2; /* Sits ON TOP of the bubble */
  color: var(--securista-blue-medium); /* Default icon color: medium blue */
}

/*
 * --- HOVER EFFECT FOR ICONS (Unified) ---
*/
.subject-slide .icon:hover svg path {
  fill: var(--securista-blue-medium); /* Bubble changes to medium blue on hover */
}

.subject-slide .icon:hover i {
  color: var(--neutral-white) !important; /* Icon itself changes to white on hover */
}

/*
 * --- SPECIFIC SLIDE TYPE HIGHLIGHTS (Optional - using accents) ---
 * Example: For the "Intelligence" slide, add class 'slide-highlight-amber'
 * to the <div class="swiper-slide ..."> element in service-details.php.
 */

/* Example: Highlight for Amber Accent */
.subject-slide.slide-highlight-amber .icon svg path {
  fill: var(--accent-amber-highlight); /* Amber bubble by default for this slide */
}
.subject-slide.slide-highlight-amber .icon i {
  color: var(--neutral-dark-slate); /* Dark icon for contrast on amber */
}
.subject-slide.slide-highlight-amber .icon:hover svg path {
  fill: var(--securista-blue-primary); /* On hover, revert to primary blue for consistency */
}
.subject-slide.slide-highlight-amber .icon:hover i {
  color: var(--neutral-white) !important;
}
.subject-slide.slide-highlight-amber h2 {
  color: var(--accent-amber-highlight); /* Amber heading for this slide */
}
/* If the button in the amber slide needs different styling: */
.subject-slide.slide-highlight-amber .subject-content .btn-get-started {
    background-color: var(--accent-amber-highlight);
    color: var(--neutral-dark-slate) !important;
    border: 1px solid var(--accent-amber-highlight); /* Optional border */
}
.subject-slide.slide-highlight-amber .subject-content .btn-get-started:hover {
    background-color: var(--neutral-dark-slate);
    color: var(--neutral-white) !important;
    border-color: var(--neutral-dark-slate);
}

/* End of service-details.css */



/* Custom styles for Web Detect Cards to reduce vertical space (even more) */

.web-detect-card .card-body {
  /* Significantly reducing default Bootstrap card-body vertical padding */
  padding-top: 0.6rem; /* Reduced from 0.8rem */
  padding-bottom: 0.6rem; /* Reduced from 0.8rem */
  /* Keeping horizontal padding default or adjust as needed */
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.web-detect-card .detect-header {
  /* Ensure vertical alignment of icon, text, and button.
     Removed explicit padding-top/bottom here to rely on child elements. */
  align-items: center;
  margin-bottom: 0; /* Ensure no extra margin below the header itself */
}

.web-detect-card .detect-info {
  /* Ensure no extra vertical space around icon+text block.
     Use flex to keep icon and text aligned compactly. */
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.web-detect-card .detect-icon.display-5 {
  /* Keep icon size, but ensure its container is as compact as possible */
  font-size: 2rem !important; /* Keeping this size as it's already compact */
  line-height: 1; /* Tighter line height */
  margin: 0 !important; /* Remove all default margins */
  display: flex; /* Use flex to center the icon vertically if its container has height */
  align-items: center; /* Center icon vertically */
  justify-content: center; /* Center icon horizontally */
  min-width: 2.2rem; /* Ensure consistent spacing for all icons */
  min-height: 2.2rem; /* Ensure consistent spacing for all icons */
  padding-right: 0.5rem; /* Add a small padding to the right for separation from text */
}

.web-detect-card .detect-text {
  /* Make this flex column to tightly pack 'count', 'title', 'subtext' */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically align text if there's remaining space */
  line-height: 1.1; /* General line height for all text within this div */
}

.web-detect-card .detect-text .count {
  margin: 0 !important; /* Remove all margins */
  font-size: 0.75rem; /* Slightly smaller for compactness */
  line-height: 1;
}

.web-detect-card .detect-text .title {
  margin: 0 !important; /* Remove all margins */
  font-size: 1.1rem; /* Slightly smaller than fs-5 for compactness */
  line-height: 1.1;
}

.web-detect-card .detect-text .detect-subtext {
  margin: 0 !important; /* Remove all margins */
  font-size: 0.8rem; /* Slightly smaller for compactness */
  line-height: 1.1;
}

/* Adjust button styling for compactness */
.web-detect-card .detect-header .btn {
  align-self: center; /* Align button vertically with the detect-info block */
  padding: 0.3rem 0.8rem; /* Reduced button padding */
  font-size: 0.85rem; /* Slightly smaller button text */
  margin-left: auto; /* Push button to the right */
}

/* Adjust spacing for the 'View previously added' button and the collapsed list */
.web-detect-card .expand-btn {
  margin-top: 0.4rem !important; /* Reduced from 0.5rem */
  padding-top: 0.1rem; /* Adjust internal padding */
  padding-bottom: 0.1rem;
  font-size: 0.85rem; /* Make expand text slightly smaller */
}

.web-detect-card .collapse {
  /* Target the collapse content directly for tighter spacing */
  margin-top: 0.2rem !important; /* Reduced from 0.25rem */
}

.web-detect-card .collapse .mt-2 { /* The div inside collapse has mt-2 by default (0.75rem) */
  margin-top: 0.4rem !important; /* Reduced from 0.5rem */
}

.web-detect-card .list-group-item {
  padding-top: 0.3rem; /* Reduced from 0.4rem */
  padding-bottom: 0.3rem; /* Reduced from 0.4rem */
  font-size: 0.9rem; /* Slightly smaller text for list items */
}

.web-detect-card .list-group-item .btn {
  padding: 0.1rem 0.3rem; /* Smaller padding for trash button */
  font-size: 0.7rem; /* Smaller font for trash icon */
}

/* CSS for Contact Email Link Highlight (FORCEFUL VERSION) */
@keyframes pulse-highlight {
  0% {
      background-color: rgba(0, 123, 255, 0);
      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
      transform: scale(1);
  }
  50% {
      background-color: rgba(0, 123, 255, 0.2); /* More visible background */
      box-shadow: 0 0 15px 5px rgba(0, 123, 255, 0.5); /* More visible glow */
      transform: scale(1.03); /* Add a slight "bump" effect */
  }
  100% {
      background-color: rgba(0, 123, 255, 0);
      box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
      transform: scale(1);
  }
}

/* Use a more specific selector and !important to override other styles */
body .footer #contact-email-container.highlight-email {
  animation: pulse-highlight 1.5s ease-out 2 !important; /* Apply animation, 2 iterations, with !important */
  border-radius: 8px;
  /* Padding is crucial to make the background-color visible */
  padding: 4px 8px;
  /* Negative margin to prevent layout shift from the padding */
  margin: -4px -8px;
  display: inline-block;
}

/*
* ===================================================================
*                      FREE SEARCH SECTION STYLES
* ===================================================================
*/

/* Free Search Section Layout - Following Securista patterns */
.free-search-section {
  /* Use same padding as other sections, let light-background class handle bg */
  padding: 50px 0;     /* Reduce vertical padding */
  margin: 0;
}

.free-search-card {
  background: var(--neutral-white);
  border-radius: 8px;  /* Match Securista's rounded corners */
  padding: 35px 40px;  /* Less vertical padding, more horizontal */
  box-shadow: 0 4px 15px rgba(13, 71, 161, 0.08);  /* Subtle shadow like other cards */
  text-align: center;
  max-width: 800px;    /* Wider max-width for better space utilization */
  margin: 0 auto;
  border: 1px solid var(--neutral-light-grey);
}

/* Free Search Typography - Match other section titles */
.search-title {
  font-size: 2rem;     /* Standard h2 size */
  font-weight: 700;
  color: var(--securista-blue-primary);
  margin-bottom: 15px; /* Further reduce spacing */
  font-family: var(--heading-font);
}

/* Form Styling - More compact */
.search-input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;  /* Further reduce spacing */
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.search-input {
  flex: 1;
  min-width: 260px;      /* Slightly smaller */
  padding: 12px 16px;    /* More compact padding */
  border: 2px solid var(--neutral-light-grey);
  border-radius: 6px;    /* Match Securista form elements */
  font-size: 16px;
  font-family: var(--default-font);
  transition: all 0.3s ease;
  background: var(--neutral-white);
  color: var(--neutral-dark-slate);
}

.search-input:focus {
  outline: none;
  border-color: var(--securista-blue-primary);
  box-shadow: 0 0 0 2px rgba(13, 71, 161, 0.1);  /* Smaller focus shadow */
  background: var(--neutral-white);
}

.search-input::placeholder {
  color: var(--neutral-grey);
}

.search-btn {
  padding: 12px 24px;    /* Match input padding height */
  background: var(--securista-blue-primary);  /* Remove gradient, use solid color */
  color: var(--neutral-white);
  border: 1px solid var(--securista-blue-primary);  /* Add border like other buttons */
  border-radius: 6px;    /* Match input radius */
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 140px;      /* Smaller button */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: var(--default-font);
}

.search-btn:hover {
  background: var(--securista-blue-medium);  /* Simple hover like other buttons */
  border-color: var(--securista-blue-medium);
  transform: none;       /* Remove lift effect */
  box-shadow: none;      /* Remove fancy shadows */
}

.search-btn:active {
  transform: translateY(0);
}

.search-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Description Styling - More compact */
.search-description {
  margin-bottom: 12px;  /* Further reduce spacing */
}

.search-description .primary-text {
  font-size: 1.1rem;    /* Smaller text */
  color: var(--neutral-dark-slate);
  margin-bottom: 3px;   /* Less spacing */
  font-weight: 500;
}

.search-description .secondary-text {
  font-size: 0.9rem;    /* Smaller text */
  color: var(--neutral-grey);
  margin: 0;
}

/* Results Styling */
.search-results {
  margin-top: 30px;
  padding: 25px;
  border-radius: 12px;
  text-align: left;
  font-size: 1rem;
  line-height: 1.6;
  animation: fadeIn 0.4s ease-in-out;
}

.search-results.found {
  background: linear-gradient(135deg, #fdeaea 0%, #fce8e8 100%);
  border: 1px solid var(--accent-red-alert);
  color: var(--accent-red-alert);
}

.search-results.clear {
  background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
  border: 1px solid var(--accent-green-success);
  color: var(--accent-green-success);
}

.search-results h4 {
  margin: 0 0 15px 0;
  font-weight: 600;
  font-size: 1.1rem;
}

.search-results p {
  margin: 0 0 10px 0;
}

.search-results ul {
  margin: 15px 0 0 20px;
  padding: 0;
}

.search-results ul li {
  margin-bottom: 8px;
}

.search-results a {
  color: var(--securista-blue-primary);
  text-decoration: underline;
  font-weight: 500;
}

.search-results a:hover {
  color: var(--securista-blue-medium);
}

/* Rate Limit Notice */
.rate-limit-notice {
  margin-top: 25px;
  padding: 20px;
  background: linear-gradient(135deg, #fff8e6 0%, #fff4d6 100%);
  border: 1px solid var(--accent-amber-highlight);
  border-radius: 12px;
  color: #b8860b;
  text-align: center;
  animation: fadeIn 0.4s ease-in-out;
}

.rate-limit-notice strong {
  color: #996515;
}

.rate-limit-notice a {
  color: var(--securista-blue-primary);
  text-decoration: underline;
  font-weight: 500;
}

.rate-limit-notice a:hover {
  color: var(--securista-blue-medium);
}

/* Hero Section Button Updates */
.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Ensure both hero buttons have identical styling - override any conflicts */
.hero .btn-get-started,
.hero .btn-get-started#quick-email-check {
  /* Use exactly the same styling as defined in main.css for .hero .btn-get-started */
  color: var(--contrast-color) !important;
  background: var(--accent-color) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
  padding: 10px 25px !important;
  border-radius: 5px !important;
  transition: 0.5s !important;
  margin-top: 0 !important; /* Remove the margin-top: 30px from main.css to keep them aligned */
  border: none !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.hero .btn-get-started:hover,
.hero .btn-get-started#quick-email-check:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%) !important;
  color: var(--contrast-color) !important;
}

/* Highlight Animation for Free Search Section */
.free-search-section.highlight {
  animation: highlight-pulse 2s ease-in-out;
}

@keyframes highlight-pulse {
  0% { 
    box-shadow: inset 0 0 0 0 rgba(13, 71, 161, 0.2); 
  }
  50% { 
    box-shadow: inset 0 0 0 10px rgba(13, 71, 161, 0.1); 
  }
  100% { 
    box-shadow: inset 0 0 0 0 rgba(13, 71, 161, 0.2); 
  }
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Responsive Design - Optimized for wider layout */
@media (max-width: 768px) {
  .free-search-section {
    padding: 40px 0;    /* Even less padding on mobile */
  }
  
  .free-search-card {
    padding: 30px 25px;  /* Balanced padding for mobile */
    margin: 0 15px;
    max-width: 95%;     /* Use more screen width on mobile */
  }
  
  .search-title {
    font-size: 1.7rem;   /* Slightly smaller */
    margin-bottom: 15px; /* Less spacing */
  }
  
  .search-input-group {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 12px; /* Less spacing */
  }
  
  .search-input {
    min-width: auto;
    margin-bottom: 10px; /* Less spacing */
  }
  
  .search-btn {
    width: 100%;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 15px;
  }
  
  .hero-buttons .btn-get-started {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
  
  .search-description .primary-text {
    font-size: 1rem;     /* Smaller on mobile */
  }
  
  .search-description .secondary-text {
    font-size: 0.85rem;  /* Smaller on mobile */
  }
}

@media (max-width: 480px) {
  .free-search-card {
    padding: 25px 15px;  /* Even more compact */
  }
  
  .search-title {
    font-size: 1.5rem;   /* Smaller title */
  }
  
  .search-input, .search-btn {
    padding: 10px 16px;  /* Match compact styling */
    font-size: 15px;
  }
}