/*
Theme Name: Pointmatix
Theme URI: https://wordpress.org/themes/twentythirteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 4.4
Tested up to: 6.8
Requires at least: 3.6
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, footer-widgets, microformats, post-formats, rtl-language-support, sticky-post, translation-ready, accessibility-ready, block-patterns
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/* Variables */

  :root {
     --primary-color: #FFFFFF;
     --secondary-color: #A4FFB6;
     --heading-color: #426649;
     --heading-primary-color: #272727;
     --description-color: #333;

 }

 p{margin: 0;padding: 0;}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	font-family: "Montserrat", sans-serif;	
	font-weight: 600;	
}

 body {
     font-family: 'Poppins', sans-serif;
 }


 h6 {
     color: var(--heading-color);
     font-weight: 600;
     position: relative;
 }

 h6::before {
     content: " ";
     width: 30px;
     background-color: var(--heading-color);
     height: 2px;
     position: absolute;
     left: -50px;
     top: 50%;
     transform: translateY(-50%);
     border-radius: 10px;

 }

 h6::after {
     content: " ";
     width: 30px;
     background-color: var(--heading-color);
     height: 2px;
     position: absolute;
     right: -50px;
     top: 50%;
     transform: translateY(-50%);
     border-radius: 10px;

 }

 .dot-before {
     background-color: var(--heading-color);
     width: 10px;
     height: 10px;
     border-radius: 50%;
     position: absolute;
     left: -60px;
     top: 50%;
     transform: translateY(-50%);
 }

 .dot-after {
     background-color: var(--heading-color);
     width: 10px;
     height: 10px;
     border-radius: 50%;
     position: absolute;
     right: -60px;
     top: 50%;
     transform: translateY(-50%);
 }

 h2 {
     font-weight: 600;
     font-size: 32px;
     color: var(--heading-primary-color);


 }

 .description {
     color: var(--description-color);
     text-align: center;
 }

 .white-description {
     color: var(--primary-color);
     text-align: center;


 }

 .item-description {
     color: var(--description-color);
     font-size: 15px;

 }

 .navbar-nav .nav-link.active {
     color: var(--secondary-color);
     font-weight: 600;

 }

 .btn-primary {
     border-radius: 60px;
     background: #A4FFB6;
     display: flex;
     padding: 12px 24px;
     justify-content: center;
     align-items: center;
     color: #1A1A1A;
     font-size: 16px;
     font-style: normal;
     font-weight: 600;
     line-height: 120%;
     /* 19.2px */
     border: none;
     transition: all 0.3s ease;
     /* Smooth animation for hover */
 }

.btn-primary:focus,
 .btn-primary:hover {
     background: #a4ffb685 !important;
     color: #1A1A1A;
     transform: translatey(-2px);
 }

 .btn-outline-seconday {
     border-radius: 58px;
     border: 1px solid #FFF;
     display: flex;
     padding: 12px 24px;
     justify-content: center;
     align-items: center;
     gap: 8px;
     color: #FFF;
     font-size: 16px;
     font-weight: 600;
     line-height: 120%;
     /* 19.2px */

     /* Add smooth transition */
     transition: all 0.3s ease;
     /* Smooth animation for hover */
 }
 .btn-outline-seconday:focus,
 .btn-outline-seconday:hover {

     border: 1px solid #FFF !important;
     transform: translateY(-2px);
     color: var(--primary-color) !important;
 }

 .btn-outline-primary {
     border: 1px solid #213324;
     padding: 12px 24px;
     border-radius: 30px;
     color: #213324;
     font-weight: 600;
     transition: all 0.3s ease;
     /* Smooth animation for hover */


 }
.btn-outline-primary:focus,
 .btn-outline-primary:hover {
   

     color:#213324 !important;
     border: 1px solid #213324 !important; 
     background-color: transparent !important;
     transform: translateY(-2px);


 }

 .bi-arrow-right {
     margin-left: 5px;
     margin-top: 3px;
 }

 header {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     width: 100%;
     top: 16px;
     z-index: 9;

 }

 .navbar {
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.06);
     backdrop-filter: blur(100px);
     padding: 20px;

 }

 .nav-link {
     color: var(--primary-color);

 }

 .nav-link:hover {
     color: var(--secondary-color);

 }

 .home-section {

     height: 650px;
     display: flex;
     justify-content: center;
     align-items: center;

 }

