@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat/Caveat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat/Caveat-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat/Caveat-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

/*
@font-face {
    font-family: 'Caveat';
    src: url('../fonts/Caveat/Caveat-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}
*/

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}


/*-------------------*/


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-style: normal;
    scroll-behavior: smooth;
    user-select: none;
    -webkit-user-select: none; 
    -webkit-tap-highlight-color: transparent;
}

body {
    touch-action: pan-x pan-y;
    overflow-x: hidden;
}

body.stop {
    overflow: hidden;
}

.container {
    width: 100%;
    max-width: 1200px;
    padding-left: clamp(15px, 3.5vw, 32px);
    padding-right: clamp(15px, 3.5vw, 32px);
    margin: 0 auto;
}

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: -25deg;
}

@keyframes rotate {
    0% { 
        --angle: 0deg; 
    }
    100% { 
        --angle: 360deg; 
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(100% - 100vw)); 
    }
}

@keyframes click {
    0% { 
        width: 30px;
        height: auto;
    }
    50% { 
        width: 20px;
        height: auto;
    }
    100% { 
        width: 30px;
        height: auto;
    }
}

@keyframes write {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1; 
    }
    51% {
        opacity: 0; 
    }
    100% {
        opacity: 0; 
    }
}


/*-------------------*/


.header {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 10;
}

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

.logo {
    direction: ltr;
    text-decoration: none;
    color: #ffffff80;
    font-family: "Caveat";
    font-size: clamp(40px, 6.5vw, 60px);
    padding-right: 3px;
    transition: all .3s ease;
    cursor: pointer;
}

.logo:hover {
    color: #ffffffb0;
}

.logo.scrolledLogo {
    color: #00000080;
}

.logo.scrolledLogo:hover {
    color: #000000;
}

.header .button {
    position: relative;
    width: clamp(130px, 18.5vw, 170px);
    height: clamp(35px, 5vw, 45px);
    overflow: hidden;
    border-radius: 30px;
    color: #ffffff80;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: all .3s ease;
    cursor: pointer;
}

.header .button:hover {
    color: #ffffffb0;
}

.buttonX svg {
    width: 23px;
    height: auto;
    display: none;
}

.button.open {
    width: clamp(35px, 5vw, 45px);
}

.button.open .buttonText {
    display: none;
}

.button.open .buttonX svg {
    display: block;
}

