:root {

    --yellow: #f8c535;

    --yellow-hover: #fdb500;

    --dark: #010101 !important;

    --dark-accent: #1A1A1A;

    --light: #F8F8F8;

    --gray: #333333;

    --medium-gray: #666666;

    --text-light: #AAAAAA;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.data {



    margin-top:50px;

  

    

  

    padding:4rem;

  

    font-size:1.4rem;

  

    min-height:62vh;

    color:#fff;

  

    

  

  }

  



section {

    padding: 5rem 7%;

  }

body {

    background-color: var(--dark)!important;

    color: white;

    color:#ddd!important;

    line-height: 1.6;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

    width: 100%;

}





/* Buttons */

.btn-2 {

    display: inline-block;

    padding: 12px 26px;

    border-radius: 100px;

    text-decoration: none;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    letter-spacing: 0.5px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.btn-2-primary {

    background-color: var(--yellow);

    color: var(--dark);

}



.btn-2-primary:hover {

    background-color: var(--yellow-hover);

    transform: translateY(-2px);

    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);

}



.btn-2-outlined {

    border: 1px solid var(--yellow);

    color: var(--yellow);

    background: transparent;

}



.btn-2-outlined:hover {

    background-color: var(--yellow);

    color: var(--dark);

    transform: translateY(-2px);

}



.try-now {

    background-color: var(--yellow);

    color: var(--dark);

    padding: 10px 16px;

    border-radius: 100px;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    display: inline-block;

    transition: all 0.3s ease;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}



.try-now:hover {

    background-color: var(--yellow-hover);

    transform: translateY(-1px);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);

}



/* Mobile Menu Button */

.mobile-menu-btn {

    display: none;

    background: transparent;

    border: none;

    color: white;

    font-size: 24px;

    cursor: pointer;

    padding: 5px;

    transition: all 0.3s ease;

}



.mobile-menu-btn:hover {

    color: var(--yellow);

}



/* Mobile Navigation */

.mobile-nav {

    position: fixed;

    top: 0;

    left: -100%;

    width: 80%;

    max-width: 320px;

    height: 100vh;

    background-color: var(--dark-accent);

    z-index: 2000;

    padding: 60px 30px;

    transition: left 0.3s ease;

    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);

    overflow-y: auto;

}



.mobile-nav.active {

    left: 0;

}



.close-menu {

    position: absolute;

    top: 20px;

    right: 20px;

    background: transparent;

    border: none;

    color: white;

    font-size: 24px;

    cursor: pointer;

    transition: color 0.3s ease;

}



.close-menu:hover {

    color: var(--yellow);

}



.mobile-nav-links {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 30px;

}



.mobile-nav-links a {

    color: white;

    text-decoration: none;

    font-size: 18px;

    padding: 12px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    transition: color 0.3s ease;

}



.mobile-nav-links a:hover {

    color: var(--yellow);

}



.mobile-nav-buttons {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 30px;

}



.mobile-nav-buttons .login {

    color: white;

    text-decoration: none;

    font-size: 16px;

    padding: 10px 0;

    text-align: center;

    transition: color 0.3s ease;

}



.mobile-nav-buttons .login:hover {

    color: var(--yellow);

}



.mobile-nav-buttons .btn {

    text-align: center;

}



.overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    z-index: 1999;

    display: none;

    backdrop-filter: blur(3px);

}



.overlay.active {

    display: block;

}



/* Responsive rules for the navbar */

@media (max-width: 768px) {

    .mobile-menu-btn {

        display: block;

    }

    

    .nav-links, .nav-buttons {

        display: none;

    }

}



/* Header */

header {

    padding: 20px 0;

    position: sticky;

    top: 0;

    background-color: rgb(4 4 4 / 80%);

    backdrop-filter: blur(10px);

    z-index: 1000;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



nav {

    display: flex !important;

    justify-content: space-between;

    align-items: center;

}



.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: bold;

    font-size: 20px;

    color: white;

    text-decoration: none;

    transition: all 0.3s ease;

}



.logo:hover {

    transform: scale(1.05);

}



.logo i {

    color: var(--yellow);

}



.nav-links {

    display: flex;

    gap: 30px;

}



