body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-attachment: fixed;
    font-family: "Assistant", sans-serif;
}

.startimg {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100vh;
  overflow: hidden; 
}

.startimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}


.vertical-line {
  position: absolute;
  top: 0; 
  right: 50%;
  width: 4px; 
  height: 29%; 
  background-color: white; 
  z-index: 15;
  align-self: center;
}

.centered-text {
  position: absolute; 
  top: 30%; 
  left: 50%; 
  font-size: 40px;
  font-family: 'Amatic SC', cursive;
  transform: translate(-50%, -50%); 
  color: white; 
  text-align: center;
  z-index: 20; 
}
.vertical-line2{
  position: absolute;
  top: 43%; 
  font-weight: bold;
  right: 50%;
  width: 4px; 
  height: 10%; 
  background-color: white; 
  z-index: 15;
  align-self: center;

}
.bottom-text{
  position: absolute; 
  top: 57%;
  left: 50%;
  font-size: 40px;
  font-family: 'Amatic SC', cursive;
  transform: translate(-50%, -50%); 
  color: white; 
  text-align: center; 
  z-index: 20; 
}

.whatsapp-container {
    position: fixed; 
    bottom: 6%; 
    right: 6%; 
    z-index: 1000; 
    display: column;
    align-items: flex-start; 
}

.assistant-nigga {
  font-family: "Assistant", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}

.whatsapp-icon img {
    width: 80px; 
    height: 80px;
}

.close-button {
    background: transparent; 
    border: none; 
    font-size: 24px;
    color: rgb(0, 0, 0); 
    cursor: pointer; 
    margin: 0;
    top: 0; 
    background-color: white; 
    border-radius: 30px;
}











/* Default popup styles */
.popup {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  opacity: 0; /* Start invisible */
  transition: opacity 1s ease-in-out; /* Transition for fade effect */
}

.popup.show {
  display: flex; /* When shown, set to flex to allow centering */
  opacity: 1; /* Fully visible */
  z-index: 1000; /* Ensure the popup is above other content */
}

.popup-content {
  background: white;
  padding: 20px;
  box-sizing: content-box; /* Make sure the border is outside the padding */
  text-align: center;
  position: relative; /* Position close button relative to this container */
  width: 90vw; /* 80% of the viewport width */
  height: 40vh; /* 60% of the viewport height */
  overflow: auto; /* Ensure the content is scrollable if needed */
  display: flex;

 

  justify-content: center; /* Center vertically */
  align-items: center; /* Center horizontally */

  flex-direction: column; /* Align items in a column */
  border: 10px solid transparent; /* Initial transparent border */
  border-image: linear-gradient(90deg, #556B2F, #6B4423, #C3B091); /* Army-themed colors */
  border-image-slice: 1; /* Ensure the gradient fills the entire border */
  background-image: url("imgs/25192.jpg");

}

.close-btn {
  cursor: pointer;
  font-size: 30px; /* Larger size for better visibility */
  position: absolute; /* Position it inside the popup-content */
  top: 10px; /* 10px from the top */
  right: 10px; /* 10px from the right */
  color: rgb(255, 255, 255); /* Ensure the close button is visible */
  z-index: 101; /* Ensure the close button is on top of content */
}

.popup-content h1{
  color: white;
}

.popup-content h2 {
  color: white;
}


/* Small screens (mobiles) */
@media (max-width: 480px) {
  .popup-content {
    width: 80vw;
    height: 35vh;
    padding: 10px;
  }
  .close-btn {
    font-size: 20px;
  }
  .popup-content h1 {
    font-size: 15px; /* Larger font size */
    font-weight: bold; /* Bold font */
    margin-top: 10%;
  }
  .popup-content h2 {
    font-size: 14px; /* Smaller font size */
    font-weight: 300; /* Thin font */
  }
}

/* Medium screens (tablets) */
@media (max-width: 768px) {
  .popup-content {
    width: 80vw;
    height: 45vh;
  }
  .close-btn {
    font-size: 28px;
  }
  .popup-content h1 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 8px;
  }
  .popup-content h2 {
    font-size: 16px;
    font-weight: 300;
  }
}

/* Large screens (laptops/desktops) */
@media (max-width: 1024px) {
  .popup-content {
    width: 70vw;
    height: 50vh;
  }
  .close-btn {
    font-size: 30px;
  }
  .popup-content h1 {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .popup-content h2 {
    font-size: 18px;
    font-weight: 300;
  }
}

/* Extra Large screens (large desktop monitors) */
@media (min-width: 1200px) {
  .popup-content {
    width: 60vw;
    height: 50vh;
  }
  .close-btn {
    font-size: 32px;
  }
  .popup-content h1 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 12px;
  }
  .popup-content h2 {
    font-size: 20px;
    font-weight: 300;
  }
}























.amatic-sc-regular {
    font-family: "Amatic SC", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  
.rubik-doodle-shadow-regular {
    font-family: "Rubik Doodle Shadow", system-ui;
    font-weight: 400;
    font-style: normal;}

.topbar {
    position: relative; 
    z-index: 10;
    background-color: white;
    padding: 5%;
    text-align: center;
    display: flex;
    justify-content: center;
    width:100%;
    margin: 0;
  
}
.topbar p {
    color: #918e8e; 
    font-size: 6.2em; 
    text-align: center;
    font-family: 'Amatic SC', cursive;
    margin-top: 5px;
    margin: 0;
} 

@media (max-width: 1024px) {
    .topbar p {
        font-size: 4.2em; 
    } 
    
}

@media (max-width: 768px) {
    .topbar p {
        font-size: 3.4em; 
    }
    
}

@media (max-width: 480px) {
    .topbar p {
        font-size: 3em; 
    }
    
}




.fixed-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; 
    height: 100vh;
    object-fit: cover; 
    z-index: 5;
    filter: brightness(70%);  
}


