.mobile{
    display: none;
}
/*CTA*/
.home-cta {
    /*
   background-image: url("../img/blue.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;*/
    display: flex;
    align-items: center;
    background-color: #1a202c;
    padding-top: 160px;
    padding-bottom: 160px;
}

.home-cta h2{
    color: #ffffff;
    text-align: center;
    margin-bottom:0!important;
}

.home-cta h2 span{
    color: #f5c34a;
}

.cta-content{
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    flex-direction: column;
}


.cta-content .yellow-btn{
  display: inline-flex;
}

.cta-content .yellow-btn:hover{
  background-image: url('../img/white-btn.webp');
}

.cta-content .yellow-btn:hover .y-img{
  display: block;
  background-color: #123678;
}


.cta-content .yellow-btn:hover a{
  color: #123678;
}





/*HOME PAGE  ------------ OUR VISION*/


/**/
.home-vision-section{
    display: flex;
    gap: 32px;
    align-items: stretch;
}

.home-vision .title{
    text-align:left ;
}

.home-vision p{
    text-align: left;
}

.half-col-one,
.half-col-two{
    flex: 1;
}

.half-col-one img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: top;
}

/*
.home-vision .title{
    text-align: left;
}
*/
.home-vision .title span{
    color: #123678;
}


.home-text{
    text-align: center;
}


.home-v-cards{
    display: flex;
    gap: 24px;
    align-items: center;
}

.home-v-cards img{
    width: 80px;
    height: 80px;
    padding: 8px;
    background-image: url("../img/dark-blue-dot.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.home-v-cards p{
    text-transform: uppercase;
    font-weight: 500;
    line-height: 24px;
    font-size: 20px;
}

.home-v-cards strong{
    color: #123678;
    font-size: 24px;
}

.home-vison-set {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}


/*home service----------------------*/
.home-service{
    background-color: #1a202c;
}


.home-service h2{
    margin-bottom: 60px;
    text-align: center!important;
}

.home-service img{
    width: 100%;
    object-fit: cover;
    display: block;
}


.home-service-l,
.home-service-r{
    display: flex;
    gap: 32px;
    align-items: center;
}

.home-service-r{
    margin: 72px 0;
}


.home-sl-one,
.home-sr-two{
    flex: 1;
}

.home-sl-two,
.home-sr-one{
    flex: 2;
}


.home-service h3{
    color: #ffffff;
}

.home-service h3 span{
    color: #f5c34a;
}

.home-service p{
    color: #ffffff;
    margin-top: 32px;
}


.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 32px;
}

.service-list li {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 12px;
    color: #ffffff;
}