.nav-links a {

    color: white;

    text-decoration: none;

    font-size: 15px;

    position: relative;

    padding: 5px 0;

    transition: all 0.3s ease;

    text-decoration: none !important;

}



.nav-links a::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background-color: var(--yellow);

    transition: width 0.3s ease;

}



.nav-links a:hover {

    color: var(--yellow);

}



.nav-links a:hover::after {

    width: 100%;

}



.nav-buttons {

    display: flex;

    align-items: center;

    gap: 20px;

}



.nav-buttons .login {

    color: white;

    text-decoration: none;

    font-weight: 500;

    transition: color 0.3s ease;

}



.nav-buttons .login:hover {

    color: var(--yellow);

}



/* Hero Section */

.hero {

    padding: 60px 0 40px;

    text-align: center;

}



.hero h1 {

    font-size: 42px;

    font-weight: 700;

    margin-bottom: 20px;

    background: linear-gradient(to right, #FFFFFF, var(--yellow));

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}



.hero-gallery {

    display: grid;

    grid-template-columns: 1fr 2fr 1fr;

    gap: 15px;

    margin: 40px 0;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);

}



.hero-gallery img {

    width: 100%;

    height: 400px;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.hero-gallery img:hover {

    transform: scale(1.03);

}



.hero-text {

    font-size: 16px;

    color: var(--text-light);

    margin-bottom: 30px;

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

}



/* Features Section */

.features {

    padding: 60px 0;

}



.section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 40px;

    flex-wrap: wrap;

    gap: 20px;

}



.section-header h2 {

    font-size: 42px;

    font-weight: 700;

    color: #fff;

}



.feature-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 50px;

    align-items: stretch; /* ensures equal height */

}



.feature-card {

    background-color: #040404;

    border-radius: 16px;

    padding: 40px 30px;

    text-align: left;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    position: relative;

    overflow: hidden;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    height: 100%; /* ensures equal height */

}



.feature-card h3.feature-title {

    font-size: 20px;

    margin-bottom: 15px;

    transition: color 0.3s ease;

    min-height: 48px; /* Force 2-line height */

    line-height: 1.2;

}



.feature-card:hover h3.feature-title {

    color: var(--yellow);

}



.feature-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 5px;

    height: 0;

    background-color: var(--yellow);

    transition: height 0.3s ease;

}



.feature-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);

}



.feature-card:hover::before {

    height: 100%;

}



.feature-icon {

    width: 60px;

    height: 60px;

    background-color: rgba(139, 255, 0, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    transition: all 0.3s ease;

}



.feature-card:hover .feature-icon {

    background-color: rgba(139, 255, 0, 0.2);

}



.feature-icon i {

    color: var(--yellow);

    font-size: 24px;

}



.feature-card h3 {

    font-size: 20px;

    margin-bottom: 15px;

    transition: color 0.3s ease;

}



.feature-card:hover h3 {

    color: var(--yellow);

}



.feature-card p {

    color: var(--text-light);

    font-size: 15px;

    line-height: 1.7;

}



/* Image Comparison Section */

.ds-comparison-section {

    font-family: Arial, sans-serif;

    padding: 40px 0;

}



.ds-comparison-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px;

}



.ds-comparison-heading {

    font-size: 42px;

    margin-bottom: 50px;

    text-align: center;

    color: #fff;

}



.ds-slider-wrapper {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;

}



