:root {
    --primary-clr: #d92425;
    --secondary-clr: #00A8E8;
    --accent-clr: #cc5c24;
    --body-clr: #0D1317;
    --body-lt: #EBEBEB;
    --font-light: #f1f9ec;
    --font-dark: #1A181B;
    --shadow: 0 0.5rem 0.5rem rgba(0,0,0,0.65);
    --radius: 1rem;
    --small-raius: 0.5rem;
    --border: 0.1rem solid rgba(255, 255, 255, 0.2);
    --border-red: 0.1rem solid #d92425;
    --border-yellow: 0.1rem solid #f3e81e;
    --border-white: 0.1rem solid #f1f9ec;
    --border-dark: 0.1rem solid #1d1c1a; 
    --bg-light-tp: rgba(255, 255, 255, 0.15);
    --bg-dark-tp: rgba(0,0,0,0.4);
    --bg-darker-tp: rgba(0, 0, 0, 0.6);
    --dt-primary: #a5f9c5;
    --dt-secondary: #fb4a4f;
    --reflect: below 0.25rem linear-gradient(transparent, transparent, transparent, #000);
    --reflect2: below 0.25rem linear-gradient(transparent, transparent, transparent, #0005);
    --reflect3: below 0rem linear-gradient(transparent, transparent, transparent, #000);
    --reflect4: below -1rem linear-gradient(transparent, transparent, #0005, #0005);
}

@font-face {
    font-family: Headers;
    src: url(/static/Two/fonts/headers.ttf);
}

@font-face {
    font-family: General;
    src: url(/static/Two/fonts/gen.ttf);
}

@font-face {
    font-family: DevTom;
    src: url(/static/Two/fonts/DT.otf);
}

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

html {
    scroll-behavior: smooth;
    font-family: General;
    font-size: 10px;
}

body {
    position: relative;
    color: var(--font-light);
    width: 100%;
    background: var(--body-clr);
    overflow-x: hidden;
    overflow-y: hidden;
}

::-webkit-scrollbar {
    width: 1rem;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(transparent, var(--primary-clr), var(--accent-clr));
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(transparent, var(--secondary-clr));
}

.body-container {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
small {
    pointer-events: none;
    user-select: none;
    font-weight: 300;
}

a {
    text-decoration: none;
    user-select: none;
}

img,
button {
    user-select: none;
}

ul {
    list-style: none;
}

/* loader */
#circle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--body-clr);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2rem;
    gap: 2rem;
    transition: 1.5s;
    z-index: 20000;
    overflow: hidden;
}

.drops {
    position: relative;
    height: 20px;
    width: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -4rem;
}
.drops li {
    position: absolute;
    top: 0;
    left: 50%;
    transform: tranlateY(-50%);
    height: 20px;
    width: 20px;
    background-color: var(--primary-clr);
    border-radius: 10px;
    margin-left: -3000px; /* the dots like to jump out of place without this */
    margin: 0 auto;
    animation-name: loading;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: normal;
}
.drops li:nth-child(1) {
    left: 0px;
    animation-delay: 250ms;
}
.drops li:nth-child(2) {
    left: 40px;
    animation-delay: 500ms;
}
.drops li:nth-child(3) {
    left: 80px;
    animation-delay: 750ms;
}
.drops li:nth-child(4) {
    left: 120px;
    animation-delay: 1s;
}
.drops li:nth-child(5) {
    left: 160px;
    animation-delay: 1.25s;
}
@keyframes loading {
    0% { margin-left: -3000px; }
    30%,70% { margin-left: 0px; }
    100% { margin-left: 3000px; }
}

.load-txt {
    width: 100%;
    height: auto;
    margin-bottom: 4rem;
    padding: 0 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    -webkit-box-reflect: var(--reflect4);
}

.load-txt h1 {
    font-family: Headers;
    font-size: 4.25rem;
    color: var(--font-light);
}

.load-txt h1 span {
    color: var(--primary-clr);
}

.load-txt svg {
    transform: rotate(90deg);
    width: 4rem;
    height: 4rem;
}

.load-txt svg path {
    fill: var(--secondary-clr);
}

/* navbar */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6rem;
    background: var(--bg-light-tp);
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(0.5rem);
    z-index: 10000;
}

.header-cont {
    position: relative;
    max-width: 140rem;
    height: 100%;
    padding: 1rem 2rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: Headers;
    font-size: 4rem;
    color: var(--font-light);
    letter-spacing: 0.2rem;
    transition: 0.3s ease-in-out;
    display: flex; 
    justify-content: center;
    align-items: center;
}

.logo img {
    width: 7rem;
    height: 7rem;
    margin-right: 1rem;
    border-radius: 50%;
}

.logo span {
    color: var(--primary-clr);
    transition: 0.3s ease-in-out;
}

.logo:hover {
    transform: scale(0.95);
    color: var(--primary-clr);
}

.logo:hover span {
    color: var(--font-light);
}

.head-group {
    display: flex;
    align-items: center;
}

.navigation {
    position: relative;
    display: flex;
    gap: 3rem;
}

.navigation li a {
    position: relative;
    color: var(--font-light);
    font-size: 2.75rem;
    letter-spacing: 0.1rem;
    font-weight: 300;
    opacity: 0.6;
    transition: 0.3s ease-in-out;
}

.navigation li a:hover {
    opacity: 1;
}

.navigation li a::before {
    position: absolute;
    content: "";
    bottom: -0.1rem;
    width: 100%;
    height: 0.2rem;
    border-radius: var(--radius);
    background: var(--primary-clr);
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
    transform-origin: right;
}

.navigation li a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.search {
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    letter-spacing: 0.1rem;
    z-index: 100;
    cursor: pointer;
    color: var(--font-light);
}

.searchBx {
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    /* padding: 0 3rem; */
    background: var(--bg-dark-tp);
    backdrop-filter: blur(0.75rem);
    transition: 0.3s ease-in-out;
}

.searchBx::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0rem;
    background: var(--primary-clr);
    transition: 0.3s ease-in-out;
}

.searchBx.active {
    right: 0;
}

.searchBx.active::before {
    height: 100%;
    opacity: 0.3;
    transition-delay: 0.6s;
}

.searchBx input {
    position: relative;
    width: 100%;
    border: none;
    outline: none;
    height: 6rem;
    background: var(--bg-darker-tp);
    /* border-bottom: 0.1rem solid var(--primary-clr); */
    color: var(--font-light);
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    padding: 0 3rem;
}

.searchBx input::placeholder {
    color: var(--font-light);
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
}

.bi-search {
    position: relative;
    left: 2rem;
    scale: 1;
    transition: 0.3s ease-in-out;
}

.bi-search.active {
    left: 0;
    opacity: 0;
    visibility: hidden;
    scale: 0;
}

.bi-x-lg {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease-in-out;
    scale: 0;
}

.bi-x-lg.active {
    opacity: 1;
    visibility: visible;
    transition: 0.3s ease-in-out;
    scale: 1;
}

.ham {
    position: relative;
    width: 4rem;
    height: 4rem;
    background: var(--bg-dark-tp);
    backdrop-filter: blur(0.5rem);
    border-radius: 0.5rem;
    border: var(--border);
    cursor: pointer;
    display: none;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

.ham.active {
    border: var(--border-red);
}

.ham::before {
    position: absolute;
    content: "";
    width: 2.5rem;
    height: 0.2rem;
    background: var(--font-light);
    transform: translateY(-1rem);
    box-shadow: 0 1rem 0 var(--font-light);
    transition: 0.3s ease-in-out;
}

.ham.active::before {
    transform: translateY(0rem) rotate(45deg);
    box-shadow: 0 0 0 var(--font-light);
    background: var(--primary-clr);
}

.ham::after {
    position: absolute;
    content: "";
    width: 2.5rem;
    height: 0.2rem;
    background: var(--font-light);
    transform: translateY(1rem);
    transition: 0.3s ease-in-out;
}

.ham.active::after {
    transform: translateY(0rem) rotate(-45deg);
    background: var(--primary-clr);
}

/* scroll-to-top */
#progress {
    position: fixed;
    background: var(--accent-clr);
    bottom: 2rem;
    right: 1.8rem;
    height: 3rem;
    width: 3rem;
    display: flex;
    display: none;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 0.5rem 0rem var(--primary-clr);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
}

#progress-value {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.5rem;
    width: 2.5rem;
    background: var(--body-clr);
    border-radius: 50%;
}

#progress-value svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: var(--primary-clr);
}