.service-list li::before {
    content: "";
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-image: url("../icons/y-check-mark.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/*home why*/
.home-why .title span{
    color: #123678!important;
}

.home-why-section{
    display: flex;
    gap: 32px;
    align-items: stretch;
    margin-top: 48px;
}


/**/

.h-why-col-one,
.h-why-col-two{
 flex: 1;
}


.why-card img{
    width: 80px;
    height: 80px;
    padding: 8px;
    background-image: url("../img/dark-blue-dot.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.why-card h3{
    font-size: 24px;
    text-transform: capitalize;
    line-height: 28px;
}



.why-card{
    display: flex;
    gap: 32px;
    align-items: center;
    margin-bottom: 32px;
}


.h-why-col-one img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



.why-card,
.home-v-cards,
.vision-col,
.mission-col {
    border: 16px solid transparent;
    border-image-source: url("../img/border.svg");
    border-image-slice: 100; 
    border-image-repeat: stretch;

    padding: 12px;
    background: transparent;
}



/**/

/* Reviews Slider==========================================================================*/

.review{
    background-color: #1a202c;
    padding-top: 200px;
    padding-bottom: 200px;
}


.review h2{
    margin-bottom: 48px;
    text-align: center!important;
}

.embla {
    overflow:hidden;
}


.embla__viewport {
    overflow:hidden;
}


.embla__container {
    display:flex;
    margin-left:-20px;
}


.embla__slide {
    flex:0 0 33.333%;
    padding-left:20px;
}

.review-card {

    padding:24px;
    border-radius:8px;
    height:100%;
    text-align: center;

    border: 16px solid transparent;
    border-image-source: url("../img/border.svg");
    border-image-slice: 100; /* don't use 'fill' if you want transparent center */
    border-image-repeat: stretch;

    background: transparent;
    

}

.r-info{
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.r-info img{
  width: 80px;
  height: 80px;
  border: 2px solid  #f5c34a;
  border-radius: 50%;
}

.review-text{
  margin: 24px 0;
}

.all-reviews-btn{
  margin-top: 48px;
  text-align: center;
}

.review h3{
    font-size: 32px;
    color: #ffffff;
}

.r-info p{
    color: #ffffff;
}

.review-text{
    color: #ffffff;
}


/*location*/
.home-location .title span{
    color: #123678;
}

/*
.location-section{
    display: flex;
    gap: 48px;
    align-items: stretch;
}

.home-map,
.location-set{
    flex: 1;
}

*/

.home-map,
.about-pro-cards{
    padding: 0;
    border-radius:8px;
    height:100%;
    text-align: center;

    border: 16px solid transparent;
    border-image-source: url("../img/border.svg");
    border-image-slice: 100; /* don't use 'fill' if you want transparent center */
    border-image-repeat: stretch;

    background: transparent;
}



.location-list {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.location-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-family: "Sora";
    margin: 0;
}

.location-list li::before {
    content: "";
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: url("../icons/ink-location.svg") center/contain no-repeat;
}


/*GLOBAL CONTACT*/
.global-contact{
    padding-bottom: 0!important;
}

.global-contact .title span{
    color: #123678;
}



.global-contact .title {
    text-align: left;
}

.g-contact-col-one p{
    margin-top: 24px;
    margin-bottom: 32px;
}


.global-contact-section{
    display: flex;
    gap: 32px;
    align-items: stretch;
}

.g-contact-col-one,
.g-contact-col-two{
    flex: 1;
}


.global-social{
    display: flex;
    gap: 6px;
}

.global-social .footer-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background-image: url("../icons/yellow-ink.svg");
    background-size: cover;
    background-position: center;

}

.global-social .footer-icon-box img {
    width: 32px;
    height: 32px;
}


.global-social{
    margin-bottom: 32px;
}
.global-contact-info{
    margin-bottom: 24px;
}

.global-contact-info a{
    font-size: 20px;
    font-family: "Sora";
}

.global-contact .why-card{
    padding: 12px;
}



/*ABOUT US PAGE*/
.about-hero,
.blog-hero{
   position: relative;
    background-image: url("../img/about/paintin-in-buffalo-team.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
}

.about-hero::before,
.blog-hero::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right,
        rgba(18, 54, 120, 0.9) 0%,      /* dark, opaque left */
        rgba(18, 54, 120, 0.5) 50%,     /* mid fade */
        rgba(18, 54, 120, 0.25) 100%       /* transparent right */
    );
    pointer-events: none; /* so it doesn't block clicks/text below */
    z-index: 1;
}

.about-hero > * ,
.blog-hero > *{
    position: relative;
    z-index: 2;
}



.about-about-us{
    background-color: #1a202c;
    padding-bottom: 160px;
}

.about-about-us h2{
    color: #ffffff;
    text-align: left;
    
}

.about-about-us p{
    color: #ffffff;
}

.about-about-us h2 strong{
    color: #1a202c ;
      font-size: clamp(40px, 5vw, 50px);
}

/**/
.vm-section{
    display: flex;
    gap: 32px;
}

.mission-col,
.vision-col{
    flex: 1;
    padding: 32px;
}

.vm-section h2{
      font-size: clamp(40px, 5vw, 50px)!important;
     text-align: left!important;
}

.vm-section h2 span{
    color: #123678 ;
      
}

.vm-section .title strong{
    font-size: clamp(40px, 5vw, 50px)!important;
}

.vm-section p{
    color: #1a202c;
     font-size: 24px;
    line-height: 36px;
    margin: 32px 0;
    text-align: left;
}


/*choice*/
.about-choice{
    background-color: #1a202c;
   
}

.about-choice p{
    color: #ffffff;
     text-align: center;
     max-width: 700px;
     margin: 0 auto;
}

.about-pro-section{
    display: grid;
    gap: 24px;
}


.apro-card p{
    font-size: 32px;
    line-height: 36px;
}

.apro-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/*
.about-choice .home-service-r,
.about-choice .home-service-l{
       border: 16px solid transparent;
    border-image-source: url("../img/border.svg");
    border-image-slice: 100; 
    border-image-repeat: stretch;

    padding: 12px;
    background: transparent;

}
    */

/*pro*/
.about-pro{
    background-color: #ffffff;
    padding-top: 80px;
    padding-bottom: 80px;
}

.about-pro span{
    color: #123678;
}



/**/

.about-pro-cards{
    display: flex;
    gap: 24px;
    align-items: center;
}

.about-pro-cards img{
    width: 80px;
    height: 80px;
    padding: 8px;
    background-image: url("../img/dark-blue-dot.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.about-pro-cards p{
    text-transform: capitalize;
    font-weight: 500;
    line-height: 24px;
    font-size: 20px;
}

.home-v-cards strong{
    color: #123678;
    font-size: 24px;
}

.about-pro-cards{
    padding: 12px;
    text-align: left;
    margin-bottom: 24px;
}

.about-pro-cards h3{
    font-size: 24px;
    margin-bottom: 0;
    line-height: 30px;
}

.about-pro-section{
    margin-top: 48px;
}





/*GLOBAL WHY CHOOSE US*/
.why-us-card img{
    width: 100%;
    height: auto;
    object-fit: cover;
}



/**/
.g-why-us-section {
    margin-top: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centers each row, including the last partial row */
    gap: 24px;
}

.why-us-card {
    flex: 1 1 calc(33.333% - 16px); /* 3 per row, accounting for 2 gaps of 24px */
    min-width: 320px;              /* forces wrap to 2 per row once 3 won't fit */
    max-width: calc(33.333% - 16px);
    box-sizing: border-box;
    padding: 48px;
    position: relative;

}

.why-us-card p{
    margin-top: 24px;
}




.why-us-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/yellow-frame.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none; 
    z-index: 1;
}

.why-us-card > *{
    position: relative;
    z-index: 2;
}


/*GLOBAL EXPLORE*/
.global-explor{
    background-color: #1a202c;
}

.g-service-text{
    color: #ffffff;
    text-align: center;
    margin-bottom: 48px;
}


/*service page*/
.service-hero{
   position: relative;
    background-image: url("../img/two-painters-scheduling-the-work.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
}

.service-hero::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right,
        rgba(18, 54, 120, 0.9) 0%,      /* dark, opaque left */
        rgba(18, 54, 120, 0.5) 50%,     /* mid fade */
        rgba(18, 54, 120, 0.25) 100%       /* transparent right */
    );
    pointer-events: none; /* so it doesn't block clicks/text below */
    z-index: 1;
}

.service-hero>*{
    position: relative;
    z-index: 2;
}

.service-hero{
    color: #ffffff;
}

.service-hero span{
    color: #f5c34a;
}

.service-hero h1{
    color: #ffffff;
}


.service-about .title span{
    color: #123678;
}

.service-about .title{
    text-align: left;
}

.service-trust h2 span{
    color: #123678;
}

.service-trust p{
    text-align: center;
}



/*FAQ SECTION-------------*/
.faq{
    background-color: #1a202c;
    padding-top: 160px;
    padding-bottom: 160px;
}

.faq h2{
    margin-bottom: 48px;
}

.service-faq .txt{
    color: #ffffff;
}

/**/

.accordion-container {
    margin: auto;
}

li.accordion {
    list-style: none;
    margin-bottom: 10px;
  /*  border: 1px solid #f5c34a;*/
    border-radius: 16px;
}

li.accordion span {
    display: block;
    position: relative;
    background: #f5c34a;
    color: #1a202c;
    padding: 16px 55px 16px 20px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 16px;
    font-family: 'Sora';
    
}

.accordion-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    transition: transform .3s ease;
    fill: #123678;
}

