/*******************************/
/********* General CSS *********/
/*******************************/
body {
    color: #666666;
    background: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

h1,
h2, 
h3, 
h4,
h5, 
h6 {
    font-weight: 100;
}

a {
    color: #454545;
    transition: .3s;
}

a:hover,
a:active,
a:focus {
    color: #333333;
    outline: none;
    text-decoration: none;
}

.btn:focus {
    box-shadow: none;
}

.wrapper {
    position: relative;
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
    background: #ffffff;
}

.back-to-top {
    position: fixed;
    display: none;
    background: #FFD662;
    color: #000000;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 1;
    font-size: 22px;
    border-radius: 5px;
    right: 15px;
    bottom: 15px;
    transition: background 0.5s;
    z-index: 9;
}

.back-to-top:hover {
    color: #ffffff;
    background: #00539C;
}

.back-to-top i {
    padding-top: 10px;
}


/*******************************/
/********** Header CSS *********/
/*******************************/
.header {
    position: relative;
    width: 100%;
    padding: 15px 0 0 0;
    background: #00539C;
}

.header.home {
    margin-bottom: 45px;
    background: linear-gradient(rgba(0, 83, 156, 1), rgba(0, 83, 156, .9), rgba(0, 83, 156, 1)), url(../img/header.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (min-width: 992px) {
    .header .row {
        padding: 0 60px;
    }
}

.header .header-top {
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.header .brand {
    position: relative;
}

.header .brand a {
    color: #ffffff;
    font-size: 60px;
    font-weight: 100;
}

.header .brand img {
    width: auto;
    max-width: 150px;
    height: 90%;
    max-height: 150Spx;
    display: block;
    filter: brightness(0) invert(1) contrast(1.3);
}

.header .topbar {
    position: relative;
    text-align: right;
}

.header .topbar .topbar-col {
    display: inline-block;
    padding: 0 15px;
    margin-bottom: 15px;
}

.header .topbar-col a {
    color: #ffffff;
    font-size: 13px;
}

.header .topbar-col a i {
    margin-right: 10px;
    color: #FFD662;
}

.header .topbar-social {
    position: relative;
}

.header .topbar-social a {
    display: inline-block;
}

.header .topbar-social a i {
    margin-right: 10px;
    font-size: 18px;
    color: #ffffff;
}

.header .topbar-social a:last-child i {
    margin: 0;
}

.header .topbar-social a:hover i {
    color: #FFD662;
}

.header .dropdown-menu {
    margin-top: 0;
    border: 0;
    border-radius: 5px;
    background: #eeeeee;
}

.header .dropdown-menu a.active {
    color: #FFD662;
}

@media (min-width: 992px) {
    .header .navbar {
        background: transparent !important;
    }
    
    .header .navbar-brand {
        display: none;
    }
    
    .header .navbar-light a.nav-link,
    .header .navbar-light .show > .nav-link {
        position: relative;
        padding: 8px 10px;
        color: #ffffff;
        font-size: 16px;
        z-index: 1;
    }
    
    .header .navbar-light a.nav-link:hover,
    .header .navbar-light a.nav-link.active {
        color: #FFD662;
    }
}

@media (max-width: 992px) {
    .header .brand {
        text-align: center;
        margin-bottom: 15px;
    }
    
    .header .topbar {
        text-align: center;
        margin-bottom: 15px;
    }
    
    .header .topbar .topbar-col {
        margin: 0;
    }
    
    .header .topbar .topbar-social {
        margin-top: 5px;
    }
    
    .header .navbar {
        background: #ffffff !important;
        border: none;
        z-index: 1;
    }
    
    .header a.nav-link {
        padding: 5px 0;
    }
    
    .header .dropdown-menu {
        box-shadow: none;
    }
}

.header .navbar .btn {
    position: relative;
    margin-left: 15px;
    padding: 12px 20px 10px 20px;
    font-size: 13px;
    text-transform: uppercase;
    color: #00539C;
    border: none;
    border-radius: 5px;
    background: #ffffff;
    transition: .3s;
}

.header .navbar .btn:hover {
    color: #000000;
    background: #FFD662;
}

.header .navbar .btn i {
    font-size: 16px;
    margin-right: 8px;
}

@media (max-width: 992px) {
    .header .navbar {
        border-radius: 5px;
    }
    
    .header .navbar .btn {
        display: none;
    }
}

.header .hero {
    padding-top: 60px;
    padding-bottom: 60px;
}

.header .hero h2 {
    margin: 0;
    font-size: 60px;
    font-weight: 100;
    color: #ffffff;
}

.header .hero h2 span {
    color: #FFD662;
}

.header .hero p {
    margin: 10px 0 20px 0;
    font-size: 22px;
    color: #ffffff;
}

.header .hero a.btn {
    position: relative;
    padding: 15px 30px;
    font-size: 16px;
    text-transform: uppercase;
    color: #00539C;
    border: none;
    border-radius: 5px;
    background: #ffffff;
    transition: .3s;
}

.header .hero a.btn:hover {
    color: #000000;
    background: #FFD662;
}

.header .hero .form {
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .3);
    border-radius: 5px;
}

.header .hero .form h3 {
    color: #ffffff;
    font-weight: 300;
}

.header .hero .form input,
.header .hero .form select,
.header .hero .form textarea {
    margin-bottom: 15px;
    height: 45px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .2);
}

.header .hero .form textarea {
    height: 75px;
}

.header .hero .form select,
.header .hero .form input::placeholder,
.header .hero .form textarea::placeholder {
    color: #ffffff;
}

.header .hero .form select option:not(:checked) {
    color: #666666;
}

.header .hero .form .btn {
    position: relative;
    padding: 10px 35px;
    font-size: 16px;
    text-transform: uppercase;
    color: #000000;
    border: none;
    border-radius: 5px;
    background: #FFD662;
    transition: .3s;
}

.header .hero .form .btn:hover {
    color: #00539C;
    background: #ffffff;
}

@media (max-width: 767.98px) {
    .header .hero .form {
        margin-top: 45px;
    }
}




/*******************************/
/******* Page Header CSS *******/
/*******************************/
.page-header {
    position: relative;
    margin-bottom: 45px;
    padding: 90px 0;
    text-align: center;
    background: #FFD662;
}

.page-header h2 {
    color: #000000;
    font-size: 60px;
    font-weight: 100;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.page-header a {
    position: relative;
    padding: 0 12px;
    font-size: 22px;
    font-weight: 300;
    color: #00539C;
}

.page-header a:hover {
    color: #000000;
}

.page-header a::after {
    position: absolute;
    content: "/";
    width: 8px;
    height: 8px;
    top: -2px;
    right: -7px;
    text-align: center;
    color: #666666;
}

.page-header a:last-child::after {
    display: none;
}


/*******************************/
/******* Section Header ********/
/*******************************/
.section-header {
    position: relative;
    width: 100%;
    max-width: 550px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 60px;
    padding-bottom: 15px;
}

.section-header::before {
    position: absolute;
    content: "";
    width: 100px;
    height: 3px;
    left: calc(50% - 50px);
    bottom: 0;
    background: linear-gradient(to left, #FFD662, #00539C, #FFD662);
    border-radius: 100%;
}

.section-header::after {
    position: absolute;
    content: "";
    width: 20px;
    height: 9px;
    left: calc(50% - 10px);
    bottom: -3px;
    background: #00539C;
    border-radius: 5px;
}

.service .section-header {
    text-align: center; /* center everything */
}

.service .section-header .services-intro {
    font-size: 30px;
    font-weight: 400;
    margin: 0 auto;
    line-height: 1.4;
}

.service .section-header .services-intro .tagline {
    display: block;       /* ensures it sits underneath */
    font-size: 18px;      /* smaller than main text */
    font-style: italic;   /* makes it look like a motto */
    margin-top: 8px;
}

 .service .section-header .black {
    color: #000000;
    font-size: 60px;
    font-weight: 100;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.section-header p {
    margin-bottom: 10px;
    font-size: 20px;
}

.section-header h2 {
    color: #00539C;
    font-size: 50px;
    font-weight: 100;
}

.section-header.left {
    text-align: left;
}

.section-header.left::before {
    width: 60px;
    left: 0;
    background: linear-gradient(to left, #FFD662, #00539C, #00539C);
    border-radius: 0 100% 100% 0;
}

.section-header.left::after {
    left: 0;
    border-radius: 5px;
}


/*******************************/
/********** About CSS **********/
/*******************************/
.about {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

.about .about-img img {
    width: 100%;
    border-radius: 5px;
}

.about .about-text h2 {
    position: relative;
    color: #00539C;
    font-size: 50px;
    margin-bottom: 15px;
}

.about .about-text h2 span {
    font-size: 120px;
}

.about .about-text p {
    font-size: 16px;
    margin-bottom: 30px;
}

.about .about-text a.btn {
    padding: 15px 35px;
    font-size: 16px;
    text-transform: uppercase;
    color: #000000;
    border: none;
    border-radius: 5px;
    background: #FFD662;
    transition: .3s;
}

.about .about-text a.btn:hover {
    color: #ffffff;
    background: #00539C;
}

@media (max-width: 767.98px) {
    .about .about-img img {
        margin-bottom: 30px;
    }
}


/*******************************/
/********* Service CSS *********/
/*******************************/

/* REMOVE these if present */
.service .service-item img { aspect-ratio: 16 / 9; object-fit: cover; }
Make all cards equal height without a button
Use flex only to let the text area grow, not the image

css
Copy code
/* Columns stretch to same height */
.service .row{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
.service .row > [class*="col"]{
  display:flex;           /* lets the card fill column height */
}

/* Card is a vertical stack */
.service .service-item{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Image: keep original proportions (no crop) */
.service .service-item img{
  width:100%;
  height:auto;            /* <-- key: no stretching/cropping */
  display:block;
  border-radius:5px 5px 0 0;
}

/* Title + paragraph block: grows to match heights */
.service .service-item h3,
.service .service-item p{
  padding-left:25px;
  padding-right:25px;
}
.service .service-item h3{ padding-top:25px; padding-bottom:10px; }
.service .service-item p{
  margin:0;
  /* let text area grow so all cards equalize */
  flex:1 1 auto;
  padding-bottom:25px;
}

/* If some descriptions are much longer, clamp them to keep uniformity (optional) */
.service .service-item p{
  display:-webkit-box;
  -webkit-line-clamp: 6;   /* show up to 6 lines */
  -webkit-box-orient: vertical;
  overflow:hidden;
}


.service {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.service .service-item {
    position: relative;
    width: 100%;
    text-align: center;
    background: #ffffff;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}

.service .service-item img {
    width: 100%;
    border-radius: 5px 5px 0 0;
}

.service .service-item h3 {
    margin: 0;
    padding: 25px 15px 15px 15px;
    font-size: 20px;
    font-weight: 300;
    color: #00539C;
}

.service .service-item p {
    margin: 0;
    padding: 0 25px 25px 25px;
    font-size: 16px;
}

.service .service-item a.btn {
    position: relative;
    margin-bottom: 30px;
    padding: 10px 20px;
    font-size: 14px;
    text-transform: uppercase;
    color: #000000;
    border: none;
    border-radius: 5px;
    background: #FFD662;
    transition: .3s;
}

.service .service-item:hover a.btn {
    color: #ffffff;
    background: #00539C;
}

.service .service-item a.btn:hover {
    color: #000000;
    background: #FFD662;
}





/*******************************/
/********* Feature CSS *********/
/*******************************/
.feature {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.feature .section-header {
    margin-bottom: 30px;
}

.feature a.btn {
    margin-top: 10px;
    padding: 15px 35px;
    font-size: 16px;
    text-transform: uppercase;
    color: #000000;
    border: none;
    border-radius: 5px;
    background: #FFD662;
    transition: .3s;
}

.feature a.btn:hover {
    color: #ffffff;
    background: #00539C;
}

.feature .feature-item {
    margin-bottom: 30px;
}

.feature .feature-item img {
    width: 100%;
    border-radius: 5px;
}

.feature .feature-item h3 {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 300;
    color: #00539C;
}

.feature .feature-item p {
    margin: 0;
    font-size: 16px;
}

@media (max-width: 767.98px) {
    .feature a.btn {
        margin-bottom: 45px;
    }
}


/*******************************/
/********* Feature CSS *********/
/*******************************/
.feature {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.feature .section-header {
    margin-bottom: 30px;
}

.feature a.btn {
    margin-top: 10px;
    padding: 15px 35px;
    font-size: 16px;
    text-transform: uppercase;
    color: #000000;
    border: none;
    border-radius: 5px;
    background: #FFD662;
    transition: .3s;
}

.feature a.btn:hover {
    color: #ffffff;
    background: #00539C;
}

.feature .feature-item {
    margin-bottom: 30px;
}

.feature .feature-item img {
    width: 100%;
    border-radius: 5px;
}

.feature .feature-item h3 {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 300;
    color: #00539C;
}

.feature .feature-item p {
    margin: 0;
    font-size: 16px;
}

@media (max-width: 767.98px) {
    .feature a.btn {
        margin-bottom: 45px;
    }
}


/*******************************/
/*********** Team CSS **********/
/*******************************/
.team {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.team .team-item {
    margin-bottom: 30px;
}

.team .team-img {
    position: relative;
    font-size: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.team .team-img img {
    width: 100%;
    height: auto;
}

.team .team-text {
    padding: 150px 15px 30px 15px;
    margin-top: -130px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #eeeeee;
    transition: .3s;
}

.team .team-text:hover {
    background: #FFD662;
    border: 1px solid #FFD662;
}

.team .team-text h2 {
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 400;
    color: #00539C;
}

.team .team-text h3 {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 300;
}

.team .team-social {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}

.team .team-social a {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    padding: 11px 0 10px 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    text-align: center;
    color: #ffffff;
    border-radius: 5px;
    transition: .3s;
}

.team .team-social a.social-tw {
    background: #00acee;
}

.team .team-social a.social-fb {
    background: #3b5998;
}

.team .team-social a.social-li {
    background: #0e76a8;
}

.team .team-social a.social-in {
    background: #3f729b;
}

.team .team-social a.social-yt {
    background: #c4302b;
}

.team .team-social a:last-child {
    margin-right: 0;
}

.team .team-social a:hover {
    color: #ffffff;
    background: #00539C;
}


/*******************************/
/*********** FAQs CSS **********/
/*******************************/
.faqs {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

.faqs .section-header {
    margin-bottom: 30px;
}

.faqs img {
    width: 100%;
    border-radius: 5px;
}

@media(max-width: 767.98px) {
    .faqs img {
        margin-bottom: 30px;
    }
}

.faqs .card {
    margin-bottom: 15px;
    padding-top: 15px;
    border: none;
    border-radius: 0;
    border-top: 1px solid #eeeeee;
}

.faqs .card:last-child {
    margin-bottom: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #eeeeee;
}

.faqs .card-header {
    padding: 0;
    border: none;
    background: #ffffff;
}

.faqs .card-header a {
    display: block;
    width: 100%;
    color: #00539C;
    font-size: 18px;
    font-weight: 300;
    line-height: 40px;
}

.faqs .card-header a span {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    text-align: center;
    background: #FFD662;
    color: #000000;
    border-radius: 5px;
}

.faqs .card-header [data-toggle="collapse"]:after {
    font-family: 'font Awesome 5 Free';
    content: "\f067";
    float: right;
    color: #00539C;
    font-size: 12px;
    font-weight: 900;
    transition: .3s;
}

.faqs .card-header [data-toggle="collapse"][aria-expanded="true"]:after {
    font-family: 'font Awesome 5 Free';
    content: "\f068";
    float: right;
    color: #00539C;
    font-size: 12px;
    font-weight: 900;
    transition: .3s;
}

.faqs .card-body {
    padding: 15px 0 0 0;
    font-size: 16px;
    border: none;
    background: #ffffff;
}

.faqs a.btn {
    margin-top: 30px;
    padding: 15px 35px;
    font-size: 16px;
    text-transform: uppercase;
    color: #000000;
    border: none;
    border-radius: 5px;
    background: #FFD662;
    transition: .3s;
}

.faqs a.btn:hover {
    color: #ffffff;
    background: #00539C;
}


/*******************************/
/****** Pricing Plan CSS *******/
/*******************************/
.price {
    position: relative;
    padding: 45px 0 15px 0;
}

.price .price-item {
    text-align: center;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
    margin-bottom: 30px;
}

.price .price-header {
    padding: 30px 0 50px 0;
    color: #000000;
    background: #FFD662;
    border-radius: 5px 5px 0 0;
}

.price .featured-item .price-header {
    color: #ffffff;
    background: #00539C;
}

.price .price-icon {
    margin-bottom: 15px;
}

.price .price-icon i {
    display: inline-block;
    font-size: 45px;
}

.price .price-title h2 {
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 2px;
}

.price .price-pricing h2 {
    font-size: 60px;
    font-weight: 100;
    margin-left: 15px;
    margin-bottom: 0;
}

.price .price-pricing h2 small {
    position: absolute;
    font-size: 18px;
    font-weight: 300;
    margin-top: 16px;
    margin-left: -15px;
}

.price .price-body {
    padding: 20px 0;
    background: #ffffff;
    border-radius:0;
    margin-top: -30px;
}

.price .price-des ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.price .price-des ul li {
    color: #2A293E;
    font-size: 14px;
    font-weight: 300;
    padding: 5px;
    border-bottom: 1px solid #eeeeee;
}

.price .price-des ul li:last-child {
    border: none;
}

.price .price-footer {
    padding-bottom: 30px;
    background: #ffffff;
    border-radius: 0 0 5px 5px;
}


.price .price-action a {
    display: inline-block;
    padding: 10px 25px;
    color: #000000;
    font-size: 14px;
    letter-spacing: 2px;
    background: #FFD662;
    border-radius: 5px;
    transition:  .3s;
}

.price .price-action a i {
    margin-right: 5px;
}

.price .price-action a:hover {
    color: #ffffff;
    background: #00539C;
}

.price .featured-item .price-action a {
    color: #ffffff;
    background: #00539C;
}

.price .featured-item .price-action a:hover {
    color: #000000;
    background: #FFD662;
}



.price .row {
    display: flex;
    flex-wrap: wrap;
}

.price .col-md-4 {
    display: flex;
}

.price .price-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}



/*******************************/
/********** Newsletter *********/
/*******************************/
.newsletter {
    position: relative;
    margin: 45px 0;
    padding: 60px 0;
    background: #00539C;
}

.newsletter h2 {
    color: #ffffff;
    font-size: 45px;
    font-weight: 100;
    text-transform: uppercase;
}

.newsletter p {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 300;
}

.newsletter .form {
    position: relative;
}

.newsletter input {
    height: 60px;
    border: none;
    border-radius: 5px;
}

.newsletter .btn {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 50px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight:400;
    text-transform: uppercase;
    color: #000000;
    background: #FFD662;
    border-radius: 5px;
    transition: .3s;
}

.newsletter .btn:hover {
    color: #ffffff;
    background: #00539C;
}


/*******************************/
/******* Testimonial CSS *******/
/*******************************/
.testimonial {
    position: relative;
    padding: 45px 0;
}

.testimonial .testimonial-item {
    position: relative;
    margin: 0 15px;
    text-align: center;
}

.testimonial .testimonial-img {
    position: relative;
    margin-bottom: 15px;
    z-index: 1;
}

.testimonial .testimonial-item img {
    margin: 0 auto;
    width: 150px;
    border: 15px solid #ffffff;
    border-radius: 100px;
}

.testimonial .testimonial-content {
    position: relative;
    margin-top: -90px;
    padding: 100px 25px 25px 25px;
    text-align: center;
    background: #FFD662;
    border-radius: 5px;
}

.testimonial .testimonial-item p {
    color: #000000;
    font-size: 16px;
    font-weight: 400;
}

.testimonial .testimonial-content h3 {
    color: #000000;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.testimonial .testimonial-content h4 {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0;
}

.testimonial .owl-nav,
.testimonial .owl-dots {
    margin-top: 15px;
    text-align: center;
}

.testimonial .owl-dot {
    display: inline-block;
    margin: 0 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FFD662;
}

.testimonial .owl-dot.active {
    background: #00539C;
}


/*******************************/
/********* Contact CSS *********/
/*******************************/
.contact {
    position: relative;
    width: 100%;
    padding: 45px 0;
}

.contact .faqs {
    padding: 0;
}

@media(max-width: 767.98px) {
    .contact .faqs {
        margin-bottom: 30px;
    }
}

.contact .contact-form input {
    height: 60px;
    border-radius: 5px;
}

.contact .contact-form .btn {
    height: 60px;
    padding: 0 20px;
    color: #000000;
    font-size: 18px;
    text-transform: uppercase;
    background: #FFD662;
    border-radius: 5px;
    transition: .3s;
}

.contact .contact-form .btn:hover {
    color: #ffffff;
    background: #00539C;
}

/*******************************/
/******* Call to Action ********/
/*******************************/
.call-to-action {
    position: relative;
    margin: 0 0 0 0;       
    padding: 60px 0 105px;
    background: #00539C;
    overflow: hidden;
    
}

.call-to-action h2 {
    color: #ffffff;
    font-size: 45px;
    font-weight: 100;
    text-transform: uppercase;
}

.call-to-action p {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    font-weight: 300;
}

.call-to-action a {
    float: right;
    height: 60px;
    padding: 16px 35px 14px 35px;
    font-size: 18px;
    font-weight:400;
    text-transform: uppercase;
    color: #000000;
    background: #FFD662;
    border-radius: 5px;
}

.call-to-action a:hover {
    color: #FFD662;
    background: #ffffff;
}

@media (max-width: 768px) {
    .call-to-action a {
        float: left;
        margin-top: 30px;
    }
}


/*******************************/
/********* Footer CSS **********/
/*******************************/
/* --- CTA INSIDE FOOTER --- */

.footer{
  width:100%;
  background:#00539C;
  color:#fff;
  margin-top:0;
  font-weight:300;
}
.footer * { box-sizing:border-box; }

/* center content but keep full-width background */
.footer-inner{ max-width:1200px; margin:0 auto; padding:0 24px; }

/* CTA */
.footer-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:48px 0 32px;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.footer-cta h2{ margin:0 0 8px; font-size:44px; font-weight:300; letter-spacing:.5px; }
.footer-cta p{ margin:0; opacity:.9; }
.btn-accent{ background:#FFD662; color:#052a52; padding:14px 24px; border-radius:8px; font-weight:600; text-transform:uppercase; border:0; }

/* Three-column grid */
.footer-widgets{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.4fr; /* contact | links | stay updated (right) */
  gap:48px;
  padding:40px 0 8px;
}

/* Headings */
.footer .footer-contact h2,
.footer .footer-link h2,
.footer .footer-form h2{
  margin:0 0 18px; font-size:18px; font-weight:600; color:#FFD662;
  text-transform:uppercase; letter-spacing:1px;
}

/* Links */
.footer .footer-link a{ display:block; margin-bottom:10px; font-size:16px; color:#fff; }
.footer .footer-link a:hover{ color:#FFD662; }

/* Social icons spacing */
.footer .footer-social a{ display:inline-block; margin-right:12px; color:#fff; }
.footer .footer-social a:hover{ color:#FFD662; }

/* Email + Submit on one line everywhere */
.footer .subscribe{
  display:flex; gap:8px; max-width:520px; margin-top:14px;
}
.footer .subscribe input{
  flex:1; height:48px; padding:0 14px; border:0; border-radius:6px; font-size:14px;
}
.footer .subscribe .btn{
  height:48px; padding:0 18px; border:0; border-radius:6px; font-weight:600; text-transform:uppercase;
  background:#FFD662; color:#000;
}
.footer .subscribe .btn:hover{ background:#003e74; color:#fff; }

/* Bottom menu & copyright */
.footer .footer-menu{ padding:16px 0; border-top:1px solid rgba(255,255,255,.1); }
.footer .footer-menu .f-menu{ text-align:center; }
.footer .footer-menu .f-menu a{
  color:#fff; font-size:16px; margin:0 14px; padding:0 14px; border-right:1px solid rgba(255,255,255,.5);
}
.footer .footer-menu .f-menu a:last-child{ border-right:none; }

.footer .copyright{ padding:20px 0 40px; border-top:1px solid rgba(255,255,255,.1); text-align:center; }
.footer .copyright p{ margin:0; font-size:14px; }

/* Responsive */
@media (max-width: 992px){
  .footer-cta h2{ font-size:34px; }
  .footer-widgets{ grid-template-columns: 1fr 1fr; }
  .footer-form{ order:2; }   /* ends the row on tablet */
}
@media (max-width: 600px){
  .footer-cta{ flex-direction:column; align-items:flex-start; }
  .footer-cta h2{ font-size:28px; }
  .footer-widgets{ grid-template-columns:1fr; gap:28px; }
}

/*******************************/
/**** Mobile Optimization ******/
/*******************************/

/* Tablets */
@media (max-width: 991px) {
  /* Logo smaller */
  .header .brand img {
    max-width: 120px;
    height: auto;
  }

  /* Hero section text smaller */
  .header .hero h2 { font-size: 42px; }
  .header .hero p { font-size: 18px; }

  /* Footer widgets in 2 columns */
  .footer-widgets {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  /* Logo much smaller */
  .header .brand img {
    max-width: 90px;
    height: auto;
  }

  /* Hero */
  .header .hero h2 { font-size: 28px; line-height: 1.3; }
  .header .hero p { font-size: 15px; }

  /* Section titles */
  .section-header h2 { font-size: 26px; }

  /* Services stack */
  .service .row { flex-direction: column; }
  .service .row > [class*="col"] {
    width: 100%;
    margin-bottom: 20px;
  }

  /* Pricing cards stack */
  .price .row { flex-direction: column; }
  .price .col-md-4 { width: 100%; margin-bottom: 20px; }

  /* Footer single column */
  .footer-widgets {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Footer CTA */
  .footer-cta { flex-direction: column; text-align: center; }
  .footer-cta h2 { font-size: 22px; }
  .footer-cta p { font-size: 14px; }
}

/* ========================= */
/* Mobile Optimization Fixes */
/* ========================= */

@media (max-width: 768px) {
  /* Keep "Get a Free Cleaning Service" aligned left */
  .footer-cta {
    flex-direction: column;
    align-items: flex-start;  /* instead of center */
    text-align: left;
  }

  .footer-cta h2,
  .footer-cta p {
    text-align: left;
    width: 100%;
  }

  .footer-cta a {
    width: 100%;
    text-align: center;
    margin-top: 15px;
  }

  /* Stack footer links vertically */
  .footer .footer-menu .f-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .footer .footer-menu .f-menu a {
    border: none;
    margin: 0;
    padding: 0;
  }

  /* Newsletter form input + button stacked on mobile */
  .footer .subscribe {
    flex-direction: column;
    align-items: stretch;
  }

  .footer .subscribe input,
  .footer .subscribe .btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  /* Newsletter subscribe form fix */
  .footer .subscribe {
    flex-direction: column;
    align-items: stretch;
  }

  .footer .subscribe input,
  .footer .subscribe .btn {
    width: 100%;
    box-sizing: border-box;   /* ensures padding doesn't break width */
  }

  .footer .subscribe input {
    margin-bottom: 10px;      /* spacing between input and button */
  }
}