/* Poppins : 300,400,800 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;800&display=swap');
/* site */
* {padding: 0;margin: 0;list-style: none;text-decoration: none;outline: none;box-sizing: border-box;}
::-webkit-scrollbar {width: 7px;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px var(--primary-color);}
::-webkit-scrollbar-thumb {background: var(--primary-color);border-radius: 20px;}
body {font-family: 'Poppins', sans-serif;font-size: 17px;line-height: 25px;font-weight: 400;}
img {width: 100%;}
a {color: unset;}
.container {max-width: 1500px;margin: auto;}
button {font-size: 18px;color: #fff;background-color: var(--primary-color);border: 2px solid var(--primary-color);border-radius: 10px;padding: 12px 50px;font-family: 'Poppins';transition: all 0.3s ease-in-out;cursor: pointer;}
button:hover {background-color: white;color: var(--primary-color);}
.bg_primary {background-color: var(--primary-color);color: white;}
/* header */
.topbar {background-color: var(--primary-color);color: white;}
.topbar ul {display: flex;justify-content: space-between;padding: 8px 0;flex-wrap: wrap;}
.topbar ul li {display: flex;gap: 8px;justify-content: start;align-items: center;}
.topbar ul li i {font-size: 15px;}
.header .container {display: flex;gap: 2rem;justify-content: space-between;padding: 1rem 0;align-items: center;}
.header .container .logo {width: 15%;}
.header .container .logo a {display: flex;}
.h_right {display: flex;gap: 1rem;justify-content: center;align-items: center;flex-wrap: wrap;}
/* banner */
.banner {height: 80vh;color: white;background-repeat: no-repeat !important;background-position: center !important;background-size: cover !important;position: relative;padding: 2rem 0;}
.banner .container::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #000000a1;z-index: 1;}
.banner .container {display: flex;justify-content: center;align-items: center;height: 100%;}
.banner .container .b_wrap {display: flex;flex-direction: column;gap: 3rem;justify-content: center;align-items: center;height: 100%;z-index: 3;text-align: center;}
.b_wrap h1 {line-height: 70px;font-size: 70px;text-transform: uppercase;font-weight: 400;}
.b_wrap h2 {font-weight: 400;text-transform: uppercase;font-size: 22px;}
/* page overview */
.pg_overview {background-color: #f8f8f8;padding: 4rem 0;}
.pg_overview .container {display: flex;flex-direction: column;gap: 1rem;}
/*table content*/
.table_content {padding: 4rem 0;}
.table_content .container {display: flex;gap: 2rem;}
.table_content .container .table_action {width: 28%;}
.table_action .tbl_wrap {display: flex;flex-direction: column;padding: 2rem;background-color: black;color: white;border-radius: 20px;gap: 1rem;}
.table_action .tbl_wrap .tbl_top {display: flex;justify-content: space-between;border-bottom: 1px solid white;padding-bottom: 1rem;align-items: center;}
.table_action .tbl_wrap .tbl_top i {cursor: pointer;}
.table_action .tbl_wrap .tbl_bottom ol {display: flex;flex-direction: column;gap: 8px;margin-left: 12px;}
.table_action .tbl_wrap .tbl_bottom ol li {list-style: auto;cursor: pointer;padding-left: 4px;}
.table_action .tbl_wrap .tbl_bottom ol li:hover {text-decoration: underline;color: var(--primary-color);}
.table_action .tbl_bottom {display: none;}
.table_action.active .tbl_bottom {display: block;}
.table_content .container .pg_content {width: 72%;padding-left: 2rem;border-left: 2px solid var(--primary-color);display: flex;flex-direction: column;gap: 1rem;}
.pg_content .c_item {padding-top: 1rem;padding-bottom: 2rem;border-bottom: 2px solid var(--primary-color);display: flex;flex-direction: column;gap: 1rem;align-items: start;}
.pg_content .c_item:first-child {padding-top: 2px;}
.pg_content .c_item:last-child {border: 0;padding-bottom: 2px;}
.c_item h1, .c_item h2, .c_item h3 {font-size: 30px;line-height: 40px;color: var(--primary-color);}
.c_item h4, .c_item h5, .c_item h6 {font-size: 25px;line-height: 30px;color: var(--primary-color);}
.pg_content .c_item ol, .pg_content .c_item ul {display: flex;flex-direction: column;gap: 1rem;}
.faq {display: flex;flex-direction: column;width: 100%;}
.faq .faq_item {width: 100%;border-bottom: 1px solid white;}
.faq .faq_item .faq_content {display: none;padding: 1rem;border: 2px solid black;}
.faq .faq_item .faq_top {display: flex;justify-content: space-between;padding: 10px 1rem;background-color: black;color: white;cursor: pointer;}
.faq .faq_icon {display: flex;align-items: center;}
.faq .faq_item .faq_top .faq_icon .i_close {display: none;}
.faq .faq_item.active {border: 0;}
.faq_item.active .faq_content {display: block;}
.faq_item.active .i_close {display: block !important;}
.faq_item.active .i_open {display: none;}
/*cta*/
.cta {background-color: black;color: white;padding: 4rem 0;}
.cta .container {display: flex;gap: 2rem;align-items: center;}
.cta .container > div {width: 48%;}
.cta .cta_left {display: flex;flex-direction: column;gap: 1rem;}
.cta .cta_left .cta_top, .cta .cta_left > :first-child {color: var(--primary-color);font-weight: bold;font-size: 24px;}
.cta .cta_left h2 {font-size: 45px;font-weight: 400;line-height: 50px;text-transform: uppercase;}
.cta .cta_left hr {width: 30%;height: 6px;background-color: var(--primary-color);border: none;}
.cta .ff-el-input--label {display: none !important;}
button.ff-btn.ff-btn-submit {width: 100%;background-color: var(--primary-color) !important;}
input {font-family: 'Poppins' !important;font-size: 16px;background-color: unset;color: white !important;border: 2px solid white !important;padding: 6px 10px !important;}
textarea {font-family: 'Poppins' !important;font-size: 16px;background-color: unset;color: white !important;border: 2px solid white !important;padding: 10px !important;}
.cta input:focus, .cta input:active, .cta textarea:focus, .cta textarea:active {border: 2px solid var(--primary-color); !important;background-color: unset !important;}
/* testimonials */
.testimonials {padding: 4rem 0;}
.testimonials .container {display: flex;flex-direction: column;gap: 2rem;text-align: center;}
.testimonials .container h4, .testimonials .container .sec_title {font-size: 45px;font-weight: 400;line-height: 55px;max-width: 800px;margin: auto;display: flex;flex-direction: column;gap: 1rem;text-wrap: balance;}
.testimonials .sec_title p {font-size: 17px;line-height: 28px;}
.t_wrap {color: white;}
.t_wrap .t_item {display: flex;flex-direction: column;padding: 22px;background-color: var(--primary-color);color: white;gap: 7px;}
.t_wrap .t_item .t_content {font-style: italic;margin-bottom: 10px;}
.t_wrap .t_item .t_name {font-size: 19px;font-weight: bold;}
/* our areas */
.our_areas {padding: 4rem 0;}
.our_areas .container {text-align: center;display: flex;flex-direction: column;gap: 2rem;justify-content: center;align-items: center;}
.our_areas h4 {font-size: 35px;}
.our_areas .container ul {display: flex;flex-wrap: wrap;text-align: left;flex-wrap: wrap;width: 100%;}
.our_areas .container ul li {width: 33.33%;padding: 7px 0px 7px 16px;}
.our_areas .container ul li a {display: flex;justify-content: start;align-items: center;gap: 10px;font-size: 18px;}
.our_areas .container ul li a i {font-size: 16px;}
.owl-dots {display: flex;justify-content: center;gap: 8px;}
.owl-dots .owl-dot {background-color: black !important;width: 10px;height: 10px;}
.owl-dots .owl-dot.active {background-color: var(--primary-color) !important;}
/* footer */
.f_top {padding: 4rem 0;}
.f_top .container {display: flex;justify-content: space-between;flex-wrap: wrap;}
.f_top .container > div {width: 48%;}
.f_top .f_left {display: flex;flex-direction: column;gap: 1rem;}
.f_top .f_left .logo {width: 25%;}
.f_top .container .f_right {width: 35%;}
.f_top .f_right .social_wrap .s_item {display: flex;gap: 20px;align-items: center;margin-bottom: 2rem;}
.f_top .f_right .social_wrap .s_item i {font-size: 25px;color: var(--primary-color);}
.f_top .f_right .social_wrap .s_item .s_content {display: flex;flex-direction: column;gap: 6px;}
.f_top .f_right .social_wrap .s_item .s_content strong {font-size: 22px;}
.f_top .f_right .social_wrap .s_item .s_content p:last-child {color: var(--primary-color);font-size: 18px;}
.f_top .f_right .social_wrap .s_item .s_content .s_main {color: var(--primary-color);}
.f_copyright .container {display: flex;gap: 2rem;justify-content: space-between;padding: 1rem 0;flex-wrap: wrap;}
.f_copyright .container ul {display: flex;gap: 1rem;}
.f_bottom {background-color: black;padding: 18px 0;display: flex;justify-content: center;align-items: center;width: 100%;z-index: 9;}
.f_bottom .container {text-align: center;display: flex;gap: 1rem;justify-content: center;flex-wrap: wrap;}
.f_bottom.fixed {position: fixed;bottom: 0;}
/*other content*/
.con_header {text-align: center;padding: 6rem 1rem;}
.all_content {padding: 4rem 0;display: flex;flex-direction: column;gap: 1rem;}
.all_content a {color: var(--primary-color);font-weight: bold;}
@media ( max-width: 1700px ) {
    .container {max-width: 1200px;}
    .header .container .logo {width: 18%;}
    .b_wrap h1 {line-height: 60px;font-size: 60px;}
}
@media ( max-width: 1350px ) {
    .container {max-width: 1000px;}
    .topbar ul {justify-content: center;gap: 2px 16px;}
    .b_wrap h1 {line-height: 55px;font-size: 55px;}
}
@media ( max-width: 1100px ) {
    .container {max-width: 800px;}
    .topbar ul li {width: 48%;}
    .f_top .container .f_right {width: 48%;}
    .table_content .container {gap: 1rem;}
    .table_content .container .table_action {width: 40%;}
    .table_content .container .pg_content {padding-left: 1rem;gap: 1rem;}
    .pg_content .c_item {padding-top: 0;padding-bottom: 1rem;gap: 1rem;}
    .c_item h1, .c_item h2, .c_item h3 {font-size: 24px;line-height: 30px;}
    .c_item h4, .c_item h5, .c_item h6 {font-size: 22px;line-height: 30px;}
    .table_action .tbl_wrap h4 {font-size: 14px;}
    .table_action .tbl_wrap .tbl_bottom ol {gap: 3px;margin-left: 9px;}
    .table_action .tbl_wrap .tbl_bottom ol li {font-size: 14px;line-height: 20px;}
}
@media ( max-width: 900px ) {
    .container {max-width: 650px;}
    .header .container .logo {width: 25%;}
    button {padding: 8px;font-size: 16px;}
    .banner {height: unset;padding: 4rem 5px;}
    .f_copyright .container {gap: 1rem;padding: 1rem;}
    .cta .container {flex-wrap: wrap;}
    .cta .container > div {width: 100%;}
    .f_top .f_left .logo {width: 40%;}
}
@media ( max-width: 768px ) {
    .container {width: 100%;padding: 0 15px;}
    .header .container {padding: 1rem;}
    .topbar ul li {width: 100%;justify-content: center;}
    .b_wrap h1 {line-height: 45px;font-size: 32px;font-weight: bold;}
    .banner .container .b_wrap {gap: 2rem;}
    .our_areas .container ul li {width: 50%;}
    .testimonials .container h4, .testimonials .container .sec_title {font-size: 30px;line-height: 35px;}
    .f_top .container > div {width: 100%;}
    .f_top .container .f_right {width: 100%;}
    .f_top {padding: 2rem 0;}
    .f_top .container {gap: 2rem;}
    .table_content .container {gap: 2rem;flex-wrap: wrap;}
    .table_content .container .pg_content {padding: 0 !important;border: 0 !important;width: 100%;}
    .table_content .container .table_action {width: 100%;}
}
@media ( max-width: 500px ) {
    .container {width: 100%;padding: 0 15px;}
    .topbar ul li {width: 100%;justify-content: center;}
    .header .container .logo {width: 48%;}
    .our_areas .container ul li {width: 100%;}
    .h_right {gap: 5px;}
    .h_right button, .h_right a {width: 100%;}
}
@media ( max-width: 375px ) {
    .container {padding: 0 10px;}
    .b_wrap h1 {line-height: 38px;font-size: 28px;}
}