/*
Theme Name: SwipeSpec Marketing Theme
Theme URI: https://swipespec.com
Author: SwipeSpec Team
Author URI: https://swipespec.com
Description: A sleek and efficient WordPress theme for marketing SwipeSpec, a SaaS startup focused on boosting productivity for specification writers in software companies.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: swipespec-marketing-theme
*/

/* GENERAL */
html {
    -webkit-tap-highlight-color: transparent; /* or rgba(0,0,0,0); */
    scroll-behavior: smooth;
  }

  
*, *::before, *::after {
    box-sizing: border-box;
}
@font-face {
    font-family: 'Salisbury';
    src: url('/newmarketing/wp-content/themes/swipespec/fonts/salisburybold-pvzxr-webfont.woff2') format('woff2'),
         url('/newmarketing/wp-content/themes/swipespec/fonts/salisburybold-pvzxr.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html{
    font-size: 20px;
    font-family: 'Inter', Arial, sans-serif;
}
@media screen and (max-width: 1366px) {
    html{
        font-size: 17px;
    }
}
@media screen and (max-width: 1024px) {
    html{
        font-size: 15px;
    }
}
@media screen and (max-width: 550px) {
    html{
        font-size: 13px;
    }
}

body{
    background-color: #F6F6F6;
    color: #1a1a1a;
    font-family: 'Inter', Arial, serif;
}
.standard-container{
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    display: block;
}
.centered-container{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}

/* HEADER */
.header-logo-link{
    line-height: 1;
    padding: 0;
    margin: 0;
    display: block
}
.header-logo{
    max-width: 12.788rem;
    display: block;
    margin: 0;
    padding: 0;
}
@media screen and (max-width: 860px) {
    .header-logo {
        max-width: 11.788rem;
    }
}
@media screen and (max-width: 800px) {
    .header-logo {
        max-width: 12.788rem;
    }
}
@media screen and (max-width: 500px) {
    .header-logo{
        max-width: 9rem;
    }
}
.site-header{
    width: 100%;
    position: sticky;
    top:0;
    left: 0;
    padding: .7rem;
    background-color: #F6F6F6;
    box-shadow: #1a1a1a29 0px 1px 4px;
    z-index: 999;
}
.site-header .container{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.header-navigation-wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.site-navigation ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.site-navigation ul li{
    padding: 0;
    margin: 0;
}
.site-navigation ul li{
    margin-left: 2rem;
}
.site-navigation ul li:first-child{
    margin-left: 0;
}
.site-navigation ul li a{
    text-decoration: none;
    font-size: .9rem;
    color:#1a1a1a;
    font-family: 'Inter', serif;
    border-bottom: 2px solid transparent;
    transition: border-bottom .2s ease-in-out
}
.site-navigation ul li.current-menu-item a{
    border-bottom: 2px solid transparent;
}

.site-navigation ul li a:hover, .site-navigation ul li.current-menu-item a, .site-navigation ul li.current-page-ancestor a{
    border-bottom: 2px solid #1a1a1a;
}
.site-navigation ul li.menu-item-home a{
    border-bottom: 2px solid transparent;
}
.site-navigation ul li a:hover{
    border-bottom: 2px solid #1a1a1a;
}


@media screen and (max-width: 800px) {
    .site-navigation{
        position: fixed;
        top: 61px;
        height: calc(100% - 61px);
        left: 100%;
        width: 100%;
        display: block;
        background: #1a1a1a;
        transition: left .4s ease-in-out;
        border-radius: 0;
        box-shadow: #21212163 0px 1px 4px;
        border-left: 0px solid #F6F6F6;
        border-bottom: 0px solid #F6F6F6;
    }
    .site-navigation.mobile-open{
        left: 0%;
    }
    .site-navigation ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-content: flex-end;
        align-items: flex-end;
        padding: 3rem;
    }
    .site-navigation ul li{
        margin-bottom: 2rem;
        text-align: right;
    }
    .site-navigation ul li a {
        font-size: 1.4rem;
        font-size: 3.6rem;
        font-weight: 800;
        color: #F6F6F6;
    }
}

@media screen and (max-width: 550px) {
    .site-navigation{
        height: calc(100% - 53px);
        top: 53px;
    }
}

@media screen and (max-width: 360px) {
    .site-navigation{
        height: calc(100% - 51px);
        top: 51px;
    }
}


.header-cta{
    padding: .8rem 1.6rem;
    text-decoration: none;
    font-size: .8rem;
    background-color: #1a1a1a;
    color: #F6F6F6;
    font-family: 'Inter', serif;
    border-radius: 5rem;
    line-height: 1;
    margin: 0;
    font-weight: 900;
    letter-spacing: .6px;
    border: 2px solid transparent;
    transform: scale(1);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes tap highlight */
    touch-action: manipulation; /* Improves touch responsiveness */
    transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out, transform .1s ease-in-out;
}
.header-cta:hover{
    background-color: var(--hover-color);
    color: #1a1a1a;

    border: 2px solid #1a1a1a;
}
.header-cta:active{
    transform: scale(.9);
}

.header-cta-margin{
    margin-left: 1rem;
}

@media screen and (max-width: 360px) {
    .header-cta {
        padding: .7rem;
    }
}

h1,h2,h3,h4,h5,h6,p{
    font-family: 'Inter', sans-serif;
}

/* FOOTER */
.dark-main-footer{
    background-color: #1a1a1a;
    margin-top: 3rem;
    padding: 3rem 0;
}
.footer-row-wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}
.footer-logo{
    max-width: 7rem;
    display: block;
    margin: 0;
    padding: 0;
}
.footer-menu{
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-menu li{
    display: inline;
    padding: 0;
    margin: 0;
    margin-left: 2rem;
}
.footer-menu li:first-child{
    margin-left: 0;
}
.footer-menu li.social-footer:first-child{
    margin-left: 2rem;
}
.footer-menu li a{
    color: #F6F6F6;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 900;
    font-family: 'Inter', serif;
    border-bottom: 2px solid transparent;
    transition: border-bottom .2s ease-in-out
}

.footer-menu li a:hover, .footer-menu li.current-menu-item a{
    border-bottom: 2px solid #F6F6F6;
}

.footer-privacy-menu{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-end;
    align-items: center;
}

.footer-legal-text{
    text-align: center;
    color: #F6F6F6;
    font-weight: 300;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: .7rem;
    line-height: 1.5;
    margin-top: 3rem;
}

.footer-menu li.social-footer{
    display: inline-block;
}
.social-footer a{
    display: inline-block;
}



@media screen and (max-width: 1000px) {
    .footer-privacy-menu {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
    }
    #menu-footer-privacy-menu{
        margin-bottom: 3rem;
    }
    .footer-menu li.social-footer:first-child {
        margin-left: 0;
    }
}

