/*=====================================================
TEEMART SOLUTIONS
Modern Corporate Website
Author: Rejigprocess Technology
======================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

:root{

    --primary:#005baa;
    --secondary:#003f7d;
    --accent:#00b4ff;

    --dark:#111827;
    --light:#f8fafc;

    --white:#fff;
    --text:#555;

    --shadow:0 15px 40px rgba(0,0,0,.08);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:'Poppins',sans-serif;
    color:var(--text);
    overflow-x:hidden;
    line-height:1.8;

}

img{

    max-width:100%;

}

a{

    text-decoration:none;
    transition:.35s;

}

.section-padding{

    padding:100px 0;

}

/*==============================
TOP BAR
==============================*/

.top-bar{

    background:var(--secondary);
    color:#fff;
    font-size:14px;
    padding:10px 0;

}

.top-bar a{

    color:#fff;
    margin-left:15px;

}

.top-bar a:hover{

    color:#ffc107;

}

/*==============================
NAVBAR
==============================*/

.navbar{

    background:#fff;
    box-shadow:0 4px 20px rgba(0,0,0,.08);
    padding:15px 0;

}

.navbar-brand img{

    height:60px;

}

.navbar-nav .nav-link{

    color:#222;
    font-weight:600;
    padding:15px 18px;

}

.navbar-nav .nav-link:hover{

    color:var(--primary);

}

.navbar-nav .active{

    color:var(--primary)!important;

}

.dropdown-menu{

    border:none;
    border-radius:10px;
    box-shadow:var(--shadow);

}

.dropdown-item{

    padding:12px 20px;

}

.dropdown-item:hover{

    background:var(--primary);
    color:#fff;

}

/*==============================
HERO
==============================*/

.hero{

    height:90vh;

    background:url("../images/slider1.jpg") center center;

    background-size:cover;

    position:relative;

    display:flex;

    align-items:center;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

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

}

.hero .container{

    position:relative;

    z-index:2;

}

.hero h1{

    color:#fff;

    font-size:60px;

    font-weight:800;

}

.hero p{

    color:#fff;

    font-size:20px;

    margin:25px 0;

    max-width:700px;

}

.hero .btn{

    margin-right:15px;

}

/*==============================
BUTTONS
==============================*/

.btn-primary{

    background:var(--primary);

    border:none;

    border-radius:40px;

    padding:14px 35px;

}

.btn-primary:hover{

    background:var(--secondary);

}

.btn-outline-light{

    border-radius:40px;

    padding:14px 35px;

}

/*==============================
SECTION TITLE
==============================*/

.section-title{

    margin-bottom:70px;

    text-align:center;

}

.section-title h2{

    font-size:42px;

    font-weight:700;

    color:#222;

}

.section-title p{

    color:#777;

    max-width:700px;

    margin:auto;

}

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

.about-image{

    overflow:hidden;

    border-radius:15px;

}

.about-image img{

    border-radius:15px;

}

.about-content h2{

    font-size:42px;

    margin-bottom:20px;

}

.about-content p{

    margin-bottom:20px;

}

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

.service-card{

    background:#fff;

    border-radius:15px;

    padding:40px 30px;

    box-shadow:var(--shadow);

    text-align:center;

    transition:.4s;

    height:100%;

}

.service-card:hover{

    transform:translateY(-10px);

}

.service-card i{

    width:90px;

    height:90px;

    background:var(--primary);

    color:#fff;

    border-radius:50%;

    line-height:90px;

    font-size:36px;

    margin-bottom:25px;

}

.service-card h4{

    margin-bottom:15px;

    font-weight:700;

}

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

.why-us{

    background:#f8fbff;

}

.why-card{

    text-align:center;

    background:#fff;

    padding:35px;

    border-radius:15px;

    box-shadow:var(--shadow);

    transition:.4s;

}

.why-card:hover{

    transform:translateY(-8px);

}

.why-card i{

    font-size:40px;

    color:var(--primary);

    margin-bottom:20px;

}

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

