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

body {
    background-color: #d5e9ec;
    font-family: 'DM Sans', sans-serif;
    overflow-x: hidden;
    max-width: 100%;
    scroll-behavior: smooth;
}

/* -----------value---------------- */

:root {
    --bg: #f84f06;
    /* underline at nav */
    --black1: #447acc;
    /* Button before use */
    --bgspan: #06ee161f;
    /* NO USE */
    --bgbtn: #fa5800;
    /* button after hower */
    --hov: #0b033c;
    /* heading text */
    --bgdoc: #0aff5b;
    /* NO user */
    --bgdiff: #447acc;
    /* text background */

    --navfont: 1.6rem;
    --logofont: 2rem;

    --headfont: 3.75rem;
    --headfont2: 2rem;
    --pfont: 1rem;
}


/* ----------------------common------------------ */

.maxsize {
    max-width: 1200px;
}

.diff-bold {
    padding: 0 1rem;
    border-radius: 8px;
    background-color: var(--bgdiff);
    color: var(--hov);
}

.btn {
    padding: 1.125rem 2.5rem;
    text-decoration: none;
    color: white;
    background-color: var(--black1);
    border-radius: 50px;
}

/* body.popup-open {
    overflow: hidden;
} */

.popup-form {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    /* Semi-transparent background */
    border-radius: 10px;
    padding: 20px;
    z-index: 2000;
    overflow-y: auto;
    /* Enable vertical scrolling if the content exceeds the height of the popup */
}

.hidden {
    display: none;
}

/* Additional styles to remove scrollbar */
.popup-open .popup-form {
    overflow-y: auto;
}

.form-container {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    /* box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); */
    position: relative;
    backdrop-filter: blur(7px);
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 26px;
    box-shadow: 35px 35px 68px 0px rgba(157, 177, 255, 0.2), inset -8px -8px 16px 0px rgba(157, 177, 255, 0.6), inset 0px 11px 28px 0px rgb(255, 255, 255);
    transition: all 0.3s;
    cursor: pointer;
}

.form-container:hover {
    box-shadow: 35px 35px 68px 0px rgba(157, 177, 255, 0.5);
}

.form-container:active {
    transform: scale(0.95);
    border: 1px solid blue;
}

input,
textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

button[type="submit"] {
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

button[type="submit"]:hover {
    background-color: #45a049;
}

.success-message {
    display: none;
    color: green;
    text-align: center;
    margin-top: 20px;
}

.close-success-btn {
    display: none;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #f44336;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.close-success-btn:hover {
    background-color: #e53935;
}

.close-btn {
    color: #aaa;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
}

section {
    padding: 3rem 0;
}

.section {
    flex-flow: column;
    margin-bottom: 6rem;
}

.doc-box-shadow {
    border-radius: 30px;
    transform-style: preserve-3d;
    box-shadow: 0 25px 50px -10px rgb(100 44 0 / 7%);
}

/* -----------header-------------- */
header {
    height: 75px;
    padding: 16px 30px;

    width: 100%;
}

#menu-icon {
    display: none;
    font-size: 2rem;
    z-index: 1001;
    color: var(--hov);
}

.sticky-head {
    position: sticky;
    top: 0;
    background-color: #fdf8f4;
    box-shadow: 0 15px 50px -10px rgb(100 44 0 / 7%);
    z-index: 1000;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.875rem;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}

.show.full {
    position: absolute;
    display: inline-flex;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: black;
    overflow: hidden;
    z-index: 1000;
    animation: show-menu 0.5s ease-in-out both;
}

@keyframes show-menu {
    0% {
        width: 100%;
        height: 0%;
        opacity: 0;
    }

    100% {
        width: 100%;
        height: 100vh;
        opacity: 1;
    }
}

.show.full ul {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    width: 100%;
}

.show.full ul li a {
    color: white;
}

.join-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login {
    margin-right: 2rem;
}

.login a {
    text-decoration: none;
}

.signup {
    padding: .625rem 1.25rem;
    border: 2px solid rgb(12, 29, 55);
    border-radius: 50px;
}

.signup a {
    text-decoration: none;
}

/* ---------for menu list -------------- */

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