@media screen and (max-width: 600px) {
    .footer-logo {
        max-width: 10rem;
        margin-bottom: 2rem;
    }
    #menu-footer-privacy-menu{
        margin-bottom: 2rem;
    }
    .footer-row-wrapper {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        width: 95%;
        max-width: 1200px;
        margin: 0 auto;
        flex-direction: column;
        align-content: center;
        align-items: center;
    }
    .footer-privacy-menu {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-end;
        align-items: center;
    }
    .footer-menu  .social-footer{
        margin-left: 1rem;
    }
}

/* HERO SECTION */
.hero-title{
    font-weight: 900;
    font-size: 3.6rem;
    text-align: center;
    padding: 0;
    margin: 0;
    margin-bottom: 2rem;
}
.hero-title-testimonial{
    font-size: 2.6rem;
}

.hero-subtitle{
    font-weight: 300;
    font-size: 1.6rem;
    color: #555555;
    text-align: center;
    padding: 0;
    margin: 0;
    margin-bottom: 2rem;
}

.hero-cta-section{
    background-color: #f6f6f6;
    /*background-image: url('img/pattern-dark.png');*/
    padding: 6rem 0;
}


/* CTA LARGE */
.cta-large{
    padding: .8rem 2.6rem;
    text-decoration: none;
    font-size: 1.6rem;
    display: inline-block;
    background-color: #1a1a1a;
    color: #F6F6F6;
    font-family: 'Inter', serif;
    border-radius: 5rem;
    line-height: 1;
    margin: 0;
    font-weight: 900;
    letter-spacing: .6px;
    border: 4px solid transparent;
    transform: scale(1);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes tap highlight */
    touch-action: manipulation; /* Improves touch responsiveness */
    transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out, transform .1s ease-in-out;
}
.cta-large:hover{
    background-color: var(--hover-color);
    color: #1a1a1a;
    border: 4px solid #1a1a1a;
}
.cta-large:active{
    transform: scale(.9);
}

@media screen and (max-width: 440px) {
    .cta-large{
        text-align: center;
        width: 100%;
    }
}

