/*==================================
Google Font
==================================*/

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #fff;
    overflow-x: hidden;
}

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

.custom-navbar {

    padding: 18px 0;

    transition: .4s;

    background: rgba(8, 28, 48, .25);

    backdrop-filter: blur(14px);

    z-index: 999;

}

.navbar.scrolled {

    background: #0B2239;

    padding: 12px 0;

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

}

.logo {

    width: 58px;

}

.brand-text h3 {

    color: #fff;

    font-size: 18px;

    margin: 0;

    font-weight: 700;

    letter-spacing: 1px;

}

.brand-text span {

    color: #fff;

    font-size: 12px;

    letter-spacing: 7px;

}

.navbar-nav .nav-link {

    color: #fff;

    font-size: 18px;

    font-weight: 500;

    margin: 0 10px;

    transition: .3s;

}

.navbar-nav .nav-link:hover {

    color: #ff6a00;

}

.navbar-nav .active {

    color: #ff6a00 !important;

}

.dropdown-menu {

    border: none;

    border-radius: 15px;

    padding: 15px;

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

}

.dropdown-item {

    padding: 12px 20px;

    font-weight: 500;

}

.dropdown-item:hover {

    background: #ff6a00;

    color: #fff;

}

/*==================================
Icons
==================================*/

.nav-icons {

    gap: 12px;

}

.icon-btn {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    color: #fff;

    text-decoration: none;

    transition: .3s;

}

.icon-btn:hover {

    background: #ff6a00;

    color: #fff;

}

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

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: url("hero.avif");

    background-size: cover;

    background-position: center;

}

.overlay {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: rgba(8, 34, 57, .68);

}

.hero .container {

    position: relative;

    z-index: 2;

}

.small-title {

    color: #fff;

    font-size: 20px;

    margin-bottom: 25px;

    letter-spacing: 2px;

}

.hero h1 {

    color: #fff;

    font-size: 78px;

    font-weight: 800;

    line-height: 1.15;

}

.hero h1 span {

    display: block;

    color: #ff6a00;

}

.hero p {

    color: #fff;

    font-size: 24px;

    line-height: 42px;

    margin-top: 35px;

    margin-bottom: 45px;

    opacity: .95;

}

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

.hero-btn {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.btn-orange {

    background: #ff6a00;

    color: #fff;

    padding: 18px 42px;

    border-radius: 12px;

    font-size: 20px;

    font-weight: 600;

    transition: .3s;

}

.btn-orange:hover {

    background: #ff7f22;

    color: #fff;

    transform: translateY(-3px);

}

.btn-outline-light {

    padding: 18px 42px;

    border-radius: 12px;

    font-size: 20px;

    font-weight: 600;

}

.btn-outline-light:hover {

    background: #fff;

    color: #000;

}

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

@media(max-width:1200px) {

    .hero h1 {

        font-size: 62px;

    }

}

@media(max-width:992px) {

    .navbar-collapse {

        background: #0B2239;

        padding: 25px;

        border-radius: 15px;

        margin-top: 20px;

    }

    .hero {

        text-align: center;

    }

    .hero h1 {

        font-size: 50px;

    }

    .hero p {

        font-size: 18px;

        line-height: 34px;

    }

}

@media(max-width:768px) {

    .brand-text h3 {

        font-size: 16px;

    }

    .hero h1 {

        font-size: 42px;

    }

    .hero p {

        font-size: 17px;

    }

    .logo {

        width: 48px;

    }

}

@media(max-width:576px) {

    .hero h1 {

        font-size: 34px;

    }

    .hero-btn {

        flex-direction: column;

    }

    .hero-btn a {

        width: 100%;

    }

}


/*=========================
Clients Section
==========================*/

.clients-section {

    background: #0b2d4a;

    padding: 100px 0;

}

.section-tag {

    color: #ff7b00;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.section-title {

    font-size: 46px;

    font-weight: 700;

    color: #fff;

    margin-bottom: 20px;

}

.section-desc {

    color: #bfc8d6;

    font-size: 20px;

    line-height: 38px;

    max-width: 900px;

    margin: auto;

}

.trusted-title {

    color: #fff;

    font-size: 38px;

    font-weight: 700;

    margin-top: 60px;

    margin-bottom: 20px;

}

.client-card {

    background: #1b344d;

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

    border-radius: 15px;

    height: 170px;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .4s;

    overflow: hidden;

}

.client-card:hover {

    transform: translateY(-8px);

    background: #23486b;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);

}

.client-card img {

    max-width: 170px;

    max-height: 80px;

    filter: brightness(0) invert(1);

    transition: .4s;

}

.client-card:hover img {

    transform: scale(1.08);

}

@media(max-width:768px) {

    .section-title {

        font-size: 34px;

    }

    .section-desc {

        font-size: 17px;

        line-height: 30px;

    }

    .trusted-title {

        font-size: 30px;

    }

    .client-card {

        height: 140px;

    }

}


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

.services-section {

    background: #0b2d4a;

    padding: 100px 0;

}

.section-tag {

    display: inline-block;

    color: #ff7a00;

    font-size: 15px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 10px;

}

.section-heading {

    color: #ffffff;

    font-size: 48px;

    font-weight: 700;

    margin-bottom: 18px;

}

.section-subtitle {

    color: #bfc8d6;

    font-size: 20px;

    line-height: 36px;

    max-width: 850px;

    margin: auto;

}


/*==========================
SERVICE CARD
===========================*/

.service-card {

    background: #1d3147;

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

    border-radius: 18px;

    padding: 35px 28px;

    height: 100%;

    transition: .4s;

    position: relative;

    overflow: hidden;

}

.service-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 5px;

    background: #ff7a00;

    transition: .5s;

}

.service-card:hover::before {

    left: 0;

}


/*==========================
ICON
===========================*/

.service-icon {

    width: 70px;

    height: 70px;

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

    border-radius: 15px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 25px;

    transition: .4s;

}

.service-icon i {

    color: #ff7a00;

    font-size: 30px;

}


/*==========================
TEXT
===========================*/

.service-card h4 {

    color: #fff;

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 18px;

}

.service-card p {

    color: #b8c3cf;

    font-size: 17px;

    line-height: 31px;

    margin-bottom: 30px;

}

.service-card a {

    color: #ff7a00;

    text-decoration: none;

    font-weight: 600;

    font-size: 17px;

    transition: .3s;

}

.service-card a i {

    transition: .3s;

}


/*==========================
HOVER
===========================*/

.service-card:hover {

    transform: translateY(-10px);

    background: #243d57;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .35);

}

.service-card:hover .service-icon {

    background: #ff7a00;

    transform: rotate(-8deg);

}

.service-card:hover .service-icon i {

    color: #fff;

}

.service-card:hover a {

    color: #fff;

}

.service-card:hover a i {

    margin-left: 8px;

}


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

@media(max-width:1200px) {

    .section-heading {

        font-size: 42px;

    }

}

@media(max-width:992px) {

    .section-heading {

        font-size: 36px;

    }

    .service-card {

        margin-bottom: 15px;

    }

}

@media(max-width:768px) {

    .services-section {

        padding: 70px 0;

    }

    .section-heading {

        font-size: 30px;

    }

    .section-subtitle {

        font-size: 17px;

        line-height: 30px;

    }

    .service-card {

        padding: 28px 22px;

    }

    .service-card h4 {

        font-size: 24px;

    }

    .service-card p {

        font-size: 16px;

    }

}

@media(max-width:576px) {

    .section-heading {

        font-size: 28px;

    }

    .service-icon {

        width: 60px;

        height: 60px;

    }

    .service-icon i {

        font-size: 24px;

    }

}


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

.why-choose {

    background: #0b2d4a;

    padding: 110px 0;

}

/*=========================
Section Heading
=========================*/

.section-sub-title {

    display: inline-block;

    color: #ff7b00;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 15px;

}

.section-title {

    color: #ffffff;

    font-size: 52px;

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 30px;

}

.section-description {

    color: #b8c3cf;

    font-size: 18px;

    line-height: 34px;

    margin-bottom: 40px;

}

/*=========================
List
=========================*/

.choose-list {

    display: flex;

    flex-direction: column;

    gap: 22px;

}

.choose-item {

    display: flex;

    align-items: center;

    gap: 18px;

    color: #ffffff;

    font-size: 18px;

    font-weight: 500;

}

.choose-item i {

    width: 34px;

    height: 34px;

    border-radius: 50%;

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

    color: #ff7b00;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 15px;

}

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

