/* ==============================
   ROOT COLORS
================================*/

:root {
    --primary-color: #8B0000;
    --secondary-color: #DAA520;
    --text-dark: #2C3E50;
    --text-light: #7F8C8D;
    --white: #FFFFFF;
    --bg-light: #F8F9FA;
}

/* ==============================
   GLOBAL
================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', sans-serif;
    background: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
}

.container {
    width: 95%;
    max-width: 1200px;
    margin: auto;
}

/* ==============================
   HEADER
================================*/

.header{
background:linear-gradient(135deg,#8B0000,#a30000);
color:white;
padding:10px 0 6px 0;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 2px 10px rgba(0,0,0,0.15);
}


.header::after{
content:"";
display:block;
height:2px;
background:linear-gradient(
to right,
transparent,
#d4af37,
transparent
);
margin-top:8px;
}

.header .container{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:nowrap;
}

/* allow nav to take full width */
.nav{
flex:1;
display:flex;
justify-content:flex-end;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 12px;
    
}

.logo{
width:58px;
height:auto;
border-radius:8px;
}

.site-title{
font-size:20px;
font-weight:700;
letter-spacing:0.5px;
line-height:1.1;
margin-bottom:2px;
}

.tagline{
font-size:13px;
color:#f1c75b;
letter-spacing:0.4px;
}


.nav a{
color:white;
text-decoration:none;
padding:6px 6px;
position:relative;
font-weight:500;
transition:0.25s;
}

.nav a:hover{
color:#ffd369;
}

/* active menu underline */

.nav a.active::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:100%;
height:2px;

background:linear-gradient(
to right,
transparent,
#ffd369,
transparent
);
}

/* hover underline */

.nav a:hover::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:100%;
height:2px;

background:linear-gradient(
to right,
transparent,
#d4af37,
transparent
);
}

.nav a:hover {
    background: rgba(255,255,255,0.2);
    color: var(--secondary-color);
}

/* Mobile Toggle */

.mobile-toggle{
display:none;
background:none;
border:none;
font-size:26px;
color:white;
cursor:pointer;
margin-left:6px;
}

/* ==============================
   DESKTOP & MOBILE MENU SYSTEM
================================*/

/* Desktop menu */

.desktop-menu{
display:flex;
list-style:none;
gap:18px;
align-items:center;
flex-wrap:nowrap;
font-size:15px;
}

.desktop-menu li{
white-space:nowrap;
}

/* Hide desktop menu on mobile */
@media (max-width: 768px) {
    .desktop-menu {
        display: none;
    }
}

/* Mobile Popup Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    max-width:320px;
    height: 100vh;
    background: linear-gradient(135deg, var(--primary-color), #A52A2A);
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    transition: right 0.3s ease-in-out;
    z-index: 2000;
}

.mobile-menu a {
    color: white;
    text-decoration: none;
    padding: 15px 30px;
    font-size: 1.1rem;
}

.mobile-menu a:hover {
    background: rgba(255,255,255,0.1);
}

/* Show popup */
.mobile-menu.show {
    right: 0;
}

.mobile-overlay {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.45);
    display:none;
    z-index:1500;
}
.mobile-overlay.show {
    display: block;
}

/* ==============================
   FOOTER (MATCH HEADER)
================================*/