.counter-section{

    background:linear-gradient(rgba(0,40,80,.8),rgba(0,40,80,.8)),url("../images/counter.jpg");

    background-size:cover;

    color:#fff;

    padding:100px 0;

}

.counter-box{

    text-align:center;

}

.counter{

    font-size:55px;

    font-weight:700;

}

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

.project-card{

    overflow:hidden;

    border-radius:15px;

    position:relative;

}

.project-card img{

    transition:.5s;

}

.project-card:hover img{

    transform:scale(1.1);

}

.project-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,91,170,.85);

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    color:#fff;

    opacity:0;

    transition:.5s;

}

.project-card:hover .project-overlay{

    opacity:1;

}

/*==============================
TESTIMONIAL
==============================*/

.testimonial-card{

    background:#fff;

    padding:40px;

    border-radius:15px;

    box-shadow:var(--shadow);

}

.testimonial-card img{

    width:80px;

    border-radius:50%;

    margin-bottom:20px;

}

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

.contact-section{

    background:#f7f9fc;

}

.contact-box{

    background:#fff;

    padding:40px;

    border-radius:15px;

    box-shadow:var(--shadow);

}

.form-control{

    border-radius:8px;

    height:52px;

}

textarea.form-control{

    height:170px;

}

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

footer{

    background:#0f172a;

    color:#ddd;
    
    padding-top: 50px;

}

.footer-top{

    padding:80px 0;

}

.footer-logo{
    display: block;
    margin-top: 30px;
    margin-bottom: 20px;
}
.footer-title{

    color:#fff;

    margin-bottom:25px;

}

.footer-links{

    list-style:none;

    padding:0;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

    color:#ccc;

}

.footer-links a:hover{

    color:#fff;

}

.social-icons a{

    width:45px;

    height:45px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:#fff;

    border-radius:50%;

    margin-right:10px;

}

.social-icons a:hover{

    background:var(--accent);

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.1);

    text-align:center;

    padding:20px 0;

}

/*==============================
WHATSAPP
==============================*/

.whatsapp{

    position:fixed;

    right:20px;

    bottom:90px;

    width:60px;

    height:60px;

    background:#25d366;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    z-index:999;

}

/*==============================
BACK TO TOP
==============================*/

#backToTop{

    position:fixed;

    right:20px;

    bottom:20px;

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:#fff;

    border-radius:50%;

    display:none;

}

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

@media(max-width:991px){

.hero h1{

font-size:42px;

}

.section-padding{

padding:80px 0;

}

}

@media(max-width:768px){

.hero{

height:75vh;

text-align:center;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:17px;

}

.top-bar{

text-align:center;

}

.navbar-brand img{

height:50px;

}

}

@media(max-width:576px){

.hero h1{

font-size:28px;

}

.hero p{

font-size:15px;

}

.section-title h2{

font-size:30px;

}

}

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

.navbar{

    padding:15px 0;

    transition:.35s;

}

.navbar-brand img{

    height:60px;

}

.navbar-nav .nav-link{

    color:#222;

    font-weight:600;

    font-size:15px;

    margin:0 6px;

    position:relative;

    transition:.3s;

}

.navbar-nav .nav-link:hover{

    color:var(--primary);

}

.navbar-nav .nav-link.active{

    color:var(--primary);

}

