@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

@font-face {
    font-family: 'Harlow Solid';
    src: url(../fonts/Harlow-Solid.ttf);
}

:root {
    --primary-color: 125, 125, 255;
    --color-white: 255, 255, 255;
    --color-black: 0, 0, 0;
    --primary-color-dark: 50, 50, 102;

    --border-radius: 3.5rem;
    --border: 0.25rem;
    --padding: 3rem;
    --max-width: 40rem;
    /* --max-width: 67.5rem; */
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.25s cubic-bezier(.52, -0.4, .55, 1.33);
    -webkit-tap-highlight-color: transparent !important;
    user-select: none;
}

input,
textarea,
button,
select,
a {
    outline: none;
    background: none;
    border: none;
    text-decoration: none;
    color: rgb(var(--primary-color-dark));
}

html {
    font-size: 1rem;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}

body {
    background-color: rgb(var(--color-white));
    max-width: var(--max-width);
    overflow-x: hidden !important;
    font-family: "Mulish", sans-serif;
}

img {
    width: 1.6rem;
}

.logo-cont {
    --logo-width: 65rem;
    --logo-height: 25rem;
    position: absolute;
    width: 100%;
    height: var(--logo-width);
    top: 0;
    left: 0;
    max-width: var(--max-width);
    overflow-x: hidden;
}

@keyframes tt {
    0% {
        transform: translate(150%, 00%);
    }
    100% {
        transform: translate(0, 0);
    }
}

.logo {
    position: absolute;
    top: calc(var(--logo-height) / 4);
    left: calc(var(--logo-width) / 3 * -1);
    z-index: 10;
    width: var(--logo-width);
    height: var(--logo-height);
    border: var(--border) solid rgba(var(--primary-color), 50%);
    border-bottom-right-radius: calc(var(--border-radius) * 2.5);
    rotate: -45deg;
    background-color: rgba(var(--color-white));
    box-shadow: inset 5px 5px 10px 0 rgba(0, 0, 0, 0.10),
        0 0 0 10px rgb(var(--color-white));
        overflow: hidden;
        display: flex;
    justify-content: center;
    align-items: center;
    animation: tt 0.5s cubic-bezier(.52, -0.4, .55, 1.33) forwards;
}

.logo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--primary-color), 0.1);
    width: 100%;
    height: 100%;
}

.logo .logo-container {
    transform: translate(30%, 0);
    width: calc(var(--logo-height) * 0.525);
    aspect-ratio: 1;
    border: var(--border) solid rgba(var(--primary-color), 0.5);
    border-radius: calc(var(--border-radius) * 1.15);
    background-color: rgba(var(--color-white));
    box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.10);
}

.logo .logo-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: rotate(45deg) scale(1.1);
}

.logo .logo-shadow {
    display: block !important;
    position: absolute;
    top: 5.4rem;
    left: 20.6rem;
    z-index: 100;
    width: calc(var(--logo-height) * 0.25);
    transform: translate(-00%, -00%) rotate(45deg);
    filter: blur(8px);
    opacity: 0.5;
    animation: shek .8s cubic-bezier(.02, 1.02, 1, -1.03) infinite;
}

@keyframes shek {
    0% {
        transform: translate(0, -0.8rem) rotate(43deg) scale(1.25);
    }
}

.logo .logo-1 {
    position: absolute;
    top: 12rem;
    left: 48.8rem;
    z-index: 100;
    width: calc(var(--logo-height) * 0.175);
    transform: translate(-00%, -00%) rotate(30deg);
    filter: blur(5px);
}

.logo .logo-2 {
    position: absolute;
    top: 15.6rem;
    left: 15.8rem;
    z-index: 100;
    width: calc(var(--logo-height) * 0.175);
    transform: translate(-00%, -00%) rotate(55deg);
    filter: blur(5px);
}

.main-menu {
    --T-height: 52.5rem;
    position: absolute;
    height: var(--T-height);
    width: 100%;
    top: 0;
    display: flex;
    align-items: end;
    padding: var(--padding);
    max-width: var(--max-width);
    margin: 0 auto;
    z-index: -1;
}

.menu {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: calc(var(--T-height) - (var(--padding) * 2) * 1);
    display: flex;
    justify-content: end;
    align-items: start;
    padding: calc(var(--padding) * 0.75);
}

