/*==================================================
  PRIVACY POLICY CSS
  Part 1
  Reset • Typography • Layout • Hero
  VBlink HR Consultants
==================================================*/

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


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

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

html{
    scroll-behavior:smooth;
    font-size:16px;
}

body{

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

    background:#f6f9ff;

    color:#24344d;

    overflow-x:hidden;

    line-height:1.7;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


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

:root{

    --primary:#2563eb;

    --secondary:#7c3aed;

    --primary-dark:#1d4ed8;

    --text:#24344d;

    --text-light:#60738d;

    --white:#ffffff;

    --light:#f8fbff;

    --border:#dce7f5;

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

    --shadow-hover:0 28px 60px rgba(37,99,235,.18);

    --radius:24px;

    --transition:.35s ease;

}


/*=========================
 SELECTION
=========================*/

::selection{

    background:var(--primary);

    color:#fff;

}


/*=========================
 SCROLLBAR
=========================*/

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

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

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    180deg,
    var(--primary),
    var(--secondary));

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}


/*=========================
 LINKS
=========================*/

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition);

}

a:hover{

    color:var(--primary);

}


/*=========================
 IMAGES
=========================*/

img{

    display:block;

    max-width:100%;

    height:auto;

}


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

.container{

    width:min(1180px,92%);

    margin:auto;

}


/*=========================
 MAIN
=========================*/

main{

    position:relative;

    overflow:hidden;

}


/*=========================
 TYPOGRAPHY
=========================*/

h1,h2,h3,h4{

    color:var(--text);

    font-weight:700;

    line-height:1.15;

}

h1{

    font-size:clamp(2.8rem,5vw,4.5rem);

}

h2{

    font-size:clamp(2rem,4vw,3rem);

}

h3{

    font-size:1.35rem;

}

p{

    color:var(--text-light);

    margin-bottom:1rem;

}

strong{

    color:var(--text);

}


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

.section{

    padding:90px 0;

    position:relative;

}

.light-section{

    background:#fbfdff;

}


/*=========================
 SECTION HEADING
=========================*/

.section-heading{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.section-heading h2{

    margin:15px 0 18px;

}

.section-heading p{

    font-size:1.08rem;

}


/*=========================
 EYEBROW
=========================*/

.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 22px;

    border-radius:50px;

    font-size:.82rem;

    letter-spacing:.12em;

    font-weight:700;

    text-transform:uppercase;

    color:var(--primary);

    background:rgba(37,99,235,.08);

    border:1px solid rgba(37,99,235,.12);

}


/*=========================
 BUTTONS
=========================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    border-radius:14px;

    font-weight:600;

    transition:var(--transition);

    cursor:pointer;

}

.btn-primary{

    color:#fff;

    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:
    0 15px 35px rgba(37,99,235,.25);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 22px 45px rgba(37,99,235,.35);

}


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

.hero{

    position:relative;

    overflow:hidden;

    padding:140px 0 110px;

    background:

    radial-gradient(circle at 15% 20%,
    rgba(37,99,235,.14),
    transparent 35%),

    radial-gradient(circle at 85% 30%,
    rgba(124,58,237,.12),
    transparent 35%),

    linear-gradient(
    135deg,
    #f8fbff 0%,
    #edf4ff 50%,
    #ffffff 100%);

}


/* Decorative Background */

.hero::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(37,99,235,.10),
    transparent 70%);

    top:-220px;

    left:-180px;

}

.hero::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(124,58,237,.12),
    transparent 70%);

    right:-120px;

    bottom:-180px;

}


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

.hero-grid{

    display:grid;

    grid-template-columns:

    minmax(0,1.2fr)
    minmax(320px,.8fr);

    gap:70px;

    align-items:center;

    position:relative;

    z-index:2;

}


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

.hero-copy{

    max-width:700px;

}

.hero-copy h1{

    margin:25px 0;

}

.hero-copy p{

    font-size:1.15rem;

    max-width:620px;

}

/*==================================================
  PART 2
  HERO CARD • PRIVACY BADGES • BUTTONS
  HERO ANIMATIONS • FLOATING EFFECTS
==================================================*/


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

.hero-card{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    z-index:2;

}


/* Floating Decorative Circles */