.footer {
    background: linear-gradient(135deg, var(--primary-color), #A52A2A);
    color: var(--white);
    margin-top: 3rem;
}

/* Main content area */
.footer-main{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
padding:12px 0 6px 0;
flex-wrap:wrap;
text-align:center;
}

.footer-left,
.footer-right{
flex:0;
}

.footer-center{
flex:0;
text-align:center;
}

/* Logo styling */

.company-logo{
width:75px;
background:white;
padding:6px;
border-radius:8px;
}

/* Text styling */
.developed-line{
font-size:12px;
margin-bottom:0;
opacity:0.85;
}

.company-name{
font-weight:600;
font-size:14px;
white-space:nowrap;
letter-spacing:0.2px;
margin-bottom:2px;
}

.company-link a{
color:#f1c75b;
font-size:13px;
text-decoration:none;
opacity:0.9;
}

.company-link a:hover{
opacity:1;
text-decoration:underline;
}

.company-link a:hover {
    text-decoration: underline;
}

/* Gold divider lines */
.gold-line{
height:2px;
background:linear-gradient(
to right,
transparent,
#d4af37,
transparent
);
margin:10px auto 0 auto;
width:160px;
opacity:0.7;
}

/* Separate copyright strip */
.footer-bottom{
text-align:center;
padding:8px 0;
background:rgba(0,0,0,0.18);
font-size:13px;
letter-spacing:0.3px;
}

/* ==============================
   RESPONSIVE FOOTER
================================*/

@media (max-width: 768px) {

    .footer-main {
        gap:12px;
        padding:18px 0 10px 0;
    }

    .footer-left,
    .footer-right {
        text-align: center;
    }

    .company-logo {
        width: 65px;
        margin-bottom: 6px;
    }

    .company-name{
        font-size:14px;
    }

    .gold-line {
        width: 80%;
    }
}

/* ==============================
   RESPONSIVE
================================*/

@media (max-width:768px){

.header .container{
align-items:center;
}

.logo-section{
display:grid;
grid-template-columns:auto 1fr auto;
grid-template-rows:auto auto;
column-gap:10px;
row-gap:2px;
width:100%;
}

/* logo */
.logo{
width:46px;
grid-row:1 / span 2;
}

/* title */
.site-title{
font-size:18px;
line-height:1.05;
white-space:normal;
grid-column:2;
grid-row:1;
}

/* tagline */
.tagline{
font-size:12px;
color:#f1c75b;
grid-column:2;
grid-row:2;
}

/* hamburger aligned with tagline */
.mobile-toggle{
display:block;
grid-column:3;
grid-row:2;
align-self:center;
font-size:24px;
margin-left:6px;
}

}


/* Modal Styling */

.nv-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.65);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.nv-modal-box {
    background: #ffffff;
    width:90%;
    max-width:420px;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    border-top: 6px solid #800000;
    animation: fadeIn 0.3s ease-in-out;
}

.nv-modal-box h3 {
    color: #800000;
    margin-bottom: 15px;
}

.nv-modal-box button {
    background: #800000;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 15px;
}

.nv-modal-box button:hover {
    background: #a00000;
}

button:focus,
a:focus{
    outline:2px solid var(--secondary-color);
    outline-offset:2px;
}

@keyframes fadeIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}



/* ==============================
   FORM CARD
================================*/

#profileForm {
    background: #ffffff;
    max-width: 850px;
    margin: 40px auto;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

#profileForm h3 {
    margin-top: 30px;
    color: var(--primary-color);
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
    font-size: 1.3rem;
}

#profileForm label {
    display: block;
    margin-top: 15px;
    font-weight: 500;
}

#profileForm input,
#profileForm select,
#profileForm textarea {
    width: 100%;
    padding: 10px 12px;
    margin-top: 6px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: 0.2s;
}

#profileForm input:focus,
#profileForm textarea:focus,
#profileForm select:focus {
    
    border-color: var(--secondary-color);

    box-shadow:
        0 0 0 2px rgba(218,165,32,0.25),
        0 2px 6px rgba(0,0,0,0.05);

    transition: all .25s ease;
}

#uploadProgressBox {
    background: #e3f0f3;
    padding: 20px;
    margin-top: 20px;
    border-radius: 10px;
}

.upload-bar {
    background: #dcdcdc;
    height: 12px;
    border-radius: 6px;
    margin-top: 10px;
    overflow: hidden;
}

.upload-bar-fill {
    height: 100%;
    width: 0%;
    background: green;
    transition: width 0.3s ease, background 0.3s ease;
}

.form-divider{

    height:1px;
    background:linear-gradient(
        to right,
        transparent,
        var(--secondary-color),
        transparent
    );

    margin:35px 0;
}

/* Prevent iOS zoom on inputs */

input,
select,
textarea,
button {
    font-size:16px;
}

@media (max-width: 600px){

#profileForm{
    padding:20px;
}

#profileForm h3{
    font-size:1.1rem;
}

#profileForm label{
    font-size:0.95rem;
}

button{
    width:100%;
}

}

#profileForm label input[type="checkbox"]{
    width:auto;
    margin-right:8px;
}

#profileForm label{
    display:flex;
    align-items:center;
}

body.menu-open{
    overflow:hidden;
}

.file-row{
display:flex;
gap:10px;
align-items:center;
}

.field-error{
color:#b30000;
font-size:13px;
margin-top:4px;
}

.file-row button{
background:#a00000;
color:white;
border:none;
padding:6px 10px;
border-radius:4px;
cursor:pointer;
}

@media (max-width:768px){

.file-row button{
padding:3px 6px;
font-size:12px;
}

}