.main-menu .menu menu {
    width: 2rem;
    height: var(--border);
    background: rgb(var(--color-black));
    overflow: hidden;
}

.main-menu .wrapper {
    position: relative;
    padding: calc(var(--padding) * 0.15);
    width: 2rem;
    height: 2rem;
    top: 0;
}

/* -----------------testing menu------------ */
.main-menu-t * {
    transition: all 1s cubic-bezier(.9, -0.01, .54, 1.22);
}

.main-menu-t {
    --p: 0.95rem;
    top: 50px;
    left: 150%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: calc(2.5rem + (var(--p)));
    height: calc(2.5rem + (var(--p) * 0.75));
    padding: var(--p) calc(var(--p) * 0.75);
    border-radius: 17.5px;
    backdrop-filter: blur(2px);
    z-index: 100;
    transition: all 1s cubic-bezier(.9, -0.01, .54, 1.22);
    cursor: pointer;
}

.br_con-t {
    padding: var(--p) calc(var(--p) * 0.75) 0;
    display: flex;
    align-items: start;
    justify-content: right;
    height: 50%;
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
}

.br_con-t:last-child {
    padding: 0 calc(var(--p) * 0.75) var(--p);
    align-items: end;
    justify-content: left;
    top: unset;
    left: unset;
    right: 0;
    bottom: 0;
}

.bar-t {
    background-color: rgb(var(--color-black));
    width: 62.5%;
    height: var(--border);
    display: block;
    scale: 100%;
    border-radius: 20px;
}


.bg-t {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 35%;
}


.menu-t {
    overflow: hidden;
    height: var(--border);
    width: 100%;
    max-width: calc(var(--max-width) - (var(--padding) * 2));
    background-color: rgba(var(--color-black), 70%);
    z-index: 1;
    border-radius: var(--border-radius);
}

.main-menu-t:hover .bar-t {
    width: 100%;
}

.active .bg-t {
    opacity: 25%;
}

.active .br_con-t {
    padding: 0 0;
}

.active .br_con-t:last-child .bar-t {
    transform-origin: top center;
    background-color: rgb(var(--primary-color));
}

.active .bar-t {
    transform-origin: bottom center;
    width: 100%;
    height: 100%;
    rotate: -45deg;
    scale: 400%;
}

.active.main-menu-t {
    height: 100dvh;
    width: 100%;
    top: 0px !important;
    left: 0px !important;
    backdrop-filter: blur(5px);
}

.active .menu-t {
    height: calc(100% - (var(--padding) * 1.5));
    width: calc(100% - (var(--padding) * 1.5));
    background-color: rgba(var(--color-white), 95%);
    box-shadow: 5px 5px 10px rgb(var(--color-white), 10%);
    max-width: calc(var(--max-width) - (var(--padding) * 2));
}

.active menu {
    background: unset;
}

.active .menu-t {
    height: 30rem;
}
.menu-t menu {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--padding) * 0.75);
    gap: calc(var(--padding) * 1.5);
    flex-direction: column;
}

/* ================================ */





.container {
    margin: var(--padding) var(--padding) 0;
    width: calc(100% - (var(--padding) * 2));
    border: var(--border) solid rgba(var(--primary-color), 50%);
    border-radius: var(--border-radius);
    text-align: right;
}


.hero-wrepper {
    --T-height: 52.5rem;
    width: 100%;
}

.hero-height {
    width: 100%;
    height: calc(var(--T-height) - 75vw);
    /* min-height: calc(var(--padding) * 2.25); */
    min-height: calc(var(--padding) * 7.5);
    opacity: 0.5;
}

.hero-wrepper .hero {
    position: relative;
    text-align: right;
}


.hero-wrepper .hero h3 {
    color: rgba(var(--color-black), 75%);
    font-weight: 300;
    font-size: 1rem;
    padding: var(--padding) calc(var(--padding) * 0.75) 0;
}

.hero-wrepper .hero hr {
    width: 10rem;
    height: calc(var(--border) * 0.5);
    margin: calc(var(--padding) * 0.5) 0 calc(var(--padding) * 0.5) auto;
    background: rgba(var(--primary-color), 50%);
    border: 0;
}

