/* ===================================
   WELPA ENTERPRISES LIMITED
   Main Stylesheet
=================================== */

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

/* ===================================
   Variables
=================================== */

:root{

    --primary:#0B3C5D;
    --secondary:#D4A017;
    --dark:#1B1B1B;
    --light:#F8F9FA;
    --white:#ffffff;
    --grey:#666;
    --transition:.35s ease;

}

/* ===================================
   Global
=================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    color:#333;
    background:#fff;
    overflow-x:hidden;
    line-height:1.7;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    transition:var(--transition);

}

section{

    padding:90px 0;

}

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

.navbar{

    background:rgba(10,10,10,.95)!important;
    backdrop-filter:blur(8px);
    transition:.4s;

}

.navbar-brand{

    padding:4px 0;

}

.navbar-brand img{

    display:block;
    width:auto;
    height:64px;
    border-radius:6px;

}

.nav-link{

    color:white!important;
    font-weight:500;
    margin-left:18px;
    position:relative;

}

.nav-link::after{

    content:'';
    position:absolute;
    width:0%;
    left:0;
    bottom:-5px;
    height:2px;
    background:var(--secondary);
    transition:.3s;

}

.nav-link:hover::after{

    width:100%;

}

.nav-link:hover{

    color:var(--secondary)!important;

}

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

.page-header{

    padding:160px 0 90px;
    background:var(--primary);

}

.page-header h1{

    color:var(--white);

}

.hero{

    height:100vh;

    background:

    linear-gradient(rgba(0,0,0,.65),
    rgba(0,0,0,.65)),

    url("../images/hero.jpg");

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

}

.overlay{

    width:100%;
    height:100%;
    display:flex;

}

.hero h1{

    font-size:4rem;
    font-weight:800;
    margin-bottom:25px;

}

.hero p{

    font-size:1.2rem;

}

.hero .btn{

    padding:15px 35px;
    border-radius:50px;
    font-weight:600;

}

/* ===================================
   Buttons
=================================== */

.btn-warning{

    background:var(--secondary);
    border:none;
    color:#fff;

}

.btn-warning:hover{

    background:#bb8e08;
    transform:translateY(-3px);

}

.btn-outline-light:hover{

    color:var(--dark);

}

/* ===================================
   Headings
=================================== */

h2{

    font-size:2.5rem;
    font-weight:700;
    color:var(--primary);
    margin-bottom:25px;

}

h4{

    font-weight:600;
    color:var(--primary);

}

/* ===================================
   Cards
=================================== */

.card{

    border-radius:18px;
    transition:.35s;
    overflow:hidden;

}

.card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 15px 35px rgba(0,0,0,.15)!important;

}

.card-body{

    padding:40px;

}

.card i{

    transition:.4s;

}

.card:hover i{

    transform:scale(1.15);

}

/* ===================================
   About Image
=================================== */

img.rounded{

    border-radius:18px!important;

}

.shadow{

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

}

/* ===================================
   Statistics
=================================== */

.bg-dark{

    background:var(--primary)!important;

}

.bg-dark h1{

    font-size:3rem;
    font-weight:800;
    color:var(--secondary);

}

.bg-dark p{

    color:#ddd;

}

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

section:last-of-type{

    background:#f5f7fa;

}

/* ===================================
   Footer
=================================== */

footer{

    background:#071E30!important;

}

footer h4{

    color:var(--secondary);

}

footer p{

    color:#ccc;

}

footer i{

    color:var(--secondary);
    margin-right:10px;

}

footer hr{

    border-color:rgba(255,255,255,.15);

}

/* ===================================
   Hover Effects
=================================== */

.btn{

    transition:.3s;

}

.btn:hover{

    transform:translateY(-4px);

}

/* ===================================
   Animations
=================================== */

.hero h1{

    animation:fadeDown 1s;

}

.hero p{

    animation:fadeUp 1.4s;

}

.hero .btn{

    animation:fadeUp 1.8s;

}

@keyframes fadeDown{

    from{

        opacity:0;
        transform:translateY(-50px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(60px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.why-choose-carousel,
.why-choose-carousel .carousel-inner,
.why-choose-carousel .carousel-item{

    height:420px;

}

.why-choose-image{

    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;

}

/* ===================================
   Responsive
=================================== */

@media(max-width:992px){

.hero h1{

font-size:3rem;

}

}

@media(max-width:768px){

.why-choose-carousel,
.why-choose-carousel .carousel-inner,
.why-choose-carousel .carousel-item{

height:300px;

}

.hero{

text-align:center;

}

.hero h1{

font-size:2.4rem;

}

.hero p{

font-size:1rem;

}

section{

padding:70px 0;

}

.card{

margin-bottom:25px;

}

.navbar-brand img{

height:50px;

}

}

@media(max-width:576px){

.hero h1{

font-size:2rem;

}

.hero .btn{

display:block;
width:100%;
margin-bottom:15px;

}

h2{

font-size:2rem;

}

}

/* ===================================
   Scrollbar
=================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#eee;

}

::-webkit-scrollbar-thumb{

background:var(--secondary);
border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#bb8e08;

}