/* ==========================================
   See You At The Top SEO
   Reconstructed development stylesheet
   Source: style.min.css
   Synchronized with style.min.css.
   ========================================== */

* {
    margin:0;
    padding:0;
    box-sizing:border-box
}
html {
    
    scroll-behavior:smooth;
    

}

#home {
    
    scroll-margin-top:150px;
    

}

#about {
    
    scroll-margin-top:60px;
    

}

#services {
    
    scroll-margin-top:60px;
    

}

#pricing {
    
    scroll-margin-top:60px;
    

}

#contact {
    
    scroll-margin-top:60px;
    

}

body {
    
    font-family:'Poppins',sans-serif;
    
    background:#0B1F3A;
    
    color:#ffffff;
    
    overflow-x:hidden;
    

}
.container {
    width:min(1200px,92%);
    margin:auto
}
header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:90px;
    z-index:1000;
    background:rgba(8,20,39,.80);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.08)
}
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    height: 100%;
}
.logo {
    
	text-decoration: none;
    
	color: #ffffff;
    
	font-size: 24px;
    
	font-weight: 800;
    
	line-height: 1.1;
    
	letter-spacing: 1px;
    
	text-align: center;
    

}
.logo span {
    color:#1E88E5
}
nav ul {
    display:flex;
    gap:35px;
    list-style:none
}
nav a {
    text-decoration:none;
    color:#ffffff;
    font-weight:500;
    transition:.3s
}
nav a:hover {
    color:#1E88E5
}
.header-btn {
    text-decoration:none;
    background:#1E88E5;
    color:#ffffff;
    padding:14px 24px;
    border-radius:40px;
    font-weight:600;
    transition:.3s
}
.header-btn:hover {
    transform:translateY(-3px);
    background:#42A5F5
}
.hero {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:40px 20px 80px;
    overflow:hidden
}
.hero-content {
    position:relative;
    z-index:2;
    max-width:850px;
    width:100%;
    margin:0 auto;
    transform:translateY(-70px);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center
}
.hero-overlay {
    position:absolute;
    inset:0;
    background:rgba(8,20,39,.75);
    z-index:1
}
.hero h1 {
    width:100%;
    text-align:center;
    font-size:3.5rem;
    line-height:1.1;
    margin:0 auto 25px
}
.hero p {
    width:100%;
    max-width:700px;
    text-align:center;
    margin:0 auto 40px;
    font-size:1.2rem;
    line-height:1.8;
    color:#d9d9d9
}
.hero-buttons {
    display:flex;
    justify-content:center;
    gap:20px
}
.btn-primary,.btn-secondary {
    text-decoration:none;
    padding:18px 36px;
    border-radius:50px;
    font-weight:600;
    transition:.35s
}
.btn-primary {
    background:#1E88E5;
    color:#ffffff
}
.btn-primary:hover {
    background:#42A5F5;
    transform:translateY(-4px)
}
.btn-secondary {
    border:2px solid white;
    color:white
}
.btn-secondary:hover {
    background: white;
    color: #0B1F3A;
}
@media(max-width:992px) {
    header {
        height:auto;
    }

    header .container {
        flex-direction:column;
        justify-content:center;
        height:auto;
        padding:20px 0 16px;
        gap:8px;
    }

    nav ul {
        flex-wrap:wrap;
        justify-content:center;
        gap:18px;
    }

    .hero h1 {
        font-size:52px;
    }
}
@media (max-width:768px) {
    .hero {
        padding:180px 20px 80px
    }
    .hero h1 {
        font-size:42px
    }
    .hero p {
        font-size:1rem
    }
    .hero-buttons {
        flex-direction:column;
        align-items:center
    }
    .header-btn {
        display:none
    }
}
@media(max-width:480px) {
    .logo {
        font-size:20px
    }
    .hero {
        padding:180px 20px 80px
    }
    .hero h1 {
        font-size:34px
    }
}
.about {
    padding:100px 20px;
    background:#102746
}
.section-title {
    text-align:center;
    font-size:2.5rem;
    margin-bottom:30px;
    font-weight:700
}
.section-title span {
    color:#1E88E5
}
.about-text {
    max-width:800px;
    margin:0 auto;
    text-align:center;
    font-size:1.2rem;
    line-height:1.8;
    color:#d9d9d9
}
@media(max-width:768px) {
    .section-title {
        font-size:2rem
    }
    .about-text {
        font-size:1rem
    }
    
}
.services {
    padding:100px 20px;
    background:#0B1F3A
}
.services-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-top:60px
}
.service-card {
    background:#102746;
    padding:40px 30px;
    border-radius:20px;
    text-align:center;
    transition:.35s;
    border:1px solid rgba(255,255,255,.08)
}
.service-card:hover {
    transform:translateY(-8px);
    border-color:#1E88E5;
    box-shadow:0 15px 35px rgba(30,136,229,.25)
}
.service-icon {
    font-size:48px;
    margin-bottom:20px
}
.service-card h3 {
    font-size:1.5rem;
    margin-bottom:15px
}
.service-card p {
    color:#d9d9d9;
    line-height:1.7
}
@media(max-width:768px) {
    .services {
        padding:100px 20px
    }
    .service-card {
        padding:30px 25px
    }
    
}
.why-us {
    padding:100px 20px;
    background:#102746
}
.why-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:30px;
    margin-top:60px
}
.why-card {
    background:#0B1F3A;
    border-radius:20px;
    padding:35px;
    text-align:center;
    transition:.35s;
    border:1px solid rgba(255,255,255,.08)
}
.why-card:hover {
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(30,136,229,.25);
    border-color:#1E88E5
}
.why-icon {
    font-size:48px;
    margin-bottom:20px
}
.why-card h3 {
    margin-bottom:15px;
    font-size:1.4rem
}
.why-card p {
    color:#d9d9d9;
    line-height:1.7
}
.results {
    padding:100px 20px;
    background:#0B1F3A
}
.results-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
    margin-top:60px
}
.result-card {
    background:#102746;
    border-radius:20px;
    padding:40px 20px;
    text-align:center;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s
}
.result-card:hover {
    transform:translateY(-8px);
    border-color:#1E88E5;
    box-shadow:0 15px 35px rgba(30,136,229,.25)
}
.result-card h3 {
    font-size:3rem;
    color:#1E88E5;
    margin-bottom:15px;
    font-weight:700
}
.result-card p {
    color:#d9d9d9;
    font-size:1rem
}
.process {
    padding:100px 20px;
    background:#102746
}
.process-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:60px
}
.process-card {
    background:#0B1F3A;
    padding:40px 30px;
    border-radius:20px;
    text-align:center;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s
}
.process-card:hover {
    transform:translateY(-8px);
    border-color:#1E88E5;
    box-shadow:0 15px 35px rgba(30,136,229,.25)
}
.process-number {
    width:70px;
    height:70px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#1E88E5;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:700
}
.process-card h3 {
    margin-bottom:15px;
    font-size:1.5rem
}
.process-card p {
    color:#d9d9d9;
    line-height:1.8
}
.pricing {
    padding:100px 20px;
    background:#0B1F3A
}
.pricing-subtitle {
    text-align:center;
    color:#d9d9d9;
    margin-top:20px;
    font-size:1.1rem
}
.pricing-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:35px;
    margin-top:60px
}
.pricing-card {
    position:relative;
    background:#102746;
    border-radius:20px;
    padding:45px 35px;
    text-align:center;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s
}
.pricing-card:hover {
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(30,136,229,.25)
}
.featured {
    border:2px solid #1E88E5;
    transform:scale(1.05)
}
.featured:hover {
    transform:scale(1.05) translateY(-10px)
}
.featured .btn-secondary {
    border-color: #1E88E5;
    background: rgba(30, 136, 229, 0.12);
}
.featured .btn-secondary:hover {
    background: #1E88E5;
    color: #ffffff;
    border-color: #1E88E5;
}
.badge {
    position:absolute;
    top:-15px;
    left:50%;
    transform:translateX(-50%);
    background:#1E88E5;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-size:.85rem;
    font-weight:600
}
.price {
    font-size:3rem;
    font-weight:700;
    color:#1E88E5;
    margin:25px 0
}
.price span {
    font-size:1rem;
    color:#d9d9d9
}

