@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

:root {
    --green: #8fb30a;
    --gray: #6d6e71;
    --menu-background: #769018;
    --menu-text-color: #EEEEEE;
    --hover-text-color: #A2FF86;
    --transition-250ms: all 250ms ease-in-out;
    --transition-300ms: all 300ms ease-in-out;
    --transition-500ms: all 500ms ease-in-out;
}

/* ///////////////////////////////////////////////////////// Header ///////////////////////////////////////////////////////// */
.header-slider-content {
    position: relative;
}

.header {
    width: 100%;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
}

.header .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.table-bordered>:not(caption)>*>* {
    border: 1px solid gray;
}
.table-bordered>:not(caption)>* {
    border-width: var(--bs-border-width) 0;
    border: 1px solid gray;
}

.header .content .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 80px;
}

.header .content .left .top {
    display: flex;
    justify-content: end;
    align-items: center;
}

.header .content .left .top .box {
    margin-inline: 5px;
}

.header .content .left .top .box a {
    font-size: 18px;
    color: black;
    transition: var(--transition-250ms);
    font-weight: 600;
}

.header .content .left .top .box a:hover {
    color: var(--green);
    transition: var(--transition-250ms)
}

.header .content .left .bottom>ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header .content .left .bottom>ul>li {
    margin-inline-start: 30px;

}

.header .content .left .bottom>ul>li>a {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}

.header .content .left .bottom>ul>li>a:hover {
    color: var(--green);
    transition: var(--transition-250ms)
}

.header .content .left .bottom>ul>li .buttons__burger {
    --size: 32px;
    width: var(--size);
    height: 24px;
    cursor: pointer;
    position: relative;
    display: block;
}

.header .content .left .bottom>ul>li .buttons__burger #burger {
    display: none;
    width: 100%;
    height: 100%;
}

.header .content .left .bottom>ul>li .buttons__burger span {
    display: block;
    position: absolute;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #fff;
    background-color: #fff;
    transition: 0.15s ease-in-out;
}

.header .content .left .bottom>ul>li .buttons__burger span:nth-of-type(1) {
    top: 0;
    right: 0;
    transform-origin: right center;
}

.header .content .left .bottom>ul>li .buttons__burger span:nth-of-type(2) {
    top: 50%;
    transform: translateY(-50%);
}

.header .content .left .bottom>ul>li .buttons__burger span:nth-of-type(3) {
    top: 100%;
    right: 0;
    transform-origin: right center;
    transform: translateY(-100%);
}

.header .content .left .bottom>ul>li .buttons__burger #burger:checked~span:nth-of-type(1) {
    transform: translateY(-30%) rotate(40deg);
    width: 50%;
    top: 50%;
}

.header .content .left .bottom>ul>li .buttons__burger #burger:checked~span:nth-of-type(3) {
    transform: translateY(-70%) rotate(-40deg);
    width: 50%;
    top: 50%;
}

.header .content .left .bottom>ul>li .drop_down {
    visibility: hidden;
    position: absolute;
    opacity: 0;
    top: -100%;
    left: 0;
    width: 100%;
    height: fit-content;
    overflow: hidden;
    background-color: #8eb30ae9;
    transition: var(--transition-250ms);
    z-index: -100;
    padding: 2rem 0;
}

.header .content .left .bottom>ul>li .drop_down.active {
    visibility: visible;
    opacity: 1;
    top: 0;
    transition: var(--transition-250ms);
    overflow: visible;
    z-index: 10;
}

.header .content .left .bottom>ul>li .drop_down .overflow {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.226);
    height: 50%;
    width: 100%;
}

.header .content .left .bottom>ul>li .drop_down #close_btn {
    display: block;
    float: right;
}

.header .content .left .bottom>ul>li .drop_down .drop_down_content {
    margin-top: 2rem;
    width: 100%;
    display: flex;
    align-items: start;
    height: 370px;
}

.header .content .left .bottom>ul>li .drop_down .drop_down_content .drop_down_menu_list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
    width: 100%;
}

.header .content .left .bottom>ul>li .drop_down .drop_down_content .drop_down_menu_list ul {
    width: 80%;
    margin-bottom: 15px;
}

