@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&family=Berkshire+Swash&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Geist:wght@100..900&family=Great+Vibes&family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');*/

/*body {*/
/*  font-family: 'Nunito', sans-serif;*/
/*}*/

/*body {*/
/*  font-family: "Source Sans 3", sans-serif;*/
/*}*/

p{font-family: "Lato", sans-serif;}

h1, h2, h3, h4
{ font-family: "Lato", sans-serif;}

h5{font-family: "Lato", sans-serif;}

 body { margin: 0; font-family: "Lato", sans-serif; padding-top:70px;}
        .top-tex {
    width: 100%;
    text-align: center;
    background:red;
}
nav.navbar {
    position: fixed;
}
.nav-menu a {
    text-decoration: none;
    color: #333;
    padding: 5px 10px;
    transition: 0.3s;
}

/* The active state */
/*.nav-menu a.active {*/
/*    color: #e67e22;*/
/*    font-weight: bold;*/
/*    border-bottom: 2px solid #e67e22;*/
/*}*/

.nav-menu a.active {
         /* Changes text color */
    font-weight: bold;       /* Makes it stand out */
  
    display: inline-block;   /* Ensures it stays visible */
}

/* Optional: Hover state for better UX */
/*.nav-menu a:hover {*/
/*    color: #e67e22;*/
/*}*/



.top-tex p{
    margin-bottom:0!important;
}

.top-tex {
    padding: 0.7% 0%!important;
}
.mob {
    width: 100%;
    height: 80vh;
}
.r-btn {
  position: relative;
  background-color: transparent; /* Or your starting background color */
  border: 2px solid #ccb27a;    /* Optional: adds a nice border */
  padding: 0;                   /* Remove default padding so link fills the space */
  overflow: hidden;             /* Keeps the sliding effect inside the button boundaries */
  transition: color 0.4s ease;
  cursor: pointer;
}

.r-btn a {
  display: inline-block;         /* Adjust padding here to size your button */
  color: #ccb27a;              /* Starting text color */
  text-decoration: none;
  position: relative;
  z-index: 2;                  /* Keeps text on top of the sliding background */
  transition: color 0.4s ease;
}

/* The sliding background layer */
.r-btn::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;                   /* Starts with no height at the bottom */
  background-color: #ccb27a;
  z-index: 1;
  transition: height 0.4s ease; /* Controls the speed of the slide */
}

/* Hover States */
.r-btn:hover::before {
  height: 100%;                /* Slides up to fill the button */
}

.r-btn:hover a {
  color: white;                /* Changes text color to white */
}

button.rj a {
    color: #fff;
    text-decoration: none;
}

/*ALL ANIMATION HERE*/

/* Smooth load animation */
.navbar {
    animation: navDrop 0.8s ease forwards;
    transform: translateY(-40px);
    opacity: 0;
}

@keyframes navDrop {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Top strip subtle moving shine */
.top-tex {
    position: relative;
    overflow: hidden;
}

.top-tex::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.18),
        transparent
    );
    animation: shineMove 4s linear infinite;
}

@keyframes shineMove {
    100% {
        left: 150%;
    }
}

/* Countdown numbers pulse */
.top-tex b {
    display: inline-block;
    animation: pulseNum 1.5s infinite alternate;
}

@keyframes pulseNum {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.12);
    }
}

/* Register button animation */
.rj {
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.rj:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

.rj::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,0.3);
    transform: skewX(-25deg);
    transition: 0.6s;
}

.rj:hover::before {
    left: 150%;
}

/* Menu item hover underline */
.nav-menu li a {
    text-decoration: none;
    color: #fff;
    font-family: 'Lato';
    font-weight: 500;
    text-transform:uppercase;
}
.nav-menu li a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: 0.35s ease;
    transform: translateX(-50%);
}

.nav-menu li a:hover::after {
    width: 100%;
}

.nav-menu li a:hover {
    transform: translateY(-2px);
}

/* Hamburger smooth animation */
.nav-toggle-label {
    transition: transform 0.3s ease;
}

.nav-toggle-label:hover {
    transform: scale(1.1);
}