.hero-wrepper .hero h1 {
    color: rgb(var(--primary-color-dark));
    font-family: 'Harlow Solid';
    font-weight: lighter;
    font-size: 3rem;
    padding: 0 calc(var(--padding) * 0.75) var(--padding);
}

.hero-wrepper .p_chatBtn {
    display: flex;
    align-items: end;
    flex-direction: column;
}

.hero-wrepper .p_chatBtn h2 {
    width: 100%;
    color: rgba(var(--color-black), 75%);
    font-weight: 400;
    font-size: 1.25rem;
    padding-right: calc(var(--padding) * 0.75);
}

.hero-wrepper .p_chatBtn p::before {
    content: "";
    width: 10%;
    aspect-ratio: 1 / 1;
    float: left;
    shape-outside: polygon(0 0, 0% 100%, 100% 0);
}

.hero-wrepper .p_chatBtn p {
    width: 100%;
    padding: calc(var(--padding) * 0.75);
    padding-bottom: calc(var(--padding) * 1);
    align-self: flex-end;
    font-weight: 300;
}





.hero-btn::before {
    position: absolute;
    content: "";
    background-color: rgb(var(--primary-color-dark));
    width: 100%;
    aspect-ratio: 1 / 1;
    z-index: -1;
    rotate: 45deg;
    transform: translate(30%);
}

.hero-btn {
    display: flex;
    width: fit-content;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: rgba(var(--color-white));
    position: relative;
    padding: calc(var(--padding) * 0.5) calc(var(--padding) * 2.75);
    padding-left: calc(var(--padding) * 1.75);
    font-weight: 600;
}

.hero-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    height: 100%;
    aspect-ratio: 1 / 1;
    right: 0;
    color: rgb(var(--primary-color-dark));
    font-size: large;
}

.hero-btn span::before {
    content: "";
    position: absolute;
    width: 300%;
    aspect-ratio: 3 / 1;
    z-index: -1;
    bottom: 0;
    rotate: -45deg;
    background: rgb(var(--color-white));
    transform-origin: center center;
    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.hero-btn:hover span:before {
    background: rgb(var(--color-white), 80%);
}










section {
    padding-top: calc(var(--padding) * 3);
}

section h2 {
    font-size: 2rem;
    color: rgba(var(--primary-color-dark), 80%);
    margin-right: calc(var(--padding) * 0.75);
    text-transform: uppercase;
}

section p {
    margin: calc(var(--padding) * 0.25) calc(var(--padding) * 0.75) 0;
    font-size: 1rem;
    color: rgba(var(--color-black), 75%);
}

section .content {
    display: flex;
    gap: calc(var(--padding) * 0.5);
    padding: calc(var(--padding) * 0.75) 0;
    flex-direction: column;
}


.card-wrapper {
    --w: 80%;
    width: 100%;
    aspect-ratio: var(--aspect-ratio);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.card-wrapper::before {
    content: "";
    position: absolute;
    width: 190%;
    aspect-ratio: 2 / 1.5;
    background: rgba(var(--primary-color), 05%);
    transform-origin: center center;
    rotate: -45deg;
}

.card-wrapper .card {
    box-sizing: content-box;
    position: absolute;
    border-radius: 0 58px;
    width: var(--w);
    height: var(--w);
    background: var(--background-image) center / cover no-repeat;
    background-size: 100%;
    -webkit-mask: url('../images/top-left.svg') top -0.5px left -0.5px / 40% no-repeat,
        url('../images/bottom-right.svg') bottom -0.5px right -0.5px / 40% no-repeat,
        linear-gradient(#000000 0 0);
    mask-composite: exclude;
}

.card-wrapper .border {
    box-sizing: content-box;
    position: absolute;
    background: rgb(var(--color-white));
    width: var(--w);
    height: var(--w);
    border-radius: 0 61px;
    scale: 1.01;
    -webkit-mask: url('../images/top-left.svg') top -0.5px left -0.5px / 40% no-repeat,
        url('../images/bottom-right.svg') bottom -0.5px right -0.5px / 40% no-repeat,
        linear-gradient(#000000 0 0);
    mask-composite: exclude;
}


.card-wrapper .shadow {
    position: absolute;
    background: rgba(var(--color-black), 0.5);
    width: var(--w);
    height: var(--w);
    transform: scale(1.01) translate(5px, 5px);
    border-radius: 350px 61px;
    filter: blur(10px);
    opacity: 10%;
}


.card-wrapper .card h2,
.spl-wrapper h4,
.gear-wrapper h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 150%;
    border-top: calc(var(--border)*.5) solid rgba(var(--color-white), 80%);
    border-bottom: calc(var(--border)*.5) solid rgba(var(--color-white), 80%);
    box-shadow: 5px 5px 10px rgba(var(--color-black), 10%);
    backdrop-filter: blur(2px);
    padding: calc(var(--padding) * 0.30);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: rgb(var(--color-black));
    transform-origin: top center;
    text-transform: unset;
    rotate: -45deg;
    top: 17.5%;
    left: -50%;
}

.card-wrapper .card h2::before,
.spl-wrapper h4::before,
.gear-wrapper h4::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    filter: blur(1.5px);
    font-size: medium;
    background: rgb(var(--color-white), 90%);
    z-index: -1;
}









#testimonial {
    position: relative;
}

#testimonial .bg {
    width: 60%;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    aspect-ratio: 1 / 2;
    position: absolute;
    background: url("../images/Logo.png") left / 195% no-repeat;
    filter: blur(10px);
    opacity: 0.25;
    z-index: -1;
}



