/********** Template CSS **********/
  :root {
    --primary: #79D74B;
    --secondary: #8D9297;
    --light: #F8F9FA;
    --dark: #182333;
}
.text-black{
  color: #020202;
}
.text-navy{
  color: #182333;
}
.text-dark-red{
  color: #BF1E2E;
}
.dark-blue{
  color: #262161;
}
.service-page-point{
font-size: 1.11rem;
}
.hero-title3{
    color: #7AC043 ;
}
.text-blue{
  color: #2A3890;
}


.btn-colour {
  background: #FF8E48;
  box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
  color: #fff;
  font-weight: 500;
  font-size: 1.1em;
  text-transform: uppercase;
  border-radius: .21em;
}
.service-center{
text-align: center;
}


.list-text{
  color: #020202;
  font-weight: 500 !important; 
  letter-spacing: .3px;
  text-transform: capitalize;
  font-size: 1.35em;
}
.slanted-topbar {
  position: relative;
  overflow: hidden;
  height: 50px; /* Adjust the height of the top bar */
}

.slanted-topbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 70%; /* 4/5 of the width */
  height: 100%;
  border-bottom: 115px red ;
  background-color: #0c0b11; /* Red color */
  transform-origin: top left;
  transform: skewX(-30deg); /* Skew the section to create slant */
}

.slanted-topbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 70%; /* Starting from the end of the red section */
  width: 40%; /* 1/5 of the width */
  height: 100%;
  background-color: #EB1C24; /* Black color */
  transform-origin: top right;
  transform: skewX(-30deg); /* Skew the section to create slant */
}

.get-quote {
  position: absolute;
  top: 50%;
  left: 81%; /* Place in the middle of the black section */
  transform: translate(-10%, -50%); /* Center horizontally and vertically */
  color: white;
  font-size: 20px;
  cursor: pointer;
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  z-index: 2; /* Ensure the text appears above the white line */
}
.get-quote:hover {
  position: absolute;
  top: 50%;
  left: 81%; /* Place in the middle of the black section */
  transform: translate(-10%, -50%); /* Center horizontally and vertically */
  color: white;
  font-size: 20px;
  cursor: pointer;
  font-family: "Kanit", sans-serif;
  font-weight: 500;

  z-index: 2; /* Ensure the text appears above the white line */
}
.white-line {
  position: absolute;
  top: 0;
  left: 70%; /* Starting from the end of the red section */
  width: 6px; /* Width of the white line */
  height: 100%;
  background-color: white; /* White color */
  z-index: 1; /* Ensure the white line appears above the black section */
  transform-origin: top right;
  transform: skewX(-30deg); /* Apply the same slant as the black section */
}

.get-quote .i1 {
  margin-left: 15px; /* Add spacing between text and icon */
}
.get-quote .i2 {
  margin-right: 10px;
}


.text-colour-green{
  color: #7AC140;
}
.icon-colour-green{
  color: #7AC140;
}
.icon-colour-red{
  color: #EB1C24;
}
.icon-colour-blue{
  color: #2A3890;
}
.text-colour-blue{
  color: #237BC0;
}
.text-colour-red{
  color: #ED412B;
}
.icon-colour-blue{
  color: #2A3890;

}
.about-header-font{
  font-size: 2.5em;
}

.text-red{
  color: #EB1C24;
}
.bg-blue{

background-color: #262161;
}

.about-page-link{
  font-size: 22px;
  font-weight: 600;
  color: #182333;
  text-decoration: underline;
}
.about-page-link:hover{
  font-family: 'Kanit', sans-serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: #182333;
  text-decoration: underline;
}

.btn-colour:hover{
  background: rgb(191,30,46);
  background: linear-gradient(90deg, rgba(191,30,46,1) 0%, rgba(191,30,46,1) 100%);
  transition: ease 2.1s;
  color: #fff;
  border-radius: .21em;
  box-shadow: 0 0 11px rgba(235,28,36,0.4); /* Adjust the values to control the glow */
    cursor: pointer;

}
.btn-colour2{
    background-color: #79D74B;
    color: #fff;

}
.font-type{
  font-weight: 700;
  text-transform: uppercase;
}  
.font-type-i{
  font-weight: 800;
  color: #000000    ;
text-transform: uppercase;    
}  
.font-type-i-light{
  font-family: sans-serif;
  font-weight: 500;
  
}  
.font-type-i-semi{
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-style: italic;
  
}  
.font-type-contact{
  font-weight: 700;
  font-size: 2.95em;
text-transform: uppercase;
}  
.font-type-about{
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-style: italic;

  font-size: 3em;
}  
.font-type-hero {
  text-shadow: 12px 12px 14px rgba(0, 0, 0, 0.3); /* Adjust the values to control the text shadow */
}


.font-type-hero{
  font-family: "Kanit", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 4em;
  text-transform: capitalize;
  
}  
.font-type-service-header{
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  color: #020202;

}  
.font-type-services{
  font-weight: 700;
  text-transform: capitalize;
  color: #020202;

}  
.service-item2 p{
  text-align: center;
  padding: 0 2em;
}

.logo-text{
  font-family: "Roboto Slab", serif;
  font-weight: 600;
  font-size: 1.5em;
  color: #160106;
}  

.logo{
  width: 11em ;
  position: sticky;
  z-index: 10000;
}
.font-type-bold{
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-style: italic;
}  
.font-type-1{
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}  


.btn-colour2:hover{
    background-color: #599a38;
    color: #fff;
    
}
    
.text-colour2{
    color: #FF8E48 ;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
.service-link{
    color: #4B7A3D;
}
.service-link:hover{
    color: #4B7A3D;
    cursor: pointer;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-outline-primary:hover {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}
.bg-colour{
    background-color: #444444;
    
}
.bg-colour2{
    background-color: #000000;
    
}
.bg-colour1{
    background-color: #000000;
    
}
.bg-colour3{
    background-color: #000000;
    
}
.bg-white{
    background-color: #fff;
    
}
.text-colour3{
    color: #78D64B;
}

.border-colour{}


    
.border-{
  
        border-left: 2px solid #79D74B; /* Adjust the width and color as needed */
        padding-right: 10px; /* Optional padding to create some space between content and border */
    
}


.contact-link{
  color: #FF8E48;
  text-decoration: underline;
  text-transform: capitalize;
}
.contact-link:hover{
  color: #FF8E48;
  transition: ease-in-out .2s;
  text-decoration: underline;
  text-transform: capitalize;
}


  

  

.font-size-p{
  font-size: 16px;
  text-shadow: 12px 1px 14px rgba(0, 0, 0, 0.3); /* Adjust the values to control the text shadow */

}
/*** Header ***/




.a{
  z-index: 10;
}

@media (max-width: 707px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 550px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        
        object-fit: cover;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 3rem;
        height: 3rem;
        border-width: 12px;
    }
}
.breadcrumb{
text-align: center ;
margin-left: 45%
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: #999999;
}
.margin-left{
  margin-left: 27.5em;
  margin-top: .75em;
}
.text-orange{
color: #FF8E48;
}
/*** Facts ***/
.facts-overlay {
    position: absolute;
    padding: 30px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(0, 0, 0, .65);
}

.facts-overlay h1 {
    font-size: 120px;
    color: transparent;
    -webkit-text-stroke: 2px var(--primary);
}

.facts-overlay a:hover {
    color: var(--primary) !important;
}




/*** Appointment ***/
.appointment {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.57), rgba(0, 0, 0, .23)), url(../img/appointment.webp) left center no-repeat;
  background-size: cover;
}


/*** Team ***/
.team-text {
    position: absolute;
    width: 75%;
    bottom: 30px;
    left: 0;
    transition: .5s;
}

.team-item:hover .team-text {
    width: 100%;
}

.team-text * {
    transition: .5s;
}

.team-item:hover .team-text * {
    letter-spacing: 2px;
}



/*** Footer ***/
.footer {
  background-color: #0c0b11;
    color: #999999;
}
.footer-home {
  background-color: #0c0b11;
    color: #999999;
    margin-top: 8em !important;
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #999999;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}
.footer-number{
  margin-left: 5px;
  color: #999999;
  text-decoration: underline !important;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #999999;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--light);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}
.footer-home .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #999999;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer-home .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #999999;
    margin-right: 10px;
}

.footer-home .btn.btn-link:hover {
    color: var(--light);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer-home .copyright {
    padding: 25px 0;
    
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}
.bg-nav{
  background-color: #0c0b11;
  border-top: 1px solid rgba(256, 256, 256, .1);

}
.copyright-red{
  color: #FFF;
}
.copyright-red:hover{
  color: #FFF;
  transition: ease-in-out .2s;
}
.footer .copyright a {
    color: #FF8E48;
}

.footer .copyright a:hover {
    color: var(--primary);
}
.footer-logo{
    width: 5em;
}
.bg-colour2{
    background-color: 5px  #79D74B;
}
.portfolio-item .portfolio-overlay .btn {
    opacity: 0;
  }
  
  .portfolio-item:hover .portfolio-overlay .btn {
    opacity: 1;
  }
  .portfolio-item-top{
  
  
  }
  .portfolio-item{
  min-height: 300px;
  }
  #portfolio-flters li {
    display: inline-block;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: .5s;
    border-bottom: 2px solid transparent;
  }
  
  #portfolio-flters li:hover,
  #portfolio-flters li.active {
    color: var(--primary);
    border-color: var(--primary);
  }
  
  .portfolio-item img {
    transition: .5s;
  }
  
  .portfolio-item:hover img {
    transform: scale(1.1);
  }
  
  .portfolio-item .portfolio-overlay {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 0;
    bottom: 0;
    left: 50%;
    background: rgba(53, 53, 53, .7);
    transition: .5s;
  }
  .dark-red{
    color: #160106;
  }
  .portfolio-item:hover .portfolio-overlay {
    width: 100%;
    height: 100%;
    left: 0;
  }
.section-header-text{
  color: #FF8E48;
  text-transform: capitalize;
font-style: italic;
  font-weight: 600;
}
.section-header-text2{
  color: #D73722;
  text-transform: capitalize;
  font-weight: 700;
}

/*** Project ***/
.project .nav .nav-link {
    background: var(--light);
    transition: .5s;
}

.project .nav .nav-link.active {
    background: var(--primary);
}

.project .nav .nav-link.active h3 {
    color: #FFFFFF !important;
}
.section {
    position: relative;
    padding: 20px;
    background-color: #f0f0f0;
    text-align: center;
}

/* Blog */

.blog-pagination {
    margin-top: 30px;
    color: #838893;
  }
  
  .blog .blog-pagination ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .blog .blog-pagination li {
    margin: 0 5px;
    transition: 0.3s;
  }
  
  .blog .blog-pagination li a {
    color: var(--color-secondary);
    padding: 7px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .blog .blog-pagination li.active,
  .blog .blog-pagination li:hover {
    background: var(--color-primary);
    color: #fff;
  }
  
  .blog .blog-pagination li.active a,
  .blog .blog-pagination li:hover a {
    color: var(--color-white);
  }
  
  /*--------------------------------------------------------------
  # Blog Posts List
  --------------------------------------------------------------*/
  .blog .posts-list .post-item {
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.06);
    transition: 0.3s;
  }
  
  .blog .posts-list .post-img img {
    transition: 0.5s;
  }
  
  .blog .posts-list .post-date {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: var(--color-primary);
    color: #fff;
    text-transform: uppercase;
    font-size: 13px;
    padding: 6px 12px;
    font-weight: 500;
  }
  
  .blog .posts-list .post-content {
    padding: 30px;
  }
  
  .blog .posts-list .post-title {
    font-size: 22px;
    font-weight: 700;
    transition: 0.3s;
    color: #182333;
    font-weight: 700;
    font-style: normal;
    margin-bottom: 15px;
  }
  
  .blog .posts-list .meta i {
    font-size: 16px;
    color: var(--color-primary);
  }
  
  .blog .posts-list .meta span {
    font-size: 15px;
    color: #838893;
  }
  
  .blog .posts-list p {
    margin-top: 20px;
  }
  
  .blog .posts-list hr {
    color: #888;
    margin-bottom: 20px;
  }
  
  .blog .posts-list .readmore {
    display: flex;
    align-items: center;
    text-decoration: underline;
    font-style: italic;
    font-weight: 500;
    line-height: 1;
    transition: 0.3s;
    color: #616161;
  }
  
  .blog .posts-list .readmore i {
    line-height: 0;
    margin-left: 6px;
    font-size: 16px;
  }
  
  .blog .posts-list .post-item:hover .post-title,
  .blog .posts-list .post-item:hover .readmore {
    color: #182333;
  }
  
  .blog .posts-list .post-item:hover .post-img img {
    transform: scale(1.1);
  }
  
  /*--------------------------------------------------------------
  # Blog Details
  --------------------------------------------------------------*/
  .blog .blog-details {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 30px;
  }
  
  .blog .blog-details .post-img {
    margin: -30px -30px 20px -30px;
    overflow: hidden;
  }
  
  .blog .blog-details .title {
    font-size: 28px;
    font-weight: 700;
    padding: 0;
    margin: 20px 0 0 0;
    color: var(--color-secondary);
  }
  .blog-title{

    color: #182333;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-style: italic;
    margin-bottom: 15px;
  }
  
  .blog .blog-details .content {
    margin-top: 20px;
  }
  
  .blog .blog-details .content h3 {
    font-size: 22px;
    margin-top: 30px;
    font-weight: bold;
  }
  
  .blog .blog-details .content blockquote {
    overflow: hidden;
    background-color: rgba(82, 86, 94, 0.06);
    padding: 60px;
    position: relative;
    text-align: center;
    margin: 20px 0;
  }
  .text-small{
    font-size: .9rem;
  }
  .weather-img{
  background-image: url(/img/spring-blog.jpg);
width: 100%;
height: 90vh;
  
  }
  .weather-img1{
    background-image: url(/img/summer-blog-img.jpg);
  width: 100%;
  height: 70vh;
  }
  .weather-img2{
    background-image: url(/img/fall-blog-img.jpg);
  width: 100%;
  height: 70vh;
    
    }
    .weather-img3{
        background-image: url(/img/winter-blog-img.jpg);
      width: 100%;
      height: 70vh;
      background-position: top right ;
      
        
        }
        article{
            margin-bottom: 3em;
        }
        .blog-weather-title{
         
            font-size: 1.3rem;
            color: #182333;
            font-family: "Montserrat", sans-serif;
            font-weight: 700;;
            font-style: italic;
            margin-bottom: 8px;
        }
  
  .blog .blog-details .content blockquote p {
    color: var(--color-default);
    line-height: 1.6;
    margin-bottom: 0;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
  }
  
  .blog .blog-details .content blockquote:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--color-primary);
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .blog .blog-details .meta-top {
    margin-top: 20px;
    color: #6c757d;
  }
  
  .blog .blog-details .meta-top ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    align-items: center;
    padding: 0;
    margin: 0;
  }
  
  .blog .blog-details .meta-top ul li+li {
    padding-left: 20px;
  }
  
  .blog .blog-details .meta-top i {
    font-size: 16px;
    margin-right: 8px;
    line-height: 0;
    color: var(--color-primary);
  }
  
  .blog .blog-details .meta-top a {
    color: #6c757d;
    font-size: 14px;
    display: inline-block;
    line-height: 1;
    transition: 0.3s;
  }
  
  .blog .blog-details .meta-top a:hover {
    color: var(--color-primary);
  }
  
  .blog .blog-details .meta-bottom {
    padding-top: 10px;
    border-top: 1px solid rgba(82, 86, 94, 0.15);
  }
  
  .blog .blog-details .meta-bottom i {
    color: #838893;
    display: inline;
  }
  
  .blog .blog-details .meta-bottom a {
    color: rgba(82, 86, 94, 0.8);
    transition: 0.3s;
  }
  
  .blog .blog-details .meta-bottom a:hover {
    color: var(--color-primary);
  }
  
  .blog .blog-details .meta-bottom .cats {
    list-style: none;
    display: inline;
    padding: 0 20px 0 0;
    font-size: 14px;
  }
  
  .blog .blog-details .meta-bottom .cats li {
    display: inline-block;
  }
  
  .blog .blog-details .meta-bottom .tags {
    list-style: none;
    display: inline;
    padding: 0;
    font-size: 14px;
  }
  
  .blog .blog-details .meta-bottom .tags li {
    display: inline-block;
  }
  
  .blog .blog-details .meta-bottom .tags li+li::before {
    padding-right: 6px;
    color: var(--color-default);
    content: ",";
  }
  
  .blog .blog-details .meta-bottom .share {
    font-size: 16px;
  }
  
  .blog .blog-details .meta-bottom .share i {
    padding-left: 5px;
  }
  
  .blog .post-author {
    padding: 20px;
    margin-top: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
  
  .blog .post-author img {
    max-width: 120px;
    margin-right: 20px;
  }
  
  .blog .post-author h4 {
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 0px;
    padding: 0;
    color: var(--color-secondary);
  }
  
  .blog .post-author .social-links {
    margin: 0 10px 10px 0;
  }
  
  .blog .post-author .social-links a {
    color: rgba(82, 86, 94, 0.5);
    margin-right: 5px;
  }
  
  .blog .post-author p {
    font-style: italic;
    color: rgba(108, 117, 125, 0.8);
    margin-bottom: 0;
  }
  
  /*--------------------------------------------------------------
  # Blog Sidebar
  --------------------------------------------------------------*/
  .blog .sidebar {
    padding: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
  
  .blog .sidebar .sidebar-title {
    font-size: 20px;
 color: #182333;
    font-family: "Kanit", sans-serif;
    font-weight: 600;
    font-style: italic;
    margin-bottom: 15px;
    padding: 0;
    margin: 0;
  }
  
  .blog .sidebar .sidebar-item+.sidebar-item {
    margin-top: 40px;
  }
  
  .blog .sidebar .search-form form {
    background: #fff;
    border: 1px solid rgba(82, 86, 94, 0.3);
    padding: 3px 10px;
    position: relative;
  }
  
  .blog .sidebar .search-form form input[type=text] {
    border: 0;
    padding: 4px;
    border-radius: 4px;
    width: calc(100% - 40px);
  }
  
  .blog .sidebar .search-form form input[type=text]:focus {
    outline: none;
  }
  
  .blog .sidebar .search-form form button {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    border: 0;
    background: none;
    font-size: 16px;
    padding: 0 15px;
    margin: -1px;
    background: var(--color-primary);
    color: var(--color-secondary);
    transition: 0.3s;
    border-radius: 0 4px 4px 0;
    line-height: 0;
  }
  
  .blog .sidebar .search-form form button i {
    line-height: 0;
  }
  
  .blog .sidebar .search-form form button:hover {
    background: rgba(254, 185, 0, 0.8);
  }
  
  .blog .sidebar .categories ul {
    list-style: none;
    padding: 0;
  }
  
  .blog .sidebar .categories ul li+li {
    padding-top: 10px;
  }
  
  .blog .sidebar .categories ul a {
    color: var(--color-secondary);
    transition: 0.3s;
  }
  
  .blog .sidebar .categories ul a:hover {
    color: var(--color-default);
  }
  
  .blog .sidebar .categories ul a span {
    padding-left: 5px;
    color: rgba(54, 77, 89, 0.4);
    font-size: 14px;
  }
  
  .blog .sidebar .recent-posts .post-item {
    display: flex;
  }
  
  .blog .sidebar .recent-posts .post-item+.post-item {
    margin-top: 15px;
  }
  
  .blog .sidebar .recent-posts img {
    max-width: 80px;
    margin-right: 15px;
  }
  
  .blog .sidebar .recent-posts h4 {
    font-size: 15px;
    font-weight: bold;
  }
  
  .blog .sidebar .recent-posts h4 a {
    color: var(--color-secondary);
    transition: 0.3s;
  }
  
  .blog .sidebar .recent-posts h4 a:hover {
    color: var(--color-primary);
  }
  
  .blog .sidebar .recent-posts time {
    display: block;
    font-style: italic;
    font-size: 14px;
    color: rgba(54, 77, 89, 0.4);
  }
  
  .blog .sidebar .tags {
    margin-bottom: -10px;
  }
  
  .blog .sidebar .tags ul {
    list-style: none;
    padding: 0;
  }
  
  .blog .sidebar .tags ul li {
    display: inline-block;
  }
  
  .blog .sidebar .tags ul a {
    color: #838893;
    font-size: 14px;
    padding: 6px 14px;
    margin: 0 6px 8px 0;
    border: 1px solid rgba(131, 136, 147, 0.4);
    display: inline-block;
    transition: 0.3s;
  }
  
  .blog .sidebar .tags ul a:hover {
    color: var(--color-secondary);
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
  }
  
  .blog .sidebar .tags ul a span {
    padding-left: 5px;
    color: rgba(131, 136, 147, 0.8);
    font-size: 14px;
  }
  
  /*--------------------------------------------------------------
  # Blog Comments
  --------------------------------------------------------------*/
  .blog .comments {
    margin-top: 30px;
  }
  
  .blog .comments .comments-count {
    font-weight: bold;
  }
  
  .blog .comments .comment {
    margin-top: 30px;
    position: relative;
  }
  
  .blog .comments .comment .comment-img {
    margin-right: 14px;
  }
  
  .blog .comments .comment .comment-img img {
    width: 60px;
  }
  
  .blog .comments .comment h5 {
    font-size: 16px;
    margin-bottom: 2px;
  }
  
  .blog .comments .comment h5 a {
    font-weight: bold;
    color: var(--color-default);
    transition: 0.3s;
  }
  
  .blog .comments .comment h5 a:hover {
    color: var(--color-primary);
  }
  
  .blog .comments .comment h5 .reply {
    padding-left: 10px;
    color: var(--color-secondary);
  }
  
  .blog .comments .comment h5 .reply i {
    font-size: 20px;
  }
  
  .blog .comments .comment time {
    display: block;
    font-size: 14px;
    color: rgba(82, 86, 94, 0.8);
    margin-bottom: 5px;
  }
  
  .blog .comments .comment.comment-reply {
    padding-left: 40px;
  }
  
  .blog .comments .reply-form {
    margin-top: 30px;
    padding: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
  
  .blog .comments .reply-form h4 {
    font-weight: bold;
    font-size: 22px;
  }
  
  .blog .comments .reply-form p {
    font-size: 14px;
  }
  
  .blog .comments .reply-form input {
    border-radius: 4px;
    padding: 10px 10px;
    font-size: 14px;
  }

  .blog .comments .reply-form input:focus {
    box-shadow: none;
    border-color: rgba(254, 185, 0, 0.8);
  }
  
  .blog .comments .reply-form textarea {
    border-radius: 4px;
    padding: 10px 10px;
    font-size: 14px;
  
  
  .blog .comments .reply-form textarea:focus {
    box-shadow: none;
    border-color: rgba(254, 185, 0, 0.8);
  }
  
  .blog .comments .reply-form .form-group {
    margin-bottom: 25px;
  }
  
  .blog .comments .reply-form .btn-primary {
    border-radius: 4px;
    padding: 10px 20px;
    border: 0;
    background-color: var(--color-secondary);
  }
  
  .blog .comments .reply-form .btn-primary:hover {
    color: var(--color-secondary);
    background-color: var(--color-primary);
  }}

  .blog-link{
    text-decoration: underline;
    color: #78D64B;
  }
  .blog-link:hover{
    text-decoration: underline;
    color: #4f8a34;
    transition: ease-in .15s;
  }

  /* CSS for responsive background image */
  .responsive-image-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%; /* Set the height to match the text content container */
  }

  #myNavbar {
    border-bottom: 3px solid #FF8E48;
}




.v-shape-fill {
  position: absolute;
  bottom:   -85px; /* Adjust the distance from the bottom as needed */
  left: 50%;
  transform: translateX(-50%);
  width: 100%; /* Adjust the width of the shape */
  height: auto; /* Allow the height to adjust proportionally */
    z-index: 2 !important;
}


.left-fill, .right-fill {
  position: absolute;
  bottom: -50px; /* Adjust the distance from the bottom as needed */
  height: 100px;
  width: 100px; /* Adjust the width of the fill area */
  background-color: white;
  z-index: 3;
}

.left-fill {
  left: 50%;
  transform: translateX(-50%) skewY(-45deg); /* Adjust the angle and position */
}

.right-fill {
  right: 50%;
  transform: translateX(50%) skewY(45deg); /* Adjust the angle and position */
}


.bg-dark-radial {
  background-image: -webkit-repeating-radial-gradient(center center, #D73722, #D73722 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, #D73722, #D73722 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, #D73722, #D73722 1px, transparent 1px, transparent 100%);
  background-image: -o-repeating-radial-gradient(center center, #D73722, #D73722 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, #D73722, #D73722 1px, transparent 1px, transparent 100%);
  background-size: 3px 3px;
}


.bg-light-radial {
  background-image: -webkit-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
  background-image: -o-repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(256, 256, 256, 0.2), rgba(256, 256, 256, 0.2) 1px, transparent 1px, transparent 100%);
  background-size: 3px 3px;
}
/*** Service ***/
.service-item {
  box-shadow: 0 0 45px rgba(0, 0, 0, .08);
  min-height: 800px;
  max-height: 800px;
  border: 3px solid #FF8E48;
}
.service-item2 {
  box-shadow: 0 0 45px rgba(0, 0, 0, .08);
  
}

.service-item1 {
  box-shadow: 0 0 45px rgba(0, 0, 0, .08);
  min-height: 910px;
  max-height: 910px;
  
}

.service-bg{
background-color: #fff;


}
.service-icon-bg{

}




.service-icon {
  position: relative;

  margin: -50px 0 25px 0;
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
background: #fff;
  border-radius: 100px;
  box-shadow: 0 0 45px rgba(0, 0, 0, .08);
  transition: .5s;
}
.service-icon2{
  position: relative;
  margin: -50px 0 25px 0;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED7626;
  background: #FFFFFF;
  border-radius: 100px;
  box-shadow: 0 0 45px rgba(0, 0, 0, .08);
  transition: .5s;
}
.service-icon3{
  position: relative;
  margin: -50px 0 25px 0;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C21A1A;
  background: #FFFFFF;
  border-radius: 100px;
  box-shadow: 0 0 45px rgba(0, 0, 0, .08);
  transition: .5s;
}

.service-item:hover .service-icon {
color: #FFFFFF;
background-color: #fff;
}
.service-item2:hover .service-icon2 {
color: #FFFFFF;
background: #ED7626;
}


.service-item2:hover .service-icon {
color: #FFFFFF;
background-color: #eaebec;

}
.service-item2:hover .service-icon3 {
  color: #FFFFFF;
  background: #C21A1A;
}
.service-png-1{
  width: 56px;
  padding-bottom: .2em;
  height: 56px;
}
.service-png-7{
  width: 58px;
  height: 58px;
  margin-left: .5em;
}
.service-png-8{
  width: 50px;
  height: 50px;
}
.service-png-2{
  width: 80px;
  height: 80px;
  padding-left: .5em;
}
.service-png-3{
  width: 90px;
  height: 90px;
}
.service-png-4{
  width: 70px;
  height: 70px;
}
.service-text-link1{
  color: #FF8E48;
  text-decoration: underline;
  text-align: center;
}
.service-text-link1:hover{
  color: #310f0a;
  text-decoration: underline;
  transition: .44s;
}
          /*---- testimonial section style start ----*/
          section#testimonial {
            margin-top: 3em;
            margin-bottom: 2em;
          }
          
.testimonial-section h3{
text-align: center;
}
.testimonial-section h6{
text-align: center;
}
.testimonial-section h5{
margin-left: -1.5em;}
.star{
margin-left: -1.7em;}
.testimonial-top{
text-align: center;
}
.testimonial-top p{
text-align: center;
margin-bottom: 3em;
color: #000;
font-weight: 500;
font-size: 1.2em;

}
.testimonial-top img{
}

          .testimonial-pattern-overlay.pattern-right {
            top: 35%;
            right: 0;
          }
          
          .testimonial-pattern-overlay.pattern-left {
            top: 35%;
            left: 0;
          }
          
          .testimonial-content {
            position: relative;
            background: #ffffff;
            box-shadow:   0px 10px 20px rgba(0, 0, 0, 0.15); /* Add shadow to the top */
            margin: 0; /* Reset margin */
            padding: 20px; /* Add padding as needed */
          }
          
          
          .testimonial-content::before {
            content: '';
            position: absolute;
            display: block; /* Change display to block */
            top: 0; /* Set top to 0 */
            left: -10px;
            width: calc(100% + 20px);
            height: 10px;
            box-shadow: 0px -12px 20px rgba(0, 0, 0, 0.15); /* Shadow on the top */
          }
          
          .testimonial-content::after {
            content: '';
            position: absolute;
            bottom: -10px; /* Add shadow to the bottom */
            left: -10px;
            width: calc(100% + 20px);
            height: 10px;
            box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.15); /* Shadow on the bottom */
          }
          


