@import url('https://fonts.googleapis.com/css2?family=Montez&family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');

*{
    font-family: "TikTok Sans", sans-serif;
}

.name{
    font-family: "Montez", cursive;
    font-size: 42px;
    line-height: 44px;
    font-weight: 400;
    color: #fff;
}

.btn-red, .btn-red:hover{
    background: #9C0000;
    font-size: 18px;
    font-weight: 600;
    padding: 18px 38px;
    border-radius: 10px;
    color: #fff;
}

.btn-red-card, .btn-red-card:hover{
    background: #9C0000;
    font-size: 18px;
    font-weight: 600;
    padding: 18px 38px;
    border-radius: 0px;
    color: #fff;
}

.btn-white, .btn-white:hover{
    background: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 18px 38px;
    border-radius: 10px;
    color: #9C0000;
}

.btn-red-header, .btn-red-header:hover{
    background: #9C0000;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
}

/* Header */
.header{
    background: url("../images/banner.jpg") left/contain no-repeat;
    height: 920px;
    z-index: 99;
}
.logo img{
    width: 250px;
    padding-left: 30px;
}
a.nav-link {
    font-weight: 500;
    font-size: 18px;
}
li.nav-item {
    padding-right: 50px;
}

/* Wrapper pushes slider to the right */
.custom-slider-wrapper {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

/* Slider 80% wide and full height */
.custom-slider {
  width: 90%;
  height: 600px; /* adjust as needed */
  position: relative;
  overflow: hidden;
  border-radius: 50px 0px 0px 50px;
}

.slider-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: right center;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  z-index: 0;
  animation: fadeSlider 12s infinite;
  animation-timing-function: ease-in-out;
  transition: opacity 1s ease-in-out; /* makes fade smooth */
}

.slide1 {
  background-image: url('../images/slide1.jpg'); /* replace */
  animation-delay: 0s;
}

.slide2 {
  background-image: url('../images/slide2.png'); /* replace */
  animation-delay: 6s;
}

.slider-overlay {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
  padding: 40px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  max-width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
}

.slider-content {
  color: white;
  padding-left: 16%;
}

.slider-content h1 {
  font-size: 55px;
  font-weight: 800;
}

.slider-content p {
  margin: 20px 0;
  font-size: 18px;
}

.custom-slider {
  width: 90%;
  height: 700px;
  overflow: hidden;
  position: relative;
  background-color: #000; /* or match your image bg */
}

@keyframes fadeSlider {
  0% { opacity: 1; z-index: 1; }
  49.999% { opacity: 1; z-index: 1; }
  50% { opacity: 0; z-index: 0; }
  100% { opacity: 0; z-index: 0; }
}

.gallery_img{
  width: 100%;
}

.img-radius{
  border-radius: 20px;
}

/* Access Cards */
.redBack {
    background: url('../images/redBack.png') center / contain no-repeat;
    width: 430px;
    height: 280px;
    margin: 5px;
    padding-left: 30px;
    padding-right: 30px;
}

.card.access_height {
    height: 100%;
    border-radius: 10px;
    padding: 20px;
}

.main-card-title a{
    color: #000;
    text-decoration: none;
}

.content a{
    text-decoration: none;
}
    

.img-icon-light,
.img-icon-dark {
  position: absolute;
  width: 30%;
  left: 251px;
  top: 50%; /* use for vertical alignment */
  transform: translateY(-78%);
  transition: opacity 0.5s ease-in-out;
}

.img-icon-light {
  z-index: 2;
  opacity: 1;
}

.img-icon-dark {
  z-index: 1;
  opacity: 0;
}

.hover-card {
  position: relative;
}

/* Wrapper to hold images */
.icon-hover-wrapper {
  position: relative;
  height: auto;
}

/* On hover, fade */
.hover-card:hover .img-icon-light {
  opacity: 0;
}

.hover-card:hover .img-icon-dark {
  opacity: 1;
}

.access_title{
    font-weight: 700;
    font-size: 24px;
    color: #000000;
}

.access_content{
    font-weight: 400;
    font-size: 18px;
    color: #5B5B5B;
}