.hero-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.22),
        rgba(124,58,237,.15)
    );

    top:-40px;

    right:-40px;

    filter:blur(12px);

    animation:floatCircle1 8s ease-in-out infinite;

    z-index:-1;

}

.hero-card::after{

    content:"";

    position:absolute;

    width:110px;

    height:110px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.85),
        rgba(37,99,235,.18)
    );

    left:-35px;

    bottom:30px;

    animation:floatCircle2 7s ease-in-out infinite;

    z-index:-1;

}


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

.card{

    position:relative;

    width:100%;

    max-width:430px;

    padding:42px;

    border-radius:30px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    overflow:hidden;

    box-shadow:

        0 20px 60px rgba(37,99,235,.12),

        0 8px 20px rgba(0,0,0,.06);

    transition:all .45s ease;

}


/* Gradient Border */

.card::before{

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed,
        #2563eb
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}


/* Highlight */

.card::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

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

    top:-90px;

    right:-70px;

    filter:blur(6px);

}


.card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 35px 70px rgba(37,99,235,.22),

        0 10px 24px rgba(0,0,0,.08);

}


.card h2{

    font-size:1.9rem;

    margin-bottom:18px;

    color:#16396d;

}

.card p{

    margin-bottom:18px;

    color:#5d6f89;

    line-height:1.85;

}


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

.tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    margin-bottom:20px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:#fff;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    box-shadow:

        0 12px 24px rgba(37,99,235,.25);

}


.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    background:#edf4ff;

    color:#2563eb;

    border:1px solid rgba(37,99,235,.18);

    font-size:.82rem;

    font-weight:600;

}


/*=========================================
  BUTTONS
=========================================*/

.hero-actions{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:40px;

}


.btn{

    min-width:180px;

    min-height:56px;

    border-radius:16px;

    font-size:1rem;

    letter-spacing:.02em;

    transition:

        transform .35s,

        box-shadow .35s,

        background .35s;

}


.btn-primary{

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:#fff;

    box-shadow:

        0 16px 34px rgba(37,99,235,.30);

}


.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:

        0 24px 44px rgba(37,99,235,.35);

}


.btn-secondary{

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

    color:#1f3b71;

    border:1px solid rgba(37,99,235,.16);

    backdrop-filter:blur(10px);

}


.btn-secondary:hover{

    background:#ffffff;

    color:#2563eb;

    transform:translateY(-5px);

    box-shadow:

        0 20px 35px rgba(0,0,0,.08);

}


/*=========================================
  FLOATING GLOW EFFECTS
=========================================*/

.hero .glow{

    position:absolute;

    border-radius:50%;

    filter:blur(45px);

    opacity:.35;

    pointer-events:none;

}

.hero .glow.one{

    width:220px;

    height:220px;

    background:#2563eb;

    left:8%;

    bottom:10%;

}

.hero .glow.two{

    width:170px;

    height:170px;

    background:#7c3aed;

    right:10%;

    top:12%;

}


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

.hero-copy{

    animation:slideLeft 1s ease both;

}

.hero-card{

    animation:slideRight 1s ease both;

}


@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


@keyframes floatCircle1{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}


@keyframes floatCircle2{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(16px);

    }

}

/*==================================================
  PART 3
  SECTION STYLING • SECTION HEADINGS
  POLICY CARDS • POLICY GRIDS
  INFORMATION CARDS
==================================================*/


/*=========================================
  SECTION STYLING
=========================================*/

.section{

    position:relative;

    padding:100px 0;

    overflow:hidden;

    z-index:1;

}

.section:nth-child(even){

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

}

.section:nth-child(odd){

    background:#fdfefe;

}


/* Decorative Background Shapes */

.section::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(37,99,235,.05),
        transparent 70%
    );

    top:-140px;

    left:-120px;

    z-index:-1;

}

.section::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(124,58,237,.05),
        transparent 70%
    );

    bottom:-120px;

    right:-100px;

    z-index:-1;

}


/*=========================================
  LIGHT SECTION
=========================================*/

.light-section{

    background:linear-gradient(
        180deg,
        #f6f9ff,
        #ffffff
    );

}


/*=========================================
  SECTION HEADING
=========================================*/

.section-heading{

    max-width:820px;

    margin:0 auto 70px;

    text-align:center;

    position:relative;

}

