*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
:root{
    --primery-color: #422CAA;
    --secondry-color : #222;
    --font-color : white;
    --hover-animation-dur : 0.3s;
}
html{
    scroll-behavior: smooth;
}
section{
    padding-top: calc(65px + 0.5rem);
    padding-bottom: 65px;
}
section:not(#home) :is(h2.main-header ,p){
    color: var(--secondry-color);
}
section > .container > div h2:not(.main-header){
    color: var(--primery-color);
}
section h2.main-header{
    --variable-color : white;
    --constant-color : var(--primery-color);
    text-transform: capitalize;
    width: fit-content;
    overflow : hidden;
    background-color: var(--constant-color);
    mix-blend-mode: darken;
}

section h2.main-header::before{
    content: "";
    position: absolute;
    inset: -11px;
    transform: rotateZ(-35deg) skew(69deg, -12deg);
    background-color: var(--variable-color);
    z-index: 2;
    pointer-events: none;
    transition: transform 0.5s;
}
section#services h2.main-header::before {
    transform: rotateZ(-26deg) skew(75deg, -9deg);
}
section h2.main-header:hover::before{
    transform: rotateZ(-30deg) skew(73deg, 17deg) !important;
}
section h2.main-header::after{
    content: "";
    position: absolute;
    inset: 0px;
    background-color: var(--constant-color);
    z-index: 1;
    pointer-events: none;
}
@media (max-width : 768px){
    section h2.main-header{
        background-color: transparent;
    }
    section h2.main-header::before , section h2.main-header::after{
        content: none;
    }
    
}
section h2.main-header span{
    width: fit-content;
    z-index: 3;
    background-color : var(--variable-color);
    position: relative;
    pointer-events: none;
}
input:focus,button:focus,textarea:focus{
    outline: none !important;
}
section:not(#FAQ) .container div div button {
    width: fit-content;
    transition : background-color 0.2s, color 0.2s;
}
section:not(#FAQ) .container div div button:hover {
    background-color: var(--primery-color);
    color: white;
    border-color: transparent;
}

nav.stuck-navbar {
    background-color: var(--primery-color);
}
nav #logo , .navbar-nav li a, #home :is(h1,p,a){
    color: var(--font-color) !important;
}
nav .navbar-toggler:focus{
    outline: none !important;
    box-shadow: none !important;
}
nav .navbar-toggler i{
    color : var(--font-color) !important
}

@media (max-width : 992px){
    nav div.container{
        border : 1px solid white;
        border-top-style: none;
        border-right-style: none;
        border-left-style: none;
    }
}

nav ul.navbar-nav{
    --height : 0px;
    --width : 0px;
    --top-pos : 0;
    --left-pos : 0;
    backdrop-filter: blur(20px);
    background-color: #2e28281c;
    transition: backdrop-filter 0s !important;
}
nav ul.navbar-nav::before{
    content : "";
    position: absolute;
    inset: 0px;
    border: 1px solid white;
    border-left-style: none;
    border-right-style: none;
}
nav ul.navbar-nav::after{
    content : "";
    width : var(--width);
    height : var(--height);
    background-color: white;
    position: absolute;
    top : calc(var(--top-pos) * 1px);
    left : calc(var(--left-pos) * 1px);
    mix-blend-mode: difference;
    transition: left var(--hover-animation-dur) , top var(--hover-animation-dur);
}
nav ul.navbar-nav li{
    position: relative;
}
/* nav ul.navbar-nav li a::before{
    content : "";
    position: absolute;
    inset: 0px;
    background-color: transparent;
    mix-blend-mode: unset;
    transition: background-color 0.5s , mix-blend-mode 0.5s 0.5s;
} */

#home{
    height: 100vh;
    background: linear-gradient(purple, var(--primery-color));
    position: relative;
    overflow: hidden;
}
#home > .container a{
    background-color: purple;
    border: 1px solid #ffffff40;
    box-shadow: 0px 0px 2px white inset;
    position: relative;
    overflow: hidden;
}
#home > .container a::before{
    content: "";
    position: absolute;
    inset: -5px;
    background: linear-gradient(45deg , #c9c9c98f , transparent);
    background-repeat: no-repeat;
    transform: skewX(10deg);
    transition: background-position var(--hover-animation-dur);
    pointer-events : none;
}
#home > .container a:hover::before{
    background-position-x: 295px;
}
#home i{
    --scale-value : 16;
    position: absolute;
    transform: rotateZ(0) scale(var(--scale-value));
    color: #ffffff47;
    mix-blend-mode: plus-lighter;
    animation: rotate 5s linear infinite;
}
@media (min-width : 568px){
    #home i{
        --scale-value : 21;
    }
}
@media (min-width : 992px){
    #home i{
        --scale-value : 24;
    }
}
@keyframes rotate{
    to{
        transform: rotateZ(360deg) scale(var(--scale-value));
    }
}