/* CTA LARGE */
.cta-medium{
    padding: .8rem 1.6rem;
    text-decoration: none;
    font-size: 1rem;
    display: inline-block;
    background-color: #1a1a1a;
    color: #F6F6F6;
    font-family: 'Inter', serif;
    border-radius: 5rem;
    line-height: 1;
    margin: 0;
    font-weight: 900;
    letter-spacing: .6px;
    border: 4px solid transparent;
    transform: scale(1);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes tap highlight */
    touch-action: manipulation; /* Improves touch responsiveness */
    transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out, transform .1s ease-in-out;
}
.cta-medium:hover{
    background-color: var(--hover-color);
    color: #1a1a1a;
    border: 4px solid #1a1a1a;
}
.cta-medium:active{
    transform: scale(.9);
}

@media screen and (max-width: 440px) {
    .cta-medium{
        text-align: center;
        width: 100%;
    }
}

/* TWO COLUMNS IMAGE CTA SECTION */
.two-columns-image-cta-section{
    padding: 3rem 0;
}
.two-columns-image-cta-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.two-columns-image-cta-column{
    width: 49%;
}

.two-columns-image-cta-container .column-title{
    font-size: 2.4rem;
    font-weight: 900;
    padding: 0;
    margin: 0;
    line-height: 3rem;
    margin-bottom: 1.2rem;
}
.two-columns-image-cta-container .column-subtitle{
    font-size: 1.2rem;
    color: #555555;
    font-weight: 300;
    line-height: 1.8rem;
    padding: 0;
    margin: 0;
    margin-bottom: 1.6rem;
}
.two-columns-image-cta-image{
    margin: 0 auto;
    display: block;
    width: 100%;
    max-width: 500px;
    filter: grayscale(0%);
    transition: filter .2s ease-in-out;
}
.two-columns-image-cta-container:hover .two-columns-image-cta-image{
    filter: grayscale(0%);
}


@media screen and (max-width: 744px) {
    .order-first{
        order: 1;
    }
    .two-columns-image-cta-container{
        flex-wrap: wrap;
    }
    .two-columns-image-cta-column{
        width: 100%;
    }
    .two-columns-image-cta-image{
        margin-bottom: 2rem;
    }
}



/* TWO COLUMN TEXT CTA DARK SECTION */
.two-column-text-cta-dark-section{
    background-color: #1a1a1a;
    color: #F6F6F6;
    padding: 6rem 0;
}

.columns-wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
}

.text-cotnent-block{
    width: 49%;
    max-width: 450px;
    margin-bottom: 5rem;
}


.two-column-block-main-title{
    font-size: 2rem;
    margin: 0;
    padding: 0;
    font-weight: 900;
    margin-bottom: 5rem;
}

.columnt-content-title{
    font-size: 1.6rem;
    margin: 0;
    padding: 0;
    font-weight: 900;
    margin-bottom: 1.2rem;
}
.columnt-content-text{
    margin: 0;
    padding: 0;
    font-size: .9rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}
.columnt-content-text:last-child, .columnt-content-title:last-child{
    margin-bottom: 0;
}

.cta-dark{
    background: #f6f6f6;
    border: 4px solid #f6f6f6;
    color: #1a1a1a;
}
.cta-dark:hover{
    border: 4px solid var(--hover-color);
}

@media screen and (max-width: 744px) {
    .columns-wrapper{
        flex-wrap: wrap;
    }
    .text-cotnent-block{
        width: 100%;
    }
    .two-column-block-main-title {
        max-width: 450px;
        width: 100%;
    }
    .columnt-content-text:last-child, .columnt-content-title:last-child {
        margin-bottom: 2rem;
    }
    .text-cotnent-block {
        margin-bottom: 0rem;
    }
    .text-cotnent-block:last-child {
        margin-bottom: 5rem;
    }
}

/* VIDEO SEGMENT */

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: calc(56.25% - 8px); /* Aspect ratio 16:9 */
    height: 0;
    overflow: hidden;
    filter: grayscale(0%);
    transition: filter .2s ease-in-out;
    border-radius: 30px;
    border: 4px solid #1a1a1a;
    background-color: #1a1a1a;

}
.video-container-video-segment{
    margin-bottom: 2rem;
}
.video-container:hover{
    filter: grayscale(0%);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}


.full-width-video-section{
    padding: 3rem 0;
}

.video-block-main-title{
    font-size: 2rem;
    margin: 0;
    padding: 0;
    font-weight: 900;
    margin-bottom: .3rem;
    width: 100%;
}

