/*=====================================================
MYROOMO WEBSITE
======================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    color:#1f2937;
    background:#ffffff;
    overflow-x:hidden;

}

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

ul{
    margin:0;
    padding:0;
    list-style:none;
}

section{

    padding:100px 0;

}

.container{

max-width:1320px;

padding-left:18px;

padding-right:18px;

}

/*====================================
COLORS
====================================*/

:root{

    --primary:#0A4DFF;
    --secondary:#0A1D56;
    --yellow:#FFC928;
    --white:#ffffff;
    --light:#f5f8fd;
    --dark:#1e293b;
    --text:#64748b;

}

/*====================================
LOADER
====================================*/

.page-loader{

    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;

}
/*====================================
HEADER
====================================*/

.main-header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    box-shadow:0 5px 25px rgba(0,0,0,.05);

}

.navbar{

    height:85px;

}

.logo{

    height:55px;

}

.navbar-nav .nav-link{

    color:#222;
    font-weight:600;
    padding:12px 18px;
    transition:.3s;

}

.navbar-nav .nav-link:hover{

    color:var(--primary);

}

.header-buttons{

    display:flex;
    gap:15px;

}

.btn-login{

    padding:12px 24px;
    border-radius:30px;
    color:var(--primary);
    border:2px solid var(--primary);
    transition:.3s;
    font-weight:600;

}

.btn-login:hover{

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

}

.btn-demo{

    padding:12px 26px;
    border-radius:30px;
    background:var(--primary);
    color:#fff;
    font-weight:600;
    transition:.3s;

}

.btn-demo:hover{

    background:#003fd4;
    color:#fff;

}
/*====================================
HERO
====================================*/

