/* ============================================================

   REGISTRATION SECTION

\============================================================ */



:root {

    --tb-primary: #057003;

    --tb-primary-dark: #064B24;

    --tb-primary-light: #80BD00;



    --tb-purple-soft: #F3F8F1;

    --tb-purple-light: #E5F2C8;

    --tb-purple-border: #D5E8CE;



    --tb-heading: #064B24;

    --tb-text: #101B20;

    --tb-muted: #53645A;



    --tb-white: #ffffff;



    --tb-card-shadow:

        0 18px 45px rgba(6, 75, 36, 0.10);



    --tb-card-shadow-hover:

        0 25px 55px rgba(6, 75, 36, 0.17);



    --tb-radius: 28px;

}





/* ============================================================

   MAIN SECTION

\============================================================ */



.tb-registration {



    position: relative;



    width: 100%;



    padding:

        20px 20px

        110px;



    overflow: hidden;



    background:

        radial-gradient(

            circle at 12% 20%,

            rgba(128, 189, 0, 0.12),

            transparent 25%

        ),

        radial-gradient(

            circle at 88% 25%,

            rgba(5, 112, 3, 0.08),

            transparent 28%

        ),

        linear-gradient(

            180deg,

            #ffffff 0%,

            #F8FBF5 58%,

            #F3F8F1 100%

        );



    color: var(--tb-text);

}





/* ============================================================

   CONTAINER

\============================================================ */



.tb-registration-container {



    position: relative;



    z-index: 5;



    width: 100%;



    max-width: 1800px;



    margin: 0 auto;

}





/* ============================================================

   HEADER

\============================================================ */



.tb-registration-header {



    position: relative;



    text-align: center;



    margin-bottom: 55px;

}





/* ============================================================

   EYEBROW

\============================================================ */



.tb-registration-eyebrow {



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 18px;



    margin-bottom: 12px;



    color: var(--tb-primary);



    font-size: 15px;



    font-weight: 700;



    letter-spacing: 5px;



    text-transform: uppercase;

}





/* Lines beside Registration */



.tb-registration-eyebrow span {



    display: block;



    width: 55px;



    height: 2px;



    background:

        linear-gradient(

            90deg,

            transparent,

            var(--tb-primary)

        );



    border-radius: 10px;

}





.tb-registration-eyebrow span:last-child {



    background:

        linear-gradient(

            90deg,

            var(--tb-primary),

            transparent

        );

}





/* ============================================================

   MAIN HEADING

\============================================================ */



.tb-registration-header h2 {



    margin: 0;



    color: var(--tb-heading);



    font-size: clamp(38px, 5vw, 39px);



    line-height: 1.05;



    font-weight: 800;



    letter-spacing: -2px;

}





/* ============================================================

   HEADING UNDERLINE

\============================================================ */



.tb-registration-line {



    width: 145px;



    height: 5px;



    margin:

        22px auto

        25px;



    border-radius: 10px;



    background:

        linear-gradient(

            90deg,

            var(--tb-primary-dark),

            var(--tb-primary-light)

        );



    box-shadow:

        0 5px 18px

        rgba(5, 112, 3, 0.16);

}





/* ============================================================

   EARLY BIRD DEADLINE

\============================================================ */



.tb-registration-deadline {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    gap: 8px;



    margin: 0;



    padding:

        14px 30px;



    border-radius: 50px;



    color: var(--tb-heading);



    /* background:

        linear-gradient(

            100deg,

            #f2eaff,

            #f8f2ff

        ); */



    border:

        3px solid

        rgba(5, 112, 3, 0.06);



    box-shadow:

        0 8px 25px

        rgba(6, 75, 36, 0.06);



    font-size: 18px;



    font-weight: 500;

}





.tb-registration-deadline strong {



    color: var(--tb-primary);



    font-weight: 800;



    margin-left: 3px;

}





/* ============================================================

   REGISTRATION GRID

\============================================================ */



.tb-registration-grid {



    display: grid;



    grid-template-columns:

        repeat(4, minmax(0, 1fr));



    gap: 36px;



    align-items: stretch;

}





/* ============================================================

   REGISTRATION CARD

\============================================================ */