.file-row button:hover{
background:#c00000;
}

/* Submit button loader */

.submit-loader{
display:none;
width:14px;
height:14px;
border:2px solid #fff;
border-top:2px solid transparent;
border-radius:50%;
margin-left:8px;
animation:spin 0.7s linear infinite;
}

@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}




/* ==============================
drop down menu in profile add page
==============================*/

.dropdown-box
{
position:absolute;
background:white;
border:1px solid #ccc;
width:100%;
max-height:180px;
overflow-y:auto;
z-index:999;
display:none;
}

.dropdown-item
{
padding:8px;
cursor:pointer;
}

.dropdown-item:hover
{
background:#f2f2f2;
}



/* ==============================
PROFILE GRID
==============================*/

.profile-grid{
display:grid;
grid-template-columns:1fr;
gap:25px;
margin:30px auto;
max-width:1200px;
}

@media (min-width:700px){
.profile-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media (min-width:1100px){
.profile-grid{
grid-template-columns:repeat(3,1fr);
}
}

/* Profile Card */

.profile-card{
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
transition:0.25s;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.profile-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 24px rgba(0,0,0,0.15);
}

.profile-photo{
width:100%;
height:260px;
overflow:hidden;
}

.profile-photo img{
width:100%;
height:100%;
object-fit:cover;
}

.profile-info{
padding:18px;
text-align:center;
}

.profile-info h3{
color:var(--primary-color);
margin-bottom:6px;
font-size:1.2rem;
}

.profile-info p{
font-size:0.9rem;
color:var(--text-light);
margin-bottom:4px;
}

.profile-info a{
display:inline-block;
margin-top:12px;
padding:8px 14px;
background:var(--primary-color);
color:white;
border-radius:6px;
text-decoration:none;
font-size:0.9rem;
}

.profile-info a:hover{
background:#a00000;
}




/* ==============================
FILTER CARD
==============================*/

.filter-card{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
max-width:1000px;
margin:30px auto;
}

.filter-card form{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:12px;
}

.filter-card input,
.filter-card select{
padding:8px;
border:1px solid #ddd;
border-radius:6px;
}

.filter-card button{
background:var(--primary-color);
color:white;
border:none;
border-radius:6px;
padding:8px;
cursor:pointer;
}

.filter-card button:hover{
background:#a00000;
}


/* ==============================
PAGINATION STYLING 
==============================*/

.pagination{
text-align:center;
margin:40px 0;
}

.pagination a{
display:inline-block;
padding:8px 12px;
margin:3px;
background:white;
border:1px solid #ddd;
border-radius:5px;
text-decoration:none;
color:#333;
}

.pagination a:hover{
background:var(--primary-color);
color:white;
}


/* ==============================
PROFILE DETAILS PAGE STYLING
==============================*/
.profile-details{
max-width:1000px;
margin:40px auto;
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.1);
}

.profile-sections{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:20px;
}

.profile-sections div{
background:#f8f8f8;
padding:15px;
border-radius:8px;
}

.profile-details h1{
color:var(--primary-color);
margin-bottom:10px;
}

.page-title{
text-align:center;
font-size:32px;
color:var(--primary-color);
margin:30px 0;
font-weight:700;
}

.no-result{
text-align:center;
padding:30px;
font-size:18px;
color:#777;
}

.profile-buttons{
display:flex;
justify-content:center;
gap:12px;
margin-top:20px;
flex-wrap:wrap;
}

.profile-buttons a{
background:var(--primary-color);
color:white;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
display:inline-block;
}

.profile-buttons a:hover{
background:#a00000;
}

/* MOBILE BUTTON LAYOUT */

@media (max-width:768px){

.profile-buttons{
flex-direction:column;
align-items:center;
width:100%;
}

.profile-buttons a{
width:90%;
text-align:center;
margin-bottom:10px;
}

}

.btn{
background:var(--primary-color);
color:white;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
}


.horoscope-section{
text-align:center;
margin-top:25px;
}



.profile-buttons a{
background:var(--primary-color);
color:white;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
display:inline-block;
}

.profile-buttons a:hover{
background:#a00000;
}



.image-modal{

display:none;
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.85);
justify-content:center;
align-items:center;
z-index:9999;

}

.image-modal img{

max-width:90%;
max-height:90%;
border-radius:8px;

}

.close-modal{

position:absolute;
top:20px;
right:20px;
font-size:40px;
color:white;
cursor:pointer;
z-index:10000;

}

