body {
    margin: 0;
    font-family:  "Avenir LT Pro 85 Heavy", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #ffffff;
}

.rouge-script-regular {

    font-family: "Rouge Script";
    font-weight: 400;
    font-style: normal;

}
.cookie-regular {
  font-family: "Cookie, Verdana";
  font-weight: 400;
  font-style: normal;
}

*{
    border: 0px red solid;
}

h1 {
    font-family: "Cookie, Verdana";
    font-weight: 400;
    font-style: normal;
    color: var(--text-primary-color);
    font-weight: 400;
    z-index: 10;
    font-size: clamp(1.2em, calc( 5vw + 1em), 5em);

}

h2 {

    text-align: center;
    color: var(--text-primary-color);
    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: var(--text-primary-color);
    font-weight: bold;
    margin: 0.5em 0em;

}

h4 {

    color: var(--text-secondary-color);
    text-align: center;
    margin: 0.5em 0em;
    font-size: clamp(1em, calc( 1vw + 1em), 2em);
}

.p1 {

    width: min(1440px,90%);
    font-size: clamp(1em, calc( 0.5vw + 1em), 1.5em);
    color: var(--text-secondary-color);

}

.p2 {

    margin: 0.5em 0em;
    font-size: clamp(1em, calc( 0.25vw + 1em), 1.2em);
    color: var(--text-secondary-color);
}

.p3 {

   margin-bottom: 0;
   color: var(--text-on-accent);

}

.p4 {

    text-align: left;

}

.image_1 {

    width: min(282px,75%);
    height: min(99px,75%);

}


strong {
    font-weight: 700;
}

/* Footer */
.footer-logo {

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

}
.footer-title {

    font-size: clamp(2.2em, calc( 8vw + 2em), 10em);

    font-weight: bold;
    color: var(--text-on-accent);
    display: inline-block;
    margin: 0em 0.25em;
}

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

.nav-logo {

    width: clamp(205px, 30vw, 420px);
    height: min(83px,75%);
    border: 2px solid transparent;
}

.webhq_link {
    color: var(--background-color);
    border: 1px solid transparent;
}

.webhq_link:hover {
    border: 1px solid var(--background-color);
    border-radius: 5px;

}

.nav-logo_link:hover {
    border: 2px solid var(--accent-secondary-color);
    border-radius: 10px;
}

.nav_container {

    display: flex;

}

.nav_box {

    flex-direction: row;

}


.test-name {
    margin-left: auto !important;
    display: flex;

    align-items: center;
}


/* bootstrap */
.ms-auto .nav-item {
    align-items: center;
    align-content: center;
}




.block_title {

    margin-top:2em ;
    margin-bottom:2em ;
}
.section_footer {


    background-color: var(--accent-primary-c-2);
    padding: 2em;
    display: flex;
    flex-direction: row;
    align-items: center;
    place-content: center;

}

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

   .nav_box {
        flex-direction: column;
        margin: 5px auto;

   }

   .test-name {

        margin: auto;
        flex-basis: 100%;
   }
}



/* color */