.header .content .left .bottom>ul>li .drop_down .drop_down_content .drop_down_menu_list ul>li:nth-child(1) {
    width: 100%;
    border-bottom: 1px solid rgb(80, 80, 80);
    margin-bottom: 1rem;
    transition: var(--transition-250ms)
}

.header .content .left .bottom>ul>li .drop_down .drop_down_content .drop_down_menu_list ul>li:nth-child(1) a {
    display: inline-block;
    color: rgb(80, 80, 80);
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
    border: none !important;
    width: 100%;
    transition: var(--transition-250ms)
}

.header .content .left .bottom>ul>li .drop_down .drop_down_content .drop_down_menu_list ul>li:nth-child(1):hover a {
    color: white;
    border: none !important;
    transition: var(--transition-250ms)
}

.header .content .left .bottom>ul>li .drop_down .drop_down_content .drop_down_menu_list ul>li:nth-child(1):hover {
    border-color: white;
    transition: var(--transition-250ms)
}

.header .content .left .bottom>ul>li .drop_down .drop_down_content .drop_down_menu_list ul>li {
    margin: 10px 0;

}

.header .content .left .bottom>ul>li .drop_down .drop_down_content .drop_down_menu_list ul>li a {
    color: white;
    font-size: 14px;
    border-bottom: 1px solid transparent;
}

.header .content .left .bottom>ul>li .drop_down .drop_down_content .drop_down_menu_list ul>li:hover a {
    border-color: white;
}

.header .content .left .bottom>ul>li .drop_down .drop_down_content .img_content {
    display: inline-block;
    width: fit-content;
    height: fit-content;
    border-radius: 10px;
    overflow: hidden;
}

.header .content .left .bottom>ul>li .drop_down .drop_down_content .img_content:hover img {
    transform: scale(1.1);
    transition: var(--transition-250ms);
}

.header .content .left .bottom>ul>li .drop_down .drop_down_content .img_content img {
    width: 100%;
    height: auto;
    transition: var(--transition-250ms);
}

/* ///////////////////////////////////////////////////////// Slider ///////////////////////////////////////////////////////// */

.home_slider .swiper {
    width: 100%;
    height: 100%;
}

.home_slider .swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px;
    overflow: hidden;
    position: relative;
}

.home_slider .swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.home_slider .swiper .swiper-slide .text_content {
    position: absolute;
    bottom: 0%;
    left: 0%;
    z-index: 9;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7231267507002801) 16%, rgba(255, 255, 255, 0) 100%);
    padding: 5rem 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    text-align: left;
    z-index: 0;
    color: white;
}

.home_slider .swiper .swiper-slide .text_content .title {
    font-size: 54px;
    font-weight: 600;
    margin-bottom: 1rem;
}

.home_slider .swiper .swiper-slide .text_content .text {
    font-size: 27px;
    line-height: 42px;
    width: 70%;
}

.home_slider .swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: white;
    margin: 0 5px !important;
}

/* ///////////////////////////////////////////////////////// Process About ///////////////////////////////////////////////////////// */


.meta_title {
    font-size: 32px;
    margin: 5rem auto;
    color: var(--gray);
    line-height: 35px;
}

.process_about .card {
    border: none;
    padding: 0;
}

.process_about .card .row {
    display: flex;
    justify-content: center;
    align-items: center;
}


.process_about .card h6 {
    color: var(--green);
    font-weight: 700;
    font-size: 26px;
}

.process_about .card p {
    font-size: 18px;
    font-weight: 500;
    color: var(--gray);
    line-height: 33px;
    margin: 1rem 0;
}

.process_about .card .cta {
    position: relative;
    margin: auto;
    padding: 12px;
    transition: all 0.2s ease;
    border: none;
    background: none;
    cursor: pointer;
}

.process_about .card .cta:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 50px;
    background: #8eb30a6b;
    width: 45px;
    height: 45px;
    transition: all 0.3s ease;
}

.process_about .card .cta span {
    position: relative;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--gray);
    transition: all 0.3s ease;
}

