/*Fonts */
:root {
  --default-font:'Montserrat', sans-serif;
  --bs-body-font-family:'Montserrat', sans-serif;
  --heading-font: 'Merriweather', serif;
  --nav-font:'Montserrat', sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #da2928; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #111111; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #1873d2; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #212529;  /* The default color of the main navmenu links */
  --nav-hover-color: #1873d2; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #1873d2 /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

@font-face {
  font-family: "Nevera-Regular";
        src: url("../fonts/Nevera-Regular.woff2") format("woff2"),
       url("../fonts/Nevera-Regular.woff") format("woff");

}

.sitename,span .sitename{
 font-family: "Nevera-Regular",serif !important;
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f9f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #1b1b1b;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #353535;
  --contrast-color: #ffffff;
}

header{
 max-height:60px;
}

.header .btn-getstarted{
    color:var(--accent-color) ;
    background:var(--contrast-color);
    font-size: 14px;
    padding: 8px 25px;
    margin: 0 0 0 10px;
    border: 1px solid var(--accent-color);
    border-radius: 4px;
    transition: 0.3s;
}


 .header .btn-getstarted:hover{
background: hsla(258, 67%, 54%, 1)!important;

background: linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%)!important;

background: -moz-linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%)!important;

background: -webkit-linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%)!important;

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#6839D8", endColorstr="#1873D2", GradientType=1 )!important;
 }


.navmenu a.active {
  color: var(--accent-color) ;
  font-weight: 300;
}

.stats i {
    background-color: var(--surface-color);
    color:#683ad8;
    box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
    width: 54px;
    height: 54px;
    font-size: 24px;
    border-radius: 50px;
    border: 2px solid var(--background-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.tabs .nav-link.active {
   background: hsla(258, 67%, 54%, 1);

background: linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%);

background: -moz-linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%);

background: -webkit-linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#6839D8", endColorstr="#1873D2", GradientType=1 );
    color: var(--contrast-color);
    border-color: var(--accent-color);

}

.hero .btn-get-started {
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 4px;
    transition: 0.3s;
     background: hsla(258, 67%, 54%, 1);

background: linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%);

background: -moz-linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%);

background: -webkit-linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#6839D8", endColorstr="#1873D2", GradientType=1 );
 
    color: var(--contrast-color);
}


.about .content .about-btn:hover {
  background: #afca0f;
}

.about .content .about-btn{
    border: 2px solid #afca0f;
}

.about .icon-box i {
  color:  #afca0f;
}


/* a:hover{
    color: hsla(258, 67%, 54%, 1)!important;
    color:  linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%)!important;
    color: -moz-linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%)!important;
    color: -webkit-linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%)!important;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#6839D8", endColorstr="#1873D2", GradientType=1 )!important;
} */


.footer .footer-newsletter .newsletter-form input[type=submit],#scroll-top,.contact .php-email-form button[type=submit],.pricing .featured .pricing-item {

background: hsla(258, 67%, 54%, 1)!important;

background: linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%)!important;

background: -moz-linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%)!important;

background: -webkit-linear-gradient(135deg, hsla(258, 67%, 54%, 1) 0%, hsla(211, 79%, 46%, 1) 50%, hsla(211, 79%, 46%, 1) 100%)!important;

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#6839D8", endColorstr="#1873D2", GradientType=1 )!important;

}

.scroll-top {
    border-radius: 100px;
}

.testimonials .testimonial-item,.services .service-item,.stats .stats-item{
     border-radius: 50px;

}

/* .services .service-item{
background: hsla(1, 70%, 51%, 1);

background: linear-gradient(135deg, hsla(1, 70%, 51%, 1) 0%, hsla(1, 70%, 51%, 1) 50%, hsla(42, 100%, 43%, 1) 100%);

background: -moz-linear-gradient(135deg, hsla(1, 70%, 51%, 1) 0%, hsla(1, 70%, 51%, 1) 50%, hsla(42, 100%, 43%, 1) 100%);

background: -webkit-linear-gradient(135deg, hsla(1, 70%, 51%, 1) 0%, hsla(1, 70%, 51%, 1) 50%, hsla(42, 100%, 43%, 1) 100%);

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#DA2D2A", endColorstr="#DA2D2A", GradientType=1 );
} */