.section-heading::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    margin:25px auto 0;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );

}

.section-heading h2{

    margin:20px 0;

    font-size:clamp(2rem,4vw,3.2rem);

    color:#1f365c;

    line-height:1.2;

}

.section-heading p{

    font-size:1.08rem;

    max-width:700px;

    margin:auto;

    color:#60738d;

    line-height:1.9;

}


/*=========================================
  POLICY GRID
=========================================*/

.policy-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:32px;

    align-items:stretch;

}


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

.policy-card{

    position:relative;

    padding:40px;

    border-radius:28px;

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(37,99,235,.08);

    box-shadow:

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

    overflow:hidden;

    transition:all .35s ease;

}


/* Gradient Top Border */

.policy-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );

}


/* Decorative Glow */

.policy-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(37,99,235,.06);

    top:-90px;

    right:-80px;

}

.policy-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 30px 60px rgba(37,99,235,.14);

}


.policy-card h3{

    margin-bottom:18px;

    font-size:1.45rem;

    color:#1e3a70;

}

.policy-card p{

    margin-bottom:18px;

    color:#5e7088;

    line-height:1.9;

}

.policy-card:last-child p{

    margin-bottom:0;

}


/*=========================================
  INFORMATION CARDS
=========================================*/

.policy-item{

    position:relative;

    padding:35px;

    border-radius:24px;

    background:#ffffff;

    border:1px solid rgba(37,99,235,.08);

    box-shadow:

        0 18px 45px rgba(15,23,42,.06);

    transition:all .35s ease;

    overflow:hidden;

}


/* Left Accent */

.policy-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:linear-gradient(
        180deg,
        #2563eb,
        #7c3aed
    );

}


/* Decorative Highlight */

.policy-item::after{

    content:"";

    position:absolute;

    width:130px;

    height:130px;

    border-radius:50%;

    background:rgba(37,99,235,.05);

    right:-45px;

    top:-45px;

}

.policy-item:hover{

    transform:translateY(-8px);

    border-color:rgba(37,99,235,.20);

    box-shadow:

        0 24px 55px rgba(37,99,235,.14);

}

.policy-item h3{

    margin-bottom:15px;

    color:#1b3970;

    font-size:1.35rem;

    line-height:1.3;

}

.policy-item p{

    margin:0;

    color:#60738d;

    line-height:1.85;

}


/*=========================================
  POLICY CONTENT SPACING
=========================================*/

.policy-card + .policy-card{

    margin-top:30px;

}

.policy-grid + .policy-card{

    margin-top:45px;

}

.policy-card + .policy-grid{

    margin-top:45px;

}


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

.policy-card,
.policy-item{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
  PART 4
  LISTS • RIGHTS CARDS
  THIRD-PARTY SECTION
  COOKIE SECTION
  DATA SECURITY SECTION
==================================================*/


/*=========================================
  GENERAL LISTS
=========================================*/

.policy-card ul,
.policy-item ul,
.contact-card ul{

    list-style:none;

    margin:30px 0 0;

    padding:0;

}

.policy-card li,
.policy-item li{

    position:relative;

    padding:14px 0 14px 48px;

    color:#556b86;

    line-height:1.8;

    border-bottom:1px solid rgba(37,99,235,.08);

    transition:all .35s ease;

}

.policy-card li:last-child,
.policy-item li:last-child{

    border-bottom:none;

}

.policy-card li::before,
.policy-item li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:13px;

    width:30px;

    height:30px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.95rem;

    font-weight:700;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    box-shadow:0 10px 20px rgba(37,99,235,.25);

}

.policy-card li:hover,
.policy-item li:hover{

    padding-left:56px;

    color:#1f3d70;

}


/*=========================================
  RIGHTS GRID
=========================================*/

.policy-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}


/*=========================================
  RIGHTS CARDS
=========================================*/

.policy-item{

    position:relative;

    overflow:hidden;

    padding:35px;

    border-radius:26px;

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

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

    transition:.35s ease;

}

.policy-item:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(37,99,235,.18);

}

.policy-item h3{

    margin-bottom:16px;

    color:#1b3c73;

    font-size:1.35rem;

}

.policy-item p{

    margin:0;

    color:#60738d;

}


/* Icon Circle */

