.logo{
  width:220px;
  height:100px;
  background-color: aliceblue;
  border-radius: 15px;
}
.navbar {
  background-color: transparent !important;
  box-shadow: none !important;
}
.nav-item .nav-link{
  font-weight: bold;
  font-size: large;
  margin-right: 5px;
  color: white;
}
.nav-item .nav-link:hover{
  color:  #c25b3a;

}
.nav-item .btn{
  background-color: #c25b3a;
  border-color: #c25b3a;
  color: white;
  font-weight: bold;
}
/* Hide default navbar toggler icon when menu is open */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  display: none;
}

/* Show custom close icon (X) only when toggled and only on mobile */
.navbar-toggler[aria-expanded="true"] .custom-close-icon {
  display: inline-block !important;
  font-size: 1.8rem;
  line-height: 1;
  color: #000;
  
}

/* Default: hide the X icon */
.custom-close-icon {
  display: none;
  margin-left: 8px;
}
.footer-section{
  background: url('../img/img4.jpg') no-repeat center center/cover;
  background-attachment: fixed;
  color:white;
  .overlay {
  background: rgba(0, 0, 0, 0.9);
  padding: 60px 20px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-decoration-none{
  color: white;
}
.text-decoration-none:hover{
  color:rgb(252, 156, 32);
}

}
.footer-logo-section{
  width:300px;
}
.footer-logo-section img{
  width:50%;
  background-color: aliceblue;
  border-radius: 15px;

}





/* Hide toggler icon and custom close icon on desktop (≥992px) */
@media (min-width: 992px) {
  .navbar-toggler {
    display: none !important;
  }
}

@media (max-width:991px){
  .navbar-collapse{
    background-color: #885d1e;
    padding: 20px;
    border-radius: 25px;
  }
  .nav-item .nav-link:hover{
    color: black;
  }
  .navbar-toggler, .navbar-toggler-icon{
    color:white;
    fill: white; 
  }
  .dropdown-menu .dropdown-item:hover{
    background-color: #885d1e;
    color:white;
   
  }
}

```css
/* =========================================================
   CIVIL CONSTRUCTION - TYPOGRAPHY MATCH
   Keep new sections consistent with existing AJASCO website
========================================================= */

/* ---------------------------------------------------------
   BASE FONT
--------------------------------------------------------- */

.cc-hero,
.cc-intro-section,
.cc-services-section,
.cc-ksa-intro,
.cc-ksa-section,
.cc-end-to-end,
.cc-villa-section,
.cc-showcase,
.cc-final-cta {

    font-family: inherit;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.cc-hero h1 {
    font-family: inherit;

    font-weight: 700;

    letter-spacing: 0;

    text-transform: uppercase;

    line-height: 1.05;
}

.cc-hero p {
    font-family: inherit;

    font-weight: 400;

    letter-spacing: 0;

    line-height: 1.6;
}

.cc-hero-label {
    font-family: inherit;

    font-weight: 600;

    letter-spacing: 2px;
}


/* ---------------------------------------------------------
   SECTION LABELS
--------------------------------------------------------- */

.cc-section-label {
    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1.5px;

    line-height: 1.4;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   MAIN HEADINGS
--------------------------------------------------------- */

.cc-intro-text h1,
.cc-services-section h2,
.cc-section-heading h2,
.cc-ksa-intro-content h2,
.cc-villa-content h2,
.cc-final-cta h2 {

    font-family: inherit;

    font-weight: 700;

    letter-spacing: 0;

    line-height: 1.08;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   INTRO TEXT
--------------------------------------------------------- */

.cc-intro-text h1 {
    font-size: 48px;

    margin-bottom: 25px;
}

.cc-intro-text h5 {
    font-family: inherit;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: 0;
}


/* ---------------------------------------------------------
   SERVICES
--------------------------------------------------------- */

.cc-services-section h2 {
    font-size: 48px;
}

.cc-services-section .offer-container p {
    font-family: inherit;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.7;
}

.cc-services-section .offer-text p {
    font-family: inherit;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.5;
}


/* ---------------------------------------------------------
   KSA EXPERIENCE
--------------------------------------------------------- */

.cc-ksa-intro-content h2 {
    font-size: 50px;
}

.cc-ksa-intro-content p {
    font-family: inherit;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.75;
}

.cc-ksa-intro-content .cc-large-text {
    font-size: 18px;

    font-weight: 500;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   PROJECT EXPERIENCE HEADING
--------------------------------------------------------- */

.cc-section-heading h2 {
    font-size: 50px;
}

.cc-section-heading p {
    font-family: inherit;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.75;
}


/* ---------------------------------------------------------
   LOCATION CARDS
--------------------------------------------------------- */

.cc-location-content h3 {
    font-family: inherit;

    font-size: 25px;

    font-weight: 700;

    letter-spacing: 0;

    line-height: 1.15;
}

.cc-location-content p {
    font-family: inherit;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   END-TO-END SECTION
--------------------------------------------------------- */

.cc-capability-card h3 {
    font-family: inherit;

    font-size: 17px;

    font-weight: 700;

    letter-spacing: 0.5px;

    line-height: 1.3;
}

.cc-capability-card p {
    font-family: inherit;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.7;
}

.cc-process-item strong {
    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 1px;
}


/* ---------------------------------------------------------
   VILLA DEVELOPMENT
--------------------------------------------------------- */

.cc-villa-content h2 {
    font-size: 50px;
}

.cc-villa-content p {
    font-family: inherit;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.75;
}

.cc-villa-content .cc-villa-lead {
    font-size: 18px;

    font-weight: 500;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   VILLA SHOWCASE
--------------------------------------------------------- */

.cc-showcase-caption strong {
    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 0.5px;
}


/* ---------------------------------------------------------
   FINAL CTA
--------------------------------------------------------- */

.cc-final-cta h2 {
    font-size: 52px;
}

.cc-final-btn,
.cc-villa-btn {
    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1px;
}


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

@media (max-width: 991px) {

    .cc-hero h1 {
        font-size: 52px;
    }

    .cc-intro-text h1,
    .cc-services-section h2,
    .cc-section-heading h2,
    .cc-ksa-intro-content h2,
    .cc-villa-content h2 {
        font-size: 42px;
    }

    .cc-final-cta h2 {
        font-size: 45px;
    }

}


@media (max-width: 767px) {

    .cc-hero h1 {
        font-size: 38px;
    }

    .cc-intro-text h1,
    .cc-services-section h2,
    .cc-section-heading h2,
    .cc-ksa-intro-content h2,
    .cc-villa-content h2,
    .cc-final-cta h2 {
        font-size: 34px;
    }

    .cc-intro-text h5,
    .cc-ksa-intro-content p,
    .cc-villa-content p,
    .cc-section-heading p {
        font-size: 15px;
    }

}

/* =========================================================
   CIVIL CONSTRUCTION - EXPLORE BUTTON
========================================================= */

.expertise-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin-top: 22px;
    padding: 10px 15px;

    color: #ffffff;
    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 2px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;

    transition: all 0.3s ease;
}

.expertise-link i {
    font-size: 17px;
    font-style: normal;
    line-height: 1;

    transition: transform 0.3s ease;
}

.expertise-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
}

.expertise-link:hover i {
    transform: translateX(5px);
}

/* =========================================================
   GLOBAL PAGE SCROLL CONTROLS
========================================================= */

html {
  scroll-behavior: smooth;
}


.page-scroll-controls {

  position: fixed;

  right: 24px;

  bottom: 24px;

  z-index: 9999;

  display: flex;

  flex-direction: column;

  gap: 8px;

}


.page-scroll-btn {

  width: 46px;

  height: 46px;

  border: none;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #ffffff;

  background: #c25b3a;

  font-size: 22px;

  font-weight: 700;

  line-height: 1;

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  transform: translateX(20px);

  pointer-events: none;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.22);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background-color 0.3s ease;

}


/* =========================================================
   GLOBAL BACK TO TOP BUTTON
========================================================= */

html {
  scroll-behavior: smooth;
}


.page-scroll-btn {

  position: fixed;

  right: 24px;

  bottom: 24px;

  z-index: 9999;

  width: 46px;

  height: 46px;

  border: none;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #ffffff;

  background: #c25b3a;

  font-size: 22px;

  font-weight: 700;

  line-height: 1;

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  transform: translateY(15px);

  pointer-events: none;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.22);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background-color 0.3s ease;

}


.page-scroll-btn.is-visible {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

  pointer-events: auto;

}


.page-scroll-btn:hover {

  background: #a9462c;

  transform: translateY(-3px);

}


.page-scroll-btn:focus-visible {

  outline: 3px solid rgba(194, 91, 58, 0.35);

  outline-offset: 3px;

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 767px) {

  .page-scroll-btn {

    right: 15px;

    bottom: 18px;

    width: 42px;

    height: 42px;

    font-size: 20px;

  }

}