:root {
  --primary-color: #177de9;
  --background-color: #000b1b;
  --background-secondary-color: #011023;
}

/* *{
    color: #ffffff;
} */

.navbar{
    background-color: var(--background-color);
    color: #FFF;
    padding: 0;
}

#nav-logo-img{
    background-color: #fff;
    border-radius: 10px;
    padding: 3px;
}

.navbar-brand{
    color: #fff;
    display: flex;
    align-items: center;
}

.navbar-brand:hover,
.navbar-brand:focus{
    color: #fff;
}

#nav-logo-words{
    text-align: center;
    line-height: 15px;
}

#nav-logo-words p{
    margin-bottom: 0;
    text-align: left;
}

#nav-logo-words p:first-of-type{
    letter-spacing: 3px;
    font-weight: 500;
    font-size: 1.05rem;
}

#nav-logo-words p:nth-of-type(2){
    font-weight: 100;
    font-size: .65rem;
    letter-spacing: 4px;
}

.navbar-collapse {
    flex-grow: inherit;
}

.nav-item,
.nav-item .btn{
    /* margin-left: 10px; */
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
}

.nav-item .btn{
    margin: 10px auto;
}

.nav .nav-link{
    color: #fff;

}

.navbar-nav .nav-link.active{
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    border-radius: 5px;
}

.navbar-toggler{
    background-color: #fff;
}
#main-div{
    /* padding: 0 10px; */
    padding: 0;
    background-color: var(--background-color);
    color: #fff;
}

/* custom components */
.little-bar{
    height: 3px;
    max-width: 100px;
    background-color: var(--primary-color);
    margin: 20px 0;
    border-radius: 15px
    
}

.le-section{
    /* margin: 20px 0; */
    border-top: 2px solid #17283a3d;
    border-bottom: 2px solid #17283a3d;
    /* padding-left: 20px!important;
    padding-right: 20px!important; */
}

.contact-btn{
    margin: 30px 0;
    width: 100%;
    padding: 12px 0;
    letter-spacing: 1px;
    font-weight: bold;

}

.contact-btn svg {
    margin-left: 10px;
    margin-bottom: 3px;
    background-color: initial;
}

.contact-btn path {
    stroke-width: 2px;
    stroke: #ffffff;
}

/* Hero styling */

#le-hero{
    height: 73dvh;
    margin: auto 75px;
    /* margin-top: 50px; */
    margin-right: 0px;
    background-image: url(./images/hero-az.png);
    background-repeat: no-repeat;
    background-position-x: -485px;
    background-position-y: bottom;
}

.hero-info{
    padding: 80px 20px 0;
}

.hero-overlay{
    position: absolute;
    width: stretch;
    height: 85vh;
    background: #000B1B;
    background: linear-gradient(90deg,rgba(0, 11, 27, 1) 25%, rgba(0, 11, 27, 0) 43%)
}

/* .partial-bg {
  background-image: url('./images/1000159299.png');
  background-repeat: no-repeat;
  
  background-size: 74% 100%; 
  
  background-position: right; 
} */


#le-hero .hero-inner{
    height: 100%;
    display: flex;
    align-items: center;
    background-color: #000b1b70;
}

#le-hero img{
    display: none;
}

#le-hero p{
    width: 56%;
    font-weight: 100;
    font-weight: 400;
}


#le-hero .btn{
    padding: 10px 15px;
    padding-left: 25px;
    font-weight: 500;
    margin-right: 20px;
    letter-spacing: 1px;

}

#le-hero .btn svg{
    margin-left: 10px;
    margin-bottom: 2px;
    background-color: initial;
}

#le-hero .btn path {
  stroke-width: 1px; /* Increase this value for more thickness */
  stroke: #ffffff;     /* Must have a stroke color for width to be visible */
}

/* services styling */
.le-bg-secondary {
    background-color: var(--background-secondary-color);
}