.access_readMore{
    font-weight: 500;
    font-size: 18px;
    color: #5B5B5B;
    cursor: pointer;
}

.access_readMore i {
    border-radius: 50px;
    padding: 16px;
    width: 50px;
    color: #5B5B5B;
    margin-right: 20px;
    cursor: pointer;
}

.access_readMore:hover, .access_readMore:hover i{
    color: #9C0000;
}
/* About Us */
.small-title{
    font-weight: 500;
    font-size: 24px;
    color: #9C0000;
}

.main-title{
    font-weight: 700;
    font-size: 37px;
    color: #000000;
}

.content{
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #5B5B5B;
}

.content span{
    font-weight: 600;
    color: #9C0000;
}


/* Cta */
.cta_1 {
    position: relative;
    background: url('../images/cta.jpg') center/cover no-repeat;
    height: 272px;
    overflow: hidden;
}

.cta_1::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: #9C000080; /* overlay color */
    z-index: 1;
}

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

.cta_title{
    font-size: 32px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 44px;
    font-style: italic;
}

/* Who We Are */
.list-content{
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
}

.list-content img{
    padding-right: 20px;
}

/* What We Do */
.whatWeDo{
    background: #F4F6FF;
}

.image-pad{
    padding:20px;
    border: none;
}

.main-card-title{
    font-weight: 700;
    font-size: 20px;
    color: #000000;
}

.card-content{
    font-weight: 400;
    font-size: 15px;
    color: #5B5B5B;
}

.icon{
    margin-top: -10%;
}

.icon img{
    width: 50px;
    border-radius: 10px;
}

/* Our Products */
.content-background{
    width: 650px;
    height: 250px;
    background: #F4F6FF;
    margin: 5px;
}

.content-background img{
    width: 100%;
}

.product_title{
    font-weight: 700;
    font-size: 24px;
}

.product_content{
    padding-left: 10px;
    padding-top: 20px;
}

.product_text{
    font-weight: 400;
    font-size: 18px;
    color: #5B5B5B;
}

.product_text a{
    color: #00477F;
}

.product_text span{
    color: #00477F;
}

img.rf_image{
    background: #F4F6FF;
    width: 80px;
    padding: 10px;
    margin-top: -104px;
}

/* Our Process */
.hover-image-pair {
  position: relative;
  display: inline-block;
}

/* Ensure both images are same size and visible */
.hover-image-pair img {
  display: block;
  width: 100%;
  height: auto;
}

/* Stack them perfectly */
.image-light,
.image-dark {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 1s ease-in-out;
}

/* Default visibility */
.image-light {
  z-index: 2;
  opacity: 1;
}

.image-dark {
  z-index: 1;
  opacity: 0;
}

/* On hover, swap visibility */
.hover-image-pair:hover .image-light {
  opacity: 0;
}

.hover-image-pair:hover .image-dark {
  opacity: 1;
}

.image-light {
  position: relative; /* not absolute */
}
.image-dark {
  position: absolute;
}

.process_text{
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
}

/* Cta 2 */
.cta_back{
    background: url("../images/cta_back.png") left/cover no-repeat;
    height: 333px;
    border-radius: 10px;
}

.cta_number{
    font-weight: 800;
    font-size: 55px;
    color: #FFFFFF;
    margin-top: 63px;
}

.cta_content{
    padding-left: 40px;
}

.cta_text {
    font-weight: 400;
    font-size: 40px;
    color: #FFFFFF;
    margin-top: 63px;
}

.cta_text span{
    font-weight: 700;
    font-size: 40px;
    color: #FFFFFF;
}

.cta_subtext{
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
}

.subcontent{
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF;
    margin-top: -10px;
}

.subcontent span{
    font-weight: 700;
    color: #9C0000;
}

/* Our Gallery */
.button-text{
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
}

.active_text{
  background: #D1D0D180;
  color: #9C0000;
  font-weight: 700;
  padding: 10px;
  border-radius: 10px;
}

.gallery_image{
  width: 100%;
}

.gallery_section{
  padding: 0;
}

