.electrolize-regular {
    font-family: "Electrolize", serif;
    font-weight: 400;
    font-style: normal;
}
body {
    margin: 0;
    font-family: 'Electrolize', serif;
    font-weight: 400;
    font-style: normal;
}

*{
    border: 0px red solid;
}


.not_sqsp {



    background-image: url(img/background/site_background.jpg);
    background-size: 600px;
    background-repeat: repeat;
    background-color: #2B2B2B;

    h1 {
        font-family:'Electrolize', serif;
        font-weight: bold;
        z-index: 10;
        font-size: clamp(1.2em, calc( 5vw + 1em), 5em);

    }
    h2 {

        text-align: center;
        color: #a360ff;
        font-size: clamp(1.1em, calc( 3vw + 1em), 3rem);
        margin: 0.5em 0em;
    }

    h3{
        text-align: center;
        font-size: clamp(1em, calc( 2vw + 1em), 2em);
        color: #a360ff;
        font-weight: bold;
        margin: 0.5em 0em;

        --heading-4-size-value: 2;
    }

    h4 {

        color: #CAC9D9;
        text-align: center;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        --heading-4-size-value: 2;
    }

    .p2 {
        margin: 0.5em 0em;
        font-size: clamp(1em, calc( 0.25vw + 1em), 1.2em);
        color: #CAC9D9;
    }


    strong {
        font-weight: 700;
    }

    /* Footer */
    .footer-logo {

        width: 160px;
        margin: 1em 2em ;

    }
    .footer-title {

        font-size: clamp(96px, 10vw, 160px);
        color: #d2ff33;
        display: inline-block;
        margin: 0em 0.25em;
        text-align: center;
    }

    /* Header */
    .header-logo {
        width: 80px;
        margin: 8px ;
    }

    /* bootstrap */
    .ms-auto .nav-item {
        margin-left: 2vw;
    }

}

.block_title {

    margin-top:2em ;
    margin-bottom:2em ;
}

.section_content {
    min-height: 80vh !important;
    min-height: 80dvh !important;

    padding: 50px min(24em, 4%);
    display: flex;
    flex-direction: column;
    align-items: center;
    place-content: center;

}

.section_footer {



    padding: 2em;
    display: flex;
    flex-direction: row;
    align-items: center;
    place-content: center;

}

@media screen and (max-width: 768px ) {
   .section_footer {
        flex-direction: column;
   }
}





:root {

    --white-hsl: 311.59, 100%, 71.57%;
    --black-hsl: 243.75, 17.39%, 81.96%;
    --safeLightAccent-hsl: 265.28, 100%, 68.82%;
    --safeDarkAccent-hsl: 265.28, 100%, 68.82%;
    --safeInverseAccent-hsl: 0, 0%, 100%;
    --safeInverseLightAccent-hsl: 0, 0%, 100%;
    --safeInverseDarkAccent-hsl: 0, 0%, 100%;
    --accent-hsl: 265.28, 100%, 68.82%;
    --lightAccent-hsl: 300, 1.18%, 16.67%;
    --darkAccent-hsl: 73.1, 100%, 50.59%;

    --text-primary-color: rgba(202, 201, 217, 1);

    --text-secondary-color: rgba(0, 0, 0, 1);
    --text-on-accent: rgba(255,255,255,1);
    --background-color: rgba(255,255,255,1);

    --accent-primary-color: rgba(210, 255, 51, 1);
    --accent-primary-c-2: rgba(210, 255, 51, 0.9);

    --accent-secondary-color: rgba(255, 69, 0, 1);
    --accent-secondary-color-blur: rgba(255, 69, 0, 0.5);


    --heading-1-size-value: 4;

    --primary-button-font-font-size-value: 1.7;

    --small-text-size: 1rem;

    --bs-nav-link-font-size: 1.5rem;

}

.navbar-nav {

    --bs-nav-link-color: rgba(202, 201, 217, 1) !important;
    --bs-nav-link-hover-color: rgba(210, 255, 51, 1);
}
.navbar-toggler {
    --bs-navbar-toggler-border-color: rgba(202, 201, 217, 1) !important;
    --bs-navbar-color: rgba(202, 201, 217, 1) !important;
    --bs-border-width: 2px;
}
.nav-link {
    font-family:'Electrolize', serif;
    min-width: 5em;
    text-align: center;

}
.nav-link:hover {

    font-weight: 300;
    --bs-nav-link-font-weight: 300;
}

.nav-link-selected {

    border-bottom: 1px solid var(--text-primary-color);
}

.nav-link-selected:hover {

    border-bottom: 1px solid var(--accent-primary-color);
}
.navbar {
    padding-left: min(75px, 3%);
    padding-right: min(75px, 3%);
    background-image: url(img/background/site_background.jpg);
    background-size: 600px;
    background-repeat: repeat;
}