.tst-wrapper {
    position: relative;
    text-align: left;
    width: 100;
    padding: 0 calc(var(--padding) * 0.75) calc(var(--padding) * 1) calc(var(--padding) * 0.50);
}

.tst-wrapper .review {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--padding) * 0.75);
    margin-left: calc(var(--padding) * 0.25);
    flex-direction: column;
    overflow: hidden;
}

.tst-wrapper .review::before {
    position: absolute;
    background: rgb(var(--color-black), 0.05);
    opacity: 0.5;
    content: "0";
    width: 112.5%;
    aspect-ratio: 1 / 1;
    clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 100%, 0 100%, 0 50%);
}

.tst-wrapper .review p {
    width: 100%;
    padding: 0 calc(var(--padding) * 0.75);
    color: rgb(var(--color-black));
}

.tst-wrapper .review span {
    text-align: right;
    padding: calc(var(--padding) * 0.25) calc(var(--padding) * 0.75) 0 0;
    width: 100%;
    display: inline-block;
    opacity: 50%;
    text-transform: lowercase;
}

.tst-wrapper .person-detail {
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0 calc(var(--padding) * 0.50);
}

.tst-wrapper .person-detail img::before {
    content: url("../images/person.svg");
    position: absolute;
    width: 5rem;
    height: 100%;
    z-index: 5;
    top: 0;
    left: 0;
    background: rgb(var(--color-white));
    aspect-ratio: 1 / 1;
    border-radius: 100% 106% 117% 117%;
    overflow: hidden;
}

.tst-wrapper .person-detail img {
    border-radius: 100% 106% 117% 117%;
    overflow: hidden;
    width: 5rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
    box-shadow: 0 0 0 var(--border) rgb(var(--color-white)),
        5px 5px 10px rgb(var(--color-black), 0.05);
}

.tst-wrapper .person-detail .detail {
    display: flex;
    align-items: end;
    gap: calc(var(--padding) * 0.10);
    padding-left: calc(var(--padding) * 0.25);
    padding-top: calc(var(--padding) * 0.5);
}

.tst-wrapper .person-detail .detail * {
    font-size: 0.75rem;
    font-weight: 300;
}

.tst-wrapper .person-detail .detail h3 {
    font-weight: 600;
}







#specialties .content {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: calc(var(--padding) * .75);
}


.spl-wrapper,
.gear-wrapper {
    position: relative;
    width: 9rem;
    aspect-ratio: 1 / 1;
    background: rgb(var(--color-black), 0.05);
    border-radius: calc(var(--border-radius) * 0.75);
    background: url("../images/res/logo-making.svg") center / contain no-repeat rgb(var(--color-black), 0.05);
    overflow: hidden;
    background-size: 75%;
}

.spl-wrapper.gra {
    background-image: url("../images/res/grphic.svg");
}

.spl-wrapper.ui {
    background-image: url("../images/res/UiUx.png");
}

.spl-wrapper.dev {
    background-image: url("../images/res/devloping.png");
}

