@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Manrope:wght@200..800&family=Unbounded:wght@200..900&display=swap');



/* Using a more specific selector to ensure it wins the battle */
.wp-block-button .wp-block-button__link {
    all: unset; /* Removes WP's background, padding, border-radius, etc. */
    display: inline-block;
    cursor: pointer;
    box-sizing: border-box;

}


.disabled_button
{
    opacity: 50%;
}



body
{
    font-family: Manrope,sans-serif;
    font-size: 1rem;
}



:root {
    --repi-blue: #004FFF;       
    --repi-white: #ffffff;
    --repi-dark: #000000;
    --repi-grey: #F3F3F3;
    --repi-orange: #FF8C00; 

  
}


body .logo-container
{
    display: flex;
    align-items: center; /* Vertical centering */
    gap: 4px; /* Space between image and text */
}



body #close-box {
    position: absolute;
    top: 5px;
    right: 5px;
}



body .top-line-header
{
    margin-bottom: .1rem !important;
}


body .col-left
{
    margin-left: 20px;
}

body .main-text
{
    max-width: 65%;
    font-size: 1.2rem;
}






body .site-main
{
    background-color:var(--repi-grey) !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body .home-footer
{
    margin-top: auto;  
}


body .button
{
    
    cursor: pointer !important;
    padding: 10px 15px 10px 15px !important;
    font-weight: bold;
    border-radius: 20px;
  
}

body .choose-plan-button
{
    color:#ffffff !important;
    background-color: #004FFF !important;;
    background: #004FFF !important; /* Fallback for older browsers */
    background: linear-gradient(90deg, #004FFF 0%, #43B2DD 100%) !important;
    
    border: 0 !important;    

}


body button.start-work-button
{
    font-size:  125%;
}

body #login-out > button.register
{
    
    background-color: var(--repi-blue) !important;
    color: var(--repi-white) !important;
}

body #login-out > button.login
{
    
    background-color: var() !important;
    color: var(--repi-dark) !important;
    border: 1px solid var(--repi-blue);
}






body .center_block
{
    min-height: 5rem;
    width: 100%;
    background-color: var(--repi-blue) !important;
  

}

body .home_page_heading
{
    color: var(--repi-white) !important;
    font-family: Manrope, arial, sans-serif;
}

/* unfortunately you cannot build the CSS into the block in the non block theme blocks */
body .plan-block
{
    border-radius: 10px;
    background-color: var(--repi-white) !important;
    border-color: var(--repi-grey) !important;
    border-width: 2px;
    padding:10px 10px 10px 25px;

}

#plans .wp-block-column:nth-child(2) .plan-block {
    height: 100%;
}




body .plan-block.active
{
    border-color: var(--repi-orange) !important;
}

body .plan-block ul 
{
    list-style-type: none;  
    padding-left: 0;
}

body .plan-block  ul li 
{
    position: relative;
    padding-left: 25px; 
    margin-bottom: 10px; 
}

body .plan-block  ul li::before 
{
    /*
    content: "•";  
    color: red;   
    position: absolute;
    left: 0; */

    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);  
    width: 12px;
    height: 12px;
    border-radius: 50%;  
    
    /* Gradient background */
    /* background: linear-gradient(135deg, #9FDEEF, #6FA4E8, #2A56C7); */

    /* background: radial-gradient(circle at 30% 30%, #9FDEEF, #6FA4E8, #2A56C7); */
    background: linear-gradient(180deg, #9FDEEF, #6FA4E8, #2A56C7);
}

body .plan-block2 ul 
{
    list-style-type: none;  
    padding-left: 0;
}

body .plan-block2  ul li 
{
    position: relative;
    padding-left: 25px; 
    margin-bottom: 10px; 
}

body .plan-block2 ul li::before 
{
    /*
    content: "•";  
    color: red;   
    position: absolute;
    left: 0; */

    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);  
    width: 12px;
    height: 12px;
    border-radius: 50%;  
    
    /* Gradient background */
    /* background: linear-gradient(135deg, #9FDEEF, #6FA4E8, #2A56C7); */

    background: radial-gradient(circle at 30% 30%, #9FDEEF, #6FA4E8, #2A56C7); 
    /* background: linear-gradient(180deg, #9FDEEF, #6FA4E8, #2A56C7); */
}

body .home_page_col_ad_container > .wp-block-group 
{
    
    color: var(--repi-dark) !important;
    background-color: var(--repi-white) !important;
    max-width: 80%;
    border-radius: 20px;
}



 

body .text-right
{
    text-align: right;
}

body .text-left
{
    text-align: left;
}

body .kea-pointer
{
    cursor: pointer !important;
}




body ol.breadcrumb
{
    margin-left: 0em !important;
}

body .home-footer
{
   
    margin-bottom: 0px !important;
    background-color: var(--repi-white) !important;

}



body .message 
{
    margin: 10px 0 20px 0 !important;
 
   
}

body #successMessage {
    position: relative;
}


#register-button
{
    border: none;
}

body .subheading
{
    opacity: 0.5;
}

body .register
{
    margin-right: 5px;
    background-color: var(--repi-blue) !important;
    color: var(--repi-white) !important;
}

body .register-button
{
    margin-right: 5px;
    background-color: var(--repi-blue) !important;
    color: var(--repi-white) !important;
    
}