/* footer */
footer {
    width: 100%;
    height: auto;
    padding: 4rem 5rem;
    background: var(--font-dark);
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
    border-top: var(--border-red);
}

.foot-cnt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    height: auto;
    gap: 2rem;
}

.foot-top {
    width: 50%;
    display: flex;
    justify-content:flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 2rem
}

.gen-head {
    position: relative;
    font-family: Headers;
    font-size: 4.25rem;
    color: var(--font-light);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gen-head img {
    width: 5rem;
    height: 5rem;
    margin-right: 1rem;
    border-radius: 50%;
}

.gen-head-two {
    position: relative;
    font-family: Headers;
    font-size: 4.25rem;
    color: var(--font-light);
}

.gen-head-two.home,
.gen-head-two.searching {
    color: var(--font-dark);
}

.gen-head-two.contact {
    margin-bottom: 2rem;
    text-align: center;
    width: fit-content;
}

.gen-head-three {
    position: relative;
    font-family: Headers;
    font-size: 6.25rem;
    color: var(--font-light);
    padding: 3rem;
    background: var(--bg-darker-tp);
    backdrop-filter: blur(0.1rem);
    border: var(--border);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    box-shadow: var(--shadow);
    text-align: center;
}

.gen-head span,
.gen-head-two span,
.gen-head-three span {
    color: var(--primary-clr);
}

.gen-p,
.gen-p-p,
.foot-p,
.gen-p-home {
    font-size: 1.9rem;
    line-height: 3rem;
    letter-spacing: 0.1rem;
}

.gen-p.about-txt {
    text-align: center;
}

.gen-p-home {
    position: relative;
    color: var(--font-light);
    font-family: Headers;
    font-size: 3rem;
    text-align: center;
    letter-spacing: 0.1rem;
    line-height: 4rem;
}

.gen-p-home::before {
    position: absolute;
    content: "''";
    top: -2rem;
    left: 0;
    font-family: Headers;
    font-size: 8rem;
    color: var(--primary-clr);
}

.gen-p-home::after {
    position: absolute;
    content: "''";
    bottom: -8rem;
    right: 0;
    font-family: Headers;
    font-size: 8rem;
    color: var(--primary-clr);
}

.foot-p {
    color: var(--font-light);
}

.gen-p {
    text-align: left;
}

.gen-p-p {
    font-size: 1.7rem;
    color: var(--font-light);
}

.gen-btn {
    position: relative;
    width: 15rem;
    height: 5rem;
    display: inline-block;
    background: #fff;
    border: none;
    outline: none;
    border-radius: var(--small-raius);
    cursor: pointer;
}

.gen-btn.gen-2 {
    width: 24rem;
}

.gen-btn.gen-3 {
    width: 12rem;
}

.gen-btn.gen-3 span {
    color: var(--primary-clr);
}

.gen-btn::before,
.gen-btn::after {
    position: absolute;
    content: "";
    inset: 0;
    transition: 0.3s ease-in-out;
    background: linear-gradient(45deg, var(--primary-clr), 
        var(--body-clr), var(--secondary-clr));
    border-radius: var(--small-raius);
}

.gen-btn:hover::before {
    inset: -0.3rem;
    border-radius: var(--small-raius);
}

.gen-btn:hover::after {
    inset: -0.3rem;
    filter: blur(1rem);
    border-radius: var(--small-raius);
}

.gen-btn span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    background: var(--body-clr);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    color: var(--font-light);
    font-weight: 600;
    border: var(--border-dark);
    transition: 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
}

