#footerParallax{
    position:fixed;
    z-index:-1;
    left:0;
    right:0;
    bottom:0
}
@media only screen and (max-width:991px){
    #wrapperParallax{
        margin-bottom:0!important
    }
    #footerParallax{
        position:static;
        text-align:center
    }
}
.footer {
    background-color: var(--global--color-secondary2) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: relative !important;
    margin-top: 500px !important;
}
.no-margin{
	margin-top: 0px !important;
}
.footer .footer-top{
    padding-top:100px;
    padding-bottom:68px
}
@media screen and (max-width:991.98px){
    .footer .footer-top {
        padding-top: 70px !important;
        padding-bottom: 20px !important;
    }
}
.footer .footer-widget {
    text-align: center !important;
}
@media screen and (min-width:768px){
    .footer .footer-widget {
        text-align: right !important;
    }
}
@media screen and (max-width:991.98px){
    .footer .footer-widget {
        margin-bottom: 30px !important;
    }
}
.footer .footer-widget .footer-widget-title h5 {
    font-family: var(--global--font-heading) !important;
    color: var(--global--color-gray) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    text-transform: capitalize !important;
    margin-bottom: 30px !important;
}
.footer .footer-widget .widget-content p {
    font-family: var(--global--font-body) !important;
    color: #929ba2 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    margin-bottom: 25px !important;
}
.footer .widget-links ul {
    padding-left: 0 !important;
    list-style: none !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    -webkit-transform: translateY(-5px) !important;
    -ms-transform: translateY(-5px) !important;
    transform: translateY(-5px) !important;
}
    .footer .widget-links ul li {
        display: block !important;
    }
        .footer .widget-links ul li a {
            color: #929ba2 !important;
            font-size: 14px !important;
            font-weight: 400 !important;
            line-height: 33px !important;
            text-transform: capitalize !important;
            font-family: var(--global--font-body) !important;
        }
            .footer .widget-links ul li a:hover {
                color: var(--global--color-primary) !important;
            }
