/* ==========================
   Solar6 Enterprises
   Main Stylesheet
========================== */

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

body{
    font-family:'Poppins',sans-serif;
    color:#222;
    background:#fff;
}

a{
    text-decoration:none;
}

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

/* ==========================
   Top Bar
========================== */

.topbar{
    background:#0B3D91;
    color:#fff;
    font-size:14px;
    padding:10px 0;
}

.topbar i{
    color:#FFC107;
    margin-right:8px;
}

/* ==========================
   Navbar
========================== */

.navbar{
    background:#fff;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.navbar-brand img{
    height:70px;
}

.nav-link{
    font-weight:600;
    color:#222 !important;
    margin-left:20px;
}

.nav-link:hover{
    color:#F9A826 !important;
}

.quote-btn,
.btn-warning{
    background:#F9A826;
    color:#fff;
    border:none;
    border-radius:50px;
    padding:12px 28px;
    font-weight:600;
}

.quote-btn:hover,
.btn-warning:hover{
    background:#0B3D91;
    color:#fff;
}

/* ==========================
   Hero Section
========================== */

.hero{
    background:linear-gradient(rgba(11,61,145,.88),
    rgba(11,61,145,.88)),
    url('../images/hero.jpg');

    background-size:cover;
    background-position:center;

    min-height:700px;

    display:flex;
    align-items:center;

    color:#fff;
}

.hero-tag{

    display:inline-block;

    background:#FFC107;

    color:#000;

    padding:10px 18px;

    border-radius:30px;

    margin-bottom:20px;

    font-weight:600;

}

.hero h1{

    font-size:58px;

    font-weight:700;

    line-height:1.2;

}

.hero h1 span{

    color:#FFC107;

}

.hero p{

    font-size:18px;

    margin:25px 0;

}

.hero-btn{

    margin-top:35px;

}

.hero-btn .btn{

    margin-right:15px;

}

.hero-image{

    width:100%;

    animation:float 4s infinite;

}

/* Floating Image */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/* ==========================
   Hero Counter
========================== */

.hero-box{

display:flex;

margin-top:40px;

gap:20px;

}

.hero-box div{

background:rgba(255,255,255,.12);

padding:20px;

border-radius:12px;

text-align:center;

backdrop-filter:blur(6px);

}

.hero-box h3{

font-size:30px;

color:#FFC107;

}

/* ==========================
   About Section
========================== */

.about{

padding:80px 0;

}

.about h2{

font-size:40px;

font-weight:700;

color:#0B3D91;

margin-bottom:20px;

}

.about ul{

margin-top:20px;

}

.about li{

margin-bottom:12px;

list-style:none;

font-size:17px;

}

/* =======================
   SERVICES SECTION
======================= */

.services{
    background:#f8f9fa;
    padding:80px 0;
}

.services h2{
    color:#0B3D91;
    font-weight:700;
    margin-bottom:10px;
}

.service-card{
    background:#fff;
    padding:35px 25px;
    border-radius:15px;
    text-align:center;
    transition:.4s;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    height:100%;
}

.service-card i{
    font-size:55px;
    color:#FFC107;
    margin-bottom:20px;
}

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

.service-card:hover{
    transform:translateY(-10px);
    background:#0B3D91;
    color:#fff;
}

.service-card:hover i{
    color:#FFD54F;
}

/* =======================
   WHY CHOOSE US
======================= */

.why-us{
    background:#ffffff;
    padding:80px 0;
}

.why-us h2{
    color:#0B3D91;
    font-weight:700;
}

.why-card{
    background:#fff;
    padding:30px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.4s;
    height:100%;
}

.why-card i{
    font-size:50px;
    color:#FFC107;
    margin-bottom:20px;
}

.why-card h4{
    margin-bottom:15px;
    font-weight:600;
}

.why-card:hover{
    background:#0B3D91;
    color:#fff;
    transform:translateY(-10px);
}

.why-card:hover i{
    color:#FFD54F;
}

/* ======================
   COUNTER SECTION
====================== */

.counter-section{

background:#0B3D91;

padding:70px 0;

color:#fff;

}

.counter-box{

padding:20px;

}

.counter-box h2{

font-size:50px;

font-weight:700;

color:#FFC107;

}

.counter-box p{

font-size:18px;

margin-top:10px;

}


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

.cta-section{

background:url('../images/hero.jpg') center center/cover;

padding:100px 0;

position:relative;

text-align:center;

color:#fff;

}

.cta-section::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(11,61,145,.85);

}

.cta-section .container{

position:relative;

z-index:2;

}

.cta-section h2{

font-size:42px;

font-weight:700;

margin-bottom:20px;

}

.cta-section p{

font-size:20px;

margin-bottom:35px;

}

/* ======================
   PRODUCTS
====================== */