.hero-section{

    padding-top:170px;
    background:linear-gradient(
    180deg,
    #f7faff 0%,
    #ffffff 100%);

}

.hero-badge{

    display:inline-block;
    background:#e9f2ff;
    color:var(--primary);
    padding:12px 20px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    margin-bottom:25px;

}

.hero-section h1{

    font-family:'Poppins',sans-serif;
    font-size:58px;
    font-weight:800;
    line-height:1.2;
    color:var(--secondary);

}

.hero-section h1 span{

    color:var(--primary);

}

.hero-section p{

    margin-top:25px;
    color:var(--text);
    line-height:34px;
    font-size:18px;

}
.hero-buttons{

    display:flex;
    gap:20px;
    margin-top:40px;

}

.btn-primary-custom{

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

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

    padding:16px 34px;

    border-radius:50px;

    font-weight:700;

    transition:all .35s ease;

    box-shadow:0 12px 30px rgba(10,77,255,.25);

}

.btn-primary-custom:hover{

    background:#003fd4;
    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(10,77,255,.35);

}

.btn-outline-custom{

    padding:16px 35px;
    border-radius:35px;
    border:2px solid var(--primary);
    color:var(--primary);
    transition:.3s;
    font-weight:700;

}

.btn-outline-custom:hover{

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

}
.hero-features{

    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-top:45px;

}

.feature-item{

    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    color:#444;

}

.feature-item i{

    color:#2bb673;

}
.dashboard-wrapper{

    position:relative;
    text-align:center;

    width:110%;
    margin-left:-5%;

}

.dashboard-image{

    width:108%;
    max-width:none;

    border-radius:24px;

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

    box-shadow:
        0 30px 80px rgba(15,23,42,.15),
        0 10px 25px rgba(15,23,42,.08);

}

.floating-card{

    position:absolute;
    background:#fff;
    border-radius:18px;
    padding:15px 20px;
    display:flex;
    gap:15px;
    align-items:center;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
    animation:float 3s ease-in-out infinite;

}

.floating-card i{

    width:55px;
    height:55px;
    background:#edf3ff;
    color:var(--primary);
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;

}

.booking-card{

    top:35px;
    left:-20px;

}

.revenue-card{

    bottom:40px;
    right:-30px;

}

.guest-card{

    top:240px;
    right:-45px;

}

.floating-card strong{

    display:block;
    font-size:16px;

}

.floating-card p{

    margin:0;
    color:#666;
    font-size:14px;

}
@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/* Sticky Header */

.main-header.sticky{

    background:#ffffff;
    box-shadow:0 8px 30px rgba(0,0,0,.08);

}

/* Loader Animation */

.page-loader{

    transition:.5s;

}

/*=====================================
SECTION TITLE
======================================*/

.section-title span{

display:inline-block;
padding:10px 18px;
background:#edf3ff;
color:var(--primary);
border-radius:30px;
font-weight:700;
margin-bottom:20px;

}
.section-title h2{

font-size:48px;

line-height:1.2;

letter-spacing:-1px;
font-weight:800;
font-family:Poppins,sans-serif;
color:var(--secondary);

}

.section-title p{

max-width:700px;
margin:20px auto;
color:#666;
font-size:18px;

}

/*=====================================
TRUSTED
======================================*/

.trusted-section{

background:#fff;

}

.trust-box{

padding:40px 20px;
border-radius:20px;
transition:all .35s ease;
cursor:pointer;

}

.trust-box:hover{

background:#f7f9ff;
transform:translateY(-8px);

}

.trust-box i{

font-size:45px;
color:var(--primary);
margin-bottom:20px;

}

.trust-box h5{

font-weight:700;

}

/*=====================================
FEATURES
======================================*/

.features-section{

background:#f8fbff;

}

.feature-card{

background:#fff;

padding:40px;

border-radius:24px;

margin-bottom:30px;

text-align:center;

transition:all .35s ease;

height:100%;

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

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

}

.feature-card:hover{

transform:translateY(-8px);

box-shadow:0 28px 60px rgba(15,23,42,.12);

}

.feature-card i{

width:85px;
height:85px;
background:#edf3ff;
color:var(--primary);
font-size:34px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
margin-bottom:25px;

}

.feature-card h4{

font-weight:700;
margin-bottom:15px;

}

.feature-card p{

color:#666;
line-height:28px;

}
/*==========================================
WHY SECTION
==========================================*/

.why-section{

    background:#ffffff;

}

.section-small-title{

    display:inline-block;
    padding:10px 18px;
    border-radius:30px;
    background:#edf3ff;
    color:var(--primary);
    font-weight:700;
    margin-bottom:20px;

}

.why-section h2{

    font-size:44px;
    font-weight:800;
    color:var(--secondary);
    margin-bottom:25px;
    font-family:Poppins,sans-serif;

}

.why-section p{

    color:#64748b;
    line-height:32px;
    margin-bottom:35px;

}

.why-image img{

    width:100%;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,.10);

}

.why-list{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;

}

.why-item{

    display:flex;
    align-items:center;
    gap:12px;
    font-weight:600;
    padding:14px 18px;
    background:#f8fbff;
    border-radius:12px;
    transition:.3s;

}

.why-item:hover{

    transform:translateY(-5px);
    background:#edf3ff;

}

.why-item i{

    color:#16a34a;
    font-size:20px;

}
/*==========================================
STATISTICS
==========================================*/

