/* Default styles - small devices (Mobile, screen width < 768px) */

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body {
    /* font-family: "Roboto", sans-serif; */
    font-family: "Cabin", sans-serif;
    font-size: 1.125rem;
}

a{color:#24195e;}

/*SIDE MENUE*/


.current{background-color: var(--purple);}

li a.current{background-color: var(--green);color:#fff;}
li a.head{background-color: #24195e;color:#fff;font-weight:600;}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #95c11f;
  color: #24195e;
}


.line-title {
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
  }
  .line-title .title {
    background-color: var(--white);
    padding: .5rem 1rem;
    width: fit-content;
  }
  .line-title h2 {
    display: inline-block;
    margin: 0;
    font-size: 3rem;
    font-weight: 100;
    color: var(--blue);
  }
  
  .line-title .line {
    position: absolute;
    top: 50%; 
    transform: translateY(-50%);
    width: 100%; 
    height: 1px;
    background-color: var(--gray2); 
    left: 0;
    right: 0;
    z-index: -1;
  }
  
  .line-title .line:first-child {
    left: 0;
  }
  
  .line-title .line:last-child {
    right: 0;
  }
  ul.custom-bullet-list {
    list-style: none;
    padding-left: 0;
}

ul.custom-bullet-list li {
    position: relative;
    padding-left: 3.5rem;
}

ul.custom-bullet-list li::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.11 5"><polygon points="39.86 5 41.11 3 0 3 0 2 41.11 2 39.86 0 49.11 2.5 39.86 5" style="fill:%238dc63f;"/></svg>');
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-65%);
    width: 3rem;
    height: auto;
}

/*--------------------------------------------------------------
# Main Navigation
--------------------------------------------------------------*/
.navbar-toggler {
    border: none;
}

#main-nav .active {
    background-color: var(--green);
}

#main-nav a {
    /* text-transform: uppercase; */
    color: var(--blue);
    font-weight: 300;
    transition: all .3s;
}


#main-nav .btn {
    font-size: 18px;
}

#main-nav .active a {
     color: #ffffff;
}

#main-nav .btn {
    font-size: 18px;
}

.nav-outer .container {
    padding: 0;
}


.navbar ul {
    padding: 0;
}

.navbar ul li, .site-logo-top, .navbar-toggler, .mobile-search-btn {
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
}

.navbar-nav .nav-item, .navbar ul li:first-child:not(.dropdown ul li) {
    padding: .9rem calc(var(--bs-gutter-x) * .5);
    border-top: thin solid var(--lightGray);
}

.navbar a {
    padding: 0;
}
.nav-contact-contain {
    padding: 0 calc(var(--bs-gutter-x) * .5);
}
#main-nav .navbar-nav .nav-item:last-of-type {
    border-bottom: thin solid var(--lightGray);
}

/* Collapse Button Mobile */
.animated-icon {
    cursor: pointer;
    height: 20px;
    margin: 0px;
    position: relative;
    width: 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

    .animated-icon span {
        border-radius: 9px;
        display: block;
        height: 3px;
        position: absolute;
        left: 0;
        opacity: 1;
        width: 100%;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    .animated-icon span {
        background: var(--blue);
    }

        .animated-icon span:nth-child(1) {
            top: 0px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }

        .animated-icon span:nth-child(2) {
            top: 10px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }

        .animated-icon span:nth-child(3) {
            top: 20px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }

    .animated-icon.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 0px;
        left: 8px;
    }

    .animated-icon.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }

    .animated-icon.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 21px;
        left: 8px;
    }

    #main-nav .logo-top {
        padding-left: calc(var(--bs-gutter-x)* .5);
        width: 11rem;
    }


#main-nav .nav-item.active ul {
    background-color: var(--green)!important;
}

#main-nav {
z-index: 9;
}

#main-nav .nav-item.active ul li a.dropdown-item.active {
    color: #ffffff!important;
}
#main-nav a#navbarDropdown:hover {
    color: var(--white)!important;
}

.top-contact {
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
}
.top-contact a {
    text-decoration: none;
}

.top-contact a:hover {
    color: var(--green)!important;
}

/*--------------------------------------------------------------
# SVGs
--------------------------------------------------------------*/

svg .text-container p {
    color: var(--blue);
    font-weight: 400;
    margin-bottom: 0;
    text-align: center;
    line-height: 3.5rem;
    padding: 0 5px 0 5px;
}
svg .text-container p span {
    line-height: 2.1rem;
    padding-bottom: 1.25rem;
}
svg .text-container div p span {
    color: var(--blue);
}