.process_about .card .cta svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--gray);
    stroke-width: 2;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}

.process_about .card .cta:hover span {
    transition: all 0.3s ease;
    color: white;
}

.process_about .card .cta:hover:before {
    width: 100%;
    background: var(--green);
}

.process_about .card .cta:hover svg {
    transform: translateX(0);
    stroke: white;
}

.process_about .card .cta:active {
    transform: scale(0.95);
}

.process_about .card .img_content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.process_about .card .img_content .box {
    width: 50%;
    padding: 1px;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
}

.process_about .card .img_content .box img {
    transform: scale(1);
    transition: var(--transition-250ms);
    border-radius: 10px;
}

.process_about .card .img_content .box:hover img {
    transform: scale(1.5);
    transition: var(--transition-250ms);
}


/* ///////////////////////////////////////////////////////// What we do ///////////////////////////////////////////////////////// */

.what_we_do {
    margin: 10rem 0;
}

.what_we_do h6 {
    color: var(--green);
    font-weight: 700;
    font-size: 26px;
}

.what_we_do .text {
    font-size: 18px;
    font-weight: 500;
    color: var(--gray);
    line-height: 29px;
    margin: 1rem 0;
    width: 50%;
}


.what_we_do .card {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    background: #f5f5f5;
    position: relative;
    padding: 5px;
    border: 2px solid #c3c6ce;
    transition: 0.5s ease-out;
    overflow: hidden;
}

.what_we_do .card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.what_we_do .card .card-details {
    color: black;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
    padding: 3rem 0;
}

.what_we_do .card .card-button {
    transform: translate(-50%, 125%);
    width: 60%;
    border-radius: 1rem;
    border: none;
    background-color: var(--green);
    color: #fff;
    font-size: 1rem;
    padding: .5rem 1rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    opacity: 0;
    transition: 0.3s ease-out;
    z-index: 10;
}


.what_we_do .card .text-title {
    font-size: 32px;
    font-weight: bold;
    z-index: 10;
    text-align: center;
    color: white;
}

.what_we_do .card:hover {
    border-color: var(--green);
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
}

.what_we_do .card:hover .card-button {
    transform: translate(-50%, -20%);
    opacity: 1;
}


/* ///////////////////////////////////////////////////////// Content Card ///////////////////////////////////////////////////////// */
.mt-30{
margin-top:50px !important;
}
.content_card {
    margin:1rem 0;
}

.content_card .title {
    font-size: 32px;
    margin: 5rem 0;
    color: var(--gray);
    line-height: 35px;
}

.content_card .card {
    border: none;
    padding: 0;
}

.content_card .card .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.content_card .card h6 {
    color: var(--green);
    font-weight: 700;
    font-size: 20px;
}

.content_card .card p {
    font-size: 16px;
    font-weight: 500;
    color: var(--gray);
    line-height: 31px;
    margin: 1rem 0;
}

.content_card .card ul {
    margin: 2rem 0;
}

.content_card .card ul li {
    font-size: 16px;
    font-weight: 500;
    color: var(--gray);
    margin: 2rem 0;
    list-style: disc;
    margin-left: 2rem;
}

.content_card .card ul li::marker {
    color: var(--green);
}

.content_card .card .cta {
    position: relative;
    margin: auto;
    padding: 12px;
    transition: all 0.2s ease;
    border: none;
    background: none;
    cursor: pointer;
}

.content_card .card .cta:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 50px;
    background: #8eb30a6b;
    width: 45px;
    height: 45px;
    transition: all 0.3s ease;
}

.content_card .card .cta span {
    position: relative;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--gray);
    transition: all 0.3s ease;
}

.content_card .card .cta svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--gray);
    stroke-width: 2;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}

.content_card .card .cta:hover span {
    transition: all 0.3s ease;
    color: white;
}

.content_card .card .cta:hover:before {
    width: 100%;
    background: var(--green);
}

.content_card .card .cta:hover svg {
    transform: translateX(0);
    stroke: white;
}

.content_card .card .cta:active {
    transform: scale(0.95);
}

.content_card .card .img_content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.content_card .card .img_content .box {
    width: 100%;
    padding: 1px;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
}