/*.footer .widget-links.widget-icon{
    background:url(../images/icons/footer-mouse.png);
    background-position-x:77%;
    background-position-y:50px;
    background-repeat:no-repeat
}*/
.footer .widget-contact {
    -webkit-transform: translateY(12px) !important;
    -ms-transform: translateY(12px) !important;
    transform: translateY(12px) !important;
}
    .footer .widget-contact .widget-content p {
        color: var(--global--color-white) !important;
        margin-bottom: 15px !important;
    }
    .footer .widget-contact .widget-content .phone {
        margin-bottom: 18px !important;
        font-family: var(--global--font-body) !important;
        font-weight: 300 !important;
        font-size: 34px !important;
        line-height: 30px !important;
        color: #929ba2 !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
@media screen and (max-width:767.98px){
    .footer .widget-contact .widget-content .phone {
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
    }
}
.footer .widget-contact .widget-content .phone a {
    font-family: var(--global--font-body) !important;
    font-weight: 300 !important;
    font-size: 34px !important;
    line-height: 30px !important;
    margin-left: 8px !important;
    color: var(--global--color-white) !important;
    -webkit-transition: .3s ease-in-out !important;
    -o-transition: .3s ease-in-out !important;
    transition: .3s ease-in-out !important;
}
    .footer .widget-contact .widget-content .phone a:hover {
        color: var(--global--color-primary) !important;
    }
.footer .widget-contact .widget-content .email {
    font-family: var(--global--font-body) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 21px !important;
    color: var(--global--color-primary) !important;
    margin-bottom: 20px !important;
}
    .footer .widget-contact .widget-content .email a {
        font-family: var(--global--font-body) !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        line-height: 21px !important;
        color: var(--global--color-primary) !important;
    }
.footer .widget-contact .widget-content .email a:hover{
    color:var(--global--color-primary-70)
}
.footer .widget-contact .widget-content .address{
    margin-bottom:12px
}
.footer .widget-contact .widget-content .address p{
    font-family:var(--global--font-body);
    color:#929ba2;
    font-size:14px;
    font-weight:400;
    line-height:24px;
    margin-bottom:25px;
    margin-bottom:0
}
.footer .widget-contact .widget-content .directions a{
    font-family:var(--global--font-body);
    font-weight:700;
    font-size:15px;
    line-height:1;
    color:var(--global--color-white);
    text-transform:capitalize;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-transition:.3s ease-in-out;
    -o-transition:.3s ease-in-out;
    transition:.3s ease-in-out
}
@media screen and (max-width:767.98px){
    .footer .widget-contact .widget-content .directions a{
        -webkit-box-pack:center;
        -ms-flex-pack:center;
        justify-content:center
    }
}
.footer .widget-contact .widget-content .directions a i{
    color:var(--global--color-white);
    margin-right:10px;
    -webkit-transition:.3s ease-in-out;
    -o-transition:.3s ease-in-out;
    transition:.3s ease-in-out
}
.footer .widget-contact .widget-content .directions a:hover{
    color:var(--global--color-primary)
}
.footer .widget-contact .widget-content .directions a:hover i{
    color:var(--global--color-primary)
}
.footer-copyright{
    padding:50px 0 40px
}
.footer-copyright .copyright{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    width:100%
}
@media screen and (max-width:991.98px){
    .footer-copyright .copyright{
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column
    }
}
.footer-copyright .copyright span{
    font-family:var(--global--font-body);
    font-weight:400;
    font-size:14px;
    color:var(--global--color-white);
    text-transform:capitalize
}
@media screen and (max-width:991.98px){
    .footer-copyright .copyright span{
        margin-bottom:40px;
        text-align:center
    }
}
.footer-copyright .copyright span a{
    color:var(--global--color-primary)
}
.footer-copyright .copyright span a:hover{
    color:var(--global--color-primary-70)
}
.footer-copyright .copyright .social-icons{
    margin-bottom:0
}
.footer-copyright .copyright .social-icons li{
    display:inline-block;
    margin-left:30px
}
@media screen and (max-width:767.98px){
    .footer-copyright .copyright .social-icons li{
        margin-right:15px
    }
}
.footer-copyright .copyright .social-icons li:last-child{
    margin-right:0
}
.footer-copyright .copyright .social-icons li a{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    font-size:14px;
    text-transform:capitalize;
    font-family:var(--global--font-body);
    font-weight:700;
    color:#929ba2;
    -webkit-transition:.3s ease-in-out;
    -o-transition:.3s ease-in-out;
    transition:.3s ease-in-out
}
.footer-copyright .copyright .social-icons li a:hover{
    color:var(--global--color-primary)
}
.footer-copyright .copyright .social-icons li a:hover i{
    color:var(--global--color-primary)
}
.footer-copyright .copyright .social-icons li a i{
    font-size:30px;
    margin-right:0px;
    color:var(--global--color-white);
    -webkit-transition:.3s ease-in-out;
    -o-transition:.3s ease-in-out;
    transition:.3s ease-in-out
}
.footer-bottom{
	background-color: var(--global--color-secondary);
}

.rtl{
	direction: rtl;
	text-align: right;
}
.actions-holder{
	text-align: left;
}
.footer-widget-subcribe form {
    margin-bottom: 18px;
}
.footer-widget-subcribe input[type=email] {
    color: #555555;
    border: none;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px 10px;
    box-sizing: border-box;
    outline: none;
    font-size: 14px;
    font-weight: 500;
}
.mc4wp-form-fields .subscribe-inner-form input[type=email] {
    height: 46px;
    width: 50%;
    background: transparent;
    color: #b1b0b0;
    border-color: rgba(255, 255, 255, 0.5);
    padding-right: 56px;
}
.mc4wp-form-fields .subscribe-inner-form .subscribe-btn-icon {
    background: transparent;
    border: none;
    outline: none;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 46px;
    height: 100%;
    line-height: 44px;
    text-align: center;
    color: #fff;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
}
.footer-logo {
    max-height: 180px;
    padding-bottom: 32px;
    margin-left: 30px;
}



/*//////////////////////////////////////////////////////////////////////////*/
/* =====================================

    ////////New Css
   RESET / BASE
====================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    font-family: sans-serif;
}

/* 
    You mentioned "section-container" in your snippet.
    Typically it’s a container with max-width + margin auto. 
    Adjust as you prefer.
  */
.section-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* =====================================
     FOOTER CONTAINER
  ====================================== */
/*
    In your snippet:
    - "flex flex-col md:block md:mt-14 mt-7"
      -> By default: display flex (column), margin-top: 1.75rem (mt-7).
      -> On md screens (>=768px), display block, margin-top: 3.5rem (mt-14).
  */
.footer-container {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .footer-container {
        display: block; /* md:block */
    }
}

/* =====================================
     FOOTER - TOP SECTION
  ====================================== */
/* "bg-rm-green py-4 md:py-10"
     -> We don’t have the exact color for "bg-rm-green". 
        Let’s assume #01714e or any custom. Adjust as needed.
     -> py-4 => 1rem vertical; md:py-10 => 2.5rem vertical
  */
.footer-top {
    background: #01714e; /* your "bg-rm-green" color here */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 768px) {
    .footer-top {
        padding-top: 2.5rem; /* py-10 => 2.5rem */
        padding-bottom: 2.5rem;
    }
}

/* 
    .footer-top-content => "flex flex-col md:flex-row md:gap-20 gap-6"
    => By default: flex-col + 1.5rem gap
    => On md: flex-row + 5rem gap (20 in Tailwind is 5rem)
  */
.footer-top-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* gap-6 => 1.5rem */
}