.gallery_row{
  padding: 20px;
}

.gallery_section {
    position: relative;
}

.label-overlay {
    position: absolute;
    bottom: 30px;
    left: 81px;
    padding: 8px 60px;
    font-weight: bold;
    border-radius: 5px;
    font-size: 20px;
}

.bg-red{
  background: #9C0000;
}

/* Hide galleries by default */
.gallery_group {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, height 0.5s ease;
}

/* Show active gallery smoothly */
.gallery_visible {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    pointer-events: auto !important;
}

/* Contact Form */
.contact-form{
    background: url("../images/contact_form.png") left/cover no-repeat;
    padding-top: 4%;
    padding-bottom: 4%;
}

.testimonial-title{
    font-weight: 500;
    font-size: 24px;
    color: #FFFFFF;
}

.testimonial-header{
    font-weight: 700;
    font-size: 38px;
    color: #FFFFFF;
}

.contact-page-form{
    background: url("../images/formg.jpg") center/cover no-repeat;
    border-radius: 10px;
    padding: 30px 50px;
}

.contact-title{
    color: #9C0000;
    font-weight: 600;
    font-size: 32px;
}

.contact-subtitle{
    color: #000;
    font-weight: 700;
    font-size: 24px;
}

/* Footer */
.footer{
    background-color: #000;
    padding-top: 4%;
    padding-bottom: 1%;
}

.footer-logo{
    width: 80%;
}

.footer-section-logo{
    background: url("../images/footer-logo-bg.png") center/cover no-repeat;
    border-radius: 10px;
    padding-top: 30px;
    padding-bottom: 10px;
    padding-left: 50px;
}

.footer-text{
    font-weight: 600;
    font-size: 30px;
    color: #fff;
}

.footer-heading{
    font-weight: 700;
    font-size: 20px;
    color: #fff;
}

.footer-content{
    font-weight: 400;
    font-size: 16px;
    color: #fff;
}

.footer-content span{
    font-weight: 700;
}

.quick-link{
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
}

.get-in-touch{
  font-weight: 400;
  font-size: 16px;
  color: #FFFFFF;
  margin-left: 30px;
  line-height: 20px;
}

.get-in-touch a{
  color: #FFFFFF;
  text-decoration: none;
}

.quick-link a{
  text-decoration: none;
  color: #FFFFFF;
}

.branding{
  background: #9C0000;
}

.branding-text p{
  color: #FFFFFF;
}

.design-brand{
  text-align: right;
}

.design-brand a{
  text-decoration: none;
  color: #FFFFFF;
}

/* ===== ABOUT US PAGE ===== */
/* Header */
.header_new{
    background: url("../images/other-banner.jpg") left / contain no-repeat;
    height: 394px;
    z-index: 99;
}
.logo img{
    width: 250px;
    padding-left: 30px;
}
a.nav-link {
    font-weight: 500;
    font-size: 18px;
}
li.nav-item {
    padding-right: 50px;
}

p.footer-brand-text{
  margin-bottom: 8px;
}

.custom-slider-wrapper-new-about {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                    url("../images/about-header.jpg");
  border-radius: 50px 0px 0px 0px;
}

.custom-slider-wrapper-new-service{
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                    url("../images/service-header.jpg");
  border-radius: 50px 0px 0px 0px;
}

.custom-slider-wrapper-new-gallery{
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                    url("../images/gallery-header.jpg");
  border-radius: 50px 0px 0px 0px;
}

.custom-slider-wrapper-new-contact{
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                    url("../images/contact-header.jpg");
  border-radius: 50px 0px 0px 0px;
}

.custom-slider-wrapper-new {
    
    height: 289px;
    background-size: cover;
    margin-left: 198px;
    overflow: hidden;
    width: auto;
}

.slider-content-new {
    color: white;
    margin-top: 6%;
    margin-left: 8%;
}

.slider-content-new h1{
  font-weight: 800;
  font-size: 45px;
}

.slider-content-new p{
  font-weight: 500;
  font-size: 20px;
}

/* About Us Section */
.about-us-page{
  padding-top: 4%;
  padding-bottom: 4%;
}

