/* --- Global Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; overflow-x: hidden; color: #353844; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* --- Section 1: Hero --- */
.hero-section { height:100vh; background: url('../assets/hero.jpg') center/cover; position: relative; display: flex; flex-direction: column; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1; }

.hero-container { position: relative; z-index: 10; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; }
.hero-title { font-size: 48px; font-weight: 700; margin-top: 10px; }

/* --- SECTION 2: ABOUT (Figma Accurate CSS) --- */
.about-section {
    position: relative;
    padding: 100px 0;
    background: #FFFFFF;
    overflow: hidden;
}
.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.about-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Typography */
.figma-h5 { font-family: 'Montserrat'; font-weight: 600; font-size: 24px; color: #3D4E8F; margin-bottom: 15px; text-align: center; }
.figma-h2 { font-family: 'Poppins'; font-weight: 500; font-size: 32px; line-height: 40px; color: #353844; text-align: center; margin-bottom: 20px; }
.figma-p { font-family: 'Poppins'; font-weight: 400; font-size: 16px; line-height: 26px; color: #646464; text-align: center; max-width: 485px; margin: 0 auto; }

/* Images Layout */
.about-img-box { border-radius: 15px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1); background: rgba(0, 0, 0, 0.2); }
.about-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-large { width: 270px; height: 190px; }
.img-small { width: 177px; height: 137px; margin-top: 30px; }
.left-small { margin-left: 50px; }
.right-small { margin-right: 50px; }

/* Decorations */
.figma-decoration {
    position: absolute; width: 243px; height: 248px; opacity: 0.24;
    transform: rotate(24.41deg); z-index: 1;
}
.deco-left { left: 40px; top: 100px; }
.deco-right { right: 40px; top: 100px; }

.oval { position: absolute; border: 8px solid rgba(26, 80, 157, 0.59); border-radius: 50%; }
.rect { position: absolute; border: 8px solid rgba(26, 80, 157, 0.59); box-sizing: border-box; }
.plus { position: absolute; background: #3D4E8F; width: 10px; height: 10px; clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%); }

/* Positions for small shapes */
.v1 { width: 13px; height: 13px; top: 20%; left: 15%; }
.v2 { width: 8px; height: 8px; top: 70%; left: 80%; }
.r1 { width: 13px; height: 13px; top: 40%; left: 60%; }
.p1 { top: 10%; left: 50%; }

/* --- Section 3: Why Choose Us (Fixed Tilted Layout) --- */
.choose-section { padding: 100px 0; background: #fff; position: relative; }
.choose-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }
.choose-subtitle { font-family: 'Montserrat'; color: #3D4E8F; font-size: 24px; margin-bottom: 15px; }
.choose-title { font-size: 32px; font-weight: 600; margin-bottom: 40px; line-height: 1.3; }
.feat-card { display: flex; gap: 20px; margin-bottom: 30px; }
.feat-icon { width: 45px; height: 45px; flex-shrink: 0; }
.feat-icon img { width: 100%; }
.feat-info h4 { color: #3D4E8F; font-size: 18px; margin-bottom: 5px; }
.feat-info p { color: #646464; font-size: 14px; line-height: 1.5; }

.choose-image-side { position: relative; height: 400px; }
.tilted-frame { position: absolute; border: 8px solid #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); overflow: hidden; }
.frame-1 { width: 280px; height: 320px; right: 0; top: 0; transform: rotate(3deg); z-index: 2; }
.frame-2 { width: 230px; height: 230px; left: 0; bottom: 0; transform: rotate(-5deg); z-index: 1; }
.tilted-frame img { width: 100%; height: 100%; object-fit: cover; }

/* --- Section 4: Our Solutions --- */
.solutions-section { padding: 80px 0; background: #fff; }
.sol-subtitle { font-family: 'Montserrat'; color: #3D4E8F; font-size: 22px; text-align: center; margin-bottom: 10px; }
.sol-title { font-size: 28px; text-align: center; margin-bottom: 50px; }
.solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.solution-card { background: #FAFAFA; border: 0.5px solid #B6BFCB; border-radius: 30px; padding: 40px 25px; text-align: center; transition: 0.3s; }
.solution-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.card-icon-box { width: 48px; height: 48px; margin: 0 auto 20px; }
.card-icon-box img { width: 100%; }
.card-title { font-family: 'Source Sans Pro'; font-weight: 600; color: #364A6F; margin-bottom: 15px; }
.card-desc { font-family: 'Source Sans Pro'; color: #646464; font-size: 15px; line-height: 1.4; }

/* --- Section 5: Contact CTA --- */
.cta-section { padding: 50px 0 100px; }
.cta-banner { max-width: 1200px; margin: 0 auto; border-radius: 16px; padding: 80px 40px; text-align: center; color: white; }
.cta-label { font-family: 'Montserrat'; font-size: 24px; margin-bottom: 20px; }
.cta-main-text { font-family: 'Montserrat'; font-size: 32px; line-height: 1.4; max-width: 700px; margin: 0 auto 20px; }
.cta-sub-text { font-family: 'Montserrat'; font-size: 16px; max-width: 600px; margin: 0 auto 40px; opacity: 0.9; }
.cta-buttons { display: flex; justify-content: center; gap: 20px; }
.btn-trial { background: #3D4E8F; color: white; padding: 12px 30px; border-radius: 8px; text-decoration: none; }
.btn-contact { border: 1px solid white; color: white; padding: 12px 30px; border-radius: 8px; text-decoration: none; }

/* --- Footer --- */
.footer { background: #364A6F; color: white; padding: 60px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 100px; margin-bottom: 40px; }
.footer-logo { width: 120px; margin-bottom: 20px; }
.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 15px; }
.footer-links a { color: white; text-decoration: none; opacity: 0.8; }
.footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; font-size: 14px; opacity: 0.6; }

/* Responsive */
@media (max-width: 992px) {
    .about-grid, .choose-grid, .solutions-grid, .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .choose-image-side { height: 500px; margin-top: 30px; }
    .frame-1 { right: 10%; } .frame-2 { left: 10%; }
    .cta-main-text { font-size: 24px; }
}
/* --- Responsive & Mobile Menu --- */

/* إخفاء زر المنيو في الويب */
.menu-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    transition: 0.3s;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex; /* يظهر فقط في الموبايل */
        z-index: 1001;
    }

    .nav-links {
        position: fixed;
        right: -100%; /* مخفي خارج الشاشة */
        top: 0;
        flex-direction: column;
        background: #1E2C35; /* نفس لون الهيرو */
        width: 70%;
        height: 100vh;
        padding-top: 100px;
        transition: 0.4s;
        box-shadow: -5px 0 15px rgba(0,0,0,0.3);
        z-index: 1000;
        align-items: center;
    }

    /* تغيير شكل الزر عند الفتح X */
    #mobile-menu.is-active .bar:nth-child(2) { opacity: 0; }
    #mobile-menu.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    #mobile-menu.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* جعل السكاشن عمودية في الموبايل */
    .about-grid, .choose-grid, .solutions-grid, .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .hero-title { font-size: 40px; }
    .hero-subtitle { font-size: 30px; }
    
    .tilted-frame {
        position: relative;
        transform: none !important;
        margin: 10px auto;
        width: 90% !important;
        height: 250px !important;
        right: auto; left: auto; top: auto; bottom: auto;
    }
    
    .choose-image-side { height: auto; }
}
/* --- Desktop stays the same --- */

@media (max-width: 768px) {
    /* 1. ضبط الحاويات الرئيسية */
    .container {
        padding: 0 15px;
    }

    /* 2. الهيرو سكشن */
    .hero-section {
        height: auto;
        min-height: 500px;
        padding-bottom: 50px;
    }
    .hero-title {
        font-size: 28px !important; /* تصغير العنوان ليناسب الشاشة */
        padding: 0 10px;
    }
    .hero-subtitle {
        font-size: 18px !important;
    }

    /* 3. إصلاح شبكة "Who We Are" */
    .about-grid {
        display: flex !important;
        flex-direction: column !important; /* ترتيب العناصر تحت بعض */
        gap: 20px;
    }
    .image-column {
        flex-direction: row !important; /* الصور بجانب بعضها في الموبايل */
        justify-content: center;
    }
    .img-box {
        width: 45% !important;
        height: 150px !important;
    }

   
    /* 5. إصلاح كروت الحلول (Solutions) */
    .solutions-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* كرت واحد في كل سطر */
        gap: 20px;
    }
    .solution-card {
        padding: 30px 20px !important;
    }

    /* 6. الفوتر والـ CTA */
    .cta-banner {
        padding: 40px 20px !important;
    }
    .cta-main-text {
        font-size: 22px !important;
    }
    .cta-buttons {
        flex-direction: column; /* الأزرار تحت بعضها */
        gap: 15px;
    }
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        text-align: center;
        gap: 40px;
    }
    .footer-links ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* 7. إخفاء العناصر الزائدة التي قد تسبب عرضاً وهمياً (Horizontal Scroll) */
    body {
        overflow-x: hidden;
    }
}
/* --- Section Base --- */
.choose-section-fixed {
    position: relative;
    width: 100%;
    height: 550px; /* زيادة بسيطة لتوفير مساحة */
    background: #F8F8F8;
    overflow: hidden;
}

.choose-container {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

/* --- النصوص بالبكسل --- */
.figma-h5-fixed {
    position: absolute; width: 195px; left: 192px; top: 71px;
    font-family: 'Montserrat'; font-weight: 600; font-size: 24px; color: #3D4E8F;
}

.figma-h2-fixed {
    position: absolute; width: 483px; left: 192px; top: 106px;
    font-family: 'Poppins'; font-weight: 500; font-size: 24px; line-height: 32px; color: #353844;
}

.feat-item { position: absolute; left: 192px; display: flex; gap: 12px; }
.feat-item:nth-of-type(1) { top: 212px; }
.feat-item:nth-of-type(2) { top: 326px; }

.feat-icon-fixed { width: 40px; height: 40px; background: #3D4E8F; border-radius: 4px; flex-shrink: 0; }
.feat-info-fixed h4 { font-family: 'Poppins'; font-weight: 500; font-size: 20px; color: #3D4E8F; margin-bottom: 5px; }
.feat-info-fixed p { font-family: 'Poppins'; font-size: 16px; color: #646464; width: 380px; }

/* --- الصور بالبكسل والزوايا --- */

/* الصورة الصغيرة thumb */
.figma-thumb {
    position: absolute;
    width: 230.68px; height: 230.68px;
    left: 850px; top: 112.55px;
    background: url('../assets/wifi-img.jpg') center/cover;
    border: 8px solid #FFFFFF;
    box-shadow: -10px 13px 20px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    transform: rotate(-4deg);
    z-index: 2;
}

/* الإطار الكبير 87 */
.figma-frame-large {
    position: absolute;
    width: 313px; height: 341.49px;
    left: 1023px; top: 47px;
    background: #F2F2F2;
    border: 8px solid #FFFFFF;
    box-shadow: -10px 13px 20px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    transform: rotate(3deg);
    z-index: 1;
}

/* الصورة داخل الإطار الكبير */
.figma-inner-img {
    position: absolute;
    width: 293.17px; height: 323.99px;
    left: 9.92px; top: 9.04px;
    background: url('../assets/business-img.jpg') center/cover;
    border-radius: 20px;
    transform: rotate(3.12deg);
}

/* --- Responsive (الموبايل) --- */
@media (max-width: 768px) {
    .choose-section-fixed { height: auto; padding: 50px 20px; }
    
    .figma-h5-fixed, .figma-h2-fixed, .feat-item, .figma-thumb, .figma-frame-large {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        transform: none !important; /* إلغاء الزوايا لتسهيل الرؤية في الموبايل */
        margin-bottom: 20px;
    }

    .feat-info-fixed p { width: 100%; }
    
    .choose-images-fixed {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 40px;
    }

    .figma-thumb { width: 230px !important; height: 230px !important; }
    .figma-frame-large { width: 280px !important; height: 300px !important; }
    .figma-inner-img { width: 93% !important; height: 93% !important; left: 3.5% !important; top: 3.5% !important; }
}
/* --- التنسيق الأساسي --- */
.mobile-choose-img { display: none; } /* مخفية افتراضياً في الويب */

/* --- كود الويب (الشاشات الكبيرة) --- */
@media (min-width: 1200px) {
    .choose-section-fixed {
        position: relative;
        width: 1440px;
        height: 452px;
        margin: 0 auto;
        background: #F8F8F8;
    }

    .desktop-only { display: block !important; }
    
    /* (بقية أكواد البكسل التي أرسلتيها سابقاً للصور والنصوص تظل هنا كما هي) */
    .figma-thumb { position: absolute; left: 850px; top: 112.55px; width: 230px; height: 230px; rotate: -4deg; }
    .figma-frame-large { position: absolute; left: 1023px; top: 47px; width: 313px; height: 341px; rotate: 3deg; }
}

/* --- كود الموبايل (الشاشات الصغيرة) --- */
@media (max-width: 1199px) {
    .choose-section-fixed {
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* إخفاء صور الفيجما المتداخلة */
    .desktop-only {
        display: none !important;
    }

    /* إظهار وتنسيق صورة الموبايل */
    .mobile-choose-img {
        display: block;
        width: 100%;
        max-width: 350px;
        margin-top: 30px;
    }

    .mobile-choose-img img {
        width: 100%;
        height: auto;
        border-radius: 15px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    /* جعل النصوص والمميزات مرنة */
    .figma-h5-fixed, .figma-h2-fixed, .feat-item {
        position: static !important;
        width: 100% !important;
        margin-bottom: 20px;
    }
    .feat-item { flex-direction: column; align-items: center; }
}
/* --- الإعدادات الافتراضية --- */
.desktop-images-group { display: none; }
.mobile-single-image { display: none; }

/* --- [1] كود الويب (أكبر من 992 بكسل) --- */
@media (min-width: 992px) {
    .choose-section-fixed {
        position: relative;
        width: 1440px;
        height: 452px;
        margin: 0 auto;
        background: #F8F8F8;
    }

    /* إظهار صور الويب وإخفاء صورة الموبايل */
    .desktop-images-group { display: block; }
    .mobile-single-image { display: none !important; }

    /* تنسيق صور الويب (أرقام الفيجما) */
    .figma-thumb {
        position: absolute; width: 230.68px; height: 230.68px;
        left: 850px; top: 112.55px; transform: rotate(-4deg);
        background: url('../assets/img1.jpg') center/cover;
        border: 8px solid #fff; border-radius: 20px; z-index: 2;
        box-shadow: -10px 13px 20px rgba(0, 0, 0, 0.1);
    }
    .figma-frame-large {
        position: absolute; width: 313px; height: 341.49px;
        left: 1023px; top: 47px; transform: rotate(3deg);
        background: #F2F2F2; border: 8px solid #fff; border-radius: 20px; z-index: 1;
    }
    .figma-inner-img {
        position: absolute; width: 293px; height: 323px;
        left: 10px; top: 10px; transform: rotate(3deg);
        background: url('../assets/img2.jpg') center/cover; border-radius: 20px;
    }

    /* تنسيق النصوص (أرقام الفيجما) */
    .figma-h5-fixed { position: absolute; left: 192px; top: 71px; font-size: 24px; color: #3D4E8F; }
    .figma-h2-fixed { position: absolute; left: 192px; top: 106px; font-size: 24px; width: 483px; }
    .feat-item.one { position: absolute; left: 192px; top: 212px; display: flex; }
    .feat-item.two { position: absolute; left: 192px; top: 326px; display: flex; }
}

/* --- [2] كود الموبايل (أصغر من 991 بكسل) --- */
@media (max-width: 991px) {
    .choose-section-fixed {
        background: #F8F8F8;
        padding: 40px 20px;
        text-align: center;
    }

    /* إخفاء صور الويب وإظهار صورة الموبايل الواحدة */
    .desktop-images-group { display: none !important; }
    .mobile-single-image { 
        display: block; 
        margin: 30px auto 0;
        width: 100%;
        max-width: 380px;
    }
    .mobile-single-image img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }

    /* جعل النصوص تنساب بشكل طبيعي */
    .figma-h5-fixed, .figma-h2-fixed, .feat-item {
        position: static !important;
        margin-bottom: 20px;
        width: 100% !important;
    }
    .feat-item { flex-direction: column; align-items: center; }
}
@media (max-width: 991px) {
    /* ... الأكواد السابقة ... */

    .feat-item {
        position: static !important;
        width: 100% !important;
        display: flex !important; /* التأكد من أنها Flex */
        flex-direction: row !important; /* لجعل الأيقونة بجانب النص */
        align-items: flex-start; /* محاذاة الأيقونة مع أول سطر في النص */
        text-align: left; /* جعل النص يبدأ من اليسار */
        gap: 15px; /* المسافة بين الأيقونة والنص */
        margin-bottom: 25px;
    }

    .feat-icon-fixed {
        width: 40px;
        height: 40px;
        flex-shrink: 0; /* منع الأيقونة من صغر حجمها عند كثرة النص */
        background: #3D4E8F;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .feat-info-fixed {
        text-align: left; /* التأكد من أن العنوان والوصف يبدآن من اليسار */
    }

    .feat-info-fixed h4 {
        margin-top: 0;
        margin-bottom: 5px;
        font-size: 18px;
    }

    .feat-info-fixed p {
        width: 100% !important;
        margin: 0;
        font-size: 14px;
    }
}
/* --- SECTION 2: ABOUT (Fully Responsive Version) --- */

/* [1] Desktop Version - Kept exactly as your Figma code */
@media (min-width: 1025px) {
    .about-section {
        position: relative;
        padding: 100px 0;
        background: #FFFFFF;
        overflow: hidden;
    }
    .about-grid {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 5;
    }
    /* Fixed sizes for desktop images */
    .img-large { width: 270px; height: 190px; }
    .img-small { width: 177px; height: 137px; margin-top: 30px; }
    .left-small { margin-left: 50px; }
    .right-small { margin-right: 50px; }
}

/* [2] Mobile & Tablet Version - THE FIX */
@media (max-width: 1024px) {
    .about-section {
        padding: 50px 15px !important;
        height: auto !important;
    }

    .about-grid {
        display: flex !important;
        flex-direction: column !important; /* Stack columns vertically */
        align-items: center !important;
        gap: 30px !important;
    }

    /* Reset Typography for Mobile */
    .figma-h2 {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    .figma-p {
        max-width: 100% !important;
        font-size: 14px !important;
        padding: 0 10px;
    }

    /* Fix Image Columns for Mobile */
    .image-column {
        display: flex !important;
        flex-direction: row !important; /* Side by side on mobile */
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* Force Resize of Figma Fixed Widths */
    .about-img-box {
        position: static !important; /* Remove any absolute positioning */
        width: 45% !important; /* Allow two images to sit side-by-side */
        height: 120px !important;
        margin: 0 !important;
    }

    .img-large, .img-small {
        width: 100% !important;
        height: 120px !important;
        margin: 0 !important;
    }

    /* Hide Decorations on Mobile to prevent side-scrolling */
    .figma-decoration, .oval, .rect, .plus {
        display: none !important;
    }
}
/* إخفاء زر الموبايل في وضع الويب */
.menu-toggle {
    display: none; 
    cursor: pointer;
}

/* تنسيق النوافذ للشاشات الكبيرة */


/* تنسيق الموبايل */
@media (max-width: 991px) {
    .menu-toggle {
        display: block; /* إظهار الزر في الموبايل فقط */
        z-index: 1001;
    }

    .nav-links {
        display: none; /* إخفاء المنيو العادي */
        flex-direction: column;
        position: fixed;
        right: 0;
        top: 0;
        background: #364A6F; /* لون مناسب للمنيو */
        width: 70%;
        height: 100vh;
        z-index: 1000;
        padding-top: 80px;
    }

    .nav-links.active {
        display: flex; /* إظهاره عند الضغط على الزر */
    }
}
/* --- Navbar Base --- */
.navbar {
    position: relative;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 500;
}

/* إخفاء زر التوجل في الويب */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 1100;
}

.menu-toggle .bar {
    width: 30px;
    height: 3px;
    background-color: white;
    transition: 0.3s;
}

/* --- Mobile Responsive (أقل من 991px) --- */
@media (max-width: 991px) {
    .menu-toggle {
        display: flex; /* إظهار الزر الآن */
    }

    .nav-links {
        position: fixed;
        right: -100%; /* مخفية تماماً جهة اليمين */
        top: 0;
        height: 100vh;
        width: 70%;
        background: #1E293B; /* لون غامق للمنيو */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: 0.4s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.3);
    }

    /* عندما يتم الضغط على الزر (بواسطة JS) */
    .nav-links.active {
        right: 0; /* تظهر المنيو */
    }

    /* تحويل زر التوجل لشكل X عند الفتح */
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
.navbar .logo img 
{
width:64px;
}
.hero-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 400;
    margin: 0;
    text-transform: capitalize;
}

.hero-title {
    font-family: 'Palanquin', sans-serif;
    font-size: 40px;
    font-weight: 700;
    margin: 10px 0 0 0;
    text-transform: capitalize;
}