iconify-icon.rate {
  color: #F2B821;
}
.swiper-pagination {
  position: absolute;
  bottom: -40px !important ; /* Adjust the distance from the bottom as needed */
}
.swiper-pagination .swiper-pagination-bullet {
  background-color: #FF8E48; /* Change to the color you desire */
}


.swiper{
overflow: visible !important;
}

@media only screen and (max-width: 770px) {

}

@media only screen and (max-width: 1200px) {
  a.phone-no {
    display: none;
  }
}

@media only screen and (max-width: 1800px) {
  .pattern-overlay {
    display: none;
  }
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: var(--accent-color) !important;
}



/*---- hero section style start ----*/

.pattern-overlay.pattern-right {
  top: 30%;
  right: 0px;
}
@media (max-width: 767px) {

  .appointment {
  height: 100vh;
}
.testimonial-pattern-overlay.pattern-left {
  top: 30%;
  left: 0px;
}
.testimonial-pattern-overlay.pattern-right {
  top: 52%;
  left: 0px;
}
.carousel-image-overlay{
  display: none;
}
.carousel-image-overlay2{
  display: none;
}
}
/*** Features ***/
.btn-play {
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  display: block;
  box-sizing: content-box;
  width: 16px;
  height: 26px;
  border-radius: 100%;
  border: none;
  outline: none !important;
  padding: 18px 20px 20px 28px;
  background: var(--primary);
}

@media (max-width: 992px) {
  .btn-play {
      left: 50%;
      right: auto;
      transform: translate(-50%, -50%);
  }

}

.btn-play:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 60px;
  height: 60px;
  background: var(--primary);
  border-radius: 100%;
  animation: pulse-border 1500ms ease-out infinite;
}

.btn-play:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 60px;
  height: 60px;
  background: var(--primary);
  border-radius: 100%;
  transition: all 200ms;
}

.btn-play span {
  display: block;
  position: relative;
  z-index: 3;
  width: 0;
  height: 0;
  left: -1px;
  border-left: 16px solid #FFFFFF;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

@keyframes pulse-border {
  0% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
  }

  100% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2);
      opacity: 0;
  }
}

.modal-video .modal-dialog {
  position: relative;
  max-width: 800px;
  margin: 60px auto 0 auto;
}

.modal-video .modal-body {
  position: relative;
  padding: 0px;
}

.modal-video .close {
  position: absolute;
  width: 30px;
  height: 30px;
  right: 0px;
  top: -30px;
  z-index: 999;
  font-size: 30px;
  font-weight: normal;
  color: #FFFFFF;
  background: #000000;
  opacity: 1;
}
.bg-grey{
  background-color: #d4d4d4;
}
.page-header {
  height: 350px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url(../img/page-header.jpg) center center no-repeat;
  background-size: cover;
}
.about-img{
  background-image: url(../img/about-page.jpg );
  background-size: cover;
  min-height: 80vh;
background-position: top;
}

.contact-overlay{
  height: 102vh;
  left: -0.95%;
}
@media (max-width: 767px) {


  .about-img{
    background-image: url(../img/about-page.jpg);
    background-size: cover;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  background-position: center;
  min-height: 45vh;
}}

@media (min-width: 992px){    .chooseus {
  background: #ffffff;
  position: relative;
  height: 530px;
  padding-bottom: 85px;
}

.chooseus .row {
  position: relative;
  left: -5%;
  z-index: 1;
}

.chooseus__text {
  position: relative;
  z-index: 1;
  left: -5%;

}

.chooseus__text .section-title {
  margin-bottom: 10px;
  text-align: left;
}

.chooseus__text .section-title h2 {
  margin-top: 0;
}

.chooseus__text ul {
  margin-bottom: 28px;

}

.chooseus__text ul li {
  list-style: none;
  font-size: 15px;
  color: #727171;
  line-height: 36px;

}

.chooseus__text ul li i {
  color: #db2d2e;

}

.chooseus__video {
  height: 530px;
  width: calc(100% - 38%);
  position: absolute;
  right: 0;
  top: 0;
}

.chooseus__video img {
  height: 100%;
  width: 100%;
}

.chooseus__video .play-btn {
  height: 60px;
  width: 60px;
  background: #db2d2e;
  border-radius: 50%;
  font-size: 25px;
  color: #ffffff;
  line-height: 64px;
  text-align: center;
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-30px, -30px);
  -ms-transform: translate(-30px, -30px);
  transform: translate(-30px, -30px);
  z-index: 9;
}

.chooseus__video .play-btn i {
  position: relative;
  left: 3px;
  top: -1px;
}


.spad {
  padding-top: 10px;
  padding-bottom: 100px;
}}
@media (max-width: 767px) {
  .chooseus {
      padding: 0px 0px 50px 0px;
  }
  
  .chooseus__text {
      text-align: center;
  }
  
  .chooseus__text .section-title {
      margin-bottom: 20px;
  }
  
  .chooseus__text ul {
      margin-bottom: 120px;

  }
  
  .chooseus__text ul li {
      font-size: 14px;
      line-height: 1.5;
  }
  
  .chooseus__video {
    justify-content: center;
    align-items: center;
    height: 100%; /* Adjust the height as needed */
    margin-top: 3em;
}

.chooseus__video img {
    width: 94%;
margin-left: 3%;
  margin-right: 3%;
    height: 300px;
    object-fit: cover;
  padding-bottom: 2em;
}



}
.chooseus {
background-color: #FFFFFF;
margin-bottom: 5em
}
.chooseus i {
color: #FFFFFF;
padding-top: .85em;
}
.body-background{
  background-color: #F4F6F8;
}
.background-white{
  background-color: #fff;
}
.mb-icon{
  margin-bottom: .7em;
  margin-left: .13em;
} 


/* Mobile Styles */
@media (max-width: 778px) {
  .mobile-overlay {

    padding: 0;
    height: 120vh;
    margin: 0;
    width: 120%;
    display: block;
  }
  .contact-overlay {
    display: none;
  }
}
/* Mobile Styles */
@media (max-width: 1000px) {
  /* Adjust map container height */
  .container-flu iframe {
    height: 780px; /* Adjust height as needed */
    width: 130vh;
  }

  /* Apply grayscale filter to the map */
  .container-flu iframe {
    filter: grayscale(30%) !important;
    }
  
  .text-contact{
    color: #ffffff;
  }
  .mobile-overlay {
z-index: -1;
    padding: 0;
    height: 100vh;
    margin: 0;
    width: 120%;
    display: flex;
  }
  .contact-overlay {
width: 100vh;    }
}

/* Define the background color when a dropdown item is clicked */
.dropdown-item{
  color: #cdcdcd;
  /* You can change this color to the desired color */
}
/* Define the background color when a dropdown item is clicked */
.dropdown-item:active {
  background-color: #FF8E48; /* New background color when clicked (green in this example) */
  /* You can change this color to the desired color */
}
.footer-link{
  color: #9B9B9B;
  text-decoration: none;
}
.footer-link:hover{
  color: #6b6b6b;
  text-decoration: underline;
  transition: ease-in-out .2s;
}
.footer-list{

list-style-type: none;
margin-right: 5em;
padding: 0 ;

}

.bg-refrigeration{
  background-color: #fff;
}

@media (max-width: 567px){
  .logo{
    width: 9.5em ;

  }
  .appointment {
    background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .3)), url(../img/carousel-2.webp) center center no-repeat;
    background-size: cover;
    height: 113vh;
}

.refrigeration-style{
  width: 29em;
padding-right: 2em;    
margin-top: 0em;
}
.carousel-control-prev,
.carousel-control-next {
    width: 12%;
    margin-top: 25em;
  z-index: 13;
  }

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--dark);
    border: 15px solid var(--dark);
    border-radius: 50px;
}
  
  .testimonial-content {
    position: relative;
    background: #ffffff;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); /* Add shadow to the top */
    margin: 0em 0em 7em 0em; /* Reset margin */
    padding: 20px; /* Add padding as needed */
  }
  .testimonial-section{
    margin-top: -3em;
    margin-bottom: 3.4em;
  }
  .navbar-brand {
    padding-left: .75em;
    }
    
    .phone-number {
      position: absolute;
      top: 50%;
      left: 45px; /* Adjust the left position of the phone number */
      transform: translateY(-50%);
      color: white;
      font-size: 16px;
      font-family: "Kanit", sans-serif;
      font-weight: 500;
    }
    .phone-number:hover {
      position: absolute;
      top: 50%;
      left: 45px; /* Adjust the left position of the phone number */
      transform: translateY(-50%);
      color: white;
      font-size: 16px;
      font-family: "Kanit", sans-serif;
      font-weight: 500;
    }
    .phone-icon {
      position: absolute;
      top: 50%;
      left: 20px; /* Adjust the left position of the phone icon */
      transform: translateY(-50%);
      color: white;
      font-size: 16px;
    }
    .slanted-topbar::after {
      content: "";
      position: absolute;
      top: 0;
      left: 60%; /* Starting from the end of the red section */
      width: 60%; /* 1/5 of the width */
      height: 100%;
      background-color: #EB1C24; /* Black color */
      transform-origin: top right;
      transform: skewX(-30deg); /* Skew the section to create slant */
    }
    .get-quote .i1 {
      margin-left: 10px; /* Add spacing between text and icon */
      font-size: 16px;
    }
 
    
    .get-quote .i2 {
      display: none;}
    .white-line {
      position: absolute;
      top: 0;
      left: 60%; /* Starting from the end of the red section */
      width: 6px; /* Width of the white line */
      height: 100%;
      background-color: white; /* White color */
      z-index: 1; /* Ensure the white line appears above the black section */
      transform-origin: top right;
      transform: skewX(-30deg); /* Apply the same slant as the black section */
    }
    .get-quote {
      position: absolute;
      top: 50%;
      left: 70%; /* Place in the middle of the black section */
      color: white;
      font-size: 16px;
      cursor: pointer;
      font-family: "Kanit", sans-serif;
      font-weight: 500;
    
      z-index: 2; /* Ensure the text appears above the white line */
    }
    .carousel-item {
      position: absolute;
      width: 100%;
      height: 78vh;
      object-fit: cover;
  }
  .font-size-p{
    font-size: 15px;
    text-shadow: 12px 1px 14px rgba(0, 0, 0, 0.3); /* Adjust the values to control the text shadow */

  }
    /*** Header ***/
.carousel-caption p {
  top: 50%;
  right: 0;
  width: 90%;
  bottom: 0;
  margin: 0 5%;
  text-align: center;
  z-index: 1;
}
/*** Header ***/
.carousel-caption {
top: -15%;
left: 0 ;
right: 0;
bottom: 0;
display: flex;
align-items: center;
text-align: center;
z-index: 11;
}


.form-padding{
padding-right: 2em;
}
.contact-paragraph-text{
padding-right: 4em;

}
.mobile-overlay
.v-shape-fill {
bottom: -80px; /* Adjust the distance from the bottom as needed */
max-width: 100%; /* Set the width to the full viewport width */
margin: 0;
left: 50%;
right: 50%;
padding: 0;
height: 100%; /* Allow the height to adjust proportionally */
z-index: 2; /* Ensure it appears above other elements */
}
.user{
width: 2.5em;
}

}



.service{
  margin-top: 1em;
}


@media (max-width: 419px){
.logo{
  width: 10.25em ;

}
.appointment {
  background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .3)), url(../img/carousel-2.webp) center center no-repeat;
  background-size: cover;
  height: 119vh;
}

.refrigeration-style{
width: 29em;
padding-right: 2em;    
margin-top: 0em;
}
.carousel-control-prev,
.carousel-control-next {
  width: 15%;
  margin-top: 23em;
z-index: 13;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 3rem;
  height: 3rem;
  background-color: var(--dark);
  border: 15px solid var(--dark);
  border-radius: 50px;
}

.testimonial-content {
  position: relative;
  background: #ffffff;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); /* Add shadow to the top */
  margin: 0em 0em 7em 0em; /* Reset margin */
  padding: 20px; /* Add padding as needed */
}
.testimonial-section{
  margin-top: -3em;
  margin-bottom: 3.4em;
}
.navbar-brand {
  padding-left: .75em;
  }
  
  .phone-number {
    position: absolute;
    top: 50%;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    left: 45px; /* Adjust the left position of the phone number */
    transform: translateY(-50%);
    color: white;
    font-size: 19px;
  }
  .phone-number:hover {
    position: absolute;
    top: 50%;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
    left: 45px; /* Adjust the left position of the phone number */
    transform: translateY(-50%);
    color: white;
    font-size: 19px;
  }
  .phone-icon {
    position: absolute;
    top: 50%;
    left: 20px; /* Adjust the left position of the phone icon */
    transform: translateY(-50%);
    color: white;
    font-size: 16px;
  }
  .slanted-topbar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 60%; /* Starting from the end of the red section */
    width: 60%; /* 1/5 of the width */
    height: 100%;
    background-color: #EB1C24; /* Black color */
    transform-origin: top right;
    transform: skewX(-30deg); /* Skew the section to create slant */
  }
  .get-quote .i1 {
    margin-left: 10px; /* Add spacing between text and icon */
    font-size: 16px;
  }

  
  .get-quote .i2 {
    display: none;}
  .white-line {
    position: absolute;
    top: 0;
    left: 60%; /* Starting from the end of the red section */
    width: 6px; /* Width of the white line */
    height: 100%;
    background-color: white; /* White color */
    z-index: 1; /* Ensure the white line appears above the black section */
    transform-origin: top right;
    transform: skewX(-30deg); /* Apply the same slant as the black section */
  }
  .get-quote {
    position: absolute;
    top: 50%;
    left: 70%; /* Place in the middle of the black section */
    color: white;
    font-size: 19px;
    cursor: pointer;
    font-family: "Kanit", sans-serif;
  font-weight: 500;
  
    z-index: 2; /* Ensure the text appears above the white line */
  }
  .get-quote:hover {
    position: absolute;
    top: 50%;
    left: 70%; /* Place in the middle of the black section */
    color: white;
    font-size: 19px;
    cursor: pointer;
    font-family: "Kanit", sans-serif;
  font-weight: 500;
  
    z-index: 2; /* Ensure the text appears above the white line */
  }
  .carousel-item {
    position: absolute;
    width: 100%;
    height: 91vh;
    
    object-fit: cover;
}
.font-size-p{
  font-size: 15px;
  text-shadow: 12px 1px 14px rgba(0, 0, 0, 0.3); /* Adjust the values to control the text shadow */

}
  /*** Header ***/