.feature-box {

    background: #1d3147;

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

    border-radius: 18px;

    padding: 35px;

    height: 100%;

    transition: .4s;

    position: relative;

    overflow: hidden;

}

/* Orange Top Border */

.feature-box::before {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 5px;

    background: #ff7b00;

    transition: .5s;

}

.feature-box:hover::before {

    left: 0;

}

/*=========================
Icon
=========================*/

.feature-icon {

    width: 70px;

    height: 70px;

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

    border-radius: 15px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 25px;

    transition: .4s;

}

.feature-icon i {

    font-size: 28px;

    color: #ff7b00;

}

/*=========================
Text
=========================*/

.feature-box h4 {

    color: #ffffff;

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 18px;

}

.feature-box p {

    color: #b8c3cf;

    font-size: 17px;

    line-height: 30px;

}

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

.feature-box:hover {

    transform: translateY(-10px);

    background: #243d57;

    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);

}

.feature-box:hover .feature-icon {

    background: #ff7b00;

    transform: rotate(-8deg);

}

.feature-box:hover .feature-icon i {

    color: #ffffff;

}

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

@media(max-width:1200px) {

    .section-title {

        font-size: 46px;

    }

}

@media(max-width:992px) {

    .why-choose {

        padding: 80px 0;

    }

    .section-title {

        font-size: 38px;

    }

    .section-description {

        margin-bottom: 35px;

    }

}

@media(max-width:768px) {

    .section-title {

        font-size: 32px;

    }

    .section-description {

        font-size: 17px;

        line-height: 30px;

    }

    .feature-box {

        padding: 28px;

    }

    .feature-box h4 {

        font-size: 23px;

    }

    .feature-box p {

        font-size: 16px;

    }

    .choose-item {

        font-size: 16px;

    }

}

@media(max-width:576px) {

    .section-title {

        font-size: 28px;

    }

    .feature-icon {

        width: 60px;

        height: 60px;

    }

    .feature-icon i {

        font-size: 24px;

    }

}

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

.projects-section{
    background:#0b2d4a;
    padding:110px 0;
}

/*==========================
Heading
==========================*/

.projects-section .section-sub-title{
    display:inline-block;
    color:#ff7b00;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.projects-section .section-title{
    color:#fff;
    font-size:50px;
    font-weight:700;
    margin-bottom:18px;
}

.projects-section .section-description{
    color:#b9c4cf;
    font-size:19px;
    line-height:34px;
    max-width:720px;
}

/*==========================
Button
==========================*/

.project-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#ff7b00;

    color:#fff;

    text-decoration:none;

    padding:18px 34px;

    border-radius:10px;

    font-weight:600;

    transition:.4s;

}

.project-btn:hover{

    background:#ff8d1e;

    color:#fff;

    transform:translateY(-4px);

}

/*==========================
Project Card
==========================*/

.project-card{

    background:#172d43;

    border-radius:20px;

    overflow:hidden;

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

    transition:.4s;

    height:100%;

}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

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

.project-image{

    position:relative;

    overflow:hidden;

}

.project-image img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.6s;

}

.project-card:hover img{

    transform:scale(1.08);

}

/*==========================
Tag
==========================*/

.project-tag{

    position:absolute;

    top:20px;

    left:20px;

    background:#ff7b00;

    color:#fff;

    font-size:13px;

    font-weight:700;

    padding:8px 18px;

    border-radius:30px;

    letter-spacing:.5px;

}

/*==========================
Content
==========================*/

.project-content{

    padding:35px;

}

.project-content small{

    color:#ff7b00;

    font-size:15px;

    font-weight:600;

}

.project-content h3{

    color:#fff;

    font-size:34px;

    font-weight:700;

    margin:15px 0 18px;

    line-height:1.3;

}

.project-content p{

    color:#bcc6d2;

    font-size:18px;

    line-height:32px;

    margin-bottom:28px;

}

/*==========================
List
==========================*/

.project-content ul{

    padding:0;

    margin:0 0 30px;

    list-style:none;

}

.project-content ul li{

    color:#fff;

    margin-bottom:14px;

    font-size:17px;

}

.project-content ul li i{

    color:#ff7b00;

    margin-right:12px;

}

/*==========================
Link
==========================*/

.project-content a{

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}

.project-content a i{

    margin-left:8px;

    transition:.3s;

}

.project-content a:hover{

    color:#ff7b00;

}

.project-content a:hover i{

    transform:translateX(6px);

}

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

@media(max-width:1200px){

.project-content h3{

font-size:30px;

}

}

@media(max-width:992px){

.projects-section{

padding:80px 0;

}

.project-content{

padding:28px;

}

.project-content h3{

font-size:28px;

}

.project-image img{

height:260px;

}

}

@media(max-width:768px){

.projects-section .section-title{

font-size:34px;

}

.projects-section .section-description{

font-size:17px;

line-height:30px;

}

.project-content h3{

font-size:24px;

}

.project-content p{

font-size:16px;

line-height:28px;

}

.project-btn{

width:100%;

justify-content:center;

}

}

@media(max-width:576px){

.project-image img{

height:220px;

}

.project-content{

padding:22px;

}

.project-tag{

font-size:11px;

padding:7px 14px;

}

}


/*=========================================
        OUR IMPACT IN NUMBERS
=========================================*/

.counter-section{
    background:#0b2d4a;
    padding:100px 0;
    position:relative;
}

/*==============================
Heading
==============================*/

.counter-section .section-sub-title{
    display:inline-block;
    color:#ff7a00;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.counter-section .section-title{
    color:#fff;
    font-size:52px;
    font-weight:700;
    margin-bottom:20px;
}

/*==============================
Counter Box
==============================*/

.counter-box{

    text-align:center;

    position:relative;

    padding:25px 15px;

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

    transition:.4s;

}

/* Remove last border */

.counter-box.border-0{

    border-right:none;

}

/*==============================
Icon
==============================*/

.counter-icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    transition:.4s;

}

.counter-icon i{

    font-size:34px;

    color:#ff7a00;

}

/*==============================
Number
==============================*/

.counter-box h2{

    color:#fff;

    font-size:64px;

    font-weight:700;

    margin-top:25px;

    margin-bottom:12px;

}

/*==============================
Text
==============================*/

.counter-box h5{

    color:#d7e1eb;

    font-size:22px;

    font-weight:600;

    margin:0;

}

/*==============================
Hover Effect
==============================*/

.counter-box:hover{

    transform:translateY(-8px);

}

.counter-box:hover .counter-icon{

    background:#ff7a00;

    transform:rotate(-8deg);

}

.counter-box:hover .counter-icon i{

    color:#fff;

}

.counter-box:hover h2{

    color:#ff7a00;

}

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

@media(max-width:1200px){

.counter-section .section-title{

font-size:46px;

}

.counter-box h2{

font-size:56px;

}

}

@media(max-width:992px){

.counter-box{

border-right:none;

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

padding:35px 20px;

}

.counter-box.border-0{

border-bottom:none;

}

}

@media(max-width:768px){

.counter-section{

padding:80px 0;

}

.counter-section .section-title{

font-size:34px;

}

.counter-box h2{

font-size:48px;

}

.counter-box h5{

font-size:18px;

}

.counter-icon{

width:70px;

height:70px;

}

.counter-icon i{

font-size:28px;

}

}

@media(max-width:576px){

.counter-section .section-title{

font-size:30px;

}

.counter-box{

padding:30px 15px;

}

.counter-box h2{

font-size:42px;

}

.counter-box h5{

font-size:17px;

}

}


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

.testimonial-section{
    background:#0b2d4a;
    padding:110px 0;
    position:relative;
    overflow:hidden;
}

/*==================================
Heading
==================================*/

.testimonial-section .section-sub-title{
    display:inline-block;
    color:#ff7a00;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.testimonial-section .section-title{
    color:#fff;
    font-size:52px;
    font-weight:700;
    margin-bottom:20px;
}

/*==================================
Carousel
==================================*/

#testimonialSlider{
    position:relative;
    max-width:1000px;
    margin:auto;
}

/*==================================
Card
==================================*/

.testimonial-card{

    position:relative;

    background:#1b3148;

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

    border-radius:22px;

    padding:55px;

    transition:.4s;

    overflow:hidden;

}

.testimonial-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

/*==================================
Quote Icon
==================================*/

.quote-icon{

    position:absolute;

    right:40px;

    top:35px;

}

.quote-icon i{

    font-size:70px;

    color:rgba(255,122,0,.18);

}

/*==================================
Stars
==================================*/

.stars{

    margin-bottom:25px;

}