.navbar::after {
    content: '';
    overflow-x: hidden;
    position: absolute;
    height: 115%;
    width: 100%;
    right: 0%;

    z-index: -2;
    background: linear-gradient(180deg, rgba(43, 42, 43,1) 0%, rgba(43, 42, 43,1) 95%,   rgba(43, 42, 43,0.05) 100%);




}
.navbar::before {

    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    background: rgba(43, 42, 43,1);
    z-index: -1;
    background-image: url(img/background/site_background.jpg);
    background-size: 600px;
    background-repeat: repeat;
}

@keyframes appear{
    0% {
        opacity: 0;

        scale: 0.5;
    }


    100% {
        opacity:1;

        scale: 1;
    }

}

@-webkit-keyframes appear{
    0% {
        opacity: 0;

        scale: 0.5;
    }


    100% {
        opacity:1;

        scale: 1;
    }

}

 /* Loading Screen */
 #loader {

    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
#loading-screen {

    min-height: 100vh;
    background-color: transparent;
    text-align: center;
}



#landing-screen {
  display: none;
  /* background-color: transparent; */
  text-align: center;
}


/* Text animations */

.section_landing {

    min-height: 80vh !important;
    min-height: 80dvh !important;

    padding: 50px min(24em, 8%);
    display: flex;
    flex-direction: column;
    align-items: center;
    place-content: center;

}

.block {

    animation: appear 5s linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

.box {
    display: flex;
    flex: auto;
    /* align-items: center; */
    /* margin: 0rem clamp(8rem, 6vw, 24rem); */
    font-style: italic;
}

/* @-webkit-keyframes glow {
    0% { background-color: blue; }
    100% { background-color: blue; }
}

div:hover {
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
} */


.box_a_third {

    flex-basis: 33% ;

}

.box_a_half {

    flex-basis: 50%;
    margin: clamp(1rem, 3vw, 6rem) clamp(0.5rem, 3vw, 4rem);
}


.box_two_third {

    flex-basis: 66%;
}

.box_service {
    display: flex;
    flex-direction: column;
    border: #CAC9D9 solid 2px;
    border-radius: 25px;
    margin: 1rem;
    padding: clamp(2rem, 1vw, 4rem);

    flex: 1;

}

.box_type_one {
    display: flex;
    margin: clamp(1rem, 3vw, 6rem) clamp(0.5rem, 3vw, 4rem);


}
.box_type_two {

    max-width: 1000px;
    display: flex;
    margin: clamp(1rem, 3vw, 4rem) clamp(0.5rem, 3vw, 4rem);


}


.button_box {
    display: flex;
    flex: auto;
    align-self: center;
    text-align: center;
    align-items: center;
    justify-content: center;

    height: 6em;
    width: 12em;


    .buttonP1 {
        height: 4rem;
        width: 11rem;
        margin: 10px;

        font-weight: bold;
        font-size: clamp(1.2em, calc( 0.25vw + 1em), 1.7em);
        border-radius: 5rem;

        color: rgba(43, 42, 43,1) ;
        background-color: transparent;
        border: 3.5px solid rgba(43, 42, 43,1);



    }

    .buttonP1:hover {

        height: 4.1rem;
        width: 11.25rem;
        font-weight: bold;
        color: #d2ff33 ;
        background-color: #2B2A2B;
        border: 3.5px solid #d2ff33;
    }


    .buttonP2 {

        height: 3em;
        width: 9em;
        margin: 0.5rem;

        border-radius: 5em;
        font-size: clamp(1.3em, calc( 0.5vw + 1em), 1.7em);


        color: #2B2A2B ;
        background-color: #a360ff;
        border: none;

        animation:color-rotate 3s
        linear infinite alternate;

    }
    .buttonP2:hover {

        height: 3.1em;
        width: 9.1em;

    }

    .buttonP3 {
        height: 4rem;
        width: 11rem;
        margin: 10px;
        font-size: clamp(1.2em, calc( 0.25vw + 1em), 1.7em);
        font-weight: bold;
        border-radius: 5rem;

        color: #a360ff ;
        background-color: transparent;
        border: 3.5px solid #a360ff;



    }

    .buttonP3:hover {

        height: 4.1rem;
        width: 11.25rem;
        font-weight: bold;
        color: #F3F3F3 ;
        background-color: #a360ff;
        border: 3.5px solid #2B2A2B;
    }



}
.button_left {
    justify-content: right;
}
.button_right {
    justify-content: left;
}


.container_row_halves {

    display: flex;

}

.container_services {

    display: flex;
    width: 100%;

}



.crazy_background {

    text-align: center;



    background: transparent;
    background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%, hsl(var(--darkAccent-hsl)) 50%, rgba(0,255,0,0) 85%, rgba(0,255,0,0) 100%), url(img/background/site_background.jpg) ;

    background-size: 600px;
    background-repeat: repeat;



    color: hsl(var(--lightAccent-hsl));

}