.spl-wrapper h4,
.gear-wrapper h4 {
    position: absolute;
    font-size: 0.9rem;
    width: 200%;
    padding: calc(var(--padding) * 0.15);
    border-top: calc(var(--border)*.5) solid rgba(var(--color-white), 80%);
    border-bottom: calc(var(--border)*.5) solid rgba(var(--color-white), 80%);
    color: rgb(var(--color-black));
    top: 55%;
    left: -45%;
}


.spl-wrapper h4::before,
.gear-wrapper h4::before {
    filter: blur(0.5px);
    height: 60%;
    background: rgb(var(--color-white), 90%);
}





#gears .content {
    position: relative;
    gap: calc(var(--padding) * 0.75);
}

#gears .content::before,
#gears .content::after {
    position: absolute;
    content: "";
    height: 100%;
    top: 0;
    left: 0;
    width: calc(var(--padding) * 1.25);
    background: linear-gradient(to right, rgba(var(--color-white), 1) 25%, rgba(var(--color-white), 0));
    z-index: 1;
}

#gears .content::after {
    left: unset;
    right: 0;
    rotate: 180deg;
}

#gears .icon-scroll,
#gears .sckil-scroll {
    position: relative;
    overflow-x: scroll;
}

#gears .icon-scroll::-webkit-scrollbar,
#gears .sckil-scroll::-webkit-scrollbar {
    height: 0;
}

#gears .icon,
#gears .sckils {
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
    height: fit-content;
    gap: calc(var(--padding) * 0.5);
    flex-direction: row;
    padding: 0 calc(var(--padding) * 0.75);
}

.gear-wrapper {
    display: block;
    width: 7.5rem;
    border-radius: calc(var(--border-radius) * 0.75);
    background-image: unset;
}

.gear-wrapper .img {
    height: 100%;
    width: 100%;
    background: url("../images/res/logo-making.svg") center / contain no-repeat rgb(var(--color-black), 0.05);
    overflow: hidden;
    background-size: 50%;
    opacity: 0.75;
}


.gear-wrapper h4 {
    text-wrap: nowrap;
    font-size: 0.80rem;
    padding: calc(var(--padding) * 0.05);
    top: 52.5%;
    left: -48.5%;
}

.sckils h4 {
    text-wrap: nowrap;
    font-size: 1rem;
    font-weight: 600;
    padding: calc(var(--padding) * 0.30) calc(var(--padding) * 1);
    background-color: rgb(var(--color-black), 0.05);
    border-radius: calc(var(--border-radius) * 0.75);
}





#contact .content {
    padding: calc(var(--padding) * 0.75);
}
.contacts {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: right;
    width: 100%;
    gap: calc(var(--padding) * 0.1);
}

.contacts .contact-wrapper {
    text-align: left;
    position: relative;
    /* width: min(100%, calc(var(--max-width) * 0.4)); */
    width: 100%;
    position: relative;
    background: rgb(var(--primary-color), 0.05);
    padding: calc(var(--padding) * 0.15) calc(var(--padding) * 1.25);
    border-radius: calc(var(--border-radius) * 0.1);
    overflow: hidden;
}

.contacts .contact-wrapper::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 80%;
    background-color: rgb(var(--primary-color-dark), 1);
    z-index: -1;
    rotate: 45deg;
    transform-origin: center center;
    top: 0;
    right: -45%;
}

.contacts .contact-wrapper:nth-child(2n):before {
    rotate: -45deg;
    right: -47%;
}

.contacts .contact-wrapper .icon {
    display: flex;
    justify-content: center; 
    align-items: center;
    position: absolute;
    top: 0;
    left: -45%;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--primary-color-dark), 1);
    rotate: 45deg;
    transform-origin: center center;
    z-index: -1;
}

.contacts .contact-wrapper .icon i {
    font-size: 1rem;
    color: rgb(var(--color-white));
    rotate: -45deg;
}

.contacts .contact-wrapper:nth-child(2n) .icon {
    rotate: -45deg;
}

.contacts .contact-wrapper:nth-child(2n) .icon i {
    rotate: 45deg;
}

.contacts .contact-wrapper .info h4 {
    font-weight: 400;
}