.policy-item h3::before{

    content:"";

    display:inline-flex;

    width:48px;

    height:48px;

    margin-right:14px;

    border-radius:50%;

    vertical-align:middle;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    box-shadow:0 10px 25px rgba(37,99,235,.20);

}


/*=========================================
  THIRD PARTY SECTION
=========================================*/

.light-section{

    position:relative;

    overflow:hidden;

}

.light-section::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(124,58,237,.08),
    transparent 70%);

    right:-100px;

    top:-90px;

}

.light-section::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(37,99,235,.08),
    transparent 70%);

    left:-70px;

    bottom:-70px;

}


/*=========================================
  THIRD PARTY CARD
=========================================*/

.light-section .policy-card{

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

    backdrop-filter:blur(12px);

}

.light-section .policy-card h3{

    color:#20407b;

}

.light-section .policy-card:hover{

    transform:translateY(-8px);

}


/*=========================================
  COOKIE SECTION
=========================================*/

.cookie-card{

    position:relative;

    padding:40px;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        #ffffff,
        #f5f9ff
    );

    border:1px solid rgba(37,99,235,.10);

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

    overflow:hidden;

}

.cookie-card::before{

    content:"🍪";

    position:absolute;

    top:25px;

    right:30px;

    font-size:3rem;

    opacity:.08;

}

.cookie-card h3{

    margin-bottom:18px;

    color:#20407b;

}

.cookie-card p{

    color:#60738d;

    line-height:1.9;

}

.cookie-card:hover{

    transform:translateY(-8px);

}


/*=========================================
  DATA SECURITY SECTION
=========================================*/

.security-card{

    position:relative;

    padding:40px;

    border-radius:30px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:#fff;

    box-shadow:0 25px 60px rgba(37,99,235,.25);

}

.security-card::before{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

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

    top:-110px;

    right:-80px;

}

.security-card::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

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

    bottom:-50px;

    left:-40px;

}

.security-card h2,
.security-card h3{

    color:#fff;

    margin-bottom:18px;

}

.security-card p{

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

    line-height:1.9;

}

.security-card ul{

    list-style:none;

    margin-top:25px;

    padding:0;

}

.security-card li{

    position:relative;

    padding:12px 0 12px 45px;

    color:#fff;

    border-bottom:1px solid rgba(255,255,255,.15);

}

.security-card li:last-child{

    border-bottom:none;

}

.security-card li::before{

    content:"🔒";

    position:absolute;

    left:0;

    top:10px;

    font-size:1.15rem;

}

.security-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 70px rgba(37,99,235,.35);

}


/*=========================================
  SMALL DECORATIVE BADGES
=========================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(37,99,235,.10);

    color:#2563eb;

    font-size:.82rem;

    font-weight:600;

    margin-bottom:20px;

    border:1px solid rgba(37,99,235,.12);

}


/*=========================================
  HOVER ANIMATIONS
=========================================*/

.policy-card,
.policy-item,
.cookie-card,
.security-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

/*==================================================
  PART 5
  CONTACT CARD • CONTACT LIST
  CTA SECTION • CTA BUTTON
  GRADIENT EFFECTS
==================================================*/


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

.contact-card{

    position:relative;

    max-width:820px;

    margin:0 auto;

    padding:50px;

    border-radius:32px;

    overflow:hidden;

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

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    border:1px solid rgba(37,99,235,.10);

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

    transition:all .4s ease;

}

.contact-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 35px 80px rgba(37,99,235,.18);

}


/* Decorative Gradient */

.contact-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:7px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #4f46e5,
        #7c3aed
    );

}

.contact-card::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(37,99,235,.08),
        transparent 70%
    );

    right:-120px;

    top:-120px;

    pointer-events:none;

}


/*=========================================
  CONTACT HEADING
=========================================*/

.contact-card h3{

    font-size:2rem;

    color:#1f3d71;

    margin-bottom:30px;

    position:relative;

    padding-bottom:15px;

}

.contact-card h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:80px;

    height:4px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #7c3aed
    );

}


/*=========================================
  CONTACT LIST
=========================================*/

.contact-list{

    list-style:none;

    margin:0;

    padding:0;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:22px;

}