.video-block-main-subtitle{
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: .9rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.two-columns-image-cta-column:first-child .video-padding-halfer-fix{
    padding-right: 1rem;
}
.two-columns-image-cta-column:last-child .video-padding-halfer-fix{
    padding-left: 1rem;
}

@media screen and (max-width: 744px) {
    .two-columns-image-cta-column:first-child .video-padding-halfer-fix {
        padding-right: 0rem;
        margin-bottom: 2rem;
    }
    .two-columns-image-cta-column:last-child .video-padding-halfer-fix {
        padding-left: 0rem;
        margin-bottom: 2rem;
    }
}




.hamburger {
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: manipulation;
    margin-left: 1rem;
    display: none;
}
@media screen and (max-width: 800px) {
    .hamburger{
        display: block;
    }
}

.hamburger span {
    position: absolute;
    display: block;
    width: 30px;
    height: 4px;
    background: #000;
    border-radius: 2px;
    left: 50%;
    top: 50%;
    transition: 0.3s ease;
    transform-origin: center;
}

/* Positions of lines in hamburger state */
.hamburger span:nth-child(1) {
    transform: translate(-50%,-50%) translateY(-8px);
}
.hamburger span:nth-child(2) {
    transform: translate(-50%,-50%);
}
.hamburger span:nth-child(3) {
    transform: translate(-50%,-50%) translateY(8px);
}

/* Open (X) state transformations */
.hamburger.open span:nth-child(1) {
    transform: translate(-50%,-50%) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
    transform: translate(-50%,-50%) scaleX(0);
}
.hamburger.open span:nth-child(3) {
    transform: translate(-50%,-50%) rotate(-45deg);
}




/* PRICE TABLE */
.pricing-section{
    padding: 3rem 0;
}
.price-table-flex-wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: stretch;
    justify-content: center;
}

.price-column{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    text-decoration: none;
    color: #1a1a1a;
}

.price-column p, .price-column h3, .price-column ul{
    width: 100%;
    margin: 0;
    padding: 0;
}

.first-price-column{
    width: 31%;
    border-radius: 30px 0 0 30px;
    margin: 1.5rem 0;
    border-top: 4px solid #1a1a1a;
    border-left: 4px solid #1a1a1a;
    border-bottom: 4px solid #1a1a1a;
    background-color: #F6F6F6;
    transition:transform .2s ease-in-out;
}
.second-price-column{
    background: #F6F6F6;
    color: #1a1a1a;
    width: 35%;
    border-radius: 30px;
    border: 4px solid #1a1a1a;
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
    transform: scale(1);
    transition:transform .2s ease-in-out;
}
.second-price-column:hover{
    transform: scale(1.02);
}
.third-price-column{
    width: 31%;
    border-radius: 0 30px 30px 0;
    margin: 1.5rem 0;
    border-top: 4px solid #1a1a1a;
    border-right: 4px solid #1a1a1a;
    border-bottom: 4px solid #1a1a1a;
    background-color: #F6F6F6;
    transition:transform .2s ease-in-out;
}
.column-dark.price-column{
    color: #F6F6F6;
}
@media screen and (max-width: 1366px) {
    .first-price-column{
        width: 27%;
    }
    .second-price-column{
        width: 32%;
    }
    .third-price-column{
        width: 27%;
    }
}

@media screen and (max-width: 1200px) {
    .first-price-column{
        width: 32%;
    }
    .second-price-column{
        width: 36%;
    }
    .third-price-column{
        width: 32%;
    }
}
@media screen and (max-width: 880px) {
    .price-table-flex-wrapper {
        flex-direction: column;
    }
    .first-price-column {
        border-radius: 30px;
        border: 4px solid #1a1a1a;
        margin-top: 0;
    }
    .third-price-column {
        border-radius: 30px;
        border: 4px solid #1a1a1a;
        margin-bottom: 0;
    }
    .first-price-column{
        width: 90%;
        max-width: 390px;
    }
    .second-price-column{
        width: 90%;
        max-width: 390px;
    }
    .third-price-column{
        width: 90%;
        max-width: 390px;
    }
}


.price-pricing{
    font-size: 2.4rem;
    font-weight: 900;
    padding: 0;
    margin: 0;
    line-height: 3rem;
}