.socials {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* width: min(100%, calc(var(--max-width) * 0.4)); */
    width: 100%;
    gap: calc(var(--padding) * 0.5);
    margin: 0 auto;
    flex-wrap: wrap;
    padding: calc(var(--padding) * 0.5) calc(var(--padding) * 0.5) calc(var(--padding) * 0.25);
}

.socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    width: calc(var(--padding) * 0.5 + 2rem);
    aspect-ratio: 1 / 1 !important;
}

.socials a:hover {
    background-color: rgb(var(--primary-color-dark), 0.05);
    border-radius: calc(var(--border-radius) * 0.25);
}









/* ----------------------button */
.more {
    --w: 2rem;
    display: flex;
    height: calc(var(--w) + var(--padding));
    width: 100%;
    align-items: center;
}

.more .p {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--w) + var(--padding));
    width: 100%;
    overflow: hidden;
    color: rgb(var(--color-black), 0.5);
    padding: calc(var(--padding) * 0.75);
    padding-right: calc(var(--padding) * 2);
}

.more .p::before {
    position: absolute;
    content: "";
    background-color: rgb(var(--color-black), 0.05);
    width: 100%;
    aspect-ratio: 1.25 / 1;
    z-index: -1;
    rotate: -45deg;
    transform: translate(0, -15%);
}

.more .p p {
    position: absolute;
    padding-right: calc(var(--padding) * 2);
    left: calc(var(--padding) * 0.75);
    text-align: left;
    margin: 0;
    color: rgb(var(--color-black), 0.5);
}


.more .button {
    position: relative;
    height: calc(var(--w) + var(--padding));
    aspect-ratio: 1 / 1;
    /* background-color: #000000; */
}

.more button.btn,
.more .border {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    width: 200%;
    height: 100%;
    padding: calc(var(--padding) * 0.5);
    overflow: hidden;
    scale: 0.90;
    transform: translateX(2.25%);
    cursor: pointer;
}

.more button.btn::before,
.more .border::before {
    content: "";
    position: absolute;
    height: 110%;
    width: 150%;
    rotate: -45deg;
    transform: translate(0%, 25%);
    background-color: rgb(var(--color-white));
    transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.more button.btn:hover::before {
    background-color: rgb(var(--color-white), 80%);
}

.more .border {
    scale: 1;
    transform: translateX(0%);
}

.more .border::before {
    background-color: rgb(var(--primary-color-dark));
}

.more button.btn span {
    position: absolute;
    display: flex;
    justify-content: end;
    align-items: end;
    width: 20%;
    height: 0.2rem;
    background: rgb(var(--primary-color-dark));
    border-radius: 5px;
    rotate: -45deg;
    top: calc(var(--padding) * 0.90);
    right: calc(var(--padding) * 0.80);
    scale: 0.80;
    color: rgba(var(--color-white), 0);
}

.more button.btn span::before,
.more button.btn span::after {
    content: "";
    position: absolute;
    display: block;
    width: 70%;
    height: 0.2rem;
    background: rgb(var(--primary-color-dark));
    border-radius: 5px;
    rotate: -45deg;
    right: -60%;
    transform: translate(-45%, 0)
}

.more button.btn span::after {
    rotate: 45deg;
}









footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: calc(var(--padding) * 0.5) calc(var(--padding) * 1.75) calc(var(--padding) * 1);
    font-size: 0.90rem;
    opacity: 0.75;
    text-align: left;
}

footer p:last-child {
    text-align: right;
}

















@media (max-width: 30rem) {
    html {
        font-size: 0.75rem;
    }
}

@media (max-width: 21rem) {
    html {
        font-size: 0.5rem;
    }
}

@media (max-width: 15rem) {
    html {
        font-size: 40%;
    }
}

@media (min-width: 40rem) {
    .hero-wrepper .p_chatBtn p {
        max-width: 70%;
    }
}

@media (min-width: 40rem) {
    body {
        margin: 0 auto;
    }

    .logo-cont {
        margin: 0 auto;
        left: unset;
        overflow-x: unset;
    }

    .logo {
        border-radius: calc(var(--border-radius) * 2.5);
    }

    .menu-btn {
        margin: 0 auto;
        left: unset;
    }

    .hero-wrepper .p_chatBtn p {
        max-width: 80%;
        /* max-width: 60%; */
    }
}