/* =====================================================
   Mu'min Enterprise
   Main Stylesheet
   Version: 2.0
===================================================== */

:root{

--primary:#198754;
--primary-dark:#146c43;
--secondary:#6c757d;
--light:#f8f9fa;
--dark:#212529;
--white:#ffffff;
--gray:#f5f5f5;
--border:#e9ecef;

--radius:12px;

--transition:.35s ease;

--shadow:0 8px 25px rgba(0,0,0,.08);

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;

font-size:16px;

line-height:1.7;

background:#fff;

color:#333;

overflow-x:hidden;

}

/* Links */

a{

text-decoration:none;

transition:var(--transition);

}

a:hover{

color:var(--primary);

}

/* Images */

img{

max-width:100%;

height:auto;

display:block;

}

/* Sections */

section{

padding:80px 0;

}

/* Container */

.container{

max-width:1200px;

}

/* Headings */

h1,h2,h3,h4,h5{

font-weight:700;

color:#222;

}

.display-4{

font-weight:800;

}

/* Paragraph */

p{

color:#666;

margin-bottom:1rem;

}

/* Buttons */

.btn{

border-radius:50px;

padding:12px 28px;

font-weight:600;

transition:.3s;

}

.btn-success{

background:var(--primary);

border:none;

}

.btn-success:hover{

background:var(--primary-dark);

transform:translateY(-2px);

}

.btn-outline-success{

border:2px solid var(--primary);

}

.btn-outline-success:hover{

background:var(--primary);

}

/* Navbar */

.navbar{

padding:18px 0;

transition:.3s;

background:#fff;

}

.navbar-brand{

font-size:1.4rem;

font-weight:700;

}

.nav-link{

font-weight:500;

margin-left:15px;

color:#444 !important;

}

.nav-link:hover{

color:var(--primary)!important;

}
/* Hero */

.hero{

background:#f8f9fa;

min-height:100vh;

display:flex;

align-items:center;

}

.hero h1{

font-size:3.5rem;

margin-bottom:20px;

}

.hero p{

font-size:1.1rem;

}

.hero-image{

animation:float 4s ease-in-out infinite;

}

/* Floating Animation */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/* Cards */

.card{

border:none;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

}

.card-body{

padding:35px;

}

.card i{

font-size:3rem;

color:var(--primary);

}

/* Statistics */

.stats-card{

text-align:center;

padding:30px;

}

.stats-card h2{

color:var(--primary);

font-size:42px;

}

/* Section Title */

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:2.5rem;

margin-bottom:15px;

}

.section-title p{

max-width:700px;

margin:auto;

}
/* =====================================================
   SERVICES
===================================================== */

.service-card{
    background:#fff;
    border-radius:var(--radius);
    padding:35px;
    text-align:center;
    transition:var(--transition);
    box-shadow:var(--shadow);
    height:100%;
}

.service-card:hover{
    transform:translateY(-10px);
}

.service-card i{
    font-size:60px;
    color:var(--primary);
    margin-bottom:20px;
}

.service-card h4{
    margin-bottom:15px;
}

.service-card p{
    color:#666;
}

/* =====================================================
   ABOUT
===================================================== */

.about-image{
    border-radius:20px;
    overflow:hidden;
}

.about-image img{
    width:100%;
}

.about-content h2{
    margin-bottom:25px;
}

.about-content ul{
    list-style:none;
    padding:0;
}

.about-content ul li{
    margin-bottom:15px;
}

.about-content ul li i{
    color:var(--primary);
    margin-right:10px;
}

/* =====================================================
   PORTFOLIO
===================================================== */

.portfolio-item{
    position:relative;
    overflow:hidden;
    border-radius:15px;
}

.portfolio-item img{
    transition:.4s;
}

.portfolio-item:hover img{
    transform:scale(1.08);
}

.portfolio-overlay{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,.65);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    opacity:0;

    transition:.4s;

}

.portfolio-item:hover .portfolio-overlay{

    opacity:1;

}

/* =====================================================
   CTA
===================================================== */

.cta{

background:var(--primary);

color:#fff;

text-align:center;

}

.cta h2{

color:#fff;

margin-bottom:20px;

}

.cta p{

color:#fff;

}

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

.contact-info{

padding:30px;

border-radius:15px;

background:#fff;

box-shadow:var(--shadow);

height:100%;

}

.contact-info i{

font-size:26px;

color:var(--primary);

margin-right:12px;

}

.contact-form{

padding:35px;

background:#fff;

border-radius:15px;

box-shadow:var(--shadow);

}

.form-control{

padding:14px;

border-radius:10px;

border:1px solid #ddd;

box-shadow:none;

}

.form-control:focus{

border-color:var(--primary);

box-shadow:none;

}

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

footer{

background:#212529;

color:#fff;

}

footer h4,
footer h5{

color:#fff;

}

footer a{

color:#ddd;

transition:.3s;

}

footer a:hover{

color:#fff;

padding-left:5px;

}

footer p{

color:#ccc;

}

footer i{

color:var(--primary);

}

/* =====================================================
   PAGE LOADER
===================================================== */

#page-loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

/* =====================================================
   ANIMATION
===================================================== */

.fade-up{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* =====================================================
   UTILITIES
===================================================== */

.rounded-xl{

border-radius:20px;

}

.shadow-lg{

box-shadow:0 15px 40px rgba(0,0,0,.12)!important;

}

.text-success{

color:var(--primary)!important;

}

.bg-success{

background:var(--primary)!important;

}

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

@media (max-width:992px){

.hero{

text-align:center;

padding-top:100px;

}

.hero h1{

font-size:2.7rem;

}

.hero img{

margin-top:40px;

}

.navbar-nav{

text-align:center;

padding-top:20px;

}

.nav-link{

margin-left:0;

padding:10px;

}

}

@media (max-width:768px){

section{

padding:60px 0;

}

.hero h1{

font-size:2.2rem;

}

.display-4{

font-size:2.2rem;

}

.btn{

display:block;

width:100%;

margin-bottom:15px;

}

.card-body{

padding:25px;

}

}

@media (max-width:576px){

.hero h1{

font-size:1.9rem;

}

.section-title h2{

font-size:2rem;

}

footer{

text-align:center;

}

}