.tb-registration-card {



    position: relative;



    display: flex;



    flex-direction: column;



    min-height: 505px;



    overflow: hidden;



    padding:

        30px 30px

        28px;



    border:

        1px solid

        rgba(5, 112, 3, 0.08);



    border-radius:

        var(--tb-radius);



    background:

        rgba(255, 255, 255, 0.94);



    box-shadow:

        var(--tb-card-shadow);



    transition:

        transform 0.35s ease,

        box-shadow 0.35s ease,

        border-color 0.35s ease;

}





/* ============================================================

   SOFT CARD TOP BACKGROUND

\============================================================ */



.tb-registration-card::before {



    content: "";



    position: absolute;



    top: 0;

    left: 0;



    width: 100%;



    height: 155px;



    background:

        linear-gradient(

            135deg,

            rgba(229, 242, 200, 0.92),

            rgba(243, 248, 241, 0.90)

        );



    border-radius:

        0 0 65% 25%;



    pointer-events: none;

}





/* Decorative curved highlight */



.tb-registration-card::after {



    content: "";



    position: absolute;



    top: 105px;



    right: -60px;



    width: 220px;



    height: 90px;



    border-radius: 50%;



    background:

        rgba(128, 189, 0, 0.10);



    transform: rotate(-10deg);



    pointer-events: none;

}





/* ============================================================

   HOVER

\============================================================ */



.tb-registration-card:hover {



    transform:

        translateY(-10px);



    box-shadow:

        var(--tb-card-shadow-hover);



    border-color:

        rgba(5, 112, 3, 0.16);

}





/* ============================================================

   CARD TOP

\============================================================ */



.tb-card-top {



    position: relative;



    z-index: 2;



    display: flex;



    align-items: center;



    gap: 22px;



    min-height: 125px;

}





/* ============================================================

   REGISTRATION ICON

\============================================================ */



.tb-registration-icon {



    flex:

        0 0 92px;



    width: 92px;



    height: 92px;



    display: flex;



    align-items: center;



    justify-content: center;



    border-radius: 50%;



    color: #ffffff;



    font-size: 34px;



    background:

        linear-gradient(

            145deg,

            var(--tb-primary-dark),

            var(--tb-primary-light)

        );



    border:

        8px solid

        rgba(255, 255, 255, 0.82);



    box-shadow:

        0 10px 25px

        rgba(6, 75, 36, 0.22),



        inset 0 0 0 1px

        rgba(255, 255, 255, 0.2);



    transition:

        transform 0.35s ease;

}





.tb-registration-card:hover

.tb-registration-icon {



    transform:

        scale(1.06)

        rotate(-3deg);

}





/* ============================================================

   CARD TITLE

\============================================================ */



.tb-card-top h3 {



    margin: 0 0 6px;



    color: var(--tb-heading);



    font-size: 27px;



    line-height: 1.1;



    font-weight: 800;

}





/* ============================================================

   PRICE

\============================================================ */



.tb-price {



    display: flex;



    align-items: baseline;



    gap: 8px;

}





.tb-price span {



    color: var(--tb-primary);



    font-size: 38px;



    line-height: 1;



    font-weight: 800;



    letter-spacing: -1px;

}





.tb-price small {



    color: var(--tb-muted);



    font-size: 14px;



    font-weight: 600;



    letter-spacing: 1px;



    text-transform: uppercase;

}





/* ============================================================

   CARD DIVIDER

\============================================================ */



.tb-card-divider {



    position: relative;



    z-index: 2;



    width: 100%;



    height: 1px;



    margin:

        15px 0

        20px;



    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(5, 112, 3, 0.16),

            transparent

        );

}





/* ============================================================

   FEATURES

\============================================================ */



.tb-registration-features {



    position: relative;



    z-index: 2;



    display: flex;



    flex-direction: column;



    gap: 17px;



    margin: 0;



    padding: 0;



    list-style: none;

    margin-bottom: 10px;

}





.tb-registration-features li {



    display: flex;



    align-items: center;



    gap: 14px;



    color: var(--tb-text);



    font-size: 15.5px;



    line-height: 1.45;



    font-weight: 500;

}





/* ============================================================

   FEATURE CHECK ICON

\============================================================ */



