/* ========================================
   RESET
======================================== */

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

/* ========================================
   ROOT
======================================== */

:root{
    --primary:#082b66;
    --blue:#0e4ca8;
    --green:#4aad2c;
    --orange:#f3a100;
    --white:#ffffff;
    --shadow:
            0 10px 30px rgba(0,0,0,0.14);
    --transition:.3s ease;
}

/* ========================================
   HTML / BODY
======================================== */

html,
body{
    width:100%;
    height:100%;
}

body{
    font-family:'Montserrat',sans-serif;
    overflow-x:hidden;
    background:#f4f7fc;
    color:#082b66;
}

/* ========================================
   PAGE
======================================== */

.landing-page{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

/* ========================================
   BACKGROUND IMAGE
======================================== */

.bg-image{
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:95%;
    background-image:url("daga2020-store.webp");
    background-size:cover;
    background-position:center right;
    background-repeat:no-repeat;
    z-index:0;
}

/* ========================================
   OVERLAY
======================================== */

.overlay{

    position:absolute;
    inset:0;

    z-index:1;
}

/* ========================================
   CONTENT
======================================== */

.content-wrapper{

    position:relative;
    z-index:2;
    flex:1;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    min-height:100vh;
    background:
            linear-gradient(
                    135deg,
                    rgba(255,255,255,0.96) 0%,
                    rgba(255,255,255,0.86) 27%,
                    rgba(255,255,255,0.12) 67%
            );
    padding:
            22px
            4vw
            220px;
}

/* ========================================
   LEFT PANEL
======================================== */

.left-panel{
    width:44%;
    max-width:640px;
    position:relative;
    z-index:5;
}

/* ========================================
   LOGO
======================================== */

.logo{
    width:100%;
    max-width:480px;
    margin-bottom:8px;
}

/* ========================================
   SLOGAN
======================================== */

.slogan{
    font-size:
            clamp(1rem,1vw,1.35rem);
    font-style:italic;
    color:#173f7a;
    margin-bottom:24px;
}

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

.section-title{
    font-size:
            clamp(1.8rem,2.3vw,3.4rem);
    font-weight:800;
    margin-bottom:10px;
}

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

.services{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* ========================================
   SERVICE CARD
======================================== */

.service-card{

    display:flex;
    align-items:center;
    gap:18px;
    min-height:88px;
    border-radius:24px;
    padding:18px 24px;
    color:#fff;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.service-card:hover{

    transform:translateY(-3px);
}

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

.blue{
    background:var(--blue);
}

.green{
    background:var(--green);
}

.orange{
    background:var(--orange);
}

/* ========================================
   ICON
======================================== */

.service-icon{
    width:62px;
    height:62px;
    border-radius:50%;
    border:3px solid rgba(255,255,255,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:24px;
}

/* ========================================
   TEXT
======================================== */

.service-text h2{
    font-size:
            clamp(1.05rem,1.2vw,1.7rem);
    font-weight:800;
    margin-bottom:4px;
}

.service-text p{
    font-size:
            clamp(.92rem,.95vw,1.05rem);
    line-height:1.35;
}

/* ========================================
   RIGHT PANEL
======================================== */

.right-panel{
    position:absolute;
    top:16px;
    right:4vw;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items: end;
    z-index:4;
}

/* ========================================
   HERO TITLE
======================================== */

.hero-title{

    text-align:center;

    margin-bottom:24px;
}

.hero-title h2{
    font-size:
            clamp(1.8rem,2.4vw,3.2rem);
    font-weight:800;
    line-height:1.05;
}

.hero-title h3{

    font-size:
            clamp(1.3rem,1.8vw,2.2rem);

    font-weight:500;

    margin-top:8px;
}

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

.hero-features{
    display:flex;
    justify-content:center;
    gap:22px;
    border-radius: 24px;
    padding:18px 24px;
    box-shadow:var(--shadow);
    transition:var(--transition);
    background: rgba(255,255,255,0.87);
}

.hero-features:hover{
    transform:translateY(-3px);
}

/* ========================================
   FEATURE ITEM
======================================== */

.feature-item{

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:12px;
}

/* ========================================
   FEATURE CIRCLE
======================================== */

.feature-circle{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:28px;
    box-shadow:var(--shadow);
    transition:var(--transition);
}

.feature-circle:hover{

    transform:translateY(-3px);
}

.feature-item span{
    font-size:15px;
    font-weight:800;
    text-align:center;
}

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

.blue-circle{
    background:var(--blue);
}

.green-circle{
    background:var(--green);
}

.orange-circle{
    background:var(--orange);
}

/* ========================================
   INFO BAR
======================================== */

.info-bar{
    position:absolute;
    left:0;
    bottom:82px;
    width:100%;
    z-index:5;
    /*background: rgba(255,255,255,0.92);*/
    background:
            linear-gradient(
                    90deg,
                    rgba(255,255,255,1.0) 0%,
                    rgba(255,255,255,0.5) 45%,
                    rgba(255,255,255,0.10) 90%
            );
    /*backdrop-filter:blur(10px);*/
    display:flex;
    justify-content:left;
    align-items:center;
    gap:28px;
    padding: 14px 3vw;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* ========================================
   INFO ITEM
======================================== */

.info-item{
    display:flex;
    align-items:center;
    gap:14px;
    color:#082b66;
}

.info-item i{

    font-size:36px;
}

.info-item span{

    font-size:15px;

    font-weight:700;

    line-height:1.3;
}

/* ========================================
   DIVIDER
======================================== */

.divider{

    width:1px;
    height:54px;

    background:
            rgba(0,0,0,0.12);
}

/* ========================================
   FOOTER
======================================== */

.footer{

    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    z-index:6;

    background:
            linear-gradient(
                    90deg,
                    #082b66,
                    #041b44
            );

    color:#fff;

    display:flex;

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

    gap:18px;

    padding:
            16px
            3vw;
}

/* ========================================
   FOOTER ITEM
======================================== */

.footer-item{

    display:flex;
    align-items:center;

    gap:14px;

    font-size:18px;
    font-weight:600;
}

/* ========================================
   FOOTER ICON
======================================== */

.footer-icon{

    width:52px;
    height:52px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,0.65);

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

    font-size:20px;
}

/* ========================================
   FOOTER SLOGAN
======================================== */

.footer-slogan{

    font-size:
            clamp(1rem,1.3vw,1.7rem);

    font-style:italic;

    font-weight:500;
}

/* ========================================
   LAPTOP
======================================== */

@media(max-width:1200px){

    .right-panel{
        align-content: center;
        width:70%;
        top:26px;
    }

    .hero-title h2{
        font-size:2.1rem;
    }

    .hero-title h3{
        font-size:1.5rem;
    }

    .feature-circle{
        width:64px;
        height:64px;
        font-size:32px;
    }

    .feature-item span{
        font-size:13px;
    }

    .logo{
        max-width:400px;
    }
}

/* ========================================
   TABLET
======================================== */

@media(max-width:991px){

    body{
        overflow-y:auto;
    }

    .landing-page{
        overflow:visible;
    }

    .bg-image{
        width:100%;
        opacity:.28;
        background-position:right center;
    }

    .overlay{
        background: rgba(255,255,255,0.12);
    }

    .content-wrapper{
        flex-direction:column;
        align-items:center;
        min-height:auto;
        padding: 30px 20px 30px;
    }

    .left-panel{
        width:100%;
        max-width:100%;
        text-align:center;
    }

    .right-panel{

        position:relative;

        top:auto;
        right:auto;

        width:100%;

        margin-top:40px;
    }

    .logo{
        margin-inline:auto;
    }

    .hero-features{
        flex-wrap:wrap;
    }

    .info-bar{
        position:relative;
        bottom:auto;
        flex-wrap:wrap;
        gap:18px;
    }

    .divider{
        display:none;
    }

    .footer{

        position:relative;

        flex-wrap:wrap;

        justify-content:center;

        text-align:center;
    }
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px){

    .section-title{
        font-size:1.8rem;
    }

    .hero-title h2{
        font-size:1.9rem;
    }

    .hero-title h3{
        font-size:1.4rem;
    }

    .service-card{

        flex-direction:column;

        text-align:center;

        padding:22px 18px;
    }

    .service-icon{

        width:58px;
        height:58px;

        font-size:22px;
    }

    .feature-circle{

        width:72px;
        height:72px;

        font-size:28px;
    }

    .feature-item span{
        font-size:13px;
    }

    .info-item{

        width:100%;

        justify-content:center;
    }

    .footer-item{

        width:100%;

        justify-content:center;
    }

    .footer-slogan{

        width:100%;

        text-align:center;
    }
}