/* =====================
  Background Images START
  ====================== */

  
  
  ::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1; 
}

::-webkit-scrollbar-thumb {
  background: blueviolet; 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #602760; 
}
  
  
  
  
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .bg-home  {
    background-image: url(../img/randyrooi-sky-956976_1920.jpg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    place-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  } 

  .bg-sub {
     background-image: url(../img/aekphoto-backgrounds-4251120_1920.jpg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    place-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  }

/* =========================
    Background Images END
    ======================== */

 /* ========================
      Font Styles START
      ====================== */

 /* Import font styles from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Prata&display=swap');

/* Font Classes for Website */
.prata-regular {
  font-family: "Prata", serif;
  font-weight: 400;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}     
/* ==================
  Font Styles END
  ================= */

/* ==================
   Link Style START
   ================== */

   a {
    text-decoration: none;
    color:blueviolet
   }

   a:hover{
      color: #ffffff;
   } 

/*=====================
  Link Styles END
  ===================== */

  /* ========================
     Heading paregrpah and style start
     ================================== */
     
     h1{font-size: 6rem;}
     h2{font-size: 5rem;}
     h3{font-size: 4rem;}
     h4{font-size: 3rem;}
     h5{font-size: 2rem;}
     h6{font-size: 1rem;}

     h1, h2, h3, h4, h5, h6 {
           font-family: "Prata", serif;
           font-weight: 400;
           font-style: normal;
          padding: 0;
          margin: 0;
     }

     p {
          font-family: "Prata", serif;
          font-weight: 400;
          font-style: normal;
          font-size: 1rem;
          line-height: 1.76;
          padding: 0;
          margin: 0 0 20px 0;
     }

     /* ========================
     Heading paregrpah and style END
     ================================== */

/* ========================
Button Style START 
===================== */

   .action-btn {
       background-color: rgb(250, 250, 250);
       box-shadow: 0px 0px 3px 3px rgb(0, 0,0, 0.1);
       font-family: "Lato", sans-serif;
       font-weight: 400;
       font-style: normal;
       text-decoration: none;
       font-size: 1.2rem;
       color: #602760;
       padding: 7px 17px 7px 17px;
       border: none;
       border-radius: 7px;
       cursor: pointer;
 
   }
     
   .action-btn:hover {
    background-color: rgb(221, 156, 226);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(255, 181, 253, 0.6);


   }
      
       /* ===========================
       Button style END
       ========================== */

       /* ===========================
       NavBar styles START
       ========================== */
     
       .nav-container {
        background-color: rgb(255, 86, 204);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        font-size: 1.2rem;
        font-family: "Lato", sans-serif;
        font-weight: 400;
        font-style: normal;
        height: 60px;
        width: 100%;
        position: sticky;
        top: 0;
        background: rgba(255, 255, 255, 0.1); 
       backdrop-filter: blur(15px);
       -webkit-backdrop-filter: blur(15px);
       border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }
      
      .navbar {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100;
        width: 90%;
        max-width: 1200px;
        margin: auto;
      }

      .navbar ul {
         display: flex;

      }

      .nav-container .navbar {
        justify-content: space-between;
      }

      .navbar ul li {
        list-style-type: none;
      }
   
     .nav-container .navbar ul li {
       padding: 0px;
       margin: 0 20px;
     }

     .nav-container h6 {
        font-family: "Lato", sans-serif;
       font-weight: 400;
       font-style: normal;
     }

     .navbar h2 {
        padding: 0px;
        margin: 0;

     }

     .navbar a {
        color: rgb(71, 9, 74);
        text-decoration: none;

     }

     .navbar a:hover {
          color: rgb(251, 251, 251);
     }
     
     @media screen and (min-width: 390px) and (max-width: 787px) {
      .nav-container {
        height:auto;
      }
        .nav-container .navbar {
            flex-direction: column;
        }
     }
     
    /* ===========================
       NavBar styles END
       ========================== */

    /* ===========================
       Page Contianers Styles START
       ========================== */

       .homepage-container {
         margin: auto;
         width: 90%;
         max-width: 550px;
         padding: 50px;
         text-align: center;
         background: rgba(255, 255, 255, 0.15);
         backdrop-filter: blur(18px);
         -webkit-backdrop-filter: blur(18px);
         border: 1px solid rgba(255,255,255,0.4);
         border-right: 1px solid rgba(255,255,255,0.2);
         border-bottom: 1px solid rgba(255,255,255,0.2);
         border-radius: 24px;
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         text-align: center;
         animation: fadeInUp 1s ease-out;

       }

      .homepage-container h1 {
         margin: 0 0 10px 0;
         text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
         color: rgb(93, 0, 96)
      }
       

      .subpage-container {
          background-color: rgb(255, 255, 255,0.3);
          width: 90%;
          max-width: 1200px;
          margin: 0 auto;
          padding: 20px;
          text-align: center;
          flex-grow: 1;
      }

      .grid-container {
         display: flex;
         justify-content: center;
      }

      .grid-cards {
          display: grid;
          width: 100%;
          grid-gap: 20px;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      }

      .grid-card {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(0,0,0,0.5);
        color: #ffffff;
        height: 100px;
        border-radius: 10px;
        font-size: 1.2rem;
      }

      .grid-cards a:hover {
        background-color: rgb(0, 0,0, 0.8);
        border-radius: 10px;

      }

      hr {
         border-top: 1px solid rgb(255, 255, 255);
      }

          /* ===========================
       Page Contianers Styles END
       ========================== */


          /* ===========================
              Subpage cotent styles START
       ========================== */

       .subpage-content {
        width: 80% ;
        height: 100%;
        margin: 0 auto;
        padding: 20px;
        text-align: center;
       }

       .photo {
        width: 90%;
        border-radius: 200px;

       }



       .subpage-content details {
          background-color: lavenderblush;
          border: 1px solid rgb(246, 172, 197);
          border-radius: 10px;
          margin-bottom: 5px;
       }

       .subpage-container summary {
          padding: 20px;
          font-weight: bold;
          font-size: 1.1rem;
          color: #333333;
          cursor: pointer;
          outline: none;
         
       }

       .subpage-content summary:hover {
        background-color: antiquewhite;
        border-radius: 10px;

       }

      .subpage-content details p {
            padding: 20px;
            margin: 10x;
            line-height: 1.5;
            color:#ffffff;
            

      }

      .subpage-container h2 {
          font-size: 1.5rem;
          color: #000000;
          padding-bottom:5px;
          margin-top: 1.5rem;

      }

        .subpage-content ul {
          list-style: none;
          padding-left: 0;
        
        }

        .subpage-content li{
          background-color: rgb(255, 255, 255,0.5);
          border-radius: 10px;
          padding: 20px;
          margin-bottom: 10px;
          line-height: 1.5;
        }


        .subpage-content li a {
           font-weight: bold;
           font-size: 1.2rem;
           color: #9145a0;
           text-decoration: none;

        }

        .subpage-content li a:hover {
          text-decoration: underline;
          color: #602760;
        }
              /* ===========================
              Subpage content styles END
       ========================== */

       /*========================
       Contact form styles START
       ============================ */

       
      form {
         font-family: "Prata", serif;
         font-weight: 400;
         font-style: normal;
         font-family: 1rem;
         line-height: 1.75;
      }

      input[type=text], select {
        width: 100%;
        padding: 20px;
        margin: 10px 0px 20px 0px;
        display: inline-block;
        border: 1px soild #651864;
        border-radius: 10px;
        box-sizing: border-box;
        font-family: "Prata", serif;
        font-weight: 400;
        font-style: normal;
        font-family: 1rem;
        line-height: 1.75;
      }
    
     input[type=email] {
         width: 100%;
        padding: 20px;
        margin: 10px 0px 20px 0px;
        display: inline-block;
        border: 1px soild #651864;
        border-radius: 10px;
         box-sizing: border-box;
        font-family: "Prata", serif;
        font-weight: 400;
        font-style: normal;
        font-family: 1rem;
        line-height: 1.75;
     }

     textarea {

         width: 100%;
         height: 150px;
        padding: 20px;
        margin: 10px 0px 20px 0px;
        box-sizing: border-box;
        border: 1px soild #651864;
        border-radius: 10px;
        background-color: #f6f6f6;
        resize: none;
        font-family: "Prata", serif;
        font-weight: 400;
        font-style: normal;
        font-family: 1rem;
        line-height: 1.75;
                     
     }                    
     
     input[type=SUBMIT] {
      width: 100%;
       background-color: rgb(240, 177, 253);
       box-shadow: 0px 0px 3px 3px rgb(0, 0,0, 0.1);
       font-family: "Lato", sans-serif;
       font-weight: 400;
       font-style: normal;
       text-decoration: none;
       font-size: 1.2rem;
       color: #602760;
       padding: 7px 17 px 7 px 17px;
       border: none;
       border-radius: 7px;
       cursor: pointer;
     }
     
    input[type=SUBMIT]:hover {
          background-color: blueviolet;
          color: #ffffff;
    }
    /*========================
       Contact form styles End
       ============================ */

        /* ===========================
          Footer styles START
       ========================== */

       .footer-container {
        background-color: 0,0,0, 0.8;
        height: 40px;
        width: 100%;
        padding: 20px 0px 10px 0px;
       }
      
     
        .footer-content {
        text-align: center;
        color: antiquewhite;
        font-size: 0.8rem;
        font-family: "Prata", serif;
        font-weight: 400;
        font-style: normal;

        }


        .orb {
          position:absolute;
          width: 300px;
          height: 300px;
          border-radius: 50%;
          filter: blur(80px);
          z-index: -1;
          animation: float 20s infinite alternate;
        }
        
        .orb-1 {
          background: rgba(213, 89, 230, 0.4);
          top: 10%;
          left: 10%;
        }

        .orb-2 {
          background: rgba(236, 114, 183, 0.3);
          bottom: 20%;
          right: 15%;
          animation-delay: -5s;

        }

        @keyframes float {
          from { transform: translate(0,0); }
          to { transform: translate(100px, 50px);}
        }


        @keyframes fadeInUp {
          from{
            opacity: 0;
            transform: translateY(30px);
          }

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