.le-bg-secondary .col{
    background-color: var(--background-secondary-color);
}

#services-section .le-bg-secondary .card{
    background-color: var(--background-secondary-color);
    margin: 45px auto;
    width: 22rem;
    border: none;
    color: #ffffff;
    text-align: center;
}

#services-section .card svg{
    margin: auto;
    background-color: var(--background-secondary-color);
    width: 100px;
    margin-bottom: 15px;
    fill: var(--primary-color);
}
#services-accordion{
        width: 100%;
        margin: auto;
    }
#services-section .card .card-title{
    margin-bottom: 15px;
}

#services-section .card .card-body{
    margin: auto;
    background-color: var(--background-secondary-color);
}

#what-we-offer{
    padding: 50px 10px;
}  

.le-sub{
    color: var(--primary-color);
    letter-spacing: 1px;
    /* margin-bottom: 12px; */
    font-weight: bold;
}

#what-we-offer h1{
    margin: 0;
}  

#what-we-offer .info-left{
    text-align: left;
    margin-top: 25px;
    /* max-width: 500px; */
}

#what-we-offer .le-section{
    padding-left: 10px !important;
    padding-right: 10px !important;
}

#services-list{
    margin-top: 50px; 
}

#services-list .accordion-item{
    color: var(--background-color);
    margin-bottom: 15px;
    border-radius: 10px;
    padding: 6px 0;
}

/* #services-list .accordion-item:hover{
    background-color: #177de933;
    color: white;
} */

#services-list .accordion-button{
    font-weight: bold;
}

#services-list .accordion-button:focus{
    box-shadow: none;
}

/* #services-list .accordion-body ul li{
    margin-bottom: 15px;
} */

#services-list .accordion-body ul li::marker {
  color: var(--primary-color);
  font-size: 1.25rem;
}

.accordion-button:not(.collapsed) {
    color: var(--background-color);
    background-color: inherit;
    box-shadow: none;
}

.img-group{
    display: none;
    margin-top: 50px;
}

.img-group img{
    max-height: 400px;
    max-width: -webkit-fill-available;
}

#testimonials-section{
    padding: 50px 10px;
    margin: auto;
    width: 100%;
}

#testimonials-section .row{
    padding: 0;
    width: 100%;
    margin: auto;
}


.testimonials-card{
    /* margin: auto; */
}

.testimonials-card .card{
    padding: 20px 0;
    background-color: inherit;
    color: #fff;
}

.testimonials-card .col-4{
    color: var(--background-color);
}

#myCarousel,
.carousel,
.carousel-inner,
.carousel-item,
.carousel-item.active{
    height: 100%;
    border-radius: 10px;
    -webkit-box-shadow: 2px 10px 14px -1px rgba(0,0,0,0.2); 
    box-shadow: 2px 10px 14px -1px rgba(0,0,0,0.2);
}

.carousel-item{
    border-radius: 10px;
}

/* #carousel-1{
    background: linear-gradient(300deg,rgba(23, 125, 233, 1) 0%, rgba(0, 11, 27, 1) 78%);

}

#carousel-2{
    background: linear-gradient(340deg,rgba(23, 125, 233, 1) 0%, rgba(0, 11, 27, 1) 70%);
}

#carousel-3{
    background: linear-gradient(15deg,rgba(23, 125, 233, 1) 0%, rgba(0, 11, 27, 1) 65%);

} */


.testimonials-pitch{
    margin-bottom: 30px;
    padding: 0;
}

.testimonials-pitch h1{
    margin-bottom: 0;
    font-weight: 500;
}

.testimonials-pitch p{
    margin-top: 10px;
    /* font-size: 1.25rem; */
}

.testimonials {
    font-size: 1.1rem;
    height: 455px;
    padding: 0;
    font-weight: bolder;
    background-color: #ffff;
    border-radius: 45px;
}

.carousel-caption{
    color: var(--background-secondary-color);
    right: 10%;
    bottom: 2.25rem;
    left: 10%;
}