.about-page-content{
  font-weight: 400;
  font-size: 16px;
}

.founder-quote{
  font-weight: 500;
  font-size: 18px;
  font-style: italic;
  color: #000000;
}

.founder-name{
  font-weight: 400;
  font-size: 32px;
  line-height: 44px;
  color: #9C0000;
}

.founder-image{
  width: 90%;
}

.whoweare-bg{
  background: #F4F6FF;
}

/* ===== Contact Page ===== */
.contact-page{
  padding-top: 4%;
  padding-bottom: 4%;
}

.contact-page-title{
  font-weight: 700;
  font-size: 40px;
  color: #000000;
}

.contact-page-subtitle{
  font-weight: 400;
  font-size: 16px;
  color: #5B5B5B;
}

.get-in-touch-new{
  font-weight: 400;
  font-size: 16px;
  color: #5B5B5B;
  margin-left: 10px;
  line-height: 20px;
}

.get-in-touch-new a{
  color: #5B5B5B;
  text-decoration: none;  
}


/* ===== Services ===== */
.what-we-do{
  padding-top: 4%;
  padding-bottom: 4%;
}

.card-height {
    height: 429px;
    border-radius: 0px;
    border: none;
}

.card-wrapper {
    position: relative;
    overflow: visible;
}

/* Ensure card is above the button */
.card {
    position: relative;
    z-index: 2;
}

/* Button below card, initially hidden and slides down */
.btn-red-card {
    position: absolute;
    top: 100%; /* Just below the card */
    left: 0;
    width: 100%;
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 1; /* lower than .card */
}

.card-wrapper:hover .btn-red-card {
    transform: translateY(0%);
    opacity: 1;
} 

#laptop-header{
  display: none;
}

#tab-header{
  display: none;
}

#tab-process{
  display: none;
}

#show-for-mobile{
  display: none;
}

.tab-about-us-do {
    margin-bottom: 20px;
}

#show-for-mobile-about{
    display: none;
} 

#show_cta_mobile{
    display: none;
  }

#gallery-button-show{
    display: none;
  }
  #view-button-show{
    display: none;
  }

  #footer-contact-us-show{
    display: none;
  }
/* Media Queries */
@media screen and (max-width: 1440px) {
  #desktop-header{
    display: none;
  }
  #laptop-header{
    display: block;
  }
  .custom-slider-wrapper {
    width: 100%;
    display: block;
  }
  .custom-slider {
    width: 100%;
  }
  .custom-slider-wrapper-new{
    margin-left: 0px;
    height: 267px;
  }
  .custom-slider{
    border-radius: 0px;
  }
  .slider-overlay{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .custom-slider-wrapper-new-about {
    border-radius: 0px;
  }

  .custom-slider-wrapper-new-service{
    border-radius: 0px;
  }

  .custom-slider-wrapper-new-gallery{
    border-radius: 0px;
  }

  .custom-slider-wrapper-new-contact{
    border-radius: 0px;
  }
}

@media screen and (max-width: 1360px) {
  .redBack{
    width: 370px;
  }
  .img-icon-light, .img-icon-dark{
    left: 208px;
    transform: translateY(-74%);
  }
  .access_content{
    font-size: 15px;
  }
  .list-content{
    font-size: 17px;
  }
  img.about-img {
    width: 103%;
  }
  .content-background {
    width: 560px;
    height: 219px;
  }
  .button-text{
    font-size: 15px;
  }
  .label-overlay{
    left: 51px;
  }
  .footer-text{
    font-size: 25px;
  }
  .laptop-img {
    display: flex;
  }
  .slider-content p{
    font-size: 17px;
  }
}