.common-btn{
    cursor: pointer;
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
    box-shadow: 0 5px 15px rgba(244, 197, 66, 0.4);
}

/* Hover effect */
.common-btn:hover{
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(244, 197, 66, 0.6);
}

/* Pulse animation */
@keyframes pulse{
    0%{
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(244, 197, 66, 0.6);
    }
    70%{
        transform: scale(1.03);
        box-shadow: 0 0 0 18px rgba(244, 197, 66, 0);
    }
    100%{
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(244, 197, 66, 0);
    }
}





.nav-menu li a {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
                color 0.3s ease;
    will-change: transform;
}

.nav-menu li a:hover {
    transform: scale(1.25);
}

/*ALL ANIMATION HERE*/






div#countdown-timer {
    margin: 0 0px 0 6px;
}





.top-tex {
    background-color: #1a2530;
    border: 2px solid #c59b27;
    padding: 40px 60px!important;
    text-align: center;
    box-sizing: border-box;
    max-width: 800px;
    width: 100%;
    margin-top: 70px!important;
}

        /* "CONFERENCE BEGINS IN" header text */
        .top-tex::before {
            content: "CONFERENCE BEGINS IN";
            display: block;
            color: #c59b27;
            font-size: 1.3vw;
            letter-spacing: 4px;
            margin-bottom: 30px;
            font-weight: 400;
        }

        /* Flexbox wrapper for the countdown items */
        #countdown-timer {
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #c59b27; /* Main gold color */
        }

        /* Styling for each individual time unit block */
        #countdown-timer > span {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 1.3vw;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 400;
        }

        /* Target the number spans specifically */
        #countdown-timer span[id] {
            font-family: 'Playfair Display', serif; /* Serif font for numbers */
            font-size: 5vw;
            line-height: 1;
            margin-bottom: 0px;
            letter-spacing: 0px;
        }
button.b-btn {
    background: #1b2531;
    padding: 14px 20px;
    color: #fff;
    text-transform: uppercase;
    word-spacing: 7px;
    font-size: 1.3vw;
    font-family: 'Lato';
    font-weight: 300;
    margin: 4% 0 0 0;
    letter-spacing:2px;
border:1px solid #c59b27;
}

button.rj {
    background: transparent;
    box-shadow: none!important;
    border: 1px solid #FFF;
    color: #fff;
    border-radius: 6px;
    margin: 0 0 0 50%;
    font-weight: 500;
    width: 100%;
    padding: 1px 10px;
    font-family: "Source Sans 3", sans-serif;
}


nav.navbar {
    padding: 0;
}
        .navbar { 
            position: fixed; top: 0; left: 0; width: 100%; height: auto; 
            background:#111e30; 
            z-index: 1000;
        }

       .navbar .container { 
            display: flex; justify-content: flex-center; width: 100%; 
            max-width: 100%; margin: 0 auto; padding: 0.3% 5%; align-items: center;
        }

        .logo img {
    WIDTH: 78%;
} 

        .nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0 10%;
    /* flex-direction: row; */
}
  .nav-menu li {
    color: #2d2260;
    padding: 0px 15px;
    /*BORDER-RIGHT: 2PX SOLID;*/
    font-family: "Source Sans 3", sans-serif;
    font-weight: 600;
    font-size: 18px;
}
 .nav-menu li a{
        text-decoration: none;
         color: #fff;
 }

 .nav-menu li:last-child {
    border: 0;
}

        /* Toggle Hidden on Desktop */
        .nav-toggle { display: none; }
        .nav-toggle-label { display: none; cursor: pointer; font-size: 30px; }
        