#home i:first-of-type{
    top: 215px;
    left: -13px;
}
#home i:last-of-type{
    bottom: 290px;
    right: -13px;
}

#home .wave{
    height: 100px;
    background-image: url("./images/wave.png");
    background-size: 1000px 100px;

}
@keyframes wave{
    0% {
        background-position-x: 0px;
    }
    100% {
        background-position-x: 1000px;
    }
}
#home .wave-1{
    --i : 0s;
    opacity: 1;
    animation: wave 30s var(--i) infinite linear ;
    /* z-index: 1000; */
    bottom: 0px;
}

#home .wave-2{
    --i : -5s;
    opacity: 0.5;
    animation: wave 15s var(--i) infinite linear reverse;
    /* z-index: 999; */
    bottom: 10px;
}

#home .wave-3{
    --i : -2s;
    opacity: 0.2;
    animation: wave 30s var(--i) infinite linear ;
    /* z-index: 998; */
    bottom: 20px;
}

#home .wave-4{
    --i : -5s;
    opacity: 0.7;
    animation: wave 15s var(--i) infinite linear reverse;
    /* z-index: 997; */
    bottom: 30px;
}

/* start about section style */
#about::before,#about::after{
    content: '';
    width: 460px;
    height: 430px;
    position: absolute;
    z-index: -1;
    opacity: .2;
    border-radius: 50%;
}
@media (max-width : 568px){
    #about::before,#about::after{
        content : none;
    }
}
#about::before{
    background-color: #5c587057;
    position: absolute;
    bottom: -29px;
    left: -89px;
}
#about::after{
    background-color: #2900ff47;
    position: absolute;
    top: -29px;
    right: -125px;
    width: 700px;
    height: 500px;
    transform: rotatez(-35deg);
}

/* start style commone element between about section and services section */
#about .container div.row > div h3 ,
#services .container div.row > div h3 {
    color : var(--primery-color)
}
@media (max-width : 992px){
    #about .container div.row > div:nth-child(even) ,
    #services .container div.row:nth-child(odd) > div:nth-child(even) {
        order: -1;
    }
}

/* start team section style */
section#team {
    background-color: var(--secondry-color);
}
section#team .container h2.main-header{
    --variable-color : var(--secondry-color);
    mix-blend-mode: unset;
}
section#team .container h2.main-header span{
    color: var(--font-color);
}

.card {
    max-width: 350px;
    z-index: 1;
    -webkit-box-reflect: below 0 linear-gradient(black 10%, transparent);
}
@media (max-width : 768px) {
    .card{
        -webkit-box-reflect: unset;
    }
}
section#team .container .card::before,
section#team .container .card::after{
    content: "";
    position: absolute;
    z-index: -1;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: var(--primery-color);
    pointer-events: none;
}
section#team .container .card::before{
    bottom: -30px;
    left: -25px;
    opacity: 0.3; 
    background-color: #746a6a;
}
section#team .container .card::after{
    top: -30px;
    right: -25px;
    background-color: var(--primery-color);
}
section#team .container .card .card-img{
    aspect-ratio: 1/1;
    object-fit: fill;
}
section#team .container .card :is(h3,a){
    color: var(--secondry-color);
}
section#team .container .card > span {
    color: var(--primery-color);
}
section#team .container .card > div > a {
    width: fit-content;
    transition: color var(--hover-animation-dur),text-shadow var(--hover-animation-dur);
}
section#team .container .card > div > a:hover {
    color: var(--primery-color);
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.411) ,1px 1px 3px var(--primery-color);
}
/* start contact style */
section#contact > .container > div > div form textarea {
    height: 200px;
    max-height: 300px;
    max-width: 100%;
}
section#contact > .container > div > div form :is(input,textarea){
    box-shadow: 1px 2px 10px #564a4a40;
    border: 2px solid #f1f1f1;
}
/* start FAQ section style */
section#FAQ .accordion-button {
    --bg-image-url : url("./images/plus-icon.svg");
    color: white !important;
    text-transform: capitalize;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    position: relative;
    padding-left: 4rem;
    position: relative;
    z-index: 3;
}
section#FAQ .accordion-button::after{
    background-image: var(--bg-image-url) !important;
    position: absolute;
    width: 15px;
    height: 15px;
    background-position: center;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    margin: 0;
}
section#FAQ .accordion h2{
    position: relative;
}
section#FAQ .accordion h2::before,
section#FAQ .accordion h2::after {
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
section#FAQ .accordion h2::before{
    width: 55px;
    background-color: white;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    z-index: 2;
}
section#FAQ .accordion h2::after{
    width: 100%;
    background-color: var(--primery-color);
    z-index: 1;
}