/*==================================================
Sysguide
style.css
Part 1
==================================================*/

/*==============================
Google Fonts
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@500;600;700;800&display=swap');

/*==============================
CSS Variables
==============================*/

:root{

    --primary:#14b8a6;
    --secondary:#0f172a;
    --accent:#f59e0b;
    --white:#ffffff;
    --black:#0b1120;

    --text:#475569;
    --heading:#0f172a;

    --light:#f8fafc;
    --border:#e2e8f0;

    --gradient:linear-gradient(135deg, #ff7d7d, #b81e1e);

    --shadow:0 15px 40px rgba(15,23,42,.08);

    --transition:.35s ease;

    --radius:18px;

}

/*==============================
Reset
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.7;
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    transition:var(--transition);

}

ul{

    list-style:none;

}

.container{

    width:min(1180px,92%);
    margin:auto;

}

section{

    padding:100px 0;

}

h1,
h2,
h3,
h4{

    color:var(--heading);
    font-family:'Poppins',sans-serif;
    line-height:1.2;

}

p{

    margin-top:18px;

}

/*==============================
Buttons
==============================*/

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    background:var(--gradient);
    color:#fff;
    border-radius:50px;
    font-weight:600;
    box-shadow:0 10px 30px rgba(20,184,166,.25);
    transition:.4s;

}

.btn:hover{

    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(20,184,166,.35);

}

.btn-outline{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 34px;
    border-radius:50px;
    border:2px solid rgba(255,255,255,.25);
    color:#fff;
    backdrop-filter:blur(15px);
    transition:.4s;

}

.btn-outline:hover{

    background:#fff;
    color:var(--secondary);

}

/*==============================
Section Title
==============================*/

.section-title{

    text-align:center;
    max-width:720px;
    margin:auto auto 70px;

}

.section-title span{

    display:inline-block;
    padding:8px 18px;
    border-radius:40px;
    background:#ff7d7d;
    color:#b81e1e;
    font-weight:600;
    margin-bottom:18px;

}

.section-title h2{

    font-size:42px;
    margin-bottom:20px;

}

.section-tag{

    display:inline-block;
    background:#ff7d7d;
    color:#b81e1e;
    padding:8px 18px;
    border-radius:30px;
    margin-bottom:20px;
    font-weight:600;

}

/*==============================
Header
==============================*/

.header{

    position:fixed;
    left:0;
    top:0;
    width:100%;
    z-index:999;
    transition:.4s;
    padding:22px 0;

}

.header.sticky{

    background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,.07);
    padding:14px 0;

}

.navbar{

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.logo{

    display:flex;
    align-items:center;
    gap:12px;

    font-size:28px;
    font-weight:700;

    color:#fff;

}

.header.sticky .logo{

    color:var(--secondary);

}

.logo i{

    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient);
    color:#fff;
    font-size:20px;

}

.nav-menu{

    display:flex;
    align-items:center;
    gap:34px;

}

.nav-menu li a{

    color:#fff;
    font-weight:500;

}

.nav-menu li a:hover,
.nav-menu li a.active{

    color:#6ee7b7;

}

.header.sticky .nav-menu li a{

    color:var(--secondary);

}

.header.sticky .nav-menu li a:hover{

    color: #b81e1e;

}

.desktop-btn{

    padding:14px 28px;

}

.hamburger{

    width:45px;
    display:none;
    cursor:pointer;

}

.hamburger span{

    width:100%;
    height:3px;
    display:block;
    background:#fff;
    margin:7px 0;
    transition:.3s;

}

.header.sticky .hamburger span{

    background:var(--secondary);

}

/*==============================
Hero
==============================*/

.hero{

    position:relative;
    overflow:hidden;
    background:#081220;
    padding:190px 0 120px;

}

.hero-overlay{

    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at top left,
    rgba(20,184,166,.20),
    transparent 45%),

    radial-gradient(circle at bottom right,
    rgba(245,158,11,.18),
    transparent 40%);

}

.hero-wrapper{

    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:70px;

}

.hero-content{

    color:#fff;

}

.hero-tag{

    display:inline-flex;
    align-items:center;
    gap:10px;

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);

    padding:10px 18px;
    border-radius:50px;
    backdrop-filter:blur(18px);

    margin-bottom:30px;

}

.hero h1{

    color:#fff;
    font-size:58px;
    margin-bottom:28px;

}