.carousel-caption p {
top: -10%;
right: 0;
width: 90%;
bottom: 0;
margin: 0 5%;
text-align: center;
z-index: 1;
}
.form-padding{
padding-right: 2em;
}
.contact-paragraph-text{
padding-right: 4em;

}

/*** Header ***/
.carousel-caption {
top: -20%;
left: 0 ;
right: 0;
bottom: 0;
display: flex;
align-items: center;
text-align: center;
z-index: 11;
}

.mobile-overlay
.v-shape-fill {
bottom: -80px; /* Adjust the distance from the bottom as needed */
max-width: 100%; /* Set the width to the full viewport width */
margin: 0;
left: 50%;
right: 50%;
padding: 0;
height: 100%; /* Allow the height to adjust proportionally */
z-index: 2; /* Ensure it appears above other elements */
}
.user{
width: 2em;
}
.van {
margin-top: -5em;
min-width: 389px; 


}
.service{
margin-top: -6em !important;
}
@keyframes driveIn {
from {
  transform: translateX( 100%);
}
to {
  transform: translateX(20%);
}
}

}

@media (max-width: 385px){
.appointment {
  background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .3)), url(../img/carousel-2.webp) center center no-repeat;
  background-size: cover;
  height: 150vh;
}
.phone-number {
position: absolute;
top: 50%;
font-family: "Kanit", sans-serif;
font-weight: 500;
left: 45px; /* Adjust the left position of the phone number */
transform: translateY(-50%);
color: white;
font-size: 17px;
}
.phone-number:hover {
position: absolute;
top: 50%;
font-family: "Kanit", sans-serif;
font-weight: 500;
left: 45px; /* Adjust the left position of the phone number */
transform: translateY(-50%);
color: white;
font-size: 17px;
}
.phone-icon {
position: absolute;
top: 50%;
left: 20px; /* Adjust the left position of the phone icon */
transform: translateY(-50%);
color: white;
font-size: 16px;
}
.slanted-topbar::after {
content: "";
position: absolute;
top: 0;
left: 60%; /* Starting from the end of the red section */
width: 60%; /* 1/5 of the width */
height: 100%;
background-color: #EB1C24; /* Black color */
transform-origin: top right;
transform: skewX(-30deg); /* Skew the section to create slant */
}
.get-quote .i1 {
margin-left: 10px; /* Add spacing between text and icon */
font-size: 16px;
}
.appointment {
background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .3)), url(../img/carousel-2.webp) center center no-repeat;
background-size: cover;
height: 162vh;
}

.get-quote .i2 {
display: none;}
.white-line {
position: absolute;
top: 0;
left: 60%; /* Starting from the end of the red section */
width: 6px; /* Width of the white line */
height: 100%;
background-color: white; /* White color */
z-index: 1; /* Ensure the white line appears above the black section */
transform-origin: top right;
transform: skewX(-30deg); /* Apply the same slant as the black section */
}
.get-quote {
position: absolute;
top: 50%;
left: 70%; /* Place in the middle of the black section */
color: white;
font-size: 17px;
cursor: pointer;
font-family: "Kanit", sans-serif;
font-weight: 500;

z-index: 2; /* Ensure the text appears above the white line */
}
.get-quote:hover {
position: absolute;
top: 50%;
left: 70%; /* Place in the middle of the black section */
color: white;
font-size: 17px;
cursor: pointer;
font-family: "Kanit", sans-serif;
font-weight: 500;

z-index: 2; /* Ensure the text appears above the white line */
}
.carousel-item {
position: absolute;
width: 100%;
height: 91vh;

object-fit: cover;
}
.carousel-item {
position: absolute;
width: 100%;
height: 115vh;
object-fit: cover;
}
.carousel-control-prev,
.carousel-control-next {
  width: 15%;
  margin-top: 28em;
z-index: 13;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 3rem;
  height: 3rem;
  background-color: var(--dark);
  border: 15px solid var(--dark);
  border-radius: 50px;
}
.van {
margin-top: -4em; 
min-width: 389px; 

}
.service{
  margin-top: -6em !important;
  }

@keyframes driveIn {
from {
    transform: translateX( 100%);
}
to {
    transform: translateX(20%);
}
}
.refrigeration-style{
width: 39em;
padding-right: 2em;    
margin-top: 2em;
}
.mobile-overlay {

padding: 0;
height: 120vh;
margin: 0;
width: 120%;
display: block;
}
}/* Add this CSS to your existing stylesheet */
@media (max-width: 370px){
.appointment {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.57), rgba(0, 0, 0, .23)), url(../img/appointment.webp) left center no-repeat;
  background-size: cover;
  height: 150vh;
}
.phone-number {
position: absolute;
top: 50%;
font-family: "Kanit", sans-serif;
font-weight: 500;
left: 45px; /* Adjust the left position of the phone number */
transform: translateY(-50%);
color: white;
font-size: 15px;
}
.phone-number:hover {
position: absolute;
top: 50%;
font-family: "Kanit", sans-serif;
font-weight: 500;
left: 45px; /* Adjust the left position of the phone number */
transform: translateY(-50%);
color: white;
font-size: 15px;
}
.phone-icon {
position: absolute;
top: 50%;
left: 20px; /* Adjust the left position of the phone icon */
transform: translateY(-50%);
color: white;
font-size: 16px;
}
.slanted-topbar::after {
content: "";
position: absolute;
top: 0;
left: 60%; /* Starting from the end of the red section */
width: 60%; /* 1/5 of the width */
height: 100%;
background-color: #EB1C24; /* Black color */
transform-origin: top right;
transform: skewX(-30deg); /* Skew the section to create slant */
}
.get-quote .i1 {
margin-left: 10px; /* Add spacing between text and icon */
font-size: 16px;
}
.appointment {
background: linear-gradient(to right, rgba(0, 0, 0, 0.57), rgba(0, 0, 0, .23)), url(../img/appointment.webp) left center no-repeat;
background-size: cover;
height: 162vh;
}

.get-quote .i2 {
display: none;}
.white-line {
position: absolute;
top: 0;
left: 60%; /* Starting from the end of the red section */
width: 6px; /* Width of the white line */
height: 100%;
background-color: white; /* White color */
z-index: 1; /* Ensure the white line appears above the black section */
transform-origin: top right;
transform: skewX(-30deg); /* Apply the same slant as the black section */
}
.get-quote {
position: absolute;
top: 50%;
left: 70%; /* Place in the middle of the black section */
color: white;
font-size: 15px;
cursor: pointer;
font-family: "Kanit", sans-serif;
font-weight: 500;

z-index: 2; /* Ensure the text appears above the white line */
}
.get-quote:hover {
position: absolute;
top: 50%;
left: 70%; /* Place in the middle of the black section */
color: white;
font-size: 15px;
cursor: pointer;
font-family: "Kanit", sans-serif;
font-weight: 500;

z-index: 2; /* Ensure the text appears above the white line */
}
.carousel-item {
position: absolute;
width: 100%;
height: 91vh;

object-fit: cover;
}

.carousel-control-prev,
.carousel-control-next {
  width: 15%;
  margin-top: 28em;
z-index: 13;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 3rem;
  height: 3rem;
  background-color: var(--dark);
  border: 15px solid var(--dark);
  border-radius: 50px;
}
.van {
margin-top: -4em; 
min-width: 389px; 

}
.service{
  margin-top: -6em !important;
  }

@keyframes driveIn {
from {
    transform: translateX( 100%);
}
to {
    transform: translateX(20%);
}
}
.refrigeration-style{
width: 39em;
padding-right: 2em;    
margin-top: 2em;
}
.mobile-overlay {

padding: 0;
height: 120vh;
margin: 0;
width: 120%;
display: block;
}
.logo{
width: 9em;
}
}/* Add this CSS to your existing stylesheet */
@media (min-width: 1000px){
.contact-left{
  margin-left: 2em;
}
.refrigeration-style{
  width: 69em;
padding-right: 2em;    
margin-top: 15em;
}
}
@media screen and (min-width: 1000px) and (max-width: 1400px){
.testimonial-section{
  margin-top: 3em;
  margin-bottom: 6em;
}
.testimonial-content {
  position: relative;
  background: #ffffff;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); /* Add shadow to the top */
  margin: 0em 0em 6em 0em; /* Reset margin */
  padding: 20px; /* Add padding as needed */
}
}
@media screen and (min-width: 1400px) and (max-width: 1800px){
.testimonial-section{
  margin-top: 3em;
  margin-bottom: -1em !important;
}
.testimonial-content {
  position: relative;
  background: #ffffff;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); /* Add shadow to the top */
  margin: 0em 0em 6em 0em; /* Reset margin */
  padding: 20px; /* Add padding as needed */
}
}
@media screen and (min-width: 992px) and (max-width: 1100px){
.choose-left1{
  margin-left: 3em;
  margin-top: 4em;
}
}
@media screen and (min-width: 1100px) and (max-width: 1400px){
.choose-left1{
  margin-left: 3em;
  margin-top: 4em;
}


}
@media screen and (min-width: 1400px) and (max-width: 1800px){
.choose-left1{
  margin-left: 4em;
  margin-top: 4em;
}
}
@media screen and (min-width: 1800px) and (max-width: 2100px){
.choose-left1{
  margin-left: .5em;
  margin-top: 4em;
}
}
.user{
width: 2.75em;
}

@media screen and (min-width: 1000px) and (max-width: 1250px){

  .carousel-buttons{
    margin-left: -9% !important;
    margin-top: 1em !important;
    }
    
@keyframes driveIn {
from {
    transform: translateX( 100%);
}
to {
    transform: translateX(10%);
}
}

.van {
animation: driveIn 2s ease-out forwards;
min-width: 600px;

}

.carousel-caption p {
top: 50%;
right: 0;
width: 80%;
bottom: 0;
margin: 0 10%;
text-align: center;
z-index: 1;
}

}


@media screen and (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
  .chooseus {
        padding: 0px 0px 50px 0px;
    }
    .refrigeration-style{
      width: 22em;
  padding-right: 2em;    
  margin-top: 0em;
    }
    .chooseus__text {
        text-align: center;
    }
    #header-carousel .carousel-item {
      position: relative;
      min-height: 550px;
  }
  
  #header-carousel .carousel-item img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
      width: 3rem;
      height: 3rem;
      border-width: 12px;
  }
    .chooseus__text .section-title {
        margin-bottom: 20px;
    }
    
    .chooseus__text ul {
        margin-bottom: 120px;

    }
    
    .chooseus__text ul li {
        font-size: 14px;
        line-height: 1.5;
    }
    
    .chooseus__video {
      justify-content: center;
      align-items: center;
      height: 100%; /* Adjust the height as needed */
      margin-top: 3em;
  }

  .chooseus__video img {
      width: 94%;
  margin-left: 3%;
    margin-right: 3%;
      height: 100%;
      object-fit: fill;
    padding-bottom: 2em;
  }

  .carousel-caption p {
    top: 50%;
    right: 0;
    width: 80%;
    bottom: 0;
    margin: 0 10%;
    text-align: center;
    z-index: 1;
  }
  .phone-number {
    position: absolute;
    top: 50%;
    left: 45px; /* Adjust the left position of the phone number */
    transform: translateY(-50%);
    color: white;
    font-size: 19px;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
  }
  .phone-number:hover {
    position: absolute;
    top: 50%;
    left: 45px; /* Adjust the left position of the phone number */
    transform: translateY(-50%);
    color: white;
    font-size: 19px;
    font-family: "Kanit", sans-serif;
    font-weight: 500;
  }
  .phone-icon {
    position: absolute;
    top: 50%;
    left: 20px; /* Adjust the left position of the phone icon */
    transform: translateY(-50%);
    color: white;
    font-size: 16px;
  }
  .slanted-topbar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 60%; /* Starting from the end of the red section */
    width: 60%; /* 1/5 of the width */
    height: 100%;
    background-color: #EB1C24; /* Black color */
    transform-origin: top right;
    transform: skewX(-30deg); /* Skew the section to create slant */
  }
  .get-quote .i1 {
    margin-left: 10px; /* Add spacing between text and icon */
    font-size: 16px;
  }


  .get-quote .i2 {
    display: inline  ;}
  .white-line {
    position: absolute;
    top: 0;
    left: 60%; /* Starting from the end of the red section */
    width: 6px; /* Width of the white line */
    height: 100%;
    background-color: white; /* White color */
    z-index: 1; /* Ensure the white line appears above the black section */
    transform-origin: top right;
    transform: skewX(-30deg); /* Apply the same slant as the black section */
  }
  .get-quote {
    position: absolute;
    top: 50%;
    left: 70%; /* Place in the middle of the black section */
    color: white;
    font-size: 19px;
    cursor: pointer;
    font-family: "Kanit", sans-serif;
    font-weight: 500;

    z-index: 2; /* Ensure the text appears above the white line */
  }
  .get-quote:hover {
    position: absolute;
    top: 50%;
    left: 70%; /* Place in the middle of the black section */
    color: white;
    font-size: 19px;
    cursor: pointer;
    font-family: "Kanit", sans-serif;
    font-weight: 500;

    z-index: 2; /* Ensure the text appears above the white line */
  }
  .carousel-item {
    position: absolute;
    width: 100%;
    height: 70vh;
    object-fit: cover;
  }
  .testimonial-section{
    margin-top: 3em;
    margin-bottom: 6em;
  }
  .testimonial-content {
    position: relative;
    background: #ffffff;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); /* Add shadow to the top */
    margin: 0em 0em 6em 0em; /* Reset margin */
    padding: 20px; /* Add padding as needed */
  }
  
    }

    @media screen and (min-width: 1000px) and (max-width: 1070px){
      .contact-overlay{
        height: 768px !important; /* Adjust the height as needed */
        left: -0.95%;
      }
      iframe {
        height: 768px !important; /* Adjust the height as needed */
      }
    
    }
    @media screen and (min-width: 1070px) and (max-width: 1200px){
      .contact-overlay{
        height: 768px !important; /* Adjust the height as needed */
        left: -0.95%;
      }
      iframe {
        height: 768px !important; /* Adjust the height as needed */
      }
      .carousel-buttons{
        margin-left: -9% !important;
        margin-top: 1em !important;
        }

      
    }
    @media screen and (max-width: 1000px){
      .refrigeration-style{
        width: 25em;
    padding-right: 2em;    
      }

    }





/* Remove extra 'r' in the media query */
@media (min-width: 992px) {
.navbar .nav-item .dropdown-menu {
    display: block;
    border: none;
    margin-top: 0;
    top: 150%;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}

.navbar .nav-item:hover .dropdown-menu {
    top: 100%;
    visibility: visible;
    transition: .5s;
    opacity: 1;
}

.topbar-right {
    visibility: visible;
}

.topbar-text {
    display: none;
}
}

@media screen and (min-width: 1000px) and (max-width: 1250px){

  .navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 30px 0px 0px 0;
    color: #1d1c1c;
    font-size: 17px;
    text-transform: uppercase;
    outline: none;
    font-family: "Kanit", sans-serif;
    font-weight: 500; 
    font-style: italic;

    }
    .logo{
      width: 10em;
    }
    .navbar-brand{
      padding-left: .4em  ;
    }
    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link.active {
    color: #EB1C24;
    }

}

    /****** Navbar ***************/



.navbar .navbar-brand {
  position: relative;
  padding-right: 30px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the content horizontally */
  z-index: 1; /* Ensure the logo appears above other elements */
}

.navbar .navbar-brand img.logo {
  width: 10em; /* Adjust the width of the logo as needed */
  position: relative; /* Ensure the logo stays within the navbar */
  top: -20px; /* Adjust the vertical position of the logo */
}
.logo-container {
  margin-bottom: -140px; /* Negative margin to pull it up */
}

.navbar {
  margin-top: -130px; /* Negative margin to pull it up */
  border-top: none; /* Remove the top border if present */
}

.navbar-brand {
padding-left: 2em;
}
.logo-container {
  position: relative;
  top: -20px; /* Adjust this value as needed */
  display: flex;
  height: 200px;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  position: relative;
  top: -20px; /* Adjust this value as needed */
  display: flex;
  
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-info {
  display: flex; /* Ensure the text and icons stay on the same line */
  align-items: center;
}
.left-content{
  margin-bottom: 3em;
  font-size: 22px;
color: #ffff;
padding-left: 4em;
letter-spacing: .2px; /* Adjust the value as needed */

}
.phone-number{
text-decoration: underline ;
font-weight: 500;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 23px;

}
.email{
font-weight: 500;
font-size: 23px;
letter-spacing: .5px; /* Adjust the value as needed */

}
.phone-icon{
  margin: 0 10px;
}

.right-content{
  margin-bottom: 3em;
  font-size: 22px;
  letter-spacing: .2px; /* Adjust the value as needed */

  padding-right: 11em;
  color: #ffff;
}
.mail{
margin-left: 10px;
margin-right: 10px;
}

.contact-info span {
  margin-right: 10px; /* Add spacing between icon and text */

}
.social-icon {
  position: absolute;
  right: 3%;
}

.social-icon:first-child {
  margin-right: 10px; /* Add margin between the icons */
}

.social-icon2 {
  position: absolute;
  right: 4.5%;
}

.social-icon2:first-child {
  margin-right: 10px; /* Add margin between the icons */
}


.navbar .navbar-brand::after {
position: absolute;
content: "";
width: 50px;
height: 100%;
top: 0;
right: -25px;
}

.navbar .navbar-nav .nav-link {
  margin-right: 61px;
  padding: 25px 0px 20px 0;
color: #cdcdcd;
font-size: 20px;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */

outline: none;
font-weight: 300; 

}
.navbar .navbar-nav .nav-link2 {
margin-right: 61px;
padding: 25px 0px 20px 0;
color: #cdcdcd;
margin-top: 0em;

font-size: 20px;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */
margin-top: 0em;
outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #FF8E48;
}
.navbar .navbar-nav .nav-link2:hover,
.navbar .navbar-nav .nav-link2.active {
color: #FF8E48;
}

.navbar .dropdown-toggle::after {
border: none;
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 900;
vertical-align: middle;
margin-left: 0px;
}

.logo-container{
  background-color: #FF8E48 ;
}
.btn-colour-nav {
  position: relative;
  background: #FF8E48;
  border: 1px solid #fff;
  color: #fff;

  text-transform: uppercase;
  padding: .5em 3em;
  margin-left: 2em;
  border-radius: 5.21em;
  font-size: 21px;
  font-weight: 500 !important;
  box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
}
/** CAROUSEL CAROUESL CAROUSEL CAROUSEL***/
.carousel-text{
font-weight: 600;
 text-transform: uppercase;
  color: #000000    ;
  text-align: left;
  font-size: 5.5em;
}

.carousel-description {
  font-size: 22px;
  color: #000000; /* Adjust text color if needed */
  margin-top: 0px; /* Adjust top margin as needed */
  text-align: left;
  letter-spacing: 1px; /* Adjust the value as needed */

}

.text-container{
width: 25.8%;
}.carousel-caption {
  top: -15%;
  left: -53%;
text-align: left;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.roofing{
  color: #FF8E48;
  text-decoration: underline  ;
}
.carounsel-header1{
  color: #FF8E48;
  font-style: italic;
}
.carousel-logo1{
  
  width: 22em;
}
.btn-carousel {
  position: relative;
  background: #FF8E48;
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  padding: .5em 3em;
  padding-left: 2em; /* Adjust the left padding to move the text further left */
  margin-left: 3em;
  border-radius: 5.21em;
  font-size: 19.7px;
  font-weight: 500 !important;
  box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
  position: relative;
  background: #fff;
  color: #0c0b11;
  text-align: left;
  text-transform: uppercase;
  padding: .5em 3em;
  padding-left: 2em; /* Adjust the left padding to move the text further left */
  margin-left: 3em;
  border-radius: 5.21em;
  border: 1px solid #0c0b11 ;

  font-size: 19.7px;
  font-weight: 500 !important;
  box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}

.btn-carousel-2 {
  position: relative;
  background: #ffffff00;
  color: #0c0b11;
  border: 1px solid #0c0b11 ;
  text-align: left;
  text-transform: uppercase;
  padding: .5em 3em;
  padding-left: 2em; /* Adjust the left padding to move the text further left */
  margin-left: 2em;
  border-radius: 5.21em;
  font-size: 19.7px;
  font-weight: 500 !important;
}

.btn-carousel-2:hover {
  position: relative;
  background: #FF8E48;
  color: #ffffff;
  border: 0px solid #ffffff ;
  text-align: left;
  text-transform: uppercase;
  padding: .5em 3em;
  padding-left: 2em; /* Adjust the left padding to move the text further left */
  margin-left: 2em;
  border-radius: 5.21em;
  border: 1px solid #FF8E48 ;

  font-size: 19.7px;
  font-weight: 500 !important;
}

.carousel-btn i {
  padding-top: 4px;
  margin-left: 10px; /* Add units to the margin value */
}

.carousel-buttons{
margin-left: -9% !important;
margin-top: 0em;
}

.icon-colour-orange{
color: #FF8E48 ;
}
.px-6{
padding-left: 3.1em;
}
.text-about{
color: #8D9297;
font-weight: 400;
letter-spacing: .5px;
font-size: 1.1em !important;
}

/*******************************************************************VAN VAN VAN VAN ********************************************************/

/* For extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

.van {
  animation: driveIn 2s ease-out forwards;
}

}

@keyframes driveIn {
from {
    transform: translateX( 100%);
}
to {
    transform: translateX(5%);
}
}

.van {
animation: driveIn 2s ease-out forwards;

}
@keyframes driveVan {
0% {
  transform: translate(100%, -20%);
}
100% {
  transform: translate(calc(70vw - 100px), -20%); 
}
}
.about-h1-size{
font-size: 3.5em;
}
.projects{
margin-bottom: 6em;
}
.bg-orange{
background-color: #FF8E48;
}
.page-header-text{
font-weight: 700 !important;
text-transform: uppercase;
}
.service-font-type{
font-weight: 700 !important;
}

/* For large devices (desktops, 992px and up) */
@media (min-width: 992px) {
iframe {
  height: 665px; /* Adjust the height as needed */
}
}
/* For large devices (desktops, 992px and up) */


/* For extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
iframe {
  height: 760px; /* Adjust the height as needed */
}
.contact-overlay{
  height: 81.74vh;
  left: -0.95%;
}
.van {
  animation: driveIn 2s ease-out forwards;
  min-width: 300px;
  min-height: 700px;
}

}
@media (min-width: 1250px) {
iframe {
  height: 760px; /* Adjust the height as needed */
}
.contact-overlay{
  height: 760px; /* Adjust the height as needed */
  left: -0.95%;
}

}
@media (min-width: 1400px) {
iframe {
  height: 730px; /* Adjust the height as needed */
}
.contact-overlay{
  height: 81.1vh;
  left: -0.95%;
}
}
@media (min-width: 1500px) {
iframe {
  height: 730px; /* Adjust the height as needed */
}
.contact-overlay{
  height: 84.54vh;
  left: -0.95%;
}
}
@media (min-width: 1600px) {
iframe {
  height: 730px; /* Adjust the height as needed */
}
.contact-overlay{
  height: 81vh;
  left: -0.95%;
}
}
@media (min-width: 1700px) {
iframe {
  height: 730px; /* Adjust the height as needed */
}
.contact-overlay{
  height: 88.3vh;
  left: -0.95%;
}
}
@media (min-width: 1900px) {
iframe {
  height: 730px; /* Adjust the height as needed */
}
.contact-overlay{
  height: 730px !important;
  left: -0.95%;
}
}
@media (min-width: 1915px) {
iframe {
  height: 730px; /* Adjust the height as needed */
}
.contact-overlay{
  height: 730px !important;
  left: -0.95%;
}
}
@media (min-width: 1920px) {
iframe {
  height: 730px; /* Adjust the height as needed */
}
.contact-overlay{
  height: 730px !important;
  left: -0.95%;
}
}
.capitalize{
text-transform: capitalize;
}