@media (max-width: 768px) {
    .fixed-image {
        width: 100vw; 
        height: 100vh;
        object-fit: cover;
    }
}


@media (max-width: 480px) {
    .fixed-image {
        width: 100vw; 
        height: 100vh;
        object-fit: cover;
    }
}


@media (max-width: 320px) {
    .fixed-image {
        width: 100vw; 
        height: 100vh;
        object-fit: cover;
    }
}

.NameOfSection {
    display: flex;
    justify-content: center; 
    align-items: center;      
    height: 20%;
    
}

.NameOfSectIon {
    color: rgb(255, 255, 255); 
    font-weight: bold;
    z-index: 10;
    text-shadow: 
        1px 1px 0 #000000,
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px 1px 0 #ffffff;
}

.NameOfSectIon p{
    margin: 0;
    font-size: 3.2em;
    font-weight: bold;
     
}

@media (max-width: 1024px) {
    .NameOfSectIon p {
        font-size: 4.2em; 
    } 
    
}

@media (max-width: 768px) {
    .NameOfSectIon p {
        font-size: 2.4em; 
    }
    
}

@media (max-width: 480px) {
    .NameOfSectIon p {
        font-size: 1.5em; 
    }
    
}


.sections-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}


section {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 10px auto; 
    
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0; 
    }
    100% {
        transform: translateX(0); 
        opacity: 1; 
    }
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%); 
        opacity: 0; 
    }
    100% {
        transform: translateX(0); 
        opacity: 1; 
    }
}


:root {
    --white: #fff;
    --border-radius: 30px;
    --border-width: 5px;
    --padding: 5%;
    --slide-duration: 2.2s;
    --slide-ease: ease-out;
}


.Content, .Content2, .Content3, .Content4, .Content5, .Content6, .Content7, .Content8 {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: stretch;
    z-index: 10;
    width: 90%;
    opacity: 1;
   /* transform: translateX(100%);
    animation: slideInFromRight var(--slide-duration) var(--slide-ease) forwards; 
    transition: transform 0.6s ease, width 0.6s ease, opacity 0.6s ease;
    transition: border-radius 10s;*/
}


/*.Content2, .Content4, .Content6, .Content8{
    animation: slideInFromLeft var(--slide-duration) var(--slide-ease) forwards;
}
*/
.contentIn, .contentIn3, .contentIn5, .contentIn7{
    border: 2px solid var(--white);
    background-color: var(--white);
    padding: 2%;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    width: 100%; 
    max-width: 850px; 
    overflow: hidden; 
    transition: all 0.3s ease; 
}

.contentIn2, .contentIn4, .contentIn6, .contentIn8{
    border: 2px solid var(--white);
    background-color: var(--white);
    padding: 3%;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    width: 100%; 
    max-width: 850px;
    overflow: hidden; 
    transition: all 0.3s ease;

}


.contentIn2, .contentIn4, .contentIn, .contentIn3, .contentIn5, .contentIn6, .contentIn7, .contentIn8{
    border-width: 1px;
    padding: 4% 5%;
    margin-left: auto;
}

.contentIn h2, .contentIn2 h2, .contentIn3 h2, .contentIn4 h2, .contentIn5 h2, .contentIn6 h2, .contentIn7 h2, .contentIn8 h2{
    text-align: center;
    margin: 0 0 5%;
}

.contentIn h3, .contentIn2 h3, .contentIn3 h3, .contentIn4 h3, .contentIn5 h3, .contentIn6 h3, .contentIn7 h3, .contentIn8 h3{
    text-align: center;
    margin: 0;
}

.ContentImg, .ContentImg3, .ContentImg5, .ContentImg7{
    width: 40%;
    background-size: cover;
    background-position: center;
    height: 400px;
    height: auto;
    background-repeat: no-repeat;
    z-index: 10;
    border: var(--border-width) solid var(--white);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  
}

.ContentImg2, .ContentImg4, .ContentImg6, .ContentImg8{
    width: 40%;
    background-size: cover;
    height: 400px;
    background-position: center;
    height: auto;
    background-repeat: no-repeat;
    z-index: 10;
    border: var(--border-width) solid var(--white);
    position: relative; 
    order: -1;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}




.ContentImg { background-image: url("imgs/StockCake-Acupuncture Treatment Session_1725033923.jpg"); }
.ContentImg2 { background-image: url("imgs/StockCake-Herbal Apothecary Table_1725034084.jpg"); order: -1; }
.ContentImg3 { background-image: url("imgs/StockCake-Relaxing Massage Therapy_1725035425.jpg"); }
.ContentImg4 { background-image: url("imgs/pexels-shkrabaanthony-6076124.jpg"); order: -1; }
.ContentImg5 { background-image: url("imgs/salad-2756467_1280.jpg");}
.ContentImg6 { background-image: url("imgs/pexels-yankrukov-5794048.jpg"); order: -1; }
.ContentImg7 { background-image: url("imgs/katherine-hanlon-zoTdPQzG3JE-unsplash.jpg"); }
.ContentImg8 {background-image: url("imgs/chinese-medicine-3666183_1280.jpg") ; order: -1;}




