@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

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


	Navigation Files

	01. Reset
	02. Global Style

	    [Table of Content]

	01. index Page Style
        section index Page
            1.1. Header section
            1.2. hero section
            1.3. feature card section
            1.4. About Us section
            1.5. Our Clients section
            1.6. Why Choose Us section
            1.7. Our Services section
            1.8. How We Work section
            1.9. Pricing Plan section
            1.10. CTA section
            1.11. Teams section
            1.12. Blogs section
            1.13. Footer section
    02. About us Page Style
        section About us Page
            2.1. hero section
            2.2. Our Vision section
            2.3. Counter section
            2.4. About section
    03. Service Page Style
        section Service Page
            3.1. hero section
            3.2. FAQ section
    04. Pricing plan Page Style
        section Pricing plan Page
            4.1. hero section
    05. Blog plan Page Style
        section Blog plan Page
            5.1. hero section
    06. Contact us plan Page Style
        section Contact us plan Page
            6.1. hero section
            6.2. Get In Touch With Us section
    07. FAQ Page Style
        section FAQ Page
            7.1. hero section
    08. Coming Soon/404 Page Style
        section Coming Soon/404 Page
            8.1. Coming Soon/404 section
    09. Team Page Style
        section Team Page
            9.1. hero section
 */


/* ============= 01. Reset section ============= */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
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 {
    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: 50px;
    font-weight: 600;
    line-height: 60px;
    z-index: 1;
    position: relative;
}

h2 {
    font-size: 35px;
    font-weight: 600;
    line-height: 41px;
    z-index: 1;
    position: relative;
}

h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    z-index: 1;
    position: relative;
}

h4 {
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    text-transform: capitalize;
    z-index: 1;
    position: relative;
}

h5 {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    z-index: 1;
    position: relative;
}

h6 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    z-index: 1;
    position: relative;
}

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    z-index: 1;
    position: relative;
}

img {
    z-index: 1;
    position: relative;
}

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

a {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    padding: 16px 38px 16px 38px !important;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 1;
    position: relative;
}


/* set global theme colors */
/* 1eab4b */
/* 116fad */

:root {
    --primary-color: #13d550;
    --secondary-color: #49a9e8;
}


#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    /* Dark background */
    z-index: 1;
}

.site-wrapper {
    position: relative;
}

/* button hover start */

.btn_hover {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: 50px;
    border: 1.5px solid var(--primary-color);
    color: #ffffff;
    z-index: 1;
}

.btn_hover:hover {
    color: #ffffff !important;
}

.btn_hover::before {
    border-radius: 50px 50px 0 0;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    z-index: -1;
    top: 0;
    left: 0;
}

.btn_hover:hover::before {
    width: 100%;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
}

.btn_hover::after {
    border-radius: 0 0 50px 50px;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    z-index: -1;
    bottom: 0;
    right: 0;
}

.btn_hover:hover::after {
    width: 100%;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
}


/* button hover end */


/* animation icon */

@keyframes icon {
    0% {
        top: 0px;
    }

    50% {
        top: 10px;
    }

    100% {
        top: 0px;
    }
}

