/* -------------------------------------------------
   FinArg Corporate Theme
   Author: FinArg Design Team
   Description: Responsive, modular stylesheet that
   complements Bootstrap 5 for a vibrant corporate
   site with block-based layout & morphing flair
--------------------------------------------------*/

/* ---------- CSS VARIABLES & THEME ---------- */
:root{
    /* Typography */
    --ff-heading:"Space Grotesk",sans-serif;
    --ff-body:"DM Sans",sans-serif;

    /* Tetradic palette */
    --clr-primary:#1e88e5;         /* Blue */
    --clr-primary-dark:#1565c0;
    --clr-secondary:#d81b60;       /* Magenta */
    --clr-secondary-dark:#ad1457;
    --clr-tertiary:#fdd835;        /* Amber */
    --clr-tertiary-dark:#e6b800;
    --clr-quaternary:#43a047;      /* Green */
    --clr-quaternary-dark:#2e7d32;

    /* Neutrals */
    --clr-light:#ffffff;
    --clr-dark:#121212;
    --clr-muted:#6c757d;
    --clr-glass-bg:rgba(255,255,255,.12);
    --clr-overlay:rgba(0,0,0,.55);

    /* Gradients */
    --grad-primary:linear-gradient(135deg,var(--clr-primary),var(--clr-secondary));
    --grad-alt:linear-gradient(135deg,var(--clr-tertiary),var(--clr-quaternary));

    /* Shadows & Radius */
    --shadow-sm:0 2px 8px rgba(0,0,0,.05);
    --shadow-md:0 4px 14px rgba(0,0,0,.08);
    --radius:12px;

    /* Transitions */
    --ts:all .3s ease;
}

/* ---------- GLOBAL RESETS ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    font-family:var(--ff-body);
    color:var(--clr-dark);
    line-height:1.6;
    background-color:#fafafa;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--ff-heading);
    font-weight:700;
    line-height:1.15;
}
p{margin-bottom:1rem;color:var(--clr-dark);}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:var(--clr-primary);transition:var(--ts);}
a:hover,a:focus{color:var(--clr-secondary-dark);}

/* ---------- UTILITIES ---------- */
.section-padding{padding:4rem 0;}
.text-muted{color:var(--clr-muted)!important;}
.read-more{
    font-weight:500;
    position:relative;
    padding-right:1.25rem;
}
.read-more::after{
    content:"→";
    position:absolute;
    right:0;
    top:0;
    transition:var(--ts);
}
.read-more:hover::after{transform:translateX(4px);}

.bg-grad-primary{background:var(--grad-primary);}
.bg-grad-alt{background:var(--grad-alt);}
.bg-glass{background:var(--clr-glass-bg);backdrop-filter:blur(8px);}

.pt-header-offset{padding-top:100px;} /* for privacy & terms */

/* ---------- BUTTONS ---------- */
.btn,
button,
input[type="submit"]{
    font-family:var(--ff-heading);
    font-weight:600;
    border:none;
    border-radius:var(--radius);
    padding:.75rem 2rem;
    transition:var(--ts);
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.btn-primary{background:var(--clr-primary);color:var(--clr-light);}
.btn-primary:hover,.btn-primary:focus{background:var(--clr-primary-dark);color:var(--clr-light);}
.btn-secondary{background:var(--clr-secondary);color:var(--clr-light);}
.btn-secondary:hover,.btn-secondary:focus{background:var(--clr-secondary-dark);}
.btn-outline-primary{
    background:transparent;border:2px solid var(--clr-primary);color:var(--clr-primary);
}
.btn-outline-primary:hover,.btn-outline-primary:focus{
    background:var(--clr-primary);color:var(--clr-light);
}

/* ---------- NAVBAR ---------- */
.navbar{box-shadow:var(--shadow-sm);}
.nav-link{font-weight:500;color:var(--clr-dark)!important;}
.nav-link:hover,.nav-link:focus{color:var(--clr-primary)!important;}

/* ---------- HERO ---------- */
#hero{
    position:relative;
    color:var(--clr-light);
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6rem 1rem;
    background-size:cover;
    background-repeat:no-repeat;
}
#hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--clr-overlay);
}
#hero > *{position:relative;z-index:1;}
#hero h1{font-size:clamp(2.25rem,5vw,3.5rem);margin-bottom:1rem;text-shadow:0 2px 4px rgba(0,0,0,.45);}
#hero p{font-size:1.125rem;max-width:45rem;margin-inline:auto 2rem;}