svg .text-container div p span {
    margin-top: -1rem;
}
foreignObject.text-container {
    padding: 0 2rem;
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero {
    height: fit-content;
}
.hero .swiper-slide {
    position: relative;
}
.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30%;
    position: absolute;
    top: 0;
    z-index: -1;
}
.hero .circle-text-svg {
    padding: 2rem 1rem 1rem 2rem;
}

.hero img {
    /* border-bottom-right-radius: 30%; */
}
.corner-svg {
    position: absolute;
    width: 35vw;
    /* margin-left: 85vw; */
    bottom: 0;
    right: 0;
}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.card-service {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card-service img {
    border-radius: 50%;
    width: 90%;
    transition: all .3s ease;
}
.card-service svg:first-of-type {
    margin-top: -5.5rem;
    width: 100%!important;
}
.card-service svg:last-of-type {
    width: 3rem;
    transition: all .3s ease;
}
a.card-service h3 {
    font-size: 2.5rem;
    margin: 2rem 0;
    transition: all .3s ease;
}
a.card-service {
    color: var(--blue);
    text-decoration: none;
}

a.card-service p {
    font-size: 1.5rem;
    color: var(--gray3);
    text-transform: uppercase;
    transition: all .3s ease;
}
.services .card-service svg g path, .services .row .col:nth-child(2n) .card-service svg g path {
    transition: all .3s ease;
}
.services .row .col:nth-child(2n) .card-service svg g path{
    fill: var(--green)!important;
}
.card-service:hover h3 {
    color: var(--gray3);
}
.card-service:hover img {
    opacity: .67;
}
.card-service:hover svg:last-of-type {
    transform: translateY(-1.25rem);
}
.card-service:hover svg:last-of-type g polygon {
    fill: var(--gray3)!important;
}
.services .card-service:hover svg g path, .services .row .col:nth-child(2n) .card-service:hover svg g path {
    fill: var(--gray3)!important;
}

/*--------------------------------------------------------------
# Home About
--------------------------------------------------------------*/
.home-about .container-fluid {
    position: relative;
}
.home-about {
    background-color: var(--blue);
}

.home-about .lead {
    font-size: 2rem;
    padding-bottom: 1.5rem;
}
.home-about p {
    color: var(--white);
    font-size: 1.25rem;
}
.home-about .corner-svg {
    position: absolute;
    width: 35vw;
    top: 0;
    left: 0;
    transform: rotate(180deg);
    
}
.home-about .container-fluid .text-col p:last-of-type {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# We Use
--------------------------------------------------------------*/

.we-use .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.we-use .swiper-slide img {
    width: 80%;
}

.swiper-button-next, .swiper-button-prev {
    color: #cfcdce!important;
    transition: all .3s;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    color: var(--pinkBright)!important;
}
/*--------------------------------------------------------------
# Zebras
--------------------------------------------------------------*/
.zebras {
    color: var(--gray3);
    font-size: 1.5rem;
}

.zebras .zebra img {
    border-radius: 50%;
}
.zebra.zebra-gray {
    background-color: var(--gray);
}
.zebra {
    position: relative;
}
.zebra .corner-svg, .corner-svg.corner-right {
    position: absolute;
    width: 35vw;
    /* margin-left: 85vw; */
    bottom: 0;
    right: 0;
}
/*--------------------------------------------------------------
# Get in touch
--------------------------------------------------------------*/
.get-in-touch .container-fluid {
    position: relative;
}
.get-in-touch img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.get-in-touch .btn-container {
    border: 4px solid var(--white);
    transition: all .3s;

}
.get-in-touch .btn-container .btn {
    text-transform: uppercase;
    background-color: var(--green);
    color: var(--blue);
    border-radius: 0;
    font-size: 1.75rem;
    font-weight: 600;
    padding: 1rem 2.5rem;
    transition: all .3s;
}

.get-in-touch .btn-container:hover {
    border-color: var(--blue);
}
.get-in-touch .btn-container:hover .btn {
    background-color: var(--blue);
    color: var(--white);
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
    font-size: .875rem;
    font-family: "Roboto", sans-serif;
    background-color: var(--blue);
    color: var(--white);
    position: relative;
    /* padding-bottom: 6rem; */
}
footer .logo-footer {
    width: 16rem;
}


footer#footer {
    /* border-top: 2px solid var(--gold); */
}
    footer a span {
        /* color: var(--cyan); */
    }

    footer .footer-title {
        font-weight: 300;
        /* font-family: "Barlow Condensed", sans-serif; */
        text-transform: uppercase;
        color: var(--green);
        font-weight: 700;
    }



    footer a {
        color: var(--white);
        font-size: .875rem;
        text-decoration: none;
        font-weight: 400;
    }

        footer a:hover {
            /* text-decoration: underline; */
            color: var(--green);
        }

            
       
.footer-title {
    font-size: 1.25rem;
    /*font-weight: 500;*/
    margin-bottom: 20px;
}
footer .navbar-toggler {
    border: none;
}

footer ul li {
    margin-bottom: 10px;
    padding-left: 2.3rem;
    text-indent: -1.1rem;
}
footer .fa-angle-right {
   height: 20px;
}
footer .fa-angle-down {
    width: 20px;
}
footer .fa-chevron-right {
    /*color: #ffffff;*/
    /*color: #ffffff;*/
    padding-right: 0.2rem;
}

.shfooter .collapse {
    display: inherit;
}

/* .shfooter i::before {
    color: var(--light);
} */


.resize {
    text-align: center;
}

.resize {
    margin-top: 3rem;
    font-size: 1.25rem;
}

/* Social footer  */
footer .fa-brands {
    width: 7%;
}

footer .fab:before {
    font-size: 1.1rem;
}

.social-footer a:hover svg {
    /*color: var(--links); */
    animation: icons-rise 0.3s linear forwards;
}

#footer .social-logos svg {
   width: 30px;
   height: 30px;
   transition: all .3s;
}
#footer .social-logos svg g rect{
   
    transition: all .3s;
 }