.contact-list li{

    position:relative;

    padding:22px 22px 22px 75px;

    border-radius:18px;

    background:#f8fbff;

    border:1px solid rgba(37,99,235,.08);

    color:#5d6f89;

    line-height:1.8;

    transition:all .35s ease;

}


.contact-list li:hover{

    transform:translateY(-6px);

    background:#ffffff;

    border-color:#2563eb;

    box-shadow:
        0 18px 40px rgba(37,99,235,.12);

}


.contact-list li strong{

    display:block;

    margin-bottom:6px;

    color:#1f3d71;

    font-size:1rem;

}


/*=========================================
  CONTACT ICONS
=========================================*/

.contact-list li::before{

    position:absolute;

    left:20px;

    top:22px;

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.05rem;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    box-shadow:
        0 10px 25px rgba(37,99,235,.25);

}

.contact-list li:nth-child(1)::before{
    content:"📍";
}

.contact-list li:nth-child(2)::before{
    content:"📞";
}

.contact-list li:nth-child(3)::before{
    content:"✉";
}

.contact-list li:nth-child(4)::before{
    content:"🌐";
}


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

.privacy-cta{

    position:relative;

    overflow:hidden;

    padding:100px 0;

    background:linear-gradient(
        135deg,
        #2563eb 0%,
        #4f46e5 45%,
        #7c3aed 100%
    );

}


/* Decorative Shapes */

.privacy-cta::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    top:-180px;

    left:-120px;

}

.privacy-cta::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

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

    right:-100px;

    bottom:-120px;

}


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

.cta-box{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    padding:60px;

    text-align:center;

    border-radius:34px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

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

}

.cta-box h2{

    color:#fff;

    font-size:clamp(2rem,4vw,3.2rem);

    margin-bottom:25px;

}

.cta-box p{

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

    font-size:1.08rem;

    max-width:720px;

    margin:0 auto 40px;

    line-height:1.9;

}


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

.cta-box .btn{

    min-width:220px;

    min-height:60px;

    border:none;

    border-radius:16px;

    background:#ffffff;

    color:#2563eb;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.03em;

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

    transition:all .35s ease;

}

.cta-box .btn:hover{

    transform:translateY(-6px) scale(1.04);

    background:#f8fbff;

    color:#1746a2;

    box-shadow:
        0 28px 55px rgba(0,0,0,.22);

}


/*=========================================
  GLOW EFFECT
=========================================*/

.cta-box::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:36px;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.15),
        transparent,
        rgba(255,255,255,.08)
    );

    pointer-events:none;

}


/*=========================================
  CONTACT & CTA ANIMATIONS
=========================================*/

.contact-card,
.cta-box{

    animation:fadeUp .9s ease both;

}

/*==================================================
  PART 6
  DECORATIVE BACKGROUNDS
  HOVER ANIMATIONS
  GLASSMORPHISM
  SHADOWS
  SCROLL EFFECTS
==================================================*/


/*=========================================
  DECORATIVE PAGE BACKGROUND
=========================================*/

body{

    position:relative;

    overflow-x:hidden;

    background:
        radial-gradient(circle at 0% 0%,
        rgba(37,99,235,.08),
        transparent 30%),

        radial-gradient(circle at 100% 20%,
        rgba(124,58,237,.08),
        transparent 32%),

        radial-gradient(circle at 50% 100%,
        rgba(59,130,246,.06),
        transparent 30%),

        linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);

}


/* Floating Decorative Circles */

body::before{

    content:"";

    position:fixed;

    width:420px;

    height:420px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(37,99,235,.08),
    transparent 70%);

    top:-160px;

    left:-180px;

    pointer-events:none;

    z-index:-1;

    animation:floatCircle1 16s ease-in-out infinite;

}


body::after{

    content:"";

    position:fixed;

    width:350px;

    height:350px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(124,58,237,.08),
    transparent 70%);

    right:-120px;

    bottom:-120px;

    pointer-events:none;

    z-index:-1;

    animation:floatCircle2 18s ease-in-out infinite;

}


/*=========================================
  GLOBAL GLASSMORPHISM EFFECT
=========================================*/

.policy-card,
.info-card,
.rights-card,
.contact-card,
.hero-card{

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

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

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

}


/*=========================================
  PREMIUM SHADOWS
=========================================*/