.stats-section{

    background:linear-gradient(135deg,#0A4DFF,#0A1D56);
    color:#fff;
    padding:80px 0;

}

.stat-box{

    padding:20px;

}

.stat-box h2{

    font-size:54px;
    font-weight:800;
    margin-bottom:10px;
    font-family:Poppins,sans-serif;

}

.stat-box p{

    font-size:18px;
    margin:0;
    opacity:.9;

}
/*==========================================
MODULES
==========================================*/

.modules-section{

    background:#f8fbff;

}

.module-card{

    background:#ffffff;
    border-radius:20px;
    padding:35px 30px;
    text-align:center;
    margin-bottom:30px;
    transition:all .35s ease;
    border:1px solid #edf2f7;
    height:100%;
    overflow:hidden;
    position:relative;

}

.module-card::before{

    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#0A4DFF,#4F8BFF);

}

.module-card:hover{

    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(0,0,0,.08);

}

.module-card i{

    width:85px;
    height:85px;
    margin:auto;
    margin-bottom:25px;
    border-radius:50%;
    background:#edf3ff;
    color:#0A4DFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;

}

.module-card h4{

    font-size:22px;
    font-weight:700;
    margin-bottom:15px;
    color:#0A1D56;

}

.module-card p{

    color:#64748b;
    line-height:28px;
    margin:0;

}

/*====================================
SHOWCASE
=====================================*/

.showcase-section{

    background:#ffffff;

}

.showcase-section h2{

    font-size:46px;
    font-weight:800;
    color:#0A1D56;
    margin:25px 0;

}

.showcase-section p{

    color:#64748b;
    line-height:32px;
    margin-bottom:35px;

}

.showcase-list{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;

}

.showcase-item{

    background:#f8fbff;
    padding:16px 20px;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:600;

}

.showcase-item i{

    color:#22c55e;

}

.showcase-image{

    position:relative;

}

.showcase-image img{

    width:100%;
    border-radius:20px;
    box-shadow:0 25px 70px rgba(0,0,0,.12);

}

.show-card{

    position:absolute;
    background:#fff;
    border-radius:15px;
    padding:20px;
    width:200px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
    animation:float 4s infinite;

}

.show-card h4{

    font-size:15px;
    color:#64748b;
    margin-bottom:8px;

}

.show-card strong{

    font-size:28px;
    color:#0A4DFF;

}

.top-card{

    top:30px;
    left:-35px;

}

.middle-card{

    top:220px;
    right:-35px;

}

.bottom-card{

    bottom:25px;
    left:20px;

}

/*=====================================
PRICING
======================================*/

.pricing-section{

    background:#f8fbff;

}

.pricing-card{

    background:#fff;
    padding:45px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.06);
    position:relative;
    transition:all .35s ease;
    text-align:center;
    margin-bottom:30px;
    height:100%;

}

.pricing-card:hover{

    transform:translateY(-10px);

}

.featured-plan{

    border:3px solid #0A4DFF;

}

.popular-badge{

    position:absolute;
    top:-15px;
    left:50%;
    transform:translateX(-50%);
    background:#0A4DFF;
    color:#fff;
    padding:8px 20px;
    border-radius:30px;
    font-size:13px;
    font-weight:700;

}

.pricing-card h5{

    color:#0A4DFF;
    font-weight:700;

}

.pricing-card h2{

    font-size:48px;
    margin:20px 0;
    color:#0A1D56;

}

.pricing-card small{

    color:#64748b;

}

.pricing-card ul{

    margin:35px 0;

}

.pricing-card li{

    padding:12px 0;
    border-bottom:1px solid #eee;

}

.pricing-card li i{

    color:#16a34a;
    margin-right:10px;

}

.price-btn{

    display:inline-block;
    padding:14px 35px;
    background:#0A4DFF;
    color:#fff;
    border-radius:40px;
    font-weight:700;
    transition:.3s;

}

.price-btn:hover{

    background:#003fd4;
    color:#fff;

}
/*=====================================
CTA
======================================*/

.cta-section{

    padding:100px 0;

}