.content_card .card .img_content .box img {
    /* transform: scale(1); */
    transition: var(--transition-250ms);
    border-radius: 10px;
}

/* .content_card .card .img_content .box:hover img {
    transform: scale(1.5);
    transition: var(--transition-250ms);
} */

/* ///////////////////////////////////////////////////////// Quice Card ///////////////////////////////////////////////////////// */


.quice_form_content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 2rem 0;
    overflow: hidden;
}

.bg_img {
    width: 100%;
    height: auto;
}

/* .quice_form_content::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url("../images/pexels-pixabay-263402.jpg");
    filter: blur(10px);
    -webkit-filter: blur(10px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.5;
} */

.quice_form_content .bg_img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.quice_form_content h6 {
    color: var(--green);
    font-weight: 700;
    font-size: 26px;
}

.quice_form_content p {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    line-height: 26px;
    margin: 1rem 0;
}

.quice_form_content .quice_form #policy {
    font-size: 12px;
    color: var(--gray);
}

.quice_form_content .quice_form #policy a {
    color: var(--green);
    text-decoration: underline;
}

.quice_form_content .quice_form {
    position: relative;
    z-index: 2;
    width: 600px;
    height: 500px;
    border-radius: 10px;
    overflow: hidden;
}

.quice_form_content .quice_form::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color:rgb(255 255 255 / 0%);
    backdrop-filter: blur(10px);
    width: 100%;
    height: 100%;
}

.quice_form_content .quice_form .content {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    z-index: 10;
}

.quice_form_content .quice_form .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.quice_form_content .quice_form .form-control {
    position: relative;
    width: 49%;
    padding: 0;
    border: none;
    box-shadow: none;
    margin: 1rem 0;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffffa3;
}

.quice_form_content .quice_form .input {
    color: #000;
    font-size: 0.9rem;
    background-color: transparent;
    width: 100%;
    box-sizing: border-box;
    padding-inline: 0.5em;
    padding-block: 0.7em;
    border: none;
    border-bottom: var(--border-height) solid var(--border-before-color);
}

