:root{
    --clr-primary: #2c296e;
	--clr-accent: #ff002a;
    --clr-accent-rgb: 255, 109, 7;
    --clr-neutral: #262626;
    --clr-black: #000000;
    --clr-white: #FFFFFF;
    --icon-font: "Font Awesome 6 Free";
	--body-font-family: 'Manrope', sans-serif;
	--title-font-family: 'Poppins', sans-serif;
}
body{
    font-family: var(--body-font-family);
    font-size:  1rem;
    font-weight: 400;
    color: var(--clr-neutral);
}
h1,h2,h3,h4,h5,h6{
    font-family: var(--title-font-family);
}
.container{
    max-width: 81rem;
}
.gradient-btn {
    background: linear-gradient(270deg, red, blue);
    background-size: 400% 400%;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: gradientShift 4s ease infinite;
}
.gradient-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* .gradient-border-btn {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: #111; 
    border: none;
    border-radius: 10px;
    cursor: pointer;
    z-index: 1;
    overflow: hidden;
}
.gradient-border-btn::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(270deg, red, blue, red);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: borderShift 5s ease infinite;
}
.gradient-border-btn::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(270deg, red, blue);
    background-size: 400% 400%;
    border-radius: inherit;
    z-index: -1;
    animation: innerShift 5s ease infinite;
}
@keyframes borderShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes innerShift {
    0% { background-position: 100% 50%; }
    50% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
} */
/*|============================================================================
    Hero Banner
===============================================================================|*/
.hero-banner{}
.hero-banner {
    background-image: url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    min-height: 600px;
    position: relative;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.45) 35%, rgba(255, 255, 255, 0) 70%);
}
.home-logo{}
.home-logo img{
    height: 60px;
}
/*| Media Query |==============================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){
     .hero-banner{
        padding-bottom: 8rem;
    }
    .home-logo img{
        width: 300px;
    }
}
@media (max-width: 991.98px){
    .hero-banner{
        padding-bottom: 6rem;
    }
    .home-logo{
        width: 100%;
        /* margin-top: 50px; */
    }
    .home-logo img{
        width: 100%;
    }
}
@media (max-width: 767.98px){
    .hero-banner{
        padding-bottom: 7rem;
    }
    .home-logo{
        left: 50% !important;
        transform: translateX(-50%);
    }
    .display-3{
        font-size: 34px !important;
        line-height: 1.6;
    }
}
/*|============================================================================
    Welcome Section
===============================================================================|*/
.welcome-section{}
/*| Media Query |==============================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (max-width: 991.98px){}
/*|============================================================================
    Header
===============================================================================|*/
.home-service-section{}
.home-service-section .card{
    overflow: hidden;
    text-align: center;
    /* border: 4px solid var(--clr-accent); */
    border: none;
    border-radius: .5rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.home-service-section .card .card-body{}
.home-service-section .card .card-body .card-title{
    color: var(--clr-primary);
    font-size: 1.375rem;
    margin-bottom: .75rem;
}
/*| Media Query |==============================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){
    .home-service-section .card{
        height: 100%;
        border-radius: 1rem;
    }
    .home-service-section .card .card-body .card-title{
        font-size: 1.5rem;
    }
}
@media (max-width: 991.98px){
    .home-service-section .card{
        border: 2px solid var(--clr-primary);
    }
}
/*|============================================================================
    Header
===============================================================================|*/
.lead-capture-form{}
.lead-capture-form #whatsappForm .form-control{
    padding: .75rem 1rem;
}
#whatsappForm .btn{
    padding: .5rem 1rem;
}
/*| Media Query |==============================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (max-width: 991.98px){
    .lead-capture-form #whatsappForm .form-control{
        padding: .5rem 1rem;
    }
}
/*|============================================================================
    Header
===============================================================================|*/
/*| Media Query |==============================================================|*/
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (max-width: 991.98px){}