.stars i{

    color:#ff7a00;

    font-size:22px;

    margin-right:6px;

}

/*==================================
Text
==================================*/

.testimonial-text{

    color:#d4dde8;

    font-size:34px;

    line-height:58px;

    font-style:italic;

    margin-bottom:45px;

}

/*==================================
Client
==================================*/

.client-info{

    display:flex;

    align-items:center;

    gap:18px;

}

.client-avatar{

    width:64px;

    height:64px;

    border-radius:50%;

    background:#6b4a2d;

    color:#ff7a00;

    font-size:28px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

}

.client-info h5{

    color:#fff;

    margin:0;

    font-size:24px;

    font-weight:700;

}

.client-info span{

    color:#ff7a00;

    font-size:18px;

}

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

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

    width:60px;
    height:60px;

    top:50%;

    transform:translateY(-50%);

    background:#20364b;

    border-radius:50%;

    opacity:1;

}

.carousel-control-prev{

    left:-80px;

}

.carousel-control-next{

    right:-80px;

}

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

    background:#ff7a00;

}

/*==================================
Indicators
==================================*/

.carousel-indicators{

    bottom:-70px;

}

.carousel-indicators button{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#4f5f73;

    border:none;

    margin:0 6px;

    opacity:1;

}

.carousel-indicators .active{

    width:34px;

    border-radius:30px;

    background:#ff7a00;

}

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

@media(max-width:1200px){

.carousel-control-prev{

left:-40px;

}

.carousel-control-next{

right:-40px;

}

}

@media(max-width:992px){

.testimonial-card{

padding:40px;

}

.testimonial-text{

font-size:26px;

line-height:46px;

}

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

display:none;

}

}

@media(max-width:768px){

.testimonial-section{

padding:80px 0;

}

.testimonial-section .section-title{

font-size:34px;

}

.testimonial-card{

padding:30px;

}

.quote-icon{

display:none;

}

.testimonial-text{

font-size:20px;

line-height:36px;

}

.client-info h5{

font-size:20px;

}

.client-info span{

font-size:15px;

}

.client-avatar{

width:55px;

height:55px;

font-size:22px;

}

}

@media(max-width:576px){

.testimonial-card{

padding:25px;

}

.testimonial-text{

font-size:18px;

line-height:32px;

}

.stars i{

font-size:18px;

}

.carousel-indicators{

bottom:-50px;

}

}


/*==================================================
                FAQ SECTION
==================================================*/

.faq-section{
    background:#0b2d4a;
    padding:110px 0;
    position:relative;
    overflow:hidden;
}

/*==============================
Heading
==============================*/

.faq-section .section-sub-title{
    display:inline-block;
    color:#ff7b00;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.faq-section .section-title{
    color:#ffffff;
    font-size:52px;
    font-weight:700;
    margin-bottom:20px;
}

/*==============================
Accordion
==============================*/

.custom-accordion{

    margin-top:50px;

}

.custom-accordion .accordion-item{

    background:#1d3147;

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

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

    transition:.4s;

}

.custom-accordion .accordion-item:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 45px rgba(0,0,0,.35);

}

/*==============================
Button
==============================*/

.custom-accordion .accordion-button{

    background:#1d3147;

    color:#ffffff;

    font-size:24px;

    font-weight:600;

    padding:28px 35px;

    box-shadow:none;

    transition:.3s;

}

.custom-accordion .accordion-button:hover{

    color:#ff7b00;

}

.custom-accordion .accordion-button:focus{

    box-shadow:none;

}

.custom-accordion .accordion-button:not(.collapsed){

    background:#1d3147;

    color:#ffffff;

}

/*==============================
Arrow
==============================*/

.custom-accordion .accordion-button::after{

    filter:brightness(0) invert(1);

    transition:.35s;

}

.custom-accordion .accordion-button:not(.collapsed)::after{

    transform:rotate(-180deg);

    filter:invert(49%) sepia(93%) saturate(4200%)
    hue-rotate(4deg) brightness(101%) contrast(102%);

}

/*==============================
Body
==============================*/

.custom-accordion .accordion-body{

    background:#1d3147;

    color:#c5d0db;

    font-size:18px;

    line-height:34px;

    padding:0 35px 35px;

}

/*==============================
Open Item
==============================*/

.custom-accordion .accordion-item:has(.accordion-button:not(.collapsed)){

    border-color:rgba(255,123,0,.45);

}

/*==============================
Hover Glow
==============================*/

.custom-accordion .accordion-item:hover{

    border-color:rgba(255,123,0,.25);

}

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

@media(max-width:1200px){

.faq-section .section-title{

font-size:46px;

}

.custom-accordion .accordion-button{

font-size:22px;

}

}

@media(max-width:992px){

.faq-section{

padding:80px 0;

}

.custom-accordion .accordion-button{

font-size:20px;

padding:24px 28px;

}

.custom-accordion .accordion-body{

padding:0 28px 28px;

font-size:17px;

line-height:30px;

}

}

@media(max-width:768px){

.faq-section .section-title{

font-size:34px;

}

.custom-accordion .accordion-button{

font-size:18px;

padding:22px;

}

.custom-accordion .accordion-body{

padding:0 22px 22px;

font-size:16px;

line-height:28px;

}

}

@media(max-width:576px){

.faq-section{

padding:70px 0;

}

.faq-section .section-title{

font-size:30px;

}

.custom-accordion .accordion-button{

font-size:17px;

padding:18px;

}

.custom-accordion .accordion-body{

padding:0 18px 20px;

font-size:15px;

line-height:26px;

}

}


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

.contact-section{
    background:#0b2d4a;
    padding:110px 0;
    position:relative;
    overflow:hidden;
}

/*==============================
Heading
==============================*/

.contact-section .section-sub-title{
    display:inline-block;
    color:#ff7b00;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.contact-section .section-title{
    color:#ffffff;
    font-size:54px;
    font-weight:700;
    margin-bottom:18px;
}

.contact-section .section-description{
    color:#b7c5d3;
    font-size:20px;
    line-height:34px;
    max-width:760px;
    margin:auto;
}

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

.contact-info-box{

    display:flex;

    align-items:flex-start;

    gap:22px;

    margin-bottom:35px;

}

