/* =========================================
   JANOKOTHA WELCOME PAGE
   ========================================= */

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


:root {
    --navy: #25277e;
    --dark-blue: #080a3b;
    --deep-blue: #11145b;

    --pink: #ec008c;
    --cyan: #00a8df;
    --yellow: #ffd600;

    --white: #ffffff;
    --light: #e8ebff;
    --muted: #b9c0ec;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    font-family:
        "Noto Sans Bengali",
        Arial,
        sans-serif;

    background: var(--dark-blue);

    color: var(--white);
}


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

.page {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


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

.hero {
    position: relative;

    flex: 1;

    min-height: 720px;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(236, 0, 140, 0.20),
            transparent 35%
        ),

        radial-gradient(
            circle at 0% 100%,
            rgba(0, 168, 223, 0.18),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #06082f 0%,
            #171a6e 50%,
            #080a3b 100%
        );
}


/* Background diagonal design */

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            transparent 40%,
            rgba(255,255,255,0.03) 40.2%,
            rgba(255,255,255,0.03) 40.5%,
            transparent 40.7%
        ),

        linear-gradient(
            300deg,
            transparent 0%,
            transparent 60%,
            rgba(255,255,255,0.025) 60.2%,
            rgba(255,255,255,0.025) 60.5%,
            transparent 60.7%
        );

    pointer-events: none;
}


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

.container {
    position: relative;

    z-index: 5;

    width: min(900px, 92%);

    padding: 50px 20px;

    text-align: center;

    animation: pageUp 0.8s ease;
}


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

.logo-box {
    display: inline-flex;

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

    padding: 15px 20px;

    margin-bottom: 22px;

    border-radius: 24px;

    background: rgba(255,255,255,0.98);

    box-shadow:
        0 20px 60px rgba(0,0,0,0.35);

    transition: 0.3s ease;
}


.logo-box:hover {
    transform: translateY(-5px);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.45);
}


.logo-box img {
    display: block;

    width: min(590px, 82vw);

    max-height: 270px;

    object-fit: contain;
}


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

.small-title {
    margin-top: 5px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 5px;

    color: #9deaff;
}


h1 {
    margin-top: 5px;

    font-size: clamp(48px, 8vw, 82px);

    line-height: 1;

    font-weight: 800;

    background:
        linear-gradient(
            90deg,
            #ffffff 10%,
            #ffe65b 45%,
            #ff54b5 90%
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}


.slogan {
    margin-top: 16px;

    font-size: clamp(18px, 3vw, 26px);

    font-weight: 600;

    color: var(--light);
}


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

.line {
    width: 90px;

    height: 4px;

    margin: 25px auto;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            var(--pink)
        );
}


/* =========================================
   CONTACT BOX
   ========================================= */

.contact-box {
    width: min(730px, 100%);

    margin: 0 auto 30px;

    display: grid;

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

    gap: 14px;

    text-align: left;
}


/* =========================================
   CONTACT ITEM
   ========================================= */

.contact-item {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    min-height: 82px;

    padding: 16px;

    border:
        1px solid
        rgba(255,255,255,0.13);

    border-radius: 16px;

    background:
        rgba(255,255,255,0.07);

    backdrop-filter: blur(12px);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.contact-item:hover {
    transform: translateY(-4px);

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


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

.icon {
    width: 40px;

    height: 40px;

    min-width: 40px;

    display: flex;

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

    border-radius: 11px;

    font-size: 20px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--pink)
        );
}


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

.contact-content span {
    display: block;

    margin-bottom: 4px;

    font-size: 12px;

    font-weight: 700;

    color: #9deaff;
}


.contact-content a,
.contact-content p {
    color: white;

    font-size: 14px;

    line-height: 1.6;

    text-decoration: none;

    overflow-wrap: anywhere;
}


.contact-content a:hover {
    color: #ffe65b;
}


/* =========================================
   WEBSITE BUTTON
   ========================================= */

.website-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    padding: 14px 25px;

    border-radius: 50px;

    color: white;

    text-decoration: none;

    font-size: 15px;

    font-weight: 700;

    background:
        linear-gradient(
            90deg,
            #ee008d,
            #3039a2
        );

    box-shadow:
        0 12px 30px rgba(0,0,0,0.28);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.website-button:hover {
    transform: translateY(-4px);

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


.website-button strong {
    font-size: 23px;

    line-height: 0;
}


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

.glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.glow-one {
    width: 300px;

    height: 300px;

    top: -100px;

    left: -100px;

    background:
        radial-gradient(
            circle,
            rgba(255,214,0,0.35),
            transparent 68%
        );
}


.glow-two {
    width: 350px;

    height: 350px;

    right: -130px;

    bottom: -150px;

    background:
        radial-gradient(
            circle,
            rgba(236,0,140,0.32),
            transparent 68%
        );
}


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

footer {
    padding: 15px 20px;

    text-align: center;

    font-size: 12px;

    color: #aeb5e5;

    background: #05072c;
}


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

@keyframes pageUp {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 700px) {

    .hero {
        min-height: 100vh;
    }


    .container {
        padding:
            35px 10px
            45px;
    }


    .logo-box {
        padding: 10px;

        border-radius: 18px;
    }


    .logo-box img {
        width: 88vw;

        max-height: 220px;
    }


    .contact-box {
        grid-template-columns: 1fr;
    }


    .contact-item {
        min-height: auto;
    }
}


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

@media (max-width: 450px) {

    .small-title {
        font-size: 11px;

        letter-spacing: 3px;
    }


    h1 {
        font-size: 48px;
    }


    .slogan {
        font-size: 17px;
    }


    .contact-item {
        padding: 13px;
    }


    .contact-content a,
    .contact-content p {
        font-size: 13px;
    }


    .website-button {
        width: 100%;

        padding: 13px 15px;

        font-size: 14px;
    }
}


/* =========================================
   REDUCE MOTION
   ========================================= */

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

    * {
        animation: none !important;

        transition: none !important;
    }
}