/*
=========================================================
Arpita Planner
Version : 2.0.0
Module  : Premium UI Framework
Author  : Arpita TravelOS
=========================================================
*/

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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#F3F7FC;

    color:#1E293B;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

/*=========================================================
VARIABLES
=========================================================*/

:root{

    --primary:#0057FF;

    --primary-dark:#003DB8;

    --gold:#F4B400;

    --text:#1E293B;

    --muted:#64748B;

    --border:#E2E8F0;

    --white:#FFFFFF;

    --bg:#F3F7FC;

    --success:#16A34A;

    --radius:22px;

    --shadow:

        0 20px 60px rgba(15,23,42,.08);

    --transition:.30s ease;

}

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

.atp-bg-circle{

    position:fixed;

    border-radius:50%;

    filter:blur(90px);

    z-index:-1;

}

.atp-bg-circle-1{

    width:320px;

    height:320px;

    top:-120px;

    right:-80px;

    background:#CFE3FF;

}

.atp-bg-circle-2{

    width:260px;

    height:260px;

    bottom:-80px;

    left:-80px;

    background:#D9F3FF;

}

/*=========================================================
WRAPPER
=========================================================*/

.atp-wrapper{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:50px 20px;

}

/*=========================================================
CONTAINER
=========================================================*/

.atp-container{

    width:100%;

    max-width:620px;

}

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

.atp-card{

    background:#FFFFFF;

    border-radius:32px;

    padding:42px;

    box-shadow:var(--shadow);

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

    backdrop-filter:blur(12px);

    position:relative;

}

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

.atp-brand{

    text-align:center;

    margin-bottom:18px;

}

.atp-brand img{

    width:240px;

    height:auto;

    display:inline-block;

}

/*=========================================================
TRUST BADGE
=========================================================*/

.atp-badge{

    width:max-content;

    margin:0 auto 28px;

    display:flex;

    align-items:center;

    gap:10px;

    background:#FFF9E8;

    color:#A16207;

    padding:10px 18px;

    border-radius:999px;

    font-size:14px;

    font-weight:600;

    border:1px solid #FDE68A;

}

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

.atp-hero{

    text-align:center;

    margin-bottom:34px;

}

.atp-hero h1{

    font-size:40px;

    font-weight:700;

    line-height:1.2;

    color:#0F172A;

    margin-bottom:14px;

}

.atp-hero p{

    font-size:16px;

    line-height:1.8;

    color:#64748B;

    max-width:520px;

    margin:auto;

}

/*=========================================================
BENEFITS
=========================================================*/

.atp-benefits{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    margin-bottom:34px;

}

.atp-benefit{

    background:#EEF4FF;

    color:#0B5ED7;

    padding:10px 16px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}
/*=========================================================
FORM
=========================================================*/

.atp-form{

    width:100%;

}

.atp-row{

    margin-bottom:22px;

}

.atp-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.atp-group{

    display:flex;

    flex-direction:column;

}

.atp-group label{

    font-size:14px;

    font-weight:600;

    color:#334155;

    margin-bottom:10px;

}

/*=========================================================
INPUTS
=========================================================*/

.atp-input,
.atp-select{

    width:100%;

    height:60px;

    padding:0 18px;

    border:1px solid #E2E8F0;

    border-radius:18px;

    background:#FFFFFF;

    font-size:15px;

    font-family:'Poppins',sans-serif;

    color:#1E293B;

    transition:all .30s ease;

    appearance:none;

    outline:none;

}

.atp-input::placeholder{

    color:#94A3B8;

}

/*=========================================================
INPUT HOVER
=========================================================*/

.atp-input:hover,
.atp-select:hover{

    border-color:#CBD5E1;

    transform:translateY(-1px);

}

/*=========================================================
INPUT FOCUS
=========================================================*/

.atp-input:focus,
.atp-select:focus{

    border-color:#0057FF;

    background:#FFFFFF;

    box-shadow:
        0 0 0 4px rgba(0,87,255,.12);

}

/*=========================================================
DATE
=========================================================*/

input[type="date"].atp-input{

    cursor:pointer;

}

/*=========================================================
SELECT
=========================================================*/