.tb-registration-features li i {



    flex:

        0 0 34px;



    width: 34px;



    height: 34px;



    display: flex;



    align-items: center;



    justify-content: center;



    border-radius: 50%;



    color: var(--tb-primary-dark);



    background:

        linear-gradient(

            145deg,

            #E5F2C8,

            #F3F8F1

        );



    font-size: 13px;



    box-shadow:

        0 4px 12px

        rgba(5, 112, 3, 0.06);

}





/* ============================================================

   REGISTER BUTTON

\============================================================ */



.tb-register-card-btn {



    position: relative;



    z-index: 2;



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 16px;



    width: 100%;



    min-height: 58px;



    margin-top: auto;



    padding:

        14px 22px;



    border-radius: 15px;



    color: #ffffff !important;



    background:

        linear-gradient(

            135deg,

            var(--tb-primary),

            #80BD00

        );



    box-shadow:

        0 10px 24px

        rgba(5, 112, 3, 0.20);



    font-size: 17px;



    font-weight: 700;



    text-align: center;



    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease,

        background 0.3s ease;

}





.tb-register-card-btn i {



    font-size: 16px;



    transition:

        transform 0.3s ease;

}





.tb-register-card-btn:hover {



    color: #ffffff !important;



    transform:

        translateY(-3px);



    background:

        linear-gradient(

            135deg,

            var(--tb-primary-dark),

            var(--tb-primary)

        );



    box-shadow:

        0 15px 30px

        rgba(6, 75, 36, 0.25);

}





.tb-register-card-btn:hover i {



    transform:

        translateX(5px);

}



.tb-industry-note {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 18px 0;

    padding: 12px 14px;

    background: #F3F8F1;

    border-left: 3px solid #057003;

    border-radius: 6px;

}



.tb-industry-note > i {

    color: #057003;

    font-size: 15px;

    margin-top: 3px;

    flex-shrink: 0;

}



.tb-industry-note p {

    margin: 0;

    color: #53645A;

    font-size: 13px;

    line-height: 1.6;

    font-weight: 400;

}



.tb-card-divider {

    margin-top: 16px;

}





/* ============================================================

   BOTTOM MESSAGE

\============================================================ */



.tb-registration-bottom {



    position: relative;



    z-index: 3;



    min-height: 20px;

}





/* ============================================================

   DECORATIVE MOLECULES

\============================================================ */



.tb-reg-molecule {



    position: absolute;



    width: 230px;



    height: 230px;



    opacity: 0.16;



    border-radius: 50%;



    pointer-events: none;

}





/* Left molecule */



.tb-reg-molecule-left {



    top: 30px;



    left: -80px;



    background:

        radial-gradient(

            circle at 25% 25%,

            #80BD00 0 12px,

            transparent 13px

        ),

        radial-gradient(

            circle at 65% 40%,

            #057003 0 18px,

            transparent 19px

        ),

        radial-gradient(

            circle at 45% 75%,

            #064B24 0 14px,

            transparent 15px

        );



    filter: blur(0.2px);

}





/* Right molecule */



.tb-reg-molecule-right {



    top: 70px;



    right: -100px;



    background:

        radial-gradient(

            circle at 25% 25%,

            #80BD00 0 13px,

            transparent 14px

        ),

        radial-gradient(

            circle at 70% 55%,

            #057003 0 19px,

            transparent 20px

        ),

        radial-gradient(

            circle at 45% 80%,

            #064B24 0 12px,

            transparent 13px

        );

}





/* ============================================================

   DOT PATTERNS

\============================================================ */



.tb-reg-dots {



    position: absolute;



    width: 120px;



    height: 120px;



    opacity: 0.35;



    background-image:

        radial-gradient(

            circle,

            rgba(5, 112, 3, 0.30) 3px,

            transparent 3px

        );



    background-size: 22px 22px;



    pointer-events: none;

}





.tb-reg-dots-left {



    top: 190px;



    left: 35px;

}





.tb-reg-dots-right {



    top: 270px;



    right: 35px;

}





/* ============================================================

   DNA DECORATION

\============================================================ */



.tb-reg-dna {



    position: absolute;



    top: 0;



    right: 30px;



    width: 150px;



    height: 310px;



    opacity: 0.08;



    transform:

        rotate(15deg);



    pointer-events: none;

}





.tb-dna-line {



    position: absolute;



    width: 150px;



    height: 45px;



    border:

        5px solid

        var(--tb-primary);



    border-left-color: transparent;



    border-right-color: transparent;



    border-radius: 50%;

}