@media (min-width: 768px) {
    .footer-top-content {
        flex-direction: row;
        gap: 5rem; /* md:gap-20 => 5rem */
    }
}

/* 
    Left logos container => 
    "flex flex-col md:justify-between justify-center items-center gap-2 md:gap-12 md:w-1/4"
  */
.footer-left-logos {
    display: flex;
    flex-direction: column;
    justify-content: center; /* default on small screens */
    align-items: center;
    gap: 0.5rem; /* gap-2 => 0.5rem */
    width: 100%;
}

@media (min-width: 768px) {
    .footer-left-logos {
        justify-content: space-between;
        gap: 3rem; /* md:gap-12 => 3rem */
        width: 25%; /* md:w-1/4 => 25% */
    }
}

/* The anchor wrapping each logo => "max-w-[159px]" 
     We’ll just ensure the image doesn’t exceed 159px in width.
  */
.footer-logo {
    max-width: 159px;
    display: inline-block; /* ensure it’s block-level if you like */
}

/* 
    The big container that holds columns => 
    "flex flex-col md:flex-row items-start text-start justify-between md:gap-2 gap-4 flex-1 pb-4 px-2"
  */
.footer-links-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    justify-content: space-between;
    gap: 1rem; /* gap-4 => 1rem */
    flex: 1; /* "flex-1" => it grows to fill space */
    padding-bottom: 1rem; /* pb-4 => 1rem */
    padding-left: 0.5rem; /* px-2 => 0.5rem */
    padding-right: 0.5rem;
}

@media (min-width: 768px) {
    .footer-links-wrapper {
        flex-direction: row; /* md:flex-row */
        gap: 0.5rem; /* md:gap-2 => 0.5rem */
    }
}

/* Each column => "lg:w-fit w-full" 
     We'll approximate w-full => width: 100% on small screens, 
     and “lg:w-fit” => "auto" on large screens (>=1024px).
  */
.footer-column {
    width: 100%;
}

@media (min-width: 1024px) {
    .footer-column {
        width: auto; /* "w-fit" approximation */
    }
}

/* Column Header => the row with title + arrow 
     "w-full flex justify-between items-center text-text-white 
      font-bold text-md"
  */
.footer-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #fff; /* text-text-white => #fff */
    font-weight: 700; /* font-bold */
    font-size: 1rem; /* text-md => 1rem or ~1.125rem if needed */
}
.footer-column-header > h6 {
    color: #fff !important; /* text-text-white => #fff */
   
}
/* The toggle arrow on mobile => "md:hidden block text-text-white text-lg"
     => hidden on md+ screens, displayed on smaller screens. 
  */
.toggle-arrow-mobile {
    display: block; /* block on small screens */
    color: #fff; /* text-text-white */
    font-size: 1.125rem; /* text-lg => 1.125rem or 18px */
}