.profile-photo-gallery{

display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap;
margin-top:20px;

}

.profile-thumb{

width:150px;
height:150px;
object-fit:cover;
border-radius:8px;
cursor:pointer;
display:block;

}

@media (max-width:768px){

.profile-thumb{
width:120px;
height:120px;
object-fit:cover;
}

}

}







/* ==============================
SUCCESS STORIES PAGE
==============================*/

.success-message{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
margin-bottom:40px;
}

.success-message h2{
color:var(--primary-color);
margin-bottom:15px;
}

.success-form{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
margin-bottom:50px;
}

.success-form label{
display:block;
margin-top:15px;
font-weight:500;
}

.success-form input,
.success-form textarea{
width:100%;
padding:10px;
margin-top:6px;
border:1px solid #ddd;
border-radius:8px;
}

.success-form button{
margin-top:20px;
background:var(--primary-color);
color:white;
border:none;
padding:10px 20px;
border-radius:6px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}

.success-form button:hover{
background:#a00000;
}

.story-grid{
display:grid;
grid-template-columns:1fr;
gap:25px;
margin-top:25px;
}

@media (min-width:700px){
.story-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media (min-width:1100px){
.story-grid{
grid-template-columns:repeat(3,1fr);
}
}

.story-card{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
transition:0.25s;
}

.story-card h3{
color:var(--primary-color);
margin-bottom:10px;
}

.story-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.stories-title{
text-align:center;
color:var(--primary-color);
margin-top:30px;
}



/* ==============================
FAQ PAGE
==============================*/

.faq-search-box {
    margin: 20px auto;
    max-width: 500px;
    text-align: center;
}

.faq-search-box input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.faq-category {
    margin: 30px 0;
}

.faq-category h2 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* FAQ CARD */

.faq-item{
    background:white;
    margin-bottom:14px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid #eee;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* QUESTION */

.faq-question{
    width:100%;
    text-align:left;
    padding:16px 18px;
    background:#fff;
    color:var(--text-dark);
    border:none;
    cursor:pointer;
    font-weight:600;
    position:relative;
    transition:0.25s;
}

/* LEFT COLOR STRIP */

.faq-question::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:5px;
    background:var(--secondary-color);
}

/* HOVER */

.faq-question:hover{
    background:#fafafa;
}

/* ANSWER */

.faq-answer{
    display:none;
    padding:16px 18px;
    background:#fcfcfc;
    color:var(--text-light);
    border-top:1px solid #eee;
    line-height:1.6;
}

.faq-answer.show{
    display:block;
}

/* CATEGORY TITLE */

.faq-category h2{
    color:var(--primary-color);
    margin-bottom:18px;
    margin-top:35px;
    font-size:1.5rem;
}

/* SEARCH BOX */

.faq-search-box input{
    border:1px solid #ddd;
    border-radius:8px;
    padding:12px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* CONTACT SECTION */

.faq-contact{
    text-align:center;
    margin-top:60px;
    padding-top:30px;
    border-top:1px solid #eee;
}

.faq-contact p{
    margin-bottom:15px;
    font-size:18px;
    color:var(--text-dark);
}

.faq-answer.show {
    display: block;
}

.faq-contact{
    text-align:center;
    margin-top:70px;
    margin-bottom:20px;
    padding-top:30px;
    border-top:1px solid #eee;
}

.faq-contact .btn{
    margin-top:12px;
    display:inline-block;
}

.faq-question::after{
    content:"+";
    position:absolute;
    right:18px;
    font-size:20px;
    color:var(--secondary-color);
}

.faq-question.active::after{
    content:"–";
}


/* ==============================
CONTACT PAGE
==============================*/

.contact-card{

background:white;
max-width:650px;
margin:40px auto;
padding:40px;
border-radius:12px;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
text-align:center;

}

.contact-card h2{

color:var(--primary-color);
margin-bottom:15px;

}

.contact-card p{

color:var(--text-light);
margin-bottom:15px;
font-size:16px;

}

.contact-email-box{

margin-top:25px;
margin-bottom:20px;
padding:20px;
background:#fafafa;
border-radius:8px;
border:1px solid #eee;

}

.email-label{

font-size:14px;
color:var(--text-light);
margin-bottom:6px;

}

.email-link{

font-size:18px;
font-weight:600;
color:var(--primary-color);
text-decoration:none;
word-break:break-word;

}

.email-link:hover{

text-decoration:underline;

}

.contact-note{

margin-top:15px;
font-size:14px;
color:var(--text-light);

}

/* MOBILE */

@media (max-width:768px){

.contact-card{

padding:25px;
margin:25px 10px;

}

.email-link{

font-size:16px;

}

}


/* ==============================
ABOUT PAGE PROFESSIONAL DESIGN
==============================*/

.page-container{

max-width:1100px;
margin:40px auto;
padding:0 20px;

}

.page-title{

text-align:center;
font-size:30px;
color:var(--primary-color);
margin-bottom:10px;

}

.page-intro{

text-align:center;
color:var(--text-light);
max-width:700px;
margin:0 auto 35px auto;

}

.about-card{

background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 14px rgba(0,0,0,0.06);

}

.about-card h2{

color:var(--primary-color);
margin-bottom:10px;

}

.highlight-card{

border-left:4px solid var(--secondary-color);

}

.about-card ul{

padding-left:18px;

}

.about-card li{

margin-bottom:8px;

}

/* breadcrumb */

.breadcrumb{

max-width:1100px;
margin:25px auto 0 auto;
padding:0 20px;
font-size:14px;
color:var(--text-light);

}

.breadcrumb a{

color:var(--primary-color);
text-decoration:none;

}

.breadcrumb span{

margin:0 6px;

}



/* ==============================
ABOUT PAGE VERTICAL LAYOUT for about us page
==============================*/

.about-section{

background:white;
padding:28px;
margin-bottom:30px;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);

}

.section-title{

background:#f1f1f1;
padding:12px 15px;
font-size:20px;
color:var(--primary-color);
border-left:5px solid var(--secondary-color);
margin-bottom:18px;

}

.section-content{

font-size:15px;
line-height:1.7;

}



.highlight-box{

border:1px solid #eee;
background:#fafafa;

}

.objective-text{

font-style:italic;
font-weight:600;
color:var(--primary-color);
margin:15px 0;

}

/* TOP BUTTON */

#topBtn{

display:none;
position:fixed;
bottom:40px;
right:40px;

background:var(--primary-color);
color:white;

border:none;
padding:10px 14px;
border-radius:6px;
cursor:pointer;

font-size:14px;
box-shadow:0 4px 10px rgba(0,0,0,0.2);

}