.menu ul li {
    list-style: none;
    margin: 2rem;
}

.menu ul li a {
    text-decoration: none;
    color: #0c1d37;
    font-size: 1rem;
    font-weight: 500;
}

/* -------------header:hover---------------- */

.menu ul li:hover a {
    color: var(--hov);
}

.login:hover a {
    color: var(--hov);
}

.signup:hover {
    background-color: rgb(12, 29, 55);
}

.signup:hover a {
    color: white;
    transition: 0.5s;
}

.btn:hover {
    color: white;
    background-color: var(--hov);
}


/* -----------section-hero---------------- */

.section-hero {
    padding: 7.875rem 1.875rem;
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
}

.block-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    /* padding: 1rem 0; */
    /* z-index: 100; */
}

.block-content h1 {
    font-size: var(--headfont);
    margin-bottom: 2rem;
    text-align: center;
}

.block-content p {
    font-size: var(--pfont);
    text-align: center;
    max-width: 820px;
    letter-spacing: 2px;
    margin-bottom: 2rem;
}

/* ----------scroolling animation view------------------ */

.block-hero-img {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.block-hero-img div {
    position: absolute;
    transform-style: preserve-3d;
}

#doc2 {
    right: 0px;
    top: 100px;
    z-index: 100;

}

#doc1 {
    z-index: 95;
}

/* -------circle-1----------- */
#circle1 {
    width: 12%;
    top: 40px;
    left: 30px;
}

#circle1 img {
    width: 100%;
}

/* -------circle-2------------- */

#circle2 {
    width: 8%;
    top: -50px;
    left: 0;
}

#circle2 img {
    width: 100%;
}

/* -------circle-3------------- */

#circle3 {
    width: 6%;
    top: -80px;
    left: 100px;
}

#circle3 img {
    width: 100%;
}

/* -------circle-4------------- */

#circle4 {
    width: 25%;
    top: -50px;
    right: 30px;
}

#circle4 img {
    width: 100%;
}

/* -------circle-5------------- */

#circle5 {
    width: 12%;
    top: -100px;
    right: 30px;
}

#circle5 img {
    width: 100%;
}

/* -------circle-6------------- */

#circle6 {
    width: 8%;
    top: -150px;
    right: 150px;
}

#circle6 img {
    width: 100%;
}

/* -------circle-7------------- */

#circle7 {
    width: 20%;
    bottom: -150px;
    right: 150px;
    z-index: 96;
}

#circle7 img {
    width: 100%;
}

/* -------circle-8------------- */

#circle8 {
    width: 8%;
    bottom: -20px;
    right: 350px;
    z-index: 98;
}

#circle8 img {
    width: 100%;
}

/* -------circle-9------------- */

#circle9 {
    width: 7%;
    bottom: -90px;
    right: 150px;
    z-index: 96;
}

#circle9 img {
    width: 100%;
}

/* -----------features page------------------ */

.main-features-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1.875rem;
}

.feature-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
}

.featues-icon {
    background-color: #fdfdfd;
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 25px 50px -10px rgb(100 44 0 / 7%);
    position: relative;
}

.featues-icon i {
    font-size: 2.5rem;
    color: var(--hov);

}

.feat-head h2 {
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: .75rem;
}

.feat-p p {
    font-size: var(--pfont);
    text-align: center;
    line-height: 2rem;
    font-weight: 200;
}


/* ------------------section-full--------------------- */
/* .section-full{
    padding: 5rem 0;
} */
.section-full {
    overflow: hidden;
}

.section-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    grid-template-rows: auto;
    min-height: 100vh;
    align-items: center;
}

.section-full-img {
    position: relative;
}

.section-content {
    z-index: 900;
}

.section-content h1 {
    font-size: var(--headfont);
    margin-bottom: 2rem;
}

.section-content p {
    font-size: var(--pfont);
    line-height: 2rem;
    margin-bottom: 2rem;
}

.section-content .btn {
    width: fit-content;
}

.section-animate-grid {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 2.2fr;
    grid-template-rows: auto;
    grid-row-gap: 3vw;
    grid-column-gap: 2vw;
    position: absolute;
    top: -400px;
    left: -100px;
    transform-style: preserve-3d;
    transition: 4s;
    overflow: auto;
}