body .login-button
{

    border: 2px solid var(--repi-blue) !important;
    color: var(--repi-dark) !important;
}

body .splash-button
{
    border-radius: 20px !important;;
}


body div.phone-col
{
    display: flex;
    flex-direction: column;
}

body div.phone-col figure
{
    margin-bottom: 0px !important;
    margin-top: auto !important;; /* Pushes the figure to the bottom */
}


body .plan-price span:nth-child(2)
{
    opacity: 50%;
}

body .plan-price span:first-child
{
    font-weight: bold;
   
}

body input , body textarea , body select
{
    background-color: #EEEEEE;
}




body div.wp-block-columns.home-footer .wp-block-column p
{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body div.wp-block-columns.home-footer .wp-block-column p a
{
    color: var(--repi-dark);
    text-decoration: none;
}

body div.wp-block-columns.home-footer .wp-block-column p a:hover
{
    text-decoration: underline;
}





body  div.wp-block-columns.main-content-block
{
    margin-bottom: 0px !important;
    
}


body .main-content-block .col-left
{
    display: flex;
    flex-direction: column;
    padding-top: 75px;
    padding-bottom: 50px;

}

body .main-content-block .col-left .main-text-group
{
    margin-top: auto;
    margin-bottom: auto; 
}

#registrationModal .modal-footer
{
    justify-content: center !important;
}

/* ABOVE THIS LINE IS NOT RESPONSIVE - APPLIES TO MOBILE AND IS NOT CORRECTED FOR OTHER SIZES */


/* RESPONSIVE */

/* MOBILE FIRST */

body div.wp-block-columns.home-footer .wp-block-column
{
    display: flex;
    flex-direction: column;
    justify-content: center;
   

}

body .home-footer .wp-block-column:first-child
{
    text-align: center;
    order: 1;
}

body .home-footer .wp-block-column:nth-child(2)
{
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end !important; 
    order: 3;
  

}

body .home-footer .wp-block-column:nth-child(3)
{
    text-align: center;
    order: 2;

}


body  div.wp-block-columns.main-content-block
{
   
    margin-left: 0px;
}

body .center_block 
{
    padding: 10px 0px 10px 0px;
}

body .wp-block-columns .main-text {

    max-width: 100%;
    font-size: 1rem;
}

body .spacer
{
    height: calc(90px + 1rem) !important;

}

body .plan-price span:first-child
{
    font-size: 1.8rem;
}

body .plan-price span:nth-child(2)
{
    font-size: 0.9rem;
}

body #logo
{
    left: 10px;
    position: absolute;
    top: 20px;

}

body #login-out
{
    right: 10px;
    position: absolute;
    top: 20px;
  
}

body button 
{
    font-size: 0.8rem;
}

body .phone-col 
{
    text-align: center;
    margin-right: 5px;
}

body .phone-col img
{
    max-width: 100%;
}



body  div.home-footer
{
    gap: 0.2em;
    padding: 5px 0px;
}


@media (min-width: 576px) 
{

 

    body  div.wp-block-columns.main-content-block
    {
    
        margin-left: 50px;
    }
 
    body .spacer
    {
        height: calc(50px + 1rem) !important;

    }

    body  div.home-footer
    {
        gap: normal;        
        padding: 0px 0px;
        
    }

    body .center_block 
    {
        padding: 20px 0px 20px 0px;
    }










    body  div.home-footer
    {
        gap: 0em;
        padding: 5px 0px;
    }


    body .main-text
    {
        max-width: 75%;
    }

    body .plan-price span:first-child
    {
        font-size: 2.2rem;
    }

    body .plan-price span:nth-child(2)
    {
        font-size: 1.25rem;
    }
    
    body button 
    {
        font-size: 0.8rem;
    }
    
    body #logo
    {
        position: absolute;
        top: 20px;
        left: 70px;
    }
    
    body #login-out
    {

        right: 50px;
    }

    body .phone-col img
    {
        max-width: 85%;
    }


}


@media (min-width: 768px) 
{

    body .spacer
    {
        height: calc(50px + 1rem) !important;

    }

    body .home_page_col_ad_container:first-child > .wp-block-group 
    {
        margin-left: auto;
        margin-right: 50px; 

        
    }

    body .home_page_col_ad_container:nth-child(2) > .wp-block-group 
    {
        margin-right: auto;
        margin-left: 50px; 
        
    }

    body div.wp-block-columns.home-footer .wp-block-column
    {
        height: 3rem;
    }

    body .home-footer .wp-block-column:first-child
    {
        text-align: left !important;
        margin-left: 50px;
        order: 1;
    }

    body .home-footer .wp-block-column:nth-child(2)
    {
        text-align: center !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-end !important; 
        height: 100%; 
        order: 2;

    }

    body .home-footer .wp-block-column:nth-child(3)
    {
        text-align: right !important;
        margin-right: 50px;
        order: 3;
    }


 
    body #login-out
    {
        right: 10px;
    } 

    body button 
    {
        font-size: 0.7rem;
    }

}


@media (min-width: 992px) 
{ 

    body .spacer
    {
        height: calc(50px + 1rem) !important;

    }


    body button 
    {
        font-size: 0.8rem;
    }
}

@media (min-width: 1200px) 
{ 
    body button 
    {
        font-size: 0.9rem;
    }

    body #login-out
    {
        right: 50px;

    } 

}