button.r-btn {
    text-transform: uppercase;
    background: transparent;
    color: #ccb27a;
    border: 1px solid #ccb27a;
    padding: 5px 16px 5px 16px;
    font-family: 'Lato';
    font-weight:500;
    font-size: 18px;
}    
section.main-banner {
    padding: 2% 0 5% 0;
}
p.ban-text {
    font-size: 1.5vw;
    font-weight: 400;
    font-family: 'Lato';
    text-transform: uppercase;
    word-spacing: 13px;
}
img.img-responsive {
    width: 62vw;
    text-align: center;
}
    .main-row{
 
    align-items: center;

    }    
    
    
    .main-cont{
        padding:0 10%;
    }
        
      .main-text-section {
    text-align: right;
}  
     h1.h1 {
    font-size: 2vw!important;
    color:#2d2260;
    font-family: 'Nunito', sans-serif;
     font-weight:400;
}   
h2.h2 {
    font-size: 1.7vw!important;
    color: #2d2260;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    margin-top: 5%;
}     
        
        
        /* Container to center the icon at the bottom of a section */
.scroll-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px; /* Adjust based on your layout */
}

/* The actual animation logic */
.chevron-down {
  animation: bounce 2s infinite; /* Loops the bounce every 2 seconds */
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  40% {
    transform: translateY(15px); /* Moves icon down 15 pixels */
    opacity: 0.7;
  }
  60% {
    transform: translateY(7px);  /* Small secondary bounce */
  }
}
        
        
     /*premm csss   */
        
.prem {
    background: #D6CDFF;
    background: linear-gradient(180deg, rgba(214, 205, 255, 1) 6%, rgba(255, 255, 255, 1) 75%);
    padding: 5% 13% 3% 13%;
    margin: -9% 0 0 0;
}
        h5.h5 {
    font-size: 2vw;
    color: #2d2260;
    font-weight: 700;
}
        
.row.row-prem {
    background: #fff;
    padding: 4% 5% 5% 5%;
    border-radius: 87px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}  
        
        
       p.prem-text {
    font-size: 1.1vw;
    font-weight: 600;
      color: #2d2260;
} 
        
     img.img-prem {
    max-width: 70%;
    width:70%;
}   
        
   img.img-prem {
    max-width: 100%;
    width: 100%;
}
        
 p.prem-black {
    margin: 4% 0 0 0;
    line-height: 1.2em;
    font-size: 1vw;
    font-weight: 500;
}       



    .b-btn {
    position: relative;
    background-color: transparent; /* Or your starting background color */
    color: #fff;                   /* Text color */
    border: 2px solid #fff;        /* White border */
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    overflow: hidden;              /* Crucial: Keeps the sliding background hidden until hover */
    z-index: 1;
    transition: color 0.6s ease;   /* Smoothly change text color */
}

/* The Sliding Background Layer */
.b-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;                     /* Starts with zero height at the bottom */
    background-color: #c59b27;     /* The white background fill */
    z-index: -1;                   /* Sits behind the text */
    transition: height 0.4s ease;  /* Smoothly animates the height from bottom to top */
}

/* Hover States */
.b-btn:hover {
    color: #112233;                /* Changes text color to a dark shade so it's readable on white */
}

.b-btn:hover::before {
    height: 100%;                  /* Expands to fill the entire button from bottom to top */
}        
        
        
        
        
        
        