li.accordion.open .accordion-icon {
    transform: translateY(-50%) rotate(180deg);
}

li.accordion ul {
    display: none;
    background: #1a202c;
    list-style: none;
    border-radius: 16px;;
}

li.accordion ul .txt {
    padding: 20px;
    line-height: 1.6;
    color: #ffffff!important;
}

li.accordion ul .txt p {
    color: #fff!important;
}

li.accordion.open span {
    background: #fff;
    color: #1a202c;
    
}

li.accordion.open .accordion-icon {
    fill: #123678;
}




/**/
/*SERVICE ARES*/

.area-hero{
   position: relative;
    background-image: url("../img/painting-in-buffalo-team-member.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
}

.area-hero::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right,
        rgba(18, 54, 120, 0.9) 0%,      /* dark, opaque left */
        rgba(18, 54, 120, 0.5) 50%,     /* mid fade */
        rgba(18, 54, 120, 0.25) 100%       /* transparent right */
    );
    pointer-events: none; /* so it doesn't block clicks/text below */
    z-index: 1;
}

.area-hero>*{
    position: relative;
    z-index: 2;
}


.area-hero h1 span{
    color: #f5c34a;
}

.area-hero h1{
    color: #fff;
}

.area-hero p{
    color: #fff;
    margin-top: 32px;
    max-width: 700px;
}