#topBtn:hover{

background:#a00000;

}

/* mobile */

@media(max-width:768px){

.section-image{

float:none;
display:block;
margin:10px auto;

}

#topBtn{

right:15px;
bottom:20px;

}

}


/* icon near title */

.title-icon{

margin-right:8px;
font-size:18px;

}

/* icon box */

.icon-box{

margin-bottom:12px;

}

.section-icon{

width:32px;
height:32px;
fill:var(--primary-color);

}

/* trust badges */

.badge-grid{

display:flex;
flex-wrap:wrap;
gap:12px;

}

.trust-badge{

background:#f8f8f8;
border:1px solid #eee;
padding:10px 14px;
border-radius:6px;
font-size:14px;

}

/* responsive */

@media(max-width:768px){

.badge-grid{

flex-direction:column;

}

}

.company-link-line{

margin-top:18px;
font-size:15px;

}

.company-external-link{

color:var(--primary-color);
font-weight:600;
text-decoration:none;

border-bottom:1px solid var(--secondary-color);

padding-bottom:2px;

}

.company-external-link:hover{

color:#a00000;

}





/* ==============================
HOW IT WORKS PAGE
==============================*/

.process-chart{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:25px;
margin:40px 0;

}

.process-step{

background:white;
padding:25px;
border-radius:12px;
text-align:center;
text-decoration:none;
color:inherit;
box-shadow:0 4px 14px rgba(0,0,0,0.06);
transition:0.25s;
position:relative;

}

.process-step:hover{

transform:translateY(-5px);
box-shadow:0 8px 22px rgba(0,0,0,0.15);

}

.process-circle{

width:42px;
height:42px;
border-radius:50%;
background:var(--primary-color);
color:white;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
margin:0 auto 10px auto;

}

.process-icon{

font-size:28px;
margin-bottom:6px;

}

.process-step h3{

color:var(--primary-color);
margin-bottom:6px;
font-size:18px;

}

.process-step p{

font-size:14px;
color:var(--text-light);

}


/* smooth scroll */

html{

scroll-behavior:smooth;

}

.how-step{
scroll-margin-top:100px;
}



/* subtle links inside how-it-works */

