* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background: url("BT Apps And Technologies.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #333;
    align-items: center;
    text-align: center;
}

/*                                       NavBar Styling                               */
  /* Navbar container */
    .navbar {
      display: inline-flex;
      background: #333;
      padding: 10px;
    }

    /* Navbar links */
    .navbar a {
      color: white;
      padding: 14px 20px;
      text-decoration: none;
      display: block;
    }

    .navbar a:hover {
      background: #575757;
    }

    /* Dropdown container */
    .dropdown {
      position: relative;
    }

    .dropdown .dropbtn {
      background: none;
      border: none;
      color: white;
      font-size: 16px;
      padding: 14px 20px;
      cursor: pointer;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background: #444;
      min-width: 160px;
      box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      padding: 12px 16px;
      display: block;
      color: white;
    }

    .dropdown-content a:hover {
      background: #575757;
    }

    /* Show dropdown on hover */
    .dropdown:hover .dropdown-content {
      display: block;
    }

.HeadTitle
{
background: #8f12e3;
background: linear-gradient(90deg, rgba(143, 18, 227, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(219, 33, 20, 1) 57%, rgba(252, 176, 69, 1) 100%);
   color: #ffd763;
    border: 5px rgb(235, 238, 240) double;
     padding:20px 20px;
     margin: 20px;

      border-radius: 2rem; 
      display: auto;
}
.HeadTitle p
{
color: #082bee;
font-weight: bold;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 15px;
}

/*                      */
.ccontainer {
  border-radius: 5px;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
}

.ccontainer p
{
  text-decoration: underline;
}

.ccontainer p:hover
{
  text-decoration: underline;
  color: white;
}

h1, h2, h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #2c3e50;
}

.ImageView {
  display: flex;               
  justify-content: center;     
  align-items: center;         
  padding: 20px;               
  background: #f9f9f9;         
  border-radius: 16px;         
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); 
  width: 265px;
  height: 265px;           
  margin-left: 50px;     
  margin-bottom: 20px; 
}

