body {
  background-color: rgb(63, 158, 175);

  font-family: 'Arial', Helvetica, sans-serif;
  font-size: 1rem;                            
  font-weight: 400;                           
  font-style: normal;                          
  color: #f5f3f3;                            
}
html {
  scroll-behavior: smooth;
  overflow-y: scroll;
}

.topglossy {

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

  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1),
              inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
  overflow-y: auto;
  overflow: visible;
  border: .5px solid rgba(245, 246, 255, 0.03); 
}

.bottomglossy {


  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); 
  
  
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1),
              inset 0 1px 1px 0 rgba(223, 166, 166, 0.3);

  width: 100%; 
  bottom: 0; 
  height: 50px; 
  display: flex; 

  justify-content: center;
  align-items: center;  
  gap: 10px;

}
p {

  font-size: 1rem; /* Makes text small and accessible */
  line-height: 1.5;
  color: rgb(210, 250, 247);
}

label {
  font-size: 1rem; /* Makes text small and accessible */
  line-height: 1.5;
  color: rgb(210, 250, 247);
}
.glossy-buttons {

  display: block; 
  text-align: center;

  padding-top: 20px;

 
  color: rgb(210, 250, 247);
  font-weight: bold;
  font-size: 40px;
  
}

.glossy-buttons {

  display: block; 
  text-align: center;

  padding-top: 20px;

 
  color: rgb(210, 250, 247);
  font-weight: bold;
  font-size: 40px;
  
}

.features_head{

  display: block; 
  text-align: center;

  padding-top: 20px;

 
  color: rgb(210, 250, 247);
  font-weight: bold;
  font-size: 25px;
  
}
.nounderline {
  text-decoration: none; 
  color: rgb(253, 253, 253);
}


.text_header_selections {
   text-align: center; 
  text-decoration: none; 
  color: rgb(210, 250, 247);
  /* background-color: rgba(119, 193, 241, 0.1); */
  border: 1px;  
  border-radius: 5px;
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  height: clamp(25px, 4vh, 40px);
  width: clamp(65px, 5vw, 100px);
  margin: 5px;
  

  font-size: clamp(12px, .9vw, 15px);

}

/* Add the underline when hovering */
.text_header_selections:hover {
  background-color: rgba(22, 22, 22, 0.8);
  color: rgb(252, 252, 252);
  cursor: pointer;
}

.zoom-image {
  display: flex;
  flex-wrap: wrap; 
  padding: 35px;
  align-items: center;  
  justify-content: center;
  height: auto;
  
  /* border: 5px solid rgba(245, 246, 255, 0.03); 
  
  border-radius: 5px;
  Adds a smooth animation effect when hovering */

}
.zoom-image {

      border-radius: 12px;
      
      /* 1. Link animation to the view timeline */
      animation: scale-up-down linear both;
      
    }

.feature_boxes
{ 
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; 
  align-items: center;  
  justify-content: center;
  background-image: linear-gradient(to right, rgba(44, 44, 44, 0.3), rgba(78, 77, 77, 0.3), rgba(19, 19, 19, 0.3));
  border-radius: 25px;
  border: 1px solid rgba(248, 248, 248, 1); 
}
.responsive-img {
  max-width: 100%;
  height: auto;
  display: block; /* Removes unwanted white space below the image */
  
  
  
}

.clickable-text {
  cursor: pointer;
}



    /* 3. Define the size changes based on scroll progress */
 
@keyframes scale-up-down {
      /* Small when it first enters the bottom of the screen */
      0% {
        transform: scale(.5);
        opacity: 0;
      }
      /* Grows to full size as it becomes fully visible */
      35%, 60% {
        transform: scale(1);
        opacity: 1;
      }
      /* Shrinks back down as it exits the top of the screen */
    
    }



.responsive-img {
       
            
         

            /* Apply the animation on page load */
            animation: clearBlur .5s ease-out forwards;
        }

        /* Define the animation steps */
@keyframes clearBlur {
            0% {
            transform: scale(0.3);
            opacity: 0;
          }
            100% {
                transform: scale(1);
            opacity: 1;/* Fully visible */
            }
        }