.hero h1 span{

    color: #b81e1e;

}

.hero p{

    font-size:18px;
    color:#dbe4ef;
    max-width:620px;

}

.hero-buttons{

    display:flex;
    gap:20px;
    margin:40px 0;

}

.hero-stats{

    display:flex;
    gap:22px;
    flex-wrap:wrap;

}

.stat-box{

    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);

    padding:22px 26px;

    border-radius:18px;

    backdrop-filter:blur(18px);

    min-width:150px;

}

.stat-box h3{

    color:#fff;
    font-size:30px;
    margin-bottom:8px;

}

.stat-box p{

    margin:0;
    color:#d8dee9;
    font-size:15px;

}

.hero-image{

    position:relative;

}

.hero-image img{

    border-radius:25px;
    box-shadow:0 40px 80px rgba(0,0,0,.35);

}

.floating-card{

    position:absolute;

    display:flex;
    gap:18px;

    background:#fff;

    border-radius:18px;

    padding:18px;

    width:260px;

    box-shadow:var(--shadow);

    animation:float 5s ease-in-out infinite;

}

.floating-card i{

    width:55px;
    height:55px;

    border-radius:50%;

    background:var(--gradient);

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:22px;

    flex-shrink:0;

}

.floating-card h4{

    margin-bottom:8px;
    font-size:18px;

}

.floating-card p{

    margin:0;
    font-size:14px;

}

.card-one{

    top:35px;
    left:-50px;

}

.card-two{

    bottom:35px;
    right:-40px;

}

/* Decorative Shapes */

.shape{

    position:absolute;
    border-radius:50%;
    filter:blur(40px);
    opacity:.45;

}

.shape1{

    width:260px;
    height:260px;

    background: #d24d4d;

    top:-80px;
    left:-70px;

}

.shape2{

    width:180px;
    height:180px;

    background:#f59e0b;

    bottom:70px;
    left:8%;

}

.shape3{

    width:240px;
    height:240px;

    background:#0ea5e9;

    right:-90px;
    top:25%;

}

/*==============================
Animation
==============================*/

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==================================================
STYLE.CSS
PART 2
Topics + About Section
==================================================*/

/*==============================
Topics Section
==============================*/

.topics{
    background:var(--light);
}

.topics-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.topic-card{
    background:#fff;
    border-radius:20px;
    padding:35px 30px;
    box-shadow:0 15px 45px rgba(15,23,42,.06);
    transition:var(--transition);
    position:relative;
    overflow:hidden;
    border:1px solid transparent;
}

.topic-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:var(--gradient);
    transform:scaleX(0);
    transition:.4s;
    transform-origin:left;
}

.topic-card:hover::before{
    transform:scaleX(1);
}

.topic-card:hover{
    transform:translateY(-10px);
    border-color:#dbeafe;
    box-shadow:0 30px 60px rgba(15,23,42,.12);
}

.topic-icon{
    width:75px;
    height:75px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, #ff7d7d, #b81e1e);
    color:#fff;
    font-size:28px;
    margin-bottom:25px;
}

.topic-card h3{
    font-size:24px;
    margin-bottom:18px;
}

.topic-card p{
    margin-bottom:25px;
}

.topic-card a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--primary);
    font-weight:600;
}

.topic-card a i{
    transition:.3s;
}

.topic-card:hover a i{
    transform:translateX(6px);
}

/*==============================
About Section
==============================*/

.about{
    background:#fff;
}

.about-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.about-image{
    position:relative;
}

.about-image img{
    width:100%;
    border-radius:25px;
    box-shadow:0 30px 70px rgba(15,23,42,.10);
}

.about-image::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:30px;
    background:rgba(20,184,166,.08);
    left:-30px;
    bottom:-30px;
    z-index:-1;
}

.about-image::after{
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    background:rgba(245,158,11,.12);
    right:-40px;
    top:-40px;
    z-index:-1;
}

/* Experience Box */

.experience-box{
    position:absolute;
    right:-30px;
    bottom:40px;
    width:180px;
    background:#fff;
    border-radius:20px;
    padding:28px;
    text-align:center;
    box-shadow:0 25px 60px rgba(15,23,42,.12);
}

.experience-box h3{
    font-size:42px;
    color:var(--primary);
    margin-bottom:8px;
}

.experience-box span{
    display:block;
    color:var(--text);
    font-size:15px;
    line-height:1.6;
}