.step-link-wrap{

margin-top:12px;

}

.step-link{

font-size:14px;
color:var(--primary-color);
text-decoration:none;
border-bottom:1px solid transparent;
transition:0.2s;
opacity:0.85;
}

.step-link:hover{

border-bottom:1px solid var(--secondary-color);
color:#a00000;

}



/* ==============================
HOME PAGE
==============================*/

.home-container{
max-width:1200px;
margin:40px auto;
padding:0 30px;
text-align:center;
}

.home-deity{
text-align:center;
margin-top:10px;
margin-bottom:20px;
}

.home-deity img{
max-width:270px;
width:100%;
height:auto;

/* inner image styling */
border-radius:6px;

/* premium temple frame */
padding:10px;
background:linear-gradient(
145deg,
#fff7cc,
#f1d27a,
#d4af37,
#f1d27a,
#fff7cc
);

/* outer border */
border:3px solid #d4af37;

/* depth */
box-shadow:
0 0 0 4px #fff,
0 8px 25px rgba(0,0,0,0.25),
0 0 18px rgba(212,175,55,0.45);

/* smooth hover feel */
transition:0.35s;
}

/* subtle glow interaction */

.home-deity img:hover{

box-shadow:
0 0 0 4px #fff,
0 14px 35px rgba(0,0,0,0.35),
0 0 28px rgba(212,175,55,0.65);

transform:translateY(-2px);

}

.home-deity::after{
content:"";
display:block;
width:120px;
height:3px;
margin:18px auto 5px auto;

background:linear-gradient(
to right,
transparent,
#d4af37,
transparent
);
}

.home-title{
color:var(--primary-color);
font-size:34px;
margin-bottom:10px;
}

.home-tagline{
color:var(--text-light);
max-width:650px;
margin:0 auto 30px auto;
}

.home-actions{
display:flex;
justify-content:center;
gap:14px;
margin-bottom:35px;
flex-wrap:wrap;
}

.home-btn{
background:var(--primary-color);
color:white;
padding:12px 20px;
border-radius:8px;
text-decoration:none;
display:inline-block;
transition:0.25s;
}

.home-btn:hover{
background:#a00000;
}

.home-btn.secondary{
background:white;
color:var(--primary-color);
border:1px solid var(--primary-color);
}

.home-btn.secondary:hover{
background:#fafafa;
}

.home-btn.small{
padding:8px 14px;
font-size:14px;
}

.home-section{
background:white;
padding:35px 40px;
margin-bottom:30px;
border-radius:14px;
box-shadow:0 10px 28px rgba(0,0,0,0.08);
text-align:center;
transition:0.25s;
}

.home-section:hover{
transform:translateY(-3px);
box-shadow:0 16px 40px rgba(0,0,0,0.12);
}

.wide{
max-width:1200px;
margin-left:auto;
margin-right:auto;
}

.home-section h2{
color:var(--primary-color);
margin-bottom:10px;
}

.highlight{
border-left:4px solid var(--secondary-color);
}

.mini-steps{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
margin-top:15px;
}

.mini-steps div{
background:white;
padding:18px;
border-radius:10px;
box-shadow:0 6px 16px rgba(0,0,0,0.06);
transition:0.25s;
}

.mini-steps div:hover{
transform:translateY(-3px);
box-shadow:0 10px 26px rgba(0,0,0,0.12);
}

.home-list{
list-style:none;
padding-left:0;
}

.home-list li{
padding:6px 0;
}

.text-link{
display:inline-block;
margin-top:12px;
color:var(--primary-color);
text-decoration:none;
border-bottom:1px solid transparent;
}

.text-link:hover{
border-bottom:1px solid var(--secondary-color);
}

.contact-box{
background:#fafafa;
}

@media(max-width:768px){

.home-title{
font-size:26px;
}

.home-deity img{
max-width:200px;
}

}

/* trust grid */

.trust-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
margin-top:20px;
}

.trust-card{
background:#fff;
padding:22px 18px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.07);
transition:0.25s;
}

.trust-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 32px rgba(0,0,0,0.14);
}

.trust-icon{
font-size:26px;
margin-bottom:8px;
}

.trust-card h3{
font-size:16px;
color:var(--primary-color);
margin-bottom:6px;
}

.trust-card p{
font-size:14px;
color:var(--text-light);
}



/* ==============================
contact  PAGE
==============================*/
.required{
color:#cc0000;
font-weight:bold;
margin-left:4px;
}