.area-about{
    background-color: #1a202c;
    padding-top: 160px;
    padding-bottom: 160px;
}

.area-about .title{
  text-align: left;
}

.area-about p{
    color: #ffffff;
}


.area-trust{
    background-color: #ffffff;
      text-align: left;
}

.area-trust .title span{
    color: #123678;
}

.area-trust .title{
      text-align: left;
}

.area-trust-btns{
    margin-top: 32px;
    display: flex;
    gap: 32px;
}





/*=================================*/
.single-area-hero {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #1a202c;
}

.single-area-hero h1{
    color: #ffffff;
}


.single-area-about{
    background-color: #ffffff;
}

.single-area-about h2{
    text-align: left;
}

.single-area-about .title span{
    color: #123678;
}





/*single service hero*/
.single-service-hero{
    background-color: transparent!important;
	position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;
    overflow: hidden;
}


  .single-service-hero::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right,
        rgba(18, 54, 120, 0.9) 0%,      /* dark, opaque left */
        rgba(18, 54, 120, 0.5) 50%,     /* mid fade */
        rgba(18, 54, 120, 0.25) 100%       /* transparent right */
    );
    pointer-events: none; /* so it doesn't block clicks/text below */
    z-index: 1;
}

.single-service-hero > * {
    position: relative;
    z-index: 2;
}


.single-service-hero h1{
    color: #ffffff;
}

.single-service-hero h1 span{
    color: #f5c34a;
}

.single-service-hero p{
    color: #ffffff;
    margin-top: 32px;
    max-width: 700px;
}

.location-text{
    text-align: center;
    margin-bottom: 32px;
}


/*blog*/
.blog-hero{
    align-items: center;
    padding-top: 160px;
    padding-bottom: 160px;
}

.blog-hero h1{
    color: #ffffff;
}


/**/
.pb-blog{
     background-color: #1a202c;
     padding-top: 160px;
}
.home-blog-content-section.blog-posts-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}


.home-blog-card h2 a{
    text-transform: capitalize;
    font-family: "Sora";
    font-size: 22px;
    font-weight: 800;  
    color: #fff;
    margin-top: 0;
}

.home-blog-card h2{
    line-height: 20px;
}

.blog-date{
    color: #ffffff;
}

.home-blog-card-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    object-position: top;
}

.blog-card-info {
    flex-grow: 1;
    color: #ffffff;
}