@media (min-width: 768px) {
    .toggle-arrow-mobile {
        display: none; /* md:hidden => none on md+ */
    }
}

/* The link list => 
     "hidden text-text-white text-xs font-light pt-4 md:block"
     => hidden by default, visible on md+ screens
     => text-xs => 0.75rem, font-light => 300
     => pt-4 => 1rem
  */
.footer-link-list {
    display: none;
    color: #fff;
    font-size: 0.75rem; /* text-xs */
    font-weight: 300; /* font-light */
    padding-top: 1rem; /* pt-4 => 1rem */
}

@media (min-width: 768px) {
    .footer-link-list {
        display: block; /* md:block => display on md+ screens */
    }
}

.footer-column--open .footer-link-list {
    display: block;
}
/* Each list item => "md:pb-1.5 pb-6 p1"
     => On small screens: pb-6 => 1.5rem bottom
     => On md+ screens: pb-1.5 => 0.375rem
     => p1 => ~0.25rem? We can adapt that as a small side padding or something. 
  */
.footer-link-list li {
    padding-bottom: 1.5rem; /* pb-6 => 1.5rem on small screens */
    margin-left: 0.25rem; /* p1 could be top/bottom or left padding. Adjust as needed. */
    margin-right: 0.25rem;
}

@media (min-width: 768px) {
    .footer-link-list li {
        padding-bottom: 0.375rem; /* md:pb-1.5 => 0.375rem */
    }
}

.footer-link-list a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-size: 1rem; /* text-base => 1rem if desired */
    transition: color 0.3s;
}

    .footer-link-list a:hover {
        text-decoration: underline;
    }

/* =====================================
     FOOTER - BOTTOM SECTION
  ====================================== */
/* "bg-[#01543A]" => background color #01543A
  */
.footer-bottom {
    background: #01543a;
}

/* 
    "flex md:flex-row flex-col-reverse gap-4 md:justify-between 
     md:py-7 py-3 p1 items-center md:items-start"
     => By default: 
        flex, flex-col-reverse, gap-1rem, py-3 => 0.75rem 
        items-center 
     => On md: 
        flex-row, justify-between, py-7 => 1.75rem, items-start 
  */
.footer-bottom-content {
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem; /* gap-4 => 1rem */
    padding-top: 0.75rem; /* py-3 => 0.75rem */
    padding-bottom: 0.75rem;
    align-items: center; /* items-center */
    /* p1 => if you want to add 0.25rem padding on all sides, you can do so here. 
       We can interpret "p1" as a small spacing, let's assume 0.25rem. 
    */
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    justify-content: center; /* because on small screens it’s basically stacked. */
}

@media (min-width: 768px) {
    .footer-bottom-content {
        flex-direction: row; /* md:flex-row */
        justify-content: space-between; /* md:justify-between */
        padding-top: 1.75rem; /* md:py-7 => 1.75rem */
        padding-bottom: 1.75rem;
        align-items: flex-start; /* md:items-start */
    }
}

/* The paragraph => "text-text-white text-center"
  */
.footer-copy {
    color: #fff; /* text-text-white */
    text-align: center;
}

/* The link => "inline-flex items-center transition-colors text-base 
     hover:underline text-text-white"
  */
.footer-sitemap {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 1rem; /* text-base => 1rem */
    color: #fff;
    transition: color 0.3s;
}

    .footer-sitemap:hover {
        text-decoration: underline;
    }

/* The social links container => "flex lg:justify-between justify-around" 
     => We can approximate on smaller screens => justify-content: space-around,
        on large screens => space-between. 
     Adjust as you see fit.
  */
.footer-social-links {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

@media (min-width: 1024px) {
    .footer-social-links {
        justify-content: space-between; /* lg:justify-between */
    }
}

/* The anchor for each social icon => "inline-flex items-center 
     transition-colors text-base hover:underline text-text-white"
  */
.social-icon {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.3s;
    margin-inline-end: 0.75rem; /* me-3 => ~0.75rem if you want spacing. Adjust as needed. */
}

    .social-icon:hover {
        text-decoration: underline;
    }

/* The icon itself => "flex justify-center items-center w-6 h-6" => 1.5rem x 1.5rem 
  */
.icon-social,
.icon-accordion-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
}