.quice_form_content .quice_form .input-border {
    position: absolute;
    background: var(--border-after-color);
    width: 0%;
    height: 2px;
    bottom: 0;
    left: 0;
    transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.quice_form_content .quice_form .input:focus {
    outline: none;
}

.quice_form_content .quice_form .input:focus+.input-border {
    width: 100%;
}

.quice_form_content .quice_form .input:focus {
    background: white;
}

.quice_form_content .quice_form .input-alt {
    font-size: 1.2rem;
    padding-inline: 1em;
    padding-block: 0.8em;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.quice_form_content .quice_form .input-border-alt {
    height: 3px;
    background: linear-gradient(90deg, #FF6464 0%, #FFBF59 50%, #47C9FF 100%);
    transition: width 0.4s cubic-bezier(0.42, 0, 0.58, 1.00);
}

.quice_form_content .quice_form .input-alt:focus+.input-border-alt {
    width: 100%;
}


.quice_form_content .quice_form .send_btn {
    display: inline-block;
    border-radius: 4px;
    background-color: var(--green);
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 17px;
    padding: 16px;
    /* width: 130px; */
    transition: all 0.5s;
    cursor: pointer;
    margin: 15px 0;
}

.quice_form_content .quice_form .send_btn span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.quice_form_content .quice_form .send_btn span:after {
    content: '»';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -15px;
    transition: 0.5s;
}

.quice_form_content .quice_form .send_btn:hover span {
    padding-right: 15px;
}

.quice_form_content .quice_form .send_btn:hover span:after {
    opacity: 1;
    right: 0;
}

/* ///////////////////////////////////////////////////////// Footer ///////////////////////////////////////////////////////// */
.footer {
    background: #27231e;
    padding-top: 3rem;
}

.footer .container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}



.footer .container ul li:nth-child(1) {
    font-weight: 700;
    font-size: 18px;
    color: var(--green);
}

.footer .container ul li {
    margin: 10px 0;
}

.footer .container ul li a {
    color: white;
    font-size: 14px;
}

.footer .container ul li a:hover {
    color: var(--green);
    text-decoration: underline;
}

.footer .container ul li a svg {
    transition: var(--transition-250ms);
}

.footer .container ul li a svg:hover {
    fill: white;
    transition: var(--transition-250ms);
}

.footer .bottom {
    border-top: 1px solid var(--gray);
    margin-top: 3rem;
}

.footer .bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    width: 100%;
    padding: 15px 0;
    color: var(--gray);
}

.footer .bottom .container span a {
    color: var(--gray);
    text-decoration: underline;
}

/* ///////////////////////////////////////////////////////// Banner ///////////////////////////////////////////////////////// */

.banner {
    width: 100%;
    height: 280px;
    overflow: hidden;
}



/* ///////////////////////////////////////////////////////// Accordion Content ///////////////////////////////////////////////////////// */

.accordion_content {
    margin: 0rem 0;
    position: relative;
    width: 100%;
    height: 100%;
}

.accordion_content .content {
    padding: 5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.accordion_content .content h6 {
    color: white;
    font-size: 28px;
    margin-bottom: 1rem;
    font-weight: 600;
    line-height: 32px;
}

.accordion_content .bg_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.accordion_content .content .accordion-item,
.accordion_content .content .accordion-button {
    background-color: transparent;
    color: white;
    border: none;
    border-radius: 0px !important;
}

.accordion_content .content .accordion-item {
    border-bottom: 1px solid white;
}

.accordion_content .content .accordion-item:last-of-type>.accordion-collapse,
.accordion_content .content .accordion-item:first-of-type>.accordion-header .accordion-button {
    border-radius: 0px !important;
}

.accordion_content .content .accordion-button:focus {
    box-shadow: none;
}

.accordion_content .content .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: white;
}

.accordion_content .content .accordion-body {
    background-color: rgba(255, 255, 255, 0.374);
    color: black;
    line-height: 30px;
    font-size: 18px;
}

.accordion_content .content .accordion-button::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

.accordion_content .content .img_content .box {
    border-radius: 10px;
    overflow: hidden;
}

.accordion_content .bottom {
    background-color: rgba(0, 0, 0, 0.453);
    color: white;
    padding: 2rem 0;
    font-size: 18px;
    line-height: 29px;
}

.accordion_content .bottom span a {
    color: var(--green);
    text-decoration: underline;
}











/* ///////////////////////////////////////////////////////// Process List ///////////////////////////////////////////////////////// */
.process_list {
    padding: 2rem 0;
    border-top: 5px solid rgba(128, 128, 128, 0.096);
    border-bottom: 5px solid rgba(128, 128, 128, 0.096);
}

.process_list h6 {
    color: var(--green);
    font-weight: 700;
    font-size: 26px;
    margin-bottom: 2rem;
}






.contant {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
}

.contant .info {
    background-color: rgba(0, 0, 0, 0.378);
    display: flex;
    align-items: center;
    color: white;
    padding: 10px;
    font-size: 16px;
    border-radius: 10px;
    width: 100%;
    transition: var(--transition-250ms);
}

.contant .info:hover {
    background-color: var(--green);
    transition: var(--transition-250ms);
    cursor: pointer;
}

.contant .info svg {
    margin-right: 5px;
    width: 38px;
    height: 38px;
}

.info__title {
    display: flex;
    flex-direction: column;
}

.info__title span {
    margin: 2px 0;
}

.info__title span:nth-child(1) {
    font-weight: bold;
}


/* ///////////////////////////////////////////////////////// Why Choose Us ///////////////////////////////////////////////////////// */


.why_choose_us_content {
    margin: 5rem 0 3rem 0;
    position: relative;
    width: 100%;
    height: 100%;
}

.why_choose_us_content .content {
    padding: 5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.why_choose_us_content .content h2 {
    display: inline-block;
    width: 100%;
    color: var(--green);
    font-size: 32px;
    margin-bottom: 2rem;
    font-weight: 600;
    line-height: 32px;
}

.why_choose_us_content .bg_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.why_choose_us_content .content h6 {
    display: inline-block;
    width: 100%;
    color: var(--green);
    font-size: 26px;
    margin-bottom: 10px;
    font-weight: 600;
    line-height: 32px;
}

.why_choose_us_content .content p {
    color: white;
    font-size: 18px;
    line-height: 29px;
}

.why_choose_us_content .content .box {
    margin-bottom: 2rem;
}


/* ///////////////////////////////////////////////////////// User About Card ///////////////////////////////////////////////////////// */


.user_about_card {
    margin: 5rem 0;
}

.user_about_card .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.user_about_card .content h4 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 5px;
}
.user_about_card .content img{
    border-radius: 10px;
}
.user_about_card .content h5 {
    font-size: 21px;
    margin: 10px 0;
    font-weight: 500;
}

.user_about_card .content p {
    line-height: 25px;
    font-size: 18px;
}












/* ///////////////////////////////////////////////////////// Quice Help Card ///////////////////////////////////////////////////////// */

.quice_help_card {
    background: #f3f7e5;
    padding: 2rem 0;
}

.quice_help_card .content {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.quice_help_card .content h6 {
    display: inline-block;
    width: 100%;
    color: var(--green);
    font-size: 32px;
    font-weight: 600;
    line-height: 32px;
}

.quice_help_card .content p {
    font-size: 18px;
    line-height: 29px;
    margin: 1rem 0;
}

.quice_help_card .box:nth-child(1) {
    border-right: 1px solid gray;
}

.quice_help_card .cssbuttons-io-button {
    background: transparent;
    color: var(--green);
    font-family: inherit;
    /* padding: 0.35em; */
    /* padding-left: 1.2em; */
    font-size: 17px;
    font-weight: 500;
    border-radius: 0.9em;
    border: none;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    height: 2.8em;
    padding-right: 3.3em;
    cursor: pointer;
}

.quice_help_card .cssbuttons-io-button .icon {
    background: var(--green);
    margin-left: 1em;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.2em;
    width: 2.2em;
    border-radius: 0.7em;
    right: 0.3em;
    transition: all 0.3s;
}

.quice_help_card .cssbuttons-io-button:hover .icon {
    width: 100%;
}

.quice_help_card .cssbuttons-io-button .icon svg {
    width: 1.1em;
    transition: transform 0.3s;
    color: white;
}

.quice_help_card .cssbuttons-io-button:hover .icon svg {
    transform: translateX(0.1em);
}

.quice_help_card .cssbuttons-io-button:active .icon {
    transform: scale(0.95);
}


/* ///////////////////////////////////////////////////////// Contact Form ///////////////////////////////////////////////////////// */

.contact_form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 5rem 0;

}

.contact_form .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.contact_form .box h4 {
    color: var(--green);
    font-weight: 700;
    font-size: 26px;
    width: 100%;
}

.contact_form .box h5 {
    font-size: 16px;
    font-weight: 500;
    color: var(--gray);
    line-height: 26px;
    margin: 1rem 0;
    width: 100%;
}

.contact_form .box h6 {
    color: var(--green);
    font-weight: 700;
    font-size: 22px;
    width: 100%;
    margin: 10px 0;
}

.contact_form .box .coolinput {
    display: flex;
    flex-direction: column;
    position: static;
    width: 100%;
    /* padding: 0px 10px; */
    margin: 5px 0;
    padding-inline: 5px;
}

.contact_form .box .coolinput label.text {
    font-size: 0.75rem;
    color: var(--green);
    font-weight: 500;
    position: relative;
    top: 0.5rem;
    margin: 0 0 0 7px;
    padding: 0 3px;
    background: #fff;
    width: fit-content;
}

.contact_form .box .coolinput .input {
    padding: 15px 10px;
    font-size: 0.75rem;
    border: 1px var(--green) solid;
    border-radius: 5px;
    background: #fff;
    transition: var(--transition-250ms);
}

.contact_form .box .coolinput .input:focus {
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    transition: var(--transition-250ms);
}

.contact_form .box #policy {
    display: inline-block;
    font-size: 12px;
    color: var(--gray);
    /* padding: 0px 10px; */
    margin: 10px 0;
    line-height: 19px;
}