@media screen and (max-width: 1024px) {
  .logo img {
    width: 175px;
    padding-left: 10px;
  }
  li.nav-item {
    padding-right: 25px;
  }
  .custom-slider{
    height: 420px;
  }
  .slider-content h1{
    font-size: 30px;
  }
  .btn-red, .btn-red:hover{
    padding: 10px 21px;
    font-size: 15px;
  }
  .slider-content p {
    font-size: 11px;
  }
  .redBack {
    width: 310px;
  }
  .access_title{
    font-size: 17px;
  }
  .access_content {
    font-size: 14px;
  }
  .access_readMore{
    font-size: 16px;
  }
  .access_readMore i{
    padding: 12px;
    width: 42px;
  }
  .img-icon-light, .img-icon-dark {
    left: 166px;
    transform: translateY(-66%);
  }
  .main-title{
    font-size: 34px;
  }
  .list-content {
    font-size: 14px;
  }
  .icon{
    width: 100%;
  }
  .mob-tab-icon {
    margin-top: 21px;
    width: 100%;
  }
  .content-background{
    width: 470px;
    height: 187px;
  }
  .product_title{
    font-size: 17px;
  }
  .product_text{
    font-size: 14px;
  }
  #desktop-process{
    display: none;
  }
  #tab-process{
    display: block;
  }
  .our-process-tab {
    width: 25%;
  }
  .button-text {
    font-size: 13px;
  }
  .label-overlay {
    left: 58px;
    padding: 5px 34px;
    font-size: 16px;
  }
  .content{
    font-size: 15px;
  }
  .main-title {
    font-size: 33px;
  }
  .footer-text {
    font-size: 21px;
  }
  .footer-tab {
    width: 50%;
  }
  section#tab-process {
    margin-top: 4%;
    margin-bottom: 4%;
  }
  .custom-slider-wrapper-new{
    height: 218px;
  }
  .what-we-do{
    padding-bottom: 7%;
  }
}

@media screen and (max-width: 820px) {
  .redBack {
    width: 100%;
    background: none;
    height: auto;
  }
  .card.access_height{
    height: 100%;
  }
  .img-icon-light, .img-icon-dark{
    width: 12%;
    left: 564px;
    transform: translateY(-71%);
  }
  .tab-about-us {
    width: 100%;
  }
  .tab-about-us-do{
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: space-around;
  }
  .cta_title{
    font-size: 26px;
  }
  .laptop-img{
    display: block;
    margin-top: 20px;
  }
  .card.image-pad {
    width: 59%;
    margin-top: 22px;
  }
  .rb-3 {
    margin-top: 34px;
  }
  .list-content {
    font-size: 16px;
  }
  .our-products-tab{
    display: flex;
    justify-content: center;
  }
  .our-process-tab {
    width: 50%;
  }
  .cta_content {
    width: 91%;
    padding-left: 87px;
  }
  .cta_text{
    font-size: 30px;
  }
  .cta_text span{
    font-size: 30px;
  }
  .cta_subtext{
    font-size: 19px;
  }
  .subcontent{
    font-size: 16px;
  }
  .roof-width{
    width: 22%;
  }
  .cta_back{
    height: 299px;
  }
  .label-overlay{
    left: 26px;
  }
  .testimonials-div{
    width: 100%;
  }
  .footer-text {
    font-size: 15px;
  }
  .btn-white, .btn-white:hover{
    padding: 7px 9px;
    font-size: 15px;
  }
  .tab-about{
    margin-top: 30px;
  }
  #tab-header{
    display: block;
  }
  #laptop-header{
    display: none;
  }
  .mobile-tab-header-shadow{
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
  }
  #show-for-mobile{
    display: block;
  }
  #hide-for-mobile{
    display: none;
  }
  .services-tab-mobile {
    margin-bottom: 60px;
  }
  .btn-red-card, .btn-red-card:hover{
    padding: 7px 38px;
  }
  .what-we-do {
    padding-bottom: 1%;
  }
  .contact-page-left{
    width: 100%;
  }
  .contact-page-form{
    margin-top: 30px;
  }
}