.cta-box{

    background:linear-gradient(135deg,#0A4DFF,#0A1D56);
    border-radius:25px;
    padding:80px;
    color:#fff;
    text-align:center;

}

.cta-box h2{

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

}

.cta-box p{

    font-size:20px;
    margin-bottom:40px;
    opacity:.9;

}
/*==================================================
MYROOMO HOMEPAGE V2
PART 2
==================================================*/

/*--------------------------------------------------
TOP OFFER BAR
--------------------------------------------------*/

.offer-bar{

    background:linear-gradient(90deg,#16a34a,#22c55e);
    color:#fff;
    padding:12px 0;
    font-size:15px;
    font-weight:500;

}

.offer-content{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;

}

.offer-left{

    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;

}

.offer-left i{

    font-size:20px;

}

.offer-center{

    flex:1;
    text-align:center;

}

.offer-center strong{

    color:#fff;
    font-weight:800;

}

.offer-right a{

    background:#fff;
    color:#16a34a;
    text-decoration:none;
    padding:10px 24px;
    border-radius:40px;
    font-weight:700;
    transition:.3s;

}

.offer-right a:hover{

    background:#0A1D56;
    color:#fff;

}

/*--------------------------------------------------
HERO
--------------------------------------------------*/

.hero-v2{

    padding:100px 0;
    background:#f8fbff;
    overflow:hidden;

}

.hero-tag{

    display:inline-block;
    background:#e8f1ff;
    color:#0A4DFF;
    padding:10px 20px;
    border-radius:50px;
    font-weight:700;
    margin-bottom:25px;

}

.hero-v2 h1{

    font-size:58px;
    font-weight:800;
    color:#0A1D56;
    line-height:1.2;
    margin-bottom:25px;

}

.hero-v2 p{

    font-size:18px;
    line-height:32px;
    color:#64748b;
    margin-bottom:35px;

}

.hero-buttons{

    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:40px;

}

.hero-trust{

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

}

.hero-trust div{

    display:flex;
    align-items:center;
    gap:8px;
    color:#475569;
    font-weight:600;

}

.hero-trust i{

    color:#16a34a;

}

/*--------------------------------------------------
RIGHT SIDE
--------------------------------------------------*/

.hero-dashboard{

    position:relative;

}

.hero-dashboard img{

    width:100%;
    border-radius:20px;
    box-shadow:0 30px 80px rgba(0,0,0,.10);

}

/*--------------------------------------------------
FREE TRIAL CARD
--------------------------------------------------*/

.trial-card{

    position:absolute;
    right:-30px;
    top:40px;
    width:320px;
    background:#fff;
    border-radius:20px;
    padding:30px;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
    border-top:6px solid #16a34a;

}

.trial-header{

    display:inline-block;
    background:#16a34a;
    color:#fff;
    padding:8px 16px;
    border-radius:30px;
    font-weight:700;
    margin-bottom:15px;

}

.trial-card h2{

    font-size:56px;
    color:#16a34a;
    font-weight:800;
    margin-bottom:25px;

}

.trial-card ul{

    list-style:none;
    padding:0;
    margin:0 0 25px;

}

.trial-card ul li{

    padding:10px 0;
    display:flex;
    align-items:center;
    gap:10px;
    color:#475569;

}

.trial-card i{

    color:#16a34a;

}

.trial-btn{

    display:block;
    width:100%;
    text-align:center;
    background:#16a34a;
    color:#fff;
    text-decoration:none;
    padding:15px;
    border-radius:12px;
    font-weight:700;
    transition:.3s;

}

.trial-btn:hover{

    background:#15803d;
    color:#fff;

}
/*==================================================
WHY MYROOMO
==================================================*/

.why-myroomo{

    padding:110px 0;
    background:#ffffff;

}

.section-label{

    display:inline-block;
    padding:8px 20px;
    border-radius:40px;
    background:#EEF4FF;
    color:#0A4DFF;
    font-weight:700;
    letter-spacing:1px;

}

.section-heading{

    font-size:46px;
    font-weight:800;
    color:#0A1D56;
    margin:20px 0;

}

.section-description{

    max-width:760px;
    margin:auto;
    color:#64748B;
    font-size:18px;
    line-height:32px;

}

.benefit-card{

    background:#ffffff;
    border-radius:20px;
    padding:40px;
    text-align:center;
    border:1px solid #EDF2F7;
    transition:all .35s ease;
    height:100%;

}

.benefit-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.benefit-icon{

    width:80px;
    height:80px;
    border-radius:50%;
    margin:auto;
    margin-bottom:25px;

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

    background:#EEF4FF;

}

.benefit-icon i{

    font-size:34px;
    color:#0A4DFF;

}

.benefit-card h4{

    font-size:24px;
    font-weight:700;
    margin-bottom:15px;
    color:#0A1D56;

}

.benefit-card p{

    color:#64748B;
    line-height:30px;
    margin:0;

}
/*==================================================
BUSINESS SECTION
==================================================*/

.business-section{

    padding:110px 0;
    background:#f8fbff;

}

.section-description-left{

    color:#64748b;
    font-size:18px;
    line-height:32px;
    margin-bottom:40px;

}

.business-list{

    display:flex;
    flex-direction:column;
    gap:20px;

}

.business-item{

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

    background:#fff;

    padding:22px;

    border-radius:18px;

    transition:all .35s ease;

    border:1px solid #edf2f7;

}

.business-item:hover{

    transform:translateX(10px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.business-item i{

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#EEF4FF;

    color:#0A4DFF;

    font-size:28px;

}

.business-item h5{

    margin:0;

    color:#0A1D56;

    font-size:20px;

    font-weight:700;

}

.business-item p{

    margin:5px 0 0;

    color:#64748b;

}

.business-image img{

    border-radius:20px;

    box-shadow:0 25px 60px rgba(0,0,0,.10);

}
/*==================================================
BIG FREE TRIAL BANNER
==================================================*/

.offer-bar{

    background:linear-gradient(135deg,#16a34a,#22c55e);

    padding:45px 0;

    text-align:center;

    color:#fff;

}

.offer-badge{

    display:inline-block;

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

    padding:10px 25px;

    border-radius:40px;

    font-size:16px;

    font-weight:700;

    margin-bottom:20px;

    letter-spacing:1px;

}

.offer-bar h2{

    font-size:58px;

    font-weight:900;

    margin-bottom:20px;

    line-height:1.1;

}

.offer-bar h2 span{

    color:#FFD54A;

    text-shadow:0 3px 10px rgba(0,0,0,.25);

}

.offer-bar p{

    font-size:22px;

    margin-bottom:35px;

    opacity:.95;

}

.offer-btn{

    display:inline-block;

    background:#fff;

    color:#16a34a;

    text-decoration:none;

    padding:18px 42px;

    border-radius:50px;

    font-size:20px;

    font-weight:700;

    transition:.3s;

}

.offer-btn:hover{

    background:#0A1D56;

    color:#fff;

    transform:translateY(-3px);

}
@media(max-width:768px){

.offer-bar{

    padding:35px 20px;

}

.offer-bar h2{

    font-size:36px;

}

.offer-bar p{

    font-size:17px;

}

.offer-btn{

    width:100%;

    font-size:18px;

}

}
/*=========================================
PROBLEMS WE SOLVE
=========================================*/

.problems-section{

    padding:110px 0;

    background:#F8FAFC;

}

.problem-box,
.solution-box{

    background:#fff;

    border-radius:20px;

    padding:45px;

    height:100%;

    box-shadow:0 12px 35px rgba(0,0,0,.05);

}

.problem-box{

    border-top:6px solid #ef4444;

}

.solution-box{

    border-top:6px solid #16a34a;

}

.problem-box h3,
.solution-box h3{

    font-size:30px;

    font-weight:700;

    margin-bottom:30px;

    color:#0A1D56;

}

.problem-box ul,
.solution-box ul{

    list-style:none;

    padding:0;

    margin:0;

}

.problem-box li,
.solution-box li{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 0;

    border-bottom:1px solid #eee;

    font-size:18px;

}

.problem-box li:last-child,
.solution-box li:last-child{

    border-bottom:none;

}

.problem-box i{

    font-size:22px;

}

.solution-box i{

    font-size:22px;

}
/*=========================================
TESTIMONIALS
=========================================*/

.testimonial-section{

    padding:110px 0;

    background:#ffffff;

}

.testimonial-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    height:100%;

    border:1px solid #edf2f7;

    transition:all .35s ease;

    box-shadow:0 10px 30px rgba(0,0,0,.04);

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.stars{

    font-size:22px;

    color:#fbbf24;

    margin-bottom:20px;

}

.testimonial-card p{

    color:#64748b;

    line-height:30px;

    margin-bottom:30px;

}

.client{

    display:flex;

    align-items:center;

    gap:15px;

}

.avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#0A4DFF;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:22px;

}

.client h5{

    margin:0;

    color:#0A1D56;

    font-size:18px;

}

.client small{

    color:#64748b;

}
/*=========================================
FAQ
=========================================*/

.faq-section{

    padding:110px 0;

    background:#F8FAFC;

}

.accordion-item{

    border:none;

    border-radius:16px !important;

    margin-bottom:20px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.accordion-button{

    padding:22px 30px;

    font-size:18px;

    font-weight:600;

    color:#0A1D56;

    background:#fff;

}

.accordion-button:not(.collapsed){

    background:#0A4DFF;

    color:#fff;

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    padding:25px 30px;

    color:#64748B;

    line-height:30px;

    background:#fff;

}
/*=========================================
FINAL CTA
=========================================*/

.final-cta{

    padding:120px 0;

    background:linear-gradient(135deg,#0A1D56,#0A4DFF);

}

.cta-wrapper{

    text-align:center;

    color:#fff;

}

.cta-badge{

    display:inline-block;

    padding:10px 24px;

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

    border-radius:40px;

    font-weight:700;

    margin-bottom:25px;

}

.cta-wrapper h2{

    font-size:52px;

    font-weight:800;

    margin-bottom:25px;

    line-height:1.2;

}

.cta-wrapper p{

    font-size:20px;

    line-height:34px;

    max-width:850px;

    margin:auto;

    opacity:.95;

}

.cta-highlights{

    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;

    margin:50px 0;

}

.cta-highlights div{

    font-size:18px;

    font-weight:600;

}

.cta-highlights i{

    color:#FFD54A;

    margin-right:8px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-primary{

    background:#16a34a;

    color:#fff;

    padding:18px 42px;

    border-radius:50px;

    text-decoration:none;

    font-size:20px;

    font-weight:700;

    transition:.3s;

}

.cta-primary:hover{

    background:#15803d;

    color:#fff;

}

.cta-secondary{

    border:2px solid #fff;

    color:#fff;

    padding:18px 42px;

    border-radius:50px;

    text-decoration:none;

    font-size:20px;

    font-weight:700;

    transition:.3s;

}

.cta-secondary:hover{

    background:#fff;

    color:#0A1D56;

}
/*=========================================
CONTACT & DEMO
=========================================*/

.contact-demo-section{

    padding:110px 0;

    background:#ffffff;

}

.contact-info{

    background:#0A1D56;

    color:#fff;

    border-radius:20px;

    padding:40px;

    height:100%;

}

.contact-info h3{

    margin-bottom:35px;

    font-size:30px;

}

.contact-item{

    display:flex;

    gap:20px;

    margin-bottom:30px;

}

.contact-item i{

    width:55px;

    height:55px;

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

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

.contact-item strong{

    display:block;

    margin-bottom:5px;

}

.demo-form{

    background:#fff;

    border-radius:20px;

    padding:40px;

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

}

.demo-form h3{

    margin-bottom:30px;

}

.demo-form .form-control{

    height:55px;

    border-radius:12px;

}

.demo-form textarea{

    height:auto !important;

}
/*=========================================
INTEGRATIONS
=========================================*/

.integration-section{

    padding:110px 0;

    background:#F8FAFC;

}

.integration-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    text-align:center;

    height:100%;

    border:1px solid #edf2f7;

    transition:all .35s ease;

}

.integration-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.integration-card i{

    font-size:42px;

    color:#0A4DFF;

    margin-bottom:25px;

}

.integration-card h4{

    color:#0A1D56;

    margin-bottom:15px;

    font-size:22px;

}

.integration-card p{

    color:#64748B;

    line-height:28px;

    margin:0;

}
/*=========================================
COMPARISON SECTION
=========================================*/

.comparison-section{

    padding:110px 0;

    background:#ffffff;

}

.comparison-table{

    margin-top:50px;

    border-radius:20px;

    overflow:hidden;

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

}

.comparison-header{

    display:grid;

    grid-template-columns:1fr 1fr;

    background:#0A1D56;

    color:#fff;

    font-weight:700;

    text-align:center;

    font-size:22px;

}

.comparison-header div{

    padding:25px;

}

.comparison-row{

    display:grid;

    grid-template-columns:1fr 1fr;

}

.comparison-row div{

    padding:22px 25px;

    border-bottom:1px solid #eee;

}

.old{

    background:#fff8f8;

    color:#dc2626;

    font-weight:600;

}

.new{

    background:#f5fff7;

    color:#15803d;

    font-weight:700;

}

@media(max-width:768px){

.comparison-header,
.comparison-row{

    grid-template-columns:1fr;

}

}
/*=========================================
HOW IT WORKS
=========================================*/

.how-it-works-section{

    padding:110px 0;

    background:#ffffff;

}

.step-card{

    position:relative;

    background:#fff;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    border:1px solid #edf2f7;

    transition:all .35s ease;

    height:100%;

}

.step-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.step-number{

    position:absolute;

    top:20px;

    right:20px;

    font-size:42px;

    font-weight:800;

    color:#EEF4FF;

}

.step-card i{

    font-size:50px;

    color:#0A4DFF;

    margin-bottom:25px;

}

.step-card h4{

    color:#0A1D56;

    margin-bottom:15px;

    font-size:24px;

}

.step-card p{

    color:#64748B;

    line-height:28px;

    margin:0;

}
::selection{

background:#0A4DFF;

color:#fff;

}

img{

display:block;

}

button{

border:none;

outline:none;

}

input:focus,
textarea:focus{

outline:none;

box-shadow:none;

}
.comparison-image{

    width:100%;

    max-width:760px;

    border-radius:24px;

    box-shadow:0 30px 80px rgba(15,23,42,.12);

    transition:.4s;

}

.comparison-image:hover{

    transform:translateY(-8px);

}
.showcase-image{

    text-align:center;

}

.dashboard-showcase-image{

    width:100%;

    max-width:760px;

    border-radius:24px;

    box-shadow:0 30px 80px rgba(15,23,42,.12);

    transition:all .4s ease;

}

.dashboard-showcase-image:hover{

    transform:translateY(-8px);

    box-shadow:0 40px 100px rgba(15,23,42,.18);

}
.why-image{

    text-align:center;

}

.why-dashboard-image{

    width:100%;

    max-width:760px;

    border-radius:24px;

    transition:all .4s ease;

    filter:drop-shadow(0 30px 70px rgba(15,23,42,.15));

}

.why-dashboard-image:hover{

    transform:translateY(-10px) scale(1.02);

}
/*=====================================
DEMO FEATURES
======================================*/

.demo-features{

padding:110px 0;

background:#fff;

}

.demo-feature-card{

background:#fff;

padding:40px;

border-radius:24px;

height:100%;

text-align:center;

border:1px solid #edf2f7;

transition:.35s;

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

}

.demo-feature-card:hover{

transform:translateY(-8px);

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

}

.demo-feature-card .icon{

width:75px;

height:75px;

margin:auto auto 25px;

border-radius:50%;

background:#edf3ff;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:var(--primary);

}

.demo-feature-card h4{

font-size:22px;

margin-bottom:15px;

font-weight:700;

}

.demo-feature-card p{

margin:0;

color:var(--text);

line-height:1.8;

}
/*=====================================
DEMO PROCESS
======================================*/

.demo-process{

padding:110px 0;

background:#f8fbff;

}

.process-card{

position:relative;

background:#fff;

padding:45px 30px;

border-radius:24px;

text-align:center;

height:100%;

border:1px solid #edf2f7;

box-shadow:0 15px 45px rgba(15,23,42,.05);

transition:.35s;

}

.process-card:hover{

transform:translateY(-8px);

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

}

.step-number{

position:absolute;

top:20px;

right:20px;

font-size:14px;

font-weight:700;

color:#cbd5e1;

}

.process-icon{

width:80px;

height:80px;

margin:0 auto 25px;

border-radius:50%;

background:linear-gradient(135deg,var(--primary),#4f8cff);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:30px;

}

.process-card h4{

font-size:22px;

font-weight:700;

margin-bottom:15px;

}

.process-card p{

margin:0;

line-height:1.8;

color:var(--text);

}
/*=====================================
WHY HOTELS CHOOSE MYROOMO
======================================*/

.demo-why{

    position:relative;
    overflow:hidden;
    padding:130px 0;
    background:
        radial-gradient(circle at top left,#eef5ff 0%,transparent 45%),
        radial-gradient(circle at bottom right,#f5f9ff 0%,transparent 40%),
        #ffffff;

}

.demo-why::before{

    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(10,77,255,.04);
    border-radius:50%;
    top:-220px;
    left:-180px;

}

.demo-why::after{

    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:rgba(10,77,255,.03);
    border-radius:50%;
    bottom:-180px;
    right:-150px;

}

.demo-why .container{

    position:relative;
    z-index:2;

}

.demo-why h2{

    font-size:48px;
    font-weight:800;
    line-height:1.25;
    margin:22px 0;

}

.demo-why p{

    font-size:17px;
    color:#64748b;
    line-height:1.9;

}

/*======================
FEATURE LIST
=======================*/

.why-list{

    margin-top:45px;

}

.why-item{

    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:20px;
    margin-bottom:18px;
    border-radius:18px;
    transition:.35s;

}

.why-item:hover{

    background:#ffffff;
    transform:translateX(8px);
    box-shadow:0 18px 40px rgba(15,23,42,.08);

}

.why-item i{

    width:54px;
    height:54px;
    flex-shrink:0;

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

    border-radius:50%;

    background:linear-gradient(135deg,#0A4DFF,#4f8cff);

    color:#fff;

    font-size:22px;

    box-shadow:0 15px 35px rgba(10,77,255,.20);

}

.why-item h5{

    margin-bottom:8px;
    font-size:20px;
    font-weight:700;

}

.why-item p{

    margin:0;
    font-size:15px;

}

/*======================
RIGHT CARD
=======================*/

.stats-card{

    position:relative;

    padding:55px;

    border-radius:32px;

    background:

    linear-gradient(145deg,#0A4DFF,#2563eb);

    overflow:hidden;

    box-shadow:

    0 35px 90px rgba(10,77,255,.25);

}

.stats-card::before{

    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-140px;
    right:-120px;

}

.stats-card::after{

    content:"";
    position:absolute;
    width:240px;
    height:240px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
    bottom:-120px;
    left:-100px;

}

.stats-card .row{

    position:relative;
    z-index:2;

}

/*======================
STAT BOX
=======================*/

.stat-box{

    padding:35px 25px;

    text-align:center;

    border-radius:22px;

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

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

    backdrop-filter:blur(15px);

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-8px);

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

}

.stat-box h3{

    color:#fff;

    font-size:42px;

    font-weight:800;

    margin-bottom:10px;

}

.stat-box p{

    margin:0;

    color:rgba(255,255,255,.92);

    font-size:15px;

    font-weight:500;

}
/*=====================================
TESTIMONIALS
======================================*/

.demo-testimonials{

padding:120px 0;

background:#f8fbff;

}

.testimonial-card{

background:#fff;

padding:40px;

border-radius:26px;

height:100%;

border:1px solid #edf2f7;

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

transition:.35s;

}

.testimonial-card:hover{

transform:translateY(-10px);

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

}

.testimonial-rating{

margin-bottom:25px;

}

.testimonial-rating i{

color:#FFC107;

margin-right:4px;

font-size:18px;

}

.testimonial-text{

font-size:17px;

line-height:1.9;

color:#475569;

margin-bottom:35px;

font-style:italic;

}

.testimonial-user{

display:flex;

align-items:center;

gap:16px;

}

.user-avatar{

width:64px;

height:64px;

border-radius:50%;

background:linear-gradient(135deg,#0A4DFF,#4f8cff);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:22px;

font-weight:700;

flex-shrink:0;

}

.testimonial-user h5{

margin-bottom:5px;

font-size:18px;

font-weight:700;

}

.testimonial-user span{

font-size:14px;

color:#64748b;

}
/*=====================================
FAQ
======================================*/

.demo-faq{

padding:120px 0;

background:#ffffff;

}

.demo-faq .accordion{

margin-top:50px;

}

.demo-faq .accordion-item{

border:none;

border-radius:18px;

margin-bottom:20px;

overflow:hidden;

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

}

.demo-faq .accordion-button{

padding:24px 30px;

font-size:18px;

font-weight:600;

background:#fff;

color:#0f172a;

box-shadow:none;

}

.demo-faq .accordion-button:not(.collapsed){

background:#0A4DFF;

color:#fff;

}

.demo-faq .accordion-button:focus{

box-shadow:none;

}

.demo-faq .accordion-body{

padding:28px 30px;

font-size:16px;

line-height:1.9;

color:#64748b;

background:#fff;

}