.infobox{

        width: auto; 
        display: inline-block;  
        max-width: 500px;  
        /* border: 5px solid rgba(245, 246, 255, 0.03);  */
        border-radius: 5px;
      
        }

        /* Define the animation steps */

 /* --------------------------------------------------------------------------------------- */
 .account-dropdown {
  position: relative;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

 
}
 .account-dropdown1 {
  position: relative;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;



}

/* Account Button styling */


.head_divs{
   width: 50%;  
   flex: 1;  
   display: grid;  
   place-items: center; 
   margin-right: 5vw;
}

.account-btn {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 8px;

  color: rgb(210, 250, 247);
  background: none;
  padding: 4px;
  padding-left: 14px;
  padding-right: 10px;
  border: 1px;  

  font-weight: 500;
  
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;

  font-size: clamp(12px, .9vw, 20px);
  
  
}

.account_name{
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 120px;
}

.account-btn .arrow {
  transition: transform 0.2s ease;
  
}

/* Rotates the arrow when dropdown is active */
.account-dropdown.active .arrow {
  transform: rotate(180deg);
}

/* Modern Menu Card */
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  
  background: rgba(22, 22, 22, 0.8);

  border-radius: 10px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 6px;
  z-index: 100;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  height: clamp(100px, 14vh, 100px);
  width: clamp(100px, 14vw, 170px);
  
  
}

/* Utility class to trigger visibility via JavaScript */
.account-dropdown.active .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Inner Menu Items */
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgb(255, 254, 254);
  padding: 10px 12px;
  text-decoration: none;

  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
  font-size: clamp(12px, .9vw, 14px);
}

.menu-item:hover {
  background: #dededf;
  color: rgb(59, 59, 59);
}

/* Distinct style for Logout button */
.menu-item.logout {
  color: rgb(243, 112, 112);
}

.menu-item.logout:hover {
  background: #dededf;
  color: rgb(250, 13, 13);
}

/* Divider line between menu blocks */
.divider {
  height: 1px;
  background: #ffffff;
  margin: 6px 0;
}