.docs3-1 {
    grid-row: 1/ span 2;
}

.section-full-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.section-full-circle div {
    position: absolute;
}

/* ------------circle-10--------------- */
#circle10 {
    width: 14%;
    top: 90%;
    left: 60%;
}

#circle10 img {
    width: 100%;
}

/* ------------circle-11--------------- */
#circle11 {
    width: 14%;
    bottom: 40%;
    left: 90%;
}

#circle11 img {
    width: 100%;
}

/* ------------circle-12--------------- */
#circle12 {
    width: 14%;
    top: 50%;
    left: 40%;
}

#circle12 img {
    width: 100%;
}



/* ------------------work-section------------ */
.work-section {
    padding: 5rem 0;
}

.work-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    align-items: center;
    grid-column-gap: 2rem;
    margin-bottom: 1.5rem;
}

.work-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
}

.work-content h1 {
    font-size: var(--headfont);
    margin-bottom: 3rem;
}

.work-not {
    position: absolute;
    top: -5px;
    right: -5px;
    padding: 0.25rem .75rem;
    background-color: var(--hov);
    border-radius: 50%;
}

/* -------------section-idea------------ */

.section-idea {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 3rem;
    align-items: center;
}

.section-content ul li {
    list-style: none;
    font-size: var(--pfont);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.section-content ul li i {
    color: var(--hov);
    margin-right: 2rem;
    padding: 1rem;
    background-color: #fdfdfd;
    border-radius: 50%;
}

/* ------------section-review-------------- */

.section-review {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 2rem;
}

.review {
    background-color: var(--bgdiff);
    border-radius: 24px;
    padding: 30px 40px 35px;
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    margin-bottom: 2rem;
}

.review p {
    font-size: var(--pfont);
    line-height: 2rem;
    margin-bottom: 2rem;
}

.lower-review-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-log {
    padding: 1rem;
    border-radius: 50%;
    background-color: #fdfdfd;
    margin-right: 1rem;
}

.review-name {
    font-size: 1rem;
    font-weight: 700;
}

/* ---------footer------------- */


.section-footer {
    width: 100%;
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    padding: 6rem 0;
    border-top: 5px solid black;
}

.office .logo {
    margin-bottom: 2rem;
}


.footerlinks h4 {
    color: #0c1d37;
    font-weight: 400;
    margin-bottom: 2rem;
    opacity: .7;
}

.footerlinks li {
    list-style: none;
    margin-bottom: 1rem;
}

.footerlinks li a {
    text-decoration: none;
    color: var(--black1);
}

.footerlinks li:hover a {
    color: var(--hov);
}

z
/* ----------------animation--------------- */


.animate-circle.slide-top.rotategrid {
    animation: rotategrid 4s ease-in-out both;
    -webkit-animation: rotategrid 4s ease-in-out both;

}

@keyframes rotategrid {
    0% {
        -webkit-transform: rotate3d(0, 0, 0, 0) translate3d(0, 0, 0);
        transform: rotate3d(0, 0, 0, 0) translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: rotate3d(1, 1, 1, -20deg) translate3d(20px, 40px, 50px);
        transform: rotate3d(1, 1, 1, -20deg) translate3d(20px, 40px, 50px);
    }
}

@-webkit-keyframes fade-in-up {
    0% {
        -webkit-transform: rotate3d(0, 0, 0, 0) translate3d(0, 0, 0);
        transform: rotate3d(0, 0, 0, 0) translate3d(0, 0, 0);
    }

    100% {
        -webkit-transform: rotate3d(1, 1, 1, -20deg) translate3d(20px, 40px, 50px);
        transform: rotate3d(1, 1, 1, -20deg) translate3d(20px, 40px, 50px);
    }
}



.scrolled.fade-in-up {
    animation: fade-in-bottom 2s ease-in-out both;
    -webkit-animation: fade-in-bottom 2s ease-in-out both;
}

.js-scroll {
    opacity: 0;
}

.js-scroll.scrolled {
    opacity: 1;
}

@keyframes fade-in-up {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        opacity: 0;
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@-webkit-keyframes fade-in-up {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}


/* -------------circles-animation-slide-top--------------- */
.animate-circle.slide-top {
    -webkit-animation: slide-top 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-top 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-top {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100px) translateX(100px);
        transform: translateY(-100px);
    }
}

@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-100px) translateX(100px);
        transform: translateY(-100px);
    }
}