.more-text, .more-text2,.more-text3,.more-text4,.more-text5,.more-text6,.more-text7, .more-text8{
  display: none;
  text-align: center;
  font-weight: bold;
  padding: 4px 8px; 
  width: 100%;
}
.more-text p:last-of-type, .more-text2 p:last-of-type,.more-text3 p:last-of-type,.more-text4 p:last-of-type,.more-text5 p:last-of-type,.more-text6 p:last-of-type,.more-text7 p:last-of-type, .more-text8 p:last-of-type{
  margin-bottom: 0 !important
}
.more-btn, .more-btn2,.more-btn3,.more-btn4,.more-btn5,.more-btn6,.more-btn7, .more-btn8{
  cursor: pointer;
  color: blue;
  border-radius: 50px;
  border: 1px solid rgb(86, 56, 170);
  padding: 4px 7px; 
  margin: 0 auto; 
  display: block;
  margin-top: 20%;
  background-color: white;
}

@media (max-width: 1025px) {
  .Content, .Content2, .Content3, .Content4, .Content5, .Content6, .Content7, .Content8 {
      width: 90%;

  }
  .contentIn, .contentIn2, .contentIn3, .contentIn4, .contentIn5, .contentIn6,.contentIn7,.contentIn8, .ContentImg, .ContentImg2, .ContentImg3, .ContentImg4, .ContentImg5, .ContentImg6, .ContentImg7, .ContentImg8 {
      width: 100%;
  }
  .ContentImg, .ContentImg2, .ContentImg3, .ContentImg4, .ContentImg5, .ContentImg6, .ContentImg7, .ContentImg8{
      height: 300px;
  }
  .contentIn h2, .contentIn2 h2, .contentIn3 h2, .contentIn4 h2, .contentIn5 h2, .contentIn6 h2 , .contentIn7 h2,.contentIn8 h2 {
      font-size: 2em;
  }
  .contentIn h3, .contentIn2 h3, .contentIn3 h3, .contentIn4 h3, .contentIn5 h3, .contentIn6 h3, .InfoMore p, .contentIn7 h3, .contentIn8 h3 {
      font-size: 1em;
  }
  
  .contentIn.open,.contentIn3.open,.contentIn5.open,.contentIn7.open {
    border-bottom-right-radius: 20px; 
  }
  .contentIn2.open,.contentIn4.open,.contentIn6.open, .contentIn8.open{
    border-bottom-left-radius: 20px; 
  }

  .more-text, .more-text2,.more-text3,.more-text4,.more-text5,.more-text6,.more-text7,.more-text8{
    font-weight: bold;
    font-size: 13px;
  }
}


@media (max-width: 900px) {
    .Content, .Content2, .Content3, .Content4, .Content5, .Content6, .Content7,.Content8 {
        width: 90%;

    }
    .contentIn, .contentIn2, .contentIn3, .contentIn4, .contentIn5, .contentIn6,.contentIn7,.contentIn8, .ContentImg, .ContentImg2, .ContentImg3, .ContentImg4, .ContentImg5, .ContentImg6, .ContentImg7, .ContentImg8 {
        width: 100%;
    }
    .ContentImg, .ContentImg2, .ContentImg3, .ContentImg4, .ContentImg5, .ContentImg6, .ContentImg7, .ContentImg8{
        height: 315px;
    }
    .contentIn h2, .contentIn2 h2, .contentIn3 h2, .contentIn4 h2, .contentIn5 h2, .contentIn6 h2 , .contentIn7 h2,.contentIn8 h2 {
        font-size: 2em;
    }
    .contentIn h3, .contentIn2 h3, .contentIn3 h3, .contentIn4 h3, .contentIn5 h3, .contentIn6 h3, .InfoMore p, .contentIn7 h3,.contentIn8 h3 {
        font-size: 1em;
    }
    
    .contentIn.open,.contentIn3.open,.contentIn5.open,.contentIn7.open {
      border-bottom-right-radius: 20px; 
    }
    .contentIn2.open,.contentIn4.open,.contentIn6.open,.contentIn8.open{
      border-bottom-left-radius: 20px; 
    }

    .more-text, .more-text2,.more-text3,.more-text4,.more-text5,.more-text6,.more-text7,.more-text8{
      font-weight: bold;
      font-size: 13px;
    }
}

@media (max-width: 768px) {
    .Content, .Content2, .Content3, .Content4, .Content5, .Content6, .Content7,.Content8 {
        width: 90%;
    }
  .contentIn, .contentIn2, .contentIn3, .contentIn4, .contentIn5, .contentIn6,.contentIn7,.contentIn8, .ContentImg, .ContentImg2, .ContentImg3, .ContentImg4, .ContentImg5, .ContentImg6, .ContentImg7, .ContentImg8 {
      width: 100%;
  }
  .ContentImg, .ContentImg2, .ContentImg3, .ContentImg4, .ContentImg5, .ContentImg6, .ContentImg7, .ContentImg8{
     height: 300px;
  }
    
    .contentIn h2, .contentIn2 h2, .contentIn3 h2, .contentIn4 h2, .contentIn5 h2, .contentIn6 h2, .contentIn7 h2,.contentIn8 h2{
        font-size: 2em;
    }
    .contentIn h3, .contentIn2 h3, .contentIn3 h3, .contentIn4 h3, .contentIn5 h3, .contentIn6 h3,.InfoMore p, .contentIn7 h3, .contentIn8 h3 {
        font-size: 1em;
    }
    
    .contentIn.open,.contentIn3.open,.contentIn5.open,.contentIn7.open {
      border-bottom-right-radius: 20px; 
    }
    .contentIn2.open,.contentIn4.open,.contentIn6.open, .contentIn8.open{
      border-bottom-left-radius: 20px; 
    }

    .more-text, .more-text2,.more-text3,.more-text4,.more-text5,.more-text6,.more-text7, .more-text8{
      font-weight: bold;
      font-size: 13px;
    }
}