.contact-icon{

    width:70px;

    height:70px;

    min-width:70px;

    border-radius:16px;

    background:#1d3147;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}

.contact-icon i{

    color:#ff7b00;

    font-size:28px;

}

.contact-content h4{

    color:#fff;

    font-size:30px;

    font-weight:700;

    margin-bottom:10px;

}

.contact-content p{

    color:#b9c6d3;

    font-size:20px;

    line-height:34px;

    margin:0;

}

.contact-content a{

    color:#b9c6d3;

    text-decoration:none;

    transition:.3s;

}

.contact-content a:hover{

    color:#ff7b00;

}

.contact-info-box:hover .contact-icon{

    background:#ff7b00;

    transform:translateY(-6px);

}

.contact-info-box:hover .contact-icon i{

    color:#fff;

}

/*==================================================
                FORM BOX
==================================================*/

.contact-form-box{

    background:#162b42;

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

    border-radius:22px;

    padding:45px;

    transition:.35s;

}

.contact-form-box:hover{

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

/*==================================================
                LABEL
==================================================*/

.contact-form-box label{

    color:#fff;

    font-size:18px;

    font-weight:600;

    margin-bottom:10px;

}

/*==================================================
                INPUT
==================================================*/

.contact-form-box .form-control,
.contact-form-box .form-select{

    height:60px;

    border-radius:12px;

    background:#243548;

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

    color:#fff;

    padding:15px 18px;

    font-size:17px;

    transition:.3s;

}

.contact-form-box textarea.form-control{

    height:170px;

    resize:none;

    padding-top:18px;

}

.contact-form-box .form-control::placeholder{

    color:#97a6b4;

}

.contact-form-box .form-control:focus,
.contact-form-box .form-select:focus{

    background:#243548;

    color:#fff;

    border-color:#ff7b00;

    box-shadow:none;

}

/*==================================================
                BUTTON
==================================================*/

.contact-btn{

    width:100%;

    border:none;

    border-radius:12px;

    background:linear-gradient(90deg,#ff7b00,#ff8e1c);

    color:#fff;

    font-size:22px;

    font-weight:700;

    padding:18px;

    transition:.35s;

}

.contact-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(255,123,0,.35);

}

/*==================================================
                FORM SELECT
==================================================*/

.contact-form-box select option{

    background:#243548;

    color:#fff;

}

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

@media(max-width:1200px){

.contact-section .section-title{

font-size:48px;

}

.contact-content h4{

font-size:26px;

}

}

@media(max-width:992px){

.contact-section{

padding:90px 0;

}

.contact-form-box{

margin-top:20px;

}

.contact-content h4{

font-size:24px;

}

.contact-content p{

font-size:18px;

line-height:30px;

}

}

@media(max-width:768px){

.contact-section .section-title{

font-size:36px;

}

.contact-section .section-description{

font-size:17px;

line-height:30px;

}

.contact-form-box{

padding:30px;

}

.contact-info-box{

gap:16px;

}

.contact-icon{

width:60px;

height:60px;

min-width:60px;

}

.contact-icon i{

font-size:24px;

}

.contact-content h4{

font-size:22px;

}

.contact-content p{

font-size:16px;

line-height:28px;

}

.contact-btn{

font-size:18px;

}

}

@media(max-width:576px){

.contact-section{

padding:70px 0;

}

.contact-section .section-title{

font-size:30px;

}

.contact-form-box{

padding:22px;

}

.contact-form-box .form-control,
.contact-form-box .form-select{

height:55px;

font-size:15px;

}

.contact-form-box textarea.form-control{

height:150px;

}

.contact-btn{

padding:15px;

font-size:17px;

}

.contact-content h4{

font-size:20px;

}

.contact-content p{

font-size:15px;

line-height:26px;

}

}


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

.footer{
    background:#0b2d4a;
    padding:90px 0 0;
    position:relative;
    overflow:hidden;
}

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

.footer-logo img{
    max-width:290px;
    margin-bottom:30px;
}

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

.footer-about p{
    color:#b8c5d2;
    font-size:18px;
    line-height:34px;
    margin-bottom:30px;
}

/*==============================
Social Icons
==============================*/

.footer-social{
    display:flex;
    gap:16px;
}

.footer-social a{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#20354c;

    color:#fff;

    font-size:20px;

    transition:.35s;

    text-decoration:none;

}

.footer-social a:hover{

    background:#ff7b00;

    color:#fff;

    transform:translateY(-5px);

}

/*==============================
Titles
==============================*/

.footer-title{

    color:#ffffff;

    font-size:30px;

    font-weight:700;

    margin-bottom:30px;

    position:relative;

}

.footer-title::after{

    content:"";

    width:70px;

    height:2px;

    background:#ffffff20;

    position:absolute;

    left:0;

    bottom:-12px;

}

/*==============================
Links
==============================*/

.footer-links{

    padding:0;

    margin:0;

    list-style:none;

}

.footer-links li{

    margin-bottom:18px;

}

.footer-links a{

    color:#c2cfda;

    text-decoration:none;

    font-size:18px;

    transition:.3s;

}

.footer-links a i{

    margin-right:10px;

    color:#c2cfda;

    transition:.3s;

}

.footer-links a:hover{

    color:#ff7b00;

    padding-left:8px;

}

.footer-links a:hover i{

    color:#ff7b00;

}

/*==============================
Contact
==============================*/

.footer-contact-item{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:25px;

}

.footer-contact-item i{

    color:#ff7b00;

    font-size:22px;

    margin-top:5px;

}

.footer-contact-item span,
.footer-contact-item a{

    color:#c2cfda;

    font-size:18px;

    line-height:32px;

    text-decoration:none;

    transition:.3s;

}

.footer-contact-item a:hover{

    color:#ff7b00;

}

/*==============================
Google Maps Button
==============================*/

.footer-map-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:30px;

    background:#213d69;

    color:#ffffff;

    padding:18px;

    border-radius:14px;

    text-decoration:none;

    transition:.35s;

    font-weight:600;

}

.footer-map-btn:hover{

    background:#ff7b00;

    color:#ffffff;

}

/*==============================
Bottom
==============================*/

.footer-bottom{

    margin-top:70px;

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

    padding:28px 0;

}

.footer-bottom p{

    color:#9eb0c1;

    margin:0;

    font-size:17px;

}

.footer-bottom a{

    color:#9eb0c1;

    text-decoration:none;

    margin:0 12px;

    transition:.3s;

}

.footer-bottom a:hover{

    color:#ff7b00;

}

.footer-bottom span{

    color:#6f8294;

}

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

#backToTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:62px;

    height:62px;

    border:none;

    border-radius:50%;

    background:#ff7b00;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 15px 35px rgba(255,123,0,.35);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

}

#backToTop:hover{

    transform:translateY(-6px);

    background:#ff8f1f;

}

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

@media(max-width:992px){

.footer{

padding-top:80px;

}

.footer-title{

margin-top:25px;

}

.footer-bottom{

text-align:center;

}

}

@media(max-width:768px){

.footer{

padding-top:70px;

}

.footer-logo img{

max-width:240px;

}

.footer-title{

font-size:25px;

}

.footer-about p,

.footer-links a,

.footer-contact-item span,

.footer-contact-item a{

font-size:16px;

line-height:28px;

}

.footer-social{

justify-content:flex-start;

}

.footer-map-btn{

padding:16px;

}

#backToTop{

width:55px;

height:55px;

font-size:18px;

right:18px;

bottom:18px;

}

}

@media(max-width:576px){

.footer-bottom .text-lg-end{

margin-top:12px;

}

.footer-bottom a{

display:inline-block;

margin:6px;

}

}


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

.about-section{

    background:#ffffff;

    padding:120px 0;

    position:relative;

    overflow:hidden;

}

/*====================================
Section Heading
====================================*/

.about-section .section-sub-title{

    display:inline-block;

    color:#ff7b00;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.about-section .section-title{

    color:#0b2d4a;

    font-size:64px;

    font-weight:800;

    margin-bottom:25px;

    line-height:1.2;

}

.about-section .section-description{

    max-width:900px;

    margin:auto;

    color:#526272;

    font-size:22px;

    line-height:40px;

}

/*==================================================
                IMAGE
==================================================*/

.about-image{

    overflow:hidden;

    border-radius:20px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    transition:.5s;

}

.about-image img{

    width:100%;

    transition:.6s;

}

.about-image:hover img{

    transform:scale(1.08);

}

.about-image:hover{

    transform:translateY(-8px);

}

/*==================================================
                CONTENT
==================================================*/

.about-content{

    padding-left:35px;

}

.about-content h3{

    color:#0b2d4a;

    font-size:42px;

    font-weight:700;

    margin-bottom:18px;

}

.about-content p{

    color:#586879;

    font-size:20px;

    line-height:38px;

    margin-bottom:35px;

}

/*==================================================
                FEATURE BOX
==================================================*/

.about-feature{

    background:#f8f9fb;

    border:1px solid #ececec;

    border-radius:12px;

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:18px;

    font-weight:600;

    color:#173654;

    transition:.35s;

}

.about-feature i{

    color:#ff7b00;

    font-size:22px;

}

.about-feature:hover{

    background:#ff7b00;

    color:#ffffff;

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(255,123,0,.25);

}

.about-feature:hover i{

    color:#ffffff;

}

/*==================================================
                BUTTON
==================================================*/