/* About Content */

.about-content h2{
    font-size:44px;
    margin-bottom:25px;
}

.about-content p{
    margin-bottom:20px;
}

.about-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin:35px 0 40px;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:15px;
    background:#f8fafc;
    padding:16px 18px;
    border-radius:14px;
    transition:.35s;
}

.feature-item:hover{
    background:#ecfeff;
    transform:translateY(-4px);
}

.feature-item i{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient);
    color:#fff;
    flex-shrink:0;
}

.feature-item span{
    font-weight:600;
    color:var(--heading);
    line-height:1.5;
}

/* Decorative Elements */

.about{
    position:relative;
    overflow:hidden;
}

.about::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(20,184,166,.04);
    border-radius:50%;
    top:-120px;
    right:-120px;
}

.about::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:rgba(245,158,11,.05);
    border-radius:50%;
    bottom:-100px;
    left:-100px;
}

/* Section Animation */

.topic-card,
.about-image,
.about-content{
    transition:.4s ease;
}

/*==================================================
STYLE.CSS
PART 3
Why Choose Us + Featured Guides + Stats
==================================================*/

/*==============================
Why Choose Us
==============================*/

.why-us{
    background:var(--light);
    position:relative;
    overflow:hidden;
}

.why-us::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    background:rgba(20,184,166,.05);
    border-radius:50%;
    top:-100px;
    right:-100px;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.why-card{
    background:#fff;
    padding:35px 30px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 15px 45px rgba(15,23,42,.06);
    transition:var(--transition);
    position:relative;
    overflow:hidden;
}

.why-card::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:5px;
    background:var(--gradient);
    transform:scaleX(0);
    transition:.35s;
}

.why-card:hover::before{
    transform:scaleX(1);
}

.why-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(15,23,42,.12);
}

.why-icon{
    width:85px;
    height:85px;
    margin:auto auto 25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient);
    color:#fff;
    font-size:34px;
}

.why-card h3{
    font-size:24px;
    margin-bottom:18px;
}

.why-card p{
    margin:0;
}

/*==============================
Featured Guides
==============================*/

.featured-guides{
    background:#fff;
}

.featured-wrapper{
    display:flex;
    flex-direction:column;
    gap:120px;
}

.guide-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.guide-row.reverse .guide-image{
    order:2;
}

.guide-row.reverse .guide-content{
    order:1;
}

.guide-image{
    position:relative;
}

.guide-image img{
    width:100%;
    border-radius:24px;
    box-shadow:0 30px 70px rgba(15,23,42,.12);
}

.guide-image::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:30px;
    background:rgba(20,184,166,.08);
    right:-25px;
    bottom:-25px;
    z-index:-1;
}

.guide-content h2{
    font-size:42px;
    margin-bottom:22px;
}

.guide-content p{
    margin-bottom:25px;
}

.guide-list{
    margin:35px 0;
}

.guide-list li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:18px;
    color:var(--heading);
    font-weight:500;
}

.guide-list i{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gradient);
    color:#fff;
    font-size:14px;
    flex-shrink:0;
}

.guide-content .btn{
    margin-top:10px;
}

/*==============================
Statistics
==============================*/

.stats{
    background:linear-gradient(135deg,#081220,#10253d);
    position:relative;
    overflow:hidden;
}

.stats::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    background:rgba(20,184,166,.08);
    left:-100px;
    top:-100px;
}

.stats::after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(245,158,11,.08);
    right:-100px;
    bottom:-100px;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    position:relative;
    z-index:2;
}

.stat-card{
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:45px 25px;
    text-align:center;
    transition:.35s;
}

.stat-card:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,.1);
}

.stat-card h2{
    color:#fff;
    font-size:48px;
    margin-bottom:12px;
}

.stat-card p{
    margin:0;
    color:#dbe4ef;
    font-size:17px;
}

/*==============================
Shared Animations
==============================*/

.topic-card,
.why-card,
.stat-card,
.guide-image img,
.feature-item{
    transition:all .35s ease;
}

.guide-image img:hover{
    transform:scale(1.03);
}

/*==================================================
STYLE.CSS
PART 4
Blog + CTA + FAQ
==================================================*/

/*==============================
Latest Articles
==============================*/

.blog{
    background:var(--light);
    position:relative;
    overflow:hidden;
}

.blog::before{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    background:rgba(20,184,166,.05);
    border-radius:50%;
    top:-120px;
    left:-120px;
}