.products-section{

padding:80px 0;

background:#f8f9fa;

}

.products-section h2{

color:#0B3D91;

font-weight:700;

}

.product-card{

background:#fff;

padding:20px;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.1);

text-align:center;

transition:.4s;

height:100%;

}

.product-card img{

height:220px;

width:100%;

object-fit:cover;

border-radius:10px;

margin-bottom:20px;

}

.product-card h4{

font-weight:600;

margin-bottom:15px;

}

.product-card:hover{

transform:translateY(-10px);

}

/* ======================
   PROJECTS
====================== */

.projects-section{

padding:80px 0;

background:#ffffff;

}

.projects-section h2{

color:#0B3D91;

font-weight:700;

}

.project-card{

position:relative;

overflow:hidden;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.15);

transition:.4s;

}

.project-card img{

width:100%;

height:280px;

object-fit:cover;

transition:.4s;

}

.project-card:hover img{

transform:scale(1.1);

}

.project-info{

position:absolute;

left:0;

bottom:0;

width:100%;

background:rgba(11,61,145,.9);

color:#fff;

padding:20px;

}

.project-info h4{

margin:0;

font-weight:600;

}

.project-info p{

margin:5px 0 0;

}

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

.footer{

background:#0B3D91;

color:#fff;

padding:70px 0 20px;

}

.footer h4{

margin-bottom:20px;

}

.footer-links{

list-style:none;

padding:0;

}

.footer-links li{

margin-bottom:10px;

}

.footer-links a{

color:#fff;

text-decoration:none;

}

.footer-links a:hover{

color:#FFC107;

}

/* Contact Strip */

.contact-strip{

background:#FFC107;

padding:50px 0;

text-align:center;

}

.contact-strip i{

color:#0B3D91;

margin-bottom:15px;

}

/* WhatsApp */

.whatsapp{

position:fixed;

right:20px;

bottom:20px;

width:60px;

height:60px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:#fff;

text-decoration:none;

z-index:999;

}

/* Call Button */

.call-btn{

position:fixed;

left:20px;

bottom:20px;

width:60px;

height:60px;

background:#0B3D91;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#fff;

text-decoration:none;

z-index:999;

}


/* ==========================
TESTIMONIALS
========================== */

.testimonial-section{
    padding:80px 0;
    background:#f8f9fa;
}

.testimonial-card{
    background:#fff;
    padding:30px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 5px 15px rgba(0,0,0,.1);
    transition:.3s;
    height:100%;
}

.testimonial-card:hover{
    transform:translateY(-8px);
}

.testimonial-card h5{
    color:#FFC107;
    font-size:24px;
}

.testimonial-card h6{
    color:#0B3D91;
    margin-top:15px;
}

/* ==========================
PAGE BANNER
========================== */

.page-banner{

background:#0B3D91;

padding:120px 0;

text-align:center;

color:#fff;

}

.page-banner h1{

font-size:48px;

font-weight:700;

}

.page-banner p{

font-size:20px;

margin-top:15px;

}

/* ABOUT PAGE */

.about-company{

padding:80px 0;

}

.about-company h2{

color:#0B3D91;

font-weight:700;

margin-bottom:20px;

}

.about-company p{

font-size:17px;

line-height:30px;

}

/*======================
Services Page
=======================*/

.services-page{

padding:80px 0;

background:#f8f9fa;

}

.service-box{

background:#fff;

padding:40px;

border-radius:15px;

text-align:center;

box-shadow:0 5px 20px rgba(0,0,0,.08);

transition:.4s;

height:100%;

}

.service-box:hover{

background:#0B3D91;

color:#fff;

transform:translateY(-10px);

}

.service-box i{

font-size:60px;

color:#FFC107;

margin-bottom:20px;

}

.service-box h3{

font-size:24px;

margin-bottom:15px;

font-weight:600;

}

/*========================
Products Page
=========================*/

.products-page{

padding:80px 0;

background:#f8f9fa;

}

.product-box{

background:#fff;

border-radius:15px;

overflow:hidden;

box-shadow:0 5px 20px rgba(0,0,0,.08);

transition:.4s;

text-align:center;

height:100%;

}

.product-box:hover{

transform:translateY(-10px);

}

.product-box img{

height:250px;

width:100%;

object-fit:cover;

}

.product-box h3{

margin-top:20px;

font-size:24px;

font-weight:600;

}

.product-box p{

padding:10px 20px;

}

.product-box .btn{

margin-bottom:25px;

}

/* ===========================
Projects Page
=========================== */

.projects-page{
    background:#f8f9fa;
    padding:80px 0;
}

.project-box{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.1);
    transition:.4s;
}

.project-box:hover{
    transform:translateY(-10px);
}

.project-box img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.project-content{
    padding:20px;
    text-align:center;
}

.project-content h4{
    color:#0B3D91;
    font-weight:600;
}

