:root {
--tj-color-theme-primary: #162b75 !important;
--tj-color-theme-dark: #00af4c !important;
--tj-fs-h4: 20px !important;
 
}

/*whatsapp*/

/* Container for the icon */
.whatsapp-float {
    /* 1. KEY: Makes it float relative to the viewport and stay put */
    position: fixed;
    /* 2. KEY: Controls its position on the right */
    right: 20px; /* Adjust this value to move it closer or further from the edge */

    /* 3. KEY: Positions it vertically in the center */
    top: 92%;
    transform: translateY(-50%); /* This pulls it up by half its own height for perfect centering */

    /* 4. KEY: Ensures it's always on top of other content */
    z-index: 1000; 

    /* Basic visual styles */
    background-color:#059862; /* WhatsApp brand color   #25D366 */
    color:#FFF;
    border-radius: 50%; /* Makes it a circle */
    text-align: center;
    box-shadow: 2px 2px 3px #999; /* Optional: adds a subtle shadow */
    width: 70px; /* Adjust size */
    height: 70px; /* Adjust size */
    line-height: 70px; /* Vertically centers the text/icon inside the circle */
    font-size: 35px; /* Adjust icon size */
    text-decoration: none; /* Remove underline */
    transition: all 0.3s ease-in-out; /* Optional: smooth hover effect */
}

/* Optional: Hover effect */
.whatsapp-float:hover {
    background-color:#ffffff;  /* Slightly darker on hover */
    color:#059862;
    box-shadow: 2px 2px 6px #777; 
    transform: translateY(-50%) scale(1.1); /* Slightly enlarge on hover */
}

/* 5. RESPONSIVENESS (for smaller screens) */
@media (max-width: 600px) {
    .whatsapp-float {
        /* Make it slightly smaller on mobile */
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 30px;
        /* Move it closer to the edge for better mobile feel */
        right: 15px;
    }
}


      /* MOBILE: shift banner image focus to the right */
@media (max-width: 767px) {
  .slider-bg-image {
    background-position: 81% center !important;
    
  }
}
@media (min-width: 992px) {
  .slider-title {
    color: #000 !important;
  }
} 
@media (max-width: 991px) {
  .slider-title {
    color: #fff;
  }
}
@media (min-width: 992px) {
  .slider-desc {
    color: #000 !important;
  }
} 
@media (max-width: 991px) {
  .slider-desc {
    color: #fff;
  }
} 
/* Make sure image wrapper can hold overlay */
.slider-bg-image {
  position: absolute;
}

/* MOBILE: black overlay over image */
@media (max-width: 767px) {
  .slider-bg-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45); /* overlay darkness */
    z-index: 1;
  }
}
.slider-bg-image + .container,
.slider-bg-image + .container * {
  position: relative;
  z-index: 2;
}

.h5-project-item.project-item .project-content {
    max-width: 474px !important;
    padding-bottom: 0;
}
.h5-project-item.project-item .project-content .title {
    margin-bottom: 20px;
    max-width: 391px !important;
    font-weight: var(--tj-fw-medium);
}
.bg-shape-2, .bg-shape-1 {
    mix-blend-mode: plus-lighter !important;
}
.tj-footer-section {
    background-color: #657cd0;
}
h5{
    color: #ffffff;
}
.widget-nav-menu ul li a {
    color: #ffffff;
}
.page-header-overlay {
     opacity: 1!important;
    }
body {
    background-color: #fff !important;
}

.hamburger_bg
 {
    background-color: #a6adaf;
 }
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
    .tj-page-header {
        padding-top: 100px;
        padding-bottom: 70px;
    }
}

.tj-footer-section.h7-footer
 {
    padding-top: 60px;
}
.header-area.header-2.header-absolute {
    position: absolute;
    top: 5px;
}
.social-links.style-3 ul li a i {
    color: #162B75;
}
.header-2.header-absolute .mainmenu > ul > li > a {
    color: #000000;
}
.header-area.header-2.header-absolute .header-wrapper {
    background-color: rgb(255 255 255 / 60%);
}

.footer-contact-info
 {
    max-width: 294px;
    width: 100%;
}
.contact-form .form-input .nice-select .list .option
 {
    color: #0c0e0e;
    padding: 0 20px;
}
.tj-product-details-tab-nav .tj-product-tab {
    border: 0;
    border-bottom: 0px  !important; 
    gap: 150px;
}
.contact-form .form-input .nice-select .list .option:hover, .contact-form .form-input .nice-select .list .option.focus {
    background: var(--tj-color-theme-bg);
    color: #0c1e21;
}
.nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 34px;
    list-style: none;
    min-height: 26px;
}
.tj-product-details-tab-nav .tj-product-tab .nav-link::after {
   
    background-color: #0c1f22 !important;
}
.tj-product-details-tab-nav .tj-product-tab .nav-link
 {
    color: #0c1f22 !important;
 }
.tj-page-header {
    background-color: #0c1e2100;
}
.cta-area .cta-content .title {
    font-size: 60px;
}
.tj-contact-section {
    background-color: #162b75;
}
 .nice-select {
    padding: 3px 15px;
}

.h8-blog {
    border-top: 1px dashed #c9d1d100;
}

.h10-service-wrapper .service-item.style-4 {
    max-height: 369px;
    min-height: 369px;
}

.h8-funfact-banner-img::after {
    background-color: #b5b5b500;
    opacity: 1;
}
.project-item .project-img::before {
    content: "";
    background: #fbfbfb00;
}
.blog-item .blog-thumb::before
 {
    content: "";
    background-color: #ffffff00;
 }
 .faq-img-area .faq-img::after {
    background-color: #0c1e2100;
    opacity: 1;
}