.blog-date{
    margin-top: 24px;
    font-weight: 500;
}


.home-blog-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    padding:48px;
}



.home-blog-card {
    position: relative; /* required for the ::before to position correctly */
}


.home-blog-card .blue-btn{
    margin-bottom: 24px;
    margin-top: 24px;
    text-align: center;
}

.home-blog-card .blue-btn a{
    color: #f5c34a;
}

.home-blog-card .blue-btn:hover a{
    color: #123678;
}

.home-blog-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/yellow-frame.webp');
    background-size: 100% 100%; /* stretches frame to card size */
    background-repeat: no-repeat;
    pointer-events: none; /* so it doesn't block clicks on content */
    z-index: 1;
}


/*blog hero*/
.single-blog-post-hero {
    position: relative;
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: center;

}

.single-blog-post-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right,
        rgba(18, 54, 120, 0.9) 0%,      /* dark, opaque left */
        rgba(18, 54, 120, 0.5) 50%,     /* mid fade */
        rgba(18, 54, 120, 0.25) 100%    /* transparent right */
    );
    pointer-events: none; /* so it doesn't block clicks/text below */
    z-index: 1;
}

.single-blog-post-hero > * {
    position: relative;
    z-index: 2;

}


.s-blog-title span{
    color: #ffffff;
    font-size: 32px!important;
    font-family: "Sora";
}

.s-blog-title{
     line-height: 40px!important;
     max-width: 800px;
}


.blog-meta{
    display: flex;
    gap: 12px;
    margin-top: 24px;
    margin-bottom: 24px!important;
}

.blog-meta a{
    color: #ffffff;
}

.blog-date-sbp{
    color: #ffffff;
}

.breadcrumb a,
.breadcrumb p{
    color: #ffffff;
}

.breadcrumb{
    margin-bottom: 24px;
}

.single-blog-content h2{
    font-size: 28px!important;
    line-height: 30px;
    font-family: "Sora";
    margin-bottom: 24px;
}



/*pp*/
.privacy-policy-hero,
.single-area-hero {
    position: relative;
    background-image: url("../img/about/paintin-in-buffalo-team.webp");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    overflow: hidden;
    padding-top: 160px;
    padding-bottom: 160px;
}
 .privacy-policy-hero::before,
 .single-area-hero::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to right,
        rgba(18, 54, 120, 0.9) 0%,      /* dark, opaque left */
        rgba(18, 54, 120, 0.5) 50%,     /* mid fade */
        rgba(18, 54, 120, 0) 100%       /* transparent right */
    );
    pointer-events: none; /* so it doesn't block clicks/text below */
    z-index: 1;
}

.privacy-policy-hero > * ,
.single-area-hero > *{
    position: relative;
    z-index: 2;
}

.privacy-policy-hero  h1 span{
    color: #ffffff;
}

.privacy-policy-content h2{
    font-size: 60px;
    line-height: 64px;
    text-transform: capitalize;
}

.privacy-policy-content p{
    margin-bottom: 24px;
}

.privacy-policy-content .nmb{
    margin-bottom: 0px!important;
}

.privacy-policy-content h3{
    font-size: 36px;
    line-height: 42px;
    text-transform: capitalize;
    margin-top: 48px;
    margin-bottom: 24px;
}

.privacy-policy-content p span{
    font-size: 24px;
    font-family: "Sora";


}


.pp-list{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 32px;
}

.pp-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
   
}

 .pp-list li::before {
    content: "";
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-image: url("../icons/brush.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.p404 .yellow-btn{
	margin-top:32px;
	display:inline-block;
}

.p404 .yellow-btn:hover a{
	color:#fff;
}


.inh1{
	color:#ffffff;
	margin-bottom:24px;
}

.blog-pagination{
	margin-top:32px;
	display: flex;
    justify-content: center;
	gap:12px;
}

.page-numbers{
	color:#123678;
	background-color:#f1c40f;
	padding-left:12px;
	padding-right:12px;
	border-radius:4px;
}