:root {

    --text-primary-color: rgba(0, 0, 0, 1);
    --text-secondary-color: rgba(0, 0, 0, 1);
    --text-on-accent: rgb(255, 255, 255);
    --background-color: rgb(244, 231, 225);
    --accent-primary-color: rgb(213, 69, 27);
    --accent-primary-c-2: rgb(213, 69, 27);
    --accent-secondary-color: rgb(255, 155, 69);
    --accent-secondary-color-blur: rgb(255, 155, 69,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;

}

.sm_logo {

    width: clamp(25px, 50vw, 40px);
    margin: 5px;

}

.navbar {
    padding-left: min(75px, 3%);
    padding-right: min(75px, 3%);
    background-color: white !important;
}
.navbar::after {
    content: '';
    overflow-x: hidden;
    position: absolute;
    height: 110%;
    width: 100%;
    right: 0%;

    z-index: -2;
    background: linear-gradient(180deg, rgba(43, 42, 43,0.5) 0%, rgba(43, 42, 43,0.5) 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;
}

.foot_shadow {

    height: 5px;
    width: 100%;
    z-index: -2;
    background: linear-gradient(0deg, rgba(43, 42, 43,0.5) 0%, rgba(43, 42, 43,0.4) 25%,   rgba(43, 42, 43,0) 100%);

}

.navbar-brand {

    margin-right: 0 !important;

}
.navbar-nav {

    --bs-nav-link-color: var(--text-on-accent) !important;
    --bs-nav-link-hover-color: var(--accent-secondary-color);
}


.navbar-toggler {
    --bs-navbar-toggler-border-color: var(--text-on-accent) !important;
    --bs-navbar-color: var(--text-on-accent) !important;
    --bs-border-width: 2px;
}
.nav-link {
    font-family:'Electrolize', serif;
    min-width: 5em;
    text-align: center;
    color: var(--text-primary-color);

}
.nav-link:hover {

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

.nav-link-selected {

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

@keyframes appear{
    0% {
        opacity: 0;

        scale: 0.5;
    }


    100% {
        opacity:1;

        scale: 1;
    }

}


/* Text animations */


.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;
}


.box_a_third {

    flex-basis: 33% ;

}

.box_a_half {

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

.box_image_1 {

    display: contents;
    background-color: #ffffff;
    padding: 5px;
    margin: 10px;

}
.box_list {

    flex-basis: 100%;

}

.box_two_third {

    flex-basis: 66%;
}

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

    flex: 1;

    li {
        translate: -16px 0px;
        text-align: center;
        border-bottom: var(--text-secondary-color) solid 1px;
    }

    li::marker {
        color: transparent;
    }

}

.box_type_one {

    display: flex;
    margin: clamp(16px, 3vw, 20px) 0;
    width: min(80%,800px);

}
.box_type_two {

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


}

.box_type_three {

    display: flex;
    margin: clamp(1rem, 3vw, 4rem) clamp(0.5rem, 3vw, 4rem);
    width: min(98%,800px);
    height: fit-content;

}

.container {

    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.buttonP3 {

    height: 3rem;
    width: 13rem;
    margin: 5px;
    font-size: clamp(1.2em, calc( 0.25vw + 1em), 1.2em);
    font-weight: bold;
    border-radius: 8px;

    color: var(--text-on-accent);
    background-color: var(--accent-primary-color);
    border: 1px solid var(--accent-primary-color);

}

.buttonP3:hover {

    color: var(--accent-primary-color);
    background-color: var(--text-on-accent);
    font-weight: normal;

}

.buttonP4 {

    height: 3rem;
    width: 13rem;
    margin: 5px;
    font-size: clamp(1.2em, calc( 0.25vw + 1em), 1.2em);
    font-weight: bold;
    border-radius: 8px;

    color: var(--text-on-accent);
    background-color: var(--accent-secondary-color);
    border: 1px solid var(--accent-secondary-color);

}

.buttonP4:hover {

    color: var(--accent-primary-color);
    background-color: var(--text-on-accent);
    font-weight: normal;

}


.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: var(--text-primary-color) ;
        background-color: transparent;
        border: 3.5px solid var(--text-primary-color);



    }

    .buttonP1:hover {

        height: 4.1rem;
        width: 11.25rem;
        font-weight: bold;
        color: var(--accent-secondary-color) ;
        background-color: var(--text-primary-color);
        border: 3.5px solid var(--accent-secondary-color);
    }







    .buttonP2 {

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

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

        background-color: var(--accent-primary-color);
        color: var(--text-on-accent);

        border: none;


    }
    .buttonP2:hover {

        height: 3.1em;
        width: 9.1em;

    }




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


.container_row_halves {

    display: flex;

}

.container_services {

    display: flex;
    width: 100%;

}




.landingPageHead {
    margin: 0;
    padding: 0;
    /* padding: 0 min(10em, 8%); */
    text-align: center;
}

.object_centered{
    flex: auto;

}


.paragraph1 {

    text-align: center;
}

.paragraph2 {

    margin: 0rem clamp(1rem, 6vw, 8rem) 0rem 0rem;

    text-align: left;

}


/* forms  */
form small {
    --bs-secondary-color: var(--text-secondary-color);
}

form label {

    color: var(--text-secondary-color);
}

.form-check {
    margin: 12px;
}
.form-check-input:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--accent-secondary-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--accent-secondary-color-blur);
}
.form-check-input:checked {
    background-color: var(--accent-secondary-color);
    border-color: var(--accent-secondary-color-blur);
}
.form-group {
    margin: 12px;
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--accent-secondary-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--accent-secondary-color-blur);
}

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

.overlay_black_1 {

    background: rgba(0, 0, 0, 0.4);


    h1 {
        color: var(--text-on-accent);
    }
    p {
        color: var(--text-on-accent);
    }
}

.section_text {

    padding-top: 2em  ;
    padding-left: min(24em, 8%);
    padding-right: min(24em, 8%);
    display: flex;
    flex-direction: column;
    align-items: center;
    place-content: center;

}

.section_background_image{

    text-align: center;
    background: transparent;
    background-image: url(img/background/english_village.jpg) ;
    background-size: cover;

}

.section_half {

    min-height: 50vh;

    padding: 0px min(24em, 8%);
    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;

}

.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;

}

.containers {
    width: min(1280px, 90%);
    height: auto;
    margin: 4em auto;
    border: 10px solid var(--clr-dark);
    flex-wrap: wrap;
    display: flex;
    gap: 1em;
}

.item-1 {
    min-width: 300px;
    height: 300px;
    background-color: #fb7185;
    padding: 1em;
    margin: 8px;
    font-weight: 700;
    color: var(--clr-light);
    text-align: center;
    border: 10px solid var(--clr-accent);
    border-radius: 10px;
    flex: 1;
    background-position: center;
    background-size: cover;

}
.item-2 {
    min-width: 300px;
    min-height: 500px;
    height: auto;
    /* background-color: #fb7185;
    padding: 1em;
    margin: 8px;
    font-weight: 700;
    color: var(--clr-light);
    text-align: center; */
    border: 10px solid var(--clr-accent);
    border-radius: 10px;
    background-position: center;
    background-size: cover;

}

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

   .item-1 {
        min-width: 150px;

   }



}


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

    .box {

        flex-direction: column;
        margin: auto;

    }

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

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

    .item-2 {
        min-height: 300px;
    }



}

@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;
    }

    .p4 {

        text-align: center;

    }

}

@keyframes color-rotate {
    0% {background: var(--accent-primary-color)}
    10% {background: var(--accent-secondary-color)}
    45% {background: var(--accent-primary-color)}
    55% {background: var(--accent-secondary-color)}
    90% {background: var(--accent-primary-color)}
    100% {background: var(--accent-secondary-color)}
}


.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%;

    }
}