#footer h4 {
    font-size: 1rem;
    margin-top: 2rem;
}
@keyframes icons-rise {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translate(2.5px, -2.5px);
    }
}

.social-footer a:hover {
    text-decoration: none;
}

    .social-footer a:hover span {
        text-decoration: underline;
    }

@keyframes arrow-right {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(3px);
    }
}



footer hr:not([size]) {
    height: 1px;
    /* color: var(--hcs-blue); */
    opacity: .8;
}

footer ul li {
    padding-left: 0;
    text-indent: 0;
    /* remove this if issue 616 617 */
    display: flex;
    align-items: center;
}

footer .fa-chevron-right {
    display: none;
}

.footer-title {
    margin-bottom: 0;
}

.shfooter ul {
    margin-bottom: 0;
}

.shfooter .collapse {
    display: none;
}

    .shfooter .collapse.show {
        display: block;
    }

.shfooter .title .fa-angle-down,
.shfooter .title[aria-expanded=true] .fa-angle-right {
    display: none;
}

.shfooter .title[aria-expanded=true] .fa-angle-down {
    display: block;
}

.shfooter .navbar-toggler {
    display: inline-block;
    padding: 0;
}

footer .helpline {
    color: var(--purple);
    font-weight: 600;
    font-size: 1.5rem;
    transition: all .3s;
}
footer .helpline:hover {
    color: var(--green);
}
footer li p {
    margin-bottom: 0;
}

footer a, footer p, footer h3 {
    /* color: var(--purple); */
}
#footer .navbar-toggler svg {
    fill: var(--white)!important;
}

footer ul.styled li a::before {
    content: "\003E";
    margin-right: .25rem;
    display: inline-block;
    transition: all .3s;
}
footer li a:hover::before {
    transform: translateX(.125rem);
    color: var(--green);
}

footer #social svg {
    width: 2rem;
}
#footer h3, #footer .footer-title {
    font-family: "Roboto", sans-serif;
    font-weight: 300!important;
}

footer li, footer a, footer p {
    font-weight: 300;
}


footer #social a:hover svg rect, footer #social a:hover svg g rect {
    fill: var(--gray3)!important;
}
footer #social a svg rect, footer #social a svg g rect {
    transition: all .3s;
}
.sub-footer {
    color: var(--gray3);
    font-size: 1rem;
}



  .inner-about {
                margin-top:40px;
              }
              .accordion {
                margin-top: 30px;
                margin-bottom: 30px;
              }
              
              .maincontactform {
                background-color:#f2f3f4 ;
                padding:20px;
              }
              
              #recaptcha {
                  margin-top:20px;
              }
              
              .contact-form input {
                 background-color: none;
              }
              
              [id*="-error"] {
                color:red;
              }
              
              #bodycontent a {
                color:#000;
              }
              
              .inner-about  h2{
                color: #24195e;
              }
              
              .inner-about h1 {
  color: #24195e;
}
              
              ul.leftnav  {
                list-style: none;
              }
              
             .news-item h2 {
                padding-top:12px;
                color: #24195e;
             }
             
             .news-item a{
                color: --blue;
                text-decoration: none;
             }
             .news-item a:hover{
              opacity: 0.8;  
              text-decoration:underline;
             }