* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background: rgb(22, 21, 21);
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4 {
    color: white;
}

p {
    color: #eadfd5;
}

.socio {
    position: fixed;
    top: 30%;
    z-index: 1000;
    text-align: center;
    right: 0;
    height: auto;
    display: inline-block;
}

.socio ul li {
    width: 100%;
    list-style-type: none;
    padding: 20px;
    position: relative;
    transition: 0.6s all ease;
    -webkit-transition: 0.6s all ease;
    -moz-transition: 0.6s all ease;
    -o-transition: 0.6s all ease;
}

.socio ul li:hover {
    transform: translateX(-50px);
    width: 170%;
}

.socio ul li i {
    font-size: 30px;
    color: white;
}

.socio li:nth-child(1) {
    background: #3b5998;
}

.socio li:nth-child(2) {
    background: #00ff62;
}

.socio li:nth-child(3) {
    background: #096f8b;
}

.nav-bar {
    z-index: 5;
    position: fixed;
    width: 100%;
    text-shadow: 0 0 15px #1111;
    padding: 1.3rem;
    background: transparent;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 0 15px #111111;
    transition: 0.7s all ease;
}

.nav-bar2 {
    background: rgb(42, 202, 141);
}

.logo-container {
    margin: 0 5rem;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.logo {
    filter: drop-shadow(0 0 15px #1111);
    margin: 0 10px;
    width: 30px;
    height: 30px;
}

.nav-links {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style-type: none;
}

.nav-link {
    color: #0f0c29;
    text-decoration: none;
    font-size: 1.5rem;
    padding: 1.5rem;
    transition: .5s all ease;
}

.nav-link:hover {
    background: #0f0c29;
    color: rgb(215, 215, 245);
}

.hamburger {
    display: none;
}

.line1,
.line2,
.line3 {
    height: 3px;
    width: 28px;
    background: rgb(255, 0, 0);
    margin: 5px 0;
}

video {
    z-index: -1;
    width: 100%;
    height: 100%;
}

.our-work {
    background-image: linear-gradient( hsla(140, 85%, 62%, 0.267), rgba(37, 192, 102, 0.397)), url(../img/bg1.jpg);
    padding: 1.5rem;
    background-attachment: fixed;
    background-size: cover;
}

.container {
    width: 100%;
}

.category {
    color: #0f0c29;
}

.sec-title {
    text-align: center;
}

.title {
    font-size: 5rem;
    font-weight: 400;
    background: linear-gradient(90deg, #ad5389 10%, #3c1053 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sub-heading {
    color: #eadfd5c2;
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 0.25em;
    text-shadow: 0 0 15px #eadfd5;
}

.pictures {
    width: 80%;
    margin: 0 auto;
    padding: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
}

.videos {
    width: 80%;
    margin: 0 auto;
    padding: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
}

.videos img {
    width: 100%;
    height: 300px;
}

.pictures img {
    width: 100%;
    height: 300px;
}

.cards {
    border: 2px solid #2aca8d;
}

.description {
    padding: 15px;
    background: #0f0c29;
}

.description2 {
    padding: 15px;
    background: #1aad75;
}

.services {
    background: linear-gradient(45deg, #11998e 0%, #38ef7d 100%);
}

.sec-title2 {
    margin-left: 5rem;
    text-align: left;
}

.s-title {
    font-size: 5rem;
    font-weight: 400;
    background: linear-gradient(90deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.values {
    width: 80%;
    margin: auto;
    padding: 3rem 0;
}

.v-card {
    margin: 15px 0;
    background: transparent;
    text-align: center;
    padding: 15px;
    width: 100%;
    border: 2px solid #ffecd2;
    transition: 0.5s all ease-in-out;
}

.v-card:hover {
    background: #0f0c29;
    padding: 5px;
}

.v-card h3,
.v-card p,
.v-card i {
    margin: 5px auto;
    width: 50%;
    text-align: justify;
}

.v-card h3 {
    font-size: 3rem;
    font-weight: 300;
}

.v-card p {
    color: #eadfd580;
    font-size: 1.5rem;
    font-weight: 300;
}

.v-card i {
    color: #f0c6c8;
    font-size: 4rem;
    font-weight: 300;
}

.packages {
    padding: 1.5rem 0;
}

.p-title {
    font-size: 5rem;
    font-weight: 400;
    background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sec-title3 {
    padding: 1.5rem 0;
    margin-right: 5rem;
    text-align: right;
}

.p-cards {
    width: 80%;
    margin: auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    padding: 3rem 0;
}

.p-card {
    line-height: 500px;
    padding: 1.3rem;
    height: 500px;
    width: 100%;
    border: 2px solid #2aca8d;
    overflow: hidden;
    transition: 0.8s all ease;
}

.p-card:hover {
    line-height: 55px;
    box-shadow: 15px 15px 0px #000;
}

.p-card h2 {
    padding: 5px;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 400;
}

.p-card h3 {
    padding: 5px;
    font-size: 1.5rem;
    font-weight: 400;
}

.p-card p {
    padding: 5px;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.15em;
}

.p-card span {
    font-size: 3rem;
    color: #e599bc;
    text-shadow: 0 0 5px #fff;
}

.p-link {
    text-decoration: none;
}


/* card backgroud */

.p-card:nth-child(1) {
    background: linear-gradient(45deg, #800080 0%, #ffc0cb 100%);
}

.p-card:nth-child(2) {
    background: linear-gradient(45deg, #3c3b3f 0%, #605c3c 100%);
}

.p-card:nth-child(3) {
    background: linear-gradient(45deg, #23074d 0%, #cc5333 100%);
}

.p-card:nth-child(4) {
    background: linear-gradient(45deg, #355c7d 0%, #6c5b7b 50%, #c06c84 100%);
}

.team {
    background-image: linear-gradient( #27b37878, rgba(26, 95, 95, 0.541)), url(../img/bg2.jpg);
    padding: 1.5rem;
    background-attachment: fixed;
    background-size: cover;
}

.slider-wrapper {
    background: #0f0c295e;
    padding: 3rem;
    margin: 0 auto;
}

.team img {
    width: 100%;
    height: 80%;
    margin: 0 auto;
    border: 5px solid #0f0c29;
}

.team .item {
    background: #000;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    height: auto;
    padding: 1.5rem;
    border: 5px solid #140e47;
    transition: 0.7s all ease;
}

.team .item:hover {
    background: #140e47;
    padding: 0;
    border: 5px solid #000000;
}

.team .item:hover img {
    border: none;
}

.t-name {
    padding: 5px;
    font-size: 2rem;
    font-weight: 400;
}

.designation {
    color: #2aca8d;
    font-style: italic;
    font-size: 1.2rem;
    font-weight: 200;
    padding: 5px;
}

.fab {
    font-size: 2rem;
    padding: 5px 15px;
}

.social-links {
    padding: 10px;
}

.social-links a {
    text-decoration: none;
    color: white;
    transition: 0.5s all ease;
}

.social-links a:hover {
    color: #2aca8d;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
    height: 3px;
    width: 100px;
    font-size: 2rem;
    padding: 1.5rem;
    margin-bottom: 10px;
    color: white;
}

.owl-theme .owl-dots .owl-dot span {
    background: #000;
    border-radius: 0px;
    width: 25px;
    height: 4px;
}

.reviews {
    padding: 20px;
}

.reviews .container {
    width: 80%;
    height: 90%;
    margin: auto;
}

.review {
    margin: 20px 0;
    padding: 1.5rem;
}

.grid div {
    background: #fbfbfb;
    padding: 1.3rem;
    border: 2px solid #11998e;
    transition: 0.5s all ease;
}

.grid blockquote {
    color: #4e4e4e;
}

.grid img {
    width: 400px;
    height: auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.span-col-2 {
    grid-column: span 2 / auto;
}

.span-col-3 {
    grid-column: span 3 / auto;
}

.span-row-2 {
    grid-row: span 2 / auto;
}

.seeall {
    background: #2aca8d;
    color: white;
    padding: 20px 40px;
    margin: 2rem 0;
    display: inline-block;
    border-radius: 90px;
    text-decoration: none;
    font-size: 1.2rem;
    transition: 0.5s all ease;
    animation: anim 3s infinite;
}

.seeall:hover {
    border: 2px solid #2aca8d;
    background: #0f0c29;
    color: #38eca7;
}

.btnn {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes anim {
    from {
        box-shadow: 0 0 5px rgb(42, 202, 141);
    }
    to {
        box-shadow: 0 0 20px #00c2b2;
    }
}

.about {
    background: white;
    color: black;
}

.about .sub-heading {
    color: #0f0c29;
}

.abt {
    width: 50%;
    margin: 0 auto;
    padding: 1.5rem;
}

.abt p {
    font-size: 1.5rem;
    text-align: justify;
    color: rgb(8, 7, 7);
}

footer {
    padding: 10px;
    text-align: right;
    color: #00c2b2;
}

footer div {
    margin: 0 3rem;
}

[data-scroll] {
    transition: all 2s;
}

[data-scroll="in"] {
    opacity: 1;
    transform: translateX(0);
}

[data-scroll="out"] {
    opacity: 0;
    transform: translateX(-200px);
}