.about-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:linear-gradient(90deg,#ff7b00,#ff8f1c);

    color:#ffffff;

    padding:18px 34px;

    border-radius:12px;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.about-btn:hover{

    color:#ffffff;

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(255,123,0,.30);

}

/*==================================================
                MISSION & VISION
==================================================*/

.mission-box,
.vision-box{

    margin-bottom:45px;

}

.mission-box h3,
.vision-box h3{

    color:#0b2d4a;

    font-size:40px;

    font-weight:700;

    margin-bottom:18px;

}

.mission-box p,
.vision-box p{

    color:#556678;

    font-size:20px;

    line-height:36px;

}

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

@media(max-width:1200px){

.about-section .section-title{

font-size:56px;

}

.about-content h3{

font-size:36px;

}

}

@media(max-width:992px){

.about-section{

padding:90px 0;

}

.about-content{

padding-left:0;

margin-top:40px;

}

.about-section .section-title{

font-size:48px;

}

.about-section .section-description{

font-size:20px;

line-height:36px;

}

.about-content h3{

font-size:34px;

}

}

@media(max-width:768px){

.about-section{

padding:80px 0;

}

.about-section .section-title{

font-size:38px;

}

.about-section .section-description{

font-size:17px;

line-height:32px;

}

.about-content h3{

font-size:30px;

}

.about-content p{

font-size:17px;

line-height:30px;

}

.mission-box p,
.vision-box p{

font-size:17px;

line-height:30px;

}

.about-feature{

font-size:16px;

padding:15px;

}

.about-btn{

width:100%;

justify-content:center;

}

}

@media(max-width:576px){

.about-section{

padding:70px 0;

}

.about-section .section-title{

font-size:32px;

}

.about-content h3{

font-size:26px;

}

.about-content p{

font-size:16px;

line-height:28px;

}

.about-feature{

font-size:15px;

}

}


/*==================================================
                CORE VALUES SECTION
==================================================*/

.core-values-section{
    background:#ffffff;
    padding:120px 0;
    position:relative;
    overflow:hidden;
}

/*====================================
Section Heading
====================================*/

.core-values-section .section-sub-title{

    display:inline-block;
    color:#ff7b00;
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;

}

.core-values-section .section-title{

    color:#0b2d4a;
    font-size:58px;
    font-weight:800;
    margin-bottom:22px;
    line-height:1.2;

}

.core-values-section .section-description{

    max-width:820px;
    margin:auto;
    color:#5d6b79;
    font-size:20px;
    line-height:36px;

}

/*==================================================
                VALUE CARD
==================================================*/

.value-card{

    background:#ffffff;
    border:1px solid #edf1f5;
    border-radius:22px;
    padding:45px 30px;
    text-align:center;
    height:100%;
    transition:.45s;
    position:relative;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.value-card::before{

    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:#ff7b00;
    transform:scaleX(0);
    transition:.4s;
    transform-origin:left;

}

.value-card:hover::before{

    transform:scaleX(1);

}

.value-card:hover{

    transform:translateY(-12px);
    box-shadow:0 30px 70px rgba(0,0,0,.12);
    border-color:#ff7b00;

}

/*==================================================
                ICON
==================================================*/

.value-icon{

    width:90px;
    height:90px;
    margin:0 auto 30px;
    border-radius:50%;
    background:#eef5fd;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.4s;

}

.value-icon i{

    font-size:36px;
    color:#0b2d4a;
    transition:.4s;

}

.value-card:hover .value-icon{

    background:#ff7b00;
    transform:rotateY(180deg);

}

.value-card:hover .value-icon i{

    color:#ffffff;
    transform:rotateY(-180deg);

}

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

.value-card h3{

    font-size:32px;
    color:#0b2d4a;
    font-weight:700;
    margin-bottom:20px;
    transition:.3s;

}

.value-card:hover h3{

    color:#ff7b00;

}

/*==================================================
                TEXT
==================================================*/

.value-card p{

    color:#667587;
    font-size:18px;
    line-height:32px;
    margin:0;

}

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

@media(max-width:1200px){

.core-values-section .section-title{

font-size:50px;

}

.value-card h3{

font-size:28px;

}

}

@media(max-width:992px){

.core-values-section{

padding:90px 0;

}

.core-values-section .section-title{

font-size:44px;

}

.value-card{

margin-bottom:25px;

}

}

@media(max-width:768px){

.core-values-section{

padding:80px 0;

}

.core-values-section .section-title{

font-size:36px;

}

.core-values-section .section-description{

font-size:17px;
line-height:30px;

}

.value-card{

padding:35px 25px;

}

.value-icon{

width:80px;
height:80px;

}

.value-icon i{

font-size:30px;

}

.value-card h3{

font-size:24px;

}

.value-card p{

font-size:16px;
line-height:28px;

}

}

@media(max-width:576px){

.core-values-section{

padding:70px 0;

}

.core-values-section .section-title{

font-size:30px;

}

.value-card{

padding:30px 20px;

}

.value-icon{

width:72px;
height:72px;

}

.value-icon i{

font-size:26px;

}

.value-card h3{

font-size:22px;

}

.value-card p{

font-size:15px;
line-height:26px;

}

}



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

.service-hero{

    position: relative;
    width: 100%;
    min-height: 85vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: url("../images/services/electrical-banner.jpg") center center/cover no-repeat;

}

/*=========================================
                Overlay
=========================================*/

.service-overlay{

    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(8,34,57,.95) 0%,
        rgba(8,34,57,.90) 45%,
        rgba(8,34,57,.82) 100%
    );

}

/*=========================================
                Content
=========================================*/

.service-hero .container{

    position: relative;
    z-index: 2;

}

.service-hero .row{

    min-height: 85vh;
    align-items: center;

}

/*=========================================
            Breadcrumb
=========================================*/

.service-breadcrumb{

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 35px;

}

.service-breadcrumb a{

    color: #ffffff;
    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1px;

    transition: .3s;

}

.service-breadcrumb a:hover{

    color: #ff7a00;

}

.service-breadcrumb span{

    color: rgba(255,255,255,.70);

}

.service-breadcrumb .active{

    color: #ff7a00;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;

}

/*=========================================
                Icon
=========================================*/

.service-icon{

    width: 85px;
    height: 85px;

    border-radius: 20px;

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

    border: 1px solid rgba(255,122,0,.30);

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 35px;

    backdrop-filter: blur(8px);

}

.service-icon i{

    font-size: 42px;
    color: #ff7a00;

}

/*=========================================
                Heading
=========================================*/

.service-hero h1{

    color: #ffffff;

    font-size: 72px;
    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 25px;

}

/*=========================================
                Description
=========================================*/

.service-hero p{

    max-width: 760px;

    color: rgba(255,255,255,.88);

    font-size: 22px;

    line-height: 40px;

    margin-bottom: 45px;

}

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

.hero-buttons{

    display: flex;
    gap: 18px;
    flex-wrap: wrap;

}

.btn-primary-service{

    background: #ff7a00;
    color: #fff;

    text-decoration: none;

    padding: 18px 42px;

    border-radius: 10px;

    font-size: 17px;
    font-weight: 700;

    transition: .35s;

    display: inline-flex;
    align-items: center;
    gap: 12px;

}

.btn-primary-service:hover{

    background: #ff8d1f;

    transform: translateY(-5px);

    color: #fff;

    box-shadow: 0 18px 35px rgba(255,122,0,.35);

}

.btn-outline-service{

    color: #fff;

    border: 2px solid rgba(255,255,255,.35);

    text-decoration: none;

    padding: 18px 40px;

    border-radius: 10px;

    font-size: 17px;
    font-weight: 700;

    transition: .35s;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    backdrop-filter: blur(6px);

}

.btn-outline-service:hover{

    background: #ffffff;
    color: #0b2d4a;

    border-color: #ffffff;

    transform: translateY(-5px);

}

/*=========================================
            Decorative Glow
=========================================*/

.service-hero::after{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    right:-180px;
    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background: radial-gradient(
        rgba(255,122,0,.22),
        transparent 70%
    );

    z-index:1;

}

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

@media(max-width:1200px){

.service-hero h1{

font-size:60px;

}

.service-hero p{

font-size:20px;

}

}

@media(max-width:992px){

.service-hero{

min-height:75vh;

}

.service-hero .row{

min-height:75vh;

}

.service-hero h1{

font-size:50px;

}

.service-hero p{

font-size:19px;
line-height:34px;

}

}

@media(max-width:768px){

.service-hero{

padding:120px 0 80px;

min-height:auto;

}

.service-hero .row{

min-height:auto;

}

.service-hero h1{

font-size:40px;

}

.service-hero p{

font-size:17px;
line-height:30px;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary-service,
.btn-outline-service{

justify-content:center;

}

}

@media(max-width:576px){

.service-icon{

width:70px;
height:70px;

}

.service-icon i{

font-size:34px;

}

.service-hero h1{

font-size:34px;

}

.service-breadcrumb{

gap:8px;

}

.service-breadcrumb a,
.service-breadcrumb .active{

font-size:13px;

}

}


/*=========================================================
                SERVICE DETAILS SECTION
=========================================================*/

.service-details{
    background:#f8fafc;
    padding:100px 0;
}

/*==============================
Section Tag
==============================*/

.section-tag{
    display:inline-block;
    background:#fff3e8;
    color:#ff7a00;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:18px;
}

/*==============================
Content Box
==============================*/

.service-content-box{

    background:#ffffff;
    padding:45px;
    border-radius:18px;
    box-shadow:0 15px 45px rgba(0,0,0,.05);
    margin-bottom:35px;

}

.service-content-box h2{

    font-size:42px;
    font-weight:800;
    color:#0b2d4a;
    margin-bottom:20px;

}

.service-content-box p{

    font-size:17px;
    color:#667085;
    line-height:32px;
    margin-bottom:20px;

}

/*=========================================================
                    FEATURES
=========================================================*/

.feature-box{

    background:#fff;
    padding:35px;
    border-radius:18px;
    box-shadow:0 10px 35px rgba(0,0,0,.05);
    height:100%;
    transition:.35s;

}

.feature-box:hover{

    transform:translateY(-8px);
    box-shadow:0 25px 55px rgba(0,0,0,.10);

}

.feature-box h4{

    font-size:28px;
    font-weight:700;
    color:#0b2d4a;
    margin-bottom:25px;

}

.feature-box ul{

    margin:0;
    padding:0;
    list-style:none;

}

.feature-box ul li{

    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:18px;
    color:#49566b;
    line-height:28px;
    font-size:16px;

}

.feature-box ul li i{

    color:#ff7a00;
    margin-top:5px;

}

.benefit-list i{

    color:#00b65c !important;

}

/*=========================================================
                    PROCESS
=========================================================*/

.process-box{

    background:#fff;
    padding:45px;
    border-radius:18px;
    box-shadow:0 15px 45px rgba(0,0,0,.05);

}

.process-box h2{

    font-size:40px;
    color:#0b2d4a;
    font-weight:800;
    margin-bottom:40px;

}

.process-item{

    display:flex;
    gap:25px;
    position:relative;
    padding-bottom:40px;

}

.process-item:last-child{

    padding-bottom:0;

}

.process-item::before{

    content:"";
    position:absolute;
    left:22px;
    top:55px;
    width:2px;
    height:100%;
    background:#ffd2a9;

}

.process-item:last-child::before{

    display:none;

}

.process-item span{

    width:46px;
    height:46px;
    background:#ff7a00;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex-shrink:0;

}

.process-item h5{

    font-size:22px;
    color:#0b2d4a;
    font-weight:700;
    margin-bottom:8px;

}

.process-item p{

    color:#667085;
    margin:0;
    line-height:28px;

}

/*=========================================================
                    SIDEBAR
=========================================================*/

.service-sidebar{

    position:sticky;
    top:110px;

}

.sidebar-card{

    background:#fff;
    padding:35px;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    margin-bottom:30px;

}

.sidebar-card h3{

    font-size:28px;
    color:#0b2d4a;
    font-weight:700;
    margin-bottom:25px;

}

.service-list{

    list-style:none;
    padding:0;
    margin:0;

}

.service-list li{

    border-bottom:1px solid #edf2f7;

}

.service-list li:last-child{

    border:none;

}

.service-list li a{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
    color:#334155;
    text-decoration:none;
    transition:.3s;
    font-weight:600;

}

.service-list li a:hover{

    color:#ff7a00;
    padding-left:10px;

}

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

.sidebar-cta{

    background:#0b2d4a;
    color:#fff;
    padding:40px;
    border-radius:18px;
    text-align:center;
    margin-bottom:30px;
    overflow:hidden;
    position:relative;

}

.sidebar-cta i{

    font-size:42px;
    color:#ff7a00;
    margin-bottom:18px;

}

.sidebar-cta h3{

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

}

.sidebar-cta p{

    color:#d7e3ee;
    line-height:30px;
    margin-bottom:25px;

}

.quote-btn{

    display:inline-block;
    background:#ff7a00;
    color:#fff;
    text-decoration:none;
    padding:15px 35px;
    border-radius:8px;
    font-weight:700;
    transition:.35s;

}

.quote-btn:hover{

    background:#fff;
    color:#0b2d4a;
    transform:translateY(-4px);

}

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

.sidebar-contact{

    background:#fff;
    padding:35px;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.sidebar-contact h4{

    font-size:26px;
    margin-bottom:20px;
    color:#0b2d4a;

}

.sidebar-contact a{

    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:18px;
    color:#334155;
    text-decoration:none;
    transition:.3s;

}

.sidebar-contact a:hover{

    color:#ff7a00;

}

.sidebar-contact i{

    width:42px;
    height:42px;
    background:#fff3e8;
    color:#ff7a00;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;

}

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

@media(max-width:992px){

.service-sidebar{

position:relative;
top:0;
margin-top:40px;

}

.service-content-box,
.feature-box,
.process-box,
.sidebar-card,
.sidebar-contact,
.sidebar-cta{

padding:30px;

}

}

@media(max-width:768px){

.service-details{

padding:70px 0;

}

.service-content-box h2,
.process-box h2{

font-size:32px;

}

.feature-box{

margin-bottom:25px;

}

.process-item{

gap:18px;

}

}

@media(max-width:576px){

.service-content-box,
.feature-box,
.process-box,
.sidebar-card,
.sidebar-contact,
.sidebar-cta{

padding:22px;

}

.service-content-box h2{

font-size:28px;

}

.process-box h2{

font-size:28px;

}

.feature-box h4{

font-size:22px;

}

.sidebar-card h3{

font-size:22px;

}

.sidebar-cta h3{

font-size:24px;

}

}


/*=========================================================
            SERVICE DETAILS SECTION
=========================================================*/

.service-details-section{
    padding:100px 0;
    background:#ffffff;
}

/*==============================
Overview
==============================*/

.service-title{

    font-size:46px;
    font-weight:800;
    color:#0B2D4A;
    margin-bottom:25px;

}

.service-overview p{

    color:#5e6d7b;
    font-size:18px;
    line-height:34px;
    margin-bottom:20px;

}

/*=========================================================
                    SERVICE CARD
=========================================================*/

.service-card{

    background:#fff;
    border:1px solid #edf1f7;
    border-radius:16px;
    padding:35px;
    height:100%;
    transition:.35s;
    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.10);

}

.service-card h3{

    font-size:30px;
    font-weight:700;
    color:#0B2D4A;
    margin-bottom:25px;

}

.service-card ul{

    margin:0;
    padding:0;
    list-style:none;

}

.service-card ul li{

    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-bottom:18px;

    font-size:17px;

    color:#425466;

    line-height:30px;

}

.service-card ul li i{

    color:#ff7300;
    margin-top:6px;

}

.benefit-list i{

    color:#00b954 !important;

}

/*=========================================================
                    PROCESS
=========================================================*/

.process-section{

    margin-top:70px;

}

.process-section h2{

    font-size:42px;
    color:#0B2D4A;
    font-weight:800;
    margin-bottom:45px;

}

.process-item{

    display:flex;
    gap:25px;

    position:relative;

    padding-bottom:40px;

}

.process-item:last-child{

    padding-bottom:0;

}

.process-item::before{

    content:"";

    position:absolute;

    left:22px;

    top:48px;

    width:2px;

    height:100%;

    background:#ffd5b0;

}

.process-item:last-child::before{

    display:none;

}

.process-item span{

    width:46px;
    height:46px;

    background:#ff7300;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    flex-shrink:0;

    box-shadow:0 10px 25px rgba(255,115,0,.35);

}

.process-item h5{

    font-size:24px;

    font-weight:700;

    color:#0B2D4A;

    margin-bottom:8px;

}

.process-item p{

    color:#667587;

    margin:0;

    line-height:30px;

}

/*=========================================================
                    FAQ
=========================================================*/

.faq-section{

    margin-top:80px;

}

.faq-section h2{

    font-size:42px;

    font-weight:800;

    color:#0B2D4A;

    margin-bottom:35px;

}

.accordion-item{

    border:none;

    border-radius:14px !important;

    overflow:hidden;

    margin-bottom:18px;

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

}

.accordion-button{

    font-size:18px;

    font-weight:700;

    padding:24px 28px;

    color:#0B2D4A;

    background:#fff;

}

.accordion-button:not(.collapsed){

    background:#fff;

    color:#ff7300;

    box-shadow:none;

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    font-size:16px;

    color:#667587;

    line-height:30px;

    padding:25px 30px;

}

/*=========================================================
                    SIDEBAR
=========================================================*/

.service-sidebar{

    position:sticky;

    top:120px;

}

/*==============================
Sidebar Box
==============================*/

.sidebar-box{

    background:#fff;

    border:1px solid #edf1f7;

    border-radius:18px;

    padding:35px;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

    margin-bottom:35px;

}

.sidebar-box h3{

    font-size:28px;

    color:#0B2D4A;

    margin-bottom:25px;

}

.sidebar-box ul{

    list-style:none;

    margin:0;

    padding:0;

}

.sidebar-box ul li{

    border-bottom:1px solid #edf1f7;

}

.sidebar-box ul li:last-child{

    border-bottom:none;

}

.sidebar-box ul li a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    color:#425466;

    text-decoration:none;

    transition:.3s;

    font-weight:600;

}

.sidebar-box ul li a::after{

    content:"\f105";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

}

.sidebar-box ul li a:hover{

    color:#ff7300;

    padding-left:10px;

}

/*==============================
Quote Box
==============================*/

.quote-box{

    background:#0B2D4A;

    border-radius:18px;

    padding:40px;

    color:#fff;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.quote-box i{

    font-size:45px;

    color:#ff7300;

    margin-bottom:20px;

}

.quote-box h3{

    font-size:32px;

    margin-bottom:15px;

}

.quote-box p{

    color:#d8e3ee;

    line-height:30px;

    margin-bottom:28px;

}

.quote-btn{

    display:block;

    width:100%;

    text-align:center;

    background:#ff7300;

    color:#fff;

    text-decoration:none;

    padding:16px;

    border-radius:10px;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.quote-btn:hover{

    background:#fff;

    color:#0B2D4A;

    transform:translateY(-4px);

}

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

@media(max-width:991px){

.service-details-section{

padding:70px 0;

}

.service-sidebar{

position:relative;

top:0;

margin-top:50px;

}

.service-title{

font-size:38px;

}

.process-section h2,
.faq-section h2{

font-size:34px;

}

}

@media(max-width:768px){

.service-card{

margin-bottom:25px;

}

.service-title{

font-size:32px;

}

.process-item{

gap:18px;

}

.process-item h5{

font-size:20px;

}

.process-item p{

font-size:15px;

}

.sidebar-box,
.quote-box,
.service-card{

padding:25px;

}

}

@media(max-width:576px){

.service-details-section{

padding:60px 0;

}

.service-title{

font-size:28px;

}

.process-section h2,
.faq-section h2{

font-size:28px;

}

.service-card h3{

font-size:24px;

}

.sidebar-box h3{

font-size:24px;

}

.quote-box h3{

font-size:26px;

}

}

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

.industry-hero{

    position:relative;

    padding:150px 0;

    overflow:hidden;

    background:url("../images/industries/industry-banner.jpg")
    center center/cover no-repeat;

}

.industry-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
    rgba(8,37,63,.92),
    rgba(8,37,63,.92));

}