.contact_form .box #policy a {
    color: var(--green);
    text-decoration: underline;
}


.contact_form .box .button2 {
    margin-top: 1rem;
    display: inline-block;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color: #fff;
    padding: 0.7em 1.7em;
    cursor: pointer;
    font-size: 18px;
    border-radius: 5px;
    background: var(--green);
    border: 1px solid var(--green);
}

.contact_form .box .button2:active {
    color: #fff;
    box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
}

.contact_form .box .button2:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}

.contact_form .box .button2:after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: #fff;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}

.contact_form .box .button2:hover {
    color: var(--green);
}

.contact_form .box .button2:hover:before {
    top: -35%;
    background-color: #fff;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.contact_form .box .button2:hover:after {
    top: -45%;
    background-color: #fff;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.contact_form .box ul li {
    font-size: 16px;
    font-weight: 500;
    color: var(--gray);
    margin: 15px 0;
    list-style: disc;
    margin-left: 2rem;
}

.contact_form .box ul li::marker {
    color: var(--green);
}

.contact_form .box .cta {
    position: relative;
    margin: auto;
    padding: 12px;
    transition: all 0.2s ease;
    border: none;
    background: none;
    cursor: pointer;
}

.contact_form .box .contact_img {
    margin-bottom: 1rem;
    border-radius: 10px;
}