.action-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 30px;
            font-size: 16px;
            font-weight: 600;
            color: rgb(210, 250, 247);
            background-color: rgb(57, 170, 235, .5) ; /* Modern Indigo */
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(70, 152, 229, 0.2);
            overflow: hidden;
        }

        /* 1. Smooth Hover Effect */
        .action-btn:hover {
            background-color: rgb(57, 170, 235, .7);
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(70, 171, 229, 0.3);
        }

        /* Active/Click Visual Feedback */
        .action-btn:active {
            transform: translateY(0);
        }

        /* Disabled State (When Loading) */
        .action-btn:disabled {
            background-color: rgba(144, 211, 250, 0.5);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* Text Styling Inside Button */
        .btn-text {
            transition: all 0.3s ease;
        }

        /* Hide text slightly when loading */
        .action-btn.loading .btn-text {
            visibility: hidden;
            opacity: 0;
        }

        /* 2. Loading Spinner Animation */
        .spinner {
            display: none;
            position: absolute;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #ffffff;
            animation: spin 1s ease-in-out infinite;
        }

        /* Show spinner only during loading state */
        .action-btn.loading .spinner {
            display: block;
        }

        /* Keyframes for Rotating Spinner */
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

.generate-btn {
            position: relative;
            display: inline-block;
            align-items: center;
            justify-content: center;
            padding: 8px 10px;
            font-size: 14px;
            font-weight: 600;
            width: 100px;
            height: 30px;
            color: #ffffff;
            background-color: #c2ca51; /* Modern Indigo */
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(70, 152, 229, 0.2);
            overflow: hidden;
        }

        /* 1. Smooth Hover Effect */
        .generate-btn:hover {
            background-color: #e0e776;
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(70, 171, 229, 0.3);
        }

        /* Active/Click Visual Feedback */
        .generate-btn:active {
            transform: translateY(0);
        }

        /* Disabled State (When Loading) */
        .generate-btn:disabled {
            background-color: #f3f7c5;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* Text Styling Inside Button */
        .btn-text {
            transition: all 0.3s ease;
        }

        /* Hide text slightly when loading */
        .generate-btn.loading .btn-text {
            visibility: hidden;
            opacity: 0;
        }

        /* 2. Loading Spinner Animation */
        

        /* Show spinner only during loading state */
        

        /* Keyframes for Rotating Spinner */
        
.pricetag{
 

  height: 540px;
  width: 350px;


  display: inline-block;  
 
  

  animation: clearBlur .5s ease-out forwards;
  background-color: rgba(17, 17, 17, 0.5);;

    /* border: 1px solid rgb(204, 204, 204); */
    box-shadow: 0px 0px 15px 0px rgb(0, 0, 0);
  
}

.AppNameInPrice{
  
  display: block; 
  text-align: center;


 
 
  color: rgb(240, 238, 238);

  font-size: 20px;
}

.priceOptions{
  display: inline-block; 
  position: absolute;
  bottom: 45px;              /* Pushes to the bottom boundary */
  left: 12%; 

}



.paybutton {

           position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 30px;
            font-size: 16px;
            font-weight: 600;
            color: rgb(210, 250, 247);
            background-color: rgb(155, 185, 162 , 0.5);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(70, 152, 229, 0.2);
            overflow: hidden;
            width: 300px; 
        }

        /* 1. Smooth Hover Effect */
        .paybutton:hover {
            transform: translateY(-2px); 
            
            box-shadow: 0px 0px 5px 3px rgba(105, 193, 252, 0.2);
            
        }

        /* Active/Click Visual Feedback */
        .paybutton:active {
              transform: translateY(2px);
              box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        /* Disabled State (When Loading) */
        .paybutton:disabled {
            background-color: rgb(178, 189, 181,0.5);
           
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* Text Styling Inside Button */
        .btn-text {
            transition: all 0.3s ease;
        }

        /* Hide text slightly when loading */
        .paybutton.loading .btn-text {
            visibility: hidden;
            opacity: 0;
        }

        /* 2. Loading Spinner Animation */
        .spinner {
            display: none;
            position: absolute;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #ffffff;
            animation: spin 1s ease-in-out infinite;
        }

        /* Show spinner only during loading state */
        .paybutton.loading .spinner {
            display: block;
        }

        /* Keyframes for Rotating Spinner */
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }



.stack-input {
  border: none;
  background: transparent;
  text-align: center;
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  color: rgb(210, 250, 247);
  outline: none;
  padding: 4px 0;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Remove default browser arrow interfaces */
.stack-input::-webkit-inner-spin-button, 
.stack-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stack-arrow {
  border: solid 1px;
  background: transparent;
  cursor: pointer;
  padding: 2px 2px;
  font-size: 20px;
  color: rgb(210, 250, 247);
  line-height: 1;
  width:40px;
  height: 30px;
}

.stack-arrow:hover {
  color: rgb(210, 250, 247); /* Subtle hover color change to indicate interaction */
}

.licensetable {
      
      border-collapse: collapse; /* Prevents double lines between cells */
      border-radius: 10px;
      color: rgb(210, 250, 247);
      border: 1px solid black; 
      border-radius: 10px;
      

      
    /* 1. Crucial setup to allow border-radius */
    border-collapse: separate; 
    border-spacing: 0;
    
    /* 2. Apply the border radius and mask content */
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    }

    /* Add lines to header and data cells */
    th, td {
      
      border: 1px solid black;   /* Sets line thickness, style, and color */
      padding: 8px;      
             /* Adds spacing inside cells so text doesn't touch lines */
      text-align: left;          /* Aligns text to the left side */
    }

    /* Optional: Make the header row look distinct */
    td{
      border: 0px solid black; 
      
    }
   
/* ---- 1. SMALL WINDOW LAYOUT (Default Style) ---- */
.container {
  display: flex;
  flex-wrap: wrap;       /* Allows items to break into multiple rows */
  gap: 15px;             /* Adds spacing between all items */
}
/* Items 1 and 3 stay side-by-side on the first row */
.item-1 {
  flex: 1;               
  order: 1;    
  margin-left: 3vw;
  
     /* Keeps Item 1 first */
}

.item-2 {
  flex: 1 0 100%;        /* Forces Item 2 to take up 100% width of the new row */
  order: 3;              /* Pushes Item 2 to the very bottom */
  
}

.item-3 {
  flex: 1;               
  order: 2;              /* Pulls Item 3 up next to Item 1 */
  margin-right: 3vw;
  
}

/* Item 2 drops to the second row by itself */



/* ---- 2. BIG WINDOW LAYOUT (Desktop Style Shift) ---- */
@media (min-width: 1000px) {
  .item {
    flex: 1;             /* Resets all items to share the single row equally */
    order: unset;        /* Restores original HTML order (1, 2, 3) */
  }
}

.slideshow_container {
        
            width: clamp(400px, 90vw, 800px);
            
            position: relative;
            margin: auto;
            margin-top: 2vh;
            overflow: hidden;
            border-radius: 8px;
            
           
        }

        /* Hide images by default */
        .mySlides {
            display: none;
            
        }

        .mySlides img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Next & previous buttons */
        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -22px;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
            background-color: rgba(0,0,0,0.3);
            text-decoration: none;
        }

        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit of see-through */
        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
        }

        /* Caption text */
        

        /* The dots/bullets/indicators */
        .dot-container {
            text-align: center;
            margin-top: 15px;
        }

        .dot {
            cursor: pointer;
            height: 10px;
            width: 10px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active, .dot:hover {
            background-color: #717171;
        }

        /* Fading animation */
        .fade {
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
        }
        .software_caption_box {
            color: #f2f2f2;
           
            padding: 1px;
          
            bottom: 8px;
            
            text-align: center;
            background-color: rgba(0, 0, 0, 0.2);
            box-sizing: border-box;
         
            justify-content: center;
            align-items: center;
        }
      
        .software_caption_text{

        display: block; 
        text-align: center;
        color: rgb(210, 250, 247);

        font-size: clamp(11px, 2vw, 15px);
        
        }
        

.slideshow_container2 {
        
            width: clamp(400px, 80vw, 700px);
            position: relative;
            margin: auto;
            margin-top: 2vh;
            overflow: hidden;
            border-radius: 8px;
           
           
        }

        /* Hide images by default */
        .mySlides2 {
            display: none;
            
        }

        .mySlides2 img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Next & previous buttons */
        .prev2, .next2 {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -22px;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
            background-color: rgba(0,0,0,0.3);
            text-decoration: none;
        }

        /* Position the "next button" to the right */
        .next2 {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit of see-through */
        .prev2:hover, .next2:hover {
            background-color: rgba(0,0,0,0.8);
        }

        /* Caption text */
        

        /* The dots/bullets/indicators */
        .dot-container2 {
            text-align: center;
            margin-top: 15px;
        }

        .dot2 {
            cursor: pointer;
            height: 10px;
            width: 10px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active, .dot2:hover {
            background-color: #717171;
        }

        /* Fading animation */
        .fade2 {
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
        }
     

.slideshow_container3 {
        
            width: clamp(400px, 80vw, 700px);
            position: relative;
            margin: auto;
            margin-top: 2vh;
            overflow: hidden;
            border-radius: 8px;
            
           
        }

        /* Hide images by default */
        .mySlides3 {
            display: none;
            
        }

        .mySlides3 img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Next & previous buttons */
        .prev3, .next3 {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -22px;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
            background-color: rgba(0,0,0,0.3);
            text-decoration: none;
        }

        /* Position the "next button" to the right */
        .next3 {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit of see-through */
        .prev3:hover, .next3:hover {
            background-color: rgba(0,0,0,0.8);
        }

        /* Caption text */
        

        /* The dots/bullets/indicators */
        .dot-container3 {
            text-align: center;
            margin-top: 15px;
        }

        .dot3 {
            cursor: pointer;
            height: 10px;
            width: 10px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active, .dot3:hover {
            background-color: #717171;
        }

        /* Fading animation */
        .fade3 {
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @keyframes fade {
            from {opacity: .4}
            to {opacity: 1}
        }

.content_header{
  font-size: clamp(25px, 10vw, 45px);
  font-weight: bold;
}