/* -------------circles-animation-slide-right-------------- */

.animate-circle.slide-right {
    -webkit-animation: slide-right 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-right 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}

@keyframes slide-right {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}

/* -------------circles-animation-slide-left-------------- */

.animate-circle.slide-back {
    -webkit-animation: slide-back 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-back 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-back {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }

    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}

@keyframes slide-back {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }

    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}

/* -------------circles-animation-slide-back--------------- */

.animate-circle.slide-left {
    -webkit-animation: slide-left 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-left 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-left {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}

@keyframes slide-left {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }

    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}


/* ----------animate-circle--------------- */

.circle {
    transition: 6s;
}





/* -------------------- for tablet------------------- */

@media screen and (max-width: 1300px) {
    .section-grid {
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-columns: 1fr;

    }

    .section-grid .section-content {
        justify-self: center;
        text-align: center;
    }

    .section-idea .idea-doc {
        width: 100%;

    }

    .section-idea .idea-doc img {
        width: 100%;

    }
}

@media screen and (max-width: 1000px) {
    .menu,
    .join-btns {
        display: none;
    }

    #menu-icon {
        display: inline-block;
    }

    .cross {
        display: none;
    }

    #menu-icon.hide .bars {
        display: none;
    }

    #menu-icon.hide .cross {
        display: block;
    }

    .navbar {
        padding: 16px 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .menu.show {
        display: block;
    }

    .menu ul {
        padding: 0;
        margin: 0;
    }

    .menu ul li {
        list-style: none;
    }

    .join-btns {
        display: block;
    }

    .join-btns .signup {
        display: inline-block;
        margin-right: 10px;
    }

    .menu li.join-btns {
        display: block;
    }
}

 @media screen and (max-width: 1000px) {
    :root {
        --navfont: 1.6rem;
        --logofont: 2rem;

        --headfont: 2rem;
        --headfont2: 1.5rem;
        --pfont: 1rem;
    }

    .menu,
    .join-btns {
        display: none;

    }

    #menu-icon {
        display: inline-block;
    }

    .cross {
        display: none;
    }

    #menu-icon.hide .bars {
        display: none;
    }

    #menu-icon.hide .cross {
        display: block;
    }

    .navbar {
        padding: 16px 50px;
    }

    .block-content {
        max-width: 500px;
    }

    .section-hero {
        padding: 2rem 1.875rem 6rem 1.875rem;
    }

    .block-hero-img {
        width: 60%;
    }

    .block-hero-img img {
        width: 100%;
    }

    #doc2 img {
        width: 60%;
    }

    .section-animate-grid {
        width: 60%;
        justify-self: center;
        left: 25%;
    }

    .section-animate-grid img {
        width: 100%;
    }

    /* .section-full-circle{
        top: 50%;
        left: 50%;
    } */
    .section-full-circle div {
        width: 40%;
    }

    #circle10,
    #circle11,
    #circle12 {
        width: 10%;
    }

    .docs3-2 {
        width: 50%;
    }

    .section-review {
        grid-template-columns: 1fr 1fr;
    }

    .review-content {
        grid-column: 1/span 2;
        display: flex;
        align-items: center;
        flex-flow: column nowrap;
        justify-content: center;
        margin-bottom: 4rem;
    }

    .review-content h1,
    .review-content p,
    .review-content a {
        text-align: center;
    }
} 
@media screen and (max-width: 1000px) {
    .main-features-box {
        grid-template-columns: auto;
    }

    .work-grid {
        grid-template-columns: auto;
    }

    .section-idea {
        grid-template-columns: auto;
    }

    .idea-doc {
        order: 2;
    }

    .section-footer {
        grid-template-columns: auto;
        justify-content: center;
    }

    .section-footer>div {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column nowrap;
        margin: 2rem 0;
    }
}