.gen-btn:hover span {
    color: var(--primary-clr);
}

.foot-icons {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.foot-icons a {
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease-in-out;
    border: var(--border-red);
    border-radius: 50%;
    -webkit-box-reflect: var(--reflect);
}

.foot-icons a i {
    font-size: 2.5rem;
    color: var(--font-light);
    transition: 0.3s ease-in-out;
}

.foot-icons a:hover {
    border: var(--border-white);
    transform: scale(0.9);
}

.foot-icons a:hover i {
    color: var(--primary-clr);
}

.foot-contact-info {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    flex-direction: column;
}

.foot-contact-info a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 2rem;
    color: var(--font-light);
    letter-spacing: 0.1rem;
    transition: 0.3s;
}

.foot-contact-info a i {
    font-size: 2.2rem;
    color: var(--primary-clr);
    transition: 0.3s;
}

.foot-contact-info a:hover {
    color: var(--primary-clr);
}

.foot-contact-info a:hover i {
    color: var(--font-light);
}

.copyright {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    border-top: var(--border-red);
    padding-top: 1rem;
}

.copyright a {
    font-family: DevTom;
    color: var(--dt-primary);
    font-size: 2rem;
    transition: 0.3s ease-in-out;
}

.copyright a span {
    color: var(--dt-secondary);
    transition: 0.3s ease-in-out;
}