.banner-1{
     background-image: url(/wp-content/uploads/banner1.png);
     background-size: cover;
     background-repeat: no-repeat;
}
.banner-2{
     background-image: url(/wp-content/uploads/homebg.png);
     background-size: cover;
     background-repeat: no-repeat;
}.banner-3{
     background-image: url(/wp-content/uploads/banner3.png);
     background-size: cover;
     background-repeat: no-repeat;
}.banner-4{
     background-image: url(/wp-content/uploads/banner4.png);
     background-size: cover;
     background-repeat: no-repeat;
}
 .description-container {
     width: 100%;
     max-width: 1202px;
     margin: 0px auto;
     margin-top: 83px;
 }

 .home-section .heading-1 {
     text-align: center;
     font-size: 64px;
     font-weight: 600;
     line-height: 140%;
     /* 89.6px */
     color: var(--primary-color);

 }

 .home-section .heading-1 span {
     color: var(--secondary-color);
 }

 .home-section .description {
     text-align: center;
     font-size: 24px;
     font-weight: 400;
     line-height: 120%;
     /* 28.8px */
     color: var(--primary-color);
 }






 .netSuit-section {
     padding: 100px 0px;
 }



 .netSuit-header {
     width: 100%;
     max-width: 912px;
     margin: 0px auto;
 }


 .netSuid-points_container {
     gap: 30px;
 }

 .netSuid-points_container div {
     gap: 21px;
 }


 .column-heading {
     color: var(--description-color);
     font-weight: 500;

 }

 .netSuid-points {
     color: var(--description-color);
     position: relative;
 }

 .bi-check-circle-fill {
     color: #45B26B;
     margin-right: 5px;
 }

 .netSuit-section-services {
     background-color: #F3FFF5;
     padding-bottom: 100px;
     position: relative;
     padding-top: 170px;
     margin-top: 138px;
 }

 .netSuid-card {
     position: absolute;
     top: -102px;
     left: 50%;
     transform: translateX(-50%);
     background-color: #2B422F;
     color: white;
     border-radius: 20px;
     padding: 53px 79px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     width: 90%;
     max-width: 1320px;
     background-image: url(/wp-content/uploads/cardbgRightSide.png), url(/wp-content/uploads/cardbgLeftSide.png);
     background-repeat: no-repeat, no-repeat;
     background-position: left center, right center;
     background-size: auto, auto;
     /* adjust if needed */

 }
.netsuite-service-carousel .item {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-radius: 20px;
    width: 100%;
    max-width: 250px;
    height: 280px;
    background-color: white;
    border: 1px solid #507C5866;
    /* For smooth hover transition */
    transition: all 0.3s ease;
}

/* Hover effect */
.netsuite-service-carousel .item:hover {
    transform: translateY(-1px) scale(1.001);
    box-shadow: 0 4px 12px rgba(80, 124, 88, 0.5); /* <-- shadow with border color */
    border-color: #507C58; /* makes border darker on hover */
}
  .netsuite-service-carousel .owl-item img {
     width: fit-content;
 }

 .netsuite-service-carousel .owl-item {
     display: flex;
     justify-content: center;
 }


 .item-heading {
     color: var(--heading-primary-color);
     font-size: 18px;
     font-weight: 500;
     line-height: 100%;
 }

 .achieve-section {
     background-image: url(/wp-content/uploads/avhievebg.png);
     background-repeat: no-repeat;
     padding: 75px 0px 88px;
 }

 .achieve-heading {
     color: var(--primary-color);
     font-size: 18px;
     font-weight: 600;
 }

 .achieve-heading-underline {

     width: 100px;
     height: 5px;
     border-radius: 10px;
     background-color: #A4FFB6;

 }



 .achieve-header h6 {
     color: var(--secondary-color);
 }

 .achieve-header h6::before {
     background-color: var(--secondary-color);
 }

 .achieve-header h6::after {
     background-color: var(--secondary-color);
 }

 .achieve-header .dot-after {
     background-color: var(--secondary-color);
 }

 .achieve-header .dot-before {
     background-color: var(--secondary-color);
 }

 .value-propostion-section {
     padding: 100px 0px;
 }

 .value-propostion-section h6 {
     margin-left: 60px;
 }

 .our-services-section {
     padding: 60px 0px 100px;
 }