.billing-note {
    margin:-10px 0 25px;
    color:#d9d9d9;
    font-size:.95rem;
    font-weight:500
}
.pricing-card ul {
    list-style:none;
    padding:0;
    margin:30px 0
}
.pricing-card li {
    margin:15px 0;
    color:#d9d9d9
}
.testimonials {
    padding:100px 20px;
    background:#102746
}
.testimonial-subtitle {
    text-align:center;
    color:#d9d9d9;
    margin-top:20px
}
.testimonial-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
    margin-top:60px
}
.testimonial-card {
    background:#0B1F3A;
    border-radius:20px;
    padding:40px 30px;
    text-align:center;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s
}
.testimonial-card:hover {
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(30,136,229,.20)
}
.featured-testimonial {
    border:2px solid #1E88E5
}
.testimonial-card p {
    color:#d9d9d9;
    line-height:1.8;
    font-style:italic;
    margin-bottom:25px
}
.testimonial-card .testimonial-stars {
    color:#FFD700;
    font-size:1.4rem;
    margin-bottom:10px
}
.testimonial-card span {
    color:#ffffff;
    font-weight:600
}
.faq {
    padding:100px 20px;
    background:#0B1F3A
}
.faq-container {
    max-width:900px;
    margin:60px auto 0
}
.faq-item {
    background:#102746;
    padding:30px;
    border-radius:18px;
    margin-bottom:25px;
    border:1px solid rgba(255,255,255,.08);
    transition:.3s
}
.faq-item:hover {
    border-color:#1E88E5;
    box-shadow:0 10px 25px rgba(30,136,229,.2)
}
.faq-item h3 {
    color:#ffffff;
    margin-bottom:15px;
    font-size:1.3rem
}
.faq-item p {
    color:#d9d9d9;
    line-height:1.8
}
.contact {
    padding:100px 20px;
    background:#102746
}
.contact-subtitle {
    text-align:center;
    color:#d9d9d9;
    margin-top:20px;
    margin-bottom:60px
}
.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:start
}
.contact-info h3 {
    font-size:2rem;
    margin-bottom:25px
}
.contact-info p {
    color:#d9d9d9;
    line-height:1.8;
    margin-bottom:25px
}
.contact-form {
    display:flex;
    flex-direction:column;
    gap:20px
}
.contact-form input,.contact-form textarea {
    width:100%;
    padding:18px;
    border:none;
    border-radius:12px;
    background:#0B1F3A;
    color:#fff;
    font-size:1rem;
    border:1px solid rgba(255,255,255,.08)
}
.contact-form input:focus,.contact-form textarea:focus {
    outline:none;
    border-color:#1E88E5
}
.contact-form textarea {
    resize:vertical
}
@media(max-width:768px) {
    .contact-grid {
        grid-template-columns:1fr
    }
    
}
.footer {
    background:#071728;
    padding:80px 20px 30px
}
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;
    margin-bottom:50px
}
.footer h3,.footer h4 {
    margin-bottom:20px;
    color:#fff
}
.footer p {
    color:#cfcfcf;
    line-height:1.8
}
.footer-contact a,
.footer-contact a:visited,
.footer-contact a:active {
    color: #ffffff;
    text-decoration: none;
}