/* ---------- MORPHING ANIMATION ---------- */
@keyframes morph{
    0%,100%{border-radius:42% 58% 65% 35% / 42% 35% 65% 58%;}
    25%{border-radius:58% 42% 35% 65% / 35% 42% 58% 65%;}
    50%{border-radius:35% 65% 58% 42% / 65% 58% 42% 35%;}
    75%{border-radius:65% 35% 42% 58% / 58% 65% 35% 42%;}
}
.morph{
    animation:morph 12s ease-in-out infinite alternate;
}

/* ---------- CARD SYSTEM ---------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:#fff;
    border:none;
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    transition:transform .25s ease,box-shadow .25s ease;
}
.card:hover,
.item:hover,
.testimonial:hover,
.team-member:hover,
.product-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
}
.image-container{
    width:100%;
    height:220px;
    overflow:hidden;
    border-top-left-radius:var(--radius);
    border-top-right-radius:var(--radius);
}
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}

/* ---------- FEATURES ---------- */
#features .card h3{color:var(--clr-primary);}

/* ---------- PORTFOLIO ---------- */
#portfolio .card-content{padding:1.25rem;}

/* ---------- EVENTS CALENDAR ---------- */
#events{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}
#events li{border-bottom:1px solid rgba(255,255,255,.15)!important;}

/* ---------- PRICING ---------- */
#pricing .card-header{
    font-family:var(--ff-heading);
    font-size:1.25rem;
}
#pricing .card{
    border-top:4px solid var(--clr-primary);
}
#pricing .card.border-primary{border-top-color:var(--clr-secondary);}

/* ---------- GALLERY ---------- */
#gallery .carousel-item img{
    aspect-ratio:16/9;
    object-fit:cover;
}

/* ---------- COMMUNITY ---------- */
#community{background:#fff;}

/* ---------- BLOG ---------- */
#blog .card a.stretched-link{color:var(--clr-secondary);}
#blog .card a.stretched-link:hover{color:var(--clr-secondary-dark);text-decoration:underline;}

/* ---------- CONTACT ---------- */
#contact form .form-control{
    border-radius:var(--radius);
    border:1px solid var(--clr-light);
}
#contact .form-control:focus{border-color:var(--clr-tertiary);box-shadow:0 0 0 .25rem rgba(253,216,53,.25);}
#contact ::placeholder{color:#d0d0d0;}

/* ---------- FOOTER ---------- */
footer{
    font-size:.9375rem;
    color:var(--clr-light);
}
footer a{color:#d1d1d1;}
footer a:hover{color:var(--clr-light);}
footer h5{font-family:var(--ff-heading);font-size:1.125rem;margin-bottom:.75rem;}
footer .social-link{
    display:inline-block;
    margin-right:.75rem;
    font-weight:600;
    transition:var(--ts);
}
footer .social-link:hover{color:var(--clr-tertiary);}

/* ---------- SUCCESS PAGE ---------- */
.page-success{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    text-align:center;
    padding:2rem;
}
.page-success h1{color:var(--clr-primary);}
.page-success p{max-width:32rem;}

/* ---------- RESPONSIVE TWEAKS ---------- */
@media (min-width:992px){
    .col-lg-two-thirds{flex:0 0 66.666%;max-width:66.666%;}
}