.ds-image-slider {

    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.ds-slider-before-img, .ds-slider-after-img {

    width: 100%;

    display: block;

    height: auto;

}



.ds-slider-after-img {

    position: absolute;

    top: 0;

    left: 0;

    width: 50%;

    height: 100%;

    object-fit: cover;

    object-position: left;

}



.ds-slider-drag-handle {

    position: absolute;

    top: 0;

    left: 50%;

    width: 40px;

    height: 100%;

    transform: translateX(-50%);

    cursor: ew-resize;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

}



.ds-slider-control-btn {

    width: 40px;

    height: 40px;

    background-color: #f8c535;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

}



.ds-slider-control-btn svg {

    fill: white;

}



.ds-slider-divider {

    position: absolute;

    top: 0;

    left: 50%;

    width: 2px;

    height: 100%;

    background-color: #f8c535;

    transform: translateX(-50%);

    pointer-events: none;

}



.ds-slider-ai-badge {

    position: absolute;

    bottom: 15px;

    right: 15px;

    background-color: #f8c535;

    color: black;

    font-weight: bold;

    padding: 5px 12px;

    border-radius: 4px;

    font-size: 14px;

}



.ds-secondary-sliders {

    display: flex;

    gap: 20px;

    margin-top: 20px;

    justify-content: center;

    flex-wrap: wrap;

}



.ds-secondary-sliders .ds-image-slider {

    flex: 1;

    min-width: 280px;

}

/* Advisor Section Styling */

.advisor-section {

    background-color: #000;

    color: #fff;

    padding: 60px 20px;

    text-align: center;

  }

  

  .advisor-section h1 {

    font-size: 42px;

    font-weight: 700;

    color: #fff;

  }

  

  .advisor-form {

    max-width: 600px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 15px;

  }

  

  .advisor-form label {

    text-align: left;

    font-weight: bold;

    color: #fff;

  }

  

  .advisor-form select,

  .advisor-form textarea {

    padding: 10px;

    border: none;

    border-radius: 8px;

    background-color: #1a1a1a;

    color: #fff;

    font-size: 14px;

    width: 100%;

  }

  

  .advisor-form select:focus,

  .advisor-form textarea:focus {

    outline: 2px solid #ffea00;

  }

  

  .advisor-form textarea {

    resize: vertical;

    min-height: 100px;

  }

  

  .advisor-form button {

    padding: 12px 25px;

    background-color: #ffea00;

    color: #000;

    border: none;

    border-radius: 25px;

    font-weight: bold;

    font-size: 16px;

    cursor: pointer;

    margin: auto;

    transition: background 0.3s ease;

  }

  

  .advisor-form button:hover {

    background-color: #fff200;

  }

  



/* Upscale Section */

.upscale .container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



.upscale .try-now {

    background-color: #f8c535;

    color: #000000;

    text-decoration: none;

    padding: 10px 24px;

    border-radius: 30px;

    font-weight: 600;

    font-size: 16px;

    transition: all 0.3s ease;

}



.upscale .try-now:hover {

    background-color: rgb(255, 215, 83);

}



.container > p {

    font-size: 18px;

    line-height: 1.6;

    max-width: 800px;

    margin-bottom: 40px;

    color: #c5c5c5;

}

.audience-section {

            background: #0a0a0a;

            padding: 100px 0;

            position: relative;

        }



        .audience-header {

            text-align: center;

            margin-bottom: 80px;

        }



        .audience-title {

               font-size: 42px;

    font-weight: 700;

    color: #fff;

    text-align: left;

        }



        .audience-subtitle {

               font-size: 18px;

    line-height: 1.6;

    max-width: 800px;

    margin-bottom: 40px;

    color: #c5c5c5;

    text-align: left;



        }



        .audience-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

            gap: 40px;

            margin-top: 60px;

        }



        .audience-card {

            background: #040404;

            border-radius: 16px;

            padding: 40px 35px;

            text-align: center;

            transition: all 0.3s ease;

            position: relative;

        }



        .audience-card::before {

            content: '';

            position: absolute;

            top: -2px;

            left: -2px;

            right: -2px;

            bottom: -2px;

            /* background: linear-gradient(135deg, #ffc107, #ff9800); */

            border-radius: 18px;

            z-index: -1;

            opacity: 0;

            transition: opacity 0.3s ease;

        }



        .audience-card:hover::before {

            opacity: 1;

        }



        .audience-card:hover {

            transform: translateY(-5px);

            background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.08) 100%);

        }



        .audience-icon {

            width: 70px;

            height: 70px;

            background:#FDD700;

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 0 auto 25px;

            font-size: 28px;

            color: #0a0a0a;

        }



        .audience-card-title {

            font-size: 22px;

            font-weight: 600;

            color: #FDD700;

            margin-bottom: 15px;

        }



        .audience-description {

            font-size: 16px;

            color: #d0d0d0;

            line-height: 1.6;

        }



        .highlight-number {

            font-size: 32px;

            font-weight: 700;

            color: #ffc107;

            display: block;

            margin-bottom: 10px;

        }



        /* Responsive Design */

        @media (max-width: 992px) {

            

            

            .audience-grid {

                grid-template-columns: 1fr;

            }

        }



        @media (max-width: 768px) {

         

            .audience-title {

                font-size: 36px;

            }

            

          

            .audience-section {

                padding: 60px 0;

            }

            

            .section-header,

            .audience-header {

                margin-bottom: 50px;

            }

            

          

            

            .audience-grid {

                gap: 30px;

                margin-top: 40px;

            }

        }



        @media (max-width: 480px) {

            .section-title,

            .audience-title {

                font-size: 28px;

            }

            

           

            .audience-card {

                padding: 30px 25px;

            }

            

            .audience-grid {

                grid-template-columns: 1fr;

            }

        }



