body {
    margin: 0;
    font-family: 'Electrolize', serif;
    font-weight: 400;
    font-style: normal;
    background-color: #ffffff;
}

*{
    border: 0px red solid;
}

h1 {

    color: var(--text-primary-color);
    font-weight: bold;
    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);
}

section:last-child {
    margin-bottom: 0;
}
section:first-child{
    margin-top: 0;
}


.accordion-body {

    text-align: left;

}

.accordion-button {

    background-color: transparent;

}
.accordion-button::after {

    margin-left: unset;

}

.accordion-item {
    border: none;
    background-color: transparent;
}

.accordion-item:last-of-type {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.box_a_half_p3 {

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

}

.centered {

    margin: auto;
    text-align: center;

}

.picture_half {

    object-fit: cover;
    width: 100%;
    overflow: hidden;

}
.picture9 {


    border: 3px solid #fff;
    border-radius: 10px;
    height: 600px;

}

.p1 {

    text-align: center;
    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);
}


strong {
    font-weight: 700;
}

/* Footer */
.footer-logo {

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

}
.footer-title {

    font-size: clamp(2.2em, calc( 8vw + 2em), 10em);
    text-align: center;
    font-weight: bold;
    color: var(--accent-primary-color);
    display: inline-block;
    margin: 0em 0.25em;
}

/* Header */
.header-logo {

    margin: 5px ;
}





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




.block_title {

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

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

.item-1 {
    min-width: 300px;
    height: 450px;
    /* 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: contain;
    background-repeat: no-repeat;

}
.item-2 {
    display: flex;
    flex: 1;
    border: 3px solid transparent;
    text-decoration: none;
    /* margin: auto; */
}


.item-3:hover {
    border: 3px solid var(--accent-secondary-color);
}
.item-3 {
    min-width: 300px;
    max-width: 300px;
    height: 100%;
    min-height: 350px;
    /* background-color: #fb7185; */
    padding: 1em;
    margin: 8px;
    font-weight: 700;
    color: var(--clr-light);
    text-align: center;
    border: 3px solid var(--clr-accent);
    border-radius: 10px;
    flex: 1;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;

}

.item-4 {

    min-width: 300px;
    max-width: 400px;
     height: 100%;
    min-height: 350px;
    font-weight: 700;
    color: var(--clr-light);
    text-align: center;
    border: 3px solid var(--clr-accent);
    border-radius: 10px;
    flex: 1;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;
    padding-bottom: 1em;



}
.item-4:hover {
    border: 3px solid var(--accent-secondary-color);
}

.item-4 p {

    padding-bottom: 2em;
}

.item-5 {

    min-width: 300px;
    max-width: 400px;

    margin: 8px;
    font-weight: 700;
    color: var(--clr-light);
    text-align: center;
    border: 3px solid var(--clr-accent);
    border-radius: 10px;
    flex: 1;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: auto;



}
.itemPictureClient {

  height: 90%;

  display: flex;
  align-items: center;

  border:  3px solid transparent;

}


.section_footer {


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

}

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



/* color */

:root {

    --text-primary-color: rgba(0, 0, 0, 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(0, 0, 255, 1);
    --accent-primary-c-2: rgba(0, 0, 255, 0.9);
    --accent-primary-c-3: rgba(240, 240, 255, 1);
    --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 {
    padding-left: min(75px, 3%);
    padding-right: min(75px, 3%);
    background-color: var(--accent-primary-c-3) !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-color: var(--accent-primary-c-3);
    z-index: -1;
}

.navbar-nav {

    --bs-nav-link-color: var(--accent-primary-color) !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;

}
.nav-link:hover {

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

.nav-link:focus {
    color: var(--accent-primary-color);

}

/* .nav-link:focus ~ p {
    color: var(--accent-primary-color);

} */

.nav-link-selected {

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

.navbar-nav:focus {
    color: var(--accent-primary-color);
}


.nav-link-selected:hover {

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

@keyframes appear{
    0% {
        opacity: 0;

        scale: 0.5;
    }


    100% {
        opacity:1;

        scale: 1;
    }

}

.section_background_image{

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

}

/* 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;

}

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

}

.text_left {
    display: inline-block;
    width: auto;
}

.background_basic_1 {
    background: var(--accent-primary-c-3);
}

/* .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, 6rem) clamp(0.5rem, 3vw, 4rem);
}

.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(0.5rem, 2vw, 2rem);

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


}
.box_type_three {

    width: min(1280px, 80%);
    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: var(--text-on-accent) ;
        background-color: rgba(0, 0, 0, 0.8);
        border: 3.5px solid var(--text-on-accent);



    }

    .buttonP1:hover {

        height: 4.1rem;
        width: 11.25rem;
        font-weight: bold;
        color: var(--accent-primary-color) ;
        background-color: var(--text-on-accent);
        border: 3.5px solid var(--accent-primary-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;

    }

    .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-secondary-color);
    background-color: var(--text-on-accent);
    font-weight: normal;

}




}

.button_box_table {

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

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


.container_row_halves {

    display: flex;

}

.container_services {

    display: flex;
    width: 100%;

}




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

.object_centered{
    flex: auto;

}


.paragraph1 {

    text-align: center;
}

.paragraph2 {

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

    text-align: left;

}

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

}

/* 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_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;

}

.text_on_img {

    color:  white ;

}

.table_1 {
    border: black 2px solid;
    align-content: center;
    margin: 0px;

    p {
        margin: auto;

    }

}

.box_service {

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

    li::marker {
        color: transparent;
    }
}

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

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



   }

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


   }



}

@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-3 {
        min-width: 250px;
    }

}

@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;
    }
    .picture_half {
        height: 300px;
    }

}

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

    }
}