/*NAVBAR RESPONSIVE*********/
@media (min-width: 300px) and (max-width: 364px) {


.contact-info{
  display: block;  }
    .right-content span{
      display: none ;
    }
  
    .right-content i{
      display: none ;
    }
    .logo{
      width: 7.5em ;
      margin-left: -5em;
      position: sticky;
      z-index: 10000;
    }
    
    .navbar-brand {
      padding-left: 1.35em !important;
      padding-bottom: 1.75em;
      }
  
      .navbar {
        margin-top: -150px; /* Negative margin to pull it up */
    }
  
  .magna{
    margin-top: -.6em;
    margin-left: 14em;
  }
      .padding-2{
        padding: 1.45em 0;
      }
      .navbar-toggler-icon {
        color: #ff0000 !important;
      }
      .logo-container{
        background-color: #FF8E48 ;
        height: 185px;
      } 
  
      .carousel-text{
        font-weight: 600;
        margin-left: -.34em !important;
  
         text-transform: uppercase;
          color: #ffffff    ;
          text-align: left !important;
          font-size: 2.62em;
      }
      .carousel-description {
        font-size: 14px;
        margin-left: -1em !important;
        color: #ffffff; /* Adjust text color if needed */
        margin-top: 0px; /* Adjust top margin as needed */
        text-align: left !important;
        letter-spacing: .21px; /* Adjust the value as needed */
    
    }
    .carounsel-header1{
      color: #FF8E48;
      font-size: 1em;
      font-style: italic;
      margin-left: -.89em !important;
  
    }
    
  .text-container{
    width: 100%;
    }.carousel-caption {
      top: -8%;
      left: -2%;
    text-align: left;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
  
    .carousel-logo1{
  width: 12.5em !important;  
  height: 1.5em !important; 
  bottom: 28.5%;
  left: 10%;
  
  }
  
    .btn-carousel {
      position: relative;
      background: #FF8E48;
      color: #fff;
      text-align: left;
      text-transform: uppercase;
      padding: .5em 2em .5em 1.4em;
      margin-left: .70em;
      margin-top: 1.2em;
      border-radius: 5.21em;
      font-size: 15.7px;
      font-weight: 500 !important;
      box-shadow: 0 0 7px rgba(255, 142, 72, 1);
    }
    .btn-carousel-2 {
  display: none;
    }
    
    .btn-carousel-2:hover {
  display: none;
    }
  
    .carousel-item {
      position: absolute;
      width: 100%;
      height: 85vh !important;
      object-fit: cover;
    }
  
    .left-content,
    .right-content {
      display: none;
    }
    .left-mobile-none {
      display: none;
    } 
    
    .phone-number2 {
      display: inline-block;
      position: absolute;
      font-size: .8em;
      right: 10%;
      text-decoration: underline;
      top:  19%;
  
    }
    .phone-icon2 {
      transform: rotate(110deg);
      display: inline-block;
      position: absolute;
      font-size: .8em;
      right: 48%;
      top: 20.5%;
      margin-right: 3.15px !important;
    }
    .van {
      margin-top: -12em; 
      min-width: 489px; 
      
      }
      .about-h1-size{
        font-size: 2.25em;
      }
  
      .service{
        margin-top: -18em !important;
        }
        .slant {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          margin-bottom: -11.3em;
          height: 720px; /* Adjust the height as needed */
          clip-path: polygon(50% 68.13%, 99.75% 75%, 0.25% 75%);
          background-color: #ffffff;
          z-index: 2; /* Ensure it's above the carousel */
        }
    
        .appointment {
          background: linear-gradient(to right, rgba(0, 0, 0, 0.57), rgba(0, 0, 0, .23)), url(../img/appointment.webp) left center no-repeat;
          background-size: cover;
          height: 173vh;
        }
    
        .check-a-trade-logo1{
          width: 8em;
        }
    
        .swiper-pagination {
          position: absolute;
          bottom: 60px !important ; /* Adjust the distance from the bottom as needed */
        }
        .swiper-pagination .swiper-pagination-bullet {
          background-color: #FF8E48; /* Change to the color you desire */
        }
        
        
        .swiper{
        overflow: visible !important;
        }
        .projects{
          margin-bottom: 3em;
        }
    
        .testimonial-section{
          margin-top: 2em;
          margin-bottom: -2em !important;
        }
  
        .font-type-contact{
          font-weight: 700;
          font-size: 2.15em;
      text-transform: uppercase;
        } 
  
        .navbar .navbar-nav .nav-link {
          margin-right: 1px;
          padding: 5px 10px 0px 0 !important;
        color: #cdcdcd;
        font-size: 18px;
      text-transform: capitalize;
      letter-spacing: 1px; /* Adjust the value as needed */
        outline: none;
        font-weight: 300; 
      
        }
        .navbar .navbar-nav .nav-link2 {
          margin-right: 1px;
        color: #cdcdcd;
        padding: 5px 10px 10px 0 !important;
  
        font-size: 18px !important;
      text-transform: capitalize;
      letter-spacing: 1px; /* Adjust the value as needed */
        outline: none;
        font-weight: 300; 
      
        }
        .about-padding{
          padding-left: 3em  !important;
          padding-right: 3em ;
        }
        .navbar .navbar-nav .nav-link:hover,
        .navbar .navbar-nav .nav-link.active {
        color: #FF8E48;
        }
        .navbar .navbar-nav .nav-link2:hover,
        .navbar .navbar-nav .nav-link2.active {
        color: #FF8E48;
        }
  
        .navbar-nav{
          margin-left: .35em !important;
        }
        .navbar-mr{
          margin-top: -1.3em !important;
          margin-left: 1.3em !important;
        }
        .dropdown-toggle::after {
          margin-left: 15px; /* Adjust the value as needed */
      }
      .page-header {
        height: 260px;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
        background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url(../img/page-header.jpg) center center no-repeat;
        background-size: cover;
      }
      .breadcrumb{
        text-align: center !important;
      margin-left: 35%
      }
      


}

@media (min-width: 365px) and (max-width: 388px) {

.contact-info{
display: block;  }
.right-content{
  display: none ;
}

.right-content i{
  display: none ;
}
.logo{
  width: 7.5em ;
  margin-left: -5em;
  position: sticky;
  z-index: 10000;
}

.navbar-brand {
  padding-left: 1.35em !important;
  padding-bottom: 1.75em;
  }

  .navbar {
    margin-top: -150px; /* Negative margin to pull it up */
}

.magna{
margin-top: -.6em;
margin-left: 14em;
}
  .padding-2{
    padding: 1.45em 0;
  }
  .navbar-toggler-icon {
    color: #ff0000 !important;
  }
  .logo-container{
    background-color: #FF8E48 ;
    height: 185px;
  } 

  .carousel-text{
    font-weight: 600;
    margin-left: -.34em !important;

     text-transform: uppercase;
      color: #ffffff    ;
      text-align: left !important;
      font-size: 2.62em;
  }
  .carousel-description {
    font-size: 14px;
    margin-left: -1em !important;
    color: #ffffff; /* Adjust text color if needed */
    margin-top: 0px; /* Adjust top margin as needed */
    text-align: left !important;
    letter-spacing: .21px; /* Adjust the value as needed */

}
.carounsel-header1{
  color: #FF8E48;
  font-size: 1em;
  font-style: italic;
  margin-left: -.89em !important;

}

.text-container{
width: 100%;
}.carousel-caption {
  top: -8%;
  left: -2%;
text-align: left;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.carousel-logo1{
width: 12.5em !important;  
height: 1.5em !important; 
bottom: 30.5%;
left: 10%;

}

.btn-carousel {
  position: relative;
  background: #FF8E48;
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  padding: .5em 2em .5em 1.4em;
  margin-left: .70em;
  margin-top: 1.2em;
  border-radius: 5.21em;
  font-size: 15.7px;
  font-weight: 500 !important;
  box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel-2 {
display: none;
}

.btn-carousel-2:hover {
display: none;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 85vh !important;
  object-fit: cover;
}

.left-content,
.right-content {
  display: none;
}
.left-mobile-none {
  display: none;
}
.phone-number2 {
  display: inline-block;
  position: absolute;
  font-size: .8em;
  right: 10%;
  text-decoration: underline;
  top:  19%;

}
.phone-icon2 {
  transform: rotate(110deg);
  display: inline-block;
  position: absolute;
  font-size: .8em;
  right: 48%;
  top: 20.5%;
  margin-right: -1.15px !important;
}
.van {
  margin-top: -12em; 
  min-width: 489px; 
  
  }
  .about-h1-size{
    font-size: 2.25em;
  }
  .right-content span{
    display: none;
  }

  .service{
    margin-top: -18em !important;
    }
    .slant {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      margin-bottom: -11.3em;
      height: 720px; /* Adjust the height as needed */
      clip-path: polygon(50% 68.13%, 99.75% 75%, 0.25% 75%);
      background-color: #ffffff;
      z-index: 2; /* Ensure it's above the carousel */
    }

    .appointment {
      background: linear-gradient(to right, rgba(0, 0, 0, 0.57), rgba(0, 0, 0, .23)), url(../img/appointment.webp) left center no-repeat;
      background-size: cover;
      height: 173vh;
    }

    .check-a-trade-logo1{
      width: 8em;
    }

    .swiper-pagination {
      position: absolute;
      bottom: 60px !important ; /* Adjust the distance from the bottom as needed */
    }
    .swiper-pagination .swiper-pagination-bullet {
      background-color: #FF8E48; /* Change to the color you desire */
    }
    
    
    .swiper{
    overflow: visible !important;
    }
    .projects{
      margin-bottom: 3em;
    }

    .testimonial-section{
      margin-top: 2em;
      margin-bottom: -2em !important;
    }

    .font-type-contact{
      font-weight: 700;
      font-size: 2.15em;
  text-transform: uppercase;
    } 

    .navbar .navbar-nav .nav-link {
      margin-right: 1px;
      padding: 5px 10px 0px 0 !important;
    color: #cdcdcd;
    font-size: 18px;
  text-transform: capitalize;
  letter-spacing: 1px; /* Adjust the value as needed */
    outline: none;
    font-weight: 300; 
  
    }
    .navbar .navbar-nav .nav-link2 {
      margin-right: 1px;
    color: #cdcdcd;
    padding: 5px 10px 10px 0 !important;

    font-size: 18px !important;
  text-transform: capitalize;
  letter-spacing: 1px; /* Adjust the value as needed */
    outline: none;
    font-weight: 300; 
  
    }
    .about-padding{
      padding-left: 3em  !important;
      padding-right: 3em ;
    }
    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link.active {
    color: #FF8E48;
    }
    .navbar .navbar-nav .nav-link2:hover,
    .navbar .navbar-nav .nav-link2.active {
    color: #FF8E48;
    }

    .navbar-nav{
      margin-left: .35em !important;
    }
    .navbar-mr{
      margin-top: -1.3em !important;
      margin-left: 1.3em !important;
    }
    .dropdown-toggle::after {
      margin-left: 15px; /* Adjust the value as needed */
  }
  .page-header {
    height: 260px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url(../img/page-header.jpg) center center no-repeat;
    background-size: cover;
  }
  .breadcrumb{
    text-align: center !important;
  margin-left: 35%
  }
  
}
/*NAVBAR RESPONSIVE*********/

@media (min-width: 389px) and (max-width: 408px) {

.right-content span{
  display: none ;
}


.right-content i{
  display: none ;
}
.logo{
  width: 7.5em ;
  margin-left: -5em;
  position: sticky;
  z-index: 10000;
}
.navbar-nav{
  margin-left: 0em !important;
}
.navbar-mr{
  margin-right: 0em;
}
.navbar-brand {
  padding-left: 1.35em !important;
  padding-bottom: 1.75em;
  }

  .navbar {
    margin-top: -150px; /* Negative margin to pull it up */
}

.about-padding{
  padding-left: 0em !important;
}
.magna{
margin-top: -.6em;
margin-left: 14em;
}
  .padding-2{
    padding: 1.45em 0;
  }
  .navbar-toggler-icon {
    color: #ff0000 !important;
  }
  .logo-container{
    background-color: #FF8E48 ;
    height: 185px;
  } 

  .carousel-text{
    font-weight: 600;
    margin-left: -.34em !important;

     text-transform: uppercase;
      color: #ffffff    ;
      text-align: left !important;
      font-size: 2.62em;
  }
  .carousel-description {
    font-size: 14px;
    margin-left: -1em !important;
    color: #ffffff; /* Adjust text color if needed */
    margin-top: 0px; /* Adjust top margin as needed */
    text-align: left !important;
    letter-spacing: .21px; /* Adjust the value as needed */

}
.carounsel-header1{
  color: #FF8E48;
  font-size: 1em;
  font-style: italic;
  margin-left: -.89em !important;

}

.text-container{
width: 100%;
}.carousel-caption {
  top: -8%;
  left: -2%;
text-align: left;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.carousel-logo1{
width: 12.5em !important;  
height: 1.5em !important; 
bottom: 31%;
left: 8%;

}

.btn-carousel {
  position: relative;
  background: #FF8E48;
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  padding: .5em 2em .5em 1.4em;
  margin-left: .6em;
  margin-top: 1.5em;
  border-radius: 5.21em;
  font-size: 15.7px;
  font-weight: 500 !important;
  box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel-2 {
display: none;
}
.service{
  margin-top: -18em !important;
  }

.btn-carousel-2:hover {
display: none;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 70vh !important;
  object-fit: cover;
}
.left-content,
.right-content {
  display: none;
}
.left-mobile-none {
  display: none;
}

.phone-number2 {
  display: inline-block;
  position: absolute;
  font-size: .8em;
  right: 10%;
  text-decoration: underline;
  top:  19%;

}
.phone-icon2 {
  transform: rotate(110deg);
  display: inline-block;
  position: absolute;
  font-size: .8em;
  right: 48%;
  top: 20.5%;
  margin-right: -.3em !important;
}
.about-h1-size{
  font-size: 2.5em;
}
.van {
  margin-top: -12em; 
  min-width: 489px; 
  
  }
  .slant {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-bottom: -11.3em;
    height: 720px; /* Adjust the height as needed */
    clip-path: polygon(50% 68.13%, 99.75% 75%, 0.25% 75%);
    background-color: #ffffff;
    z-index: 2; /* Ensure it's above the carousel */
  }

  .appointment {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.57), rgba(0, 0, 0, .23)), url(../img/appointment.webp) left center no-repeat;
    background-size: cover;
    height: 123vh;
  }

  .check-a-trade-logo1{
    width: 8em;
  }

  .swiper-pagination {
    position: absolute;
    bottom: 60px !important ; /* Adjust the distance from the bottom as needed */
  }
  .swiper-pagination .swiper-pagination-bullet {
    background-color: #FF8E48; /* Change to the color you desire */
  }
  
  
  .swiper{
  overflow: visible !important;
  }
  .projects{
    margin-bottom: 3em;
  }

  .testimonial-section{
    margin-top: 2em;
    margin-bottom: -2em !important;
  }

  
  .font-type-contact{
    font-weight: 700;
    font-size: 2.15em;
text-transform: uppercase;
  } 

  .font-type-contact{
    font-weight: 700;
    font-size: 2.15em;
text-transform: uppercase;
  } 

  .navbar .navbar-nav .nav-link {
    margin-right: 1px;
    padding: 5px 10px 0px 0 !important;
  color: #cdcdcd;
  font-size: 18px;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */
  outline: none;
  font-weight: 300; 

  }
  .navbar .navbar-nav .nav-link2 {
    margin-right: 1px;
  color: #cdcdcd;
  padding: 5px 10px 10px 0 !important;

  font-size: 18px !important;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */
  outline: none;
  font-weight: 300; 

  }
  .about-padding{
    padding-left: 3em  !important;
    padding-right: 3em ;
  }
  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link.active {
  color: #FF8E48;
  }
  .navbar .navbar-nav .nav-link2:hover,
  .navbar .navbar-nav .nav-link2.active {
  color: #FF8E48;
  }

  .navbar-nav{
    margin-left: .35em !important;
  }
  .navbar-mr{
    margin-top: -1.3em !important;
    margin-left: 1.3em !important;
  }
  .dropdown-toggle::after {
    margin-left: 15px; /* Adjust the value as needed */
}
.page-header {
  height: 260px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url(../img/page-header.jpg) center center no-repeat;
  background-size: cover;
}
.breadcrumb{
  text-align: center !important;
margin-left: 35%
}
}

/*NAVBAR RESPONSIVE*********/

@media (min-width: 408px) and (max-width: 420px) {

.right-content span{
  display: none ;
}

.font-type-contact{
  font-weight: 700;
  font-size: 2.15em;
text-transform: uppercase;
} 
.right-content i{
  display: none ;
}
.logo{
  width: 7.5em ;
  margin-left: -5em;
  position: sticky;
  z-index: 10000;
}


.navbar-brand {
  padding-left: 1.35em !important;
  padding-bottom: 1.75em;
  }

  .navbar {
    margin-top: -150px; /* Negative margin to pull it up */
}

.magna{
margin-top: -.6em;
margin-left: 14em;
}
  .padding-2{
    padding: 1.45em 0;
  }
  .navbar-toggler-icon {
    color: #ff0000 !important;
  }
  .logo-container{
    background-color: #FF8E48 ;
    height: 185px;
  } 

  .carousel-text{
    font-weight: 600;
    margin-left: -.34em !important;

     text-transform: uppercase;
      color: #ffffff    ;
      text-align: left !important;
      font-size: 2.62em;
  }
  .carousel-description {
    font-size: 14px;
    margin-left: -1em !important;
    color: #ffffff; /* Adjust text color if needed */
    margin-top: 0px; /* Adjust top margin as needed */
    text-align: left !important;
    letter-spacing: .21px; /* Adjust the value as needed */

}
.carounsel-header1{
  color: #FF8E48;
  font-size: 1em;
  font-style: italic;
  margin-left: -.89em !important;

}

.text-container{
width: 100%;
}.carousel-caption {
  top: -8%;
  left: -2%;
text-align: left;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.carousel-logo1{
width: 12.5em !important;  
height: 1.5em !important; 
bottom: 32%;
left: 7.75%;

}

.btn-carousel {
  position: relative;
  background: #FF8E48;
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  padding: .5em 2em .5em 1.4em;
  margin-left: .83em;
  margin-top: .9em;
  border-radius: 5.21em;
  font-size: 15.7px;
  font-weight: 500 !important;
  box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel-2 {
display: none;
}
.service{
  margin-top: -18em !important;
  }

.btn-carousel-2:hover {
display: none;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 65vh !important;
  object-fit: cover;
}
.left-content,
.right-content {
  display: none;
}
.left-mobile-none {
  display: none;
}

.phone-number2 {
  display: inline-block;
  position: absolute;
  font-size: .8em;
  right: 10%;
  text-decoration: underline;
  top:  19%;

}
.phone-icon2 {
  transform: rotate(115deg);
  display: inline-block;
  position: absolute;
  font-size: .8em;
  right: 48%;
  margin-right: -13px !important;
  top: 21%;
}
.about-h1-size{
  font-size: 2.5em;
}
.van {
  margin-top: -12em; 
  min-width: 489px; 
  
  }

  .appointment {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.57), rgba(0, 0, 0, .23)), url(../img/appointment.webp) left center no-repeat;
    background-size: cover;
    height: 123vh;
  }

  .check-a-trade-logo1{
    width: 8em;
  }

  .swiper-pagination {
    position: absolute;
    bottom: 60px !important ; /* Adjust the distance from the bottom as needed */
  }
  .swiper-pagination .swiper-pagination-bullet {
    background-color: #FF8E48; /* Change to the color you desire */
  }
  
  
  .swiper{
  overflow: visible !important;
  }
  .projects{
    margin-bottom: 3em;
  }

  .testimonial-section{
    margin-top: 3em;
    margin-bottom: .1em !important;
  }

  .slant {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-bottom: -11.3em;
    height: 720px; /* Adjust the height as needed */
    clip-path: polygon(50% 68.13%, 99.75% 75%, 0.25% 75%);
    background-color: #ffffff;
    z-index: 2; /* Ensure it's above the carousel */
  }

  
  .swiper-pagination {
    position: absolute;
    bottom: 60px !important ; /* Adjust the distance from the bottom as needed */
  }
  .swiper-pagination .swiper-pagination-bullet {
    background-color: #FF8E48; /* Change to the color you desire */
  }
  
  
  .swiper{
  overflow: visible !important;
  }
  .projects{
    margin-bottom: 3em;
  }

  .testimonial-section{
    margin-top: 2em;
    margin-bottom: -2em !important;
  }

  
  .font-type-contact{
    font-weight: 700;
    font-size: 2.15em;
text-transform: uppercase;
  } 

  .font-type-contact{
    font-weight: 700;
    font-size: 2.15em;
text-transform: uppercase;
  } 

  .navbar .navbar-nav .nav-link {
    margin-right: 1px;
    padding: 5px 10px 0px 0 !important;
  color: #cdcdcd;
  font-size: 18px;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */
  outline: none;
  font-weight: 300; 

  }
  .navbar .navbar-nav .nav-link2 {
    margin-right: 1px;
  color: #cdcdcd;
  padding: 5px 10px 10px 0 !important;

  font-size: 18px !important;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */
  outline: none;
  font-weight: 300; 

  }
  .about-padding{
    padding-left: 3em  !important;
    padding-right: 3em ;
  }
  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link.active {
  color: #FF8E48;
  }
  .navbar .navbar-nav .nav-link2:hover,
  .navbar .navbar-nav .nav-link2.active {
  color: #FF8E48;
  }

  .navbar-nav{
    margin-left: .35em !important;
  }
  .navbar-mr{
    margin-top: -1.3em !important;
    margin-left: 1.3em !important;
  }
  .dropdown-toggle::after {
    margin-left: 15px; /* Adjust the value as needed */
}

.page-header {
  height: 260px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url(../img/page-header.jpg) center center no-repeat;
  background-size: cover;
}
.breadcrumb{
  text-align: center !important;

}
.container-fluid.page-header {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

.breadcrumb {
  margin-bottom: 0; /* Remove default margin */
}

.breadcrumb-item {
  display: inline; /* Display breadcrumb items inline */
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  margin: 0 0.5rem; /* Adjust spacing between breadcrumb items */
  color: #fff; /* Breadcrumb separator color */
}

}
@media (min-width: 420px) and (max-width: 620px) {

.right-content span{
  display: none ;
}

.font-type-contact{
  font-weight: 700;
  font-size: 2.15em;
text-transform: uppercase;
} 
.right-content i{
  display: none ;
}
.logo{
  width: 7.5em ;
  margin-left: -5em;
  position: sticky;
  z-index: 10000;
}

.navbar-brand {
  padding-left: 1.35em !important;
  padding-bottom: 1.75em;
  }

  .navbar {
    margin-top: -150px; /* Negative margin to pull it up */
}

.magna{
margin-top: -.6em;
margin-left: 14em;
}
  .padding-2{
    padding: 1.45em 0;
  }
  .navbar-toggler-icon {
    color: #ff0000 !important;
  }
  .logo-container{
    background-color: #FF8E48 ;
    height: 185px;
  } 

  .carousel-text{
    font-weight: 600;
    margin-left: -.34em !important;

     text-transform: uppercase;
      color: #ffffff    ;
      text-align: left !important;
      font-size: 2.62em;
  }
  .carousel-description {
    font-size: 14px;
    margin-left: -1em !important;
    color: #ffffff; /* Adjust text color if needed */
    margin-top: 0px; /* Adjust top margin as needed */
    text-align: left !important;
    letter-spacing: .21px; /* Adjust the value as needed */

}
.carounsel-header1{
  color: #FF8E48;
  font-size: 1em;
  font-style: italic;
  margin-left: -.89em !important;

}

.text-container{
width: 100%;
}.carousel-caption {
  top: -8%;
  left: -2%;
text-align: left;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.carousel-logo1{
width: 12.5em !important;  
height: 1.5em !important; 
bottom: 33%;
left: 7.75%;

}

.btn-carousel {
  position: relative;
  background: #FF8E48;
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  padding: .5em 2em .5em 1.4em;
  margin-left: .83em;
  margin-top: .9em;
  border-radius: 5.21em;
  font-size: 15.7px;
  font-weight: 500 !important;
  box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel-2 {
display: none;
}
.service{
  margin-top: -18em !important;
  }

.btn-carousel-2:hover {
display: none;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 65vh !important;
  object-fit: cover;
}
.left-content,
.right-content {
  display: none;
}
.left-mobile-none {
  display: none;
}

.phone-number2 {
  display: inline-block;
  position: absolute;
  font-size: .8em;
  right: 10%;
  text-decoration: underline;
  top:  19%;

}
.phone-icon2 {
  transform: rotate(115deg);
  display: inline-block;
  position: absolute;
  font-size: .8em;
  right: 48%;
  margin-right: -13px !important;
  top: 21%;
}
.about-h1-size{
  font-size: 2.5em;
}
.van {
  margin-top: -12em; 
  min-width: 489px; 
  
  }

  .appointment {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.57), rgba(0, 0, 0, .23)), url(../img/appointment.webp) left center no-repeat;
    background-size: cover;
    height: 123vh;
  }

  .check-a-trade-logo1{
    width: 8em;
  }

  .swiper-pagination {
    position: absolute;
    bottom: 60px !important ; /* Adjust the distance from the bottom as needed */
  }
  .swiper-pagination .swiper-pagination-bullet {
    background-color: #FF8E48; /* Change to the color you desire */
  }
  
  
  .swiper{
  overflow: visible !important;
  }
  .projects{
    margin-bottom: 3em;
  }

  .testimonial-section{
    margin-top: 3em;
    margin-bottom: .1em !important;
  }

  .slant {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-bottom: -11.3em;
    height: 720px; /* Adjust the height as needed */
    clip-path: polygon(50% 68.13%, 99.75% 75%, 0.25% 75%);
    background-color: #ffffff;
    z-index: 2; /* Ensure it's above the carousel */
  }

  
  .swiper-pagination {
    position: absolute;
    bottom: 60px !important ; /* Adjust the distance from the bottom as needed */
  }
  .swiper-pagination .swiper-pagination-bullet {
    background-color: #FF8E48; /* Change to the color you desire */
  }
  
  
  .swiper{
  overflow: visible !important;
  }
  .projects{
    margin-bottom: 3em;
  }

  .testimonial-section{
    margin-top: 2em;
    margin-bottom: -2em !important;
  }

  
  .font-type-contact{
    font-weight: 700;
    font-size: 2.15em;
text-transform: uppercase;
  } 

  .font-type-contact{
    font-weight: 700;
    font-size: 2.15em;
text-transform: uppercase;
  } 

  .navbar .navbar-nav .nav-link {
    margin-right: 1px;
    padding: 5px 10px 0px 0 !important;
  color: #cdcdcd;
  font-size: 18px;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */
  outline: none;
  font-weight: 300; 

  }
  .navbar .navbar-nav .nav-link2 {
    margin-right: 1px;
  color: #cdcdcd;
  padding: 5px 10px 10px 0 !important;

  font-size: 18px !important;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */
  outline: none;
  font-weight: 300; 

  }
  .about-padding{
    padding-left: 3em  !important;
    padding-right: 3em ;
  }
  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link.active {
  color: #FF8E48;
  }
  .navbar .navbar-nav .nav-link2:hover,
  .navbar .navbar-nav .nav-link2.active {
  color: #FF8E48;
  }

  .navbar-nav{
    margin-left: .35em !important;
  }
  .navbar-mr{
    margin-top: -1.3em !important;
    margin-left: 1.3em !important;
  }
  .dropdown-toggle::after {
    margin-left: 15px; /* Adjust the value as needed */
}

.page-header {
  height: 260px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url(../img/page-header.jpg) center center no-repeat;
  background-size: cover;
}
.breadcrumb{
  text-align: center !important;
margin-left: 35%
}
}

.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23BCBCBC' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
color: #000000 !important;
border-color: none !important;
}



@media (max-width: 767px) {

.testimonial-section h3{
text-align: center;
}
.testimonial-section h6{
text-align: center;
}
.testimonial-section h5{
margin-left: 0em;}
.star{
margin-left: -0em;}
.testimonial-top{
text-align: center;
}
.testimonial-top p{
text-align: center;
margin-bottom: 3em;
color: #000;
font-weight: 500;
font-size: 1.2em;

}
.user{
display: none !important;
}
} 
.check-a-trade-logo1{
width: 8em;
}


@media (min-width: 768px){
.slant{
  display: none;
}


}
.navbar-nav{
margin-left: 8.5em;
}
.navbar-mr{
margin-right: -7em;

}  
.navbar-nav .dropdown-toggle::after {
margin-left: 10px; /* Adjust the value as needed */
}


.about-padding{
padding-left: 8em ;
}

.phone-icon2 {
transform: rotate(110deg);
margin-left: 7.5px;
margin-right: 3.5px;
}
/* Style for logo container and navbar */

/* Style for page header */
.page-header {
  position: relative;
  z-index: 3;
}

@media (min-width: 1070px) and (max-width: 1100px){
.carousel-text{
  font-weight: 600;
   text-transform: uppercase;
    color: #000000    ;
    text-align: left;
    font-size: 3.5em;
}
.carousel-description {
  font-size: 14px;
  color: #000000; /* Adjust text color if needed */
  margin-top: 0px; /* Adjust top margin as needed */
  text-align: left !important;
  letter-spacing: 1px; /* Adjust the value as needed */
  margin-left: -.01em !important;

}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 1em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 3em;
border-radius: 5.21em;
border: 1px solid #0c0b11 ;

font-size: 19.7px;
font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}

.btn-carousel-2 {
display: none;
}

.btn-carousel-2:hover {
display: none;
}
.carounsel-header1{
color: #FF8E48;
font-style: italic;
font-size: 1em;
}
.carousel-logo1{
width: 12em;
margin-bottom: -1em;height: 1.5em !important; 
margin-top: 1em;
}
.carousel-caption {
top: -6%;
left: -53%;
text-align: left;
right: 0;
bottom: 0;
z-index: 1;
}
.btn-colour-nav {
position: relative;
background: #FF8E48;
border: 1px solid #fff;
color: #fff;
white-space: nowrap; /* Prevent text from breaking */
margin-right: -3em;

text-transform: uppercase;
padding: .5em 1.5em;
border-radius: 5.21em;
font-size: 13px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
}

.contact-info {
display: flex; /* Ensure the text and icons stay on the same line */
align-items: center;
}
.left-content{
margin-bottom: 4em;
font-size: 17px;
color: #ffff;
padding-left: 1.2em;
letter-spacing: .2px; /* Adjust the value as needed */

}
.phone-number2{
text-decoration: underline ;
font-weight: 500 !important;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 17px;

}
.email{
font-weight: 500;
font-size: 18px;
letter-spacing: .5px; /* Adjust the value as needed */

}
.phone-icon2{
margin: 0 10px;
}

.right-content{
margin-bottom: 4em;
font-size: 17px;
letter-spacing: .2px; /* Adjust the value as needed */

padding-right: 5em;
color: #ffff;
}
.mail{
margin-left: 7px;
margin-right: 7px;
}

.contact-info span {
margin-right: 10px; /* Add spacing between icon and text */

}
.social-icon {
position: absolute;
right: 3%;
}

.social-icon:first-child {
margin-right: 10px; /* Add margin between the icons */
}

.social-icon2 {
position: absolute;
right: 4.5%;
}

.social-icon2:first-child {
margin-right: 10px; /* Add margin between the icons */
}
.navbar .navbar-nav .nav-link {
margin-right: 29px;
padding: 2px 0px 2px 0;
color: #cdcdcd;
font-size: 17px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */

outline: none;
font-weight: 300; 

}
.navbar .navbar-nav .nav-link2 {
margin-right: 31px;
padding: 25px 0px 20px 0;
color: #cdcdcd;
margin-top: 0em;
font-family: "Kanit", sans-serif;
font-weight: 500; 
font-style: italic;
font-size: 17px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */
margin-top: 0em;
outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #FF8E48;
}
.navbar .navbar-nav .nav-link2:hover,
.navbar .navbar-nav .nav-link2.active {
color: #FF8E48;

}
.navbar-nav{
margin-left: 3.5em;
}
.navbar-mr{
margin-right: -9em;

}  
.navbar-brand {
padding-left: 1em;
}
.navbar-nav .dropdown-toggle::after {
  margin-left: 2px; /* Adjust the value as needed */
}
.logo{
  width: 8.4em ;
  position: sticky;
  z-index: 10000;
}
.logo-container {
  margin-bottom: -140px; /* Negative margin to pull it up */
}

.logo-container {
  position: relative;
  top: -0px; /* Adjust this value as needed */
  display: flex;
  height: 175px;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  position: relative;
  top: -20px; /* Adjust this value as needed */
  display: flex;
  
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about-h1-size{
  font-size: 2.5em;
}
.service{
  margin-top: 5em;
}
.swiper-pagination {
position: absolute;
bottom: -0px !important ; /* Adjust the distance from the bottom as needed */
}
.swiper-pagination .swiper-pagination-bullet {
background-color: #FF8E48; /* Change to the color you desire */
}


.swiper{
overflow: visible !important;
}
}
@media (min-width: 1100px) and (max-width: 1150px){
.carousel-text{
  font-weight: 600;
   text-transform: uppercase;
    color: #000000    ;
    text-align: left;
    font-size: 3em;
}
.carousel-description {
  font-size: 14px;
  color: #000000; /* Adjust text color if needed */
  margin-top: 0px; /* Adjust top margin as needed */
  text-align: left !important;
  letter-spacing: 1px; /* Adjust the value as needed */
  margin-left: -.01em !important;

}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 1em;
border-radius: 5.21em;
font-size: 15.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 3em;
border-radius: 5.21em;
border: 1px solid #0c0b11 ;

font-size: 19.7px;
font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}

.btn-carousel-2 {
display: none;
}

.btn-carousel-2:hover {
display: none;
}
.carounsel-header1{
color: #FF8E48;
font-style: italic;
font-size: 1em;
}
.carousel-logo1{
width: 12em;
margin-bottom: -1em;height: 1.5em !important; 
margin-top: 1em;
}
.carousel-caption {
top: -6%;
left: -53%;
text-align: left;
right: 0;
bottom: 0;
z-index: 1;
}
.btn-colour-nav {
position: relative;
background: #FF8E48;
border: 1px solid #fff;
color: #fff;
white-space: nowrap; /* Prevent text from breaking */
margin-right: -3em;

text-transform: uppercase;
padding: .5em 1.5em;
border-radius: 5.21em;
font-size: 13px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
}

.contact-info {
display: flex; /* Ensure the text and icons stay on the same line */
align-items: center;
}
.left-content{
margin-bottom: 4em;
font-size: 17px;
color: #ffff;
padding-left: 1.2em;
letter-spacing: .2px; /* Adjust the value as needed */

}
.phone-number2{
text-decoration: underline ;
font-weight: 500 !important;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 17px;

}
.email{
font-weight: 500;
font-size: 18px;
letter-spacing: .5px; /* Adjust the value as needed */

}
.phone-icon2{
margin: 0 10px;
}

.right-content{
margin-bottom: 4em;
font-size: 17px;
letter-spacing: .2px; /* Adjust the value as needed */

padding-right: 5em;
color: #ffff;
}
.mail{
margin-left: 7px;
margin-right: 7px;
}

.contact-info span {
margin-right: 10px; /* Add spacing between icon and text */

}
.social-icon {
position: absolute;
right: 3%;
}

.social-icon:first-child {
margin-right: 10px; /* Add margin between the icons */
}

.social-icon2 {
position: absolute;
right: 4.5%;
}

.social-icon2:first-child {
margin-right: 10px; /* Add margin between the icons */
}
.navbar .navbar-nav .nav-link {
margin-right: 29px;
padding: 2px 0px 2px 0;
color: #cdcdcd;
font-size: 17px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */

outline: none;
font-weight: 300; 

}
.navbar .navbar-nav .nav-link2 {
margin-right: 31px;
padding: 25px 0px 20px 0;
color: #cdcdcd;
margin-top: 0em;
font-family: "Kanit", sans-serif;
font-weight: 500; 
font-style: italic;
font-size: 17px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */
margin-top: 0em;
outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #FF8E48;
}
.navbar .navbar-nav .nav-link2:hover,
.navbar .navbar-nav .nav-link2.active {
color: #FF8E48;

}
.navbar-nav{
margin-left: 2.74em;
}
.navbar-mr{
margin-right: -9em;

}  
.navbar-brand {
padding-left: 1em;
}
.navbar-nav .dropdown-toggle::after {
  margin-left: 2px; /* Adjust the value as needed */
}
.logo{
  width: 8.4em ;
  position: sticky;
  z-index: 10000;
}
.logo-container {
  margin-bottom: -140px; /* Negative margin to pull it up */
}

.logo-container {
  position: relative;
  top: -0px; /* Adjust this value as needed */
  display: flex;
  height: 175px;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  position: relative;
  top: -20px; /* Adjust this value as needed */
  display: flex;
  
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about-h1-size{
  font-size: 2.5em;
}
.service{
  margin-top: 5em;
}
.swiper-pagination {
position: absolute;
bottom: -0px !important ; /* Adjust the distance from the bottom as needed */
}
.swiper-pagination .swiper-pagination-bullet {
background-color: #FF8E48; /* Change to the color you desire */
}


.swiper{
overflow: visible !important;
}
}
@media (min-width: 1151px) and (max-width: 1200px){
.carousel-text{
  font-weight: 600;
   text-transform: uppercase;
    color: #000000    ;
    text-align: left;
    font-size: 3em;
}
.carousel-description {
  font-size: 14px;
  color: #000000; /* Adjust text color if needed */
  margin-top: 0px; /* Adjust top margin as needed */
  text-align: left !important;
  letter-spacing: 1px; /* Adjust the value as needed */
  margin-left: -.01em !important;

}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 1.5em;
border-radius: 5.21em;
font-size: 15.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 3em;
border-radius: 5.21em;
border: 1px solid #0c0b11 ;

font-size: 19.7px;
font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}

.btn-carousel-2 {
display: none;
}

.btn-carousel-2:hover {
display: none;
}
.carounsel-header1{
color: #FF8E48;
font-style: italic;
font-size: 1em;
}
.carousel-logo1{
width: 12em;
margin-bottom: -1em;height: 1.5em !important; 
margin-top: 1em;
}
.carousel-caption {
top: -6%;
left: -53%;
text-align: left;
right: 0;
bottom: 0;
z-index: 1;
}
.btn-colour-nav {
position: relative;
background: #FF8E48;
border: 1px solid #fff;
color: #fff;
white-space: nowrap; /* Prevent text from breaking */
margin-right: -3em;

text-transform: uppercase;
padding: .5em 1.5em;
border-radius: 5.21em;
font-size: 15px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
}

.contact-info {
display: flex; /* Ensure the text and icons stay on the same line */
align-items: center;
}
.left-content{
margin-bottom: 4em;
font-size: 17px;
color: #ffff;
padding-left: 1.2em;
letter-spacing: .2px; /* Adjust the value as needed */

}
.phone-number2{
text-decoration: underline ;
font-weight: 500 !important;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 17px;

}
.email{
font-weight: 500;
font-size: 18px;
letter-spacing: .5px; /* Adjust the value as needed */

}
.phone-icon2{
margin: 0 10px;
}

.right-content{
margin-bottom: 4em;
font-size: 17px;
letter-spacing: .2px; /* Adjust the value as needed */

padding-right: 5em;
color: #ffff;
}
.mail{
margin-left: 7px;
margin-right: 7px;
}

.contact-info span {
margin-right: 10px; /* Add spacing between icon and text */

}
.social-icon {
position: absolute;
right: 3%;
}

.social-icon:first-child {
margin-right: 10px; /* Add margin between the icons */
}

.social-icon2 {
position: absolute;
right: 4.5%;
}

.social-icon2:first-child {
margin-right: 10px; /* Add margin between the icons */
}
.navbar .navbar-nav .nav-link {
margin-right: 29px;
padding: 2px 0px 2px 0;
color: #cdcdcd;
font-size: 17px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */

outline: none;
font-weight: 300; 

}
.navbar .navbar-nav .nav-link2 {
margin-right: 31px;
padding: 25px 0px 20px 0;
color: #cdcdcd;
margin-top: 0em;
font-family: "Kanit", sans-serif;
font-weight: 500; 
font-style: italic;
font-size: 17px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */
margin-top: 0em;
outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #FF8E48;
}
.navbar .navbar-nav .nav-link2:hover,
.navbar .navbar-nav .nav-link2.active {
color: #FF8E48;

}
.navbar-nav{
margin-left: 3.4em;
}
.navbar-mr{
margin-right: -9em;

}  
.navbar-brand {
padding-left: 0em;
}
.navbar-nav .dropdown-toggle::after {
  margin-left: 2px; /* Adjust the value as needed */
}
.logo{
  width: 8.4em ;
  position: sticky;
  z-index: 10000;
}
.logo-container {
  margin-bottom: -140px; /* Negative margin to pull it up */
}

.logo-container {
  position: relative;
  top: -0px; /* Adjust this value as needed */
  display: flex;
  height: 175px;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  position: relative;
  top: -20px; /* Adjust this value as needed */
  display: flex;
  
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about-h1-size{
  font-size: 2.5em;
}
.service{
  margin-top: 5em;
}
.swiper-pagination {
position: absolute;
bottom: -0px !important ; /* Adjust the distance from the bottom as needed */
}
.swiper-pagination .swiper-pagination-bullet {
background-color: #FF8E48; /* Change to the color you desire */
}


.swiper{
overflow: visible !important;
}
}
@media (min-width: 1201px) and (max-width: 1295px){
.carousel-text{
  font-weight: 600;
   text-transform: uppercase;
    color: #000000    ;
    text-align: left;
    font-size: 3.75em;
}
.carousel-description {
  font-size: 17px;
  color: #000000; /* Adjust text color if needed */
  margin-top: 0px; /* Adjust top margin as needed */
  text-align: left !important;
  letter-spacing: .5px; /* Adjust the value as needed */
  margin-left: -.01em !important;

}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 1em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 3em;
border-radius: 5.21em;
border: 1px solid #0c0b11 ;

font-size: 19.7px;
font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}

.btn-carousel-2 {
display: none;
}

.btn-carousel-2:hover {
display: none;
}
.carounsel-header1{
color: #FF8E48;
font-style: italic;
font-size: 1.3em;
}
.carousel-logo1{
width: 15em;
margin-bottom: -1em;height: auto !important; 
margin-top: 0em;
}
.carousel-caption {
top: -6%;
left: -53%;
text-align: left;
right: 0;
bottom: 0;
z-index: 1;
}
.btn-colour-nav {
position: relative;
background: #FF8E48;
border: 1px solid #fff;
color: #fff;
white-space: nowrap; /* Prevent text from breaking */
margin-right: -2.1em;

text-transform: uppercase;
padding: .45em 1.5em;
border-radius: 5.21em;
font-size: 17px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 2em;
margin-bottom: -2em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 2em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
border: 1px solid #0c0b11 ;

font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}
.contact-info {
display: flex; /* Ensure the text and icons stay on the same line */
align-items: center;
}
.left-content{
margin-bottom: 3.65em;
font-size: 19px;
color: #ffff;
padding-left: 1.2em;
letter-spacing: .2px; /* Adjust the value as needed */

}
.phone-number2{
text-decoration: underline ;
font-weight: 500 !important;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 19px;

}
.email{
font-weight: 500;
font-size: 19px;
letter-spacing: .5px; /* Adjust the value as needed */

}
.phone-icon2{
margin: 0 10px;
}

.right-content{
margin-bottom: 3.65em;
font-size: 19px;
letter-spacing: .2px; /* Adjust the value as needed */

padding-right: 5em;
color: #ffff;
}
.mail{
margin-left: 7px;
margin-right: 7px;
}

.contact-info span {
margin-right: 10px; /* Add spacing between icon and text */

}
.social-icon {
position: absolute;
right: 3%;
}

.social-icon:first-child {
margin-right: 10px; /* Add margin between the icons */
}

.social-icon2 {
position: absolute;
right: 4.5%;
}

.social-icon2:first-child {
margin-right: 10px; /* Add margin between the icons */
}
.navbar .navbar-nav .nav-link {
margin-right: 35px;
padding: 2px 0px 2px 0;
color: #cdcdcd;
font-size: 18px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */

outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link2 {
margin-right: 31px;
padding: 25px 0px 20px 0;
color: #cdcdcd;
margin-top: 0em;
font-weight: 500; 
font-size: 18px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */
margin-top: 0em;
outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #FF8E48;
}
.navbar .navbar-nav .nav-link2:hover,
.navbar .navbar-nav .nav-link2.active {
color: #FF8E48;

}
.navbar-nav{
margin-left: 4em;
}
.navbar-mr{
margin-right: -8.75em;

}  
.navbar-brand {
padding-left: 0em;
}
.navbar-nav .dropdown-toggle::after {
  margin-left: 2px; /* Adjust the value as needed */
}
.logo{
  width: 9.4em ;
  position: sticky;
  z-index: 10000;
}
.logo-container {
  margin-bottom: -140px; /* Negative margin to pull it up */
}

.logo-container {
  position: relative;
  top: -0px; /* Adjust this value as needed */
  display: flex;
  height: 175px;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  position: relative;
  top: -20px; /* Adjust this value as needed */
  display: flex;
  
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about-h1-size{
  font-size: 2.5em;
}
.service{
  margin-top: 5em;
}
.swiper-pagination {
position: absolute;
bottom: -0px !important ; /* Adjust the distance from the bottom as needed */
}
.swiper-pagination .swiper-pagination-bullet {
background-color: #FF8E48; /* Change to the color you desire */
}


.swiper{
overflow: visible !important;
}
}
@media (min-width: 1295px) and (max-width: 1400px){
.carousel-text{
  font-weight: 600;
   text-transform: uppercase;
    color: #000000    ;
    text-align: left;
    font-size: 3.75em;
}
.carousel-description {
  font-size: 17px;
  color: #000000; /* Adjust text color if needed */
  margin-top: 0px; /* Adjust top margin as needed */
  text-align: left !important;
  letter-spacing: .5px; /* Adjust the value as needed */
  margin-left: -.01em !important;

}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 1em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 3em;
border-radius: 5.21em;
border: 1px solid #0c0b11 ;

font-size: 19.7px;
font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}

.btn-carousel-2 {
display: none;
}

.btn-carousel-2:hover {
display: none;
}
.carounsel-header1{
color: #FF8E48;
font-style: italic;
font-size: 1.3em;
}
.carousel-logo1{
width: 15em;
margin-bottom: -1em;height: auto !important; 
margin-top: 0em;
}
.carousel-caption {
top: -6%;
left: -53%;
text-align: left;
right: 0;
bottom: 0;
z-index: 1;
}
.btn-colour-nav {
position: relative;
background: #FF8E48;
border: 1px solid #fff;
color: #fff;
white-space: nowrap; /* Prevent text from breaking */
margin-right: -2.1em;

text-transform: uppercase;
padding: .45em 1.5em;
border-radius: 5.21em;
font-size: 17px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 2em;
margin-bottom: -2em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 2em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
border: 1px solid #0c0b11 ;

font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}
.contact-info {
display: flex; /* Ensure the text and icons stay on the same line */
align-items: center;
}
.left-content{
margin-bottom: 3.65em;
font-size: 19px;
color: #ffff;
padding-left: 1.2em;
letter-spacing: .2px; /* Adjust the value as needed */

}
.phone-number2{
text-decoration: underline ;
font-weight: 500 !important;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 19px;

}
.email{
font-weight: 500;
font-size: 19px;
letter-spacing: .5px; /* Adjust the value as needed */

}
.phone-icon2{
margin: 0 10px;
}

.right-content{
margin-bottom: 3.65em;
font-size: 19px;
letter-spacing: .2px; /* Adjust the value as needed */

padding-right: 5em;
color: #ffff;
}
.mail{
margin-left: 7px;
margin-right: 7px;
}

.contact-info span {
margin-right: 10px; /* Add spacing between icon and text */

}
.social-icon {
position: absolute;
right: 3%;
}

.social-icon:first-child {
margin-right: 10px; /* Add margin between the icons */
}

.social-icon2 {
position: absolute;
right: 4.5%;
}

.social-icon2:first-child {
margin-right: 10px; /* Add margin between the icons */
}
.navbar .navbar-nav .nav-link {
margin-right: 35px;
padding: 2px 0px 2px 0;
color: #cdcdcd;
font-size: 20px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */

outline: none;
font-weight: 300; 

}
.navbar .navbar-nav .nav-link2 {
margin-right: 31px;
padding: 25px 0px 20px 0;
color: #cdcdcd;
margin-top: 0em;
font-weight: 500; 
font-size: 20px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */
margin-top: 0em;
outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #FF8E48;
}
.navbar .navbar-nav .nav-link2:hover,
.navbar .navbar-nav .nav-link2.active {
color: #FF8E48;

}
.navbar-nav{
margin-left: 4em;
}
.navbar-mr{
margin-right: -8.75em;

}  
.navbar-brand {
padding-left: 0em;
}
.navbar-nav .dropdown-toggle::after {
  margin-left: 2px; /* Adjust the value as needed */
}
.logo{
  width: 8.4em ;
  position: sticky;
  z-index: 10000;
}
.logo-container {
  margin-bottom: -140px; /* Negative margin to pull it up */
}

.logo-container {
  position: relative;
  top: -0px; /* Adjust this value as needed */
  display: flex;
  height: 175px;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  position: relative;
  top: -20px; /* Adjust this value as needed */
  display: flex;
  
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about-h1-size{
  font-size: 2.5em;
}
.service{
  margin-top: 5em;
}
.swiper-pagination {
position: absolute;
bottom: -0px !important ; /* Adjust the distance from the bottom as needed */
}
.swiper-pagination .swiper-pagination-bullet {
background-color: #FF8E48; /* Change to the color you desire */
}


.swiper{
overflow: visible !important;
}
}
@media (min-width: 1401px) and (max-width: 1500px){
.carousel-text{
  font-weight: 600;
   text-transform: uppercase;
    color: #000000    ;
    text-align: left;
    font-size: 4em;
}
.carousel-description {
  font-size: 17px;
  color: #000000; /* Adjust text color if needed */
  margin-top: 0px; /* Adjust top margin as needed */
  text-align: left !important;
  letter-spacing: .5px; /* Adjust the value as needed */
  margin-left: -.01em !important;

}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 1em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 3em;
border-radius: 5.21em;
border: 1px solid #0c0b11 ;

font-size: 19.7px;
font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}

.btn-carousel-2 {
display: none;
}

.btn-carousel-2:hover {
display: none;
}
.carounsel-header1{
color: #FF8E48;
font-style: italic;
font-size: 1.3em;
}
.carousel-logo1{
width: 15em;
margin-bottom: -1em;height: auto !important; 
margin-top: 0em;
}
.carousel-caption {
top: -6%;
left: -53%;
text-align: left;
right: 0;
bottom: 0;
z-index: 1;
}
.btn-colour-nav {
position: relative;
background: #FF8E48;
border: 1px solid #fff;
color: #fff;
white-space: nowrap; /* Prevent text from breaking */
margin-right: -2.1em;

text-transform: uppercase;
padding: .45em 1.5em;
border-radius: 5.21em;
font-size: 18px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 2em;
margin-bottom: -2em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 2em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
border: 1px solid #0c0b11 ;

font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}
.contact-info {
display: flex; /* Ensure the text and icons stay on the same line */
align-items: center;
}
.left-content{
margin-bottom: 3.65em;
font-size: 19px;
color: #ffff;
padding-left: 1.2em;
letter-spacing: .2px; /* Adjust the value as needed */

}
.phone-number2{
text-decoration: underline ;
font-weight: 500 !important;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 19px;

}
.email{
font-weight: 500;
font-size: 19px;
letter-spacing: .5px; /* Adjust the value as needed */

}
.phone-icon2{
margin: 0 10px;
}

.right-content{
margin-bottom: 3.65em;
font-size: 19px;
letter-spacing: .2px; /* Adjust the value as needed */

padding-right: 5em;
color: #ffff;
}
.mail{
margin-left: 7px;
margin-right: 7px;
}

.contact-info span {
margin-right: 10px; /* Add spacing between icon and text */

}
.social-icon {
position: absolute;
right: 3%;
}

.social-icon:first-child {
margin-right: 10px; /* Add margin between the icons */
}

.social-icon2 {
position: absolute;
right: 4.5%;
}

.social-icon2:first-child {
margin-right: 10px; /* Add margin between the icons */
}
.navbar .navbar-nav .nav-link {
margin-right: 35px;
padding: 2px 0px 2px 0;
color: #cdcdcd;
font-size: 20px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */

outline: none;
font-weight: 300; 

}
.navbar .navbar-nav .nav-link2 {
margin-right: 31px;
padding: 25px 0px 20px 0;
color: #cdcdcd;
margin-top: 0em;
font-weight: 500; 
font-size: 20px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */
margin-top: 0em;
outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #FF8E48;
}
.navbar .navbar-nav .nav-link2:hover,
.navbar .navbar-nav .nav-link2.active {
color: #FF8E48;

}
.navbar-nav{
margin-left: 4.9em;
}
.navbar-mr{
margin-right: -11.75em;

}  
.navbar-brand {
padding-left: 0em;
}
.navbar-nav .dropdown-toggle::after {
  margin-left: 2px; /* Adjust the value as needed */
}
.logo{
  width: 9.8em ;
  position: sticky;
  z-index: 10000;
}
.logo-container {
  margin-bottom: -140px; /* Negative margin to pull it up */
}

.logo-container {
  position: relative;
  top: -0px; /* Adjust this value as needed */
  display: flex;
  height: 175px;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  position: relative;
  top: -20px; /* Adjust this value as needed */
  display: flex;
  
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about-h1-size{
  font-size: 2.5em;
}
.service{
  margin-top: 5em;
}
.swiper-pagination {
position: absolute;
bottom: -0px !important ; /* Adjust the distance from the bottom as needed */
}
.swiper-pagination .swiper-pagination-bullet {
background-color: #FF8E48; /* Change to the color you desire */
}


.swiper{
overflow: visible !important;
}
}
@media (min-width: 1501px) and (max-width: 1599px){
.carousel-text{
  font-weight: 600;
   text-transform: uppercase;
    color: #000000    ;
    text-align: left;
    font-size: 4.3em;
}
.carousel-description {
  font-size: 18px;
  color: #000000; /* Adjust text color if needed */
  margin-top: 0px; /* Adjust top margin as needed */
  text-align: left !important;
  letter-spacing: .5px; /* Adjust the value as needed */
  margin-left: -.01em !important;

}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 1em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 3em;
border-radius: 5.21em;
border: 1px solid #0c0b11 ;

font-size: 19.7px;
font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}

.btn-carousel-2 {
display: none;
}

.btn-carousel-2:hover {
display: none;
}
.carounsel-header1{
color: #FF8E48;
font-style: italic;
font-size: 1.3em;
}
.carousel-logo1{
width: 15em;
margin-bottom: -1em;height: auto !important; 
margin-top: 0em;
}
.carousel-caption {
top: -6%;
left: -53%;
text-align: left;
right: 0;
bottom: 0;
z-index: 1;
}
.btn-colour-nav {
position: relative;
background: #FF8E48;
border: 1px solid #fff;
color: #fff;
white-space: nowrap; /* Prevent text from breaking */
margin-right: -2.1em;

text-transform: uppercase;
padding: .45em 1.5em;
border-radius: 5.21em;
font-size: 19px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 2em;
margin-bottom: -2em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 2em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
border: 1px solid #0c0b11 ;

font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}
.contact-info {
display: flex; /* Ensure the text and icons stay on the same line */
align-items: center;
}
.left-content{
margin-bottom: 3.45em;
font-size: 21px;
color: #ffff;
padding-left: 1.2em;
letter-spacing: .2px; /* Adjust the value as needed */

}
.phone-number2{
text-decoration: underline ;
font-weight: 500 !important;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 22px;

}
.email{
font-weight: 500;
font-size: 22px;
letter-spacing: .5px; /* Adjust the value as needed */

}
.phone-icon2{
margin: 0 10px;
}

.right-content{
margin-bottom: 3.65em;
font-size: 21px;
letter-spacing: .2px; /* Adjust the value as needed */

padding-right: 5em;
color: #ffff;
}
.mail{
margin-left: 7px;
margin-right: 7px;
}

.contact-info span {
margin-right: 10px; /* Add spacing between icon and text */

}
.social-icon {
position: absolute;
right: 3%;
}

.social-icon:first-child {
margin-right: 10px; /* Add margin between the icons */
}

.social-icon2 {
position: absolute;
right: 4.5%;
}

.social-icon2:first-child {
margin-right: 10px; /* Add margin between the icons */
}
.navbar .navbar-nav .nav-link {
margin-right: 35px;
padding: 2px 0px 2px 0;
color: #cdcdcd;
font-size: 21px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */

outline: none;
font-weight: 300; 

}
.navbar .navbar-nav .nav-link2 {
margin-right: 31px;
padding: 25px 0px 20px 0;
color: #cdcdcd;
margin-top: 0em;
font-weight: 500; 
font-size: 21px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */
margin-top: 0em;
outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #FF8E48;
}
.navbar .navbar-nav .nav-link2:hover,
.navbar .navbar-nav .nav-link2.active {
color: #FF8E48;

}
.navbar-nav{
margin-left: 4.9em;
}
.navbar-mr{
margin-right: -11.75em;

}  
.navbar-brand {
padding-left: 0em;
margin-right: 2em;
}
.navbar-nav .dropdown-toggle::after {
  margin-left: 2px; /* Adjust the value as needed */
}
.logo{
  width: 9.8em ;
  position: sticky;
  z-index: 10000;
}
.logo-container {
  margin-bottom: -140px; /* Negative margin to pull it up */
}

.logo-container {
  position: relative;
  top: -0px; /* Adjust this value as needed */
  display: flex;
  height: 175px;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  position: relative;
  top: -20px; /* Adjust this value as needed */
  display: flex;
  
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about-h1-size{
  font-size: 2.5em;
}
.service{
  margin-top: 5em;
}
.swiper-pagination {
position: absolute;
bottom: -0px !important ; /* Adjust the distance from the bottom as needed */
}
.swiper-pagination .swiper-pagination-bullet {
background-color: #FF8E48; /* Change to the color you desire */
}


.swiper{
overflow: visible !important;
}
}
@media (min-width: 1600px) and (max-width: 1699px){
.carousel-text{
  font-weight: 600;
   text-transform: uppercase;
    color: #000000    ;
    text-align: left;
    font-size: 4.7em;
}
.carousel-description {
  font-size: 18px;
  color: #000000; /* Adjust text color if needed */
  margin-top: 0px; /* Adjust top margin as needed */
  text-align: left !important;
  letter-spacing: .5px; /* Adjust the value as needed */
  margin-left: -.01em !important;

}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 1em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 3em;
border-radius: 5.21em;
border: 1px solid #0c0b11 ;

font-size: 19.7px;
font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}

.btn-carousel-2 {
display: none;
}

.btn-carousel-2:hover {
display: none;
}
.carounsel-header1{
color: #FF8E48;
font-style: italic;
font-size: 1.3em;
}
.carousel-logo1{
width: 15em;
margin-bottom: -1em;height: auto !important; 
margin-top: 0em;
}
.carousel-caption {
top: -6%;
left: -53%;
text-align: left;
right: 0;
bottom: 0;
z-index: 1;
}
.btn-colour-nav {
position: relative;
background: #FF8E48;
border: 1px solid #fff;
color: #fff;
white-space: nowrap; /* Prevent text from breaking */
margin-right: -1.1em;

text-transform: uppercase;
padding: .45em 1.5em;
border-radius: 5.21em;
font-size: 19px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 2em;
margin-bottom: -2em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 2em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
border: 1px solid #0c0b11 ;

font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}
.contact-info {
display: flex; /* Ensure the text and icons stay on the same line */
align-items: center;
}
.left-content{
margin-bottom: 3.9em;
font-size: 21px;
color: #ffff;
padding-left: 1.2em;
letter-spacing: .2px; /* Adjust the value as needed */

}
.phone-number2{
text-decoration: underline ;
font-weight: 500 !important;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 22px;

}
.email{
font-weight: 500;
font-size: 22px;
letter-spacing: .5px; /* Adjust the value as needed */

}
.phone-icon2{
margin: 0 10px;
}

.right-content{
margin-bottom: 3.9em;
font-size: 21px;
letter-spacing: .2px; /* Adjust the value as needed */

padding-right: 5em;
color: #ffff;
}
.mail{
margin-left: 7px;
margin-right: 7px;
}

.contact-info span {
margin-right: 10px; /* Add spacing between icon and text */

}
.social-icon {
position: absolute;
right: 3%;
}

.social-icon:first-child {
margin-right: 10px; /* Add margin between the icons */
}

.social-icon2 {
position: absolute;
right: 4.5%;
}

.social-icon2:first-child {
margin-right: 10px; /* Add margin between the icons */
}
.navbar .navbar-nav .nav-link {
margin-right: 41px;
padding: 2px 0px 2px 0;
color: #cdcdcd;
font-size: 22px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */

outline: none;
font-weight: 300; 

}
.navbar .navbar-nav .nav-link2 {
margin-right: 49px;
padding: 25px 0px 20px 0;
color: #cdcdcd;
margin-top: 0em;
font-weight: 500; 
font-size: 22px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */
margin-top: 0em;
outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #FF8E48;
}
.navbar .navbar-nav .nav-link2:hover,
.navbar .navbar-nav .nav-link2.active {
color: #FF8E48;

}
.navbar-nav{
margin-left: 4.9em;
}
.navbar-mr{
margin-right: -11.75em;

}  
.navbar-brand {
padding-left: 0em;
margin-right: 2em;
}
.navbar-nav .dropdown-toggle::after {
  margin-left: 2px; /* Adjust the value as needed */
}
.logo{
  width: 9.8em ;
  position: sticky;
  z-index: 10000;
}
.logo-container {
  margin-bottom: -140px; /* Negative margin to pull it up */
}

.logo-container {
  position: relative;
  top: -0px; /* Adjust this value as needed */
  display: flex;
  height: 175px;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  position: relative;
  top: -15px; /* Adjust this value as needed */
  display: flex;
  
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about-h1-size{
  font-size: 2.5em;
}
.service{
  margin-top: 3em !important;
}
.swiper-pagination {
position: absolute;
bottom: -0px !important ; /* Adjust the distance from the bottom as needed */
}
.swiper-pagination .swiper-pagination-bullet {
background-color: #FF8E48; /* Change to the color you desire */
}


.swiper{
overflow: visible !important;
}}
@media (min-width: 1700px) and (max-width: 1800px){
.carousel-text{
  font-weight: 600;
   text-transform: uppercase;
    color: #000000    ;
    text-align: left;
    font-size: 5.2em;
}
.carousel-description {
  font-size: 18px;
  color: #000000; /* Adjust text color if needed */
  margin-top: 0px; /* Adjust top margin as needed */
  text-align: left !important;
  letter-spacing: .5px; /* Adjust the value as needed */
  margin-left: -.01em !important;

}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .75em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 1em;
border-radius: 5.21em;
font-size: 19.7px !important;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 3em;
border-radius: 5.21em;
border: 1px solid #0c0b11 ;

font-size: 19.7px;
font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}

.btn-carousel-2 {
display: none;
}

.btn-carousel-2:hover {
display: none;
}
.carounsel-header1{
color: #FF8E48;
font-style: italic;
font-size: 1.3em;
}
.carousel-logo1{
width: 15em;
margin-bottom: -1em;height: auto !important; 
margin-top: 0em;
}
.carousel-caption {
top: -6%;
left: -53%;
text-align: left;
right: 0;
bottom: 0;
z-index: 1;
}
.btn-colour-nav {
position: relative;
background: #FF8E48;
border: 1px solid #fff;
color: #fff;
white-space: nowrap; /* Prevent text from breaking */
margin-right: -.9em;

text-transform: uppercase;
padding: .45em 1.5em;
border-radius: 5.21em;
font-size: 20px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 2em;
margin-bottom: -2em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 2em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
border: 1px solid #0c0b11 ;

font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}
.contact-info {
display: flex; /* Ensure the text and icons stay on the same line */
align-items: center;
}
.left-content{
margin-bottom: 3.9em;
font-size: 21px;
color: #ffff;
padding-left: 1.2em;
letter-spacing: .2px; /* Adjust the value as needed */

}
.phone-number2{
text-decoration: underline ;
font-weight: 500 !important;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 22px;

}
.email{
font-weight: 500;
font-size: 22px;
letter-spacing: .5px; /* Adjust the value as needed */

}
.phone-icon2{
margin: 0 10px;
}

.right-content{
margin-bottom: 3.9em;
font-size: 21px;
letter-spacing: .2px; /* Adjust the value as needed */

padding-right: 5em;
color: #ffff;
}
.mail{
margin-left: 7px;
margin-right: 7px;
}

.contact-info span {
margin-right: 10px; /* Add spacing between icon and text */

}
.social-icon {
position: absolute;
right: 3%;
}

.social-icon:first-child {
margin-right: 10px; /* Add margin between the icons */
}

.social-icon2 {
position: absolute;
right: 4.5%;
}

.social-icon2:first-child {
margin-right: 10px; /* Add margin between the icons */
}
.navbar .navbar-nav .nav-link {
margin-right: 51px;
padding: 2px 0px 2px 0;
color: #cdcdcd;
font-size: 23px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */

outline: none;
font-weight: 300; 

}
.navbar .navbar-nav .nav-link2 {
margin-right: 51px;
padding: 25px 0px 20px 0;
color: #cdcdcd;
margin-top: 0em;
font-weight: 500; 
font-size: 23px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */
margin-top: 0em;
outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #FF8E48;
}
.navbar .navbar-nav .nav-link2:hover,
.navbar .navbar-nav .nav-link2.active {
color: #FF8E48;

}
.navbar-nav{
margin-left: 4.9em;
}
.navbar-mr{
margin-right: -11.75em;

}  
.navbar-brand {
padding-left: 0em;
margin-right: 2em;
}
.navbar-nav .dropdown-toggle::after {
  margin-left: 2px; /* Adjust the value as needed */
}
.logo{
  width: 10em ;
  position: sticky;
  z-index: 10000;
}
.logo-container {
  margin-bottom: -140px; /* Negative margin to pull it up */
}

.logo-container {
  position: relative;
  top: -0px; /* Adjust this value as needed */
  display: flex;
  height: 175px;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  position: relative;
  top: -15px; /* Adjust this value as needed */
  display: flex;
  
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about-h1-size{
  font-size: 2.5em;
}
.service{
  margin-top: 1em !important; 
}
.swiper-pagination {
position: absolute;
bottom: -0px !important ; /* Adjust the distance from the bottom as needed */
}
.swiper-pagination .swiper-pagination-bullet {
background-color: #FF8E48; /* Change to the color you desire */
}


.swiper{
overflow: visible !important;
}
}


@media (min-width: 1800px) and (max-width: 1900px){

.navbar .navbar-brand {
  position: relative;
  padding-right: 30px;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center; /* Center the content horizontally */
  z-index: 1; /* Ensure the logo appears above other elements */
}

.navbar .navbar-brand img.logo {
  width: 10em; /* Adjust the width of the logo as needed */
  position: relative; /* Ensure the logo stays within the navbar */
  top: -20px; /* Adjust the vertical position of the logo */
}
.logo-container {
  margin-bottom: -140px; /* Negative margin to pull it up */
}

.navbar {
  margin-top: -130px; /* Negative margin to pull it up */
  border-top: none; /* Remove the top border if present */
}

.navbar-brand {
padding-left: 2em;
}
.logo-container {
  position: relative;
  top: -20px; /* Adjust this value as needed */
  display: flex;
  height: 200px;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  position: relative;
  top: -20px; /* Adjust this value as needed */
  display: flex;
  
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-info {
  display: flex; /* Ensure the text and icons stay on the same line */
  align-items: center;
}
.left-content{
  margin-bottom: 3em;
  font-size: 22px;
color: #ffff;
padding-left: 4em;
letter-spacing: .2px; /* Adjust the value as needed */

}
.phone-number{
text-decoration: underline ;
font-weight: 500;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 23px;

}
.email{
font-weight: 500;
font-size: 23px;
letter-spacing: .5px; /* Adjust the value as needed */

}
.phone-icon{
  margin: 0 10px;
}

.right-content{
  margin-bottom: 3em;
  font-size: 22px;
  letter-spacing: .2px; /* Adjust the value as needed */

  padding-right: 11em;
  color: #ffff;
}
.mail{
margin-left: 10px;
margin-right: 10px;
}

.contact-info span {
  margin-right: 10px; /* Add spacing between icon and text */

}
.social-icon {
  position: absolute;
  right: 3%;
}

.social-icon:first-child {
  margin-right: 10px; /* Add margin between the icons */
}

.social-icon2 {
  position: absolute;
  right: 4.5%;
}

.social-icon2:first-child {
  margin-right: 10px; /* Add margin between the icons */
}


.navbar .navbar-brand::after {
position: absolute;
content: "";
width: 50px;
height: 100%;
top: 0;
right: -25px;
}

.navbar .navbar-nav .nav-link {
  margin-right: 61px;
  padding: 25px 0px 20px 0;
color: #cdcdcd;
font-size: 22px;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */

outline: none;
font-weight: 300; 

}
.navbar .navbar-nav .nav-link2 {
margin-right: 61px;
padding: 25px 0px 20px 0;
color: #cdcdcd;
margin-top: 0em;

font-size: 22px;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */
margin-top: 0em;
outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #FF8E48;
}
.navbar .navbar-nav .nav-link2:hover,
.navbar .navbar-nav .nav-link2.active {
color: #FF8E48;
}

.navbar .dropdown-toggle::after {
border: none;
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 900;
vertical-align: middle;
margin-left: 0px;
}

.logo-container{
  background-color: #FF8E48 ;
}
.btn-colour-nav {
  position: relative;
  background: #FF8E48;
  border: 1px solid #fff;
  color: #fff;

  text-transform: uppercase;
  padding: .5em 3em;
  margin-left: 2em;
  margin-right: -1em;
  border-radius: 5.21em;
  font-size: 21px;
  font-weight: 500 !important;
  box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
}
/** CAROUSEL CAROUESL CAROUSEL CAROUSEL***/
.carousel-text{
font-weight: 600;
 text-transform: uppercase;
  color: #000000    ;
  text-align: left;
  font-size: 4.75em;
}

.carousel-description {
  font-size: 20px;
  color: #000000; /* Adjust text color if needed */
  margin-top: 0px; /* Adjust top margin as needed */
  text-align: left;
  letter-spacing: .2px; /* Adjust the value as needed */

}

.text-container{
width: 25.8%;
}.carousel-caption {
  top: -5%;
  left: -53%;
text-align: left;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.carounsel-header1{
  color: #FF8E48;
  font-style: italic;
}
.carousel-logo1{
  
  width: 18em;
}
.btn-carousel {
  position: relative;
  background: #FF8E48;
  color: #fff;
  text-align: left;
  text-transform: uppercase;
  padding: .5em 3em;
  padding-left: 2em; /* Adjust the left padding to move the text further left */
  margin-left: 2.7em;
  border-radius: 5.21em;
  font-size: 18.7px;
  font-weight: 500 !important;
  white-space: nowrap; /* Prevent text from breaking */

  box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
  white-space: nowrap; /* Prevent text from breaking */

  position: relative;
  background: #fff;
  color: #0c0b11;
  text-align: left;
  text-transform: uppercase;
  padding: .5em 3em;
  padding-left: 2em; /* Adjust the left padding to move the text further left */
  margin-left: 3em;
  border-radius: 5.21em;
  border: 1px solid #0c0b11 ;

  font-size: 19.7px;
  font-weight: 500 !important;
  box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}

.btn-carousel-2 {
  position: relative;
  background: #ffffff00;
  color: #0c0b11;
  border: 1px solid #0c0b11 ;
  text-align: left;
  text-transform: uppercase;
  padding: .5em 3em;
  padding-left: 2em; /* Adjust the left padding to move the text further left */
  margin-left: 2em;
  border-radius: 5.21em;
  white-space: nowrap; /* Prevent text from breaking */

  font-size: 19.7px;
  font-weight: 500 !important;
}

.btn-carousel-2:hover {
  position: relative;
  background: #FF8E48;
  color: #ffffff;
  border: 0px solid #ffffff ;
  text-align: left;
  text-transform: uppercase;
  padding: .5em 3em;
  padding-left: 2em; /* Adjust the left padding to move the text further left */
  margin-left: 2em;
  border-radius: 5.21em;
  white-space: nowrap; /* Prevent text from breaking */

  border: 1px solid #FF8E48 ;

  font-size: 19.7px;
  font-weight: 500 !important;
}

.carousel-btn i {
  padding-top: 4px;
  margin-left: 10px; /* Add units to the margin value */
}
.navbar-nav{
  margin-left: 4.68em;
}
.navbar-mr{
  margin-right: -11.75em;

}  
.navbar-brand {
  padding-left: 1.25em;
  margin-top: .75em;
  }

}
@media (min-width: 1900px) and (max-width: 1970px){

   /****** Navbar ***************/



   .navbar .navbar-brand {
    position: relative;
    padding-right: 30px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content horizontally */
    z-index: 1; /* Ensure the logo appears above other elements */
  }
  
  .navbar .navbar-brand img.logo {
    width: 10em; /* Adjust the width of the logo as needed */
    position: relative; /* Ensure the logo stays within the navbar */
    top: -20px; /* Adjust the vertical position of the logo */
  }
  .logo-container {
    margin-bottom: -140px; /* Negative margin to pull it up */
  }
  
  .navbar {
    margin-top: -130px; /* Negative margin to pull it up */
    border-top: none; /* Remove the top border if present */
  }
  
  .navbar-brand {
  padding-left: 2em;
  }
  .logo-container {
    position: relative;
    top: -20px; /* Adjust this value as needed */
    display: flex;
    height: 200px;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
  }
  .logo-container {
    position: relative;
    top: -20px; /* Adjust this value as needed */
    display: flex;
    
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
  }
  .logo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .contact-info {
    display: flex; /* Ensure the text and icons stay on the same line */
    align-items: center;
  }
  .left-content{
    margin-bottom: 3em;
    font-size: 22px;
color: #ffff;
padding-left: 4em;
letter-spacing: .2px; /* Adjust the value as needed */

  }
  .phone-number{
text-decoration: underline ;
font-weight: 500;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 23px;

  }
  .email{
font-weight: 500;
font-size: 23px;
letter-spacing: .5px; /* Adjust the value as needed */

  }
  .phone-icon{
    margin: 0 10px;
  }

  .right-content{
    margin-bottom: 3em;
    font-size: 22px;
    letter-spacing: .2px; /* Adjust the value as needed */

    padding-right: 11em;
    color: #ffff;
  }
  .mail{
  margin-left: 10px;
  margin-right: 10px;
  }
  
  .contact-info span {
    margin-right: 10px; /* Add spacing between icon and text */

  }
  .social-icon {
    position: absolute;
    right: 3%;
  }
  
  .social-icon:first-child {
    margin-right: 10px; /* Add margin between the icons */
  }
  
  .social-icon2 {
    position: absolute;
    right: 4.5%;
  }
  
  .social-icon2:first-child {
    margin-right: 10px; /* Add margin between the icons */
  }
  

  .navbar .navbar-brand::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 100%;
  top: 0;
  right: -25px;
  }
  
  .navbar .navbar-nav .nav-link {
    margin-right: 61px;
    padding: 25px 0px 20px 0;
  color: #cdcdcd;
  font-size: 23px;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */

  outline: none;
  font-weight: 300; 

  }
  .navbar .navbar-nav .nav-link2 {
  margin-right: 61px;
  padding: 25px 0px 20px 0;
  color: #cdcdcd;
  margin-top: 0em;

  font-size: 23px;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */
margin-top: 0em;
  outline: none;
  font-weight: 300; 

  }
  
  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link.active {
  color: #FF8E48;
  }
  .navbar .navbar-nav .nav-link2:hover,
  .navbar .navbar-nav .nav-link2.active {
  color: #FF8E48;
  }
  
  .navbar .dropdown-toggle::after {
  border: none;
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  vertical-align: middle;
  margin-left: 0px;
  }

  .logo-container{
    background-color: #FF8E48 ;
  }
  .btn-colour-nav {
    position: relative;
    background: #FF8E48;
    border: 1px solid #fff;
    color: #fff;
  
    text-transform: uppercase;
    padding: .5em 3em;
    margin-left: 2em;
    border-radius: 5.21em;
    font-size: 21px;
    font-weight: 500 !important;
    box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
  }
  /** CAROUSEL CAROUESL CAROUSEL CAROUSEL***/
  .carousel-text{
  font-weight: 600;
   text-transform: uppercase;
    color: #000000    ;
    text-align: left;
    font-size: 5.5em;
}

.carousel-description {
    font-size: 22px;
    color: #000000; /* Adjust text color if needed */
    margin-top: 0px; /* Adjust top margin as needed */
    text-align: left;
    letter-spacing: 1px; /* Adjust the value as needed */

}

.text-container{
  width: 25.8%;
  }.carousel-caption {
    top: -15%;
    left: -53%;
  text-align: left;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
  .roofing{
    color: #FF8E48;
    text-decoration: underline  ;
  }
  .carounsel-header1{
    color: #FF8E48;
    font-style: italic;
  }
  .carousel-logo1{
    
    width: 22em;
  }
  .btn-carousel {
    position: relative;
    background: #FF8E48;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
    padding: .5em 3em;
    padding-left: 2em; /* Adjust the left padding to move the text further left */
    margin-left: 3em;
    border-radius: 5.21em;
    font-size: 19.7px;
    font-weight: 500 !important;
    box-shadow: 0 0 7px rgba(255, 142, 72, 1);
  }
  .btn-carousel:hover {
    position: relative;
    background: #fff;
    color: #0c0b11;
    text-align: left;
    text-transform: uppercase;
    padding: .5em 3em;
    padding-left: 2em; /* Adjust the left padding to move the text further left */
    margin-left: 3em;
    border-radius: 5.21em;
    border: 1px solid #0c0b11 ;

    font-size: 19.7px;
    font-weight: 500 !important;
    box-shadow: 0 0 0px rgba(255, 142, 72, 1);
  }
  
  .btn-carousel-2 {
    position: relative;
    background: #ffffff00;
    color: #0c0b11;
    border: 1px solid #0c0b11 ;
    text-align: left;
    text-transform: uppercase;
    padding: .5em 3em;
    padding-left: 2em; /* Adjust the left padding to move the text further left */
    margin-left: 2em;
    border-radius: 5.21em;
    font-size: 19.7px;
    font-weight: 500 !important;
  }
  
  .btn-carousel-2:hover {
    position: relative;
    background: #FF8E48;
    color: #ffffff;
    border: 0px solid #ffffff ;
    text-align: left;
    text-transform: uppercase;
    padding: .5em 3em;
    padding-left: 2em; /* Adjust the left padding to move the text further left */
    margin-left: 2em;
    border-radius: 5.21em;
    border: 1px solid #FF8E48 ;

    font-size: 19.7px;
    font-weight: 500 !important;
  }
  
  .carousel-btn i {
    padding-top: 4px;
    margin-left: 10px; /* Add units to the margin value */
  }
  


.navbar-nav{
  margin-left: 4.98em;
}
.navbar-mr{
  margin-right: -11.75em;

}  
.navbar-brand {
  padding-left: 1.5em;
  margin-top: .95em;
  }
  .navbar-nav .dropdown-toggle::after {
    margin-left: 12px; /* Adjust the value as needed */
  }
}

@media (min-width: 1970px) and (max-width: 10000px){

   /****** Navbar ***************/



   .navbar .navbar-brand {
    position: relative;
    padding-right: 30px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content horizontally */
    z-index: 1; /* Ensure the logo appears above other elements */
  }
  
  .navbar .navbar-brand img.logo {
    width: 10em; /* Adjust the width of the logo as needed */
    position: relative; /* Ensure the logo stays within the navbar */
    top: -20px; /* Adjust the vertical position of the logo */
  }
  .logo-container {
    margin-bottom: -140px; /* Negative margin to pull it up */
  }
  
  .navbar {
    margin-top: -130px; /* Negative margin to pull it up */
    border-top: none; /* Remove the top border if present */
  }
  
  .navbar-brand {
  padding-left: 2em;
  }
  .logo-container {
    position: relative;
    top: -20px; /* Adjust this value as needed */
    display: flex;
    height: 200px;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
  }
  .logo-container {
    position: relative;
    top: -20px; /* Adjust this value as needed */
    display: flex;
    
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
  }
  .logo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .contact-info {
    display: flex; /* Ensure the text and icons stay on the same line */
    align-items: center;
  }
  .left-content{
    margin-bottom: 3em;
    font-size: 22px;
color: #ffff;
padding-left: 4em;
letter-spacing: .2px; /* Adjust the value as needed */

  }
  .phone-number{
text-decoration: underline ;
font-weight: 500;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 23px;

  }
  .email{
font-weight: 500;
font-size: 23px;
letter-spacing: .5px; /* Adjust the value as needed */

  }
  .phone-icon{
    margin: 0 10px;
  }

  .right-content{
    margin-bottom: 3em;
    font-size: 22px;
    letter-spacing: .2px; /* Adjust the value as needed */

    padding-right: 11em;
    color: #ffff;
  }
  .mail{
  margin-left: 10px;
  margin-right: 10px;
  }
  
  .contact-info span {
    margin-right: 10px; /* Add spacing between icon and text */

  }
  .social-icon {
    position: absolute;
    right: 3%;
  }
  
  .social-icon:first-child {
    margin-right: 10px; /* Add margin between the icons */
  }
  
  .social-icon2 {
    position: absolute;
    right: 4.5%;
  }
  
  .social-icon2:first-child {
    margin-right: 10px; /* Add margin between the icons */
  }
  

  .navbar .navbar-brand::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 100%;
  top: 0;
  right: -25px;
  }
  
  .navbar .navbar-nav .nav-link {
    margin-right: 61px;
    padding: 25px 0px 20px 0;
  color: #cdcdcd;
  font-size: 23px;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */

  outline: none;
  font-weight: 300; 

  }
  .navbar .navbar-nav .nav-link2 {
  margin-right: 61px;
  padding: 25px 0px 20px 0;
  color: #cdcdcd;
  margin-top: 0em;

  font-size: 23px;
text-transform: capitalize;
letter-spacing: 1px; /* Adjust the value as needed */
margin-top: 0em;
  outline: none;
  font-weight: 300; 

  }
  
  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link.active {
  color: #FF8E48;
  }
  .navbar .navbar-nav .nav-link2:hover,
  .navbar .navbar-nav .nav-link2.active {
  color: #FF8E48;
  }
  
  .navbar .dropdown-toggle::after {
  border: none;
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  vertical-align: middle;
  margin-left: 0px;
  }

  .logo-container{
    background-color: #FF8E48 ;
  }
  .btn-colour-nav {
    position: relative;
    background: #FF8E48;
    border: 1px solid #fff;
    color: #fff;
  
    text-transform: uppercase;
    padding: .5em 3em;
    margin-left: 2em;
    border-radius: 5.21em;
    font-size: 21px;
    font-weight: 500 !important;
    box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
  }
  /** CAROUSEL CAROUESL CAROUSEL CAROUSEL***/
  .carousel-text{
  font-weight: 600;
   text-transform: uppercase;
    color: #000000    ;
    text-align: left;
    font-size: 5.5em;
}

.carousel-description {
    font-size: 22px;
    color: #000000; /* Adjust text color if needed */
    margin-top: 0px; /* Adjust top margin as needed */
    text-align: left;
    letter-spacing: 1px; /* Adjust the value as needed */

}

.text-container{
  width: 25.8%;
  }.carousel-caption {
    top: -15%;
    left: -53%;
  text-align: left;
    right: 0;
    bottom: 0;
    z-index: 1;
  }
  .roofing{
    color: #FF8E48;
    text-decoration: underline  ;
  }
  .carounsel-header1{
    color: #FF8E48;
    font-style: italic;
  }
  .carousel-logo1{
    
    width: 22em;
  }
  .btn-carousel {
    position: relative;
    background: #FF8E48;
    color: #fff;
    text-align: left;
    text-transform: uppercase;
    padding: .5em 3em;
    padding-left: 2em; /* Adjust the left padding to move the text further left */
    margin-left: 3em;
    border-radius: 5.21em;
    font-size: 19.7px;
    font-weight: 500 !important;
    box-shadow: 0 0 7px rgba(255, 142, 72, 1);
  }
  .btn-carousel:hover {
    position: relative;
    background: #fff;
    color: #0c0b11;
    text-align: left;
    text-transform: uppercase;
    padding: .5em 3em;
    padding-left: 2em; /* Adjust the left padding to move the text further left */
    margin-left: 3em;
    border-radius: 5.21em;
    border: 1px solid #0c0b11 ;

    font-size: 19.7px;
    font-weight: 500 !important;
    box-shadow: 0 0 0px rgba(255, 142, 72, 1);
  }
  
  .btn-carousel-2 {
    position: relative;
    background: #ffffff00;
    color: #0c0b11;
    border: 1px solid #0c0b11 ;
    text-align: left;
    text-transform: uppercase;
    padding: .5em 3em;
    padding-left: 2em; /* Adjust the left padding to move the text further left */
    margin-left: 2em;
    border-radius: 5.21em;
    font-size: 19.7px;
    font-weight: 500 !important;
  }
  
  .btn-carousel-2:hover {
    position: relative;
    background: #FF8E48;
    color: #ffffff;
    border: 0px solid #ffffff ;
    text-align: left;
    text-transform: uppercase;
    padding: .5em 3em;
    padding-left: 2em; /* Adjust the left padding to move the text further left */
    margin-left: 2em;
    border-radius: 5.21em;
    border: 1px solid #FF8E48 ;

    font-size: 19.7px;
    font-weight: 500 !important;
  }
  
  .carousel-btn i {
    padding-top: 4px;
    margin-left: 10px; /* Add units to the margin value */
  }
  
.carousel-buttons{
  margin-left: -9% !important;
  margin-top: 1em;
}

.navbar-nav{
  margin-left: 6.5em;
}
.navbar-mr{
  margin-right: -11.75em;

}  
.navbar-brand {
  padding-left: 1.5em;
  margin-top: .95em;
  }
  .navbar-nav .dropdown-toggle::after {
    margin-left: 12px; /* Adjust the value as needed */
  }
}


















@media (min-width: 993px) and (max-width: 1070px){
.carousel-text{
  font-weight: 600;
   text-transform: uppercase;
    color: #000000    ;
    text-align: left;
    font-size: 2.5em;
}
.carousel-description {
  font-size: 14px;
  color: #000000; /* Adjust text color if needed */
  margin-top: 0px; /* Adjust top margin as needed */
  text-align: left !important;
  letter-spacing: 1px; /* Adjust the value as needed */
  margin-left: -.01em !important;

}
.carounsel-header1{
color: #FF8E48;
font-style: italic;
font-size: 1.34em !important;
}
.btn-carousel {
position: relative;
background: #FF8E48;
color: #fff;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 1em;
border-radius: 5.21em;
font-size: 17.7px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1);
}
.btn-carousel:hover {
position: relative;
background: #fff;
color: #0c0b11;
text-align: left;
text-transform: uppercase;
padding: .5em 3em;
padding-left: 2em; /* Adjust the left padding to move the text further left */
margin-left: 3em;
border-radius: 5.21em;
border: 1px solid #0c0b11 ;

font-size: 19.7px;
font-weight: 500 !important;
box-shadow: 0 0 0px rgba(255, 142, 72, 1);
}

.btn-carousel-2 {
display: none;
}

.btn-carousel-2:hover {
display: none;
}
.carounsel-header1{
color: #FF8E48;
font-style: italic;
font-size: 1em;
}
.carousel-logo1{
width: 12em;
margin-bottom: -1em;height: 1.5em !important; 
margin-top: 1em;
}
.carousel-caption {
top: -6%;
left: -53%;
text-align: left;
right: 0;
bottom: 0;
z-index: 1;
}
.btn-colour-nav {
position: relative;
background: #FF8E48;
border: 1px solid #fff;
color: #fff;
white-space: nowrap; /* Prevent text from breaking */
margin-right: -3em;

text-transform: uppercase;
padding: .5em 1.5em;
border-radius: 5.21em;
font-size: 13px;
font-weight: 500 !important;
box-shadow: 0 0 7px rgba(255, 142, 72, 1); /* Adjusted color values for FF8E48 */
}
.left-mobile-none span{
display: none;
}
.contact-info {
display: flex; /* Ensure the text and icons stay on the same line */
align-items: center;
}
.left-content{
margin-bottom: 4.5em;
font-size: 15px;
white-space: nowrap; /* Prevent text from breaking */

color: #ffff;
padding-left: 1.2em;
letter-spacing: .2px; /* Adjust the value as needed */

}
.phone-number2{
text-decoration: underline ;
font-weight: 500 !important;
letter-spacing: .5px; /* Adjust the value as needed */
font-size: 15px;

}
.email{
font-weight: 500;
font-size: 15px;
letter-spacing: .5px; /* Adjust the value as needed */

}
.phone-icon2{
margin: 0 10px;
}

.right-content{
margin-bottom: 4.5em;
font-size: 15px;
letter-spacing: .2px; /* Adjust the value as needed */

padding-right: 5em;
color: #ffff;
}
.mail{
margin-left: 7px;
margin-right: 7px;
}

.contact-info span {
margin-right: 10px; /* Add spacing between icon and text */

}
.social-icon {
position: absolute;
right: 3%;
}

.social-icon:first-child {
margin-right: 10px; /* Add margin between the icons */
}

.social-icon2 {
position: absolute;
right: 4.5%;
}

.social-icon2:first-child {
margin-right: 10px; /* Add margin between the icons */
}
.navbar .navbar-nav .nav-link {
margin-right: 29px;
padding: 2px 0px 2px 0;
color: #cdcdcd;
font-size: 15px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */

outline: none;
font-weight: 300; 

}
.navbar .navbar-nav .nav-link2 {
margin-right: 31px;
padding: 25px 0px 20px 0;
color: #cdcdcd;
margin-top: 0em;
font-family: "Kanit", sans-serif;
font-weight: 500; 
font-style: italic;
font-size: 15px;
text-transform: capitalize;
letter-spacing: .2px; /* Adjust the value as needed */
margin-top: 0em;
outline: none;
font-weight: 300; 

}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #FF8E48;
}
.navbar .navbar-nav .nav-link2:hover,
.navbar .navbar-nav .nav-link2.active {
color: #FF8E48;

}
.navbar-nav{
margin-left: 1.5em;
}
.navbar-mr{
margin-right: -9em;

}  
.navbar-brand {
padding-left: 6.78em;
}
.navbar-nav .dropdown-toggle::after {
  margin-left: 2px; /* Adjust the value as needed */
}
.logo{
  width: 7.4em ;
  position: sticky;
  z-index: 10000;
}
.logo-container {
  margin-bottom: -140px; /* Negative margin to pull it up */
}

.logo-container {
  position: relative;
  top: -0px; /* Adjust this value as needed */
  display: flex;
  height: 175px;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  position: relative;
  top: -20px; /* Adjust this value as needed */
  display: flex;
  
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about-h1-size{
  font-size: 2.2em;
}
.service{
  margin-top: 3em;
}
.swiper-pagination {
position: absolute;
bottom: -0px !important ; /* Adjust the distance from the bottom as needed */
}
.swiper-pagination .swiper-pagination-bullet {
background-color: #FF8E48; /* Change to the color you desire */
}
.text-about{
font-size: 16px !important;
}


.swiper{
overflow: visible !important;
}
.about-padding{
padding-left: 5em ;
}

.list-text{
color: #020202;
font-weight: 500 !important; 
letter-spacing: .3px;
text-transform: capitalize;
font-size: 1.1rem;
white-space: nowrap; /* Prevent text from breaking */

}
section#testimonial {
margin-top: 3em;
margin-bottom: 2em;
}
}
/* Centering the breadcrumb on mobile devices */
@media (max-width: 767px) {
.breadcrumb-container {
    display: flex;
    justify-content: center;
}

.breadcrumb {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.breadcrumb-item {
    display: inline;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    margin: 0 0.15rem;
    color: #fff;
}
}

.project-area .project-caption .single-project,.about-area .project-caption .single-project,.contact-section .project-caption .single-project{position:relative}
.project-area .project-caption .single-project .project-img img,.about-area .project-caption .single-project .project-img img,.contact-section .project-caption .single-project .project-img img{width:100%}.project-area .project-caption .single-project .project-cap,.about-area .project-caption .single-project .project-cap,.contact-section .project-caption .single-project .project-cap{padding:20px 20px;background:#fafafa;-webkit-transition:all .4s ease-out 0s;-moz-transition:all .4s ease-out 0s;-ms-transition:all .4s ease-out 0s;-o-transition:all .4s ease-out 0s;transition:all .4s ease-out 0s;position:relative}.project-area .project-caption .single-project .project-cap h4,.about-area .project-caption .single-project .project-cap h4,.contact-section .project-caption .single-project .project-cap h4{margin:0;line-height:1.2;font-size:25px;font-weight:700}.project-area .project-caption .single-project .project-cap h4 a,.about-area .project-caption .single-project .project-cap h4 a,.contact-section .project-caption .single-project .project-cap h4 a{color:#0e132a}.project-area .project-caption .single-project .project-cap h4 a:hover,.about-area .project-caption .single-project .project-cap h4 a:hover,.contact-section .project-caption .single-project .project-cap h4 a:hover{color:#ff5f13}.project-area .project-caption .single-project .plus-btn,.about-area .project-caption .single-project .plus-btn,.contact-section .project-caption .single-project .plus-btn{position:absolute;right:16px;top:-22px;display:inline-block;opacity:0;visibility:hidden;-webkit-transition:all .3s ease-out 0s;-moz-transition:all .3s ease-out 0s;-ms-transition:all .3s ease-out 0s;-o-transition:all .3s ease-out 0s;transition:all .3s ease-out 0s}.project-area .project-caption .single-project .plus-btn i,.about-area .project-caption .single-project .plus-btn i,.contact-section .project-caption .single-project .plus-btn i{color:#161e46;background:transparent;width:38px;height:38px;display:inline-block;line-height:38px;text-align:center;font-size:15px;margin-left:10px;-webkit-transition:all .4s ease-out 0s;-moz-transition:all .4s ease-out 0s;-ms-transition:all .4s ease-out 0s;-o-transition:all .4s ease-out 0s;transition:all .4s ease-out 0s}.project-area .project-caption .single-project:hover .project-cap,.about-area .project-caption .single-project:hover .project-cap,.contact-section .project-caption .single-project:hover .project-cap{background:#00235b}.project-area .project-caption .single-project:hover .project-cap h4 a,.about-area .project-caption .single-project:hover .project-cap h4 a,.contact-section .project-caption .single-project:hover .project-cap h4 a{color:#fff}.project-area .project-caption .single-project:hover .plus-btn,.about-area .project-caption .single-project:hover .plus-btn,.contact-section .project-caption .single-project:hover .plus-btn{opacity:1;visibility:visible}.project-area .project-caption .single-project:hover .plus-btn i,.about-area .project-caption .single-project:hover .plus-btn i,.contact-section .project-caption .single-project:hover .plus-btn i{color:#fff;background:#ff5f13}.project-area .properties__button,.about-area .properties__button,.contact-section .properties__button{float:right}@media only screen and (min-width: 768px) and (max-width: 991px){.project-area .properties__button,.about-area .properties__button,.contact-section .properties__button{float:left}}@media only screen and (min-width: 576px) and (max-width: 767px){.project-area .properties__button,.about-area .properties__button,.contact-section .properties__button{float:left}}@media (max-width: 575px){.project-area .properties__button,.about-area .properties__button,.contact-section .properties__button{float:left}}.project-area .nav-tabs .nav-link,.about-area .nav-tabs .nav-link,.contact-section .nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;padding:10px 20px}@media only screen and (min-width: 992px) and (max-width: 1200px){.project-area .nav-tabs .nav-link,.about-area .nav-tabs .nav-link,.contact-section .nav-tabs .nav-link{padding:10px 10px}}@media only screen and (min-width: 768px) and (max-width: 991px){.project-area .nav-tabs .nav-link,.about-area .nav-tabs .nav-link,.contact-section .nav-tabs .nav-link{padding:10px 15px}}@media only screen and (min-width: 576px) and (max-width: 767px){.project-area .nav-tabs .nav-link,.about-area .nav-tabs .nav-link,.contact-section .nav-tabs .nav-link{padding:10px 15px}}@media (max-width: 575px){.project-area .nav-tabs .nav-link,.about-area .nav-tabs .nav-link,.contact-section .nav-tabs .nav-link{padding:10px 10px}}.project-area .nav-tabs .nav-item.show .nav-link,.project-area .nav-tabs .nav-link.active,.about-area .nav-tabs .nav-item.show .nav-link,.about-area .nav-tabs .nav-link.active,.contact-section .nav-tabs .nav-item.show .nav-link,.contact-section .nav-tabs .nav-link.active{color:#ff5f13;background:none}.project-area .nav-tabs .nav-item,.about-area .nav-tabs .nav-item,.contact-section .nav-tabs .nav-item{display:block;color:#161e46;font-weight:500;text-transform:capitalize;font-size:16px}.project-area .nav-tabs,.about-area .nav-tabs,.contact-section .nav-tabs{margin-bottom:9px;padding-bottom:0px;position:relative;border:0;display:flex;justify-content:center}@media only screen and (min-width: 768px) and (max-width: 991px){.project-area .nav-tabs,.about-area .nav-tabs,.contact-section .nav-tabs{justify-content:center; text-align: center;}}@media only screen and (min-width: 576px) and (max-width: 767px){.project-area .nav-tabs,.about-area .nav-tabs,.contact-section .nav-tabs{justify-content:center}}@media (max-width: 575px) {.project-area .nav-tabs,.about-area .nav-tabs,.contact-section .nav-tabs{justify-content:center}}.tab-pane{-webkit-transition:all .6s ease-out 0s;-moz-transition:all .6s ease-out 0s;-ms-transition:all .6s ease-out 0s;-o-transition:all .6s ease-out 0s;transition:all .6s ease-out 0s}.contact-with-area{padding-top:150px;padding-bottom:250px;background-size:cover;background-repeat:no-repeat}@media only screen and (min-width: 576px) and (max-width: 767px){.contact-with-area{padding-top:70px;padding-bottom:180px}}

.font-type-italic{
  font-style: italic;
}
@media (max-width: 575px) {
  .project-area .section-tittle3 h2,
  .about-area .section-tittle3 h2,
  .contact-section .section-tittle3 h2 {
      text-align: center !important;
      padding: 0em 1.75em;
  }

  .project-area .section-tittle3 h6,
  .about-area .section-tittle3 h6,
  .contact-section .section-tittle3 h6 {
      text-align: center !important;
  }
 
  
}
@media (min-width: 300px) and (max-width: 385px) {
  .project-area .section-tittle3 h2,
  .about-area .section-tittle3 h2,
  .contact-section .section-tittle3 h2 {
      text-align: center !important;
      padding: 0em 1.5em;
  }

  .project-area .section-tittle3 h6,
  .about-area .section-tittle3 h6,
  .contact-section .section-tittle3 h6 {
      text-align: center !important;
  }
  .projects-page-header{
    margin-bottom: -.01em !important;

    font-size: 1.85em !important;
  }
  
}
@media (min-width: 386px) and (max-width: 400px) {
  .project-area .section-tittle3 h2,
  .about-area .section-tittle3 h2,
  .contact-section .section-tittle3 h2 {
      text-align: center !important;
      padding: 0em 1.5em;
  }

  .project-area .section-tittle3 h6,
  .about-area .section-tittle3 h6,
  .contact-section .section-tittle3 h6 {
      text-align: center !important;
  }
  .projects-page-header{
    font-size: 2em !important;
    margin-bottom: -.01em !important;
  }
  
}
.dekstop-view-h2{
  margin-bottom: 1em;
}
.projects-page-header{
  font-weight: 600;
  font-size: 2.85em;
}

@media (min-width: 401px) and (max-width: 420px) {
  .project-area .section-tittle3 h2,
  .about-area .section-tittle3 h2,
  .contact-section .section-tittle3 h2 {
      text-align: center !important;
      padding: 0em 1.5em;
  }

  .project-area .section-tittle3 h6,
  .about-area .section-tittle3 h6,
  .contact-section .section-tittle3 h6 {
      text-align: center !important;
  }
  .projects-page-header{
    font-size: 2.01em !important;
    margin-bottom: -.01em !important;
  }
  
}
.dekstop-view-h2{
  margin-bottom: 1em;
}
.projects-page-header{
  font-weight: 600;
  font-size: 2.85em;
}

@media (min-width: 421px) and (max-width: 490px) {
  .project-area .section-tittle3 h2,
  .about-area .section-tittle3 h2,
  .contact-section .section-tittle3 h2 {
      text-align: center !important;
      padding: 0em 1.5em;
  }

  .project-area .section-tittle3 h6,
  .about-area .section-tittle3 h6,
  .contact-section .section-tittle3 h6 {
      text-align: center !important;
  }
  .projects-page-header{
    font-size: 2.01em !important;
    margin-bottom: -.01em !important;
  }
  
}
.dekstop-view-h2{
  margin-bottom: 1em;
}
.projects-page-header{
  font-weight: 600;
  font-size: 2.85em;
}

.phone-number2 {
  display: inline-block;
  overflow: hidden;
  height: 1.2em; /* Adjust based on font size */
  line-height: 1.2em; /* Adjust based on font size */
  transition: transform .72s ease;
}
.slide-up {
  transform: translateY(-200%);
}
.slide-down {
  transform: translateY(200%);
}
.visible {
  transform: translateY(0);
}
.phone-number-link{
  color: #fff;
  margin-left: 8px;
}