@media screen and (max-width: 1000px) {
    :root {
        --navfont: 1rem;
        --logofont: 1.5rem;

        --headfont: 1.5rem;
        --headfont2: 1rem;
        --pfont: .75rem;
    }

    .reviewcontain1,
    .reviewcontain2 {
        grid-column: 1/-1;
    }
}



#navbar__list {
    height: 40px;
    background-color: #55443D;
    display: block;
    align-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1;
    margin: 0 auto;

}

#navbar__list ul {
    padding: 0;
    list-style: none;
    position: relative;
    display: table;
    margin: 0 auto;
}

#navbar__list li {
    display: table-cell;
}

#navbar__list li a {
    padding: 10px 20px;
    display: block;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

#navbar__list li a:hover {
    color: #dc5c26;
}

#navbar__list li a .active {
    color: #F38A8A;
    border-bottom: 3px solid #F38A8A;
}

.active {
    color: #F38A8A;
    border-bottom: 3px solid #00ff40;
}

.card {
    width: fit-content;
    height: fit-content;
    background-color: rgb(238, 238, 238);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 30px;
    gap: 20px;
    margin-left: 30px;
    margin-top: 40px;
    /* box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055); */
}

/* for all social containers*/
.socialContainer {
    width: 52px;
    height: 52px;
    background-color: rgb(44, 44, 44);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition-duration: .3s;
}

/* instagram*/
.containerOne:hover {
    background-color: #d62976;
    transition-duration: .3s;
}

/* twitter*/
.containerTwo:hover {
    background-color: #00acee;
    transition-duration: .3s;
}

/* linkdin*/
.containerThree:hover {
    background-color: #0072b1;
    transition-duration: .3s;
}

/* Whatsapp*/
.containerFour:hover {
    background-color: #128C7E;
    transition-duration: .3s;
}

.socialContainer:active {
    transform: scale(0.9);
    transition-duration: .3s;
}

.socialSvg {
    width: 17px;
}

.socialSvg path {
    fill: rgb(255, 255, 255);
}

.socialContainer:hover .socialSvg {
    animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.card2 {
    width: 210px;
    height: 130px;
    border-radius: 4px;
    /* background: #212121; */
    display: flex;
    gap: 5px;
    padding: .4em;
    /* margin-right: 300px; */
    margin-top: 40px;
}

.card2 p {
    height: 100%;
    flex: 1;
    overflow: hidden;
    cursor: pointer;
    border-radius: 2px;
    transition: all .5s;
    /* background: #212121; */
    border: 1px solid #ff5a91;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card2 p:hover {
    flex: 4;
}

.card2 p span {
    min-width: 14em;
    padding: .5em;
    text-align: center;
    transform: rotate(-90deg);
    transition: all .5s;
    text-transform: uppercase;
    color: #ff568e;
    letter-spacing: .1em;
}

.card2 p:hover span {
    transform: rotate(0);
}

/* map */

@media only screen and (max-width: 600px) {
    /* Styles for screens up to 600px wide */
}
.map-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Aspect ratio 16:9 */
    height: 0;
    overflow: hidden;
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Loader */
.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

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

.loader-block {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 2px;
    background-color: #0b033c;
    box-shadow: 0 0 20px #447acc;
    animation: loader_562 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.loader-block:nth-child(1) {
    animation-delay: 0.1s;
}

.loader-block:nth-child(2) {
    animation-delay: 0.2s;
}

.loader-block:nth-child(3) {
    animation-delay: 0.3s;
}

.loader-block:nth-child(4) {
    animation-delay: 0.4s;
}

.loader-block:nth-child(5) {
    animation-delay: 0.5s;
}

.loader-block:nth-child(6) {
    animation-delay: 0.6s;
}

.loader-block:nth-child(7) {
    animation-delay: 0.7s;
}

.loader-block:nth-child(8) {
    animation-delay: 0.8s;
}

.loaderr {
    max-width: 200px; /* Adjust width as needed */
    max-height: 200px; /* Adjust height as needed */
    position: relative;
}

@keyframes loader_562 {
    0% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }

    20% {
        transform: scale(1, 2.5);
        box-shadow: 0 0 50px rgba(255, 255, 255, 0.7);
    }

    40% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
}