.pricing-ctas{
    padding: .8rem 2.6rem;
    text-decoration: none;
    font-size:1.6rem;
    background-color: #1a1a1a;
    color: #F6F6F6;
    font-family: 'Inter', serif;
    border-radius: 5rem;
    line-height: 1;
    margin: 0;
    font-weight: 900;
    letter-spacing: .6px;
    border: 4px solid transparent;
    transform: scale(1);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    touch-action: manipulation;
    transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out, transform .1s ease-in-out;
}
.column-dark .pricing-ctas{
    background-color:#F6F6F6;
    color: #1a1a1a;
    border: 4px solid #F6F6F6;
}

.price-column h3.pricing-tier-name{
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.price-column .pricing-price-paragraph{
    font-weight: 900;
    font-size: .9rem;
    margin-bottom: 1.5rem;
}
.price-column .price-tier-descriptor{
    font-size: 1.3rem;
    line-height: 1.5; 
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.price-column .billed-anually-indicator{
    margin-bottom: 1.5rem;
    color: #707070;
    letter-spacing: 1px;
    font-size: .8rem;
}


.pricing-cta-left{

}

.pricing-cta-center{

}

.pricing-cta-right{

}



/* 1) Remove default list style. */
.custom-list-checkmark {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 2) Add space so the icon doesn't overlap the text. */
.custom-list-checkmark li {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative; /* So :before is positioned relative to li. */
    font-size: .9rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}
.custom-list-checkmark li:last-child{
    margin-bottom: 2.5rem;
}

/* 3) Use the SVG checkmark as a background image in :before. */
.custom-list-checkmark li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2rem; /* Adjust vertically to center with text if needed. */

    width: .8rem; 
    height: .8rem;

    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><circle cx='12' cy='12' r='12' fill='%231a1a1a'/><path d='M6 12l4 4 8-8' stroke='%23F6F6F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") 
    no-repeat center center;
    background-size: contain; /* Or 'cover', depending on the desired look. */
}

.column-dark .custom-list-checkmark li::before {
    filter: invert(1);
}




.price-column:hover .pricing-ctas{
    background-color: var(--hover-color);
    color: #1a1a1a;
    border: 4px solid #1a1a1a;
}
.column-dark:hover .pricing-ctas{
    border: 4px solid var(--hover-color);
}



.year-month-switcher-wrapper{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.year-pricing-label p{
    position: relative;
}
.month-year-label{
    font-size: .7rem;
    font-weight: 700;
}
.year-pricing-label p::after{
    content: var(--after-content);
    position: absolute;
    display: block;
    left: calc(100% + .5rem);
    width: 100px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    top: calc(50% - 11px);
    font-size: 12px;
    border-radius: 50px;
    background-color: #4cc07c;
    color: white;
    font-weight: 400;
    letter-spacing: 0.8px;
}

@media screen and (max-width: 400px) {
    .year-pricing-label p::after{
        display: none;
    }
}




/* Container just for demo layout (optional) */
.switch-container {
    display: inline-block;
    vertical-align: middle;
    margin: 0 1.5rem;
  }
  
  /* Hide the native checkbox */
  .switch-checkbox {
    display: none;
  }
  
  /* The pill shape (black background) */
  .switch-label {
    /* Size of the pill */
    width: 74px;
    height: 34px;
    
    /* Rounded corners (100% or a large px value) */
    border-radius: 999px;
  
    /* Use a black background, white circle by default */
    background-color: #1a1a1a;
    cursor: pointer;
    
    /* Position relative so .switch-ball can be absolutely placed */
    position: relative;

    display: inline-block;
  
    /* Smooth background transition */
    transition: background-color 0.3s ease;
  }
  
  /* The ball (white circle) inside the pill */
  .switch-ball {
    /* Position inside the label */
    position: absolute;
    top: 4px;
    left: 4px;
  
    /* Circle size (depends on the pill height) */
    width: 26px;
    height: 26px;
    border-radius: 50%;
  
    background-color: #f6f6f6;
    
    /* Animate ball sliding */
    transition: transform 0.2s ease-in-out;
  }
  
  /* When the checkbox is checked... */
  .switch-checkbox:checked + .switch-label {
    /* optional: slightly change the pill color */
    background-color: #1a1a1a; 
    /* Or leave it #000 if you want it to stay black */
  }
  
  /* Move the ball to the right when checked */
  .switch-checkbox:checked + .switch-label .switch-ball {
    transform: translateX(40px);
  }
  

  .month-label{
    border-bottom: 2px solid #1a1a1a;
    transition: border-bottom .2s ease-in-out;
  }

  .year-label{
    border-bottom: 2px solid transparent;
    transition: border-bottom .2s ease-in-out;
  }

  .year-pricing{
    display: none;
  }
  .pricing-disclamers{
    font-size: 0.7rem;
    color: #555555;
    text-align: center;
    margin-top: 2rem;
  }


/* NORMALIZE FORMS ACCROSS DEVICES */

/* Remove iOS default appearance (rounded corners, inner shadows, etc.) */
input:not([type=checkbox]):not([type=radio]),
textarea,
select {
  -webkit-appearance: none; /* Removes default iOS styling */
  border-radius: 0;         /* Removes iOS default rounding */
}

/* Specifically remove iOS Safari's default inner shadow on inputs */
input[type="search"] {
  -webkit-appearance: none;
  outline-offset: -2px; /* optional tweak */
}

/* Remove the X (clear) button in search fields in iOS Safari */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Remove stepper controls in number inputs (iOS Safari) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}




.swipespec-simple-form_wrapper{
    width: 100%;
    max-width: 500px;
}
.swipespec-simple-form_wrapper .gform_validation_errors{
    width: 100%;
    outline: 0;
    display: none;
}
.swipespec-simple-form_wrapper .gform_validation_errors:focus{
    outline: 0;
}

.swipespec-simple-form_wrapper input[type="text"], .swipespec-simple-form_wrapper input[type="email"], .swipespec-simple-form_wrapper textarea{
    width: 100%;
    border-radius: 5px 24px 24px 24px;
    border: 4px solid #dfdfdf;
    outline: 0;
    transition: border .2s ease-in-out;
    padding: .6rem 1.2rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-top: 1rem;

}

.swipespec-simple-form_wrapper .gfield{
    margin-bottom: 1.5rem;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
}

.swipespec-simple-form_wrapper input[type="text"]:focus, .swipespec-simple-form_wrapper input[type="email"]:focus, .swipespec-simple-form_wrapper textarea:focus, .swipespec-simple-form_wrapper input[type="email"]:not(:placeholder-shown), .swipespec-simple-form_wrapper input[type="text"]:not(:placeholder-shown), .swipespec-simple-form_wrapper textarea:not(:placeholder-shown){
    width: 100%;
    border: 4px solid #1a1a1a;
    outline: 0;
    
}

.swipespec-simple-form_wrapper .gform-field-label{
    /*display: none;*/
    font-size: 1.3rem;
    font-weight: 900;
}

.swipespec-simple-form_wrapper fieldset .gform-field-label{
    display: inline-block;
}

.swipespec-simple-form_wrapper ::placeholder{
    font-size: 1.2rem;
    color: #cfcfcf;
    font-weight: 800;
}

.swipespec-simple-form_wrapper .gfield_description{
    display: none;
}
.swipespec-simple-form_wrapper .ginput_counter{
    display: block;
    font-size: 0.7rem;
    color: #555555;
    font-style: italic;
    text-align: center;
}

.swipespec-simple-form_wrapper .gform_footer{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* CTA LARGE */
.swipespec-simple-form_wrapper input[type="submit"].gform_button{
    padding: .8rem 2.6rem;
    width: auto;
    text-decoration: none;
    font-size: 1.6rem;
    display: inline-block;
    background-color: #1a1a1a;
    color: #F6F6F6;
    font-family: 'Inter', serif;
    border-radius: 5rem;
    line-height: 1;
    margin: 0;
    font-weight: 900;
    letter-spacing: .6px;
    border: 4px solid transparent;
    transform: scale(1);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes tap highlight */
    touch-action: manipulation; /* Improves touch responsiveness */
    transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out, transform .1s ease-in-out;
    cursor: pointer;
}
.swipespec-simple-form_wrapper  input[type="submit"].gform_button:hover{
    background-color: #36A2EB;
    color: #1a1a1a;
    border: 4px solid #1a1a1a;
}
.swipespec-simple-form_wrapper  input[type="submit"].gform_button:active{
    transform: scale(.9);
}

@media screen and (max-width: 440px) {
    .swipespec-simple-form_wrapper  input[type="submit"].gform_button{
        text-align: center;
        width: 100%;
    }
}

.swipespec-simple-form_wrapper .gfield_error input[type="text"], .swipespec-simple-form_wrapper .gfield_error input[type="email"], .swipespec-simple-form_wrapper .gfield_error textarea{
    border-color: #fb5151;
}

.swipespec-simple-form_wrapper .validation_message{
    display: block;
    font-size: 0.7rem;
    color: #fb5151;
    font-style: italic;
    text-align: center;
    margin-top: 10px;
}





























.gfield--type-checkbox *,
.gfield--type-checkbox *::before,
.gfield--type-checkbox *::after {
  box-sizing: border-box;
}

/* The wrapper class helps target only this field's styling */
.gfield--type-checkbox {
  position: relative;
  /* optional spacing, etc. */
}

/* Hide the native checkbox visually */
.gfield--type-checkbox input[type="checkbox"] {
  visibility: hidden; /* or use display: none, but be mindful for accessibility */
  position: absolute; /* helps remove it from layout */
}

/* Style the label as the clickable area */
.gfield--type-checkbox label {
  display: inline-block;
  position: relative;
  /* Add left padding so text doesn't overlap the custom box */
  padding-left: 45px; 
  cursor: pointer;
  line-height: 35px; 
  height: 35px;       /* match your desired checkbox size */

  padding-left: 2.5rem;
  font-family: 'Inter';
  font-weight: 100;
  font-size: 1.2rem;
  transition: font-weight .2s ease-in-out;
}
@media screen and (max-width: 1366px) {
    .gfield--type-checkbox label {
        padding-left: 3.5rem;
    }
}
@media screen and (max-width: 550px) {
    .gfield--type-checkbox label {
        padding-left: 4.5rem;
    }
}


.gfield--type-checkbox input[type="checkbox"]:checked + label {
    font-weight: 900;
}

/* BEFORE pseudo-element: the "checkbox" box */
.gfield--type-checkbox label::before {
  content: "";
  position: absolute;
  left: 0; 
  top: 0;
  width: 35px;
  height: 35px;
  border: 3px solid #1a1a1a; 
  border-radius: 6px; 
  transition: all 0.375s;
}

/* WHEN checked: transform the box to look like a checkmark (rotated & smaller) */
.gfield--type-checkbox input[type="checkbox"]:checked + label::before {
  transform: rotate(45deg);
  width: 14px;
  margin-left: 12px; /* shift it visually so it appears like a tick */
  border-color: #4CC0C0;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0;
}
































/* 1) Give the container a helpful class to limit the scope of styles. */
.gfield--type-radio {
    /* optional: position, margins, etc. */
  }
  
  /* 2) Hide the native radio button (so we can draw our own) */
  .gfield--type-radio input[type="radio"] {
    display: none;             /* Hide from layout */
    -webkit-appearance: none;  /* Remove native iOS styling (if any) */
    -moz-appearance: none;
    appearance: none;
  }
  
  /* 3) The label will contain the "circle" via pseudo-elements. */
  .gfield--type-radio label {
    display: block;
    cursor: pointer;
    position: relative;
  
    /* Make space on the left for the custom circle */
    line-height: 22px;
    height: 22px;

    padding-left: 2rem;
    font-family: 'Inter';
    font-weight: 100!important;
    font-size: 1.2rem;
    transition: font-weight .2s ease-in-out;
  }
@media screen and (max-width: 1366px) {
    .gfield--type-radio label {
        padding-left: 2.5rem;
    }
}
@media screen and (max-width: 550px) {
    .gfield--type-radio label {
        padding-left: 3.5rem;
    }
}

.gfield--type-radio input[type="radio"]:checked + label {
    font-weight: 900!important;
}
  /* 4) Use ::before and ::after to draw the outer circle and inner "dot" */
  .gfield--type-radio label::before,
  .gfield--type-radio label::after {
    content: "";
    position: absolute;
    left: 0; 
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;  /* Make it circular */
  }
  
  /* The "outer circle" (default gray) */
  .gfield--type-radio label::before {
    background: #555555;
    transition: background 0.2s ease,
                transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2);
  }
  
  /* The "inner circle" (white center), slightly scaled down by default */
  .gfield--type-radio label::after {
    background: #f6f6f6;
    transform: scale(0.7);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
  }
  
  /* 5) Checked State: expand outer circle, change color, shrink inner circle */
  .gfield--type-radio input[type="radio"]:checked + label::before {
    transform: scale(1.04);
    background: #1a1a1a;
  }
  .gfield--type-radio input[type="radio"]:checked + label::after {
    transform: scale(0.5);
    transition: transform 0.3s ease;
  }
  
  /* 6) Hover Effects */
  .gfield--type-radio label:hover::before {
    transform: scale(0.92);
  }
  .gfield--type-radio label:hover::after {
    transform: scale(0.7);
  }
  /* If checked AND hovered, keep inner circle small */
  .gfield--type-radio input[type="radio"]:checked + label:hover::after {
    transform: scale(0.5);
  }
  


.swipespec-simple-form_wrapper .gchoice{
    margin-bottom: 1rem;
}


.swipespec-simple-form_wrapper .gchoice:last-child{
    margin-bottom: 0;
}


.swipespec-simple-form_wrapper fieldset.gfield--type-radio, .swipespec-simple-form_wrapper fieldset.gfield--type-checkbox{
    border: 0;
    padding: 0;
}


.swipespec-simple-form_wrapper legend.gform-field-label{
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 900;
}


.swipespec-simple-form_wrapper fieldset{
    margin-top: 3rem!important;

}

.testimonial-text{
    display: block;
    margin: 0 auto;
    max-width: 750px;
    width: 100%;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: left;
    color: #1a1a1a;
}
.testimonial-person-name{
    display: block;
    margin: 0 auto;
    max-width: 300px;
    width: 100%;
    margin-bottom: .5rem;
    font-size: .9rem;
    font-weight: 700;
    color: #1a1a1a;
}
.testimonial-person-title{
    display: block;
    margin: 0 auto;
    max-width: 300px;
    font-weight: 100;
    font-size: .8rem;
    width: 100%;
    color: #555555;
}

@media screen and (max-width: 1024px) {
    .testimonial-person-name, .testimonial-person-title{
        max-width: 750px;
    }
}
fieldset.gfield_error legend{
    color: #fb5151;
}
fieldset legend .gfield_required_text{
    display: none;
}
.captcha-branding, .captcha-branding a{
    font-size: 0.7rem;
    color: #555555;
    font-style: italic;
    text-align: left;
}

.wide-image-block{
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
.image-full-width-section{

}

.hero-flexer{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: space-between;
    align-items: stretch;
}
.hero-lefter{
    width: 50%;
}
.hero-righter{
    width: 50%;
}

.hero-background{
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.left-text{
    text-align: left;
}
.image-hero-mobile-fixer{
    display: none;
}
@media screen and (max-width: 1366px) {
    .hero-background{
        background-position: calc(100% - 15%) center;
        background-repeat: no-repeat;
        background-size: 80%;
    }
}
@media screen and (max-width: 1200px) {
    .hero-background{
        background-position: calc(100% - 10%) center;;
        background-repeat: no-repeat;
        background-size: 90%;
    }
}
@media screen and (max-width: 850px) {
    .hero-background{
        background-position: 500% center;
        background-repeat: no-repeat;
        background-size: 95%;
    }
    .hero-lefter{
        width: 70%;
    }
    .hero-righter{
        width: 30%;
    }
}

@media screen and (max-width: 744px) {
    .hero-background{
        background-image: none!important;
    }
    .hero-flexer {
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
        justify-content: center;
        align-items: stretch;
        flex-direction: row;
    }
    .hero-lefter{
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        order: 1;
    }
    .hero-righter{
        width: 100%;
        order:0;
    }
    .left-text {
        text-align: center;
    }
    .image-hero-mobile-fixer{
        display: block;
        max-width: 100%;
        margin-bottom: 2rem;
    }
}

.wysiwyg-section{
    width: 100%;
    line-height: 1.3;
    font-size: 1.2rem;
    font-weight: 100;
}
.wysiwyg-section p{
    width: 100%;
}
.wysiwyg-section b, .wysiwyg-section strong {
    font-weight: 900;
}
.wysiwyg-section h1, .wysiwyg-section h2, .wysiwyg-section h3{
    font-weight: 900;
    width: 100%;
}
.wysiwyg-section h1{
    font-size: 3rem;
}
.wysiwyg-section h2{
    font-size: 2.5rem;
}
.wysiwyg-section h3{
    font-size: 2rem;
}

.wysiwyg-section a{
    color:#36A2EB;
    transition: color .2s ease-in-out
}
.wysiwyg-section a:visited {
    color: #9A66FF;
}
.wysiwyg-section ul, .wysiwyg-section ol{
    width: 100%;
}



.mobitle-title-hidden{
    display: none;
}
.desktop-title-shown{

}

@media screen and (max-width: 744px) {
    .mobitle-title-hidden{
        display: block;
    }
    .desktop-title-shown{
        display: none;
    }
}

.wysiwyg-section .standard-container{
    max-width: 800px;
}
.page-id-511 .full-width-video-section .standard-container{
    max-width: 800px;
}
.page-id-511 .full-width-video-section{
    padding-bottom: 0;
}