.policy-card,
.info-card,
.rights-card,
.contact-card{

    box-shadow:

        0 12px 30px rgba(15,23,42,.08),

        0 30px 70px rgba(37,99,235,.08);

}


/*=========================================
  HOVER ANIMATIONS
=========================================*/

.policy-card,
.info-card,
.rights-card,
.contact-card,
.contact-list li{

    transition:

        transform .45s ease,

        box-shadow .45s ease,

        border-color .35s ease,

        background .35s ease;

}


.policy-card:hover,
.info-card:hover,
.rights-card:hover,
.contact-card:hover{

    transform:

        translateY(-10px)

        scale(1.02);

    border-color:rgba(37,99,235,.25);

    box-shadow:

        0 20px 45px rgba(37,99,235,.16),

        0 35px 80px rgba(15,23,42,.12);

}


.policy-card:hover h3,
.info-card:hover h3,
.rights-card:hover h3{

    color:#2563eb;

}


/*=========================================
  IMAGE HOVER EFFECT
=========================================*/

img{

    transition:

        transform .45s ease,

        filter .45s ease;

}

img:hover{

    transform:scale(1.03);

    filter:brightness(1.04);

}


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

.btn{

    position:relative;

    overflow:hidden;

}


.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:skewX(-25deg);

}


.btn:hover::before{

    left:160%;

    transition:1s;

}


/*=========================================
  SCROLL REVEAL ANIMATION
=========================================*/

.section,
.policy-card,
.info-card,
.rights-card{

    animation:fadeUp .9s ease both;

}


/*=========================================
  CUSTOM SCROLLBAR
=========================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#edf3ff;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        180deg,

        #2563eb,

        #7c3aed

    );

    border-radius:20px;

    border:3px solid #edf3ff;

}

::-webkit-scrollbar-thumb:hover{

    background:linear-gradient(

        180deg,

        #1d4ed8,

        #6d28d9

    );

}


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

::selection{

    background:#2563eb;

    color:#fff;

}


/*=========================================
  SCROLL OFFSET
=========================================*/

html{

    scroll-behavior:smooth;

    scroll-padding-top:110px;

}


/*=========================================
  KEYFRAME ANIMATIONS
=========================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes floatCircle1{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(40px,35px);

    }

}


@keyframes floatCircle2{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-35px,-30px);

    }

}


/*=========================================
  REDUCED MOTION SUPPORT
=========================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto;

    }

}

/*==================================================
  PART 7
  TABLET RESPONSIVE DESIGN
  MOBILE RESPONSIVE DESIGN
  SMALL SCREEN IMPROVEMENTS
==================================================*/


/*=========================================
  LARGE TABLETS
=========================================*/

@media (max-width:1200px){

    .container{

        width:min(94%,1100px);

    }

    .hero{

        padding:90px 0 70px;

    }

    .hero-grid{

        gap:50px;

    }

    .policy-grid,
    .rights-grid,
    .info-grid{

        gap:25px;

    }

}


/*=========================================
  TABLETS
=========================================*/