.services-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* overlay gradient */
.services-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    218.35deg,
    #213324 28.43%,
    rgba(66, 102, 73, 0.4) 92.01%,
    rgba(98, 153, 109, 0.3) 105.37%,
    rgba(164, 255, 182, 0.1) 132.4%
  );
  transition: bottom 0.4s ease;
  z-index: 1; /* <-- keep it below content */
}

/* heading */
.services-card-heading {
  color: #fff;
  position: absolute;
  left: 20px;
  top: 78%;
  font-size: 22px;
  transition: top 0.4s ease;
  z-index: 2; /* above overlay */
}

/* ul */
.services-card ul {
  position: absolute;
  left: 5px;
  /* top: 30%; */
  /* opacity: 0; */
  transition: opacity 0.4s ease, top 0.4s ease;
  z-index: 2; /* above overlay */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.services-card ul li {
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  color: #fff;
  list-style-type: none;
  position: relative;
  padding-left: 25px;
}

/* tick */
.services-card ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: white;
  font-size: 16px;
}

/* hover */
.services-card:hover::after {
  bottom: 0;
}

.services-card:hover .services-card-heading {
  top: 15%;
  transform: translateY(-50%);
}

.services-card:hover ul {
  /* opacity: 1; */
  left: 5px;
  top: 30%;

  
}

 .how-work-section {
     padding: 100px 0px;
     background-color: #F3FFF5;
 }

 .ellipse-container {
     background-image: url(/wp-content/uploads/topEllipse.png), url(/wp-content/uploads/bottomEllipse.png);
     background-repeat: no-repeat, no-repeat;
     background-position: 33% 3%, 68% 25%;
 }

 .footer-section {
     padding-top: 100px;
     margin-top: 100px;
 }

 footer {
     background-color: #213324;
     padding-top: 245px;
     position: relative;

 }

 .footer-first-card {
     width: 100%;
     max-width: 366px;
 }

/* COnatct Us */
.wpcf7 .wpcf7-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 2rem;
}

.wpcf7 .wpcf7-row .wpcf7_column-1_2{
	flex-shrink: 0;
	flex-basis: calc(50% - 1rem);
	padding: 0 ;
}

.wpcf7 .wpcf7 .wpcf7-row .wpcf7_column-1 {
	flex-basis: 100%
}

.wpcf7  label {
	margin-bottom: 0.5rem !important;
	font-weight: 600;
	font-size: 14px;
	line-height: 13.61px;
	letter-spacing: 0%;
	color: #565656 !important;

}

.wpcf7 .wpcf7-row .wpcf7_column-1_2 input,
.wpcf7 .wpcf7-row .wpcf7_column-1_2 select,
.wpcf7 .wpcf7-row .wpcf7_column-1 select,
.wpcf7 .wpcf7-row .wpcf7_column-1 textarea {
	background: #F3F3F3 !important;
	border-radius: 10px !important;
	border-color: transparent !important;
	min-height: 45px;
	width: 100%;
	padding: 0.5rem;
}

.wpcf7 .wpcf7_column-1{
	width: 100%;
}
.wpcf7-not-valid-tip{
	color: #dc3232;
    font-size: 0.75em;
    font-weight: normal;
    display: block;
}