.carousel-indicators [data-bs-target]{
    background-color: var(--primary-color);
}

.review-description{
    margin-bottom: 50px;
}

.review-name{
    color: var(--primary-color);
    margin-bottom: 0;
}

.review-title{
    color: #051c355c;
    font-size: 1rem;
    margin-top: -5px;
}

/* #about-section{

} */

#vision{
    padding: 0 10px 75px;
}

#about-section .about-icons .col {
    border-bottom: #ffffff0d solid 2px;
}

#about-section .about-icons .card {
    background-color: var(--background-color);
    margin: 45px auto;
    width: 22rem;
    border: none;
    color: #ffffff;
    text-align: center;
}

#about-section .card svg {
    margin: auto;
    background-color: var(--background-color);
    width: 100px;
    margin-bottom: 15px;
    fill: var(--primary-color);
}

#about-section h1{
    margin-bottom: 0;
    /* font-weight: 700; */
}

#about-section .about-icons h1{
    text-align: center;
    margin-top: 55px;
}

#about-section .info-left{
    margin: 50px 0;
    font-size: 1rem;
}

#about-section .info-left p{
    margin-top: 10px;
}
/* 
#about-section .info-left p::{
    margin-top: 10px;
} */


#about-section .info-right img{
    max-width: 100%;
    border-radius: 1%;
    -webkit-box-shadow: 6px 10px 20px -2px #000;
    box-shadow: 6px 10px 20px -2px #000;
}

#about-section .core-values-list{
    line-height: 22px;
}

#about-section .core-values-list li::marker {
  color: var(--primary-color);
  font-size: 1.25rem;
}

#contact-section{
    padding: 75px 20px;
}

#contact-section .logo-card-bg{
    background-color: #fff;
    width: 100%;
    border-radius: 5%;
    padding: 20px;
}

#contact-section .logo-card-bg img{
    width: inherit;
}

.icon-col{
    margin: auto;
    padding: 0;
}

.icon-circle{
    background-color: #003267;
    padding: 12px;
    border-radius: 50%;
    width: 52px;
    margin: auto;
}

.icon-circle svg{
    fill: var(--primary-color);
}

#contact-section #contact-us-info{
    margin-top: 50px;
}

#contact-section #contact-us-info h1{
    margin-bottom: 0px;
}

#contact-section .contact-phone-email{
    margin-top: 50px;
}

#contact-section .contact-phone-email .row{
    margin-bottom: 20px;
}

#contact-section .contact-phone-email .col-10{
    line-height: 20px;
    margin: auto;
}

#contact-section .contact-phone-email .col-10 span{
    letter-spacing: 1px;
    color: var(--primary-color);
}

#contact-section .contact-phone-email .col-10 p{
    /* font-size: 1.25rem; */
    margin-bottom: 0;
}

footer{
    background-color: #000;
}








/* mobile view */
@media screen and (max-width: 991px) {
  .hero-overlay{
    background-color: var(--background-color);
    position: absolute;
    width: stretch;
    height: 85vh;
    background: #000B1B;
  }

  #le-hero{
    margin: 0;
  }

  .hero-info{
    text-align: center;
  }

  .partial-bg {
    background: none;
    }

    .little-bar{
        margin: 20px auto;
    }

    #le-hero p {
    width: 100%;
    margin: auto;
    }

    #le-hero .button-group a{
        margin: 0;
        width: 100%;
        margin-bottom: 20px;
    }

    /* #le-hero.partial-bg {
        background-image: url(./images/1000159299.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
    } */

    #le-hero .hero-overlay{
        /* background-color: var(--background-color); */
        position: absolute;
        width: stretch;
        height: 85vh;
        background: #000b1ba6;
    }

    #le-hero .little-bar{
        max-width: 150px;
        margin: 30px auto;
    }

    .le-bg-secondary .col {
        border-bottom: #ffffff0d solid 2px;
    }

}