.industry-hero .container{

    position:relative;

    z-index:2;

}

.hero-tag{

    display:inline-block;

    color:#ff7300;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;

}

.industry-hero h1{

    color:#fff;

    font-size:72px;

    font-weight:800;

    margin-bottom:25px;

}

.industry-hero p{

    color:#d8e2ef;

    font-size:24px;

    line-height:40px;

    max-width:900px;

    margin:auto;

}

/*========================*/

@media(max-width:992px){

.industry-hero{

padding:120px 0;

}

.industry-hero h1{

font-size:54px;

}

.industry-hero p{

font-size:20px;

}

}

@media(max-width:768px){

.industry-hero{

padding:90px 0;

}

.industry-hero h1{

font-size:38px;

}

.industry-hero p{

font-size:17px;

line-height:30px;

}

}


/*==================================================
            INDUSTRIES SECTION
==================================================*/

.industries-section{

    padding:100px 0;

    background:#f8fafc;

}

/*==============================
        INDUSTRY CARD
==============================*/

.industry-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #e8edf4;

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

    transition:.4s;

    height:100%;

    position:relative;

}

.industry-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

/*==============================
        IMAGE
==============================*/

.industry-image{

    position:relative;

    overflow:hidden;

    height:240px;

}

.industry-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.industry-card:hover img{

    transform:scale(1.08);

}