.wpcf7 .wpcf7-submit {
	padding: 10px 15px !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	font-weight: 400 !important;
	background: #213324;
	color: #FFF;
	display: inline-flex;	
	align-items: center !important;
	font-weight: 600 !important;
}
.wpcf7 .wpcf7-submit:hover{
	background-color: var(--primary-color) !important;
	color: #426649;	
}

 footer h6 {
     color: var(--secondary-color);
 }

 footer h6::before,
 footer h6::after {
     content: none;
 }

 .footer-link-headings {
     font-weight: 600;
     font-size: 16px;
     line-height: 100%;
     letter-spacing: 0%;
     color: var(--primary-color);

 }

 .footer-link-subheading {
     font-weight: 500;
     font-size: 15px;
     line-height: 100%;
     letter-spacing: 0%;
     text-transform: capitalize;
     color: #E6E6E6;

 }

 .footer-link {
     font-size: 14px;
     line-height: 100%;
     letter-spacing: 0%;
     text-transform: capitalize;
     color: #E6E6E6;
     text-decoration: none;

 }

 .footer-link:hover {

     color: var(--secondary-color);
     text-decoration: underline;

 }

 .bi-envelope-fill,.bi-telephone-fill, .bi-person-circle {
     color: var(--secondary-color);
     font-size: 20px;
     display: contents;
 }

 .footer-divider {
     border: 1px solid #FFFFFF33;
 }

 .copywrite-section {
     padding-top: 24px;
     padding-bottom: 30px;
 }

 .footer-card {
     background-image: url(/wp-content/uploads/footerCardbg.png);
     background-repeat: no-repeat;
     background-size: 100% 100%;
     max-width: 1320px;
     width: 100%;
     padding: 50px 80px 40px 80px;
     position: absolute;
     top: -102px;
     left: 50%;
     transform: translateX(-50%);
 }

 .footer-card p {
     font-size: 20px;
     line-height: 151%;
 }


 .home-carousel.owl-carousel .owl-nav button.owl-prev {
     left: 50px;
 }
  .home-carousel.owl-carousel .owl-nav button.owl-next {
     right: 50px;
 }

 .owl-carousel .owl-nav button.owl-next {

     right: -40px;
 }

 .owl-carousel .owl-nav button.owl-prev {

     left: -40px;
 }

 .owl-carousel .owl-nav button.owl-next {

     right: -40px;
 }

 .owl-carousel .owl-nav button.owl-prev,
 .owl-carousel .owl-nav button.owl-next {
     padding: 0px 17px !important;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);

 }

  .home-carousel.owl-theme .owl-nav [class*=owl-] {
     background-color: transparent !important;
     border-radius: 50%;
     display: flex !important;
     font-size: 30px !important;
     border: 1px solid #FFFFFF !important;
     box-shadow: 0px 0px 16px 0px #0000000F !important;
     color: white !important;
     transition: all 0.3s ease;
     /* <-- Smooth transition added */
 }

 .owl-theme .owl-nav [class*=owl-] {
     background-color: #213324 !important;
     border-radius: 50%;
     display: flex !important;
     font-size: 30px !important;
     border: 1px solid #213324 !important;
     box-shadow: 0px 0px 16px 0px #0000000F !important;
     color: white !important;
     transition: all 0.3s ease;
     /* <-- Smooth transition added */
 }

 .owl-theme .owl-nav [class*=owl-]:hover {
     background-color: #DBFFDD !important;
     border: 1px solid #DBFFDD !important;
     color: black !important;
 }

 .netsuite-service-carousel .owl-stage-outer {
     padding: 10px;
 }





 /* General styling */






.tab-headers {
    flex: 1;
}


.mobile-accordion-header {

     background-color: #FAFAFA;
     padding: 6px 12px;
     border-radius: 12px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    position: relative;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

/* Arrow using pseudo-element */
.mobile-accordion-header::after {
    content: "";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg); /* up by default */
    width: 7px;
    height: 12px;
    background-image: url(/wp-content/uploads/rightArrow.png); /* original arrow image pointing up */
    background-size: cover;
    transition: transform 0.3s ease;
      filter: invert(1); /* black color */
}

/* Active / expanded state */
.mobile-accordion-header.active {
    background-color: #2B422F;
    color: #fff; /* white text */
}

.mobile-accordion-header.active::after {
  
      filter: invert(0); /* black color */
}