@media (max-width: 768px) {
.nav-toggle-label {
    display: block;
    margin: 0 0 0 82%;
    z-index: 1!important;
}








.nav-menu.hide-menu {
    display: none;
}
h1.title-H {
    font-size: 30px!important;
}
.main-text-section h1 {
    font-size: 27px!important;
}
.main-text-section h2 {
    font-size: 22px!important;
}
p.prem-black {
    margin: 4% 0 4% 0!important;
}

.nav-menu li a:hover {
    transform: inherit;
}


.top-tex {
    display: block;
    padding: 2% 0%!important;
}
.nav-menu {
    padding: 0 0%;
    /* flex-direction: row; */
}

.nav-menu {
                position: fixed; top: 15%; left: 0; width: 100%; 
                /*height: calc(100vh - 70px);*/
                background: #d5ccff;; flex-direction: column; transform: translateX(-100%);
                transition: 0.3s; overflow-y: auto; /* Scrollable mobile menu */
                top: 50%!important;
                 padding-top: 10%!important;
}
            /* When Checkbox checked, slide menu in */
            .nav-toggle:checked ~ .nav-menu { transform: translateX(0); }
            .nav-menu li {
    border-bottom: 1px solid #444;
    width: 100%;
    border-right: none;
}
.nav-menu li a { display: block; padding: 20px; }
            
            
            
/*banner section */
.row.main-row {
    margin-top: 20%;
}
.main-text-section {
    text-align: center;
}
.chevron-down img {
    width: 27px;
}  
.row.row-prem {
    padding: 11% 5% 5% 5%;
    border-radius: 18px;
}     
h5.h5 {
    font-size: 5vw;
}
    p.prem-text {
    font-size: 4.5vw;

}       
p.prem-black {
    font-size: 4.5vw;
    
}
.prem {
    padding: 4% 5%;
    margin: -9% 0 0 0;
}
button.common-btn {
    font-size: 5vw!important;
    padding: 0.5% 6% 0.5% 6%!important;
}
div#countdown-timer {
    margin: 0px 0px 5px 6px!important;
}
.main-cont {
    padding: 5% 5% 0% 5%!important;
}
p.box-sky {
    padding: 5%!important;
    font-size: 4.5vw!important;
    margin-bottom: 5%!important;
}
section.main_why_should {
    padding: 8% 5%!important;
}
section.main_Highlights {
    padding: 8% 5%!important;
}
.mob {
    height: 40vh;
}
.first-sq {
    margin-bottom: 5%!important;
}
.main_tenta {
    padding: 8% 5%!important;
}
.agenda_box {
    font-size: 4.8vw!important;
}
.agenda_box:before {
    left: 14px!important;
    top: 33%!important;
    border-top: 7px solid transparent!important;
    border-bottom: 7px solid transparent!important;
    border-left: 11px solid #663399!important;
}
.mob-ch {
    margin-top: 0;
}
.agenda_box.lst {
    margin-bottom: -2%;
}
p.box-sky2 {
    padding: 5% !important;
    font-size: 4.5vw !important;
    margin-bottom: 5% !important;
}
section.main_who {
    background-color: #2d2260!important;
    color: #fff!important;
    padding: 9% 5% 16% 6%!important;
}
section.main_who h1.title-H {
    padding-bottom: 5% !important;
}
p.text-box-center {
    font-size: 4.5vw !important;
    margin: -10% 10% !important;
}
section.registration-fee center {
    padding-bottom: 5% !important;
}
.registration-fee {
    padding: 12% 0% 5% 0% !important;
}
th.w1,th.right.w2,th.right.w3 {
    font-size: 4.5vw !important;
}
span.small {
    font-size: 4vw !important;
}
.passive-fee-table td {
    font-size: 4.5vw !important;
}
th.w1 {
    width: 35% !important;
}
p.footer-info.mt-5 {
    font-size: 4.5vw !important;
}
p.text-bt,.newcard,button.spon-btn {
    font-size: 4.5vw !important;
}
section.main_sponsorship {
    padding: 8% 5% !important;
}
button.rj {
    margin: 0 0 0 0% !important;
    width: 30% !important;
}
}
        


@media only screen and (max-width: 767px) {
    
    section.main-banner {
    padding: 8% 6% 8% 6%;
}
.main-cont {
    padding: 0% 0% 0% 0% !important;
}
.row.main-row {
    margin-top: 0;
}
    
    label.nav-toggle-label {
    color: #fff;
}
.nav-menu {
    background: #f4ecda;
    transition: 0.3s;
    overflow-y: auto;
    top: 101%!important;
    padding-top: 0% !important;
}
.nav-menu li a {
    color: #c9a047;
}
p.ban-text{
    font-size: 3.5vw;
}
button.r-btn {
    font-size: 3.3vw;
    position: absolute;
    top: 30%;
    left: 32%;
    /* z-index: 0!important; */
}


    
    img.img-responsive {
    width: 90vw;
}
.top-tex::before {
    font-size: 3.5vw;
}
#countdown-timer span[id] {
    font-size: 8vw;
}
#countdown-timer > span {
    font-size: 3vw;
}
 
 /*Prem Section   */
    .founder-section {
    padding: 8% 6% 8% 6% !important;
}
.section-heading {
    font-size: 4.5vw !important;
    text-align: center !important;
}
.pull-quote-card {
    font-size: 3.5vw !important;
}
.letter-body p {
    font-size: 3.5vw !important;
}
.letter-body p:last-child {
    margin-bottom: 0 !important;
}
.founder-blockquote {
    font-size: 3.5vw !important;
}
.letter-footer p {
    font-size: 3.5vw !important;
}
.signature-name {
    font-size: 8vw !important;
}
.signature-title {
    font-size: 3vw !important;
}
.btn-founder {
    font-size: 3vw !important;
}
        
 /*Cafe Alt Conference In Numbers Section*/
 