.footer-contact a:hover {
    color: #1E88E5;
    text-decoration: none;
}
.footer-links ul {
    list-style:none;
    padding:0
}
.footer-links li {
    margin-bottom:12px
}
.footer-links a {
    color:#d9d9d9;
    text-decoration:none;
    transition:.3s
}
.footer-links a:hover {
    color:#1E88E5
}
.footer hr {
    border:none;
    border-top:1px solid rgba(255,255,255,.1);
    margin:30px 0
}
.footer-bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px
}
.back-to-top {
    color:#1E88E5;
    text-decoration:none;
    font-weight:600
}
.back-to-top:hover {
    text-decoration:underline
}
@media(max-width:768px) {
    .footer-grid {
        grid-template-columns:1fr;
        text-align:center
    }
    .footer-bottom {
        flex-direction:column
    }
    
}
.cta {
    padding:100px 20px;
    text-align:center;
    background:linear-gradient(135deg,#102746,#0B1F3A)
}
.cta h2 {
    font-size:2.8rem;
    margin-bottom:20px
}
.cta p {
    max-width:700px;
    margin:0 auto 40px;
    font-size:1.2rem;
    line-height:1.8;
    color:#e5e5e5
}
.cta .btn {
    display:inline-block;
    margin-top:0;
    font-size:1.1rem;
    padding:18px 40px;
    background:#1E88E5;
    color:#ffffff;
    text-decoration:none;
    font-weight:600;
    border-radius:50px;
    transition:.3s
}
.cta .btn:hover {
    background:#42A5F5;
    color:#ffffff;
    transform:translateY(-3px)
}
.reveal {
    opacity:0;
    transform:translateY(0);
    transition:all .8s ease
}
.reveal.active {
    opacity:1;
    transform:translateY(0)
}

.seo-resources {
    padding:80px 20px;
    background:#0B1F3A;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.08)
}

.seo-resources-links {
    margin-top:30px
}

.seo-resources h2 {
    font-size:1.5rem;
    font-weight:600;
    color:#fff;
    margin-bottom:20px
}

.seo-resources-links a {
    display:block;
    color:#d9d9d9;
    text-decoration:none;
    margin-bottom:16px;
    transition:.3s
}

.seo-resources-links a:last-child {
    margin-bottom:0
}

.seo-resources-links a:hover {
    color:#1E88E5
}

.social-follow {
    padding:70px 20px;
    background:#102746;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.08)
}

.social-follow h2 {
    font-size:2.2rem;
    font-weight:700;
    color:#fff;
    margin-bottom:16px
}

.social-follow h2 span {
    color:#1E88E5
}

.social-follow-text {
    max-width:700px;
    margin:0 auto 30px;
    color:#d9d9d9;
    font-size:1rem;
    line-height:1.8
}

.social-icons {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:16px
}

.social-icons a {
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    border:1px solid rgba(255,255,255,.16);
    background:#0B1F3A;
    text-decoration:none;
    transition:.3s
}

.social-icons a:hover {
    color:#fff;
    background:#1E88E5;
    border-color:#1E88E5;
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(30,136,229,.25)
}

.social-icons svg {
    width:22px;
    height:22px;
    fill:currentColor;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round
}




.social-icons .x-icon {
    width:21px;
    height:21px;
    fill:currentColor;
    stroke:none
}
.social-icons .instagram-icon {
    width:22px;
    height:22px;
    fill:none
}
.social-icons .pinterest-icon {
    width:20px;
    height:20px
}
.social-icons .youtube-play {
    fill:#0B1F3A;
    stroke:none
}

.social-icons a:hover .youtube-play {
    fill:#0B1F3A
}

@media(max-width:768px) {
    .seo-resources h2,
    .social-follow h2 {
        font-size:2rem
    }

    .social-follow {
        padding:60px 20px
    }

    .social-icons {
        gap:12px
    }

    .social-icons a {
        width:44px;
        height:44px
    }
}

/* ==========================================
   PayPal subscription checkout
   ========================================== */
.pricing-card > .btn-secondary {
    cursor:pointer
}

.pricing-card:not(.featured) > .btn-secondary {
    display:inline-block;
    background:transparent;
    color:#ffffff;
    font-family:inherit;
    font-size:1rem;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none
}

.pricing-card:not(.featured) > .btn-secondary:hover,
.pricing-card:not(.featured) > .btn-secondary:focus-visible,
.pricing-card:not(.featured) > .btn-secondary:active {
    background:#1E88E5;
    border-color:#1E88E5;
    color:#ffffff;
}

.paypal-modal-open {
    overflow:hidden
}

.paypal-modal {
    position:fixed;
    inset:0;
    z-index:3000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(2,10,20,.82);
    backdrop-filter:blur(8px)
}

.paypal-modal.is-open {
    display:flex
}

.paypal-modal-panel {
    position:relative;
    width:min(460px,100%);
    max-height:90vh;
    overflow-y:auto;
    padding:36px 30px 30px;
    border-radius:22px;
    background:#102746;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 24px 70px rgba(0,0,0,.45);
    text-align:center
}

.paypal-modal-close {
    position:absolute;
    top:12px;
    right:14px;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#ffffff;
    font:inherit;
    font-size:30px;
    line-height:1;
    cursor:pointer
}

.paypal-modal-close:hover,
.paypal-modal-close:focus-visible {
    background:rgba(255,255,255,.08);
    outline:2px solid #1E88E5;
    outline-offset:2px
}

.paypal-modal-eyebrow {
    margin-bottom:8px;
    color:#1E88E5;
    font-size:.85rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase
}

.paypal-modal h2 {
    margin-bottom:10px;
    font-size:1.9rem
}

.paypal-modal-price {
    margin-bottom:14px;
    color:#ffffff;
    font-size:2rem;
    font-weight:700
}

.paypal-modal-price span {
    color:#d9d9d9;
    font-size:1rem;
    font-weight:500
}

.paypal-modal-copy {
    margin:0 auto 24px;
    color:#d9d9d9;
    line-height:1.7
}

.paypal-modal-status {
    min-height:1.5em;
    margin-top:16px;
    color:#d9d9d9;
    font-size:.9rem;
    line-height:1.5
}

@media(max-width:480px) {
    .paypal-modal {
        padding:14px
    }

    .paypal-modal-panel {
        padding:34px 18px 24px;
        border-radius:18px
    }

    .paypal-modal h2 {
        font-size:1.6rem
    }
}