.testimonials .testimonial-item h4,.testimonials .testimonial-item h4 ,.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
color: var(--accent-color);
}

.contact .php-email-form input[type=text], .contact .php-email-form input[type=email], .contact .php-email-form textarea {
  border:1px solid var(--default-color);
}

.pricing ul i {
 color:#afca0f
}

.stats .stats-item span, .stats .stats-item span .purecounter {
color: hsla(1, 70%, 51%, 1)!important;

color: linear-gradient(135deg, hsla(1, 70%, 51%, 1) 0%, hsla(1, 70%, 51%, 1) 32%, hsla(42, 100%, 43%, 1) 56%)!important;

color: -moz-linear-gradient(135deg, hsla(1, 70%, 51%, 1) 0%, hsla(1, 70%, 51%, 1) 32%, hsla(42, 100%, 43%, 1) 56%)!important;

color: -webkit-linear-gradient(135deg, hsla(1, 70%, 51%, 1) 0%, hsla(1, 70%, 51%, 1) 32%, hsla(42, 100%, 43%, 1) 56%)!important;

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#DA2D2A", endColorstr="#DA2D2A", GradientType=1 )!important;
}

#footer {
    background: linear-gradient(
        135deg,
        hsla(258, 66%, 53%, 1) 0%,
        hsla(258, 66%, 53%, 1) 32%,
        hsla(211, 79%, 46%, 1) 56%
    );

    transition: opacity 1.5s ease-in-out;
}

#footer {
    transition: opacity 2.5s ease-in-out;
}

/* SECTION BASE */
#pricing {
  position: relative;       /* creates stacking context */
  padding: 4rem 0;
  overflow: visible;        /* prevent clipping */
  z-index: 1;
}

/* FLEX CONTAINER */
/* .pricing-visuals {
  position: relative;
  display: flex;
  align-items: flex-end; 
  justify-content: flex-start;
  gap: 0;
  margin-top: 3rem;
  flex-wrap: wrap;
  z-index: 2;
}*/

.pricing-visuals {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0;

  width: fit-content;   /* or a fixed/max width */
  margin: 0 auto;
}


/* SVG */
.svg-wrapper {
  position: relative;
  width: 600px;
  height: 600px;
  z-index: 2;
}

.svg-wrapper svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* SVG TEXT */
.svg-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: 3;
  pointer-events: none;
}

.svg-text p{
  font-size:60px;
}

.svg-text p{
  font-weight: 900!important;
  margin-bottom:0px;
}

.svg-text h3{
  font-size:40px!important;
  font-weight:100!important;
}

.text-2{
  margin-top: 0;
  font-size:40px!important;
  font-weight:100!important;
}

/* IMAGE */
.image-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  max-height: 400px;        /* keeps image inside section */
  z-index: 3;               /* ABOVE background */
  margin-left:0!important;
}

.image-wrapper {
  margin-left: -80px!important;
}



.image-wrapper img {
  display: block;
  max-height:750px;
  width: auto;
}

#tabs .img-fluid{
 border-radius: 50px;
 width:auto;
 min-height:400px!important;
 height: 400px;
}

.about .icon-box h4 a:hover {
color: hsla(69, 87%, 43%, 1)!important;

color: linear-gradient(135deg, hsla(69, 87%, 43%, 1) 0%, hsla(69, 87%, 43%, 1) 32%, hsla(42, 90%, 41%, 1) 56%)!important;

color: -moz-linear-gradient(135deg, hsla(69, 87%, 43%, 1) 0%, hsla(69, 87%, 43%, 1) 32%, hsla(42, 90%, 41%, 1) 56%)!important;

color: -webkit-linear-gradient(135deg, hsla(69, 87%, 43%, 1) 0%, hsla(69, 87%, 43%, 1) 32%, hsla(42, 90%, 41%, 1) 56%)!important;

filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#AFCB0E", endColorstr="#AFCB0E", GradientType=1 );

}

#tabs p,#tabs li,#tabs span{
  color:#494949
}