@media (max-width: 480px) {
    .Content, .Content2, .Content3, .Content4, .Content5, .Content6, .Content7, .Content8 {
        width: 90%;
    }
    .ContentImg, .ContentImg2, .ContentImg3, .ContentImg4, .ContentImg5, .ContentImg6, .ContentImg7,.ContentImg8 {
      height: 232px; 
    }
    .contentIn, .contentIn2,.contentIn3,.contentIn4,.contentIn5,.contentIn6,.contentIn7, .contentIn8{
      width: 130%;
    }

    .contentIn h2, .contentIn2 h2, .contentIn3 h2, .contentIn4 h2, .contentIn5 h2, .contentIn6 h2, .contentIn7 h2, .contentIn8 h2 {
        font-size: 1.5em;
    }
    .contentIn h3, .contentIn2 h3, .contentIn3 h3, .contentIn4 h3, .contentIn5 h3, .contentIn6 h3, .InfoMore p, .contentIn7 h3,.contentIn8 h3 {
        font-size: 13px;
    }
    .contentIn.open,.contentIn3.open,.contentIn5.open,.contentIn7.open {
      border-bottom-right-radius: 30px; 
    }
    .contentIn2.open,.contentIn4.open,.contentIn6.open, .contentIn8.open{
      border-bottom-left-radius: 30px; 
    }

    .more-text, .more-text2,.more-text3,.more-text4,.more-text5,.more-text6,.more-text7, .more-text8{
      font-weight: bold;
      font-size: 13px;
    }
}

@media (max-width: 321px) {
    .Content, .Content2, .Content3, .Content4, .Content5, .Content7, .Content8 {
        width: 90%;
    }
    .ContentImg, .ContentImg2, .ContentImg3, .ContentImg4, .ContentImg5, .ContentImg6, .ContentImg7, .ContentImg8 {
      height: 237px;

    }
    .contentIn, .contentIn2, .contentIn3, .contentIn4, .contentIn5, .contentIn6, .contentIn7, .contentIn8{
        padding: var(--padding);
    }
    .contentIn h2, .contentIn2 h2, .contentIn3 h2, .contentIn4 h2, .contentIn5 h2, .contentIn6 h2, .contentIn7 h2, .contentIn8 h2 {
      font-size: 1.1em;
    }
    .contentIn h3, .contentIn2 h3, .contentIn3 h3, .contentIn4 h3, .contentIn5 h3, .contentIn6 h3,.InfoMore p, .contentIn7 h3, .contentIn8 h3 {
        font-size: 13px;
    }
    
    .contentIn.open,.contentIn3.open,.contentIn5.open,.contentIn7.open {
      border-bottom-right-radius: 20px; 
    }
    .contentI2.open,.contentIn4.open,.contentIn6.open, .contentIn8.open{
      border-bottom-left-radius: 20px; 
    }

    .more-text, .more-text2,.more-text3,.more-text4,.more-text5,.more-text6,.more-text7,.more-text8{
      font-weight: bold;
      font-size: 13px;
    }
}



section .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("imgs/wave.png");
    background-size: 1000px 100px;
}

section .wave.wave1{
    animation: animate 30s linear infinite;
    z-index: 1000;
    opacity: 1;
    animation-delay: 0s;
    bottom: 0;
}


@keyframes animate {
    0%
    {
        background-position-x: 0;
    }
    100%
    {
        background-position-x: 1000px;
    } 
}

section .wave.wave2{
    animation: animate2 15s linear infinite;
    z-index: 999;
    opacity: 0.5;
    animation-delay: -5s;
    bottom: 10px;
}

@keyframes animate2 {
    0%
    {
        background-position-x: 0;
    }
    100%
    {
        background-position-x: 1000px;
    } 
}
section .wave.wave3{
    animation: animate3 15s linear infinite;
    z-index: 998;
    opacity: 0.2;
    animation-delay: -2s;
    bottom: 15px;
}
@keyframes animate3 {
    0%
    {
        background-position-x: 0;
    }
    100%
    {
        background-position-x: 1000px;
    } 
}
section .wave.wave4{
    animation: animate4 5s linear infinite;
    z-index: 997;
    opacity: 0.6;
    animation-delay: -7s;
    bottom: 20px;
}
@keyframes animate4 {
    0%
    {
        background-position-x: 0;
    }
    100%
    {
        background-position-x: 1000px;
    } 
}

html{
    scroll-behavior: smooth;
}


.AboutMe{
    margin: 0;
    width: 100%;
    height: auto;
    background-color: white;
    z-index: 10;
    position: relative;
    overflow: hidden;
    
      
}

.ABOUTME{
    z-index: 10;
    width: 100%;
    height: auto;
    background-color: #ffffff; 
    text-align: center;
}


.content-wrapper {
    display: flex; 
    align-items: flex-end;
    justify-content: center; 
    margin-top: 1%; 
    height: auto;
    margin-bottom: 0;
    width: 100%;
    gap: 1%; 
    flex-wrap: wrap; 
}




