/* Custom styles for EMC Marriage Media demo */
:root{--accent:#0d6efd;--purple:#6f42c1}
body{font-family: 'Roboto', sans-serif}

/* Navbar Enhancements */
.navbar{transition:box-shadow 0.3s ease}
.navbar-brand{font-weight:700;font-size:1.25rem}
.navbar-light.bg-white .navbar-brand{color:#111}
.navbar-light.bg-white .nav-link{color:#222;opacity:1;font-weight:600;transition:color 0.2s ease}
.navbar-light.bg-white .nav-link.active{color:var(--accent)}
.navbar-light.bg-white .nav-link:hover{color:var(--accent)}
.navbar-light .navbar-toggler{border-color:rgba(0,0,0,0.1)}
.navbar-light .navbar-toggler-icon{background-image:linear-gradient(#222,#222)}
.auth-btns .btn{font-weight:600}

/* Custom dark square navbar toggler (three-line icon) */
.custom-toggler{width:44px;height:44px;background:transparent;color:#222;border-radius:.5rem;display:flex;align-items:center;justify-content:center;border:0}
.custom-toggler .bi{font-size:1.15rem;color:inherit}
.custom-toggler:hover{background:rgba(0,0,0,0.04)}
.custom-toggler:focus{outline:none;box-shadow:none}
.custom-toggler:focus-visible{box-shadow:0 0 0 3px rgba(33,37,41,0.06)}

/* hide default toggler icon when using custom toggler */
.navbar-toggler-icon{display:none}

/* Offcanvas Styling */
.offcanvas-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}
.offcanvas-title{color:#fff;font-weight:700}
.offcanvas-header .btn-close{filter:brightness(0) invert(1)}
.offcanvas-body{padding:1.5rem}
.offcanvas-body .nav-link{padding:.75rem 0;font-weight:500;color:#333;transition:color 0.2s}
.offcanvas-body .nav-link:hover{color:var(--accent)}
.offcanvas-body .dropdown-menu{border:none;box-shadow:none;background:transparent;padding-left:1rem}
.offcanvas-body .dropdown-item{padding:.5rem 0;color:#555;font-size:.95rem}

/* Why Choose Us Section */
#why-choose{background:#fff}
.feature-card{border-radius:.75rem;transition:all 0.3s ease;background:#fff;border:1px solid #e9ecef}
.feature-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.12);transform:translateY(-5px);border-color:var(--accent)}
.icon-box{transition:transform 0.3s ease}
.feature-card:hover .icon-box{transform:scale(1.1)}
.text-purple{color:var(--purple)!important}

/* Ready to Find Section */
#ready-section{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}
.bg-gradient-light{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:#fff}
#ready-section h2,#ready-section p{color:#fff}
#ready-section .btn-primary{background:#fff;color:#667eea;border:none;font-weight:700;transition:all 0.3s ease}
#ready-section .btn-primary:hover{background:#f8f9fa;transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,0.2)}

/* Logo/Partners Section */
#partners{background:#f8f9fa}
.company-logo{max-width:320px;width:60%;height:auto;display:block;margin:0 auto;padding:1.5rem;background:#fff;border-radius:.75rem;box-shadow:0 8px 20px rgba(0,0,0,0.06)}

@media(min-width:1200px){
	.company-logo{max-width:420px;width:40%}
}

/* Footer Enhancements */
footer{border-top:1px solid rgba(255,255,255,0.04)}
.text-light-50{color:rgba(255,255,255,0.7)!important}
.text-light-50:hover{color:rgba(255,255,255,1)!important}
footer a{transition:color 0.2s ease}

/* Carousel sizing and image behavior */
.carousel-item{position:relative}
.carousel-item img{height:70vh;object-fit:cover;width:100%}

/* Dark overlay for captions (kept behind captions) */
.carousel-item::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0.12),rgba(0,0,0,0.34));z-index:0}
/* Center captions both horizontally and vertically and keep them above overlay */
.carousel-caption{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;text-align:center;padding:0 1rem;width:100%;max-width:1100px;z-index:2;color:#fff;text-shadow:0 6px 18px rgba(0,0,0,0.45)}

.caption-title{font-size:2.25rem;font-weight:700;animation:slideInUp .8s ease both}
.caption-sub{font-size:1.05rem;opacity:.95;animation:fadeIn .9s .2s both}

/* Make carousel caption buttons look balanced */
.carousel-caption .btn{padding:.72rem 1.25rem;font-size:1rem;border-radius:.5rem;font-weight:600}
.carousel-caption .btn.btn-lg{padding:.9rem 1.6rem;font-size:1.05rem}

@media(max-width:767.98px){
	.carousel-caption .btn{padding:.6rem 1rem;font-size:.95rem}
}

/* Carousel controls - smaller with transparent white background */
.carousel-control-prev,
.carousel-control-next{width:44px;height:44px;top:48%;transform:translateY(-48%);opacity:1;display:flex;align-items:center;justify-content:center;left:auto;right:auto;background-color:rgba(255,255,255,0.34);border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:background-color 0.18s ease, transform 0.12s ease}
.carousel-control-prev{left:12px}
.carousel-control-next{right:12px}

/* Keep the built-in SVG icon but remove extra padding and background from it */
.carousel-control-prev-icon,
.carousel-control-next-icon{width:18px;height:18px;background-color:transparent;padding:0;display:block;background-size:18px 18px;background-position:center;background-repeat:no-repeat}



/* For very large screens keep centered but constrain width */
@media(min-width:1400px){
	.carousel-caption{max-width:1200px}
}

/* On small screens keep captions lower so they don't overlap the image focus */
@media(max-width:767.98px){
	.carousel-caption{top:auto;bottom:18%;padding-left:1rem;padding-right:1rem;text-align:center}
	.carousel-control-prev,.carousel-control-next{top:50%;transform:translateY(-50%)}
}

@media(min-width:1200px){.caption-title{font-size:3.25rem}}

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

@media(max-width:991.98px){
	/* Ensure collapsed links look good on small screens */
	.navbar-nav .nav-link{padding:.5rem 0}
}

/* Utility */
.btn-outline-light{border-color:rgba(255,255,255,0.6)}

/* Create Biodata CTA */
.btn-biodata{background:#07273f;color:#fff;border:none;padding:.45rem .9rem;border-radius:.6rem;font-weight:700}
.btn-biodata:hover{opacity:.95}
.auth-btns{flex-wrap:nowrap}
.auth-btns .btn{white-space:nowrap}
.offcanvas-body .btn{white-space:nowrap}