.features-wrapper {

    /* display: flex;

    gap: 30px;

    min-height: 500px; */

}



.feature-column {

    flex: 1;

    display: flex;

    flex-direction: column;

}



.upscale .feature-card {

    background-color: #040404;

    border-radius: 12px;

    padding: 30px;

    text-align: center;

    transition: transform 0.3s ease;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

}



.upscale .feature-card:hover {

    transform: translateY(-5px);

}



.upscale .feature-icon {

    background-color: rgba(163, 255, 18, 0.15);

    width: 70px;

    height: 70px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

}



.upscale .feature-icon i {

    color: #f8c535;

    font-size: 24px;

}



.upscale .feature-card h3 {

    font-size: 20px;

    margin-bottom: 12px;

}



.upscale .feature-card p {

    color: #a0a0a0;

    line-height: 1.5;

}



.left-column {

     display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    margin-top: 50px;

}



.right-column {

    height: 100%;

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.left-column .feature-card {

    height: 100%;

}



.right-column .feature-card {

    flex: 1;

    height: calc(50% - 15px);

}



/* FAQ Section */

.faq {

    padding: 80px 0;

}



.faq h2 {

    font-size: 42px;

    font-weight: 700;

    color: #fff;

}



.faq-subtitle {

    color: var(--text-light);

    font-size: 16px;

    margin-bottom: 50px;

}



.faq-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin: 0 auto;

}



.faq-item {

    background-color: rgba(255, 255, 255, 0.05);

    border-radius: 16px;

    padding: 25px;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



.faq-item:hover {

    background-color: rgba(255, 255, 255, 0.08);

    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);

}



.faq-question {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: white;

    font-size: 18px;

    font-weight: 500;

}



.faq-question i {

    color: var(--yellow);

    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);

}



.faq-answer {

    margin-top: 0;

    max-height: 0;

    overflow: hidden;

    color: var(--text-light);

    font-size: 15px;

    line-height: 1.7;

    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    opacity: 0;

}



.faq-item.active {

    background-color: rgba(255, 255, 255, 0.08);

}



.faq-item.active .faq-question {

    color: var(--yellow);

}



.faq-item.active .faq-question i {

    transform: rotate(180deg);

}



.faq-item.active .faq-answer {

    margin-top: 15px;

    max-height: 200px;

    opacity: 1;

}



/* CTA Section */

.cta {

    padding: 100px 0;

    text-align: center;

    background: linear-gradient(rgba(17, 17, 17, 0.85), rgba(17, 17, 17, 0.85)), url('/api/placeholder/1200/400') no-repeat center center;

    background-size: cover;

    border-radius: 20px;

    margin-bottom: 80px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);

}



.cta h2 {

    font-size: 36px;

    margin-bottom: 30px;

    background: linear-gradient(to right, #FFFFFF, var(--yellow));

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}



.cta-features {

    display: flex;

    justify-content: center;

    gap: 40px;

    margin: 40px 0;

    flex-wrap: wrap;

}



.cta-feature {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 16px;

}



.cta-feature i {

    color: var(--yellow);

    font-size: 20px;

}



/* Footer */





/* Mobile Menu */

.mobile-nav {

    position: fixed;

    top: 0;

    left: -100%;

    width: 80%;

    height: 100vh;

    background-color: var(--dark);

    z-index: 2000;

    padding: 50px 30px;

    transition: left 0.3s ease;

    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);

    overflow-y: auto;

}



