/* ====================================
   HERO SECTION
==================================== */

.hero-section{
    position: relative;
    height: 100vh;
    min-height: 750px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero-video{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.hero-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
}

.hero-content{
    position: relative;
    z-index: 2;
    max-width: 700px;
    color: #fff;
}

.hero-tag{
    display: inline-block;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);

    color: #fff;

    padding: 10px 20px;

    border-radius: 50px;

    margin-bottom: 25px;
}

.hero-content h1{
    color: #fff;
    font-size: 72px;
    line-height: 1.1;
    margin-bottom: 25px;
}

.hero-content h1 span{
    color: #ff4254;
}

.hero-content p{
    color: #e5e5e5;
    font-size: 18px;
    max-width: 600px;
    margin-bottom: 35px;
}

/* ====================================
   FEATURE SECTION
==================================== */

.feature-section{
    margin-top: -90px;
    position: relative;
    z-index: 10;
}

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

.feature-box{
    position: relative;
    overflow: hidden;

    background: #fff;

    border-radius: 20px;

    padding: 45px 35px;

    text-align: center;

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

    transition: all .4s ease;

    z-index: 1;
}

.feature-box::before{

    content: '';

    position: absolute;

    left: 0;
    bottom: -100%;

    width: 100%;
    height: 100%;

    background: #ff4254;

    transition: .5s ease;

    z-index: -1;
}

.feature-box:hover::before{
    bottom: 0;
}

.feature-box:hover{
    transform: translateY(-10px);
}

.feature-icon{
    margin-bottom: 25px;
}

.feature-icon i{
    font-size: 50px;
    color: #ff4254;
    transition: .4s;
}

.feature-box h3{
    margin-bottom: 15px;
}

.feature-box p{
    margin-bottom: 0;
}

.feature-box:hover h3,
.feature-box:hover p,
.feature-box:hover i{
    color: #fff;
}

/* ====================================
   ABOUT SECTION
==================================== */

.about-home{
    padding: 120px 0;
}

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

.about-image img{
    width: 100%;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.section-subtitle{
    display: inline-block;

    color: #ff4254;

    font-weight: 600;

    margin-bottom: 15px;

    position: relative;
}

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

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

/* ====================================
   SERVICES SECTION
==================================== */

.services-home{
    background: #f8f9fa;
    padding: 120px 0;
}

.services-home .section-title{
    margin-bottom: 60px;
}

.services-home .section-title span{
    color: #ff4254;
    font-weight: 600;
}

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

.service-card{

    background: #fff;

    padding: 35px;

    border-radius: 20px;

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

    transition: .4s ease;
}

.service-card:hover{
    transform: translateY(-10px);
}

.service-main{
    background: #ff4254;
    color: #fff;
}

.service-main h3,
.service-main p{
    color: #fff;
}

.service-tag{
    display: inline-block;

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

    padding: 8px 18px;

    border-radius: 30px;

    margin-bottom: 20px;
}

.service-icon{
    margin-bottom: 20px;
}

.service-icon i{
    font-size: 50px;
    color: #ff4254;
}

.service-card h3{
    margin-bottom: 15px;
}

.service-card p{
    margin-bottom: 20px;
}

.service-card a{
    color: #ff4254;
    font-weight: 600;
}

.service-main .btn-primary{
    background: #fff;
    color: #ff4254;
}

.service-main .btn-primary:hover{
    background: #222;
    color: #fff;
}

/* ====================================
   VIDEO CARD
==================================== */

.video-card{
    padding: 0;
    overflow: hidden;
}

.video-card iframe{
    width: 100%;
    height: 100%;
    min-height: 300px;
    border: none;
}

/* ====================================
   WHY CHOOSE US
==================================== */

.why-choose{
    padding: 120px 0;
}

.choose-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.choose-item{
    flex: 0 0 calc(33.333% - 20px);
}

/* ====================================
   CUSTOMER CARDS
==================================== */

.choose-item{

    position: relative;

    overflow: hidden;

    background: #ffffff;

    padding: 40px 30px;

    border-radius: 20px;

    text-align: center;

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

    transition: .4s ease;

    z-index: 1;
}

.choose-item::before{

    content: '';

    position: absolute;

    left: 0;
    bottom: -100%;

    width: 100%;
    height: 100%;

    background: #ff4254;

    transition: .5s ease;

    z-index: -1;
}

.choose-item:hover::before{
    bottom: 0;
}

.choose-item:hover{
    transform: translateY(-10px);
}

/* ==========================
   CUSTOMER LOGOS
========================== */

.customer-logo{
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.customer-logo img{
    max-width: 140px;
    max-height: 80px;
    object-fit: contain;
    transition: .4s ease;
    background: #ffffff;
    padding: 10px;
    border-radius: 10px;
}

.choose-item:hover .customer-logo img{
    transform: scale(1.08);
}

.choose-item h3{
    margin-bottom: 15px;
}

.choose-item h3,
.choose-item p{
    transition: .4s ease;
}

.choose-item:hover h3,
.choose-item:hover p{
    color: #ffffff;
}

.choose-item:hover{
    transform: translateY(-10px);
    border: 1px solid rgba(255,255,255,.3);
}

/* ====================================
   CTA SECTION
==================================== */

.cta-section{

    background:
    linear-gradient(
    rgba(255,66,84,.92),
    rgba(255,66,84,.92)
    ),
    url('../images/cta-bg.jpg');

    background-size: cover;
    background-position: center;

    text-align: center;

    padding: 120px 0;
}

.cta-content{
    max-width: 800px;
    margin: auto;
}

.cta-content h2{
    color: #fff;
    margin-bottom: 20px;
}

.cta-content p{
    color: #fff;
    margin-bottom: 35px;
}

.cta-content .btn-primary{
    background: #fff;
    color: #ff4254;
}

.cta-content .btn-primary:hover{
    background: #222;
    color: #fff;
}

/* ====================================
   ANIMATION
==================================== */

.feature-box,
.service-card,
.choose-item{
    animation: fadeUp .7s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(30px);
    }

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