.tj-page-link span:not(:first-child) i {
    color: #000;
}
.tj-slider-item .slider-content .slider-desc {
    max-width: 440px;
    font-size: 18px;
    line-height: 1.444;
    color: #ebeaea;
}
.tj-page-link span a {
    color: #000;
}
.tj-page-title
 {
    color: #000000;
 }
.tj-page-link span {
    color: #000000;
}

.text-white{
    color: #fff;
}

.tj-slider-item .slider-wrapper {
    padding: 189px 0 253px;
    position: relative;
    z-index: 3;
}
.tj-slider-item::after {
    background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgb(71 106 112 / 16%)), color-stop(60%, rgb(203 208 209 / 30%)), to(rgba(12, 30, 33, 0.1)));
}
.offcanvas-text p {
    color: #e6eded;
    margin-bottom: 0;
}
.contact-info .contact-item .subtitle {
    display: block;
    font-size: 14px;
    line-height: 1;
    color: #e6eded;
    margin-bottom: 7px;
}
.social-links.style-3 ul li a {
    background-color: #ffffff;
    opacity: 1.3;
}



.h8-funfact-item.countup-item {
    padding: 30px 35px;
}
.header-2.header-absolute .mainmenu > ul > li:hover > a{
    color: #bcbcbc;
}
.tj-page-link span i {
    color: #000;
}
.footer-logo {
    max-width: 180px;
}

.contact-form.style-3 .form-input .cf-label {
    color: #ffffff;
    position: unset;
    margin-bottom: 10px;
}
.service-btn-area {
     margin-top: 0px; 
}

/*header menu*/
ul > li > .mega-menu-pages {
    width: calc(49% - 30px);
    max-width: 549px;
    padding: 0;
    margin: 0 auto;
}
.mainmenu ul > li > .mega-menu-pages{
    width: calc(50% - 30px);
    max-width: 584px;
    padding: 0;
    margin: 0 auto;
}
.mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child{
    width: 260px;
}
/*end*/
.tj-slider-item .slider-content {
    max-width: 834px;
}
.tj-slider-item .slider-content .slider-desc {
    max-width: 638px;
}
   


@media (min-width: 1200px) {
    .col-xl-8 {
        flex: 0 0 auto;
        width: 100.666667%;
    }
}
.tj-faq .accordion-item .faq-title {
    font-size: 20px !important;
}
.tj-product-title {
    font-size: 20px !important;
    margin-bottom: 5px;
}

p{
    text-align: justify;
    font-size: 16px;
}
.just{
    text-align: justify;
}

.tj-product-badge1 {
    position: absolute;
    top: 15px;
    inset-inline-start: 90px;
    z-index: 1;
}
.tj-product-badge2 {
    position: absolute;
    top: 15px;
    inset-inline-start: 181px;
    z-index: 1;
}
.tj-product-badge3 {
    position: absolute;
    top: 15px;
    inset-inline-start: 271px;
    z-index: 1;
}
.tj-product-badge4 {
    position: absolute;
    top: 15px;
    inset-inline-start: 265px;
    z-index: 1;
}
.tj-product-badgeH {
    position: absolute;
    top: 15px;
    inset-inline-start: 15px;
    z-index: 1;
}
.tj-product-badgeH span {
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    color: #000000;
    background-color: #ffffff;
    border-radius: 40px;
    display: inline-block;
    padding: 6px 10px;
}
.tj-product-badge span {
    font-weight: 400;
    font-size: 12px !important; 
     color: #000000 !important;
    background-color: #ffffff !important;
}

.tj-product-badge1, .tj-product-badge2, .tj-product-badge3, .tj-product-badge4 span {
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    color: #000000;
    background-color: #ffffff;
    border-radius: 40px;
    display: inline-block;
    padding: 6px 10px;
}
.tj-product-badge
 {
     
    position: absolute;
    top: 13px !important;
    inset-inline-start: 15px;
    z-index: 1;
}

/*color code*/
/* hide by default */
.tj-product-action.product-color-swatches {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* show on image hover */
.tj-product-thumb:hover .product-color-swatches {
    opacity: 1;
    visibility: visible;
}

/* swatch container */
.swatch-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* individual color */
.swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    transition: transform 0.2s ease;
}

.swatch:hover {
    transform: scale(1.1);
}

.swatch.active {
    box-shadow: 0 0 0 2px #000;
}
/*hand hover*/
.product-color-swatches .swatch {
    cursor: default;          /* removes hand cursor */
    pointer-events: none;     /* disables click */
}



/*product page*/

.product-colors h6 {
    margin-bottom: 10px;
}

.color-swatches {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.color-square {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.2s, border 0.2s;
}

.color-square:hover {
    transform: scale(1.1);
    border: 1px solid #333;
}

.white{
    background: #fff;
}

.pb28{
    padding-bottom: 28px;
}

.size-options {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
}

.size-box {
   padding: 8px 14px;
   border: 1px solid #ccc;
   font-size: 14px;
   cursor: pointer;
   color: #000;
   border-radius: 4px;
   background: #fff;
   text-align: center;
}

/* Hover */
.size-box:hover {
   background: #fff;
}

/* Small screens */
@media (max-width: 576px) {
   .size-options {
      gap: 8px;
   }

   .size-box {
      flex: 1 1 calc(50% - 8px); /* 2 per row */
      font-size: 13px;
      padding: 8px 10px;
   }
}
.section-gap {
    padding-top: 100px;
    padding-bottom: 100px;
}
.mt-80{
    margin-top: 80px;
}