.mobile-accordion-header.active::after {
    transform: translateY(-50%) rotate(90deg); /* rotate arrow down */
}

  .mobile-accordion-header.active img {
     filter: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(3005%) hue-rotate(61deg) brightness(102%) contrast(96%);
 }


 .mobile-accordion-header.active span {
     color: var(--primary-color);
     font-weight: 500;
     font-size: 16.5px;
 }



.tab-headers .netSuit-menu {
       background-color: #FAFAFA;
     padding: 6px 12px;
     display: flex;
     align-items: center;
     gap: 12px;
     border-radius: 12px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: center;
    transition: background 0.3s;
}

.tab-headers .netSuit-menu.active {
   background-color: #2B422F;
     background-image: url(/wp-content/uploads/rightArrow.png);
     background-repeat: no-repeat;
     background-position: 96% 50%;
}



 .netSuit-menu span {
     color: #000000;
 }

  .netSuit-menu.active img {
     filter: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(3005%) hue-rotate(61deg) brightness(102%) contrast(96%);
 }


 .netSuit-menu.active span {
     color: var(--primary-color);
     font-weight: 500;
     font-size: 16.5px;
 }

.tab-contents {
    flex: 2;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}




/* contact page css  */
 .contact-section {

     height: 600px;
     display: flex;
     justify-content: center;
     align-items: center;
       background-image: url(/wp-content/uploads/contactbg.png);
     background-size: cover;
     background-repeat: no-repeat;

     
 }
  .contact-section .heading-1 {
     text-align: center;
     font-size: 64px;
     font-weight: 600;
     line-height: 140%;
     /* 89.6px */
     color: var(--primary-color);

 }

.contact-page footer {
     padding-top: 50px;

 }

 .contact-page .footer-section {
    padding-top: 0px;
    margin-top: 0px;
}


/* Responsive accordion for mobile */
/* Hide tab headers on desktop only if needed */
@media (max-width: 1024px) {
 
}


 @media (min-width: 1500px) {

     .container,
     .container-lg,
     .container-md,
     .container-sm,
     .container-xl,
     .container-xxl {
         max-width: 1423px;
     }
 }



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

     .netSuit-section {
         padding: 50px 0px;
     }

     .netSuit-section-services {

         padding-bottom: 50px;
         padding-top: 140px;
         margin-top: 102px;
     }

     .achieve-section {
         height: 800px;
         background-size: 100% 102%;
         padding: 50px 0px 50x;

     }

     .value-propostion-section {
         padding: 50px 0px;
     }

     .our-services-section {
         padding: 50px 0px;
     }

     .how-work-section {
         padding: 50px 0px;
     }


     .netSuid-card {
         padding: 30px;
         flex-direction: column;
         gap: 20px;
         width: 95%;
     }

     .contact-section .heading-1,
     .home-section .heading-1 {
         font-size: 30px;
     }

     .home-section .description {
         font-size: 16px;

     }

     h1 {
         font-size: 25px;
     }

     h2 {
         font-size: 22px;

     }


     .value-propostion-section h6 {
         margin-left: 0px;
     }

     .btn-primary,
     .btn-outline-seconday,
     .btn-outline-primary {
         font-size: 14px;
     }

     .footer-card {
         padding: 30px 20px;
     }

     .navbar {
         padding: 10px;
     }
     .ellipse-container {
         background-image: none;
     }
     .footer-section {
         margin-top: 30px;
     }

     .owl-carousel .owl-nav button.owl-prev {
         left: 0px;
     }

     .owl-carousel .owl-nav button.owl-next {
         right: 0px;
     }

     .netsuite-service-carousel .item {

         width: 100%;
         max-width: 350px;

     }

        .tab-headers {
        display: none !important; /* hide tab headers on mobile */
    }

    .tab-content {
        border: 1px solid #ccc;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 10px;
    }

    .tab-content .column-heading {
        cursor: pointer;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .tab-content .netSuid-points-container {
        display: none; /* hide content initially */
        margin-top: 5px;
    }

    .tab-content.active .netSuid-points-container {
        display: block; /* optional: first one open */
    }
 }