.project-content p{
    margin-bottom:0;
    color:#666;
}

/*=========================
Gallery Page
=========================*/

.gallery-page{

padding:80px 0;

background:#f8f9fa;

}

.gallery-box{

overflow:hidden;

border-radius:15px;

box-shadow:0 5px 15px rgba(0,0,0,.1);

transition:.4s;

}

.gallery-box img{

width:100%;

height:280px;

object-fit:cover;

transition:.5s;

}

.gallery-box:hover img{

transform:scale(1.1);

}

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

.contact-page{

padding:80px 0;

}

.contact-info{

background:#0B3D91;

color:#fff;

padding:40px;

border-radius:15px;

height:100%;

}

.contact-info h2{

margin-bottom:30px;

}

.contact-info p{

margin-bottom:20px;

font-size:17px;

}

.contact-info i{

color:#FFC107;

margin-right:10px;

}

.contact-form{

background:#fff;

padding:40px;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.1);

}

.contact-form .form-control{

height:55px;

}

.contact-form textarea{

height:auto !important;

}




/* Fix Navbar Overflow */

html, body{
    overflow-x: hidden;
}


.navbar{
    width:100%;
}


.navbar .container{
    max-width:1200px;
}


.navbar-nav{
    flex-wrap:wrap;
}


.navbar .form-control{
    width:150px;
}


.btn{
    white-space:nowrap;
}


/* Mobile Responsive */

@media(max-width:992px){

.navbar-collapse{
    background:white;
    padding:20px;
}


.navbar-nav{
    text-align:center;
}


.navbar .d-flex{
    margin-top:15px;
}


.navbar .btn{
    margin-top:15px;
}

}


.search-box{
    display:flex;
    align-items:center;
}


.search-box input{
    width:120px;
    height:40px;
    border:1px solid #ddd;
    border-radius:5px;
    padding:5px 10px;
}


.search-box button{
    height:40px;
    padding:0 15px;
    margin-left:5px;
    border:none;
    background:#198754;
    color:white;
    border-radius:5px;
}


@media(max-width:992px){

.search-box{
    margin-top:15px;
    margin-left:0!important;
}

.search-box input{
    width:100%;
}

}


/* Fix Right Side Overflow */

html, body {
    width: 100%;
    overflow-x: hidden;
}


.container,
.container-fluid {
    max-width: 100%;
}


.navbar {
    width: 100%;
}


.navbar .btn {
    white-space: nowrap;
}


img {
    max-width: 100%;
    height: auto;
}


/* Mobile Fix */

@media(max-width:991px){

.navbar-collapse{
    background:#212529;
    padding:15px;
}


.navbar-nav{
    text-align:center;
}


.navbar form{
    width:100%;
}


.navbar form input{
    width:100%;
}


.navbar .btn{
    margin:10px 0 0 0 !important;
    width:100%;
}


}


/* ===============================
   Website Overflow Fix
================================ */

html,
body {
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}


/* Container Fix */

.container,
.container-fluid {
    width:100%;
    max-width:100%;
}


/* Image Fix */

img {
    max-width:100%;
    height:auto;
}


/* Navbar Fix */

.navbar {
    width:100%;
}


.navbar-brand {
    max-width:250px;
    overflow:hidden;
}


.navbar-brand img {
    max-width:150px;
    object-fit:contain;
}



.navbar-nav .nav-link {
    white-space:nowrap;
}


/* Search Fix */

.navbar form {
    max-width:280px;
}


.navbar form input {
    min-width:0;
}



/* Button Fix */

.navbar .btn {
    white-space:nowrap;
}



/* Mobile Responsive */

@media(max-width:991px){


.navbar-collapse {

    background:#212529;
    padding:20px;

}


.navbar-nav {

    text-align:center;

}


.navbar form {

    width:100%;
    max-width:100%;

}


.navbar form input {

    width:100%;

}


.navbar .btn {

    width:100%;
    margin:10px 0 0 0 !important;

}


}

img{
    max-width:100%;
    height:auto;
}


.hero img{
    width:100%;
    object-fit:cover;
}

/* =========================
   GALLERY
========================= */

.gallery-section {
    background: #f7faff;
}

.gallery-title {
    color: #12458e;
    font-size: 42px;
    font-weight: 800;
    margin-top: 10px;
}

.gallery-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,.08);
    transition: .35s ease;
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(18,69,142,.16);
}

.gallery-image {
    width: 100%;
    height: 270px;
    overflow: hidden;
    background: #eef2f7;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: .45s ease;
}

.gallery-card:hover .gallery-image img {
    transform: scale(1.08);
}

.gallery-content {
    padding: 18px 20px;
}

.gallery-content h4 {
    margin: 0;
    color: #123f82;
    font-size: 19px;
    font-weight: 700;
}