.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.blog-card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(15,23,42,.07);
    transition:.35s;
}

.blog-card:hover{
    transform:translateY(-10px);
    box-shadow:0 35px 70px rgba(15,23,42,.14);
}

.blog-image{
    position:relative;
    overflow:hidden;
}

.blog-image img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.45s;
}

.blog-card:hover .blog-image img{
    transform:scale(1.08);
}

.blog-image span{
    position:absolute;
    left:20px;
    top:20px;
    background:var(--gradient);
    color:#fff;
    padding:8px 18px;
    border-radius:40px;
    font-size:14px;
    font-weight:600;
}

.blog-content{
    padding:30px;
}

.blog-content h3{
    font-size:25px;
    margin-bottom:18px;
    line-height:1.4;
}

.blog-content p{
    margin-bottom:25px;
}

.blog-content a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--primary);
    font-weight:600;
}

.blog-content a i{
    transition:.3s;
}

.blog-card:hover a i{
    transform:translateX(6px);
}

/*==============================
CTA Section
==============================*/

.cta{
    position:relative;
    padding:110px 0;
    background:#fff;
}

.cta-box{

    background:
    linear-gradient(135deg, #ff7d7d, #b81e1e);

    border-radius:35px;

    text-align:center;

    color:#fff;

    padding:90px 70px;

    position:relative;

    overflow:hidden;

}

.cta-box::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    left:-80px;
    top:-80px;

}

.cta-box::after{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    right:-60px;
    bottom:-60px;

}

.cta-box>*{

    position:relative;
    z-index:2;

}

.cta-box .section-tag{

    background:rgba(255,255,255,.18);
    color:#fff;

}

.cta-box h2{

    color:#fff;
    font-size:46px;
    max-width:760px;
    margin:0 auto 25px;

}

.cta-box p{

    max-width:760px;
    margin:0 auto 40px;
    color:#e8f9f7;
    font-size:18px;

}

.cta-box .btn{

    background:#fff;
    color:var(--secondary);
    box-shadow:none;

}

.cta-box .btn:hover{

    background:#081220;
    color:#fff;

}

/*==============================
FAQ Section
==============================*/

.faq{

    background:var(--light);

}

.faq-wrapper{

    max-width:900px;
    margin:auto;

}

.faq-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:20px;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(15,23,42,.06);

    transition:.35s;

}

.faq-item:hover{

    transform:translateY(-3px);

}

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 30px;

    cursor:pointer;

}

.faq-question h3{

    font-size:21px;

}

.faq-question i{

    width:42px;
    height:42px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background: #ff7d7d;

    color: #b81e1e;

    transition:.35s;

}

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

    transform:rotate(45deg);

    background:#b81e1e;

    color:#fff;

}

.faq-answer{

    display:none;

    padding:0 30px 28px;

}

.faq-item.active .faq-answer{

    display:block;

}

.faq-answer p{

    margin:0;
    line-height:1.9;

}

/*==============================
Newsletter Form
==============================*/

.newsletter{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-top:25px;

}

.newsletter input{

    width:100%;

    height:55px;

    border:none;

    border-radius:12px;

    padding:0 18px;

    outline:none;

    font-size:15px;

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

}

.newsletter input:focus{

    border-color:var(--primary);

}

.newsletter button{

    height:55px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:var(--gradient);

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.newsletter button:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(20,184,166,.25);

}

/*==================================================
STYLE.CSS
PART 5
Footer + Back To Top + Utilities
==================================================*/

/*==============================
Footer
==============================*/

.footer{
    background:#081220;
    color:#cbd5e1;
    position:relative;
    overflow:hidden;
    padding:90px 0 0;
}

.footer::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(20,184,166,.08);
    left:-120px;
    top:-120px;
}

.footer::after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(245,158,11,.06);
    right:-100px;
    bottom:-100px;
}

.footer .container{
    position:relative;
    z-index:2;
}

.footer-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:50px;
    padding-bottom:60px;
}

.footer-logo{
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-size:28px;
    font-weight:700;
    color:#fff;
    margin-bottom:25px;
    font-family:'Poppins',sans-serif;
}

.footer-logo i{
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--gradient);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
}

.footer-column p{
    line-height:1.9;
    color:#cbd5e1;
}

.footer-column h3{
    color:#fff;
    font-size:22px;
    margin-bottom:25px;
}

