/*
Theme Name:     Avation
Theme URI:      
Author:         
Author URI:     
Description:    
Version:        1.0
License:        
License URI:    
*/


/*
	Navigation Files

	01. Reset
	02. Global Style

 */


/*
	Files

	01. Home Page Style
        section Home Page
            1.1. Header Style
            1.2. Banner Style
            1.3. Services Style
            1.4. Card Style
            1.5. Counter Style
            1.6. About us Style
            1.7. Artificial Intelligence Style
            1.8. Team Style
            1.9. Testimonial Style
            1.10. Project Style
            1.11. Pricing Plan Style
            1.12. FAQ Style
            1.13. Contact Style
            1.14. Insights Style
            1.15. Footer Style
    02. About Page Style
        section About Page
            2.1. Banner Style
            2.2. Why us Style
    03. Contact Page Style
        section Contact Page
        3.1. Address Style
    04. Projects Page Style
        section Projects Page
        4.1. Projects Style
    05. 404/Coming Soon Page Style
        section 404/Coming Soon Page
        5.1. 404/Coming Soon Style

 */


/* =============== 01. Reset Style ============== */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    background: #151515;
    font-family: "Poppins", sans-serif;
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

button:focus {
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

select::-ms-expand {
    display: none;
}

label {
    font-weight: normal;
}

iframe {
    width: 100%;
}


/* =====  End of 01. Reset  ====== */


/* ===== 02. Global Style ===== */

h1 {
    font-size: 60px;
    font-weight: 700;
    line-height: 70px;
}

h2 {
    font-size: 48px;
    font-weight: 600;
    line-height: 56px;
}

h3 {
    font-size: 26px;
    font-weight: 400;
    line-height: 32px;
}

h4 {
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
}

h5 {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}

h6 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

button {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    padding: 16px 38px 16px 38px;
}

a {
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    padding: 16px 38px 16px 38px;
    display: block;
    transition: 0.2s linear;
    text-decoration: none;
}


/* =====  End of 02. Global Style  ===== */


/* ======== 1.1. Header Style ======== */

.home {
    background: radial-gradient( 100% 100% at 0% 48.47%, #000000 0%, #2b2b2b 0.01%, #040404 100%);
    display: block;
}

nav {
    padding: 25px 0 !important;
    margin-bottom: 40px;
    z-index: 1;
}

.navbar .nav-item .dropdown-menu {
    display: none;
}

.navbar .nav-item .dropdown-menu li {
    margin: 10px 0;
}

.navbar .dropdown:hover .dropdown-menu {
    display: block;
    width: 220px;
    padding: 15px 0px 15px 0px;
    border-radius: 10px;
    background-color: #2e2d2d;
}

.navbar img {
    width: 100%;
}

.navbar-toggler {
    background-color: #3ac0b0;
    padding: 9px 20px;
    transition: 500ms;
}

.navbar-toggler:hover {
    background-color: #5ddbcdf3;
    transition: 500ms;
}

.navbar-toggler i {
    color: #ffffff;
}

.navbar-collapse div:last-child {
    width: fit-content;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #ffffff;
    border: 1px solid #ffffff;
    transition: 500ms;
}

.header_btn a {
    color: #ffffff;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: radial-gradient( 100% 100% at 0% 48.47%, #000000 0%, #2b2b2b 0.01%, #040404 100%);
    transition: 500ms;
    border: 1px solid #ffffff;
}

.header_btn a:hover {
    background: #00ffb2;
    color: #000000;
    transition: 500ms;
    border: 1px solid #00ffb2;
}

nav li a {
    color: #ffffff !important;
    transition: 500ms;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
}

nav li a.active {
    color: #0038ff !important;
    background-color: inherit !important;
}

nav li a:hover {
    color: #0038ff !important;
    transition: 500ms;
}

aside {
    background-color: inherit;
    background-color: #2e2d2d;
    z-index: 1;
}

.sidebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}

.sidebar img {
    width: 80%;
}

.sidebar button {
    width: 44px;
    height: 35px;
    background-color: #3ac0b0;
    border: none;
    border-radius: 5px;
    padding: 7px 12px 10px 12px;
    margin-bottom: -15px;
    color: white;
    transition: 500ms;
}

.sidebar button:hover {
    background-color: #5ddbcdf3;
    transition: 500ms;
}

aside .nav-link {
    padding-left: 0;
}

aside ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

aside ul li {
    margin: 5px 0;
}

aside li a {
    color: #ffffff !important;
    transition: 500ms;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
}

aside li a.active {
    color: #0038ff !important;
}

aside li a:hover {
    color: #0038ff !important;
    transition: 500ms;
}

.dropdown-item:active {
    background-color: white;
}

.collapse_btn {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.collapse_btn i {
    border: 1px solid #ffffff;
    padding: 7px 8px;
    border-radius: 40px;
}

.collapse_btn i:hover {
    border: 1px solid #3ac0b0;
}

.plus_collapse {
    margin: -40px -18px 0 0;
    height: 45px;
}

aside .pages {
    font-weight: 500;
    color: white;
    margin: 11px 0 7px 0;
}

.sidepanel {
    width: 0;
    position: fixed;
    height: 100vh;
    top: 0;
    left: 0;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 40px;
}


/* ======== End of 1.1. Header Style ======== */


/* ======== 1.2. Banner Style ======== */

.banner img[alt="web_title"] {
    width: 100%;
    margin: 0 0px 0px -28px;
    object-fit: cover;
}

.banner div:last-child {
    background-image: url("../Images/web_title_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-position-x: -32px;
    background-position-y: -39px;
}

.banner .col-lg-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.banner span {
    color: #00ffb2;
}

.banner h1 {
    color: #ffffff;
}

.banner p {
    color: #ffffff;
}

.banner .button {
    width: 50%;
}

.button p {
    margin: 0 0 0 23px;
    color: #00ffb2;
}

.banner img[alt="web_title_btn1"] {
    width: 42px;
    object-fit: cover;
}

.button i {
    color: #6663d4f5;
    font-size: 27px;
    margin-left: -28px;
    transition: 500ms;
}

.button:hover.button .fa-solid {
    margin-left: -10px;
    transition: 500ms;
    color: #54cd7c;
}


/* ======== End of 1.2. Banner Style ======== */


/* ======== 1.3. Services Style ======== */

.service {
    margin: 100px 0;
}

.service div:first-child {
    position: relative;
    display: flex;
    align-items: center;
}

.service div:first-child div {
    width: 100%;
    background-image: url("../Images/web_title_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    position: absolute;
    height: 160%;
    z-index: -1;
    top: -103px;
}

.service img[alt="service"] {
    width: 100%;
    object-fit: cover;
}

.service .col-lg-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service h3 {
    color: #ffffff;
}

.service .gap-4 hr {
    color: #ffffff;
    opacity: 1;
    height: 3px;
    width: 52px;
}

.service h2 {
    color: #ffffff;
    width: 390px;
    margin-bottom: 15px;
}

.service span {
    color: #00ffb2;
}

.service p {
    color: #ffffff;
}


/* ======== End of 1.3. Services Style ======== */


/* ======== 1.4. Card Style ======== */

.home_card {
    display: flex;
    gap: 30px;
    padding: 30px 0 0 0;
}

.home_card .card1 {
    display: flex !important;
    background: #1b1b1b;
    border: 1px solid #1b1b1b;
    align-items: center;
    padding: 32px 25px 32px 25px;
    gap: 25px;
    transition: 500ms;
    width: 50%;
}

.home_card .card1:hover {
    border: 1px solid #00ffb2;
    transition: 500ms;
    box-shadow: 0px 4px 15px 0px rgba(0, 255, 177.99999999999994, 0.35);
}

.card1 img[alt="card_image"] {
    width: 100%;
    object-fit: cover;
}

.card1 img[alt="card_inner_img"] {
    width: 70px;
    object-fit: cover;
}

.card1 div:last-child div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card1 div:last-child {
    width: 50%;
}

.card1 div:first-child {
    width: 50%;
}

.card1 h3 {
    color: #ffffff;
}

.card1 p {
    color: #ffffff;
    margin: 30px 0 63px 0;
}

.card1 a {
    background-color: inherit;
    border: none;
    padding: 0;
    color: #00ffb2;
    transition: 500ms;
}

.card1 a i {
    margin-left: 10px;
    font-size: 20px;
}

.card1 a:hover {
    color: #0038ff;
}


/* ======== End of 1.4. Card Style ======== */


/* ======== 1.5. Counter Style ======== */

.counter {
    margin: 100px 0 100px 0;
    position: relative;
}

.counter img[alt="counter_image"] {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.counter_bg {
    background: radial-gradient( 100% 100% at 0% 48.47%, rgba(0, 0, 0, 0.9) 0%, rgba(43, 43, 43, 0.9) 0.01%, rgba(4, 4, 4, 0.9) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    text-align: center;
    flex-wrap: wrap;
    padding: 0 20px;
}

.count_div {
    clip-path: polygon( 4% 36%, 0 36%, 0 0, 100% 0, 100% 36%, 98% 35%, 97% 55%, 100% 60%, 100% 100%, 0 100%, 0 65%, 4% 64%);
    padding: 10px 70px 13px 70px;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #ffffff;
    transition: 500ms;
}

.count_div:hover {
    border: 2px solid #00ffb2;
    transition: 500ms;
}

.count_div h2 {
    color: #00ffb2;
    margin: 0;
}

.count_div h5 {
    color: #ffffff;
}


/* ======== End of 1.5. Counter Style ======== */


/* ======== 1.6. About us Style ======== */

.about h3 {
    color: #ffffff;
    margin-bottom: 10px;
}

.about .gap-4 hr {
    color: #ffffff;
    opacity: 1;
    height: 3px;
    width: 52px;
}

.about h2 {
    color: #ffffff;
    margin: 16px 0 26px 0;
}

.about span {
    color: #00ffb2;
}

.about p {
    color: #ffffff;
}

.about_icon {
    display: flex;
    gap: 30px;
    margin: 33px 0;
}

.about_icon img {
    width: 75px;
    object-fit: cover;
}

.about .button {
    width: fit-content;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #ffffff;
    border: 1px solid #ffffff;
    transition: 500ms;
}

.about a {
    color: #ffffff;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #151515;
    transition: 500ms;
    border: 1px solid #ffffff;
}

.about a:hover {
    background: #00ffb2;
    color: #000000;
    transition: 500ms;
    border: 1px solid #00ffb2;
}

.about .bg {
    background-image: url("../Images/web_title_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-position-y: -42px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.about .bg div:first-child {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about .bg .ab_im2 {
    width: fit-content;
    clip-path: polygon( 16% 0%, 100% 0%, 100% 30%, 100% 85%, 60% 137%, 0% 100%, 0% 70%, 0% 19%);
    background: #00ffb2;
    border: 1px solid #00ffb2;
}

.about .bg .ab_im {
    clip-path: polygon( 16% 0%, 100% 0%, 100% 30%, 100% 85%, 60% 137%, 0% 100%, 0% 70%, 0% 19%);
    padding: 6px;
    background-color: #000000;
}

.about .bg img[alt="about_image1"] {
    clip-path: polygon( 16% 0%, 100% 0%, 100% 30%, 100% 85%, 60% 137%, 0% 100%, 0% 70%, 0% 19%);
    width: 100%;
    object-fit: cover;
}

.about .bg .ab_im3 {
    width: fit-content;
    clip-path: polygon( 10% 0%, 100% 0%, 100% 30%, 100% 90%, 70% 130%, 0% 100%, 0% 70%, 0% 10%);
    background: #00ffb2;
    border: 1px solid #00ffb2;
}

.about .bg .ab_im13 {
    clip-path: polygon( 10% 0%, 100% 0%, 100% 30%, 100% 90%, 70% 130%, 0% 100%, 0% 70%, 0% 10%);
    background-color: #000000;
    padding: 7px;
}

.about .bg img[alt="about_image2"] {
    clip-path: polygon( 10% 0%, 100% 0%, 100% 30%, 100% 90%, 70% 130%, 0% 100%, 0% 70%, 0% 10%);
    width: 100%;
    object-fit: cover;
}


/* ======== End of 1.6. About us Style ======== */


/* ======== 1.7. Artificial Intelligence Style ======== */

.artificial {
    margin: 100px 0;
    background: radial-gradient( 100% 100% at 0% 48.47%, rgba(0, 0, 0, 0.9) 0%, rgba(43, 43, 43, 0.9) 0.01%, rgba(4, 4, 4, 0.9) 100%);
}

.artificial img {
    width: 100%;
    object-fit: cover;
}

.artificial h2 {
    color: #ffffff;
}

.artificial span {
    color: #00ffb2;
}

.artificial .d-flex div {
    width: fit-content;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #ffffff;
    border: 1px solid #ffffff;
    transition: 500ms;
    margin-top: 30px;
}

.artificial a {
    color: #ffffff;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #151515;
    transition: 500ms;
    border: 1px solid #ffffff;
}

.artificial a:hover {
    background: #00ffb2;
    color: #000000;
    border: 1px solid #00ffb2;
    transition: 500ms;
}


/* ======== End of 1.7. Artificial Intelligence Style ======== */


/* ======== 1.8. Team Style ======== */

.team_h h3 {
    color: #ffffff;
}

.team_h .gap-4 hr {
    color: #ffffff;
    opacity: 1;
    height: 3px;
    width: 52px;
}

.team_h h2 {
    color: #ffffff;
    text-align: center;
    padding: 0 160px;
}

.team_h span {
    color: #00ffb2;
}

.team_card .card {
    background-color: inherit;
    border: 1px solid #151515;
    border-radius: 0;
    background-image: url("../Images/web_title_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    width: 100%;
    padding-top: 15px;
}

.team_card .card:hover {
    border: 1px solid #00ffb2;
    transition: 500ms;
    box-shadow: 0px 4px 15px 0px rgba(0, 255, 177.99999999999994, 0.35);
}

.team_card .flex-column {
    background: #1b1b1b;
    padding: 40px 20px;
}

.team_card h4 {
    color: #ffffff;
    margin-bottom: 0;
}

.team_card h5 {
    color: #ffffff;
    margin: 8px 0 16px 0;
}

.team_card a {
    padding: 0;
}

.team_card i {
    color: #00ffb2;
    font-size: 22px;
    transition: 500ms;
}

.team_card i:hover {
    color: #ffffff;
    transition: 500ms;
}

.team_card img {
    width: 90%;
    height: 100%;
    object-fit: cover;
}

.team_card {
    display: flex;
    gap: 20px;
    margin: 30px 0 100px 0;
}


/* ======== End of 1.8. Team Style ======== */


/* ======== 1.9. Testimonial Style ======== */

.testimonial_h h3 {
    color: #ffffff;
}

.testimonial_h p {
    color: #ffffff;
    text-align: center;
}

.testimonial_h .gap-4 hr {
    color: #ffffff;
    opacity: 1;
    height: 3px;
    width: 52px;
}

.testimonial_h h2 {
    color: #ffffff;
    text-align: center;
    padding: 0 160px;
}

.testimonial_h span {
    color: #00ffb2;
}

.testimon {
    margin: 42px 0 100px 0;
}

.border-test {
    width: fit-content;
    clip-path: polygon( 9% 0%, 100% 0%, 100% 30%, 100% 79%, 79% 137%, 0% 100%, 0% 70%, 0% 20%);
    background: #00ffb2;
    border: 1px solid #00ffb2;
    margin: 0 2px;
}

.testimonial {
    background: #000000;
    border: 1px solid transparent;
    padding: 70px 70px;
    clip-path: polygon( 9% 0%, 100% 0%, 100% 30%, 100% 79%, 79% 137%, 0% 100%, 0% 70%, 0% 20%);
}

.testimonial div {
    display: flex;
    justify-content: space-between;
}

.testimonial img {
    width: 100%;
}

.testimonial .clip_1 {
    width: fit-content;
    clip-path: polygon( 20% 0%, 100% 0%, 100% 33%, 100% 80%, 80% 104%, 0% 100%, 0% 70%, 0% 20%);
    background: #00ffb2;
    border: 1px solid #00ffb2;
}

.testimonial .clip {
    clip-path: polygon( 20% 0%, 100% 0%, 100% 33%, 100% 80%, 80% 104%, 0% 100%, 0% 70%, 0% 20%);
    background-color: #000000;
    padding: 6px;
}

.testimonial img[alt="testimonial1"] {
    clip-path: polygon( 20% 0%, 100% 0%, 100% 33%, 100% 80%, 80% 104%, 0% 100%, 0% 70%, 0% 20%);
}

.testimonial h5 {
    color: #ffffff;
    padding-top: 30px;
}

.slider {
    width: 100%;
}


/* ======== End of 1.9. Testimonial Style ======== */


/* ======== 1.10. Project Style ======== */

.project_bg {
    background: radial-gradient( 100% 100% at 0% 48.47%, rgba(0, 0, 0, 0.9) 0%, rgba(43, 43, 43, 0.9) 0.01%, rgba(4, 4, 4, 0.9) 100%);
}

.project_h h3 {
    color: #ffffff;
}

.project_h .gap-4 hr {
    color: #ffffff;
    opacity: 1;
    height: 3px;
    width: 52px;
}

.project_h h2 {
    color: #ffffff;
    text-align: center;
    padding: 0 160px;
}

.project_h span {
    color: #00ffb2;
}

.project {
    margin-top: 30px;
}

.project_bg {
    padding: 80px 0;
}

.project img {
    width: 100%;
}

.project figure {
    background-image: url("../Images/web_title_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-x: 15px;
}

.project_card {
    color: #ffffff;
    background: #1b1b1b;
    padding: 50px 25px;
    transition: 500ms;
    border: 1px solid #1b1b1b;
}

.project_card:hover {
    border: 1px solid #00ffb2;
    transition: 500ms;
    box-shadow: 0px 4px 15px 0px rgba(0, 255, 177.99999999999994, 0.35);
}

.project_card p {
    margin: 28px 0 42px 0;
}

.project_card a {
    background-color: inherit;
    color: #00ffb2;
    border: none;
    display: flex;
    gap: 20px;
    padding: 0;
}

.project_card a:hover {
    color: #0038ff;
}


/* ======== End of 1.10. Project Style ======== */


/* ======== 1.11. Pricing Plan Style ======== */

.pricing_plan {
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 0 100px;
}

.pricing_h h3 {
    color: #ffffff;
}

.pricing_h .gap-4 hr {
    color: #ffffff;
    opacity: 1;
    height: 3px;
    width: 52px;
}

.pricing_h h2 {
    color: #ffffff;
    text-align: center;
    padding: 0 160px;
}

.pricing_h span {
    color: #00ffb2;
}

.border-price {
    clip-path: polygon( 10% 0%, 100% 0%, 100% 30%, 100% 90%, 70% 130%, 0% 100%, 0% 70%, 0% 10%);
    background: #00ffb2;
    border: 1px solid #00ffb2;
    margin-top: 20px;
    width: 100%;
}

.pricing_card {
    background: #1b1b1b;
    color: #ffffff;
    transition: 500ms;
    padding: 50px 30px;
    clip-path: polygon( 10% 0%, 100% 0%, 100% 30%, 100% 90%, 70% 130%, 0% 100%, 0% 70%, 0% 10%);
    width: 100%;
}

.pricing_card .gap-3 {
    margin: 5px 0;
}

.pricing_card img {
    width: 100%;
}

.pricing_card figure {
    display: flex;
    justify-content: center;
}

.pricing_card h3 {
    margin: 10px 0;
}

.pricing_card h2 {
    margin: 25px 0;
    color: #00ffb2;
}

.pricing_card i {
    background-color: #00ffb2;
    color: #1b1b1b;
    display: flex;
    align-items: center;
    padding: 3px;
    border-radius: 50%;
    height: 22px;
    width: 22px;
}

.pricing_card div:last-child {
    width: fit-content;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #ffffff;
    border: 1px solid #ffffff;
    transition: 500ms;
}

.pricing_card a {
    color: #ffffff;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #1b1b1b;
    transition: 500ms;
    border: 1px solid #ffffff;
}

.pricing_card a:hover {
    background: #00ffb2;
    color: #000000;
    border: 1px solid #00ffb2;
    transition: 500ms;
}


/* ======== End of 1.11. Pricing Plan Style ======== */


/* ======== 1.12. FAQ Style ======== */

.faq {
    margin-bottom: 80px;
}

.faq .bg {
    background-image: url("../Images/web_title_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.faq .bg div {
    width: fit-content;
    clip-path: polygon(10% 0%, 100% 0%, 100% 30%, 100% 90%, 70% 130%, 0% 100%, 0% 70%, 0% 10%);
    background: #00ffb2;
    border: 1px solid #00ffb2;
}

.faq figure {
    background-color: #000000;
    clip-path: polygon( 10% 0%, 100% 0%, 100% 30%, 100% 90%, 70% 130%, 0% 100%, 0% 70%, 0% 10%);
    padding: 7px;
}

.faq img {
    width: 100%;
    clip-path: polygon( 10% 0%, 100% 0%, 100% 30%, 100% 90%, 70% 130%, 0% 100%, 0% 70%, 0% 10%);
    object-fit: cover;
}

.faq h3 {
    color: #ffffff;
}

.faq .gap-4 hr {
    color: #ffffff;
    opacity: 1;
    height: 3px;
    width: 52px;
}

.faq h2 {
    color: #ffffff;
    margin: 16px 0 26px 0;
}

.faq span {
    color: #00ffb2;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("../Images/menus.png");
    transform: rotate(-180deg);
    margin-top: -15px;
}

.accordion-button::after {
    background-image: url("../Images/plus.png");
    background-repeat: no-repeat;
    transition: transform 0.2s ease-in-out;
}

.accordion-button:not(.collapsed) {
    color: #ffffff;
    background: #000000;
    border: 1px solid #00ffb2;
    transition: 500ms;
}

.accordion-button {
    background-color: #1b1b1b;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    border-bottom: 1px solid #00ffb2;
}

.accordion-body {
    padding: 0px 1.25rem 12px 1.25rem;
    color: #ffffff;
}

.accordion-item {
    background-color: inherit;
    border: 1px solid #151515;
}

.accordion-button:focus {
    outline: 0;
    box-shadow: none;
}


/* ======== End of 1.12. FAQ Style ======== */


/* ======== 1.13. Contact Style ======== */

.contact {
    margin: 100px 0;
}

.contact div:first-child {
    position: relative;
    display: flex;
    align-items: center;
}

.contact div:first-child div {
    width: 95%;
    background-image: url("../Images/web_title_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    position: absolute;
    height: 75%;
    z-index: -1;
}

.contact img[alt="contact"] {
    width: 100%;
}

.contact .col-lg-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact h3 {
    color: #ffffff;
}

.contact .gap-4 hr {
    color: #ffffff;
    opacity: 1;
    height: 3px;
    width: 52px;
}

.contact h2 {
    color: #ffffff;
}

.contact span {
    color: #00ffb2;
}

#success-message {
    display: none;
    background-color: #23cfc9;
    color: white;
    width: 50%;
    height: 42%;
    padding: 120px 0;
    clip-path: polygon( 0% 0%, 94% 0%, 102% 30%, 100% 100%, 70% 130%, 8% 102%, -2% 70%, 0% 20%);
    font-size: 20px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.contact form {
    background: #000000;
    border: 1px solid #00ffb2;
    padding: 20px;
    margin-top: 40px;
}

.contact form input {
    background: #1b1b1b;
    width: 100%;
    margin: 10px;
    border: none;
    outline: none;
    color: #979797;
    padding: 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.contact form textarea {
    background: #1b1b1b;
    width: 96%;
    margin: 10px;
    border: none;
    outline: none;
    color: #979797;
    padding: 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

#my-form div:last-child {
    width: fit-content;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #ffffff;
    border: 1px solid #ffffff;
    transition: 500ms;
    margin: 10px;
}

.contact form button {
    color: #ffffff;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #1b1b1b;
    transition: 500ms;
    border: 1px solid #ffffff;
}

.contact form button:hover {
    background: #00ffb2;
    color: #000000;
    border: 1px solid #00ffb2;
    transition: 500ms;
}


/* ======== End of 1.13. Contact Style ======== */


/* ======== 1.14. Insights Style ======== */

.insight_h h3 {
    color: #ffffff;
}

.insight_h .gap-4 hr {
    color: #ffffff;
    opacity: 1;
    height: 3px;
    width: 52px;
}

.insight_h h2 {
    color: #ffffff;
    margin: 16px 0 26px 0;
}

.insight_h span {
    color: #00ffb2;
}

.insight {
    margin-top: 100px;
    margin-bottom: 100px;
}

.insight_card {
    display: flex;
    gap: 30px;
    padding: 30px 0 0 0;
}

.insight_card .insight_card1 {
    display: flex !important;
    background: #1b1b1b;
    border: 1px solid #1b1b1b;
    align-items: center;
    padding: 32px 13px 32px 25px;
    gap: 25px;
    transition: 500ms;
    width: 50%;
}

.insight_card .insight_card1:hover {
    border: 1px solid #00ffb2;
    transition: 500ms;
    box-shadow: 0px 4px 15px 0px rgba(0, 255, 177.99999999999994, 0.35);
}

.insight_card1 img[alt="insight_card_image"] {
    width: 100%;
    object-fit: cover;
}

.insight_card1 h3 {
    color: #ffffff;
}

.insight_card1 p {
    color: #ffffff;
    margin: 15px 0 44px 0;
}

.insight_card1 a {
    background-color: inherit;
    border: none;
    padding: 0;
    color: #00ffb2;
    transition: 500ms;
}

.insight_card1 a i {
    margin-left: 10px;
    font-size: 20px;
}

.insight_card1 a:hover {
    color: #0038ff;
}

.insight_card1 div:last-child {
    width: 50%;
}


/* ======== End of 1.14. Insights Style ======== */


/* ======== 1.15. Footer Style ======== */

footer {
    background: radial-gradient( 100% 100% at 0% 48.47%, rgba(0, 0, 0, 0.9) 0%, rgba(43, 43, 43, 0.9) 0.01%, rgba(4, 4, 4, 0.9) 100%);
}

footer .bg {
    background-image: url("../Images/web_title_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

footer img[alt="Footer_image"] {
    width: 100%;
}

footer h3 {
    color: #ffffff;
}

footer .gap-4 hr {
    color: #ffffff;
    opacity: 1;
    height: 3px;
    width: 52px;
}

footer h2 {
    color: #ffffff;
    margin: 16px 0 26px 0;
}

footer span {
    color: #00ffb2;
}

footer form {
    background: rgb(70, 69, 69);
    clip-path: polygon( 0% 0%, 98% 0%, 101% 36%, 100% 100%, 70% 130%, 0% 100%, 0% 70%, 0% 20%);
}

footer input {
    width: 100%;
    background: rgb(70, 69, 69);
    border: none;
    outline: none;
    padding: 15px;
    color: #898989;
}

footer form div {
    width: fit-content;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #ffffff;
    border: 1px solid #ffffff;
    transition: 500ms;
}

footer form button {
    color: #ffffff;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #1b1b1b;
    transition: 500ms;
    border: 1px solid #ffffff;
}

footer form button:hover {
    background: #00ffb2;
    color: #000000;
    border: 1px solid #00ffb2;
    transition: 500ms;
}

.copyright img {
    width: 100%;
}

.copyright ul li a {
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    padding: 0;
}

.copyright ul li a:hover {
    color: #00ffb2;
}

.copyright hr {
    color: #ffffff;
    opacity: 1;
}

.copyright p {
    color: #ffffff;
}

.copyright a {
    padding: 0;
}

.copyright i {
    color: #1c1a20;
    font-size: 22px;
    transition: 500ms;
    background-color: #00ffb2;
    padding: 8px 10px;
    border-radius: 50%;
}

.copyright i:hover {
    transition: 500ms;
    background-color: inherit;
    color: #00ffb2;
}

.copyright .fa-facebook-f {
    padding: 8px 12px;
}

#footer-message {
    display: none;
    background-color: #23cfc9;
    color: white;
    width: 50%;
    height: 42%;
    padding: 120px 0;
    clip-path: polygon( 0% 0%, 94% 0%, 102% 30%, 100% 100%, 70% 130%, 8% 102%, -2% 70%, 0% 20%);
    font-size: 20px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}


/* ======== End of 1.15. Footer Style ======== */


/* ======== 2.1. Banner Style ======== */

.about-bg {
    background-image: url("../Images/about_bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 60vh;
}

.about_h1 h1 {
    color: #ffffff;
    margin-top: 35px;
}

.about_h1 {
    background: radial-gradient( 100% 100% at 0% 48.47%, #0000008c 0%, #2b2b2bc9 0.01%, #04040445 100%);
    width: 100%;
    height: 60vh;
    position: absolute;
    top: 0;
    opacity: 0.9;
}

.about_page {
    margin: 100px auto 100px auto;
}


/* ======== End of 2.1. Banner Style ======== */


/* ======== 2.2. Why us Style ======== */

.why_us {
    background-image: url("../Images/why_us.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: white;
    padding: 110px 0;
}

.why_us h3 {
    color: #ffffff;
    margin-bottom: 10px;
}

.why_us .gap-4 hr {
    color: #ffffff;
    opacity: 1;
    height: 3px;
    width: 52px;
}

.why_us h2 {
    color: #ffffff;
    margin: 16px 0 26px 0;
}

.why_us span {
    color: #00ffb2;
}

.why_box div {
    border: 2px solid #ffffff;
    clip-path: polygon( 4% 36%, 0 36%, 0 0, 100% 0, 100% 36%, 98% 35%, 97% 55%, 100% 60%, 100% 100%, 0 100%, 0 65%, 4% 64%);
    padding: 50px 30px;
    transition: 500ms;
}

.why_box div:hover {
    border: 2px solid #00ffb2;
    transition: 500ms;
}


/* ======== End of 2.2. Why us Style ======== */


/* ======== 3.1. Address Style ======== */

.address {
    margin-top: 100px;
    margin-bottom: 100px;
}

.address img {
    width: 70px;
}

.address div {
    color: #ffffff;
    background: #1b1b1b;
    border: 1px solid #00ffb2;
    text-align: center;
    padding: 35px 15px;
    width: 100%;
    transition: 500ms;
}

.address div:hover {
    box-shadow: 0px 4px 15px 0px rgba(0, 255, 177.99999999999994, 0.35);
    transition: 500ms;
}

.address div h3 {
    margin: 44px 0 20px 0;
}


/* ======== End of 3.1. Address Style ======== */


/* ======== 4.1. Projects Style ======== */

.project_page {
    padding: 80px 0;
}

.project_h h3 {
    color: #ffffff;
}

.project_h .gap-4 hr {
    color: #ffffff;
    opacity: 1;
    height: 3px;
    width: 52px;
}

.project_h h2 {
    color: #ffffff;
    text-align: center;
    padding: 0 160px;
}

.project_h span {
    color: #00ffb2;
}

.project_p {
    margin-top: 30px;
    justify-content: center;
}

.project_p figure img {
    width: 98%;
}

.project_p .justify-content-center {
    background-image: url("../Images/web_title_bg.png");
    background-repeat: no-repeat;
    background-size: 84% 122%;
    background-position: center center;
}

.project_card_p {
    color: #ffffff;
    background: #1b1b1b;
    padding: 30px 25px;
    transition: 500ms;
    border: 1px solid #1b1b1b;
}

.project_card_p:hover {
    border: 1px solid #00ffb2;
    transition: 500ms;
    box-shadow: 0px 4px 15px 0px #00ffb259;
}

.project_card_p h4 {
    color: #00ffb2;
}

.project_card_p p {
    margin: 28px 0 42px 0;
}

.project_card_p img {
    width: 75px;
}


/* ======== End of 4.1. Projects Style ======== */


/* ======== 5.1. 404/Coming Soon Style ======== */

.page_404 {
    height: 85vh;
}

.page_404 h1 {
    color: #ffffff;
}

.page_404 span {
    color: #00ffb2;
}

.page_404 .flex-column div {
    width: fit-content;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #ffffff;
    border: 1px solid #ffffff;
    transition: 500ms;
}

.page_404 a {
    color: #ffffff;
    clip-path: polygon( 0% 0%, 90% 0%, 100% 30%, 100% 100%, 70% 130%, 11% 100%, 0% 70%, 0% 20%);
    background: #151515;
    transition: 500ms;
    border: 1px solid #ffffff;
}

.page_404 a:hover {
    background: #00ffb2;
    color: #000000;
    transition: 500ms;
    border: 1px solid #00ffb2;
}

.page_404 img {
    width: 100%;
}

.page_404 figure {
    background-image: url("../Images/web_title_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}


/* ======== End of 5.1. 404/Coming Soon Style ======== */