.slogan {
    font-size: 26px;
    line-height: 32px;
    background: linear-gradient(45deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* button back to top */

#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    padding: 17px 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
}


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


/* ====== 1.1. Header section ====== */

nav {
    padding: 23px 0 !important;
    z-index: 10;
}

nav img {
    width: 8vw;
    max-width: 100%;
    min-width: 100px;
    filter: brightness(0) invert(1);
}

nav li a {
    color: #ffffff !important;
}

nav li a.active {
    color: var(--primary-color) !important;
    background-color: inherit !important;
}

nav li a:hover {
    color: var(--primary-color) !important;
    transition: 500ms;
}

.header_home {
    background: linear-gradient(67.94deg, #030b20 -2.93%, #0d0d2a 44.88%, #230d2b 99.07%, var(--primary-color) 148.49%);
    position: relative;
}

nav .btn_hover a:hover {
    color: #ffffff !important;
}

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

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

.dropdown-toggle::after {
    vertical-align: middle;
    content: "+";
    border: none;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: white !important;
    background-color: inherit;
}

.dropdown-menu a {
    display: block;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color: #000000 !important;
}

.dropdown-menu .dropdown-item::before {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    transition: all 0.3s ease-in;
    background: var(--primary-color);
    z-index: -1;
    top: 0;
    left: 0;
}

.dropdown-menu .dropdown-item:hover::before {
    width: 100%;
    background: var(--primary-color);
}

.navbar-toggler {
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    padding: 10px 20px;
    color: #ffffff;
    border: 1.5px solid var(--primary-color);
    border-radius: 0.25rem;
}

.navbar-toggler:hover {
    background: inherit;
}

aside {
    background-color: inherit;
    background-color: #070b24;
    z-index: 10;
}

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

.sidebar img {
    width: 100%;
}

.sidebar button {
    width: 44px;
    height: 35px;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    padding: 7px 12px 10px 12px;
    margin-bottom: -15px;
    border-radius: 0.25em;
    border: 1.5px solid var(--primary-color);
    color: #ffffff;
}

.sidebar button:hover {
    background: inherit;
}

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;
    padding: 10px 0 !important;
}

aside li a.active {
    color: var(--primary-color) !important;
}

aside li a:hover {
    color: var(--primary-color) !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 var(--primary-color);
}

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

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

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

.sidepanel::-webkit-scrollbar {
    width: 3px;
}

.sidepanel::-webkit-scrollbar-thumb {
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    border-radius: 10px;
}


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


/* ====== 1.2. hero section ====== */

.header-cercle1 {
    position: absolute;
    width: 200px;
    left: 250px;
    top: 60px;
}

.header-cercle2 {
    position: absolute;
    width: 272px;
    right: 22px;
    top: 37rem;
}

.banner {
    padding: 120px 0;
    color: #ffffff;
}

.banner img[alt='banner'] {
    width: 90vw;
    max-width: 100%;
    min-width: 350px;
}


/* ====== End of 1.2. hero section ====== */


/* ====== 1.3. feature card section ====== */

.banner_card {
    padding: 0px 0 100px 0;
}

.banner_card .container div {
    color: #ffffff;
    border: 1.5px solid #2b8cd580;
    border-radius: 30px;
    text-align: center;
    width: 100%;
    padding: 15px 10px 5px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 1;
    height: 100%;
    position: relative;
}

.banner_card .container div:hover {
    box-shadow: 0px 6px 30px rgba(172, 172, 172, 0.3);
}

.banner_card img {
    width: 85%;
    transition: all 0.3s ease-in;
}

.banner_card img:hover {
    position: relative;
    animation: icon 0.5s 2;
}

.banner_card .container div:hover img {
    filter: brightness(0) invert(1);
}

.banner_card a i {
    font-size: 15px;
}

.banner_card a {
    transform: scale(0);
    margin-top: -2px;
    margin-bottom: -43px;
    color: #ffffff;
    padding: 13px 19px !important;
    border: 1.5px solid var(--primary-color);
    border-radius: 50%;
}

.banner_card .container div:hover a {
    transform: scale(1);
}

.banner_card .container div::before {
    border-radius: 30px 30px 0 0;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    z-index: -1;
    top: 0;
    left: 0;
    background: var(--primary-color);
}

.banner_card .container div:hover::before {
    width: 100%;
    background: var(--primary-color);
}

.banner_card .container div::after {
    border-radius: 0 0 30px 30px;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    z-index: -1;
    bottom: 0;
    right: 0;
    background: var(--primary-color);
}

.banner_card .container div:hover::after {
    width: 100%;
    background: var(--primary-color);
}


/* ====== End of 1.3. feature card section ====== */


/* ====== 1.4. About Us section ====== */

.about {
    padding: 100px 0;
    position: relative;
    background: linear-gradient(67.94deg, #bed0fb -2.93%, #eafff3 44.88%, #bed0fb 99.07%, var(--primary-color) 148.49%);
    ;
}

.about h5 {
    color: var(--primary-color);
}

.about h2 {
    color: #000000;
    margin: 10px 0;
}

.about p {
    color: #000000;
    padding-right: 30px;
}

.about h3 {
    color: #000000;
    margin-bottom: 5px;
}

.about a {
    color: var(--primary-color);
}

.about .col-lg-3 h2 {
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about .member {
    width: 100%;
}

.btn_hover2 {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: 50px;
    border: 1.5px solid var(--primary-color);
    color: #ffffff !important;
    z-index: 1;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
}

.btn_hover2:hover {
    color: var(--primary-color) !important;
}

.btn_hover2::before {
    border-radius: 50px 50px 0 0;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: #ffffff;
    z-index: -1;
    top: 0;
    left: 0;
}

.btn_hover2:hover::before {
    width: 100%;
    background: #ffffff;
}

.btn_hover2::after {
    border-radius: 0 0 50px 50px;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: #ffffff;
    z-index: -1;
    bottom: 0;
    right: 0;
}

.btn_hover2:hover::after {
    width: 100%;
    background: #ffffff;
}

.ab-image {
    width: 100%;
}

.about-cercle1 {
    position: absolute;
    width: 228px;
    left: 400px;
    top: -63px;
}

.about-cercle2 {
    position: absolute;
    width: 284px;
    right: 0;
    bottom: -105px;
}


/* ====== End of 1.4. About Us section ====== */


/* ====== 1.5. Our Clients section ====== */

.client {
    padding: 100px 0;
    background: linear-gradient(67.94deg, #bed0fb -2.93%, #eafff3 44.88%, #bed0fb 99.07%, var(--primary-color) 148.49%);
}

.client h5 {
    color: var(--primary-color);
}

.client h2 {
    color: #000000;
    padding: 10px 190px 35px 190px;
}

.client img {
    width: 130px;
}


/* ====== End of 1.5. Our Clients section ====== */


/* ====== 1.6. Why Choose Us section ====== */

.choose {
    background: linear-gradient(67.94deg, #030b20 -2.93%, #0d0d2a 44.88%, #230d2b 99.07%, var(--primary-color) 148.49%);
    padding: 100px 0;
    position: relative;
}

.choose h5 {
    color: var(--primary-color);
}

.choose h2 {
    color: #ffffff;
}

.choose p {
    color: #ffffff;
}

.choose .why-us {
    width: 90vw;
    max-width: 90%;
    min-width: 350px;
}

.chose-cercle1 {
    position: absolute;
    width: 160px;
    bottom: 97px;
    left: 12px;
}

.chose-cercle2 {
    position: absolute;
    width: 160px;
    right: 39px;
    top: 263px;
}

.choose h3 {
    color: #ffffff;
}

.choose2 {
    background-color: #00000085;
    border-radius: 3vw;
    padding: 66px 36px;
    width: 100%;
    max-height: 40vw;
    min-height: 450px;
    overflow: auto;
    z-index: 1;
    border: 1px solid;
}

.choose2 img {
    width: 70px;
}

.choose2 img:hover {
    position: relative;
    animation: icon 0.5s 2;
}


/* ====== End of 1.6. Why Choose Us section ====== */


/* ====== 1.7.  Our Services section ====== */

.services {
    padding: 100px 0;
    position: relative;
    background: linear-gradient(67.94deg, #bed0fb -2.93%, #eafff3 44.88%, #bed0fb 99.07%, var(--primary-color) 148.49%);
}

.services h5 {
    color: var(--primary-color);
}

.services h2 {
    color: #000000;
    margin: 10px 0;
}

.services p {
    color: #272727;
}

.service_card {
    background: #ffffff;
    border-radius: 60px;
    z-index: 1;
    color: #000000;
    position: relative;
    transition: all 0.3s ease;
    padding: 45px 36px 25px 36px;
    width: 100%;
    border: 1.5px solid rgba(172, 172, 172, 1.25);
    gap: 20px;
}

.service_card:hover {
    box-shadow: 0px 6px 30px rgba(172, 172, 172, 0.3);
}

.service_card:hover.service_card h4 {
    color: #ffffff;
    transition: all 0.3s ease;
}

.service_card:hover.service_card p {
    color: #ffffff;
    transition: all 0.3s ease;
}

.service_card::before {
    border-radius: 60px 60px 0 0;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: var(--primary-color);
    z-index: -1;
    top: 0;
    left: 0;
}

.service_card:hover::before {
    width: 100%;
    background: var(--primary-color);
}

.service_card::after {
    border-radius: 0 0 60px 60px;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: var(--primary-color);
    z-index: -1;
    bottom: 0;
    right: 0;
}

.service_card:hover::after {
    width: 100%;
    background: var(--primary-color);
}

.service_card img {
    width: 85%;
    transition: all 0.3s ease;
}

.service_card img:hover {
    position: relative;
    animation: icon 0.5s 2;
}

.service_card:hover.service_card img {
    filter: brightness(0) invert(1);
}

.service_card a i {
    font-size: 15px;
}

.service_card a {
    transform: scale(0);
    margin-top: -2px;
    margin-bottom: -43px;
    color: #ffffff;
    padding: 13px 19px !important;
    border-radius: 50%;
    border: 1.5px solid var(--primary-color);
}

.service_card:hover.service_card a {
    transform: scale(1);
}

.service-cercle1 {
    position: absolute;
    width: 220px;
    left: -103px;
    bottom: 185px;
}

.service-cercle2 {
    position: absolute;
    width: 300px;
    right: 0;
    bottom: 300px;
}

.service-cercle3 {
    position: absolute;
    width: 300px;
    left: 54%;
    top: 72px;
}

.view_service {
    color: var(--primary-color) !important;
}

.view_service:hover {
    color: #ffffff !important;
}


/* ====== End of 1.7.  Our Services section ====== */


/* ====== 1.8. How We Work section ====== */

.work {
    padding: 100px 0;
    background: linear-gradient(67.94deg, #030b20 -2.93%, #0d0d2a 44.88%, #230d2b 99.07%, var(--primary-color) 148.49%);
}

.how-we-work {
    width: 100%;
    object-fit: cover;
}

.work a {
    position: absolute;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    border-radius: 26px;
    padding: 30px 44px !important;
    bottom: -42px;
    right: 0;
    z-index: 1;
}

.work i {
    color: #ffffff;
    border: 2px solid #ffffff;
    padding: 10px 10px 10px 13px;
    border-radius: 50%;
    font-size: 22px;
}

.work h5 {
    color: var(--primary-color);
}

.work h2 {
    color: #ffffff;
    margin: 10px 0;
}

.work p {
    color: #ffffff;
}

.work .mt-4 {
    background: #ffffff;
    border: 1.5px solid #acacac;
    border-radius: 40px;
    padding: 35px 27px;
    position: relative;
    z-index: 1;
}

.work .mt-4:hover {
    box-shadow: 0px 6px 30px rgba(172, 172, 172, 0.3);
}

.work h3 {
    color: #000000;
    transition: all 0.3s ease;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.work .step p {
    color: #000000;
}

.work .mt-4:hover h3 {
    color: #ffffff;
}

.work .mt-4:hover p {
    color: #ffffff;
    transition: all 0.3s ease;
}

.work .mt-4::before {
    border-radius: 40px 40px 0 0;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: var(--primary-color);
    z-index: -1;
    top: 0;
    left: 0;
}

.work .mt-4:hover::before {
    width: 100%;
    background: var(--primary-color);
}

.work .mt-4::after {
    border-radius: 0 0 40px 40px;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: var(--primary-color);
    z-index: -1;
    bottom: 0;
    right: 0;
}

.work .mt-4:hover::after {
    width: 100%;
    background: var(--primary-color);
}

.work .mt-4 h2 {
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.work .mt-4:hover h2 {
    -webkit-text-fill-color: #ffffff;
}

.work-cercle1 {
    position: absolute;
    width: 244px;
    left: 33%;
    top: 0;
    z-index: 0;
}

.work-cercle2 {
    position: absolute;
    width: 300px;
    right: -150px;
    bottom: 7%;
    z-index: 0;
}


/* ====== End of 1.8. How We Work section ====== */


/* ====== 1.9. Pricing Plan section ====== */

.pricing_plan h5 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.pricing_plan h2 {
    color: #000000;
}

.pricing_card {
    color: #000000;
    border: 1px solid #acacac;
    background-color: #ffffff;
    border-radius: 40px;
    padding: 40px 30px;
    width: 95%;
    position: relative;
    z-index: 1;
}

.pricing_card:hover {
    box-shadow: 0px 6px 30px rgba(172, 172, 172, 0.3);
}

.pricing_card img {
    width: 100%;
}

.pricing_card img:hover {
    position: relative;
    animation: icon 0.5s 2;
}

.pricing_card div:last-child {
    margin: 45px auto 0 auto;
}

.pricing_card a {
    color: var(--primary-color);
}

.pricing_card a:hover {
    color: #ffffff;
}

.pricing_card i {
    color: #18bd46;
    border: 1.5px solid #18bd46;
    font-size: 17px;
    border-radius: 5px;
    padding: 2px;
}

.pricing-cercle {
    position: absolute;
    width: 300px;
    z-index: -1;
    left: 0;
}


/* ====== End of 1.9. Pricing Plan section ====== */


/* ====== 1.10. CTA section ====== */

.experience {
    background-image: url("../Images/bg/contact_us.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    color: #ffffff;
    padding: 100px 300px;
    width: 100%;
}

.get {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: 50px;
    border: 1.5px solid var(--primary-color);
    color: #ffffff;
    z-index: 1;
}

.get:hover {
    color: #ffffff !important;
}

.get::before {
    border-radius: 50px 50px 0 0;
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    transition: all 0.3s ease-in;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    z-index: -1;
    top: 0;
    left: 0;
}

.get:hover::before {
    width: 0;
}

.get::after {
    border-radius: 0 0 50px 50px;
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    transition: all 0.3s ease-in;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    z-index: -1;
    bottom: 0;
    right: 0;
}

.get:hover::after {
    width: 0;
}


/* ====== End of 1.10. CTA section ====== */


/* ====== 1.11. Teams section ====== */
.serv-team {
    padding: 100px 0;
    background: linear-gradient(67.94deg, #bed0fb -2.93%, #eafff3 44.88%, #bed0fb 99.07%, var(--primary-color) 148.49%);
}

.team h5 {
    color: var(--primary-color);
}

.team h2 {
    color: #000000;
    margin: 10px 0;
}

.team p {
    color: #000000;
    padding: 0 302px;
}

.team_card {
    border: 1.5px solid #acacac;
    background-color: #ffffff;
    border-radius: 30px;
    padding: 14px 14px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    width: 100%;
}


.team_card:hover {
    box-shadow: 0px 6px 30px rgba(172, 172, 172, 0.3);
}

.team_card::before {
    border-radius: 30px 30px 0 0;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: var(--primary-color);
    z-index: -1;
    top: 0;
    left: 0;
}

.team_card:hover::before {
    width: 100%;
    background: var(--primary-color);
}

.team_card::after {
    border-radius: 0 0 30px 30px;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: var(--primary-color);
    z-index: -1;
    bottom: 0;
    right: 0;
}

.team_card:hover::after {
    width: 100%;
    background: var(--primary-color);
}

.team_card:hover.team_card h4 {
    color: #ffffff;
}

.team_card:hover h5 {
    color: #ffffff !important;
}

.team_card:hover.team_card p {
    color: #ffffff;
}

.team_card:hover hr {
    color: #ffffff;
}

.team_card hr {
    width: 100%;
    height: 1px;
    color: var(--secondary-color);
    opacity: 1;
    margin: 10px 0 10px 0;
}

.team_card img {
    width: 200px;
    border-radius: 20px;
}

.team_card .social-icons {
    display: flex;
    justify-content: space-around;
}

.team_card .social-icons a {
    color: var(--secondary-color);
    background-color: #ffffff;
    border: 1px solid var(--primary-color);
    padding: 10px !important;
    border-radius: 50%;
    transition: all 0.3s ease;
    font-size: 18px;
    height: 40px;
    width: 40px;
    text-align: center;
}

.team_card .social-icons a:hover {
    color: var(--primary-color);
    border: 1px solid var(--secondary-color);
}

.team_card img:hover {
    position: relative;
    animation: icon 0.5s 2;
}

.team_card p {
    color: #000000;
    transition: all 0.3s ease;
}

.team_card h4 {
    transition: all 0.3s ease;
    color: #000000;
}


/* ====== End of 1.11. Teams section ====== */


/* ====== 1.12. Blogs section ====== */

.blog {
    padding: 100px 0;
    background: linear-gradient(67.94deg, #030b20 -2.93%, #0d0d2a 44.88%, #230d2b 99.07%, var(--primary-color) 148.49%);
}

.blog h5 {
    color: var(--primary-color);
    margin-bottom: 16px;
}

.blog h2 {
    color: #ffffff;
}

.card {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 15px 20px 25px 20px;
    width: 100%;
}

.blog .card img {
    width: 100%;
    object-fit: cover;
    border-radius: 10px 10px 0px 0px;
    transition: all 0.3s ease;
}

.card:hover.card img {
    transform: scale(1.05) rotate(2deg);
    opacity: 0.8;
}

.card i {
    font-size: 22px;
    color: #000000;
}

.card a {
    color: #000000;
}

.card h4 {
    color: #000000;
}

.card p {
    color: #000000;
    margin: 20px 0 10px 0;
}

.card a:nth-child(5) {
    color: var(--primary-color);
}

.card a:nth-child(5):hover {
    color: var(--secondary-color);
}


/* ====== End of 1.12. Blogs section ====== */


/* ====== 1.13. Footer section ====== */

.ab-footer {
    margin-top: 100px;
}

footer div:first-child h5 {
    color: var(--primary-color);
}

footer {
    position: relative;
    background: linear-gradient(67.94deg, #bed0fb -2.93%, #eafff3 44.88%, #bed0fb 99.07%, var(--primary-color) 148.49%);
    padding-top: 100px;
}

footer h2 {
    color: #000000;
}

footer .footer-para {
    color: #000000;
    padding: 0 330px;
}

footer form input {
    width: 50%;
    background-color: #ffffff;
    border: 1.5px solid #308ad680;
    border-radius: 60px;
    padding-left: 30px;
    outline: none;
    color: #757575;
    z-index: 1;
}

footer button {
    border-radius: 50px;
    border: 1.5px solid var(--primary-color);
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #ffffff;
}

footer button::before {
    border-radius: 50px 50px 0 0;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    z-index: -1;
    top: 0;
    left: 0;
}

footer button:hover::before {
    width: 100%;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
}

footer button::after {
    border-radius: 0 0 50px 50px;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    z-index: -1;
    bottom: 0;
    right: 0;
}

footer button:hover::after {
    width: 100%;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
}

footer form button i {
    color: var(--primary-color);
    font-size: 22px;
    transition: all 0.3s ease;
}

footer form button:hover i {
    color: #ffffff;
}

#footer-message {
    display: none;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    color: white;
    width: 50%;
    height: 42%;
    padding: 120px 0 120px 0;
    font-size: 20px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    border-radius: 10px;
}

footer .col-lg-5 img {
    width: 170px;
    margin-bottom: 20px;
    margin-top: -17px;
}

footer .row {
    margin-top: 50px;
}

footer .col-lg-3 hr {
    width: 120px;
    position: absolute;
    top: 93px;
    right: -30px;
    rotate: 90deg;
    color: #000000;
    opacity: 1;
}

footer .row p {
    color: #000000;
    text-align: start;
}

footer .col-lg-4 span a {
    background: #000000;
    border-radius: 50%;
    color: #ffffff;
    padding: 9px 9px !important;
}

footer .col-lg-4 span a i {
    color: #ffffff;
}

footer .col-lg-4 span a:first-child {
    padding: 10px 15px 8px 14px !important;
}

footer .col-lg-4 span a:nth-child(2) {
    padding: 10px 11px 8px 11px !important;
}

footer .col-lg-4 span a:nth-child(3) {
    padding: 10px 10px 8px 11px !important;
}

footer .col-lg-4 span a:nth-child(4) {
    padding: 10px 10px 8px 12px !important;
}

footer .col-lg-4 span a:nth-child(5) {
    padding: 11px 13px 7px 13px !important;
}

footer .col-lg-4 span a:hover {
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
}

footer .col-lg-4 span a i {
    font-size: 22px;
}

footer .row h4 {
    color: #202020;
}

footer .row .col-lg-3 a {
    color: #000000;
}

footer .row .col-lg-3 a:hover {
    color: var(--primary-color);
}

footer .col-lg-4 i {
    font-size: 22px;
    color: var(--primary-color);
}

/* footer .col-lg-4 i:hover {
    color: var(--secondary-color);
} */

footer iframe {
    width: 100%;
    height: 200px;
    border: 1px solid var(--secondary-color);
    border-radius: 10px;
}

footer hr {
    color: #000000;
    opacity: 1;
}

footer h6 {
    color: #000000;
}

footer .footer-cercle1 {
    position: absolute;
    top: 52px;
    width: 394px;
    left: 14%;
    z-index: 0;
}

.footer-cercle2 {
    position: absolute;
    width: 220px;
    right: 0;
    z-index: 0;
}


/* ====== End of 1.13. Footer section ====== */


/* ====== 2.1. hero section ====== */

.header_about {
    background-image: url("../Images/about/banner_about.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 430px;
}

.banner_about {
    padding: 210px 0 0 0;
    color: #ffffff;
    position: absolute;
    width: 100%;
    top: 0;
    background-color: #030b2080;
    height: 430px;
}


/* ====== End of 2.1. hero section ====== */


/* ====== 2.2. Our Vision section ====== */

.vision {
    background: linear-gradient(67.94deg, #030b20 -2.93%, #0d0d2a 44.88%, #230d2b 99.07%, var(--primary-color) 148.49%);
    padding: 100px 0;
    position: relative;
}

.vision img {
    width: 100%;
    border-radius: 40px;
}

.vision h5 {
    color: var(--primary-color);
}

.vision h2 {
    color: #ffffff;
    margin: 6px 0 20px 0;
}

.vision p {
    color: #ffffff;
}

.vision h3 {
    color: #ffffff;
    margin: 20px 0 10px 0;
}

.vision a {
    color: var(--primary-color);
}

.vision a:hover {
    color: #ffffff;
}

.vision .vision-cercle {
    position: absolute;
    right: 0;
    z-index: -1;
    top: -29%;
    width: 300px;
}


/* ====== End of 2.2. Our Vision section ====== */


/* ====== 2.3. Counter section ====== */

.ab_counter img {
    width: 50px;
    margin-right: 25px;
}

.ab_counter img:hover {
    position: relative;
    animation: icon 0.5s 2;
}

.ab_counter {
    color: #050505;
}

.ab_counter hr {
    rotate: 90deg;
    width: 70px;
    opacity: 1;
    margin: 0;
}


/* ====== End of 2.3. Counter section ====== */


/* ====== 2.4. About section ====== */

.ab-choose {
    margin: 100px 0;
}

.ab-choose {
    background: linear-gradient(67.94deg, #030b20 -2.93%, #0d0d2a 44.88%, #230d2b 99.07%, var(--primary-color) 148.49%);
    padding: 100px 0;
    position: relative;
}

.ab-choose h5 {
    color: var(--primary-color);
}

.ab-choose h2 {
    color: #ffffff;
}

.ab-choose p {
    color: #ffffff;
}

.chose-cercle1 {
    position: absolute;
    width: 160px;
    bottom: 97px;
    left: 12px;
}

.chose-cercle2 {
    position: absolute;
    width: 160px;
    right: 39px;
    top: 263px;
}

.ab-choose h3 {
    color: #ffffff;
}

/* .choose2 {
    background-color: #5c5cce85;
    border-radius: 70px;
    padding: 66px 36px;
    width: 100%;
} */

.choose2 img {
    width: 70px;
}

.choose2 img:hover {
    position: relative;
    animation: icon 0.5s 2;
}


/* ====== End of 2.4. About section ====== */


/* ====== 3.1. hero section ====== */

.header_service {
    background-image: url("../Images/service/banner_service.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 430px;
}

.banner_service {
    padding: 210px 0 0 0;
    color: #ffffff;
    position: absolute;
    width: 100%;
    top: 0;
    background-color: #030b2080;
    height: 430px;
}


/* ====== End of 3.1. hero section ====== */


/* ====== 3.2. FAQ section ====== */
.faq {
    background: linear-gradient(67.94deg, #030b20 -2.93%, #0d0d2a 44.88%, #230d2b 99.07%, var(--primary-color) 148.49%);
    padding: 100px 0;
    position: relative;
}

.faq h5 {
    color: var(--primary-color);
}

.faq h2 {
    color: #ffffff;
}

.faq p {
    color: #ffffff;
}

.faq .accordion-body {
    color: #000000;
}

.faq img {
    position: absolute;
    width: 300px;
    top: -45px;
    z-index: -1;
    right: 0;
}

div#accordionExample {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

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

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

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

.accordion-button {
    background: #efefef;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    padding: 15px 18px 15px 25px;
    color: #000000;
    border-radius: 10px;
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: 10px;
}

.accordion-item:first-of-type .accordion-button.collapsed {
    border-radius: 10px;
}

.accordion-item {
    border-radius: 10px;
    border: none;
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    color: #ffffff;
}


/* ====== End of 3.2. FAQ section ====== */


/* ====== 4.1. hero section ====== */

.page-pricing {
    margin-top: 100px;
}

.header_pricing {
    background-image: url("../Images/pricing/banner_pricing.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 430px;
}

.banner_pricing {
    padding: 210px 0 0 0;
    color: #ffffff;
    position: absolute;
    width: 100%;
    top: 0;
    background-color: #030b2080;
    height: 430px;
}


/* ====== End of 4.1. hero section ====== */


/* ====== 5.1. hero section ====== */

.header_blog {
    background-image: url("../Images/blog/banner_blog.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 430px;
}

.banner_blog {
    padding: 210px 0 0 0;
    color: #ffffff;
    position: absolute;
    width: 100%;
    top: 0;
    background-color: #030b2080;
    height: 430px;
}

.page_blog {
    background: #ffffff;
}

.page_blog h2 {
    color: #000000;
}

.page_blog p {
    color: #000000;
    margin-top: 10px;
}


/* ====== End of 5.1. hero section ====== */


/* ====== 6.1. hero section ====== */

.header_contact {
    background-image: url("../Images/contact/banner_contact.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 430px;
}

.banner_contact {
    padding: 210px 0 0 0;
    color: #ffffff;
    position: absolute;
    width: 100%;
    top: 0;
    background-color: #030b2080;
    height: 430px;
}


/* ====== End of 6.1. hero section ====== */


/* ====== 6.2. Get In Touch With Us section ====== */

.contact_page {
    padding: 100px 0;
    position: relative;
    background: linear-gradient(67.94deg, #bed0fb -2.93%, #eafff3 44.88%, #bed0fb 99.07%, var(--primary-color) 148.49%);
}

.mapouter {
    position: relative;
    width: 100%;
    height: 535px;
}

.gmap_iframe {
    height: 535px;
    border-radius: 20px;
    border: 1px solid var(--secondary-color);
}

.contact_page h2 {
    color: #262626;
}

.contact_page p {
    color: #2d2d2d;
    margin: 10px 0 30px 0;
}

#contact-message {
    display: none;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    color: white;
    width: 50%;
    height: 42%;
    padding: 120px 0 120px 0;
    font-size: 20px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    border-radius: 10px;
}

.contact_page input,
textarea {
    background: #ffffff;
    border: 1px solid #dadada;
    border-radius: 30px;
    width: 100%;
    margin-bottom: 25px;
    color: var(--primary-color);
    padding: 16px;
}

.contact_page input:focus,
textarea:focus {
    outline: 1px solid var(--secondary-color);
    color: #969696;
}

.contact_page form {
    position: relative;
    z-index: 1;
}

.contact_page form button {
    border: 1.5px solid var(--secondary-color);
    background-color: #ffffff;
    color: var(--secondary-color);
    border-radius: 45px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}

.contact_page form button:hover {
    color: #ffffff;
}

.contact_page form button::before {
    border-radius: 50px 50px 0 0;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    z-index: -1;
    top: 0;
    left: 0;
}

.contact_page form button:hover::before {
    width: 100%;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
}

.contact_page form button::after {
    border-radius: 0 0 50px 50px;
    content: "";
    position: absolute;
    width: 0;
    height: 50%;
    transition: all 0.3s ease-in;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    z-index: -1;
    bottom: 0;
    right: 0;
}

.contact_page form button:hover::after {
    width: 100%;
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
}

.contact_page .contact-cercle1 {
    position: absolute;
    width: 300px;
    top: -153px;
    right: 0;
    z-index: -1;
}

.contact_page .contact-cercle2 {
    position: absolute;
    width: 300px;
    z-index: -1;
    bottom: -50px;
    right: 0;
}


/* ====== End of 6.2. Get In Touch With Us section ====== */


/* ====== 7.1. hero section ====== */

.page-faq {
    margin-top: 100px;
}

.header_faq {
    background-image: url("../Images/faq/banner_faq.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 430px;
}

.banner_faq {
    padding: 210px 0 0 0;
    color: #ffffff;
    position: absolute;
    width: 100%;
    top: 0;
    background-color: #030b2080;
    height: 430px;
}


/* ====== End of 7.1. hero section ====== */


/* ====== 8.1. Coming Soon/404 section ====== */

.coming_soon {
    background: linear-gradient(67.94deg, #030b20 -2.93%, #0d0d2a 44.88%, #230d2b 99.07%, var(--primary-color) 148.49%);
    height: 100vh;
    color: #ffffff;
    text-align: center;
}

.coming_soon p {
    padding: 0 313px;
}

.coming_soon img {
    width: 135px;
}

.coming_soon img:hover {
    position: relative;
    animation: icon 0.5s 2;
}

.coming_soon_count h1 {
    background: linear-gradient(66.75deg, var(--secondary-color) 0.87%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coming_soon_count h6 {
    color: #ffffff;
}

.coming_soon_count div {
    width: 110px
}

.coming_soon .event_details {
    background: black;
    padding: 30px;
    text-align: center;
}

.coming_soon .event_details p {
    font-size: 18px;
    text-align: left;
    padding: 3px 0px;
}

.coming_soon .event_details .detail_info_link {}


/* ====== End of 8.1. Coming Soon/404 section ====== */


/* ====== 9.1. hero section ====== */

.header_team {
    background-image: url("../Images/team/banner_team.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 430px;
}

.banner_team {
    padding: 210px 0 0 0;
    color: #ffffff;
    position: absolute;
    width: 100%;
    top: 0;
    background-color: #030b2080;
    height: 430px;
}

.page_team {
    padding: 100px 0;
    position: relative;
    background: linear-gradient(67.94deg, #bed0fb -2.93%, #eafff3 44.88%, #bed0fb 99.07%, var(--primary-color) 148.49%);

}

.serv-team .slider {
    position: relative;
    z-index: 1;

}


/* ====== End of 9.1. hero section ====== */