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

/* ==========================
 Site Developed  by Ryt Click 
========================== */
:root {

    /* Brand Colors */
    --maincolor: #0B5ED7;
    --secondary: #008bab;
    --lightprimary: #E7F0FF;
    --lightsecondary: #F5F5F5;
    --headingcolor: #0A0A0A;
    --textcolor: #202020;
    --mutedtext: #6C757D;
    --bordercolor: #E5E7EB;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
    --commonbr: 12px;
    --capsule: 999px;
    --smallbr: 6px;
    --smooth: all 0.3s ease-in-out;
    --headingfont: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --bodyfont: 'Poppins', sans-serif;
}

body {
    font-family: var(--bodyfont);
    color: var(--textcolor);
    background-color: #ffffff;
}
a{
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--headingfont);
}
section.commonSection{
    padding: 40px 20px;
}
/* ==========================
   Header
========================== */
.siteHeader {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    z-index: 1000;
    transition: var(--smooth);
}

.siteHeader.hide {
    transform: translateY(-100%);
}

.headerInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.logo img {
    height: 45px;
}

.mainNav {
    display: flex;
    gap: 30px;
}

.mainNav a {
    font-weight: 500;
    color: var(--headingcolor);
}

.menuToggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
}

/* ==========================
   Mobile Menu
========================== */
.menuOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    display: none;
    flex-direction: column;
    padding: 40px;
}

.menuOverlay.active {
    display: flex;
}

.closeMenu {
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    align-self: flex-end;
}

.mobileNav {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.mobileNav a {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

/* ==========================
   CTA Button
========================== */
a.ctaBtn,
button.ctaBtn {
    height: 50px;
    padding: 0 20px;
    background: var(--secondary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    border-radius: 10px;
    border: 2px solid var(--secondary);
    transition: var(--smooth);
}

a.ctaBtn:hover,
button.ctaBtn:hover,
a.ctaBtn:focus,
button.ctaBtn:focus {
    background: #fff;
    color: var(--secondary);
}

/* ==========================
   Input Box (Your Provided)
========================== */
.inputBox {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 20px;
    position: relative;
}

.inputBox input {
    padding-left: 50px;
    height: 50px;
    border: 1px solid #eee;
    border-radius: 7px;
    width: 100%;
    transition: var(--smooth);
    outline: none;
}

.inputBox i {
    height: 50px;
    width: 50px;
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: var(--smooth);
    color: var(--secondary);
}

.inputBox input:focus {
    border-color: var(--maincolor);
}

.inputBox input:focus ~ i {
    color: var(--maincolor);
}

/* ==========================
   Responsive
========================== */
@media (max-width: 991px) {
    .mainNav,
    .ctaBtn {
        display: none;
    }

    .menuToggle {
        display: block;
    }}

    /* ==========================
   About Section
========================== */
.aboutUs {
    background: #fff;
}



.aboutTag {
    display: inline-block;
    background: var(--lightprimary);
    color: var(--maincolor);
    padding: 6px 14px;
    border-radius: var(--capsule);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 15px;
}

.aboutContent h2 {
    font-size: clamp(28px, 4vw, 40px);
    margin-bottom: 10px;
}

.aboutContent h2 span {
    color: var(--maincolor);
}

.aboutSub {
    color: var(--mutedtext);
    font-weight: 500;
    margin-bottom: 20px;
}

.aboutContent p {
    font-size: 16px;
    margin-bottom: 15px;
    color: var(--textcolor);
}

/* ==========================
   About Image
========================== */
.aboutImage {
    position: relative;
}

.aboutImage img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--commonbr);
}

/* ==========================
   Responsive
========================== */
@media (max-width: 991px) {
    .aboutContent {
        max-width: 100%;
    }
}

/* ==========================
   Services Section
========================== */
.ourServices {
    background: var(--lightsecondary);
}

/* Service Card */
.serviceCard {
    background: #fff;
    padding: 30px;
    border-radius: var(--commonbr);
    box-shadow: var(--shadow-sm);
    height: 100%;
    transition: var(--smooth);
    position: relative;
}

.serviceCard:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}

/* Icon */
.serviceIcon {
    width: 55px;
    height: 55px;
    background: var(--lightprimary);
    color: var(--maincolor);
    border-radius: var(--capsule);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 15px;
}

.serviceCard h5 {
    font-weight: 600;
    margin-bottom: 10px;
}

.serviceCard p {
    color: var(--textcolor);
    font-size: 15px;
}

/* Actions */
.serviceActions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.callBtn,
.viewImg {
    height: 50px;
    padding: 0 16px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    transition: var(--smooth);
    border: 2px solid var(--bordercolor);
    color: var(--headingcolor);
}

.callBtn:hover,
.viewImg:hover {
    background: var(--lightprimary);
    border-color: var(--maincolor);
}

/* Responsive */
@media (max-width: 768px) {
    .serviceActions {
        flex-direction: column;
    }
}
/* ==========================
Breadcrumb / BreadHead
========================== */

.breadHead{
position:relative;
padding:120px 0 90px;
background-size:cover;
background-position:center bottom;
background-attachment: fixed;
color:#fff;
}

.breadOverlay{
position:absolute;
inset:0;
background:linear-gradient(
rgba(0,0,0,0.55),
rgba(0,0,0,0.45)
);
}

.breadContent{
position:relative;
z-index:2;
max-width:700px;
}

.breadContent h1{
font-family:var(--headingfont);
font-size:42px;
margin-bottom:10px;
}

.breadContent p{
color:rgba(255,255,255,0.9);
margin-bottom:20px;
}

.breadCrumb{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
}

.breadCrumb a{
color:#fff;
text-decoration:none;
font-weight:500;
opacity:0.9;
transition:var(--smooth);
}

.breadCrumb a:hover{
opacity:1;
color:var(--lightprimary);
}

.breadSep{
display:flex;
align-items:center;
}

.breadCurrent{
color:var(--lightprimary);
font-weight:600;
}

/* responsive */

@media(max-width:768px){

.breadHead{
padding:90px 0 70px;
}

.breadContent h1{
font-size:30px;
}

}
/* Lightbox caption styling */

.lb-data .lb-caption{
font-family:var(--bodyfont);
font-size:14px;
line-height:1.5;
color:#fff;
}

.lbTitle{
font-size:16px;
font-weight:600;
margin-bottom:4px;
}

.lbCaption{
opacity:0.85;
font-size:13px;
}