@media (max-width:992px){

    .hero{

        padding:80px 0 60px;

        text-align:center;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .hero-copy{

        order:1;

    }

    .hero-card{

        order:2;

        justify-content:center;

    }

    .hero-copy h1{

        max-width:100%;

    }

    .hero-copy p{

        max-width:700px;

        margin:0 auto 30px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .policy-grid,
    .rights-grid,
    .info-grid{

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

    }

    .contact-card{

        padding:40px;

    }

    .contact-list{

        grid-template-columns:1fr;

    }

    .privacy-cta{

        padding:80px 0;

    }

}


/*=========================================
  SMALL TABLETS
=========================================*/

@media (max-width:768px){

    body{

        font-size:15px;

    }

    .hero{

        padding:70px 0 55px;

    }

    .hero-copy h1{

        font-size:2.5rem;

        line-height:1.15;

    }

    .hero-copy p{

        font-size:1rem;

    }

    .hero-card{

        max-width:100%;

    }

    .policy-grid,
    .rights-grid,
    .info-grid{

        grid-template-columns:1fr;

    }

    .policy-card,
    .rights-card,
    .info-card{

        padding:30px;

    }

    .section{

        padding:70px 0;

    }

    .section-heading{

        margin-bottom:45px;

    }

    .section-heading h2{

        font-size:2rem;

    }

    .contact-card{

        padding:35px 30px;

    }

    .contact-card h3{

        font-size:1.8rem;

    }

    .cta-box{

        padding:45px 30px;

    }

}


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

@media (max-width:576px){

    body{

        font-size:14px;

        line-height:1.7;

    }

    .container{

        width:92%;

    }

    .hero{

        padding:60px 0 50px;

    }

    .hero-copy h1{

        font-size:2rem;

    }

    .hero-copy p{

        font-size:.95rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

        gap:15px;

    }

    .btn{

        width:100%;

        max-width:300px;

    }

    .hero-card{

        padding:0;

    }

    .hero-card .card{

        padding:30px 25px;

    }

    .privacy-badges{

        justify-content:center;

        gap:12px;

    }

    .privacy-badge{

        font-size:.80rem;

        padding:8px 16px;

    }

    .section{

        padding:60px 0;

    }

    .section-heading h2{

        font-size:1.8rem;

    }

    .section-heading p{

        font-size:.95rem;

    }

    .policy-card,
    .rights-card,
    .info-card{

        padding:25px;

        border-radius:22px;

    }

    .policy-card h3,
    .rights-card h3,
    .info-card h3{

        font-size:1.2rem;

    }

    .policy-card p,
    .rights-card p,
    .info-card p{

        font-size:.95rem;

    }

    .contact-card{

        padding:28px 22px;

        border-radius:24px;

    }

    .contact-card h3{

        font-size:1.5rem;

    }

    .contact-list{

        gap:16px;

    }

    .contact-list li{

        padding:18px 18px 18px 65px;

    }

    .contact-list li::before{

        width:36px;

        height:36px;

        left:16px;

        top:18px;

        font-size:.95rem;

    }

    .cta-box{

        padding:35px 22px;

        border-radius:24px;

    }

    .cta-box h2{

        font-size:1.7rem;

    }

    .cta-box p{

        font-size:.95rem;

    }

    .cta-box .btn{

        width:100%;

        max-width:280px;

    }

}


/*=========================================
  EXTRA SMALL DEVICES
=========================================*/

@media (max-width:400px){

    .hero{

        padding:50px 0 40px;

    }

    .hero-copy h1{

        font-size:1.75rem;

    }

    .hero-copy p{

        font-size:.90rem;

    }

    .policy-card,
    .rights-card,
    .info-card{

        padding:20px;

    }

    .contact-card{

        padding:22px 18px;

    }

    .cta-box{

        padding:28px 18px;

    }

    .cta-box h2{

        font-size:1.5rem;

    }

}


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

@media (max-height:500px) and (orientation:landscape){

    .hero{

        padding:45px 0;

    }

    .section{

        padding:55px 0;

    }

}


/*=========================================
  PRINT IMPROVEMENTS
=========================================*/

@media print{

    .hero{

        padding:30px 0;

    }

    .hero::before,
    .hero::after,

    .privacy-cta::before,
    .privacy-cta::after,

    body::before,
    body::after{

        display:none;

    }

    .btn{

        display:none;

    }

}

/*==================================================
  PART 8
  SCROLLBAR
  ACCESSIBILITY
  PRINT STYLES
  KEYFRAME ANIMATIONS
  FINAL PROFESSIONAL POLISH
==================================================*/


/*==================================================
  PREMIUM CUSTOM SCROLLBAR
==================================================*/

html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

::-webkit-scrollbar{
    width:12px;
    height:12px;
}

::-webkit-scrollbar-track{
    background:#edf3ff;
    border-radius:20px;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(
        180deg,
        #2563eb 0%,
        #4f46e5 50%,
        #7c3aed 100%
    );
    border-radius:20px;
    border:2px solid #edf3ff;
}

::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(
        180deg,
        #1d4ed8,
        #4338ca,
        #6d28d9
    );
}

::-webkit-scrollbar-corner{
    background:#edf3ff;
}



/* Firefox Scrollbar */

*{
    scrollbar-width:thin;
    scrollbar-color:#4f46e5 #edf3ff;
}



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

::selection{
    background:#2563eb;
    color:#ffffff;
}

::-moz-selection{
    background:#2563eb;
    color:#ffffff;
}



/*==================================================
  ACCESSIBILITY
==================================================*/

/* Visible keyboard focus */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

    outline:3px solid #2563eb;
    outline-offset:4px;
    border-radius:10px;

}