@media screen and (min-width: 992px) {
    .div-line{
        width: 0px;
        padding: 0;
        margin: 0;
        border-right: #177de94a 2px solid;
        max-height: 190px;
        position: relative;
        top: 65px;
    }

    .nav-item,
    .nav-item .btn{
    margin-left: 30px;
}

    .nav-item .btn{
    margin: auto;
}

    #le-hero{
    background-size: auto 100%;
    background-position: right;
    /* background-position-x: 375px; */
}

    #services-section #icon-cards .col-lg-3{
        padding: 0;
    }

#le-hero .hero-inner{
/* background: linear-gradient(90deg,rgba(0, 11, 27, 1) 29%, rgba(23, 125, 233, 0) 60%);            */
background: linear-gradient(90deg,rgba(0, 11, 27, 1) 25%, rgba(23, 125, 233, 0) 74%);           
}


/* #le-hero .btn {
    font-weight: 500;
} */



    #le-hero .size-control{
    display: none!important;
  }

  #what-we-offer{
    padding: 75px 100px;
    margin: 0;
  }

  #services-section .le-bg-secondary .card{
    background-color: var(--background-secondary-color);
    margin: 45px auto;
    width: auto;
    border: none;
    color: #ffffff;
    border-right: #177de94a 3px solid;
    /* border-right: #177de94a 2px solid;*/
    border-radius: 0;
}

  #services-section .le-bg-secondary .col-lg-3:last-of-type .card{
    border: none;
}

#services-section .card svg{
    margin: auto;
    background-color: var(--background-secondary-color);
    width: 85px;
    margin-bottom: 15px;
    fill: var(--primary-color);
}

#services-section .card .card-title{
    font-size: 1.25rem;
    }

    #services-accordion{
        max-width: 500px;
        margin: auto;
    }

    #services-list {
    margin-top: 0px;
}

#testimonials-section {
    padding: 50px 100px;
}

.testimonials {
    height: 425px;
    margin: auto;
}

.testimonials-pitch p {
    margin-top: 25px;
}

/* .review-title {
    font-size: 1rem;
} */

    /* #about-section {
        padding: 50px 0;
    } */

    #about-section .le-bg-secondary{
        padding: 0 100px;
        margin: 0;
    }

    #about-section .about-icons h1{
        font-size: 2rem;
    }

    #about-section .info-right{
        margin: auto;
    }

    #about-section .card .card-title {
        font-size: 1.25rem;
    }
    .le-section{
        margin: 0;
        padding: 0 !important;
    }

    .testimonials-card .card{
        border: none;
    }

    #icon-cards,
    .about-icons{
        margin: 0;
    }


    #contact-section{
        padding: 90px !important;
    }

    #contact-section .logo-card-bg {
    max-width: 400px;
    margin: auto;
}

#contact-section #contact-us-info {
    margin-top: 0px;
}


}

@media screen and (min-width: 1200px) {
    .testimonials{
        height: 350px;
        margin: auto;
    }
}

.footer-tagline{
    font-size: 12px;
    color: #8a8d93;
    font-weight: normal;
}



/* ─── PHOTO GALLERY STRIP ─── */
    #gallery-strip {
      background: var(--dark);
      padding: 0;
      overflow: hidden;
    }

    .gallery-scroll {
      display: flex;
      gap: 3px;
      animation: scrollGallery 30s linear infinite;
      width: max-content;
    }

    .gallery-scroll:hover { animation-play-state: paused; }

    @keyframes scrollGallery {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    .gallery-img-wrap {
      width: 320px;
      height: 200px;
      overflow: hidden;
      flex-shrink: 0;
      position: relative;
    }

    .gallery-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: brightness(0.75) saturate(0.8);
      transition: filter 0.4s;
    }

    .gallery-img-wrap:hover img { filter: brightness(1) saturate(1.1); }