.stats-section {
    padding: 8% 6% !important;
} 
.section-titles {
    font-size: 4.5vw !important;
}
.stat-number-container {
    font-size: 15vw !important;
}
.infinity {
    font-size: 15vw !important;
}
.stat-label {
    font-size: 3.5vw !important;
}
.stat-subtext {
    font-size: 3vw !important;
}


 /*Who Should Attend Section*/
 
section.main_who {
    padding: 8% 6% 8% 6% !important;
}
.main_who .container {
    padding: 0;
}
.section-title {
    font-size: 4.5vw !important;
}
.subtitles {
    font-size: 5vw !important;
    margin-bottom: 30px !important;
}
.card-title {
    font-size: 4vw !important;
}
.card-desc {
    font-size: 3.5vw !important;
}
.grid-container {
    margin-bottom: 30px !important;
}
button.b-btn {
    font-size: 3vw !important;
}


/*Why Attend*/

section.main_why_should {
    padding: 8% 6% !important;
}
section.main_why_should .container {
    padding: 0 !important;
}
.main-title {
    font-size: 4.5vw !important;
}
.subtitle {
    font-size: 5vw !important;
}
.content-box p {
    font-size: 3.5vw !important;
}
.reasons-grid {
    margin-bottom: 40px !important;
}
.cta-button {
    font-size: 3vw !important;
    margin: 0 !important
}


 /*Highlights of CafeAlt*/
 
 section.main_Highlights {
    padding: 8% 6%!important;
}

.title-H {
    font-size: 4.5vw !important;
}


 /*Tentative Agenda*/
 
.agenda {
    padding: 0 6% 8% 6% !important;
} 
.agenda-list {
    margin: 0 0 40px 0 !important;
}

.title {
    font-size: 4.5vw !important;
}
.agenda-item {
    font-size: 3.8vw !important;
}
.book-btn {
    font-size: 3vw !important;
}

.agenda-li {
    font-size: 3.8vw !important;
    border-bottom: 2px solid #f6d892 !important;
    padding: 12px 0 !important;
}
.agenda-ul {
    padding-left: 1.1rem !important;
}
.agenda-ul span {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.agenda-li:last-child {
    border-bottom: none !important;
}


 /*Registration*/
 
.register {
    padding: 8% 6% !important;
} 

.section-titler {
    font-size: 4.5vw !important;
}
.amount {
    font-size: 45px !important;
}
.btn-main-register {
    font-size: 3vw !important;
}
.footer-help {
    margin-bottom: 20px !important;
}


/*Speaker*/

#speaker {
    padding: 8% 6% !important;
}


 /*Who We Are*/
 
 
.who-we-are {
    padding: 0% 6% 8% 6% !important;
}
.who-we-are .container {
    padding: 0 !important;
}
.section-divider {
    font-size: 4.5vw !important;
}
.who-we-are h1 {
    font-size: 3.8vw !important;
}
.intro-text {
    font-size: 3vw !important;
}
.sub-titlees {
    font-size: 3.8vw !important;
    margin-left: 0 !important;
}
.sub-titlees::before {
    margin-right: 5px !important;
    font-size: 2.5vw !important;
}
.sub-desc {
    font-size: 3.5vw !important;
    margin: 0 0 0 4% !important;
}
.event-card h3 {
    font-size: 3.5vw !important;
}
.event-card p {
    font-size: 3.3vw !important;
}
.event-number {
    font-size: 8vw !important;
}

/*Footer*/

section.footer {
    padding: 3% 2% !important;
    font-size: 3.5vw !important;
}


}