.landingPageHead {
    margin: 0 clamp(0.5rem, 4vw, 8rem);
    text-align: center;
}

.object_centered{
    flex: auto;

}
.p1 {

    text-align: center;
    font-size: clamp(1em, calc( 0.5vw + 1em), 1.5em);

    color: #CAC9D9;

}

.paragraph1 {


    color: #CAC9D9;
    text-align: center;
}

.paragraph2 {

    margin: 0rem clamp(1rem, 6vw, 8rem) 0rem 0rem;
    color: #CAC9D9;
    text-align: left;


}


/* forms  */
form small {
    --bs-secondary-color: rgba(202, 201, 217, 1);
}

form label {

    color: #CAC9D9;
}

.form-check {
    margin: 12px;
}
.form-check-input:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #a360ff;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(163, 96, 255, 0.25);
}
.form-check-input:checked {
    background-color: #a360ff;
    border-color: #a360ff;
}
.form-group {
    margin: 12px;
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: #a360ff;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(163, 96, 255, 0.25);
}

form {
    display: flex;
    flex-direction: column;
}
.section_half {

    min-height: 50vh;

    padding: 0 clamp(2rem, 12vw, 20rem);
    display: flex;
    align-items: center;
    place-content: center;



}
.section_heading {

    margin: 2rem clamp(0.5rem, 4vw, 8rem);
    text-align: center;
}

.section_heading_left {

    text-align: left;
}

.box_service {

    li {
        translate: -16px 0px;
        text-align: center;
        border-bottom: #CAC9D9 solid 1px;
    }
    li::marker {
        color: transparent;
      }
}


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



    .box {

        flex-direction: column;
        margin: auto;




    }
    .box .button_left {
        justify-content: center;
    }
    .box .button_right {
        justify-content: center;
    }




   }

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

    .section_heading_left {
        text-align: center;
    }

    .container_services {

        flex-direction: column;

    }

    .box_service {
        text-align: center;
    }

    .container_row_halves {
        flex-direction: column;
    }



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


    .not_sqsp .footer-title {

        font-size: clamp(40px, 8vw, 96px);
        color: #d2ff33;
        display: inline-block;
        margin: 0;
        font-weight: bold;
    }




}
@media screen and (min-width: 768px), screen and (max-width: calc(1511px)) and (orientation: landscape) {
    h4 {
        font-size: calc((var(--heading-4-size-value) - 1)* 1.2vw + 1rem);
    }
    h3 {
        font-size: calc((var(--heading-4-size-value) - 1)* 1.2vw + 1rem);
    }
}
@media screen and (min-width: 1512px) {
    h4 {
        font-size: calc(var(--heading-4-size-value)* 1rem);
    }
    h3 {
        font-size: calc(var(--heading-4-size-value)* 1rem);
    }
}





@media screen and (max-width: 767px ) and (orientation: portrait) {
    .buttonP2, .buttonP1 , .buttonP3 {
        font-size:calc((var(--primary-button-font-font-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)
    }
}



@media screen and (min-width:768px), screen and (max-width:1511px) and (orientation:landscape){
    .buttonP2, .buttonP1 , .buttonP3 {
        font-size: calc((var(--primary-button-font-font-size-value) - 1) * 1.2vw + 1rem);
    }
}



@media screen and (min-width:1512px) {
    .buttonP2, .buttonP1, .buttonP3 {
        font-size: calc(var(--primary-button-font-font-size-value) * 1rem);
    }


}



@keyframes color-rotate {
    0% {background: #a360ff}
    10% {background: #a360ff}
    45% {background: #ff6ee3}
    55% {background: #ff6ee3}
    90% {background: #d2ff33}
    100% {background: #d2ff33}
}




.headingGradient {

    background: linear-gradient(135deg,rgba(255, 110, 227, 1) 0%,rgba(163, 96, 255, 1) 50%,rgba(255, 110, 227, 1) 100%);
    background-size: 100% 100%;
    background-position: 0%;
    background-clip: text;
    color: transparent;

}

.fade_in {
    opacity: 1;
    animation: fade_in 2s;


}
@keyframes fade_in {

    0% {
        opacity: 0;
    }


    100% {
        opacity: 1;
    }

}
.fadeInGradient {

    background: linear-gradient(90deg, rgba(163, 96, 255, 0) 20% , rgba(163, 96, 255, 1) 50%,rgba(163, 96, 255, 0) 80%);
    background-size: 300% 200%;
    background-position: 0%;
    animation: gradient_fade_in 5s linear ;
    background-clip: text;
    color: transparent;
    background-repeat: repeat;

}
@keyframes gradient_fade_in {

    0% {
        background-position: 300% 50%;
    }

    100% {
        background-position: -300% 50%;

    }
}