.mobile-nav.active {

    left: 0;

}



.close-menu {

    position: absolute;

    top: 20px;

    right: 20px;

    background: transparent;

    border: none;

    color: white;

    font-size: 24px;

    cursor: pointer;

}



.mobile-nav-links {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 50px;

}



.mobile-nav-links a {

    color: white;

    text-decoration: none;

    font-size: 18px;

    padding: 10px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.mobile-nav-buttons {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 30px;

}



.overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    z-index: 1999;

    display: none;

}



.overlay.active {

    display: block;

}



/* Responsive Styles */

@media (max-width: 1200px) {

    .container {

        padding: 0 30px;

    }

    

    .hero h1 {

        font-size: 36px;

    }

}



@media (max-width: 992px) {

    .feature-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .hero-gallery {

        grid-template-columns: 1fr 1fr;

    }

    

    .hero-gallery img {

        height: 350px;

    }

    

    .section-header {

        text-align: center;

        justify-content: center;

    }

    

    .section-header h2 {

        font-size: 36px;

    }

    

    .features-wrapper {

        flex-direction: column;



        height: auto;

    }

    

    .left-column .feature-card,

    .right-column .feature-card {

        height: auto;

        min-height: 200px;

    }

}



@media (max-width: 768px) {

    .mobile-menu-btn {

        display: block;

    }

    

    .nav-links, .nav-buttons {

        display: none;

    }

    

    .hero h1 {

        font-size: 32px;

    }

    

    .hero-gallery {

        grid-template-columns: 1fr;

    }

    

    .hero-gallery img {

        height: 300px;

    }

    

    .feature-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    

    .cta-features {

        flex-direction: column;

        align-items: center;

        gap: 20px;

    }

    

    .footer-content {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }

    

    .faq-question {

        font-size: 16px;

    }

    

    .section-header h2 {

        font-size: 32px;

    }

    

    .faq h2 {

        font-size: 32px;

        text-align: center;

    }

    

    .faq-subtitle {

        text-align: center;

    }

    

    .ds-comparison-heading {

        font-size: 32px;

    }

    

    .cta {

        padding: 60px 20px;

        margin: 0 20px 60px;

    }

    

    .cta h2 {

        font-size: 28px;

    }

}



@media (max-width: 576px) {

    .container {

        padding: 0 20px;

    }

    

    .hero {

        padding: 40px 0 30px;

    }

    

    .hero h1 {

        font-size: 28px;

    }

    

    .hero-text {

        font-size: 14px;

    }

    

    .btn-2 {

        padding: 10px 20px;

        font-size: 14px;

        text-align: center;

    }

    

    .feature-card {

        padding: 30px 20px;

    }

    

    .footer-links {

        gap: 15px;

    }

    

    .ds-secondary-sliders .ds-image-slider {

        min-width: 100%;

    }

    

    .cta {

        border-radius: 15px;

        padding: 50px 15px;

    }

    

    .upscale .feature-card {

        padding: 20px;

    }

}

    