.navbar-nav .nav-link::after{

    content:"";

    position:absolute;

    width:0;

    left:0;

    bottom:-5px;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.navbar-nav .nav-link:hover::after,

.navbar-nav .nav-link.active::after{

    width:100%;

}

.dropdown-menu{

    border:none;

    border-radius:12px;

    box-shadow:0 20px 40px rgba(0,0,0,.12);

    padding:12px 0;

}

.dropdown-item{

    padding:12px 24px;

    font-weight:500;

}

.dropdown-item:hover{

    background:#f3f8fd;

    color:var(--primary);

    padding-left:28px;

}

.navbar .btn{

    padding:12px 26px;

    font-weight:600;

}

@media(max-width:991px){

.navbar{

padding:10px 0;

}

.navbar-collapse{

margin-top:20px;

background:#fff;

padding:20px;

border-radius:10px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.navbar-nav .nav-link{

padding:12px 0;

}

.dropdown-menu{

box-shadow:none;

border-left:3px solid var(--primary);

margin-left:15px;

}

}

.logo{
    height:65px;
    width:auto;
}

.navbar{
    padding:15px 0;
    background:#fff;
}

.navbar-nav .nav-link{

    color:#222;
    font-weight:600;
    padding:12px 18px;
    text-transform:uppercase;
    font-size:14px;

}

.navbar-nav .nav-link:hover{

    color:#0077c8;

}

.navbar-nav .active{

    color:#0077c8!important;

}

.dropdown-menu{

    border:none;
    border-radius:12px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.dropdown-item{

    padding:12px 20px;

}

.dropdown-item:hover{

    background:#0077c8;
    color:#fff;

}

.btn-primary{

    background:#0077c8;
    border:none;

}

.btn-primary:hover{

    background:#0056a6;

}

#hero{
    margin-top:0;
}

.carousel-item{
    height:700px;
    position:relative;
}

.carousel-item img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.carousel-item::before{

    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:1;

}

.carousel-caption{

    position:absolute;
    top:50%;
    left:8%;
    transform:translateY(-50%);
    text-align:left;
    z-index:2;
    max-width:650px;
    right:auto;
    bottom:auto;

}

.carousel-caption h1{

    font-size:60px;
    font-weight:700;
    margin-bottom:20px;

}

.carousel-caption h4{

    font-size:30px;
    margin-bottom:20px;

}

.carousel-caption p{

    font-size:20px;
    margin-bottom:35px;

}

.carousel-control-next,
.carousel-control-prev{

    width:6%;

}

.carousel-indicators button{

    width:12px;
    height:12px;
    border-radius:50%;

}

@media(max-width:768px){

.carousel-item{

height:500px;

}

.carousel-caption{

left:5%;
right:5%;

}

.carousel-caption h1{

font-size:34px;

}

.carousel-caption h4{

font-size:20px;

}

.carousel-caption p{

font-size:16px;

}

}

/*=========================
 HERO SECTION
==========================*/

#hero{
    margin-top:0;
}

.hero-image{

    height:90vh;

    object-fit:cover;

    filter:brightness(45%);
}

.carousel-caption{

    bottom:22%;

    z-index:2;
}

.carousel-caption h1{

    font-size:60px;

    font-weight:800;

    text-shadow:2px 2px 10px rgba(0,0,0,.7);
}

.carousel-caption p{

    font-size:22px;

    margin:20px auto;

    max-width:700px;
}

.carousel-caption .btn{

    padding:15px 40px;

    font-size:18px;

    border-radius:50px;
}

.carousel-indicators button{

    width:12px;

    height:12px;

    border-radius:50%;
}

@media(max-width:768px){

.hero-image{

height:70vh;

}

.carousel-caption{

bottom:12%;

}

.carousel-caption h1{

font-size:34px;

}

.carousel-caption p{

font-size:16px;

}

}

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

.gallery-card{

    background:#fff;

    transition:.4s;

}

.gallery-card:hover{

    transform:translateY(-8px);

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

}

.gallery-image{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s;

}

.gallery-card:hover .gallery-image{

    transform:scale(1.08);

}

.gallery-caption{

    padding:20px;

    text-align:center;

    background:#fff;

}

.gallery-caption h5{

    margin:0;

    font-weight:600;

    color:#003A70;

}

/* Preloader */

.preloader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#fff;
    z-index:9999;
}

/* Navbar */

.navbar-scrolled{
    background:#003A70 !important;
    box-shadow:0 5px 20px rgba(0,0,0,.15);
    transition:.3s;
}

/* Back To Top */

.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:45px;

    height:45px;

    display:none;

    text-align:center;

    line-height:45px;

    background:#003A70;

    color:#fff;

    border-radius:50%;

    z-index:999;

}

.back-to-top:hover{

    background:#0d6efd;

    color:#fff;

}