/* Dark Overlay */

.industry-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.05),
        rgba(0,0,0,.25)
    );

}

/*==============================
        ICON
==============================*/

.industry-icon{

    position:absolute;

    right:18px;

    bottom:-22px;

    width:60px;

    height:60px;

    background:#ff7300;

    color:#fff;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    z-index:5;

    box-shadow:0 10px 30px rgba(255,115,0,.35);

    transition:.4s;

}

.industry-card:hover .industry-icon{

    transform:rotate(-10deg) scale(1.08);

}

/*==============================
        CONTENT
==============================*/

.industry-content{

    padding:35px;

}

.industry-content h3{

    font-size:30px;

    font-weight:800;

    color:#0B2D4A;

    margin-bottom:18px;

}

.industry-content p{

    color:#667085;

    font-size:17px;

    line-height:31px;

    margin-bottom:25px;

}

/*==============================
        BUTTON
==============================*/

.industry-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#ff7300;

    font-weight:700;

    transition:.35s;

}

.industry-btn i{

    transition:.35s;

}

.industry-btn:hover{

    color:#0B2D4A;

}

.industry-btn:hover i{

    transform:translateX(6px);

}

/*==============================
        HOVER BORDER
==============================*/

.industry-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:0;

    background:#ff7300;

    transition:.45s;

}

.industry-card:hover::before{

    height:100%;

}

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

@media(max-width:1200px){

.industry-content h3{

font-size:26px;

}

}

@media(max-width:992px){

.industries-section{

padding:80px 0;

}

.industry-image{

height:220px;

}

}

@media(max-width:768px){

.industry-content{

padding:28px;

}

.industry-content h3{

font-size:24px;

}

.industry-content p{

font-size:16px;

line-height:28px;

}

.industry-icon{

width:55px;
height:55px;
font-size:22px;

}

}

@media(max-width:576px){

.industries-section{

padding:60px 0;

}

.industry-image{

height:210px;

}

.industry-content{

padding:22px;

}

.industry-content h3{

font-size:22px;

}

.industry-content p{

font-size:15px;

line-height:26px;

}

}



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

.projects-section{

    padding:100px 0;

    background:#f8fafc;

}

/*==============================
        PROJECT CARD
==============================*/

.project-card{

    background:#ffffff;

    border-radius:18px;

    overflow:hidden;

    border:1px solid #e9edf4;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

    transition:.4s;

    height:100%;

}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

/*==============================
        IMAGE
==============================*/

.project-image{

    position:relative;

    overflow:hidden;

    height:320px;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.project-card:hover .project-image img{

    transform:scale(1.08);

}

.project-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.05),
        rgba(0,0,0,.30)
    );

}

/*==============================
        TAG
==============================*/

.project-tag{

    position:absolute;

    top:20px;

    left:20px;

    z-index:5;

    background:#ff7300;

    color:#fff;

    font-size:13px;

    font-weight:700;

    padding:8px 18px;

    border-radius:30px;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/*==============================
        CONTENT
==============================*/

.project-content{

    padding:35px;

}

.client-name{

    display:block;

    color:#ff7300;

    font-weight:700;

    margin-bottom:12px;

    font-size:15px;

}

.project-content h3{

    font-size:34px;

    font-weight:800;

    color:#0b2d4a;

    margin-bottom:20px;

    line-height:1.3;

}

.project-content p{

    color:#667085;

    font-size:17px;

    line-height:32px;

    margin-bottom:25px;

}

/*==============================
        LIST
==============================*/

.project-content ul{

    list-style:none;

    padding:0;

    margin:0 0 25px;

}

.project-content ul li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:12px;

    color:#425466;

    font-size:16px;

}

.project-content ul li i{

    color:#22c55e;

}

/*==============================
        BUTTON
==============================*/

.project-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#0b2d4a;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    transition:.35s;

}

.project-content a i{

    transition:.35s;

}

.project-content a:hover{

    color:#ff7300;

}

.project-content a:hover i{

    transform:translate(5px,-5px);

}

/*==============================
        CARD BORDER
==============================*/

.project-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:0;

    background:#ff7300;

    transition:.45s;

}

.project-card:hover::before{

    height:100%;

}

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

@media(max-width:1200px){

.project-content h3{

font-size:30px;

}

}

@media(max-width:992px){

.projects-section{

padding:80px 0;

}

.project-image{

height:280px;

}

.project-content{

padding:28px;

}

.project-content h3{

font-size:28px;

}

}

@media(max-width:768px){

.project-image{

height:240px;

}

.project-content{

padding:24px;

}

.project-content h3{

font-size:24px;

}

.project-content p{

font-size:16px;

line-height:28px;

}

.project-tag{

font-size:12px;

padding:7px 15px;

}

}

@media(max-width:576px){

.projects-section{

padding:60px 0;

}

.project-image{

height:210px;

}

.project-content{

padding:20px;

}

.project-content h3{

font-size:22px;

}

.project-content p{

font-size:15px;

line-height:26px;

}

.client-name{

font-size:14px;

}

.project-content ul li{

font-size:15px;

}

}


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

.career-hero{

    position:relative;

    padding:130px 0;

    background:#ffffff;

    overflow:hidden;

}

.career-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(255,115,0,.05),
    transparent 45%);

}

