/* Font Face Declarations */
@font-face {
    font-family: 'Peyda';
    src: url('../fonts/PeydaWeb-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Peyda';
    src: url('../fonts/peydaWeb-extralight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

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

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

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

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Peyda', sans-serif;
    background-color: #000000;
    color: #FFFFFF;
    overflow-x: hidden;
}

/* Main Container */
.container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hero Section */
.hero-section {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 152px;
    padding: 0 103px;
}

/* Hero Left Content Section */
.hero-content-section {
    z-index: 1;
    direction: ltr;
}

.hero-content-wrapper {
    position: relative;
    width: 564px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 320px;
}

/* Hero Heading */
.hero-heading-wrapper {
    position: relative;
    width: 100%;
}

.hero-heading-container {
    position: relative;
    width: 100%;
}

.hero-heading {
    font-family: 'Peyda', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 56px;
    color: #FFFFFF;
    text-align: right;
    margin: 0;
    padding: 0;
    direction: rtl;
    letter-spacing: -0.4px;
    width: 100%;
}

.hero-heading span {
    display: block;
}

.hero-heading span:first-child {
    margin-bottom: 0;
}

/* Hero Subtitle */
.hero-subtitle-wrapper {
    position: relative;
    width: 100%;
}

.hero-subtitle {
    font-family: 'Peyda', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: rgba(255, 255, 255, 0.6);
    text-align: justify;
    margin: 0;
    padding: 0;
    direction: rtl;
    letter-spacing: -0.432px;
    width: 100%;
}

/* Hero Right Illustration Section */
.hero-illustration-section {
    z-index: 0;
}

.hero-illustration-container {
    position: relative;
    width: 534px;
    height: 466px;
}

.hero-illustration-image {
    position: absolute;
    inset: 0;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* Quote Section */
.quote-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 75px;
}

.quote-wrapper {
    position: relative;
    width: 1177px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.quote-text {
    font-family: 'Peyda', sans-serif;
    font-size: 60px;
    font-weight: 200;
    line-height: 1.1;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    padding: 0;
    direction: rtl;
}

/* Devices Section */
.devices-section {
    width: 100%;
    position: relative;
    margin-top: 75px;
    height: 400px;
}

/* Laptop Container */
.laptop-container {
    position: absolute;
    left: 225px;
    top: 0;
    z-index: 1;
}

.laptop {
    position: relative;
    width: 704px;
    height: 393px;
}

/* Laptop Screen */
.laptop-screen {
    position: absolute;
    bottom: 1.82%;
    left: 9.5%;
    right: 9.49%;
    top: 0;
}

.laptop-screen-frame-outer {
    position: absolute;
    inset: 0;
}

.laptop-frame-outer-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

.laptop-screen-frame-inner {
    position: absolute;
    inset: 1% 1% 1% 1%;
}

.laptop-frame-inner-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

.laptop-screen-content {
    position: absolute;
    background-color: #0f0f10;
    inset: 6% 4% 4% 4%;
}

.laptop-screen-image-wrapper {
    position: absolute;
    inset: 0% 0% 0% 0%;
}

.laptop-screen-image-overflow {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    scroll-behavior: smooth;
}

/* Custom scrollbar styling for laptop screen */
.laptop-screen-image-overflow::-webkit-scrollbar {
    width: 4px;
}

.laptop-screen-image-overflow::-webkit-scrollbar-track {
    background: transparent;
}

.laptop-screen-image-overflow::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.laptop-screen-image-overflow::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.laptop-screen-image {
    position: absolute;
    height: 387.01%;
    left: 0;
    max-width: none;
    top: 0.09%;
    width: 100%;
}

/* Laptop Base */
.laptop-base {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 97.05%;
}

.laptop-base-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

/* iPhone Container */
.iphone-container {
    position: absolute;
    right: calc(12.5% + 191px);
    top: 84px;
    z-index: 2;
}

.iphone {
    position: relative;
    width: 123px;
    height: 252px;
}

/* iPhone Shadow */
.iphone-shadow {
    position: absolute;
    background-color: #000000;
    bottom: 0;
    left: 1%;
    right: 1%;
    border-radius: 50px;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.8);
    top: 0;
    pointer-events: none;
}

/* iPhone Screenshot */
.iphone-screenshot {
    position: absolute;
    inset: 1.94% 4.44% 1.94% 4.67%;
    border-radius: 15px;
}

.iphone-screenshot-overflow {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    border-radius: 15px;
    scroll-behavior: smooth;
}

/* Custom scrollbar styling for iPhone screenshot */
.iphone-screenshot-overflow::-webkit-scrollbar {
    width: 4px;
}

.iphone-screenshot-overflow::-webkit-scrollbar-track {
    background: transparent;
}

.iphone-screenshot-overflow::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.iphone-screenshot-overflow::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.iphone-screenshot-img {
    position: absolute;
    max-width: none;
    width: 100%;
}

/* iPhone Device Frame */
.iphone-device {
    position: absolute;
    bottom: -0.01%;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
}

.iphone-frame {
    position: absolute;
    bottom: -0.01%;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
}

.iphone-frame-img {
    position: absolute;
    inset: 0;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* iPhone Island (Notch) */
.iphone-island {
    position: absolute;
    inset: 3.26% 36.67% 92.83% 36.67%;
    pointer-events: none;
}

.iphone-island-bg {
    position: absolute;
    background-color: #000000;
    inset: 0;
    border-radius: 50px;
}

.iphone-island-lens {
    position: absolute;
    inset: 23.53% 6.96% 26.47% 78.26%;
}

.iphone-lens-img {
    position: absolute;
    bottom: -25%;
    left: -25.37%;
    right: -25.37%;
    top: 0;
    display: block;
    width: calc(100% + 50.74%);
    height: calc(100% + 25%);
    max-width: none;
}

/* Description Section */
.description-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 75px;
}

.description-text {
    font-family: 'Peyda', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: #FFFFFF;
    text-align: justify;
    margin: 0;
    padding: 0;
    direction: rtl;
    letter-spacing: -0.24px;
    width: 1200px;
    max-width: calc(100% - 40px);
}

/* Features Section */
.features-section {
    width: 100%;
    position: relative;
    margin-top: 75px;
    min-height: 824px;
    padding: 0 120px;
}

/* iPad Container */
.ipad-container {
    position: absolute;
    left: 120px;
    top: 17px;
    z-index: 1;
}

.ipad {
    position: relative;
    width: 568px;
    height: 740px;
}

/* iPad Shadow */
.ipad-shadow {
    position: absolute;
    background-color: #000000;
    bottom: -0.01%;
    left: 0;
    right: 0.22%;
    border-radius: 50px;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.8);
    top: 0.17%;
    pointer-events: none;
}

.ipad-shadow-img {
    position: absolute;
    inset: 0;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* iPad Screenshot */
.ipad-screenshot {
    position: absolute;
    inset: 2.52% 3.44% 3.09% 4.22%;
    border-radius: 16px;
}

.ipad-screenshot-overflow {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    border-radius: 16px;
    scroll-behavior: smooth;
}

/* Custom scrollbar styling for iPad screenshot */
.ipad-screenshot-overflow::-webkit-scrollbar {
    width: 4px;
}

.ipad-screenshot-overflow::-webkit-scrollbar-track {
    background: transparent;
}

.ipad-screenshot-overflow::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.ipad-screenshot-overflow::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.ipad-screenshot-img {
    position: absolute;
    height: 209.19%;
    left: 0;
    max-width: none;
    top: -31.48%;
    width: 124.7%;
}

/* Features Content Section */
.features-content-section {
    position: absolute;
    left: calc(50% + 24px);
    top: 0;
    z-index: 2;
}

.features-content-wrapper {
    position: relative;
    width: 576px;
    font-family: 'Peyda', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: #FFFFFF;
    text-align: justify;
    direction: rtl;
    letter-spacing: -0.24px;
}

.features-list {
    margin: 0;
    padding: 0;
    list-style: disc;
}

.features-list li {
    margin-bottom: 32px;
    margin-right: 36px;
    line-height: 32px;
}

.features-list li:last-child {
    margin-bottom: 0;
}

.features-list-bold {
    font-family: 'Peyda', sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* Why Havij Section */
.why-havij-section {
    width: 100%;
    position: relative;
    margin-top: 75px;
    min-height: 726px;
    padding: 0 120px;
}

/* Why Havij Right Illustration */
.why-havij-illustration-section {
    position: absolute;
    left: calc(37.5% + 97px);
    top: 0;
    z-index: 1;
}

.why-havij-illustration-container {
    position: relative;
    width: 683px;
    height: 726px;
}

.why-havij-illustration-image {
    position: absolute;
    inset: 0;
    max-width: none;
    object-fit: cover;
    object-position: 50% 50%;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* Why Havij Left Content */
.why-havij-content-section {
    position: absolute;
    left: 120px;
    top: 91px;
    z-index: 2;
    width: 568px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 32px;
}

/* Why Havij Heading */
.why-havij-heading-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.why-havij-heading {
    font-family: 'Peyda', sans-serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 48px;
    color: #FFFFFF;
    text-align: right;
    margin: 0;
    padding: 0;
    direction: rtl;
    letter-spacing: -0.36px;
    white-space: nowrap;
}

/* Why Havij Horizontal Line */
.why-havij-line-wrapper {
    position: relative;
    width: 568px;
    height: 1px;
}

.why-havij-line {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

/* Why Havij List */
.why-havij-list-wrapper {
    position: relative;
    width: 100%;
}

.why-havij-list {
    font-family: 'Peyda', sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    color: #FFFFFF;
    text-align: right;
    margin: 0;
    padding: 0;
    direction: rtl;
    letter-spacing: -0.24px;
    list-style: disc;
    list-style-position: inside;
    width: 100%;
}

.why-havij-list li {
    margin-bottom: 32px;
    margin-right: 36px;
}

.why-havij-list li:last-child {
    margin-bottom: 0;
}

/* CTA Section */
.cta-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -124px;
    z-index: 5;
}

.cta-wrapper {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    width: 1200px;
    max-width: calc(100% - 160px);
    padding: 64px 80px;
    border-radius: 19px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}


.cta-content {
    position: relative;
    width: 1146px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    z-index: 1;
}

/* CTA Headings */
.cta-headings-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.cta-heading {
    font-family: 'Peyda', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 48px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    padding: 0;
    direction: rtl;
    letter-spacing: -0.728px;
    width: 100%;
}

.cta-subtitle {
    font-family: 'Peyda', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    padding: 0;
    direction: rtl;
    width: 100%;
}

/* CTA Button */
.cta-button-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-button {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 34px;
    border-radius: 55px;
    width: 286px;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.cta-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.cta-button-text {
    font-family: 'Peyda', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: #000000;
    text-align: center;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    direction: rtl;
    flex-shrink: 0;
}

.cta-button-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    flex-shrink: 0;
}

.cta-button-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transform: rotate(90deg) scaleY(-1);
}

.cta-arrow-icon {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}