/* Better tap targets */

button,
.btn,
input,
select,
textarea{

    min-height:32px;

}


/* Accessible images */

img{

    max-width:100%;
    height:auto;

}


/* Reduce motion */

@media (prefers-reduced-motion:reduce){

    *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

}


/* High Contrast */

@media (prefers-contrast:more){

    .policy-card,
    .rights-card,
    .info-card,
    .contact-card{

        border:2px solid #000;

    }

    .btn{

        border:2px solid currentColor;

    }

}



/*==================================================
  PRINT STYLES
==================================================*/

@media print{

    *{
        box-shadow:none !important;
        text-shadow:none !important;
        animation:none !important;
        transition:none !important;
    }

    body{

        background:#ffffff !important;
        color:#000 !important;
        font-size:12pt;

    }

    .hero,
    .privacy-cta{

        background:#ffffff !important;

    }

    .hero::before,
    .hero::after,
    .privacy-cta::before,
    .privacy-cta::after,
    body::before,
    body::after{

        display:none !important;

    }

    .btn,
    button{

        display:none !important;

    }

    a{

        color:#000 !important;
        text-decoration:underline;

    }

    .policy-card,
    .rights-card,
    .info-card,
    .contact-card{

        border:1px solid #999 !important;
        break-inside:avoid;
        page-break-inside:avoid;

    }

    h1,h2,h3{

        page-break-after:avoid;

    }

}



/*==================================================
  PAGE LOADING ANIMATION
==================================================*/

body{

    animation:pageFade .8s ease;

}



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

.policy-card,
.rights-card,
.info-card,
.contact-card{

    animation:fadeUp .8s ease both;

}



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

.policy-card:hover,
.rights-card:hover,
.info-card:hover,
.contact-card:hover{

    animation:cardFloat .45s ease forwards;

}



/*==================================================
  BUTTON SHIMMER
==================================================*/

.btn{

    position:relative;
    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transform:skewX(-25deg);

}

.btn:hover::before{

    left:170%;
    transition:1s;

}



/*==================================================
  LINK EFFECT
==================================================*/

a{

    transition:
        color .3s ease,
        opacity .3s ease;

}

a:hover{

    opacity:.9;

}



/*==================================================
  SECTION REVEAL
==================================================*/

.section{

    animation:fadeUp .9s ease;

}



/*==================================================
  KEYFRAME ANIMATIONS
==================================================*/

@keyframes pageFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}



@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}



@keyframes pulseGlow{

    0%{

        box-shadow:0 0 0 rgba(37,99,235,0);

    }

    50%{

        box-shadow:0 0 35px rgba(37,99,235,.30);

    }

    100%{

        box-shadow:0 0 0 rgba(37,99,235,0);

    }

}



@keyframes shimmer{

    from{

        background-position:-250px 0;

    }

    to{

        background-position:250px 0;

    }

}



@keyframes rotateGlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



@keyframes cardFloat{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-10px);

    }

}



/*==================================================
  FINAL PROFESSIONAL POLISH
==================================================*/

/* Crisp font rendering */

body{

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;

}


/* Prevent layout shifts */

img,
svg{

    display:block;

}


/* Better media scaling */

iframe,
video{

    width:100%;
    max-width:100%;
    border:none;

}


/* Improve transitions */

.policy-card,
.rights-card,
.info-card,
.contact-card,
.btn{

    will-change:transform;

}


/* Better spacing for anchored sections */

section{

    scroll-margin-top:100px;

}


/* Prevent horizontal overflow */

body{

    overflow-x:hidden;

}


/* Professional gradient line at page bottom */

body::after{

    content:"";

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #4f46e5,
        #7c3aed,
        #2563eb
    );

    z-index:9999;

}

.go-top-btn{
  position:fixed;
  right:1.4rem;
  bottom:1.4rem;
  width:32px;
  height:32px;
  border-radius:50%;
  border:0;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  font-size:1.2rem;
  font-weight:700;
  box-shadow:0 12px 30px rgba(37,99,235,.35);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:800;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.go-top-btn.show{
  display:flex;
  opacity:1;
}
.go-top-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(37,99,235,.45);
}