.responsive-container-block {
  min-height: 75px;
  height: fit-content;
  width: 100%;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  justify-content: flex-start;
}

.text-blk {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  line-height: 25px;
}

.responsive-container-block.bigContainer {
  padding-top: 10px;
  padding-right: 30px;
  padding-bottom: 10px;
  padding-left: 30px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mainImg {
  color: black;
  width: 45%;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 10px 7px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 10%;
}

.text-blk.headingText {
  font-size: 25px;
  font-weight: 700;
  font-family: "Assistant", sans-serif;
  line-height: 34px;
  color: rgb(51, 51, 51);
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
}

.allText {
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 40px;
  width: 40%;
  margin: 0 0 0 0;
}

.text-blk.subHeadingText {
  color: rgb(102, 102, 102);
  font-size: 25px;
  line-height: 34px;
  font-weight: 700;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 15px;
  margin-left: 0px;
  font-style: italic;
}

.text-blk.description {
  font-size: 25px;
  line-height: 34px;
  color: rgb(102, 102, 102);
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 50px;
  margin-left: 0px;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  padding-left: 10px;
  font-style: italic;
}


.responsive-container-block.Container {
  margin-top: 80px;
  margin-right: auto;
  margin-bottom: 50px;
  margin-left: auto;
  justify-content: center;
  align-items: center;
  max-width: 1320px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

.responsive-container-block.Container.bottomContainer {
  margin-top: 100px;
  margin-right: 0px;
  margin-bottom: 50px;
  margin-left: 0px;
  flex-direction: row-reverse;
  margin: 100px auto 50px auto;
}

.allText.aboveText {
  margin: 0 0 0 40px;
}

.allText.bottomText {
  margin: 0 40px 0 0;
}

@media (max-width: 1024px) {
  .responsive-container-block.Container {
    max-width: 850px;
  }

  .mainImg {
    width: 55%;
    height: auto;
  }

  .text-blk.description {
    font-size: 20px;
  }
  .allText {
    width: 40%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 20px;
  }
  .responsive-container-block.bigContainer {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
  }
  .text-blk.subHeadingText {
    font-size: 22px;
  }
  .responsive-container-block.Container.bottomContainer {
    margin: 80px auto 50px auto;
  }
  .responsive-container-block.Container {
    max-width: 830px;
  }
  .allText.aboveText {
    margin: 30px 0 0 40px;
  }
  .allText.bottomText {
    margin: 30px 40px 0 0;
  }
}
@media (max-width: 768px) {
  .mainImg {
    width: 90%;
  }
  .allText {
    width: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
  }
  .responsive-container-block.Container {
    flex-direction: column;
    height: auto;
  }
  .text-blk.headingText {
    text-align: center;
  }
  .text-blk.subHeadingText {
    text-align: center;
    font-size: 25px;
  }
  .text-blk.description {
    text-align: center;
    font-size: 25px;
  }
  .allText {
    margin-top: 40px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }
  .allText.aboveText {
    margin: 40px 0 0 0;
  }
  .responsive-container-block.Container {
    margin: 80px auto 50px auto;
  }
  .responsive-container-block.Container.bottomContainer {
    margin: 50px auto 50px auto;
  }
  .allText.bottomText {
    margin: 40px 0 0 0;
  }
}
@media (max-width: 500px) {
  .responsive-container-block.Container {
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 0px;
    width: 100%;
    max-width: 100%;
  }
  .mainImg {
    width: 100%;
  }
  .responsive-container-block.bigContainer {
    padding-top: 10px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 25px;
  }
  .text-blk.subHeadingText {
    font-size: 25px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    font-size: 19px;
    font-style: italic;
  }
  .text-blk.description {
    font-size: 25px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    color: black;
  }
  .allText {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    width: 100%;
  }
}
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800&display=swap');
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.wk-desk-1 {
width: 8.333333%;
}
.wk-desk-2 {
width: 16.666667%;
}
.wk-desk-3 {
width: 25%;
}
.wk-desk-4 {
width: 33.333333%;
}
.wk-desk-5 {
width: 41.666667%;
}
.wk-desk-6 {
width: 50%;
}
.wk-desk-7 {
width: 58.333333%;
}
.wk-desk-8 {
width: 66.666667%;
}
.wk-desk-9 {
width: 75%;
}
.wk-desk-10 {
width: 83.333333%;
}
.wk-desk-11 {
width: 91.666667%;
}
.wk-desk-12 {
width: 100%;
}
@media (max-width: 1024px) {
.wk-ipadp-1 {
  width: 8.333333%;
}
.wk-ipadp-2 {
  width: 16.666667%;
}
.wk-ipadp-3 {
  width: 25%;
}
.wk-ipadp-4 {
  width: 33.333333%;
}
.wk-ipadp-5 {
  width: 41.666667%;
}
.wk-ipadp-6 {
  width: 50%;
}
.wk-ipadp-7 {
  width: 58.333333%;
}
.wk-ipadp-8 {
  width: 66.666667%;
}
.wk-ipadp-9 {
  width: 75%;
}
.wk-ipadp-10 {
  width: 83.333333%;
}
.wk-ipadp-11 {
  width: 91.666667%;
}
.wk-ipadp-12 {
  width: 100%;
}
}
@media (max-width: 768px) {
.wk-tab-1 {
  width: 8.333333%;
}
.wk-tab-2 {
  width: 16.666667%;
}
.wk-tab-3 {
  width: 25%;
}
.wk-tab-4 {
  width: 33.333333%;
}
.wk-tab-5 {
  width: 41.666667%;
}
.wk-tab-6 {
  width: 50%;
}
.wk-tab-7 {
  width: 58.333333%;
}
.wk-tab-8 {
  width: 66.666667%;
}
.wk-tab-9 {
  width: 75%;
}
.wk-tab-10 {
  width: 83.333333%;
}
.wk-tab-11 {
  width: 91.666667%;
}
.wk-tab-12 {
  width: 100%;
}
}
@media (max-width: 500px) {
.wk-mobile-1 {
  width: 8.333333%;
}
.wk-mobile-2 {
  width: 16.666667%;
}
.text-blk.description{
  font-size: 16px;
}
.wk-mobile-3 {
  width: 25%;
}
.wk-mobile-4 {
  width: 33.333333%;
}
.wk-mobile-5 {
  width: 41.666667%;
}
.wk-mobile-6 {
  width: 50%;
}
.wk-mobile-7 {
  width: 58.333333%;
}
.wk-mobile-8 {
  width: 66.666667%;
}
.wk-mobile-9 {
  width: 75%;
}
.wk-mobile-10 {
  width: 83.333333%;
}
.wk-mobile-11 {
  width: 91.666667%;
}
.wk-mobile-12 {
  width: 100%;
}
}
.testimonial {
    margin-top: 20%;
    width: 80%;
    padding: 4em;
    z-index: 10;
    display: flex;
    flex-direction: column;
    border: 2px solid #fefefe;
    border-top: none;
    border-bottom: none;
    align-items: center;
    position: relative;
    background-color: #00000037;
    &:before,
    &:after {
        content: "";
        position: absolute;
        width: 50px;
        height: 36px;
        background-repeat: no-repeat;
    }
    &:before {
        top: -10px;
        right: 10%;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.5 101"><path fill="white" d="m80.817.554c.458-.025.805-.06,1.152-.06,19.188-.003,38.376-.002,57.564-.002.146,0,.291.011.437.011.491,0,.712.16.712.735.002,19.353.023,38.706.044,58.059.004,3.649-.176,7.285-.832,10.88-.796,4.361-2.397,8.442-4.643,12.241-.975,1.648-2.273,3.106-3.446,4.634-.443.577-.922,1.132-1.426,1.656-1.938,2.015-4.045,3.838-6.374,5.39-3.972,2.648-8.297,4.499-12.973,5.438-2.052.412-4.157.674-6.247.751-4.326.159-8.659.151-12.989.203-.286.003-.572-.07-.917-.115v-19.877c.267,0,.491,0,.714,0,3.833,0,7.667,0,11.5,0,3.384,0,6.55-.847,9.48-2.521,2.537-1.449,4.398-3.513,5.825-6.094,1.849-3.345,2.325-6.94,2.49-10.641.008-.186-.014-.374-.029-.56-.003-.037-.035-.071-.096-.186-.223,0-.488,0-.752,0-12.625,0-25.25,0-37.875,0-.208,0-.42-.027-.624.001-.519.072-.637-.184-.638-.649-.012-3.333-.06-6.666-.061-9.999-.005-15.395.002-30.791.004-46.186,0-1.017,0-2.034,0-3.111Z" /><path  fill="white" d="m10.837,80.498c.303,0,.528,0,.752,0,3.813,0,7.626,0,11.438,0,3.785,0,7.275-1.023,10.442-3.086,2.062-1.343,3.688-3.097,4.776-5.331.269-.552.664-1.042.952-1.586.16-.303.213-.663.323-.994.875-2.647,1.304-5.368,1.354-8.152.003-.187-.008-.375-.019-.562-.003-.06-.027-.119-.059-.254-.244-.011-.505-.034-.765-.034-12.605-.002-25.211-.001-37.816-.002-1.322,0-1.338,0-1.339-1.309-.008-16.417-.011-32.833-.014-49.25,0-2.917.01-5.833-.01-8.75-.003-.473.123-.708.617-.686.249.011.5-.01.75-.01,19.023,0,38.045,0,57.068,0,1.348,0,1.361,0,1.362,1.331.018,19.48.039,38.959.042,58.439,0,4.404-.376,8.765-1.546,13.04-.769,2.809-1.905,5.456-3.306,7.988-.679,1.227-1.481,2.395-2.32,3.52-1.017,1.364-2.061,2.721-3.223,3.96-1.867,1.992-3.953,3.752-6.226,5.276-4.003,2.682-8.364,4.559-13.084,5.497-2.174.432-4.407.686-6.623.766-4.348.158-8.702.133-13.053.197-.476.007-.478-.262-.48-.6-.013-2.166-.05-4.333-.046-6.499.006-4.125.034-8.25.053-12.375,0-.144,0-.288,0-.534Z" /></svg>');
    }
    &:after {
        bottom: -10px;
        left: 30%;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.5 102"><path fill="white" d="m21.67,40.996c.335,0,.603,0,.871,0,12.729,0,25.459,0,38.188,0,.921,0,.926.004.926.899.015,18.541.031,37.081.042,55.622,0,.979-.041,1.958-.042,2.937,0,.396-.145.583-.554.545-.186-.017-.375-.002-.562-.002-19.271,0-38.542,0-57.813,0-.867,0-.877,0-.887-.881-.026-2.354-.06-4.707-.06-7.061-.005-17.395-.003-34.79-.002-52.185,0-3.335.114-6.66.825-9.937.508-2.34,1.145-4.638,2.073-6.849.447-1.066.846-2.16,1.395-3.173.648-1.195,1.37-2.364,2.178-3.457,1.149-1.555,2.324-3.106,3.633-4.524,2.381-2.579,5.085-4.787,8.126-6.57,4.232-2.481,8.771-4.108,13.623-4.789,2.201-.309,4.432-.497,6.654-.554,3.498-.09,6.999-.025,10.5-.023.862,0,.87.007.87.837,0,6.187-.009,12.374.003,18.56,0,.484-.177.598-.621.597-3.958-.009-7.917-.039-11.875.017-1.828.026-3.624.311-5.406.83-2.391.695-4.464,1.843-6.339,3.468-2.378,2.061-3.955,4.581-4.83,7.588-.729,2.504-1.009,5.052-.945,7.649.003.121.016.242.03.457Z" /><path fill="white" d="m101.501,41.049h40.222c0,1.057,0,2.01,0,2.963,0,17.791.003,35.581,0,53.372,0,1-.046,1.999-.039,2.999.003.449-.137.67-.611.617-.185-.021-.375-.002-.562-.002-19.167,0-38.333,0-57.5-.001-1.292,0-1.124.136-1.14-1.139-.036-2.77-.055-5.541-.056-8.311-.005-16.582-.009-33.165.005-49.747.002-2.29-.017-4.592.201-6.866.192-1.998.61-3.989,1.102-5.939.476-1.885,1.095-3.744,1.801-5.556.471-1.209,1.203-2.317,1.819-3.47.059-.11.129-.214.19-.323,2.575-4.597,6.106-8.327,10.329-11.44,5.251-3.871,11.178-5.995,17.603-6.812,4.082-.52,8.19-.405,12.293-.4,1.292.002,2.584.029,3.875-.004.512-.013.636.176.636.647,0,2.75.038,5.499.036,8.249-.002,3.458-.042,6.916-.036,10.374,0,.568-.158.747-.741.743-3.667-.025-7.333-.017-11-.011-2.28.004-4.493.331-6.691,1.012-2.162.67-3.995,1.786-5.707,3.217-3.207,2.68-4.893,6.169-5.496,10.22-.268,1.8-.35,3.627-.533,5.609Z" /></svg>');
    }
    * {
        text-align: center;
    }
    h1 {
        text-transform: uppercase;
        line-height: 1.25;
        font-size: 4.5rem;
        font-family: "Raleway", sans-serif;
        letter-spacing: 1px;
    }
    p {
        font-size: 20px;
        line-height: 1.75;
        font-family: "Montserrat", sans-serif;
        &.source {
            font-style: italic;
        }
    }
    .border {
        height: 5px;
        width: 100%;
        position: absolute;
        left: 0;
        &.top {
            top: 0;
            &:before,
            &:after {
                content: "";
                position: absolute;
                background: #fff;
                z-index: 10;
                height: 5px;
            }
            &:before {
                width: 75%;
                left: 0;							
            }
            &:after {
                width: 5%;
                right: 0;
            }
        }
        &.bottom {
            bottom: 0;
            &:before,
            &:after {
                content: "";
                position: absolute;
                background: #fff;
                z-index: 10;
                height: 8px;
            }
            &:before {
                width: 25%;
                left: 0;							
            }
            &:after {
                width: 55%;
                right: 0;
            }
        }
    }
}
.border {
  display: block;
  height: 2px;
  margin: 15px 0;
}
.review-carousel {
  position: relative;
  overflow: hidden;
}
.review {
  display: none; 
}
.review.active {
  display: block; 
}
@media (max-width: 600px) {
  .testimonial {
    padding: 20px; 
    font-size: 16px; 
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  .testimonial {
    padding: 25px; 
    font-size: 18px; 
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .testimonial {
    padding: 30px; 
    font-size: 20px; 
  }
}
@media (min-width: 1025px) {
  .testimonial {
    padding: 35px; 
    font-size: 22px; 
  }
}
.content-slider {
  width: 100%;
  margin-top: 20%; 
  height: 360px;
  z-index: 10;
  color: rgb(255, 255, 255);
  margin-bottom: 0;
  text-shadow: 
    -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}
.slider {
  height: 60vh;
  width: 80%;
  margin: 40px auto 0;
  overflow: visible;
  position: relative;
  z-index: 10;
  margin-top: 10%;
  
}
.mask {
  overflow: hidden;
  height: 320px;
  z-index: 10;
}
.slider ul {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 10;

}
.slider li {
  width: 100%;
  height: 620px;
  position: absolute;
  top: -325px;
  list-style: none;
  z-index: 10;
}
.slider .quote {
  font-size: 40px;
  font-style: italic;
  z-index: 10;
  text-align: center;
}
.slider .source {
  font-size: 20px;
  text-align: left;
}
.slider li.anim1 {
  animation: cycle 50000ms linear infinite;
}
.slider li.anim2 {
  animation: cycle2 50000ms linear infinite;
}
.slider li.anim3 {
  animation: cycle3 50000ms linear infinite;
}
.slider li.anim4 {
  animation: cycle4 50000ms linear infinite;
}
.slider li.anim5 {
  animation: cycle5 50000ms linear infinite;
}
.slider li.anim6 {
  animation: cycle6 50000ms linear infinite;
}

@media (max-width: 600px) {
  .slider .quote {
      font-size: 24px; 
  }
  .slider .source {
      font-size: 16px; 
  }
  .content-slider{
    margin-top: 50%;
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  .slider .quote {
      font-size: 32px; 
  }
  .slider .source {
      font-size: 18px; 
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .slider .quote {
      font-size: 36px;
  }
  .slider .source {
      font-size: 20px; 
  }
}
@media (min-width: 1025px) {
  .slider .quote {
      font-size: 40px; 
  }
  .slider .source {
      font-size: 20px;
  }
}
@keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}
@keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  40% {
    top: 0px;
    opacity: 1;
  }
  44% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  60% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  56% {
    top: -325px;
    opacity: 0;
  }
  60% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}
@keyframes cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}

.star-rating {
  font-size: 2rem; 
  color: gold;
  text-align: center;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  z-index: 10;
  margin-bottom: 0;
}
.singup {
  color: #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  font-weight: bold;
  margin-bottom: 0;
  z-index: 10;
  font-size: x-large;
  margin-top: 1.5em;
}
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  min-height: 350px;
  margin-bottom: 0;
  width: 500px;
  flex-direction: column;
  gap: 35px;
  border-radius: 15px;
  background: #e3e3e3;
 
}
.inputBox,
.inputBox1 {
  position: relative;
  width: 250px;
  z-index: 10;
}
.inputBox input,
.inputBox1 input {
  width: 100%;
  padding: 10px;
  outline: none;
  z-index: 10;
  border: none;
  text-align: right;
  color: #000;
  font-size: 1em;
  background: transparent;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transition: 0.1s;
  border-bottom-right-radius: 8px;
}
.inputBox span,
.inputBox1 span {
  margin-top: 5px;
  position: absolute;
  right: 0;
  transform: translateY(-4px);
  margin-right: 10px;
  padding: 10px;
  pointer-events: none;
  z-index: 10;
  font-size: 12px;
  color: #000;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 3px;
  border-radius: 8px;
}
.inputBox input:valid ~ span,
.inputBox input:focus ~ span {
  transform: translateX(-113px) translateY(-22px);
  font-size: 0.8em;
  z-index: 10;
  padding: 5px 10px;
  background: #000;
  letter-spacing: 0.2em;
  color: #fff;
}
.inputBox1 input:valid ~ span,
.inputBox1 input:focus ~ span {
  transform: translateX(-113px) translateY(-22px);
  font-size: 0.8em;
  padding: 5px 10px;
  z-index: 10;
  background: #000;
  letter-spacing: 0.2em;
  color: #fff;
}
.inputBox input:valid,
.inputBox input:focus,
.inputBox1 input:valid,
.inputBox1 input:focus {
  border: 2px solid #000;
  border-radius: 8px;
  z-index: 10;
}
.enter {
  height: 45px;
  width: 100px;
  border-radius: 5px;
  border: 2px solid #000;
  cursor: pointer;
  background-color: transparent;
  transition: 0.5s;
  text-transform: uppercase;
  z-index: 10;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 3em;
}
.enter:hover {
  background-color: rgb(0, 0, 0);
  color: white;
}
@media (max-width: 600px) {
  .card {
    width: 80%;
  }
  .singup {
    font-size: large; 
  }
  .inputBox,
  .inputBox1 {
    width: 200px; 
  }
  .enter {
    width: 80px; 
    font-size: 8px; 
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  .card {
    width: 400px; 
  }
  .singup {
    font-size: x-large;
  }
  .inputBox,
  .inputBox1 {
    width: 220px; 
  }
  .enter {
    width: 90px; 
    font-size: 9px; 
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .card {
    width: 450px;
  }
  .inputBox,
  .inputBox1 {
    width: 240px; 
  }
  .enter {
    width: 100px;
    font-size: 10px; 
  }
}
@media (min-width: 1025px) {
  .card {
    width: 500px; 
  }
  .inputBox,
  .inputBox1 {
    width: 250px; 
  }
  .enter {
    width: 100px; 
    font-size: 10px; 
  }
}



.contactMe {
  display: flex;
  z-index: 10;
  margin-top: 0;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  text-align: center; 
  padding: 20px; 
  margin-bottom: 0;

}
.email, .phone, .nothing{
  margin: 10px 0; 
  font-size: 3.2rem; 
  color: #ffffff; 
  z-index: 10;
}
.nothing{
  margin-bottom: 30%;
}

@media (max-width: 1026px) {
  .email, .phone, .nothing {
    font-size: 2.8rem; 
  }
}

@media (max-width: 900px) {
  .email, .phone, .nothing {
    font-size: 2.4rem; 
  }
}

@media (max-width: 768px) {
  .email, .phone, .nothing {
    font-size: 2rem; 
  }
}

@media (max-width: 400px) {
  .email, .phone, .nothing {
    font-size: 1.6rem; 
  }
}






.gradient {
  height: 70vh; 
  background: linear-gradient(to top, rgb(0, 0, 0), rgba(255, 255, 255, 0)); 
  display: flex;
  position: relative;
  justify-content: center;
  align-items:end;
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 20px; 
  z-index: 10;
  padding: 0;
  margin: 0;
}
@media (max-width: 600px) {
  .gradient {
    font-size: 16px; 
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  .gradient {
    font-size: 18px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .gradient {
    font-size: 20px; 
  }
}
@media (min-width: 1025px) {
  .gradient {
    font-size: 24px; 
  }
}