@charset "utf-8";
/* CSS Document */

/*==========0. GLOBAL STYLES==============*/

body {
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    background: #FAFBFC; /* Slightly softer white for modern feel */
    position: relative;
    color: #4a5568;
}
a {
    color: #2cc76a;
    transition: all 0.2s ease;
}
a:hover, a:focus {
    color: #1eb45a;
    text-decoration: none;
}
h1, h2, h3, h4 {
    font-weight: 700;
    color: #2d3748;
}
p {
    color: #718096;
    line-height: 1.7;
}

/* Custom Modern Buttons */
.pill-btn {
    border-radius: 50px !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px 0 rgba(0,0,0,0.1);
}
.pill-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/*==========1. HEADER==============*/

.navbar-header { min-height:80px; }
.navbar-default .navbar-toggle { border-color: #808080; }
.navbar-toggle { margin-top: 20px; }
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { max-height: 370px; }

.jumbotron {
    position: relative;
    color: #fff;
    background: url(../images/header-bg.jpg) no-repeat #1a202c;
    height: 630px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
/* Optional: Dark overlay to make hero text pop more */
.jumbotron::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(26, 32, 44, 0.4);
    z-index: 1;
}
.jumbotron .container { position: relative; z-index: 2; }

.navbar {
    background: #1a202c;
    border-bottom: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.navbar-collapse {
    background:none; border:0; box-shadow:none; padding-top: 5px;
}
.navbar .nav > li > a {
    color: #edf2f7;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
}
.navbar .nav > li > a:focus, .navbar .nav > li > a:hover { color:#fff; }
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
    background: none; color: #2cc76a; box-shadow: none;
}
.navbar .nav { padding:12px; }
.navbar .btn { margin-top:0; }

.btn-lg { font-size:16px; padding:16px 40px; margin:5px 10px; }
.btn-success { background-color: #2cc76a; border-color: transparent; }
.btn-success:hover, .btn-success:focus, .btn-success:active { background-color: #22bb5f!important; color:#FFF!important; }
.btn-primary { background-color: #2db6d8; border-color: transparent; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #209ab8!important; color:#FFF!important; }
.btn-danger { background-color: #f45c57; border-color: transparent; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-color: #eb534e!important; color:#FFF!important; }
.navbar .nav > .active > a.btn { background-color: #22bb5f!important; color:#FFF!important; }

.hero-unit {
    background:none; text-align:center; padding: 60px; padding-top:130px;
    margin-bottom: 30px; font-size: 18px; font-weight: 400; line-height: 30px;
}
.hero-unit h1 { padding-bottom:15px; font-weight:800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.hero-unit h3 { font-weight:normal; padding-bottom:15px; line-height: 1.6; color: #e2e8f0; }

.slide2 { background:none; text-align:center; padding-top:90px; }
.slide2 h1 { font-size:50px; font-weight:bold; }
.slide3 { background:none; text-align:left; padding-top:100px; }
.slide3 h1 { font-size:50px; padding-top:90px; font-weight:bold; }
.slide3 h3 { font-size:20px; padding-right:20px; color: #e2e8f0; line-height: 1.5; }

/*==========2. MAIN FEATURES==============*/

.mainFeatures { margin-top:50px; }
.img-thumbnail { border:0; padding:20px 0; box-shadow:none; text-align: center; background: transparent; }
.modern-feature-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    padding: 30px 20px;
    transition: all 0.3s ease;
}
.modern-feature-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.08); transform: translateY(-5px); }
.img-thumbnail h4 { color: #2d3748; margin-bottom: 15px; font-weight: 700; }
.img-thumbnail p { color: #718096; }

/*==========3. MORE FEATURES==============*/

.PageHead { margin-top:60px; margin-bottom: 30px; }
.PageHead h1, .PageHead h3 { text-align:center; }
.PageHead h1 { font-weight: 800; color: #1a202c; }
.PageHead h3 { color: #a0aec0; font-weight: 500; font-size: 18px; margin-top: 10px; }

.features { margin:25px 0; float:left; }
.features img { float:left; padding:10px 20px 0 0; }
.features h4 { font-weight: 700; }
.features p { padding-left: 80px; }

/*==========4. FEATURES LAYOUT==============*/

.FeatLayout { margin-top:50px; }
.FeatLayout .Featimg { text-align:center; }
.lead { color: #4a5568; font-size: 18px; font-weight: 500; }
.ticklist { margin:0; padding:0; list-style:none; }
.ticklist li {
    width:50%; float:left; padding:5px 5px 5px 30px;
    box-sizing:border-box; background:url(../images/tick.png) no-repeat left center;
    color: #4a5568; font-weight: 500;
}

/*==========5. TESTIMONIALS==============*/

.Testimonials p { margin-top:10px; font-style: italic; color: #718096; }
.Testimonials .img-thumbnail img { border-radius:100%; border: 4px solid #f7fafc; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.Testimonials .img-thumbnail h5 { text-align: center; color: #2cc76a; font-weight: bold; margin: 18px 0; text-transform: uppercase; letter-spacing: 1px; }
.PartnersList { text-align:center; margin-top: 50px; opacity: 0.6; }

/*==========6. PLANS AND PRICING (MODERN CSS GRID) ==============*/

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 40px;
    align-items: center; /* Allows recommended plans to scale naturally */
}

/* Responsive grid rules */
@media (max-width: 1199px) {
    .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 40px auto; }
}

.PlanPricing {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid #edf2f7;
    z-index: 1;
}

.PlanPricing:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border-color: #2cc76a;
    z-index: 2;
}

/* The Recommended Plan Highlight */
.PlanPricing.Recommended {
    border: 2px solid #f45c57;
    transform: scale(1.05);
    box-shadow: 0 15px 45px rgba(244, 92, 87, 0.15);
    z-index: 2;
}
.PlanPricing.Recommended:hover {
    transform: scale(1.05) translateY(-10px);
}

.PlanPricing .planName { margin-bottom: 25px; }
.PlanPricing .planName h3 {
    color: #1a202c;
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}
.PlanPricing .planName p {
    color: #a0aec0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-weight: 600;
}
.PlanPricing .price {
    color: #2cc76a;
    font-size: 42px;
    font-weight: 800;
    display: block;
    line-height: 1;
}
.PlanPricing.Recommended .price { color: #f45c57; }

.PlanPricing .planFeatures {
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
    padding: 25px 0;
    margin-bottom: 25px;
}
.PlanPricing .planFeatures ul { margin:0; padding:0; list-style:none; }
.PlanPricing .planFeatures ul li {
    padding: 10px 0;
    color: #4a5568;
    font-size: 14px;
}
.PlanPricing .planFeatures ul li strong { color: #1a202c; }

.PlanPricing .btn { width: 100%; font-size: 14px; padding: 14px 20px; }

/*==========8. CONTACT ==============*/

.ContactUs { margin-top:25px; }
.ContactUs input[type=text], .ContactUs input[type=email] {
    height:55px; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: none; font-size: 15px;
}
.ContactUs textarea {
    height:150px; border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: none; font-size: 15px; padding: 15px;
}
.ContactUs input:focus, .ContactUs textarea:focus { border-color: #2cc76a; box-shadow: 0 0 0 3px rgba(44, 199, 106, 0.2); outline: none; }
.ContactUs .btn { width:100%; margin:5px 0; }

/*==========9. FOOTER ==============*/

.footer {
    position: relative;
    color: #fff;
    background: #1a202c; /* Modern dark footer */
    background-size:cover;
    margin-top:80px;
    padding-top: 50px;
}
.footerlinks { margin:20px 0; }
.footerlinks p { color:#a0aec0; text-transform:uppercase; padding-top:15px; font-weight: 700; letter-spacing: 1px; }
.footerlinks ul { margin:0; padding:0; list-style:none; }
.footerlinks ul li { padding:5px 0; }
.footerlinks ul li a { color:#edf2f7; transition: color 0.2s; }
.footerlinks ul li a:hover { color: #2cc76a; }
.copyright { margin:30px 0; color: #718096; font-size: 14px; border-top: 1px solid #2d3748; padding-top: 20px; text-align: center;}

/*==========10. SCROLL UP==============*/
.scrollup {
    width:40px; height:40px; opacity:0.6; position:fixed; bottom:30px; right:30px;
    display:none; text-indent:-9999px; background: url('../images/icon_top.png') no-repeat;
    transition: opacity 0.3s;
}
.scrollup:hover { opacity: 1; }

/*==========11. MEDIA QUERIES==============*/

@media (max-width: 979px) {
    .hero-unit { padding: 190px 0 0 0; }
    .hero-unit h1 { font-size:42px; }
    .navbar .navbar-btn { margin-top: 20px; background: transparent; text-shadow: none; border: 0; box-shadow: none; }
    .navbar-fixed-top.navbar-absolute { position: absolute; margin: 0; }
    .slide2, .slide3 { padding-top: 150px; }
    .slide3 h1, .slide2 h1 { font-size:34px; }
}

@media (max-width: 767px) {
    .jumbotron { padding: 20px; margin-top: -20px; height:auto; }
    .hero-unit { padding: 100px 0 0 0; }
    .hero-unit h1 { font-size:32px; }
    .flex-direction-nav { display: none; }
    .navbar .navbar-btn { margin-top: 23px; }
    .footer { padding: 20px; margin-bottom: -20px; }
}

.img-responsive { width:auto \9; }