.tb-dna-line:nth-child(1) {

    top: 0;

}



.tb-dna-line:nth-child(2) {

    top: 48px;

}



.tb-dna-line:nth-child(3) {

    top: 96px;

}



.tb-dna-line:nth-child(4) {

    top: 144px;

}



.tb-dna-line:nth-child(5) {

    top: 192px;

}



.tb-dna-line:nth-child(6) {

    top: 240px;

}





/* ============================================================

   BOTTOM WAVE

\============================================================ */



.tb-registration-wave {



    position: absolute;



    left: -5%;



    bottom: -100px;



    width: 110%;



    height: 190px;



    background:

        linear-gradient(

            175deg,

            transparent 35%,

            rgba(229, 242, 200, 0.65) 36%,

            rgba(229, 242, 200, 0.65) 54%,

            rgba(128, 189, 0, 0.30) 55%,

            rgba(128, 189, 0, 0.30) 75%,

            rgba(5, 112, 3, 0.18) 76%

        );



    border-radius:

        50% 50% 0 0 / 35% 35% 0 0;



    pointer-events: none;

}





/* ============================================================

   TABLET

\============================================================ */



@media (max-width: 1100px) {



    .tb-registration {



        padding:

            85px 25px

            100px;

    }





    .tb-registration-grid {



        gap: 24px;

    }





    .tb-registration-card {



        padding:

            25px 22px

            25px;

    }





    .tb-card-top {



        gap: 15px;

    }





    .tb-registration-icon {



        flex-basis: 78px;



        width: 78px;



        height: 78px;



        font-size: 29px;

    }





    .tb-card-top h3 {



        font-size: 23px;

    }





    .tb-price span {



        font-size: 32px;

    }





    .tb-registration-features li {



        font-size: 14px;

    }



}





/* ============================================================

   MOBILE

\============================================================ */



@media (max-width: 800px) {



    .tb-registration {



        padding:

            75px 20px

            90px;

    }





    .tb-registration-header {



        margin-bottom: 40px;

    }





    .tb-registration-eyebrow {



        gap: 10px;



        font-size: 12px;



        letter-spacing: 3px;

    }





    .tb-registration-eyebrow span {



        width: 35px;

    }





    .tb-registration-header h2 {



        font-size: 45px;



        letter-spacing: -1.5px;

    }





    .tb-registration-deadline {



        max-width: 100%;



        padding:

            13px 18px;



        font-size: 15px;



        line-height: 1.5;



        flex-wrap: wrap;

    }





    .tb-registration-grid {



        grid-template-columns: 1fr;



        max-width: 540px;



        margin:

            0 auto;



        gap: 25px;

    }





    .tb-registration-card {



        min-height: 470px;

    }





    .tb-reg-dna {



        right: -50px;



        opacity: 0.05;

    }





    .tb-reg-molecule-left {



        left: -130px;

    }





    .tb-reg-molecule-right {



        right: -140px;

    }



}





/* ============================================================

   SMALL MOBILE

\============================================================ */



@media (max-width: 480px) {



    .tb-registration {



        padding:

            65px 15px

            80px;

    }





    .tb-registration-header h2 {



        font-size: 38px;

    }





    .tb-registration-line {



        width: 110px;



        height: 4px;

    }





    .tb-registration-deadline {



        font-size: 14px;



        padding:

            12px 15px;

    }





    .tb-card-top {



        min-height: 105px;

    }





    .tb-registration-icon {



        flex-basis: 70px;



        width: 70px;



        height: 70px;



        border-width: 6px;



        font-size: 25px;

    }





    .tb-card-top h3 {



        font-size: 21px;

    }





    .tb-price span {



        font-size: 30px;

    }





    .tb-price small {



        font-size: 12px;

    }





    .tb-registration-features {



        gap: 14px;

    }





    .tb-registration-features li {



        font-size: 14px;



        gap: 11px;

    }





    .tb-registration-features li i {



        flex-basis: 30px;



        width: 30px;



        height: 30px;



        font-size: 11px;

    }





    .tb-register-card-btn {



        min-height: 54px;



        font-size: 16px;

    }





    .tb-registration-card {



        border-radius: 23px;

    }



}