@media screen and (max-width: 768px) {
    .navmenu a{
     font-size:0.8rem!important;
     /* text-align: center;
     justify-content: center;
     justify-items: center; */
      }

      #navmenu ul{
        height:30%!important;
        width: 50%!important;
      }

    .hero h2 {    
      font-size:30px!important;
    }

    .hero p,#tabs p,.fst-italic{
      font-size:16px!important;
    }

    .header.btn-getstarted {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .header .btn-getstarted {
    padding:5px 5px !important;
    margin: 0 5px 0 5px!important;
}


.header .logo h1 {
 font-size: 18px!important;
}

  /* .mobile-nav-toggle{ 
     margin-left:20px!important;
  } */ 

  nav i{
    font-size:25px!important;
   }

    .about h3,.about .icon-box ,.testimonials .testimonial-item {
    text-align: center;
    }

    .about .icon-box{
        align-items: center!important;
        align-content:center!important;
        justify-items:center!important;
    }

    .about .icon-box i,#footer .footer-about,#footer .footer-contact,#footer .footer-links,#footer .social-links,#footer .footer-newsletter{
    text-align: center!important;
    align-items: center!important;
    align-content:center!important;
    justify-items:center!important;
    position: relative;
    }

    #about p,#stats p,#tabs p,.tabs .tab-pane ul,#services p,#testimonials p,#pricing p,.pricing-item span,#faq p,#faq h3{
    font-size: 16px;
    }

    #contact p, #contact h3, #footer p, #footer h4,#footer a{
    font-size: 16px;

    }
   
    .footer .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center; 
    }
    
    .footer .footer-links ul li {
        padding: 6px 0;
    }

    .footer .footer-links ul a {
    color:#ffff;
    }

   .contact .php-email-form input[type=text], .contact .php-email-form input[type=email], .contact .php-email-form textarea {
       font-size: 16px;
  }

    .footer img{
       align-items: center!important;
        align-content:center!important;
        justify-items:center!important;
    }

    .footer .footer-about{
      margin-top: 200px!important;
    }

    .stats .stats-item {
       width:50%
    }

   .pricing .pricing-item , .faq .faq-container .faq-item h3 {
    text-align: center!important;
    align-items: center!important;
    align-content:center!important;
    justify-items:center!important;
    position: relative;
   }


 .image-wrapper {
  visibility: hidden;
  display: none;
  }

 
.svg-text p{
  font-size:40px!important;
}

.svg-text h3{
  font-size:20px!important;
}

 #tabs .img-fluid { 
  width: 100%;
  height: auto;
  object-fit: contain; 
  border-radius:50px!important;  /* IMPORTANT */ 
  }

    #pricing .section-title,#pricing .section-title h2{
    margin-bottom: 0px!important;
  }

  .pricing-visuals {
     margin-top:0px!important;  
     margin-bottom:0px!important;
  }

 /* Make sure the parent container does not restrict centering */
    .svg-wrapper {
        position: relative;          /* NOT fixed or absolute */
        display: block;
        width: 100%;
        max-width:400px;
        margin-top:0px!important;  
        margin-bottom:0px!important;       /* small top+bottom margin, auto left/right centers */
        text-align: center;
        background: transparent;      /* no background */
    }

    /* SVG scales with wrapper */
    .pricing-blob {
        width: 100%;
        height: auto;
        display: block;
        margin-top:0px!important;  
        margin-bottom: 0px!important;
    }

    /* Text overlay – centered inside blob */
    .svg-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 85%;                  /* leaves some padding from blob edge */
        text-align: center;
        color: white;
        font-size: clamp(0.7rem, 3.5vw, 0.9rem); /* scales with screen width */
        line-height: 1.3;
        pointer-events: none;
    }

    .svg-text h3 {
        font-size: 1.3em;
        margin: 0 0 0.2em;
        font-weight: bold;
        white-space: normal;
        word-break: break-word;
    }

    .svg-text p {
        margin: 0.2em 0;
        font-size: 0.9em;
    }

    .svg-text .text-2 {
        font-size: 0.75em;
        opacity: 0.9;
    }

    /* Ensure the parent section/container allows centering */
    /* .container .row, .col-md-12, .section {
        display: flex;
        flex-direction: column;
        align-items: center;
    } */
}