.career-hero .container{

    position:relative;

    z-index:2;

}

.career-tag{

    display:inline-block;

    color:#ff7300;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;

}

.career-hero h1{

    color:#0B2D4A;

    font-size:64px;

    font-weight:800;

    margin-bottom:25px;

}

.career-hero p{

    max-width:900px;

    margin:auto;

    color:#667085;

    font-size:22px;

    line-height:38px;

}

.career-buttons{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.career-btn{

    background:#ff7300;

    color:#fff;

    text-decoration:none;

    padding:16px 36px;

    border-radius:8px;

    font-weight:700;

    transition:.35s;

}

.career-btn:hover{

    background:#0B2D4A;

    color:#fff;

}

.career-btn-outline{

    border:2px solid #0B2D4A;

    color:#0B2D4A;

    text-decoration:none;

    padding:16px 36px;

    border-radius:8px;

    font-weight:700;

    transition:.35s;

}

.career-btn-outline:hover{

    background:#0B2D4A;

    color:#fff;

}

/* Responsive */

@media(max-width:992px){

.career-hero h1{

font-size:48px;

}

.career-hero p{

font-size:19px;

}

}

@media(max-width:768px){

.career-hero{

padding:90px 0;

}

.career-hero h1{

font-size:36px;

}

.career-hero p{

font-size:17px;

line-height:30px;

}

}


/*==================================================
        CAREER BENEFITS
==================================================*/

.career-benefits{
    padding:100px 0;
    background:#f8fafc;
}

/*==============================
        BENEFIT CARD
==============================*/

.benefit-card{
    background:#fff;
    border:1px solid #e9edf4;
    border-radius:18px;
    padding:45px 35px;
    text-align:center;
    transition:.4s;
    height:100%;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.benefit-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(0,0,0,.10);
}

.benefit-icon{
    width:80px;
    height:80px;
    margin:auto auto 25px;
    border-radius:50%;
    background:#edf5ff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:32px;
    color:#0B2D4A;
    transition:.4s;
}

.benefit-card:hover .benefit-icon{
    background:#ff7300;
    color:#fff;
    transform:rotate(10deg) scale(1.1);
}

.benefit-card h3{
    font-size:28px;
    font-weight:700;
    color:#0B2D4A;
    margin-bottom:15px;
}

.benefit-card p{
    color:#667085;
    font-size:17px;
    line-height:30px;
}

/*==================================================
        RESUME BOX
==================================================*/

.resume-box{

    margin-top:70px;

    background:#0B2D4A;

    color:#fff;

    border-radius:22px;

    padding:55px;

    position:relative;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

/* Decorative Shape */

.resume-box::before{

    content:"✈";

    position:absolute;

    right:30px;

    top:20px;

    font-size:140px;

    color:rgba(255,255,255,.06);

    transform:rotate(-20deg);

}

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

.resume-box h2{

    font-size:42px;

    font-weight:800;

    margin-bottom:15px;

}

.resume-box p{

    color:#d8e2ef;

    font-size:18px;

    line-height:32px;

    max-width:700px;

    margin-bottom:40px;

}

/*==============================
        INPUTS
==============================*/

.resume-box .form-control,
.resume-box .form-select{

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

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

    color:#fff;

    height:58px;

    border-radius:10px;

    padding:15px 18px;

    box-shadow:none;

}

.resume-box textarea{

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

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

    color:#fff;

    border-radius:10px;

    box-shadow:none;

}

.resume-box input::placeholder{

    color:#d8e2ef;

}

.resume-box select{

    color:#fff;

}

.resume-box option{

    color:#000;

}

.resume-box .form-control:focus,
.resume-box .form-select:focus{

    border-color:#ff7300;

    box-shadow:0 0 0 4px rgba(255,115,0,.15);

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

    color:#fff;

}

/*==============================
        FILE INPUT
==============================*/

.resume-box input[type=file]{

    padding:12px;

    color:#fff;

}

/*==============================
        BUTTON
==============================*/

.career-submit{

    background:#ff7300;

    color:#fff;

    border:none;

    padding:16px 40px;

    border-radius:10px;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.career-submit i{

    margin-left:10px;

}

.career-submit:hover{

    background:#ff8a1c;

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(255,115,0,.35);

}

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

@media(max-width:992px){

.resume-box{

padding:40px;

}

.resume-box h2{

font-size:34px;

}

}

@media(max-width:768px){

.career-benefits{

padding:70px 0;

}

.benefit-card{

padding:35px 25px;

}

.benefit-card h3{

font-size:24px;

}

.resume-box{

padding:30px;

}

.resume-box h2{

font-size:28px;

}

.resume-box p{

font-size:16px;

line-height:28px;

}

.career-submit{

width:100%;

}

}

@media(max-width:576px){

.resume-box{

padding:25px;

}

.resume-box h2{

font-size:24px;

}

.benefit-icon{

width:70px;

height:70px;

font-size:28px;

}

}

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

.gallery-section{
    padding:100px 0;
    background:#f8fafc;
}

.section-title span{
    display:inline-block;
    color:#ff7300;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:10px;
    text-transform:uppercase;
}

.section-title h2{
    font-size:55px;
    font-weight:800;
    color:#0B2D4A;
    margin-bottom:20px;
}

.section-title p{
    max-width:750px;
    margin:auto;
    color:#667085;
    font-size:18px;
    line-height:32px;
}

/*============================
        Gallery Card
============================*/

.gallery-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    position:relative;

    transition:.4s;

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

    height:100%;

}

.gallery-card:hover{

    transform:translateY(-10px);

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

}

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

.gallery-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    transition:.6s;

}

.gallery-card:hover img{

    transform:scale(1.08);

}

/*============================
        Overlay
============================*/

.gallery-overlay{

    position:absolute;

    inset:0;

    background:rgba(11,45,74,.65);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.4s;

}

.gallery-card:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay a{

    color:#fff;

    text-decoration:none;

    border:2px solid #fff;

    padding:14px 28px;

    border-radius:8px;

    font-weight:700;

    transition:.35s;

}

.gallery-overlay a:hover{

    background:#ff7300;

    border-color:#ff7300;

}

/*============================
        Content
============================*/

.gallery-content{

    padding:28px;

    position:relative;

}

.gallery-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#edf5ff;

    color:#ff7300;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    margin-bottom:18px;

    transition:.35s;

}

.gallery-card:hover .gallery-icon{

    background:#ff7300;

    color:#fff;

    transform:rotate(12deg);

}

.gallery-content h4{

    font-size:30px;

    color:#0B2D4A;

    font-weight:700;

    margin-bottom:15px;

}

.gallery-content p{

    color:#667085;

    font-size:16px;

    line-height:30px;

    margin:0;

}

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

@media(max-width:992px){

.section-title h2{

font-size:42px;

}

.gallery-card img{

height:260px;

}

}

@media(max-width:768px){

.gallery-section{

padding:70px 0;

}

.section-title h2{

font-size:34px;

}

.section-title p{

font-size:16px;

line-height:28px;

}

.gallery-card img{

height:240px;

}

.gallery-content{

padding:22px;

}

.gallery-content h4{

font-size:24px;

}

}

@media(max-width:576px){

.gallery-card img{

height:220px;

}

.section-title h2{

font-size:30px;

}

.gallery-content h4{

font-size:22px;

}

.gallery-icon{

width:55px;

height:55px;

font-size:22px;

}

}

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

.gallery-card{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.gallery-card.show-gallery{

    opacity:1;

    transform:translateY(0);

}

/*=========================================
        LIGHTBOX
=========================================*/

.gallery-lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    cursor:pointer;

}

.gallery-lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:12px;

    box-shadow:0 25px 80px rgba(0,0,0,.4);

}

.gallery-close{

    position:absolute;

    top:30px;

    right:45px;

    color:#fff;

    font-size:45px;

    font-weight:bold;

    cursor:pointer;

}


/*==================================
        GOOGLE MAP
===================================*/

.map-section{

    padding:0;

    margin:0;

}

.map-wrapper{

    width:100%;

    height:550px;

    overflow:hidden;

    position:relative;

}

.map-wrapper iframe{

    width:100%;

    height:100%;

    border:none;

    filter:grayscale(10%) contrast(105%);

    transition:.5s;

}

.map-wrapper:hover iframe{

    filter:none;

}

/* Responsive */

@media(max-width:992px){

.map-wrapper{

height:450px;

}

}

@media(max-width:768px){

.map-wrapper{

height:380px;

}

}

@media(max-width:576px){

.map-wrapper{

height:300px;

}

}