.atp-select{

    cursor:pointer;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2364748B' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    background-size:16px;

    padding-right:48px;

}

/*=========================================================
FORM CARD EFFECT
=========================================================*/

.atp-body{

    background:#F8FBFF;

    border:1px solid #EDF2F7;

    border-radius:24px;

    padding:28px;

}

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

.atp-btn{

    width:100%;

    height:62px;

    border:none;

    border-radius:18px;

    background:linear-gradient(135deg,#0057FF,#0B5ED7);

    color:#FFFFFF;

    font-size:18px;

    font-weight:600;

    font-family:'Poppins',sans-serif;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    cursor:pointer;

    transition:.35s ease;

    margin-top:12px;

    box-shadow:

        0 16px 35px rgba(0,87,255,.25);

}

.atp-btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 22px 45px rgba(0,87,255,.35);

}

.atp-btn:active{

    transform:scale(.98);

}

.atp-btn svg{

    transition:.30s;

}

.atp-btn:hover svg{

    transform:translateX(5px);

}

/*=========================================================
RESPONSE TIME
=========================================================*/

.atp-response{

    margin-top:16px;

    text-align:center;

    font-size:13px;

    color:#64748B;

}

.atp-response strong{

    color:#0057FF;

}
/*=========================================================
TRUST SECTION
=========================================================*/

.atp-trust-section{

    margin-top:42px;

}

.atp-section-title{

    text-align:center;

    font-size:22px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:24px;

}

.atp-trust-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.atp-trust-card{

    background:#FFFFFF;

    border:1px solid #E8EEF7;

    border-radius:22px;

    padding:26px 22px;

    text-align:center;

    transition:.35s ease;

    box-shadow:

        0 10px 25px rgba(15,23,42,.05);

}

.atp-trust-card:hover{

    transform:translateY(-6px);

    border-color:#0057FF;

    box-shadow:

        0 25px 45px rgba(0,87,255,.12);

}

.atp-trust-icon{

    width:70px;

    height:70px;

    margin:auto auto 18px;

    border-radius:50%;

    background:#EEF4FF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

}

.atp-trust-card h3{

    font-size:17px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:10px;

}

.atp-trust-card p{

    font-size:14px;

    line-height:1.7;

    color:#64748B;

}

/*=========================================================
PRIVACY
=========================================================*/

.atp-privacy{

    margin-top:38px;

    padding:20px;

    border-radius:18px;

    background:#F8FBFF;

    border:1px solid #E6EEF8;

    text-align:center;

}

.atp-privacy strong{

    display:block;

    margin-bottom:8px;

    font-size:16px;

    color:#0F172A;

}

.atp-privacy p{

    font-size:14px;

    color:#64748B;

    line-height:1.8;

}

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

.atp-footer{

    margin-top:34px;

    padding-top:28px;

    border-top:1px solid #E8EEF7;

    text-align:center;

}

.atp-footer-brand{

    font-size:18px;

    font-weight:700;

    color:#0057FF;

    margin-bottom:6px;

}

.atp-footer-text{

    color:#64748B;

    font-size:14px;

    margin-bottom:16px;

}

.atp-footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

}

.atp-footer-links a{

    text-decoration:none;

    color:#0057FF;

    font-size:14px;

    font-weight:600;

    transition:.30s;

}

.atp-footer-links a:hover{

    color:#003DB8;

}

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

@keyframes atpFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.atp-card{

    animation:atpFade .7s ease;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:768px){

    .atp-card{

        padding:28px;

    }

    .atp-hero h1{

        font-size:30px;

    }

    .atp-grid{

        grid-template-columns:1fr;

    }

    .atp-trust-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:480px){

    .atp-wrapper{

        padding:20px 14px;

    }

    .atp-card{

        border-radius:24px;

        padding:22px;

    }

    .atp-brand img{

        width:190px;

    }

    .atp-hero h1{

        font-size:26px;

    }

    .atp-hero p{

        font-size:15px;

    }

    .atp-btn{

        font-size:17px;

        height:58px;

    }

    .atp-benefits{

        justify-content:flex-start;

    }

}