.footer-column ul li{
    margin-bottom:16px;
}

.footer-column ul li:last-child{
    margin-bottom:0;
}

.footer-column ul li a{
    color:#cbd5e1;
    transition:.35s;
}

.footer-column ul li a:hover{
    color:var(--primary);
    padding-left:8px;
}

.social-links{
    display:flex;
    gap:15px;
    margin-top:30px;
}

.social-links a{
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    color:#fff;
    transition:.35s;
}

.social-links a:hover{
    background:var(--gradient);
    transform:translateY(-5px);
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    padding:28px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.footer-bottom p{
    margin:0;
}

.footer-links{
    display:flex;
    gap:25px;
    flex-wrap:wrap;
}

.footer-links a{
    color:#cbd5e1;
}

.footer-links a:hover{
    color:var(--primary);
}

/*==============================
Back To Top
==============================*/

.back-top{
    position:fixed;
    right:30px;
    bottom:30px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:var(--gradient);
    color:#fff;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 15px 35px rgba(20,184,166,.30);
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
    transition:.35s;
    z-index:999;
}

.back-top.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.back-top:hover{
    transform:translateY(-5px);
}

/*==============================
Utility Classes
==============================*/

.text-center{
    text-align:center;
}

.mt-30{
    margin-top:30px;
}

.mt-40{
    margin-top:40px;
}

.mb-30{
    margin-bottom:30px;
}

.mb-50{
    margin-bottom:50px;
}

.d-flex{
    display:flex;
}

.align-center{
    align-items:center;
}

.justify-between{
    justify-content:space-between;
}

/*==============================
Image Hover Effects
==============================*/

img{
    transition:.45s ease;
}

.topic-card:hover img,
.blog-card:hover img,
.guide-image:hover img,
.about-image:hover img{
    transform:scale(1.03);
}

/*==============================
Selection
==============================*/

::selection{
    background:var(--primary);
    color:#fff;
}

/*==============================
Scrollbar
==============================*/

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#e2e8f0;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(135deg, #ff7d7d, #b81e1e);
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#b81e1e;
}

/*==============================
Smooth Fade Animation
==============================*/

.fade-up{
    opacity:0;
    transform:translateY(40px);
    transition:all .7s ease;
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

/*==============================
Generic Card Transition
==============================*/

.topic-card,
.why-card,
.blog-card,
.stat-card,
.feature-item,
.floating-card,
.faq-item{
    transition:all .35s ease;
}

/*==============================
Focus Accessibility
==============================*/

a:focus,
button:focus,
input:focus{
    outline:2px solid var(--primary);
    outline-offset:3px;
}

/*==============================
Responsive Images
==============================*/

.hero-image img,
.about-image img,
.guide-image img,
.blog-image img{
    width:100%;
    display:block;
}

/*==================================
Services Section
==================================*/

.services-section{
    padding:100px 0;
    background:#f8fafc;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* Card */

.service-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    transition:.35s ease;
    border:1px solid transparent;
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(15,23,42,.14);
    border-color:#dbeafe;
}

/* Image */

.service-img{
    overflow:hidden;
    position:relative;
}

.service-img img{
    width:100%;
    height:240px;
    object-fit:cover;
    transition:.5s;
    display:block;
}

.service-card:hover .service-img img{
    transform:scale(1.08);
}

/* Content */

.service-content{
    padding:30px;
}

.service-content h3{
    font-size:24px;
    margin-bottom:18px;
    color:#0f172a;
    line-height:1.4;
}

.service-content p{
    color:#64748b;
    line-height:1.8;
    margin-bottom:25px;
}

.service-content a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#14b8a6;
    font-weight:600;
    transition:.3s;
}

.service-content a i{
    transition:.3s;
}

.service-card:hover .service-content a{
    color:#b81e1e;
}

.service-card:hover .service-content a i{
    transform:translateX(6px);
}




/* Responsive */

@media(max-width:991px){

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:767px){

    .services-section{
        padding:80px 0;
    }

    .services-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .service-card{
        max-width:600px;
        margin:auto;
    }

    .service-img img{
        height:220px;
    }

    .service-content{
        padding:25px;
    }

    .service-content h3{
        font-size:22px;
    }

}

@media(max-width:480px){

    .service-img img{
        height:200px;
    }

    .service-content{
        padding:20px;
    }

    .service-content h3{
        font-size:20px;
    }

    .service-content p{
        font-size:15px;
    }

}


