:root {
    --primary-color: #2D3F59;     
    --secondary-color: #4682b4;   
    --background-color: #ffffff; 
    --dark-color: #333333;    
    --light-gray-color: #f4f7f9;  
    --dark-gray-color: #a7a4a4; 

    --red-color: #cb236d;
    --pink-color:#fde0f8;
    --purple-color:#cf86f5;
    --dark-blue-color:#3c55f8;
    --darker-blue-color:#1e1d5a;
    --light-blue-color:#7cc5fe;
    --dark-yellow-color:#f9de44;
    --light-yellow-color:#f9e18b;

    --border-radius: 10px;

    --box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.2);
    --box-shadow-light:0px 0px 10px 2px rgba(0, 0, 0, 0.1);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    line-height: normal;
    font-family: 'Roboto', sans-serif;
    background-color:var(--background-color);
    color: var(--dark-color);
}

img{
    max-width: 100%;
    width: 100%;
    height: auto;
}

a{
    color: var(--secondary-color);
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

h2{
    font-size: 3rem;
}

header.aipress-header{
    box-shadow: var(--box-shadow);
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%; 
    z-index: 1000; 
    background-color: #fff; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

p {
    font-size: 1em;
    line-height: 1.6;
}

#wpadminbar {
    display: none;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.uppercase{
    text-transform: uppercase!important;
}

.bold{
    font-weight: 700!important;
}

.div-center{
    display: block!important;
    margin-left: auto!important;
    margin-right: auto!important;
    width:70%;
}

.text-center{
    text-align: center!important;
}

.text-right{
    text-align: right!important;
}

.text-sm{
    font-size: 0.9rem;
}

.mb-05{
    margin-bottom: .5rem!important;
}

.mb-1{
    margin-bottom: 1rem!important;
}

.mb-2{
    margin-bottom: 2rem!important;
}

.mb-3{
    margin-bottom: 3rem!important;
}

.mb-4{
    margin-bottom: 4rem!important;
}

.p1{
    padding: 1rem!important;
}

.p2{
    padding: 2rem!important;
}

.p3{
    padding: 3rem!important;
}

.p4{
    padding: 4rem!important;
}

.py-1{
    padding-top: 1rem!important;
    padding-bottom: 1rem!important;
}

.py-2{
    padding-top: 2rem!important;
    padding-bottom: 2rem!important;
}

.py-3{
    padding-top: 3rem!important;
    padding-bottom: 3rem!important;
}

.py-4{
    padding-top: 4rem!important;
    padding-bottom: 4rem!important;
}

.py-6{
    padding-top: 6rem!important;
    padding-bottom: 6rem!important;
}

.page{
    min-height: 70vh;
    margin-top: 3rem;
    position: relative;
}

.page h1{
    font-size: 2.3rem;
}

.page h2{
    font-size: 2rem;
}

.page h3{
    font-size: 1.4rem;
}

.page.large-title h1{
    font-size: 4rem;
}

.page ul{
    list-style-type: none;
}

.top-menu .page ul li{
    line-height: 1.4em;
}

li.cookie-item{
    margin-bottom: 1rem;
    background: var(--light-gray-color);
    padding: 1rem;
}

.page-404{
    display: flex;
    align-items: center;
    justify-content: center; 
    height: 75vh;
}




.btn{
    border-radius: var(--border-radius);
    padding: 8px 12px;
    display: inline;
    transition: background-color 0.3s ease;
}
.btn-block{
    display: inline-block;
    max-width: 50%;
}

.btn-lg{
    font-size: large;
    padding: 16px 24px;
}

.btn:hover{
    text-decoration: none;
}

.btn-primary{
    background-color: var(--primary-color);
    color: var(--background-color);
}
.btn-primary:hover{
    background-color: var(--secondary-color);
}

.btn-secondary{
    background-color: var(--secondary-color);
    color: var(--background-color);
}
.btn-secondary:hover{
    background-color: var(--primary-color);
}

.btn-red{
    background-color: var(--red-color)!important;
    color: var(--background-color)!important;
}

.btn-red:hover{
    background-color: var(--dark-color)!important;
    color: var(--background-color)!important;
}

.btn-red-inverse{
    background-color: transparent;
    border: 1px solid var(--red-color);
    color: var(--red-color);
}
.btn-red-inverse:hover{
    color: var(--dark-color);
    border: 1px solid var(--dark-color);
}

.btn-dark-inverse{
    background-color: transparent;
    border: 1px solid var(--dark-color);
    color: var(--dark-color);
}
.btn-dark-inverse:hover{
    color: var(--red-color);
    border: 1px solid var(--red-color);
}





.full-width-bg {
    width: 100%;
    padding: 20px 0;
}

.full-width-bg.alternate-bg{
    background: var(--light-gray-color);
}

.gradient-bg{
    background: rgb(255,255,255)!important;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(253,224,248,1) 50%, rgba(255,255,255,1) 100%)!important;
}

.badges {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 50px;
    opacity: .7;
}

.container {
    width: 80%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.container-prices {
    width: 90%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.flex-wrap{
    flex-wrap: wrap;
}

.two-column {
    justify-content: space-between;
}

.flex-align-center{
    align-items: center;
}

.column {
    width: 48%;
}

.column-lg{
    width: 58%;
}

.column-sm{
    width: 38%;
}



header.aipress-header .flex{
    align-items: center;
}

.top{
    background: #f0f0f0;
    padding: 5px;
    font-size: small;
    color: #333;
}

.top a{
    text-decoration: none;
    color: #333;
}

.logo a {
    font-size: 1.5em;
    font-weight: bold;
}

footer {
    background-color:var(--dark-color);
    color: var(--background-color);
    padding: 20px 0;
    text-align: center;
}

footer .copy,
footer .copy a{
    color: var(--dark-gray-color);
}

footer .footer-nav a.footer-nav-item{
    color: var(--background-color);
    display: inline-block;
    margin: 0px 5px;
}




.logo{
    max-width: 200px;
}

.hero{
    padding: 7.5rem 0;
    /*padding-top: 11rem;*/
    position: relative;
}

.hero .container{
    position: relative;
}

.hero .container .column-lg{
    position: relative;
}

.hero-after-1 .container .column-lg::after{
    content: ' ';
    background: url(../images/illustration-4.svg) no-repeat;
    background-size: 100%;
    background-position-x: 86%;
    display: block;
    width: 600px;
    height: 600px;
    position: absolute;
    top: 0;
    right: -600px;
}

.hero-after-2 .container .column-lg::after{
    content: ' ';
    background: url(../images/illustration-4.svg) no-repeat;
    background-size: 100%;
    background-position-x: 86%;
    display: block;
    width: 600px;
    height: 600px;
    position: absolute;
    top: 0;
    right: -600px;
}



.hero h1{
    color: var(--dark-color);
    font-size: 4rem;
    margin-bottom: 2rem;
    line-height: normal;
}

p.lead,
.hero p.lead{
    font-size: 2rem;
    line-height: normal;
    color: var( --secondary-color);
}

.hero-contact a{
    margin-right: 1.5rem;
}




.prices{
    justify-content: space-evenly;
}

.prices .column{
    width: 60%;
}

.prices.longterm-prices .column{
    width: 40%;
}

.box{
    border-radius: var(--border-radius);
    padding: 3rem;
    box-shadow: 0 4px 35px 10px rgba(0, 0, 0, 0.2);
}

.box h3{
    color: var(--red-color);
}

.box .price{
    font-size: 1.3rem;
    font-weight: 900;
}

.box ul li{
    list-style-type: none; 
    margin-bottom: 1rem;
    background-repeat: no-repeat;
    background-position: 0 50%;
    padding-left: 30px;
    background-size: contain;
    background-size: 15px;
    background-position-y: top;
    line-height: 1.4em;
}

.box ul li.checked{
    background-image: url('./images/star.png');
}

.box ul li.unchecked{
    background-image: url('./images/star-inactive.png');
    text-decoration: line-through;
    color: var(--dark-gray-color);
}



.card{
    flex: 1 1 calc(33.333% - 16px);
    display: flex;
    flex-direction: column;

    box-sizing: border-box;
    box-shadow: var(--box-shadow-light);
    border-radius: var(--border-radius);
    background: var(--background-color);
}

.card .card-hero-text{
    font-size: 2rem;
    color: var(--red-color);
    font-weight: 800;
}

.card h3{
    color: var(--dark-color);
}

.card p{
    flex: 1;
}

/*Box with image*/
.box-img{
    background: var(--background-color);
    border-radius: var(--border-radius);
    align-items: center;
    gap:5rem;
    box-shadow: var(--box-shadow);
}

.box-img .box-img-image{
    width: fit-content;
    min-width: 400px;
}

.box-img .box-img-image img{
    border-radius: var(--border-radius);
}

.box-img .box-img-text{
    width: fit-content;
}


/*Box with subtitle*/
.box-txt{
    align-items: center;
    gap:5rem;
    border-radius: var(--border-radius);
}

.box-txt.pink{
    background: var(--pink-color);
}

.box-txt.shadow{
    box-shadow: var(--box-shadow-light);
}

.box-txt .box-txt-subtitle{
    width: fit-content;
    min-width: 500px;
}

.box-txt .box-txt-subtitle h3{
    font-size: 3rem;
    line-height: normal;
    color: var(--red-color);
}

.box-txt .box-txt-text{
    width: fit-content;
}

.box-txt .box-txt-text h4{
    color: var(--red-color);
    font-size: 1.5rem;
}

.box-txt-text ul{
    list-style-type: none;
}

.text-block{
    text-align: left;
    width: 100%;
}



/* NAV */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 30px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: 0.3s;
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    font-size: 1.2em;
    color: var(--secondary-color);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger .line {
    width: 25px;
    height: 3px;
    background: var(--dark-color);
    margin: 4px 0;
}

nav ul li a{
    text-decoration: none;
    color: var(--primary-color);
}

nav ul li a.active{
    font-weight: 800;
    color: var(--red-color);
}

.nav-close-cont{
    display: none;
}

.freeprivacypolicy-com---palette-light .cc-nb-okagree,
.freeprivacypolicy-com---palette-light .cc-nb-reject,
.freeprivacypolicy-com---palette-light .cc-cp-foot-save{
    background:var(--red-color)!important;
}

.freeprivacypolicy-com---palette-light.freeprivacypolicy-com---nb{
    background-color: var(--light-gray-color);
}





.form-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
}

.form-container .flex-form{
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: 8px;
}

.form-container h2 {
    text-align: center;
    margin-bottom: 20px;
}

.form-container label {
    display: inline-block;
    margin-bottom: 8px;
}

.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="tel"],
.form-container textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-container textarea {
    resize: none;
    height: 90px;
}

.form-container input[type="checkbox"] {
    margin-right: 8px;
}

.form-container button {
    width: 100%;
    padding: 10px;
    background-color: var(--red-color);
    color: var(--background-color);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
}

.form-container button:hover {
    background-color: var(--red-color);
}

.form-container .error-message {
    color: red;
    font-size: 14px;
    display: none;
    margin-bottom: 10px;
}

.form-container .success-message {
    color: var(--background-color);
    font-size: 16px;
    display: none;
    text-align: center;
    margin-bottom: 20px;
    background: #1a8d1a;
    padding: 1rem;
    border-radius: 10px;
}




@media (max-width: 1090px) {
    .container {
        width: 90%;
    }

    
    .nav-links .nav-close-cont,
    .nav-links ul {
        flex-direction: column;
        display: none;
        text-align: center;
    }

    .nav-links ul{
        margin-top: 5rem;
    }

    li.menu-item{
        background: var(--light-gray-color);
        padding: 10px;
        margin-bottom: 10px;
        width: 90%;
        border-radius: var(--border-radius);
    }

    li.menu-item a:hover{
        text-decoration: none;
    }

    li.menu-item .btn.btn-red{
        background-color: transparent;
        color: initial;
        padding: 0;
        border-radius: 0;
        transition: none;
    }

    li.menu-item .btn.btn-red:hover{
        background-color: transparent;
    }

    .nav-links.show {
        display: flex;
        background: var(--background-color);
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        flex-direction: column;
        text-align: left;
        padding: 20px;
        line-height: 1.7em;
        text-decoration: none;
        z-index: 10;
    }

    .nav-close-cont{
        display: block;
        position: absolute;
        top: 2rem;
        right: 2rem;
        font-size: 2rem;
    }

    .nav-close {
        align-self: flex-start; 
        cursor: pointer; 
        font-size: 1.5em; 
        color: var(--dark-color); 
        text-decoration: none;
    }

    .nav-close:hover{
        text-decoration: none;
    }

    .hamburger {
        display: flex;
    }

    nav ul .btn-red{
        background-color: initial!important;
        color: initial!important;
    }


    .two-column {
        flex-direction: column;
    }

    .column,
    .column-lg,
    .column-sm {
        width: 100%;
        margin-bottom: 20px;
    }

    .hero{
        padding-top: 9rem;
        padding-bottom: 0;
    }

    .hero h1{
        font-size: 2.5rem;
    }

    p.lead,
    .hero p.lead{
        font-size: 1.5rem;
    }

    .hero-after-2 .container .column-lg::after,
    .hero-after-1 .container .column-lg::after{
        width: 350px;
        height: 350px;
        position: relative;
        top: 0;
        right: 0;
        margin-top: 40px;
        margin-left: auto;
        margin-right: auto;
    }

    h2 {
        font-size: 2rem;
    }

    .flex.mobile-column{
        flex-direction: column;
    }

    .flex.mobile-column-reverse{
        flex-direction: column-reverse;
    }

    .box-txt-subtitle img,
    .box-img .box-img-image{
        min-width: 320px;
        max-width:320px;
    }

    .box-img{
        gap: 2rem;
    }

    .box-img-text.text-right{
        text-align: left !important;
    }

    .box-txt .box-txt-subtitle h3{
        font-size: 1.8rem;
    }

    .box-txt {
        gap:3rem;
    }

    .box-txt .box-txt-subtitle{
        min-width: initial;
    }

    .prices.longterm-prices .column,
    .prices .column {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }


    .btn-mobil-fullw{
        width:100%;
        max-width: 100%;
    }

    footer .footer-nav a.footer-nav-item{
        display: block;
        margin: 5px 0px;
    }

    .page{
        margin-top: 3rem !important;
    }

    .page.large-title h1{
        font-size: 2.3rem;
    }

    .text-sm.div-center{
        width:100%;
    }

}


/*****************************************************/
/******** WOO CART / CHECKOUT / ACCOUNT PAGES ********/
/*****************************************************/

/*** MAIN FORMS BACKGROUND COLOR ***/
.woocommerce table.shop_table,
.woocommerce form.checkout_coupon, 
.woocommerce form.login, 
.woocommerce form.register,
#add_payment_method #payment, 
.woocommerce-cart #payment, 
.woocommerce-checkout #payment,
#customer_details, 
h3#order_review_heading,
form.woocommerce-EditAccountForm.edit-account {
	border: 0 !important; /* you can add a border if you prefer */
	background: #f5f5f5; /* this is the main background color for all forms */
}
/*** FORM AND OTHER PADDING ***/
#customer_details,
form.woocommerce-EditAccountForm.edit-account,
h3#order_review_heading {
	padding: 30px 20px;
}
/*** ADJUST FORM ROUNDED EDGES ***/
#customer_details {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.woocommerce-checkout-review-order table.shop_table {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
/*** THIS COMPENSATES FOR FIELDS NOT ALIGNING ***/
h3#ship-to-different-address {
	margin-top: -3px; 
}
/*** ALL WOO BUTTONS ***/
.woocommerce button.button.alt, 
.woocommerce-page button.button.alt,
.woocommerce a.button, 
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button {
	text-transform: capitalize !important;
	background: #ffa500 !important;
	color: #222 !important;
} 
.woocommerce button.button.alt:hover, 
.woocommerce-page button.button.alt:hover,
.woocommerce a.button.alt:hover, 
.woocommerce-page a.button.alt:hover,
.woocommerce a.button:hover, 
.woocommerce-page a.button:hover,
.woocommerce button.button:hover,
.woocommerce-page button.button:hover {
	background: #00adad !important;
	color: #fff !important;
}
/*** PAYMENT BOX ON CHECKOUT ***/
#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
    background-color: #d1d1d1;
    color: #000;
    border-radius: 10px;
}
#add_payment_method #payment div.payment_box::before, 
.woocommerce-cart #payment div.payment_box::before, 
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #d1d1d1;
    color: #000;
}
#add_payment_method #payment ul.payment_methods, 
.woocommerce-cart #payment ul.payment_methods, 
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 0;
}
/*** BORDERS AND TABLES ***/
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea {
	border: 0;
}
.woocommerce table.shop_table td,
#add_payment_method .cart-collaterals .cart_totals tr td, 
#add_payment_method .cart-collaterals .cart_totals tr th, 
.woocommerce-cart .cart-collaterals .cart_totals tr td, 
.woocommerce-cart .cart-collaterals .cart_totals tr th, 
.woocommerce-checkout .cart-collaterals .cart_totals tr td, 
.woocommerce-checkout .cart-collaterals .cart_totals tr th,
.woocommerce table.shop_table tbody th, 
.woocommerce table.shop_table tfoot td, 
.woocommerce table.shop_table tfoot th, 
.woocommerce-checkout #main-content .cart-subtotal td {
	border-top: 2px solid #fff;
}
.woocommerce table.shop_table_responsive tr:nth-child(2n) td, 
.woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
	background: transparent;
}
.woocommerce-checkout #content-area table th,
.woocommerce-checkout #content-area table td {
	padding-left: 20px;
}
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea {
	font-size: 18px;
    padding:5px;
}

/*** ORDER NOTES ON CHECKOUT ***/
.woocommerce-checkout .woocommerce form .form-row textarea {
	height: 150px; /* height of optional notes box */
}
/*** STATE DROPDOWN SELECT COLOR ***/
.select2-container--default .select2-results__option--highlighted[aria-selected], 
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background: #ffa500;
}
/*** QUANTITY BOX ***/
.woocommerce #content .quantity input.qty, 
.woocommerce .quantity input.qty, 
.woocommerce-cart table.cart td.actions .coupon .input-text, 
.woocommerce-page #content .quantity input.qty, 
.woocommerce-page .quantity input.qty {
	height: 46px; /* you may need to change this based on your font size */
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    float: none;
    width: 100%;
    margin-bottom: 2rem;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address{
	padding: 1rem;
    background: var(--light-gray-color);
    border-radius: 10px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title{
	margin-bottom: .5rem;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address h3{
	margin-bottom: .5rem;
}