.copyright a:hover {
    color: var(--dt-secondary);
}

.copyright a:hover span {
    color: var(--dt-primary);
}


/* contact page */
.contact-sec {
    margin-top: 6rem;
    width: 100%;
    /* height: calc(100vh - 6rem); */
    position: relative;
    padding: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url(/static/Two/images/contact/contact.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.contact-cnt {
    position: relative;
    z-index: 1000;
    width: 80%;
    max-width: 100rem;
    background: var(--bg-dark-tp);
    padding: 5rem;
    border: var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.contact-cnt form {
    width: 100%;
}

.contact-cnt::before {
    position: absolute;
    content: "";
    top: 0;
    left: -40%;
    width: 100%;
    height: 100%;
    background: var(--bg-darker-tp);
    transform: skewX(15deg);
}

.contact-cnt form .row-100 {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
}

.contact-cnt form .row-100 .col {
    position: relative;
    width: 100%;
    padding: 0 2rem;
    margin: 3rem 0 2rem
}

.contact-cnt form .row-100 .col .inputBx {
    position: relative;
    width: 100%;
    height: 4rem;
}

.contact-cnt form .row-100 .col .inputBx input,
.contact-cnt form .row-100 .col .inputBx textarea {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    box-shadow: none;
    border: none;
    outline: none;
    resize: none;
    font-family: General;
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    color: var(--font-light);
    padding: 0 1rem;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

.contact-cnt form .row-100 .col .inputBx .cnt-txt {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 4rem;
    font-size: 1.9rem;
    letter-spacing: 0.1rem;
    color: var(--font-light);
    padding: 0 1rem;
    display: block;
    transition: 0.3s ease-in-out;
    pointer-events: none;
    user-select: none;
}

.contact-cnt form .row-100  .col .inputBx input:focus + .cnt-txt,
.contact-cnt form .row-100  .col .inputBx input:valid + .cnt-txt, 
.contact-cnt form .row-100  .col .inputBx textarea:focus + .cnt-txt,
.contact-cnt form .row-100  .col .inputBx textarea:valid + .cnt-txt {
    top: -3.5rem;
    left: -1rem;
}

.contact-cnt form .row-100 .col .cnt-line {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 0.2rem;
    background: var(--primary-clr);
    transition: 0.3s ease-in-out;
    pointer-events: none;
}

.contact-cnt form .row-100 .col .inputBx input:focus ~ .cnt-line,
.contact-cnt form .row-100 .col .inputBx input:valid ~ .cnt-line {
    height: 100%;
    background: rgba(217, 36, 37, 0.5);
}

.contact-cnt form .row-100 .col .inputBx.textarea {
    position: relative;
    width: 100%;
    height: 10rem;
    padding: 1rem 0;
}

.contact-cnt form .row-100 .col .inputBx textarea:focus ~ .cnt-line,
.contact-cnt form .row-100 .col .inputBx textarea:valid ~ .cnt-line {
    height: 100%;
    background: rgba(243, 232, 30, 0.5);
}

.submitted {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3rem;
    z-index: 1000;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.submitted h3 {
    font-size: 3rem;
    letter-spacing: 0.1rem;
}

.submitted .sub-img {
    position: relative;
    width: 15rem;
    height: 15rem;
    background: var(--bg-dark-tp);
    box-shadow: var(--shadow);
    border-radius: 50%;
    border: var(--border);
}

.submitted .sub-img img {
    position: absolute;
    top: 50%;
    left: 50%; transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    object-fit: cover;
    box-shadow: var(--shadow);
    border-radius: 50%;
}

.contact-page-info {
    margin-top: 2rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4rem;
    z-index: 10;
}

.map {
    position: relative;
    width: 45%;
    height: 30rem;
    border-radius: 1rem;
    background: var(--bg-light-tp);
    border: var(--border);
    box-shadow: var(--shadow);
}

.map iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.cnt-page-icons {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
}

.cnt-page-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: var(--font-light);
    font-size: 2rem;
    letter-spacing: 0.1rem;
    transition: 0.3s ease-in-out;
}

.cnt-page-icons a:hover {
    color: var(--primary-clr);
}

.cnt-page-icons a i {
    font-size: 2.2rem;
    color: var(--primary-clr);
    transition: 0.3s ease-in-out;
}

.cnt-page-icons a:hover i {
    color: var(--font-light);
}


/* home page */
.home-sec {
    position: relative;
    margin-top: 6rem;
    width: 100%;
    min-height: calc(100vh - 6rem);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--body-clr);
}

.home-sec::before {
    position: absolute;
    content: "";
    top: 10rem;
    left: 50%;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background: var(--primary-clr);
    filter: blur(8rem);
}

.home-sec::after {
    position: absolute;
    content: "";
    top: 60%;
    right: 10%;
    width: 10rem;
    height: 10rem;
    background: var(--font-light);
    border-radius: 50%;
    filter: blur(6rem);
}

.home-sec-cnt {
    width: 90%;
    height: 90%;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
}

.home-left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 3rem;
}

.home-header {
    background: linear-gradient(45deg, var(--secondary-clr), var(--primary-clr));
    font-size: 7rem;
    font-weight: 800;
    font-family: Headers;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-p {
    font-size: 2.2rem;
    width: 100%;
    line-height: 3rem;
    letter-spacing: 0.1rem;
    background: linear-gradient(90deg, var(--font-light), var(--secondary-clr));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-p.p-card{
    text-align: center;
    transform: translateZ(5rem);
}

.home-p.katikati {
    text-align: center;
}

.home-p.theprod {
    font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}

.home-btn {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 5rem;
}

.hm-btn {
    position: relative;
    display: inline-block;
    width: 20rem;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.2rem solid var(--primary-clr);
    font-family: Headers;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.2rem;
    color: var(--font-light);
    -webkit-box-reflect: var(--reflect);
    transition: color 0.3s ease-in-out;
    transition-delay: 0.6s;
}

.hm-btn.prod {
    width: 15rem;
    font-size: 2rem;
}

.hm-btn span {
    position: relative;
    z-index: 10;
}

.hm-btn:hover {
    color: var(--font-dark)
}

.hm-btn::before {
    position: absolute;
    content: "";
    left: -2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 0.2rem;
    background: var(--primary-clr);
    box-shadow: 0.5rem -0.8rem 0 var(--primary-clr),
                0.5rem 0.8rem 0 var(--primary-clr);
    transition: width 0.3s, left 0.3s, height 0.3s, 
                box-shadow 0.3s;
    transition-delay: 0.6s, 0.3s, 0s, 0s;
}

.hm-btn:hover::before {
    width: 60%;
    height: 100%;
    left: -0.2rem;
    box-shadow: 0.5rem 0 0 var(--primary-clr),
                0.5rem 0 0 var(--primary-clr);
    transition-delay: 0s, 0.3s, 0.6s, 0.6s;
}

.hm-btn::after {
    position: absolute;
    content: "";
    right: -2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 0.2rem;
    background: var(--primary-clr);
    box-shadow: -0.5rem -0.8rem 0 var(--primary-clr),
                -0.5rem 0.8rem 0 var(--primary-clr);
    transition: width 0.3s, left 0.3s, height 0.3s, 
                box-shadow 0.3s;
    transition-delay: 0.6s, 0.3s, 0s, 0s;
}

.hm-btn:hover::after {
    width: 60%;
    height: 100%;
    right: -0.2rem;
    box-shadow: -0.5rem 0 0 var(--primary-clr),
                -0.5rem 0 0 var(--primary-clr);
    transition-delay: 0s, 0.3s, 0.6s, 0.6s;
}

.home-rt {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-card {
    width: 30rem;
    height: 45rem;
    background: var(--bg-light-tp);
    border: var(--border-red);
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    transform-style: preserve-3d;
    perspective: 1000px;
}


.home-card .home-img {
    position: rleative;
    width: 30rem;
    height: 30rem;
    transform: translateZ(5rem);
}

.home-img img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 1rem;
}

.gen-sec {
    width: 100%;
    height: auto;
    padding: 4rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gen-sec.home {  
    background: url("/static/Two/gifs/home/home.gif");
    background-position: center;
    background-size: cover;
}

.gen-sec.products,
.gen-sec.partners {
    flex-direction: column;
    gap: 2rem;
    height: auto;
}

.gen-sec.products.card-sec {
    padding-bottom: 8rem;
}

.gen-sec.products.about-pg {
    padding-top: 8rem;
}

.gen-sec.products {
    gap: 0;
}

.gen-sec.brands {
    flex-direction: column;
    gap: 2rem;
    padding-top: 4rem;
    padding-bottom: 8rem;
}

.gen-cnt {
    position: relative;
    width: 90%;
    height: 50rem;
    padding: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.gen-cnt.homepage {
    background: var(--bg-dark-tp);
    border-radius: 0.5rem;
    border: var(--border);
    backdrop-filter: blur(0.5rem);
    z-index: 10;
}

.gen-cnt.themprods {
    position: relative;
    height: auto;
    z-index: 10;
    padding: 4rem 0;
}

.gen-cnt.themprods.about {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.gen-cnt.themprods.aboutpg {
    padding-bottom: 4rem;
    padding-top: 0;
    gap: 2rem;
}

.gen-cnt.themprods.aboutpg.arrows {
    gap: 0.5rem;
}

.gen-cnt.part {
    height: auto;
    padding: 0;
    flex-direction: column;
}

.gen-cnt.themprods::before,
.prod-card-sec::before {
    position: absolute;
    content: "";
    top: 0;
    left: 5%;
    background: var(--primary-clr);
    height: 30rem;
    width: 30rem;
    filter: blur(20rem);
    border-radius: 50%;
}

.prod-card-sec::before,
.prod-card-sec {
    z-index: -1;
}

.gen-cnt.themprods::after,
.prod-card-sec::after {
    position: absolute;
    content: "";
    bottom: 0;
    right: 5%;
    background: var(--secondary-clr);
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    filter: blur(20rem);
    z-index: -1;
}

.prod-card {
    width: 30rem;
    height: 40rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-direction: column;
    padding: 2rem 0;
    background: var(--bg-dark-tp);
    border: var(--border);
    transform-style: preserve-3d;
    perspective: 1000px;
    z-index: 100;
}

.prod-img {
    width: 25rem;
    height: 25rem;
    position: relative;
    transform: translateZ(5rem);
}

.prod-img img {
    position: absolute;
    top: -5rem;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(5rem);
}

.details {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
    transform: translateZ(5rem);
    margin-top: -5rem;
}

.left-img {
    width: 60%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.lft-img {
    position: relative;
    width: 60rem;
    height: 40rem;
    background: var(--bg-light-tp);
    border-radius: 0.5rem;
    border: var(--border);
}

.lft-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
}

.rt-chini {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

.swiper {
    width: 100%;
    -webkit-box-reflect: var(--reflect);
}

.swiper-slide {
    background: var(--bg-light-tp);
    border: var(--border);
    width: 200px;
    height: 100px;
    position: relative;
}

.swiper-slide img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.gen-top {
    position: relative;
    margin-top: 10rem;
    padding: 4rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 20rem;
    background: url(/static/Two/images/about/gen.jpg);
    background-position: center;
    background-size: cover;
}

.gen-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--secondary-clr);
    opacity: 0.3;
}

.gen-top-head {
    font-family: Headers;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 4rem;
    letter-spacing: 0.2rem;
    text-align: center;
    z-index: 10;
}

.act-card {
    width: 30rem;
    height: 40rem;
    background: var(--bg-light-tp);
    border: var(--border);
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1rem;
    transition: 0.3s ease-in-out;
}

.act-card:hover {
    background: var(--bg-dark-tp);
}

.thecardimg {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    border: 0.4rem solid var(--primary-clr);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: -.3s ease-in-out;
}

.thecardimg i {
    font-size: 6rem;
}

.act-card:hover .thecardimg {
    border: 0.4rem solid var(--secondary-clr);
}

.thecardcontent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.outlines {
    width: 30rem;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    transition: 0.3s ease-in-out;
    background: var(--bg-dark-tp);
    border: var(--border);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: 0.3s ease-in-out;
}

.outlines:hover {
    background: var(--bg-light-tp);
}

.outlines i {
    font-size: 2.5rem;
    color: var(--primary-clr);
    transition: 0.3s ease-in-out;
}

.outlines:hover i {
    color: var(--secondary-clr);
}

.feat-card {
    position: relative;
    width: 30rem;
    height: 50rem;
    background: var(--bg-light-tp);
    border: var(--border);
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

.feat-card:hover {
    background: var(--bg-dark-tp);
}

.card-head {
    position: absolute;
    top: 0;
    left: 0;
    height: 8rem;
    width: 100%;
    background: var(--bg-dark-tp);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    transition: 0.3s ease-in-out;
}

.feat-card:hover .card-head,
.feat-card:hover .card-btm {
    background: var(--bg-light-tp);
}

.card-btm {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 8rem;
    width: 100%;
    background: var(--bg-dark-tp);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 1rem;
    transition: 0.3s ease-in-out;
}

.card-head h2 {
    font-family: Headers;
    font-size: 2rem;
    letter-spacing: 0.3rem;
    text-align: center;
    transition: 0.3s ease-in-out;
}

.feat-card:hover .card-head h2 {
    color: var(--primary-clr);
}

.mid-card {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
    width: 100%;
    height: auto;
}

.mid-cnt {
    width: 100%;
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    align-items: flex-start;
}

.mid-cnt i {
    color: var(--primary-clr);
    font-size: 2rem;
    transition: 0.3s ease-in-out;
}

.func-card {
    width: 30rem;
    height: 30rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--bg-dark-tp);
    border: var(--border);
    border-radius: 0.5rem;
    padding: 1rem;
    transition: 0.3s ease-in-out;
}

.func-card:hover {
    background: var(--bg-light-tp);
}
.func-card:hover .mid-cnt i {
    color: var(--secondary-clr);
}

.prod-card-sec {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 4rem 0;
}

.prod-card-sec.juu {
    margin-top: 8rem;
    margin-bottom: 4rem;
}

.prod-card-sec.chini {
    margin-bottom: 8rem;
}

.prod-card-cnt {
    width: 90%;
    height: auto;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    background: var(--bg-light-tp);
    border-radius: 0.5rem;
    border: var(--border);
}

.prod-lft {
    width: 40rem;
    height: 40rem;
    position: relative;
    justify-content: center;
    align-items: center;
    background: var(--bg-dark-tp);
    border-radius: 0.5rem;
    box-shadow: var(--shadow)
}

.prod-lft img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    object-fit: cover;
}

.prod-lft.command img {
    width: 90%;
    height: 70%;
}

.prod-card-rt {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
}

.prod-card-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
}

.prod-card-content h3 {
    width: 100%;
    font-size: 3rem;
    letter-spacing: 0.1rem;
    text-align: center;
    position: relative;
}

.prod-card-content ul {
    width: 100%;
    display: flex;
    align-items:center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.prod-card-content ul li {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 49%;
    height: 4rem;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
    font-size: 2rem;
    background: var(--bg-dark-tp);
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    border: var(--border);
    transition: 0.3s ease-in-out;
    user-select: none;
    cursor: pointer;
}

.prod-card-content ul li:hover {
    border: var(--border-red);
    background: var(--bg-darker-tp);
}

.prod-card-content ul li i {
    color: var(--primary-clr);
    transition: 0.3s ease-in-out;
}

.prod-card-content ul li:hover i {
    color: var(--secondary-clr);
}


/* responsiveness */

@media(max-width: 1200px) {
    .navigation{
        position: absolute;
        opacity: 0;
        visibility: hidden;
        top: 6rem;
        left: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 4rem;
        width: 100%;
        height:calc(100vh - 6rem);
        gap: 4.5rem;
        transition: 0.3s ease-in-out;
    }

    .navigation li a {
        font-size: 3rem;
        letter-spacing: 0.1rem;
        font-weight: 700;
    }

    .header-cont.active .navigation,
    .header-cont.haiya .navigation {
        opacity: 1;
        visibility: visible;
        top: 6rem;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 4rem;
        width: 100%;
        height:calc(100vh - 6rem);
        background: linear-gradient(to left, transparent, 
        var(--body-clr), var(--body-clr));
        backdrop-filter: blur(0.25rem);
    }

    .bi-search {
        left: -3rem;
    }

    .ham {
        position: absolute;
        right: 2rem;
        display: flex;
        z-index: 100;
    }
    
    .ham.haiya {
        display: none;
    }

    .ham.active.haiya {
        display: none;
    }

}

@media(max-width: 1090px) {
    .prod-card-cnt {
        flex-direction: column;
        justify-content: center;
    }

    .prod-card-rt {
        width: 100%
    }
}

@media(max-width:1020px) {
    .home-sec-cnt {
        flex-direction: column-reverse;
    }

    .home-sec {
        height: auto;
    }

    .home-left,
    .home-rt {
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    .home-header {
        font-size: 4rem;
    }

    .home-p {
        font-size: 2rem;
    }

    .home-card {
        width: 25rem;
        height: 30rem;
    }

    .home-card .home-img {
        width: 18rem;
        height: 18rem;
    }

    .home-p.p-card {
        font-size: 1.6rem;;
    }

    .home-btn {
        justify-content: center;
        gap: 5rem;
    }

    .hm-btn {
        width: 15rem;
        font-size: 2rem;
    }
}

@media(max-width: 991px) {

    footer {
        padding: 4rem 0;
    }

    .foot-cnt {
        width: 80%;
        flex-direction: column;
        gap: 4rem;
    }

    .foot-p {
        text-align: left;
    }

    .foot-contact-info {
        align-items: flex-start;
    }

    .contact-page-info {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .map,
    .cnt-page-icons,
    .foot-top,
    .foot-icons {
        width: 100%;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .foot-icons a {
        width: 3.5rem;
        height: 3.5rem;
    }

    .foot-icons a i {
        font-size: 2rem;
    }

    .map {
        height: 20rem;
    }

    .gen-cnt.themprods.about {
        flex-direction: column;
        justify-content: center;
    }

    .left-img,
    .rt-chini {
        width: 100%;
    }
}

@media(max-width:750px) {
    .logo {
        font-size: 2rem;
    }

    .header-sec {
        height: 30rem;
    }

    .gen-head-three,
    .gen-head-two,
    .gen-head {
        font-size: 3.5rem;
    }
    
    .contact-sec {
        padding: 4rem 0;
    }

    .contact-cnt {
        width: 95%;
        padding: 1rem;
    }

    .contact-page-info {
        padding: 0 1rem;
    }

    .gen-p-home {
        font-size: 2rem;
    }

    .lft-img {
        width: 100%;
        height: 30rem;
    }
}

@media(max-width:670px) {
    .prod-card-content ul li {
        width: 100%;
    }
}

@media(max-width: 500px) {
    .load-txt h1 {
        font-size: 3.5rem;
    }

    .prod-lft {
        width: 30rem;
        height: 30rem;
    }
}