@media screen and (max-width: 550px) {
  .img-icon-light, .img-icon-dark {
    width: 20%;
    left: 370px;
    transform: translateY(-74%);
  } 
  .sticky-tab-header{
    margin-top: 0px;
  }
  .slider-overlay{
    max-width: 100%;
  }
  .footer-tab {
    width: 100%;
  } 
  .slider-content{
    padding-left: 0%;
  }
  .custom-slider {
    height: 298px;
  }
  .slider-content h1 {
    font-size: 20px;    
  }
  .slider-content p {
    font-size: 10px;
  }
  .main-title {
    font-size: 25px;
  } 
  .cta_title {
    font-size: 19px;
    line-height: 24px;
  }
  #hide-for-mobile-about{
    display: none;
  }  
  #show-for-mobile-about{
    display: block;
  }
  .about-img-width{
    width: 50%;
  }
  img.about-img {
    width: 100%;
  }
  .card.image-pad {
    width: 100%;
  }
  .content-background{
    height: 450px;
    width: 324px;
  }  
  .process_text{
    font-size: 15px;
  }
  #show_cta_mobile{
    display: block;
  }
  #hide_cta_mobile{
    display: none;
  }
  .cta_2_mobile{
    padding-top: 8%;
    padding-bottom: 12%;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/cta.jpg');
  }
  .cta_number{
    margin-top: 0px;
  }
  .cta_text{
    margin-top: 0px;
  }
  .cta_text {
    font-size: 27px;
  }
  .cta_text span {
    font-size: 27px;
  }
  .subcontent span {
    font-weight: 700;
    color: #fff;
  }
  #gallery-button-show{
    display: block;
  }
  #gallery-button-hide{
    display: none;
  }
  #view-button-show{
    display: block;
  }
  #view-button-hide{
    display: none !important;
  }
  .button-text {
    font-size: 17px;
  }
  .gallery_section {
    width: 50%;
  }
  .contact-form{
    padding-top: 12%;
    padding-bottom: 12%;
  }
  .testimonial-header{
    font-size: 28px;
  }
  .contact-page-form {
    width: 93%;
    margin-left: 13px;        
  }
  .contact-page-form{
    padding: 30px 25px;
  }
  .footer {
    padding-top: 12%;
    padding-bottom: 8%;
  }
  .redBack{
    margin: 0;
    padding-bottom: 20px;
  }
  .footer-section-logo {
    padding-bottom: 28px;
    padding-left: 29px;
    width: 94%;
    margin-left: 10px;
    margin-top: 20px;
  }
  #footer-contact-us-show{
    display: block;
  }
  #footer-contact-us-hide{
    display: none;
  }
  .footer-icon-mob{
    width: 15%;
  }
  .footer-text-mob{
    width: 50%;
  }
  .get-in-touch{
    margin-left: 3px;
  }
  .slider-content-new{
    margin-top: 14%;
  }
  #show-for-mobile{
    padding-top: 12%;
  }
  .about-us-page {
    padding-top: 12%;
    padding-bottom: 12%;
  }
  .branding-text {
    text-align: center;
  }
  .design-brand {
    text-align: center;
  }
  .mobile-product {
    height: 375px;
  } 
  .label-overlay {
    left: 41px;
  }
}

@media screen and (max-width: 430px) {
  .img-icon-light, .img-icon-dark {
        width: 20%;
        left: 282px;
        transform: translateY(-68%);
  }
}

@media screen and (max-width: 414px) {
  .img-icon-light, .img-icon-dark {
        width: 20%;
        left: 270px;
        transform: translateY(-66%);
  }
}

@media screen and (max-width: 412px) {
  .img-icon-light, .img-icon-dark {
        width: 20%;
        left: 268px;
        transform: translateY(-65%);
  }
}

@media screen and (max-width: 390px) {
  .img-icon-light, .img-icon-dark {
        width: 20%;
        left: 250px;
        transform: translateY(-62%);
  }
}

@media screen and (max-width: 375px) {
  .img-icon-light, .img-icon-dark {
        width: 20%;
        left: 238px;
        transform: translateY(-62%);
  }
}

@media screen and (max-width: 360px) {
  .img-icon-light, .img-icon-dark {
        width: 20%;
        left: 226px;
        transform: translateY(-58%);
  }
}

@media screen and (max-width: 344px) {
  .img-icon-light, .img-icon-dark {
        width: 20%;
        left: 214px;
        transform: translateY(-57%);
  }
}