.ImageView img {
   width: 250px;               
   height: 250px;
  border-radius: 12px;         
  object-fit: cover;           
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.upload-area {
    
    background-color: transparent;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    margin-top: 10px;
}

.drop-zone__prompt {
    color: #000000;
    font-size: 1.2rem;
}

.drop-zone__thumb {
    width: 550px;
    height: 550px;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
}

.controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn1 {
    padding: 10px 20px;
    margin: 10px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.btn1:hover {
    background-color: #2980b9;
}

.btn1:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
}

.result-area {
    background-color: transparent;
    border-top: 5px rgb(176, 238, 7) double;
    border-bottom: 5px rgb(176, 238, 7) double;
    border-left: 5px rgb(176, 238, 7) double;
    border-right: 5px rgb(176, 238, 7) double;
    width:550px;
    height: auto;
    border-radius: 10px;
    padding: 30px;
    margin-right: 95px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.result-ccontainer {
    display: inline-flex;
    justify-content: center;
}

.image-ccontainer {
    flex: 1;
    min-width: 300px;
    
}

.result-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    color: white;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .controls {
        flex-direction: column;
    }
    
    .btn1 {
        width: 100%;
    }
}


/* Instructions styles */
.instructions {
    max-width: 300px;
}

.instructions h3 {
    margin-bottom: 10px;
    font-size: 1.1rem;
    text-align: left;
}

.instructions p {
    margin-bottom: 10px;
}

.instructions ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

.instructions button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

.instructions button:hover {
    background-color: #2980b9;
}

         
#footer {
    border-radius: 10px;
    margin-top: 10px;
     background: url("BT Apps And Technologies.png");
           background-repeat: no-repeat;
           background-size: cover;
           background-position: center;
           background-attachment: fixed;
    width: 100%; /* Full width of the viewport */
    height: 427px;
    padding: 20px; /* Optional: Add padding for inner content spacing */
    color: white; /* Optional: Text color */
    text-align: center; /* Optional: Center text */
  }
  
  
  #footer img
  {
  
            width: 100px;
            height: 100px;
            image-resolution: 100%;
            margin-top: 20px;
           border: dotted black;
  }
  #footer img:hover
  {
    cursor: no-drop;
  }
  
  .icon-style
  {
    margin-top: 60px;
    text-align: center; /* Ensure icons are centered horizontally */
  }
  
  .icon-style a 
  {
    font-size: 30px;
    margin-left: 40px;
    padding: 20px 20px;
    background: rgba(0, 0, 0, 0.5); /* Use rgba for semi-transparent black background */
    color: #858486; /* Initial color for icons */
    border-radius: 50%;
    display: inline-flex;
    text-decoration: none;
    transition: .5s all; /* Transition for smooth hover effect */
  }
  
  .icon-style a:first-child {
    margin-left: 10px; /* Adjust spacing for the first icon */
  }
  
  .icon-style a:hover {
    color: #fff; /* Change icon color on hover */
    background: blue; /* Change background color on hover */
  }
  .icon-style .b_insta:hover {
    color: #fff; /* Change icon color on hover */
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Instagram gradient */
  }
  .icon-style .c_youth:hover {
    color: #fff; /* Change icon color on hover */
    background: red; /* Change background color on hover */
  }
  .icon-style .c_youth_er {
    color: #fff; /* Change icon color on hover */
    background: red; /* Change background color on hover */
  }
  .icon-style .c_youth_er:hover {
    color: #fff; /* Change icon color on hover */
    background: red;
    cursor: no-drop;
     /* Change background color on hover */
  }
  
  .icon-style .d_blog:hover {
    color: #fff; /* Change icon color on hover */
    background: orange;
    }   
    
  

      /* Footer Styles */
      #footer {
        background-color: transparent;
        color: white;
        padding: 20px;
        text-align: center;
        position: relative;
        font-family: Arial, sans-serif;
    }
        
    #footer h2 {
        margin: 10px 0;
    }
    
    .icon-style {
        margin: 20px 0;
    }
    
    .icon-style h3 {
        margin-bottom: 15px;
    }
    
    .icon-style a {
        color: white;
        font-size: 24px;
        margin: 0 10px;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .icon-style a:hover {
        transform: scale(1.2);
    }
    
    .a_face:hover { color: #3b5998; }
    .b_insta:hover { color: #e4405f; }
    .c_youth:hover { color: #cd201f; }
    .d_blog:hover { color: #ff5722; }
    
    /* Info Bar Styles */
    .info-bar {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 10px;
        font-size: 14px;
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease;
        pointer-events: none;
    }
    
    #footer:hover .info-bar {
        opacity: 1;
        transform: translateY(0);
    }

    /*Uploader New*/

    .container {
  --transition: 350ms;
  --folder-W: 120px;
  --folder-H: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  background: linear-gradient(135deg, #6dd5ed, #2193b0);
  border-radius: 15px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  height: calc(var(--folder-H) * 1.7);
  width: 450px;
  position: relative;
  /* margin-top: 75px; */
}

.folder {
  position: absolute;
  top: -20px;
  left: calc(50% - 60px);
  animation: float 2.5s infinite ease-in-out;
  transition: transform var(--transition) ease;
  
}

.folder:hover {
  transform: scale(1.05);
}

.folder .front-side,
.folder .back-side {
  position: absolute;
  transition: transform var(--transition);
  transform-origin: bottom center;
}

.folder .back-side::before,
.folder .back-side::after {
  content: "";
  display: block;
  background-color: white;
  opacity: 0.5;
  z-index: 0;
  width: var(--folder-W);
  height: var(--folder-H);
  position: absolute;
  transform-origin: bottom center;
  border-radius: 15px;
  transition: transform 350ms;
  z-index: 0;
}

.container:hover .back-side::before {
  transform: rotateX(-5deg) skewX(5deg);
}
.container:hover .back-side::after {
  transform: rotateX(-15deg) skewX(12deg);
}

.folder .front-side {
  z-index: 1;
}

.container:hover .front-side {
  transform: rotateX(-40deg) skewX(15deg);
}

.folder .tip {
  background: linear-gradient(135deg, #ff9a56, #ff6f56);
  width: 80px;
  height: 20px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: -10px;
  z-index: 2;
}

.folder .cover {
  background: linear-gradient(135deg, #ffe563, #ffc663);
  width: var(--folder-W);
  height: var(--folder-H);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.custom-file-upload {
  font-size: 1.1em;
  color: #ffffff;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background var(--transition) ease;
  display: inline-block;
  width: 100%;
  padding: 10px 35px;
  position: relative;
}

.custom-file-upload:hover {
  background: rgba(255, 255, 255, 0.4);
}

.custom-file-upload input[type="file"] {
  display: none;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

/*Loader*/
.triangle1 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-color: #8086e0 transparent transparent transparent;
  margin: 0 auto;
  animation: shk1 1s ease-in-out infinite normal;
}

.triangle2 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-color: transparent transparent #6554b388 transparent;
  margin: -50px auto 0;
  animation: shk2 1s ease-in-out infinite alternate;
}
@keyframes shk1 {
  0% {
    transform: rotate(-360deg);
  }

  100% {
  }
}

@keyframes shk2 {
  0% {
    transform: rotate(360deg);
  }
  100% {
  }
}

.text {
  color: #949494;
  margin: 30px auto;
  text-align: center;
  font-weight: 500;
  letter-spacing: 4px;
}

/*BG Remove Button*/
.btn {
  border: none;
  width: 15em;
  height: 5em;
  border-radius: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: #1C1A1C;
  cursor: pointer;
  transition: all 450ms ease-in-out;
}

.sparkle {
  fill: #AAAAAA;
  transition: all 800ms ease;
}

.text {
  font-weight: 600;
  color: #AAAAAA;
  font-size: medium;
}

.btn:hover {
  background: linear-gradient(0deg,#A47CF3,#683FEA);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
  inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
  0px 0px 0px 4px rgba(255, 255, 255, 0.2),
  0px 0px 180px 0px #9917FF;
  transform: translateY(-2px);
}

.btn:hover .text {
  color: white;
}

.btn:hover .sparkle {
  fill: white;
  transform: scale(1.2);
} 

/*All reset Btn*/

.bubbles {
  --c1: #212121; 
  --c2: #0a0a0a;
  --size-letter: 32px;
  padding: 0.5em 1em;
  font-size: var(--size-letter);

  background-color: transparent;
  border: calc(var(--size-letter) / 6) solid var(--c2);
  border-radius: 0.2em;
  cursor: pointer;

  overflow: hidden;
  position: relative;
  transition: 300ms cubic-bezier(0.83, 0, 0.17, 1);
}

.bubbles > .text {
  font-weight: 700;
  color: var(--c2);
  position: relative;
  z-index: 1;
  transition: color 700ms cubic-bezier(0.83, 0, 0.17, 1);
}

.bubbles::before {
  top: 0;
  left: 0;
}

.bubbles::after {
  top: 100%;
  left: 100%;
}

.bubbles::before,
.bubbles::after {
  content: "";
  width: 150%;
  aspect-ratio: 1/1;
  scale: 0;
  transition: 1000ms cubic-bezier(0.76, 0, 0.24, 1);

  background-color: var(--c2);
  border-radius: 50%;

  position: absolute;
  translate: -50% -50%;
}

.bubbles:hover {
  & > span {
    color: whitesmoke;
  }
  &::before,
  &::after {
    scale: 1;
  }
}

.bubbles:active {
  scale: 0.98;
  filter: brightness(0.9);
}

/*Viewer & Downloader*/
.card {
  --bg-card: #27272a;
  --primary: #6d28d9;
  --primary-800: #4c1d95;
  --primary-shadow: #2e1065;
  --light: #d9d9d9;
  --zinc-800: #18181b;
  --bg-linear: linear-gradient(0deg, var(--primary) 50%, var(--light) 125%);

  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  padding: 1rem;
  

  width: 400px;
  height: 500px;
  background-color: var(--bg-card);

  border-radius: 1rem;
}

.image_containerr {
  overflow: hidden;
  cursor: pointer;
  
  width: 100%;
  height: 100%;
  background-color: var(--primary-800);

  border-radius: 0.5rem;
}

.image_containerr .image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 365px;
  height: 365px;
  fill: var(--light);
}

.title {
  overflow: clip;

  width: 100%;

  font-size: 1rem;
  font-weight: 600;
  color: var(--light);
  text-transform: capitalize;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

.size {
  font-size: 0.75rem;
  color: var(--light);
}

.list-size {
  display: flex;
  align-items: center;
  gap: 0.25rem;

  margin-top: 0.25rem;
}

.list-size .item-list {
  list-style: none;
}

.list-size .item-list-button {
  cursor: pointer;

  padding: 0.5rem;
  background-color: var(--zinc-800);

  font-size: 0.75rem;
  color: var(--light);

  border: 2px solid var(--zinc-800);
  border-radius: 0.25rem;

  transition: all 0.3s ease-in-out;
}

.item-list-button:hover {
  border: 2px solid var(--light);
}
.item-list-button:focus {
  background-color: var(--primary);

  border: 2px solid var(--primary-shadow);

  box-shadow: inset 0px 1px 4px var(--primary-shadow);
}

.action {
 
  align-items: center;
  gap: 1rem;
}

.price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--light);
}

.button {
  position: relative;
  width: 150px;
  height: 60px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 1px solid #301779;
  background-color: #382099;
  overflow: hidden;
  border-radius: 10px;
}

.button,
.button__icon,
.button__text {
  transition: all 0.3s;
}

.button .button__text {
  transform: translateX(22px);
  color: #fff;
  font-weight: 600;
}

.button .button__icon {
  position: absolute;
  transform: translateX(109px);
  height: 100%;
  width: 39px;
  background-color: #171979;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button .svg {
  width: 20px;
  fill: #fff;
}

.button:hover {
  background: #172779;
}

.button:hover .button__text {
  color: transparent;
}

.button:hover .button__icon {
  width: 148px;
  transform: translateX(0);
}

.button:active .button__icon {
  background-color: #146c54;
}

.button:active {
  border: 1px solid #146c54;
}