.contact_form .box ul li:hover a {
    color: var(--green);
}


/* ///////////////////////////////////////////////////////// Mobil Menu ///////////////////////////////////////////////////////// */

.mobil-menu {
    position: absolute;
    background: var(--menu-background);
    width: 20%;
    color: var(--menu-text-color);
    overflow-y: auto;
    position: fixed;
    top: 0;
    z-index: 2;
    transition: 250ms ease-in-out;
    left: -100%;
    padding: 20px;
}

.mobil-menu .top-submenu .submenu-content li,
.mobil-menu ul li {
    margin: 20px 0;
    font-size: 18px;
}



.mobil-menu a {
    color: var(--menu-text-color);
    width: 100%;
    display: inline-block;
}

.mobil-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #00000030;
    transition: 300ms ease-in-out;
    width: 100%;
    height: 100%;
    left: -100%;
}

.mobil-menu-overlay.active,
.mobil-menu.active {
    left: 0;
    z-index: 20;
}

.mobil-menu .top-submenu .submenu {
    position: relative;
}

.mobil-menu .top-submenu .submenu::before {
    content: "";
    position: absolute;
    right: 0;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='64px' height='64px' viewBox='0 0 1024 1024' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000' stroke='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M256 120.768L306.432 64 768 512l-461.568 448L256 903.232 659.072 512z' fill='%23E7F6F2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: 300ms ease-in-out;
}

.mobil-menu .top-submenu .submenu-content label:hover,
.mobil-menu .top-submenu .submenu:hover {
    color: var(--hover-text-color);
    transition: 300ms ease-in-out;
}

.mobil-menu .top-submenu .submenu-content label:hover::before,
.mobil-menu .top-submenu .submenu:hover::before {
    transform: rotate(180deg);
    transition: 300ms ease-in-out;
}



.mobil-menu .top-submenu .submenu-content {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--menu-background);
    transition: 300ms ease-in-out;
    padding: 20px;
    z-index: 99;
}

.mobil-menu .top-submenu .submenu-content.active {
    left: 0%;

}


.mobil-menu .top-submenu .submenu-content label {
    width: 100%;
    display: inline-block;
    border-bottom: 1px solid white;
    padding: 10px;
    text-align: center;
    position: relative;
}

.mobil-menu .top-submenu .submenu-content label::before {
    content: "";
    position: absolute;
    left: 0;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='64px' height='64px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L9.41421 12L15.7071 18.2929C16.0976 18.6834 16.0976 19.3166 15.7071 19.7071C15.3166 20.0976 14.6834 20.0976 14.2929 19.7071L7.29289 12.7071C7.10536 12.5196 7 12.2652 7 12C7 11.7348 7.10536 11.4804 7.29289 11.2929L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289Z' fill='%23E7F6F2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: 300ms ease-in-out;
}