.signup-wrapper{



    padding: 4rem; 

  

    height: 100%;

  

    display: flex;

  

    justify-content: center;

  

    align-items: center;

  

  

  

   }

            .signup-form{



                margin-top: 60px;

                position: relative;

                width: 100%;

                max-width: 600px;

                padding: 60px 40px 40px;

                background: #000000;

                border: 2px solid #f8c535;

                border-radius: 10px;

                color: #fff;

                box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);

              

               }

              

              

              

              .signup-form h2 {

              

                text-align: center;

              

                letter-spacing: 4px;

              

                margin-bottom: 2rem;

              

                font-size: 2.4rem;

              

                color: #f8c535;

              

              }

              

              .signup-form .input-group {

              

                position: relative;

              

                width:100%;

              

              }

              

              .signup-form .input-group input,textarea,select {

              

                width: 100%;

              

                padding: 10px 0;

              

                font-size: 1.6rem;

              

                color:#ddd;

              

                letter-spacing: 1px;

              

                margin-bottom: 30px;

              

                border: none;

              

                border-bottom: 1px solid #4a4a4a;

              

                outline: none;

              

                background-color: transparent;

              

                resize: none;

              

              }

              

              .signup-form .input-group label{

              

                  color: #fff;

              

                  font-size: 1.6rem;

              

              }

              

              .submit-btn {

              

                 display: block;

              

                 margin-left: auto;

              

                 border: none;

              

                 outline: none;

              

                 background: #f8c535;

              

                 font-size: 1.4rem;

              

                 text-transform: uppercase;

              

                 letter-spacing: 1px;

              

                 padding: 10px 20px;

              

                 border-radius: 5px;

              

                 color: #040404;

              

                 cursor: pointer;

              

                 margin-bottom: 1.2rem;

              

               }

              

                /* login-form */

              

              .login-wrapper {

              

                  padding:7rem ;

              

               

              

                 display: flex;

              

                 justify-content: center;

              

                 align-items: center;

              

               }

              

               .form {

              

              

                margin-top:40px;

              

                 position: relative;

                 

                 background: #000000;

                 border: 2px solid #f8c535;

              

                 width: 100%;

              

                 max-width: 380px;

              

                 padding: 80px 40px 40px;

              

              

              

                 border-radius: 10px;

              

                 color: #fff;

              

                 box-shadow: 0 15px 25px rgba(0,0,0,0.5);

              

               }

              

               

              

               

              

               .form h2 {

              

                 text-align: center;

              

                 letter-spacing: 4px;

              

                 margin-bottom: 2rem;

              

                 font-size: 2.4rem;

              

                 color: #f8c535;

              

               }

              

               .form .input-group {

              

                 position: relative;

              

               }

              

               .form .input-group input {

              

                 width: 100%;

              

                 padding: 10px 0;

              

                 font-size: 1.6rem;

              

                 color:#ddd;

              

                letter-spacing: 1px;

              

                margin-bottom: 30px;

              

                border: none;

              

                border-bottom: 1px solid #4a4a4a;

              

                 outline: none;

              

                 background-color: transparent;

              

               }

              

               .form .input-group label{

              

                   color: #fff;

              

                   font-size: 1.6rem;

              

               }

              

                /* advertise page */

              

              .content-top{

              

               margin-top:80px;

              

              

              

                text-align: center;

              

                list-style-type: none;

              

               

              

              }

              

              .content-top h2{

              

                color: #fff;

              

                padding: 1rem;

              

                

              

                font-size: 2.1rem;

              

              }

              

              .content-top li{

              

                padding:.5rem;

              

                color: #ddd;

              

                font-size: 1.4rem;

              

              }

              

              .content-top ul{

              

                list-style-type: none;

              

              }

              

              .footer {

                background: #020202;;

              }

              

              .footer .box-container {

                display: -ms-grid;

                display: grid;

                -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit];

                    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

                gap: 2rem;

              }

              

              .footer .box-container .box h3 {

                font-size: 2.2rem;

                text-transform: capitalize;

                color: #fff;

                padding: 1rem 0;

              }

              

              .footer .box-container .box .link {

                display: block;

                padding: .5rem 0;

                font-size: 1.5rem;

                line-height: 2;

                color: #f5f5f5;

                text-transform: capitalize;

              }

              

              .footer .box-container .box .link i {

                padding-right: .5rem;

                  color: #f8da00;;

              }

              

              .footer .box-container .box .link:hover {

                color: var(--yellow-hover);

              }

              

              .footer .box-container .box .link:hover i {

                padding-right: 2rem;

              }

              

              .footer .box-container .box p {

                padding: .5rem 0;

                font-size: 1.5rem;

                line-height: 2;

                color: #777;

              }

              

              .footer .box-container .box p span {

                color: #9a3095;

              }

              

              

              

              .footer .box-container .box .share {

                margin-top: 2rem;

              }

              

              .footer .box-container .box .share a {

                height: 4.5rem;

                width: 4.5rem;

                line-height: 4.5rem;

                font-size: 1.7rem;

                background: #FDB500;

                color: #fff;

                border-radius: 50%;

                margin-right: 0.3rem;

                text-align: center;

              }

              

              .footer .box-container .box .share a:hover {

                background: #FDB500;

              }

              

              .footer .credit {

                font-size: 2rem;

                text-transform: capitalize;

                color: #777;

                margin-top: 3rem;

                padding-top: 3rem;

                border-top: 0.2rem solid #777;

                text-align: center;

              }

              

              .footer .credit span {

                color: #2597f4;

              }

              /*dashboard*/