/*==============================
Contact Section
==============================*/

.contact-section{
    padding:100px 0;
    background:#f8fafc;
}

.contact-wrapper{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:40px;
    margin-top:60px;
}

/* Contact Info */

.contact-info{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.info-box{
    display:flex;
    align-items:flex-start;
    gap:20px;
    background:#fff;
    padding:25px;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    transition:.35s;
}

.info-box:hover{
    transform:translateY(-6px);
}

.info-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:linear-gradient(135deg, #ff7d7d, #b81e1e);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
}

.info-box h3{
    margin-bottom:8px;
    font-size:20px;
}

.info-box p{
    margin:0;
    color:#64748b;
}

/* Contact Form */

.contact-form{
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
}

.form-row{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.form-group{
    margin-bottom:25px;
}

.form-group label{
    display:block;
    margin-bottom:10px;
    color:#0f172a;
    font-weight:600;
}

.form-group input,
.form-group textarea{
    width:100%;
    border:1px solid #dbe4ef;
    border-radius:12px;
    padding:15px 18px;
    font-size:15px;
    outline:none;
    transition:.3s;
    font-family:inherit;
}

.form-group textarea{
    resize:vertical;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:#14b8a6;
    box-shadow:0 0 0 4px rgba(20,184,166,.12);
}

.contact-form .btn{
    border:none;
    cursor:pointer;
}

.contact-form .btn i{
    margin-left:10px;
}

/* Responsive */

@media(max-width:991px){

.contact-wrapper{
    grid-template-columns:1fr;
}

}

@media(max-width:767px){

.contact-form{
    padding:30px;
}

.form-row{
    grid-template-columns:1fr;
    gap:0;
}

}

@media(max-width:480px){

.contact-form{
    padding:22px;
}

.info-box{
    padding:20px;
}

.info-icon{
    width:50px;
    height:50px;
    font-size:18px;
}

}


/* Popup Background */
.support-popup-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.62);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
    box-sizing: border-box;

    z-index: 999999;

    opacity: 1;
    visibility: visible;

    transition: opacity 0.3s ease,
                visibility 0.3s ease;
}

/* Hide Popup */
.support-popup-overlay.popup-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Popup Box */
.support-popup {
    position: relative;

    width: 100%;
    max-width: 500px;

    padding: 55px 38px 46px;

    text-align: center;

    background: #f8f8f8;
    border-radius: 20px;

    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);

    animation: popupShow 0.4s ease;
}

/* Popup Animation */
@keyframes popupShow {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Close Button */
.popup-close {
    position: absolute;

    top: 15px;
    right: 22px;

    width: 35px;
    height: 35px;

    border: none;
    background: transparent;

    color: #7b7f83;

    font-size: 34px;
    font-weight: 400;
    line-height: 30px;

    cursor: pointer;

    transition: 0.2s ease;
}

.popup-close:hover {
    color: #b81e1e;
    transform: rotate(90deg);
}

/* Heading */
.support-popup h2 {
    margin: 5px 0 28px;

    color: #363a3e;

    font-size: 36px;
    font-weight: 500;

    line-height: 1.2;
}

/* Description */
.support-popup p {
    margin: 0 0 32px;

    color: #646a70;

    font-size: 18px;
    font-weight: 400;

    line-height: 1.55;
}

/* Call Button */
.support-call-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 315px;

    min-height: 66px;

    padding: 0 20px;

    box-sizing: border-box;

    background: #b81e1e;

    color: #ffffff;

    border-radius: 11px;

    text-decoration: none;

    font-size: 23px;
    font-weight: 700;

    transition: 0.25s ease;
}

.support-call-btn:hover {
    background: #4f0905;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(104, 13, 8, 0.3);
}

/* Mobile Responsive */
@media (max-width: 600px) {

    .support-popup-overlay {
        padding: 15px;
    }

    .support-popup {
        padding: 50px 20px 35px;

        border-radius: 16px;
    }

    .support-popup h2 {
        margin-bottom: 22px;

        font-size: 29px;
    }

    .support-popup p {
        margin-bottom: 28px;

        font-size: 17px;
    }

    .support-call-btn {
        max-width: 100%;

        min-height: 60px;

        font-size: 19px;
    }

    .popup-close {
        top: 12px;
        right: 12px;
    }
}


/*==============================
End of style.css
==================================================*/