.btn-open {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
}

.btn-open .line {
    fill: none;
    stroke: var(--green);
    stroke-width: 7;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-open .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

.btn-open .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
}

.btn-open .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
}

.btn-open.opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

.btn-open.opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
}

.btn-open.opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
}

@media screen and (max-width:1199px) {
    .mobil-menu {
        width: 70%;
    }
}

.m_menu {
    display: none;
    width: 100%;
    height: fit-content;
    padding: 0px 5px;
    position: absolute;
    z-index: 11;
    top: 0;
    left: 0;
}

.m_menu .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* ///////////////////////////////////////////////////////// Blog Card ///////////////////////////////////////////////////////// */
.blog {
    margin: 5rem 0;
}

.blog .card {
    width: 100%;
    background: white;
    padding: 10px;
    border-radius: 6px;
    border: none;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: var(--transition-250ms);
}

.blog .card:hover {
    background: rgba(128, 128, 128, 0.189);
    transition: var(--transition-250ms);
}

.blog .card .card-image {
    background-color: rgb(236, 236, 236);
    width: 100%;
    height: 184px;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.blog .card-image img {
    width: 100%;
    height: auto;
}


.blog .category {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    color: var(--green);
    margin: 14px 0;
}

.blog .category:hover {
    cursor: pointer;
}

.blog .heading {
    padding: 0 10px;
}

.blog .heading p {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: rgb(88, 87, 87);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blog .heading:hover {
    cursor: pointer;
}

.blog .author {
    color: gray;
    font-weight: 400;
    font-size: 11px;
    padding-top: 20px;
}

.right_colum {
    background: rgb(200 200 200 / 10%);
    border-radius: 10px;
    padding: 10px;
}

.right_colum h4 {
    width: 100%;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 1rem;
    background: rgba(128, 128, 128, 0.41);
    padding: 10px;
    color: white;
    border-radius: 10px;
}

.quice_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 10px;
    border: 1px solid white;
    background: white;
    border-radius: 10px;
    transition: var(--transition-250ms);
    margin-bottom: 1rem;
}

.quice_card .card-image {
    width: 49%;
    height: fit-content;
}

.quice_card p {
    width: 49%;
    font-size: 14px;
    color: gray;
    margin: 10px 0;
}

.blog .quice_card:hover {
    border-color: var(--green);
    transition: var(--transition-250ms);
}

.blog_details_card h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--green);
}

.blog_details_card h5 {
    font-size: 14px;
    color: gray;
}

.blog_details_card .card-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin: 1rem 0;
}

.blog_details_card p{
    font-size: 18px;
    line-height: 33px;
}



b{
	font-weight:700;
}














.mt-130 {
    margin-top: 130px !important;
}

.services {
    margin-top: 0;
}

.blog-card-blog {
    margin-top: 30px;
}
.blog-card {
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
	
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.87);
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.blog-card .blog-card-image {
    height: 60%;
    position: relative;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -30px;
    border-radius: 6px;
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}





.blog-table {
    margin-bottom: 0px;
}
.blog-category {
    position: relative;
    line-height: 0;
    margin: 15px 0;
}
.blog-text-success {
    color: #28a745!important;
}
.blog-card-blog h4.blog-card-caption a {
    margin-top: 5px;
	color: #3C4857;
	font-size:17px;
	line-height:3rem;
}
.blog-card-caption {
    font-weight: 700;
    text-align: center;
    line-height: 0rem;
   
}

.blog-card-caption, .blog-card-caption a {
    color: #333;
    text-decoration: none;
}
 
.blog-card .ftr {
    margin-top: 15px;
}
.blog-card .ftr .author {
    color: #888;
}

.blog-card .ftr div {
    display: inline-block;
}
.blog-card .author .avatar {
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;
}
.blog-card .ftr .stats {
    position: relative;
    top: 1px;
    font-size: 14px;
}
.blog-card .ftr .stats {
    float: right;
    line-height: 30px;
}


.blog-card .blog-card-image img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.blog-card .blog-table {
    padding: 35px 5px;
}