.dash-container{

    position: relative;

    width:  100%;

    display:flex;

    margin: 0rem auto;

   min-height: 100vh;

  

    

    

  }

  .dash{

      padding:1rem;

  }

  .dash-nav{

    position: absolute;

    top: 0;

    width :280px;

    height: 100%;

    background:#19191a;

    transition: 0.5s;

    overflow: hidden;

  }

  .dash-nav.active{

    width: 0px;

  

  }

  

  .dash-nav ul{

    position: absolute;

    top:0;

    left:0;

    width:100%

  }

  .dash-nav ul li{

    position: relative;

    width:100%;

    list-style: none;

    border-bottom: 1px solid rgb(56 55 55 / 32%);

  }

  .dash-nav ul li:hover{

    background:#0f0f0f;;

    cursor:pointer;

  

  }

  /*.dash-nav ul li:nth-child(1){*/

  /*  margin-bottom:20px ;*/

  /*}*/

  

  .dash-nav ul li:nth-child(1):hover{

    background: #0f0f0f;

  }

  .dash-nav ul li a h2{

    font-size: 15px;

    

   

  }

  .dash-nav .link .dash-title h2{

      margin-top:0px;

      font-weight: 400;

      

   

  

  }

  .dash-nav .link .dash-title h2 i{

    padding-right: 1.2rem;

    font-size: 2rem;

  }

  

  

  

  .dash-nav ul li .link{

     

     padding:.5rem;

    position: relative;

    display: block;

    width: 100%;

    margin-left: 2rem;

    /*display: flex;*/

    text-decoration: none;

    color:#fff;

    font-size: 16px;

    border-bottom:1px solid rgba(0,0,0,0.2);

    

  

  }

  .dash-nav ul li a{

      color:#fff;

      text-decoration:none;

      text-align:left;

      font-size:1.6rem;

  }

  /*.dash-nav ul li a .icon{*/

  /*  position: relative;*/

  /*  display: block;*/

  /*  min-width: 60px;*/

  /*  height: 60px;*/

  /*  line-height: 60px;*/

  /*  text-align: center;*/

  

  /*}*/

  .dash-nav ul li a .icon .fab{

    color: #fff;

    font-size: 15px;

  }

  .dash-nav ul li  .dash-title{

    position: relative;

   

    display: block;

    /* padding: 1rem; */

    /*height: 60px;*/

    line-height: 25px;

    white-space: nowrap;

  }

  .dash-nav ul li a .brand{

    text-transform: uppercase;

    font-size: 15px;

  }

  .main-container{

    position: relative;

    width: calc(100% - 280px);

   

    left:280px;

    /* min-height: 100vh; */

    /*background: #f5f5f5;*/

    transition: 0.5s;

  }

  .main-container.active{

    width: calc(100% - 0px);

    left:0px;

  }

  

  

  .main-container .topbar{

    width: 100%;

    background: rgb(0 0 0 / 35%);

    height: 60px;

    padding-left: 0 10px;

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

  .toggle h4{

    position: absolute;

      top: 18px;

      left: 49px;

      font-size: 2rem;

      color:#fff;

      margin:0;

  }

  table{

    color: #999 !important;

   

  }

  

  .toggle{

    position: relative;

    width: 60px;

    height: 60px;

    

    cursor: pointer;

  }

  .toggle::before{

    content: '\f007';

    font-family: "Font Awesome 5 Free";

    position: absolute;

    width: 100%;

    height: 100%;

    line-height: 60px;

    font-size: 24px;

    text-align: center;

    color: #fff;

  }

  

  

  .cardBox{

    position: relative;

    width: 100%;

   

    padding: 20px;

    display: grid;

    grid-template-columns: repeat(3,1fr);

    grid-gap:20px;

    margin-top: 4rem;

  

  }

  .cardBox .dash-card{

    position: relative;

   background: rgb(0 0 0 / 35%);

    height: 160px;

    padding: 20px;

    /* display: flex;

    justify-content: space-between; */

    cursor: pointer;

    

  }

  .cardBox .dash-card h3{

    color: #fff;

    line-height: 1.4;

  }

  .cardBox .dash-card .top-card{

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: .5rem;

  }

  .cardBox .dash-card .top-card .numbers{

  

    position: relative;

    font-size:1.4rem;

    font-weight: 500;

    padding: 0 1rem;

  }

  .cardBox .dash-card .top-card .numbers h3{

    color:#fff;

    /* line-height: 0.8; */

    font-size: 4rem;

  }

  .cardBox .dash-card .content{

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #666;

    line-height: 1.4;

  }

  .cardBox .dash-card .numbers span{

    /* font-size: 1rem; */

    color:#777;

  }

  .cardBox .dash-card .cardName{

    color:#fff;

  

  

  }

  .cardBox .dash-card  .iconBox{

    width: 10rem;

  }

  .cardBox .dash-card  .iconBox img{

    width: 100%;

  }

  .details{

    position: relative;

    width: 100%;

    padding: 20px;

    padding-top: 0;

        

    display: grid;

    grid-gap: 20px;

    

    grid-template-columns: repeat(2,1fr);

  }

  .card-image{

    position: relative;

    width: 100%;

    padding: 20px;

    padding-top: 0;

    

    display: grid;

    grid-gap: 20px;

    

    grid-template-columns: repeat(1fr);

  }

  

  .card-image .cardHeader{

    position: relative;

    display: grid;

    min-height: 150px;

    background:  rgb(16 12 33);

    padding: 20px;

  

  }

  .card-image .cardHeader img{

    width: 100%;

  }

  .details .recent-details{

    position: relative;

    display: grid;

    min-height: 150px;

    background:  rgb(0 0 0 / 35%);

    padding: 20px;

  }

  .cardHeader .top-card{

    display: flex;

    align-items: center;

    padding-bottom: 2rem;

  }

  .cardHeader .top-card .iconBox{

    width:6rem;

  }

  .cardHeader .top-card .iconBox img{

    width: 100%;

  }

  .cardHeader .top-card .numbers{

    padding: 0 1rem;

    font-size: 2rem;

  }

  .cardHeader .top-card .numbers h3{

    color: #fff;

    /* line-height: 0.8; */

    margin:0;

  }

  .cardHeader .top-card .numbers span{

    color:#999;

    /* font-size: 1rem; */

  }

  .cardHeader h3{

    color: #fff;

    /* font-size: 1.6rem; */

    line-height: 1.4;

    margin:0;

  

  }

  .cardHeader .content{

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #999;

    line-height: 2;

    font-size:1.4rem;

  }

  .dash-btn{

    

    position: relative;

    padding: 5px 10px;

    background: #03a9f4;

    color: #fff;

    text-decoration: none;

    border-radius: 10px;

  }

  .details .right-nav{

    position: relative;

    display: grid;

    height: 100%;

    background: #fff;

    padding: 20px;

  }

  .details .right-nav ul{

    padding: 10px;

    list-style: none;

    border-bottom: 1px solid rgba(0,0,0,0.2);

  }

  .details .right-nav li{

    padding-bottom: 8px;

  }

  .details .right-nav  a{

    text-decoration: none;

  

    color:#03a9f4

  

  }

  @media (max-width: 991px) {

    .dash-nav {

      left: -300px;

    }

  

    .dash-nav.active {

      left: 0;

    }

  

    .main-container {

      width: 100%;

      left: 0px;

    }

  }

  

  @media (max-width: 480px) {

    .dash-nav {

      width: 100%;

      left: -100%;

      z-index: 1;

    }

  

    .dash-nav.active {

      width: 100%;

      left: 0;

    }

  

    .toggle.active {

      z-index: 1;

      right: 0;

      left: 300px;

    }

  

    .toggle.active::before {

      color: #fff;

    }

  

    .dash-ban {

      left: 0;

    }

  

    .dash-bottom {

      left: 0;

    }

  

    .dash-container {

      width: 100%;

    }

  

    .topbar h4 {

      display: block;

    }

  

    .toggle.active h4 {

      display: none;

    }

  }