.header .button::before {
    content: '';
    position: absolute;
    inset: 0; /*top: 0; right: 0; bottom: 0; left: 0;*/
    border-radius: 30px; 
    padding: 1px;
    background: linear-gradient(var(--angle), #ffffff 0%, #ffffff45 40% 60%, #ffffff 100%); 
    -webkit-mask: 
        linear-gradient(#ffffff 0 0) content-box, 
        linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: rotate 5s linear infinite;
}

.button.scrolledButton {
    color: #000000aa;
}

.button.scrolledButton:hover {
    color: #000000;
}

.button.scrolledButton::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px; 
    padding: 1px;
    background: linear-gradient(var(--angle), #000000 0%, #00000045 40% 60%, #000000 100%); 
    -webkit-mask: 
        linear-gradient(#ffffff 0 0) content-box, 
        linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: rotate 5s linear infinite;
}

.menu {
    position: absolute;
    top: clamp(55px, 7vw, 65px);
    left: clamp(35px, 4.5vw, 41.5px);
    width: 0;
    max-height: 0;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid #ffffff80;
    border-radius: 25px;
    color: #ffffff;
    font-size: 20px;
    background-color: transparent;
    backdrop-filter: blur(10px);
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    transition: 
        width 0.5s cubic-bezier(0, -0.4, 0, 1.4),
        max-height 0.5s cubic-bezier(0, -0.4, 0, 1.4),
        padding 0.5s cubic-bezier(0, -0.4, 0, 1.4),
        opacity 0.5s ease,
        visibility 0.5s ease;
}

.menu.scrolledMenu {
    border-color: #00000080;
    color: #000000;
}

.menu.open {
    visibility: visible;
    opacity: 1;
    width: clamp(200px, 27.5vw, 250px);
    max-height: clamp(300px, 41.5vw, 375px);
    padding: 15px;
}

.menu h3 {
    font-weight: normal;
    font-size: clamp(18px, 2.5vw, 24px);
    cursor: pointer;
    opacity: 0;
    transform: translate(40px , -20px);
    transition: opacity 1s ease, transform .4s cubic-bezier(0, -0.4, 0, 1.4);
}

.menu h3:nth-of-type(1) { 
  transition-delay: 0.2s; 
}

.menu h3:nth-of-type(2) { 
  transition-delay: 0.4s; 
}

.menu h3:nth-of-type(3) { 
  transition-delay: 0.6s; 
}

.menu h3:nth-of-type(4) { 
  transition-delay: 0.8s; 
}

.menu h3:nth-of-type(5) { 
  transition-delay: 1s; 
}

.menu h3:nth-of-type(6) { 
  transition-delay: 1.2s; 
}

.menu.smooth h3{
    opacity: 1;
    transform: translate(0 , 0);
}

.menu.open h3:hover {
    transform: translateX(-10px);
}

.menu hr {
    width: 50%;
    margin: 0 auto;
    border: .5px solid #ffffff30; 
}

.menu.scrolledMenu hr {
    border-color: #00000035;
}

@media (min-width: 768px) {
    .header .button {
        font-size: 15px;
    }

    .buttonX svg{
        width: 25px;
        height: auto;
    }
}

@media (min-width: 1024px) {
    .header .button {
        font-size: 17px;
    }
}


/*-------------------*/


.hero {
    width: 100vw;
    height: 100vh;
    min-height: 750px;
    background-image: url("../images/phoneBackground.webp");
    background-size: cover; 
    background-position: top;
}

.titleDescription {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15vh 0 0;
}

.titleDescription h1 {
    direction: ltr;
    font-family: "Caveat";
    font-weight: 600;
    font-size: clamp(180px, 27.5vw, 250px);
    color: #ffffff;
    transform: translateX(-10px);
}

.titleDescription p {
    text-align: center;
    font-size: clamp(16px, 2vw, 20px);
}

.titleDescription p span {
    font-weight: 700;
}

.gradesTrack {
    width: 100%;
    height: 100px;
    margin-top: 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.grades {
    display: flex;
    width: max-content;
    animation: scroll 2000s linear infinite;
}

.grade {
    color: #000000;
    font-family: "Caveat";
    font-size: clamp(50px, 8.6vw, 80px);
    padding-left: clamp(60px, 11vw, 100px);
}

.gradeSub {
    font-family: "Caveat";
    color: #bbb;
    font-size: clamp(30px, 6.5vw, 60px);
}

@media (min-width: 768px) {
    .hero {
        background-image: url("../images/desktopBackground.webp");  
    }
}


/*-------------------*/


.popup {
    position: fixed;
    inset: 0; 
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
}

.popup.open {
    visibility: visible;
}

.popupOverlay {
    position: absolute;
    inset: 0;
    background-color: #00000080;
    backdrop-filter: blur(5px);
    z-index: 0;
}

.popupContent {
    position: relative;
    z-index: 10;
    width: 95vw;
    height: 85vh;
    max-width: 1000px;
    max-height: 600px;
    min-height: 600px;
    background: linear-gradient(to top, #1481eb73 25%, #0080ff05);
    background-color: #ffffff;
    padding: 7.5px;
    border-radius: 30px;
    overflow: hidden;
}

.popupHeader {
    position: sticky;
    top: 0;
    padding: 0 10px 0 5px;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.popupLogo {
    direction: ltr;
    font-family: 'Caveat';
    font-size: 35px;
    color: #00000080;
}

.popupClosed {
    font-family: 'Caveat';
    font-size: 50px;
    transform: translateY(-10px);
    color: #00000080;
    cursor: pointer;
}

.popupClosed:hover {
    color: #000000
}

.choiceTitle {
    width: 100%;
    text-align: center;
    font-size: clamp(25px, 4.3vw, 40px);
    font-weight: 500;
    margin: -5px 0 50px;
}

.choiceContent {
    width: 100%;
    height: 75%;
    display: flex;
    gap: 5px;
    position: sticky;
    bottom: 0;
    right: 0;
}

.choiceSide {
    width: 55px;
    background-color: #ffffff80;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex-shrink: 0;
    padding: 15px;
    border-radius: 15px 15px 22.5px 15px;
    overflow: hidden;
    transition: all .5s cubic-bezier(0, -0.4, 0, 1.4);
}

.choiceSide.open {
    width: 255px;
}

.materials {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 5px 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to top, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to top, transparent, black 5%, black 95%, transparent);
}

.materials::-webkit-scrollbar {
    display: none;
}

.material {
    display: flex;
    gap: 15px;
    align-items: center;
    cursor: pointer;
}

.material svg {
    width: 25px;
    height: auto;
    flex-shrink: 0;
    overflow: visible;
}

.nameCoefficientAverage {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.nameCoefficientAverage h4 {
    font-size: 16px;
}

.coefficientAverage {
    display: flex;
    gap: 20px;
    color: #00000080;
    font-size: 13px;
}

.switch {
    width: 32px;
    height: 16px;
    background-color: #0081FF; 
    border-radius: 15px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    transition: background-color 0.25s cubic-bezier(0, -0.4, 0, 1.4);
}

.switch.active {
    background-color: #0081FFb0;
}

.switchCircle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: transform 0.25s cubic-bezier(0, -0.4, 0, 1.4);
}

.switch.active .switchCircle {
    transform: translateX(-16px);
}

.material.disabled {
    opacity: 0.2;
}

.sideOpen {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.sideOpen svg {
    width: 25px;
    height: auto;
    color: #00000080;
    transition: all .5s cubic-bezier(0, -0.4, 0, 1.4);
    cursor: pointer;
}

.sideOpen svg:hover {
    color: #000000b0;
}

.sideOpen svg.open {
    transform: rotate(180deg);
}

.inputOutputPoints {
    background-color: #ffffff80;
    padding: 20px 15px 15px;
    width: calc(100% - 60px);
    border-radius: 15px 15px 15px 22.5px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.inputPoints {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    min-height: 300px;
}

.inputPoints:empty::before {
    content: 'إضغط على أي أيقونة لبدأ ملئ النقاط حسب المادة';
    text-align: center;
    font-size: clamp(13px , 1.5vw, 16px);
    color: #00000080;
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.input-header {
    display: flex;
    flex-direction: column;
}

.input-header h3 {
    font-size: clamp(18px , 2.5vw, 25px);
}

.input-header-description {
    display: flex;
    gap: 30px;
    color: #00000080;
    font-size: clamp(14px , 1.5vw, 17px);
}

.points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.points.cer {
    padding: 30px 0 0;
}

.point {
    width: calc(50% - 5px);
    padding: 10px 0;
    opacity: 0;
    transform: translate(40px , -20px);
    transition: opacity 1s ease, transform .5s cubic-bezier(0, -0.4, 0, 1.4);
}

.point.cer {
    width: 100%;
}

.points .point:nth-child(1) { 
  transition-delay: 0.2s; 
}

.points .point:nth-child(2) { 
  transition-delay: 0.4s; 
}

.points .point:nth-child(3) { 
  transition-delay: 0.6s; 
}

.points .point:nth-child(4) { 
  transition-delay: 0.8s; 
}

.points.open .point{
    opacity: 1;
    transform: translate(0 , 0);
}

.point h4 {
    font-size: clamp(15px, 1.5vw, 17px);
    font-weight: 400;
    margin: 0 0 5px;
}

.point input {
    width: 100%;
    background-color: #ffffff80;
    border: none;
    outline: none;
    border-radius: 10px;
    padding: 5px 10px;
    text-align: center;
    font-size: 20px;
    -moz-appearance: textfield;
    appearance: textfield;
}

.point input::-webkit-outer-spin-button,
.point input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.point input:focus {
    border: 1px solid #0080ff;
}

.outputPoints {
    display: flex;
    justify-content: space-between;
    height: 30%;
    gap: 10px;
}

.downloadNote {
    height: 100%;
    background-color: #ffffff80;
    border-radius: 15px;
    padding: 10px 10px 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.downloadNote svg {
    width: 30px;
    height: auto;
    cursor: pointer;
    color: #000000b0;
}

.downloadNote svg:hover {
    color: #000000;
}

.downloadNote hr {
    border: .5px solid #00000040;
    width: 100%;
}

.download svg.click, .note svg.click {
    animation: click .4s linear;
}

.outputPoints .output {
    background-color: #ffffff80;
    width: 100%;
    border-radius: 20px 20px 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.outputPoints .output::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px 20px 20px 15px;
    padding: 1px;
    background: linear-gradient(var(--angle), #0080ff 0%, #0080ff20 35% 65%, #0080ff 100%); 
    -webkit-mask: 
        linear-gradient(#ffffff 0 0) content-box, 
        linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    animation: rotate 5s linear infinite;
}

.outputPoints .output h2 {
    direction: ltr;
    font-family: 'Caveat';
    font-size: 60px;
    font-weight: 400;
}

.outputPoints .output h2 span {
    font-family: 'Caveat';
    font-size: 25px;
    color: #00000080;
}

.outputPoints .output p {
    color: #00000080;
    margin: -10px 0 0;
}

.notes h1 {
    font-size: clamp(25px, 3.5vw, 32px);
    margin: 0 0 15px;
}

.notes p {
    font-size: clamp(13px, 2vw, 18px);
    margin: 0 0 10px;
    text-align: justify;
    opacity: 0;
    transform: translate(40px , -20px);
    transition: opacity 1s ease, transform .5s cubic-bezier(0, -0.4, 0, 1.4);
}

.notes p:nth-of-type(1) { 
  transition-delay: 0.2s; 
}

.notes p:nth-of-type(2) { 
  transition-delay: 0.4s; 
}

.notes p:nth-of-type(3) { 
  transition-delay: 0.6s; 
}

.notes.open p {
    opacity: 1;
    transform: translate(0 , 0);
}

@media (min-width: 768px) {
    .outputPoints .output {
        width: 50%;
    }

    .point {
        width: calc((100% - 20px) / 3);
    }

    .point.cer {
        width: calc((100% - 15px) / 2);
    }
}


/*-------------------*/


.transcriptOfGrades {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1000px;
    height: 1414px;
    background-image: url("../images/transcriptOfGrades.webp");
    background-size: cover;
    background-position: center;
    padding: 100px 50px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.theader {
    margin: 0 0 25px;
}

.transcriptOfGrades h1 {
    text-align: center;
    font-size: 70px;
}

.transcriptOfGrades h2 {
    text-align: center;
    font-size: 30px;
    font-weight: 400;
}

.transcriptOfGrades table {
    width: 100%;
    color: #ffffff;
    border-collapse: collapse;
}

td {
    font-size: 25px;
    text-align: center;
    padding: 10px;
    border-top: 1px solid #ffffff30;
}

td:first-child {
    text-align: right;
    font-weight: 600;
}

th {
    padding: 0 0 20px;
    color: #ffffff80;
    font-size: 25px;
}

th:last-child span {
    padding: 2px 15px;
    border: 2px solid white;
    border-radius: 30px;
    color: #ffffff;
}

.transcriptOfGrades .footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    color: #ffffff80;
}

.transcriptOfGrades .footer > p {
    width: 300px;
}

.transcriptOfGrades .footer div h3 {
    font-size: 150px;
    font-family: 'Caveat';
    font-weight: 400;
    color: #ffffff;
}

.transcriptOfGrades .footer div h3 span {
    font-size: 75px;
    font-family: 'Caveat';
    font-weight: 400;
    color: #ffffff80;
}

.transcriptOfGrades .footer div p:last-child {
    text-align: center;
    font-size: 30px;
    margin: -40px 0 0;
}


/*-------------------*/


.features {
    padding: 100px 0 0;
    transform: translateY(-100px);
}

.featuresCards {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.featureOne, .featureTwo, .featureThree {
    width: 95%;
    max-width: 350px;
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    border-radius: 30px;
    padding: 20px;
    overflow: hidden;
}

.more {
    opacity: 0;
    transform: translate(40px , -20px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0, -0.4, 0, 1.4);
}

.featureOne.open .more, .featureTwo.open .more, .featureThree.open .more {
    opacity: 1;
    transform: translate(0 , 0);
    transition-delay: .3s; 
}

.featureOne::before, .featureThree::before {
    content: '';
    position: absolute;
    inset: 0; 
    border-radius: 30px; 
    padding: 1px;
    background: linear-gradient(var(--angle), #0080ff 0%, #0080ff30 20% 80%, #0080ff 100%); 
    -webkit-mask: 
        linear-gradient(#ffffff 0 0) content-box, 
        linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    animation: rotate 5s linear infinite;
}

.featureOne .featureTitleDescription, .featureTwo .featureTitleDescription, .featureThree .featureTitleDescription {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.featureOne .featureTitleDescription h2, .featureTwo .featureTitleDescription h2, .featureThree .featureTitleDescription h2 {
    font-size: 30px;
    font-weight: 500;
}

.featureOne .featureTitleDescription p, .featureTwo .featureTitleDescription p, .featureThree .featureTitleDescription p {
    font-weight: 300;
    text-align: justify;
}

.featureOne .featureTitleDescription p span, .featureTwo .featureTitleDescription p span, .featureThree .featureTitleDescription p span {
    font-weight: 500;
    color: #0066cc;
}

.featureThree .featureTitleDescription p strong {
    font-weight: 600;
}

.featureOneButton, .featureTwoButton, .featureThreeButton {
    width: 40px;
    height: 40px;
    backdrop-filter: blur(3px);
    border-radius: 50%;
    border: 1px solid #0066cc80;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all .5s ease;
    cursor: pointer;
}

.featureOneButton:hover, .featureTwoButton:hover {
    border: 1px solid #0066cc;
}

.featureOneButton.open, .featureTwoButton.open, .featureThreeButton.open {
    display: none;
}

.featureOneButton svg, .featureTwoButton svg, .featureThreeButton svg {
    width: 25px;
    height: auto;
    color: #0066cc;
}

.featureOne img {
    position: absolute;
    width: 200px;
    bottom: 0;
    left: 0;
    filter: brightness(0) saturate(100%) invert(15%) sepia(51%) saturate(5139%) hue-rotate(357deg) brightness(92%) contrast(111%) drop-shadow(10px 10px 5px #00000040);
    transition: all 1s ease;
}



.featureOne img.open {
    transform: translateY(50px);
}

.featureTwoThree {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.featureTwo {
    background: linear-gradient(0deg, #0080ff20, #0080ff08);
    position: relative;
}

.featureTwo > p {
    font-family: 'Caveat';
    font-size: 120px;
    align-self: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-53%, -30%);
    transition: all 1s ease;
}

.featureTwo > p.open {
    transform: translate(-53%, 10%);
}

.featureTwo > p::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 17%;
    border-radius: 3px;
    transform: translateY(-40%);
    width: 3px;
    height: 50%;
    background-color: #0080ff;
    animation: write 1s linear infinite;
}

.featureThree img {
    position: absolute;
    width: 100%;
    max-width: 320px;
    border-radius: 20px;
    box-shadow: 10px 20px 10px #00000040;
    transform: translateY(40%) rotate(-10deg);
    left: 0;
    bottom: 0;
    border: .5px solid #00000030;
    transition: all 1s ease;
}

.featureThree img.open {
    transform: translateY(50%) rotate(-10deg);
}

.featureThreeButton {
    border: 1px solid #ffffff80;
}

.featureThreeButton:hover {
    border: 1px solid #ffffff;
}
.featureThreeButton svg {
    color: #ffffff;
}

@media (min-width: 768px) {
    .featuresCards {
        flex-direction: row;
    }

    .featureOne {
        width: calc((100% - 40px) / 2);
    }

    .featureTwoThree {
        width: calc((100% - 40px) / 2);
    }

    .featureTwo, .featureThree {
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .features {
        transform: translateY(0);
    }
    
    .featuresCards {
        flex-direction: row;
    }

    .featureOne {
        width: calc((100% - 80px) / 3);
    }

    .featureTwoThree {
        flex-direction: row;
        width: calc(((100% - 80px) / 3 * 2) + 40px);
    }

    .featureTwo, .featureThree {
        width: calc((100% - 40px) / 2);
    }
}


/*-------------------*/


.mobileApp {
    transform: translateY(-50px);
}

.mobileApp .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 70px;
}

.mobileAppHeader {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.mobileAppHeader .titleDescription {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.mobileAppHeader .titleDescription h2 {
    font-size: clamp(40px, 7vw , 70px);
    font-weight: 600;
    width: fit-content;                                               
    background: linear-gradient(135deg, #56d9d9, #004d99 40%);
    background-clip: text;
    -webkit-background-clip: text;
    color: #FFFFFF00;
}

.mobileAppHeader .titleDescription p {
    font-size: clamp(16px, 2vw , 20px);
    font-weight: 300;
}

.mobileAppHeader .buttons {
    width: 85%;
    max-width: 400px;
    display: flex;
    gap: 10px;
    position: relative;
}

.mobileAppHeader .buttons .button1, .mobileAppHeader .buttons .button2 {
    width: 100%;
    border-radius: 30px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
}

.mobileAppHeader .buttons .button1 {
    background: linear-gradient(135deg, #0080ffb0, #0080ff);
    box-shadow: 1px 1px 5px #00000040;
    color: #ffffff;
    transition: all .3s ease;
    position: relative;
}

.installOrDownload {
    position: absolute;
    top: 45px;
    right: 0;
    width: 0px;
    height: 0px;
    border-radius: 25px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    color: #000000;
    font-size: 15px;
    background-color: #ffffff40;
    backdrop-filter: blur(10px);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: 
        width 0.5s cubic-bezier(0, -0.4, 0, 1.4),
        height 0.5s cubic-bezier(0, -0.4, 0, 1.4),
        padding 0.5s cubic-bezier(0, -0.4, 0, 1.4),
        opacity 0.5s ease,
        visibility 0.5s ease;
}

.installOrDownload.open {
    visibility: visible;
    opacity: 1;
    width: 250px;
    height: 250px;
    padding: 20px;
}

.installOrDownload::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 25px; 
    padding: 1px;
    background: linear-gradient(var(--angle), #0080ff 0%, #ffffff40 20% 80%, #0080ff 100%); 
    -webkit-mask: 
        linear-gradient(#ffffff 0 0) content-box, 
        linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: rotate 5s linear infinite;
}

.install, .downlad {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.install h5, .downlad h5 {
    font-size: 12px;
    font-weight: 400;
    text-align: justify;
}

.install div, .downlad div {
    background-color: #0080ff;
    color: #ffffff;
    align-self: flex-end;
    border-radius: 20px;
    padding: 2.5px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: transform .5s ease;
}

.install div:hover, .downlad div:hover {
    transform: translate(-1px, -2px);
}

.downlad div.delete {
    background-color: #ff1500;
}

.installOrDownload hr {
    border: .5px solid #00000030;
    width: 50%;
    margin: 2.5px auto;
}

.installOrDownload p {
    font-size: 10px;
    color: #004d99;
}

.mobileAppHeader .buttons .button1:hover, .mobileAppHeader .buttons .button2:hover {
    transform: translate(-1px, -2px);
}

.mobileAppHeader .buttons .button2 {
    border: 1px solid #0066cc80;
    color: #0066cc;
    transition: all .3s ease;
}

.mobileAppFeatures {
    position: absolute;
    top: 45px;
    left: 0;
    width: 0px;
    height: 0px;
    border-radius: 25px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: justify;
    gap: 10px;
    color: #000000;
    font-size: 11.5px;
    background-color: #ffffff40;
    backdrop-filter: blur(10px);
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    transition: 
        width 0.5s cubic-bezier(0, -0.4, 0, 1.4),
        height 0.5s cubic-bezier(0, -0.4, 0, 1.4),
        padding 0.5s cubic-bezier(0, -0.4, 0, 1.4),
        opacity 0.5s ease,
        visibility 0.5s ease;
}

.mobileAppFeatures.open {
    visibility: visible;
    opacity: 1;
    width: 250px;
    height: 250px;
    padding: 20px;
}

.mobileAppFeatures::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 25px; 
    padding: 1px;
    background: linear-gradient(var(--angle), #0080ff 0%, #ffffff40 20% 80%, #0080ff 100%); 
    -webkit-mask: 
        linear-gradient(#ffffff 0 0) content-box, 
        linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: rotate 5s linear infinite;
}

.mobileApp img {
    width: 100%;
    max-width: 400px;
    filter: drop-shadow(-5px 10px 5px #00000040);
    z-index: -1;
}

@media (min-width: 768px) {
    .mobileApp {
        padding: 100px 0 0; 
    }
    
    .mobileApp .container {
        flex-direction: row;
    }

    .mobileAppHeader {
        width: calc((100% - 70px) / 2);
        transform: translateY(-20%);
        align-items: flex-start;
    }

    .mobileAppHeader .titleDescription p {
        font-weight: 400;
    }

    .mobileAppHeader .buttons {
        width: 100%;
        gap: 15px;
    }

    .mobileApp img {
        width: calc((100% - 70px) /2 );
        max-width: none;
    }
}

@media (min-width: 1024px) {
    .mobileApp {
        transform: translateY(0);
    }
    
    .mobileAppHeader {
        transform: translateY(-40%);
    }
}


/*-------------------*/


.reportAProblem {
    padding: 100px 0 0;
}

.reportAProblem .container .report {
    width: 95%;
    height: 400px;
    margin: 0 auto 100px;
    background: linear-gradient(-45deg, #0080ff20, #0080ff10);
    padding: 20px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    overflow: hidden;
}

.reportHeader {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.reportHeader svg {
    display: none;
}

.reportHeader h3 {
    font-size: clamp(25px, 3.5vw, 35px);
    font-weight: 500;
}

.reportBody {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.reportBody input {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 10px;
    padding: 5px 10px;
    outline: none;
    font-size: 17px;
}

.reportBody input:focus {
    border: 1px solid #0080ff;
}

.reportBody textarea {
    width: 100%;
    height: 205px;
    border: none;
    border-radius: 10px;
    padding: 10px;
    resize: none;
    outline: none;
    font-size: 17px;
}

.reportBody textarea:focus {
    border: 1px solid #0080ff;
}

.sendButton {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 55px;
    height: 35px;
    background: linear-gradient(135deg, #0080ffb0, #0080ff);
    box-shadow: 1px 1px 5px #00000040;
    color: #ffffff;
    border-radius: 20px 20px 20px 5px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .5s ease;
}

.sendButton:hover {
    transform: translate(1px, -2px);
}

.sendButton svg {
    width: 25px;
    height: auto;
}

@media (min-width: 768px) {
    .reportAProblem .container .report {
        height: 300px;
        flex-direction: row;
        gap: 30px;
    }

    .reportHeader {
        width: calc((100% - 30px) / 2);
        justify-content: space-between;
    }

    .reportHeader svg {
        display: block;
        align-self: center;
        width: 200px;
        height: auto;
        color: #005ab3;
    }

    .reportBody {
        width: calc((100% - 30px) / 2);
    }

    .reportBody textarea {
        height: 100%;
    }
}


/*-------------------*/


.footer {
    padding: 15px 0;
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    inset: 0; 
    padding: 1.5px 0 0;
    background: linear-gradient(var(--angle), #0080ff 0%, #0080ff00 25% 75%, #56d9d9 100%); 
    -webkit-mask: 
        linear-gradient(#ffffff 0 0) content-box, 
        linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: rotate 5s linear infinite;
}

.footerHeader {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footerLogo {
    display: flex;
    flex-direction: column;
}

.footerLogo a {
    font-family: 'Caveat';
    text-decoration: none;
    font-weight: 500;
    font-size: 60px;
    direction: ltr;
    text-align: right;
    padding-right: 5px;
    width: fit-content;                                               
    background: linear-gradient(35deg, #56d9d9, #004d99 50%);
    background-clip: text;
    -webkit-background-clip: text;
    color: #FFFFFF00;
    cursor: pointer;
}

.footerLogo p {
    margin: -10px 0 0;
    font-weight: 300;
    font-size: 15px;
}

.footerLogo p span {
    font-weight: 600;
}

.footerLinks {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footerLinks a {
    text-decoration: none;
    color: #00000080;
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

.footerLinks a:hover {
    color: #0080ff;
    transform: translateX(-10px);
}

.footer .container hr {
    border: .5px solid #00000020;
    margin: 40px 0 20px;
}

.footerCopyright {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footerCopyright p:last-child {
    font-size: 10px;
    direction: ltr;
}

.footerCopyright p:last-child span {
    font-weight: 600;
}

@media (min-width: 768px) {
    .footer::before {
        animation: rotate 10s linear infinite;
    }
    
    .footerHeader {
        flex-direction: row;
        align-items: flex-end;
    }

    .footerLogo {
        width: calc((100% - 30px) / 2);
    }

    .footerLinks {
        width: calc((100% - 30px) / 2);
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .footerLinks a {
        width: calc((100% - 10px) / 2);
    }
}