/* <!--******************About Section starts from here******************-->     */

 * {
   /* font-family: "Madimi One", sans-serif; */
   letter-spacing: .2rem;
   /* font-family: "Roboto", sans-serif; */
   /* font-family: "Open Sans", sans-serif; */
   font-family: "Poppins", sans-serif;
 }




 .btn-outline-primary:hover {
   background-color: transparent;
   border-color: #727579;
   color: #000000;
 }

 .btn-outline-primary:focus {
   box-shadow: none;
   border-color: #727579;
   color: #000000;

 }


 .textTheme {

   color: #ffffff;
   text-shadow: 1px 1px#000000;

 }

 .required {
   color: red;
 }


 .Opacity {

   filter: saturate(200%);

 }

 .text-animation {
   text-shadow: 3px 5px 0 rgb(95, 83, 83);
 }




 .gap {
   height: 4rem;
 }


 /* This is to change the size of the image according to the change in screen width by cropping the image */
 #firstCarouselImage {
   width: 100%;
   height: 100vh;
   object-fit: cover;
   object-position: center;
 }

 #secondCarouselImage {
   width: 100%;
   height: 100vh;
   object-fit: cover;
   object-position: center;
 }

 #thirdCarouselImage {
   width: 100%;
   height: 100vh;
   object-fit: cover;
   object-position: center;
 }




 .hero-section {
   position: relative;
   height: 600px;

   width: 100%;
   filter: saturate(200%);
   background-image: url('../Images/ai-generated-8201375_1920.png');
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   color: rgb(250, 246, 241);
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;

 }

 .semi-transparent {
   background-color: rgba(84, 80, 80, 0.4);

 }

 .hero-content,
 .vision-content {
   padding: 25px;
   margin: 15px;

 }

 .hero-heading,
 .vision-heading {
   font-size: 41px;
   padding: 25px;
   margin-top: 3rem;
   text-shadow: 3px 5px 0 rgb(201, 196, 196);
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .hero-content p,
 .vision-content p {
   font-size: 25px;
   text-shadow: 1px 1px 0 rgb(0, 0, 0);
   margin: 50px;
   padding-left: 50px;
   padding-right: 50px;
   letter-spacing: 1.4px;
   font-weight: 500;
   line-height: 1.5em;

 }


 @media (min-width: 1200px) {
   .Form-container {
     max-width: 50%;
     margin: 0 0;
     padding: 2px;
   }

   .hero-heading,
   .vision-heading {
     font-size: 41px;
     margin-bottom: 20px;
   }

   .hero-content p {
     margin: 10px;
     padding-left: 10px;
     padding-right: 10px;
     line-height: 2rem;
   }
 }


 @media (min-width: 992px) and (max-width: 1200px) {
   .Form-container {
     max-width: 75%;
     margin: 0 0;
     padding: 2px;
   }

   .hero-heading,
   .vision-heading {
     font-size: 41px;
   }

   .hero-content p,
   .vision-content p {
     font-size: 20px;
     margin: 5px;
     padding-left: 5px;
     padding-right: 5px;

   }
 }


 @media (min-width: 768px) and (max-width: 992px) {
   .Form-container {
     max-width: 100%;
     margin: 0 0;
     padding: 2px;
   }

   .hero-heading,
   .vision-heading {
     font-size: 41px;
     margin-bottom: 10px;

   }

   .hero-content p,
   .vision-content p {
     font-size: 18px;
     margin: 8px;
     padding-left: 10px;
     padding-right: 10px;

   }
 }


 @media (max-width: 767px) {
   .Form-container {
     max-width: 100%;
     margin: 0 0;
     padding: 2px;
   }

   .gap {
     height: 2rem;
   }

   .hero-section {
     height: auto;

   }

   .hero-content {
     font-size: 12px;
     padding: 3px;
     margin: 3px;

   }

   .hero-heading,
   .vision-heading {
     font-size: 30px;
     margin-bottom: 5px;

   }

   .hero-content p,
   .vision-content p {
     font-size: 14px;
     margin: 5px;
     padding-left: 5px;
     padding-right: 5px;

   }
 }

 /* <!--******************About Section ends here******************-->     */

 /************************* 6 boxes Section starts from here****************************** */

 .Sections {
   width: auto;
   text-align: center;
   margin-top: 4rem;

   margin-bottom: 1rem;

 }

 .box-container {


   width: 100%;
   margin: auto;
   filter: saturate(200%);
   columns: 3;
   column-gap: 2vw;
   break-inside: avoid;
   align-items: center;


 }

 .box-container .box {
   width: 100%;
   border-radius: 10px;
   margin-bottom: 4rem;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease-in-out;
 }

 .box {
   display: flex;
   justify-items: center;
   align-items: center;
   box-shadow: 0px 15px 20px rgb(176, 175, 175);
 }


 .box img {
   display: block;
   margin: auto;
   max-width: 100%;
   border: 2px solid rgb(77, 77, 77);
   border-radius: 10px;
   size: inherit;
 }


 .overlay {
   position: absolute;
   bottom: 35%;
   left: .1rem;
   right: .1rem;
   padding: 20px;
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   text-align: center;
   font-size: 24px;
 }



 .box-container .box:nth-child(1) {
   animation: slideInLeft 1s ease-in-out 0.5s forwards;
 }

 .box-container .box:nth-child(2) {
   animation: slideInRight 1s ease-in-out 1s forwards;
 }

 .box-container .box:nth-child(3) {
   animation: slideInLeft 1s ease-in-out 1.5s forwards;
 }

 .box-container .box:nth-child(4) {
   animation: slideInRight 1s ease-in-out 2s forwards;
 }

 .box-container .box:nth-child(5) {
   animation: slideInLeft 1s ease-in-out 2.5s forwards;
 }

 .box-container .box:nth-child(6) {
   animation: slideInRight 1s ease-in-out 3s forwards;
 }


 @keyframes slideInLeft {
   from {

     transform: translateX(-100%);
     opacity: 0;
     visibility: hidden;
   }

   to {
     transform: translateX(0);
     opacity: 1;
     visibility: visible;
   }
 }

 /* Define animation keyframes for sliding in from the right */
 @keyframes slideInRight {
   from {
     transform: translateX(100%);
     opacity: 0;
     visibility: hidden;
   }

   to {
     transform: translateX(0);
     opacity: 1;
     visibility: visible;
   }
 }

 @media (max-width: 767px) {

   .box-container {
     columns: 2;
   }
 }

 /**************************************************************************** 6 boxes Section ends here****************************** */






 /* *************************************************************************************Vision Section starts from here *****************/

 .vision-section {
   position: relative;
   height: 550px;

   width: 100%;
   filter: saturate(200%);
   background-image: url('../images/heroSection/pexels-erik-mclean-8910009.jpg');
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;

   color: rgb(250, 246, 241);
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;

 }

 .semi-transparent {
   background-color: rgba(84, 80, 80, 0.7);

 }

 /* *************************************************************************************Vision Section ends here *****************/





 /* *******************************************Contact us form starts from here|******************************************* */


 .Form-container {
   margin: 0 auto;
   padding: 20px;
 }

 .Form-container h2 {
   text-align: center;
   color: white;
 }

 .form-group {
   margin-bottom: 40px;
 }

 label {
   display: block;
   margin-bottom: 5px;

   font-size: 18px;
   color: white;
   font-weight: bold;
 }

 input[type="text"],
 input[type="email"] {
   width: 100%;
   padding: 10px;
   border: none;
   background-color: transparent;
   border-bottom: 2px solid #999;
   border-radius: 5px;
   margin: 0 auto;
   margin-bottom: 10px;
   color: white;
 }

 input[type="text"]::placeholder,
 input[type="email"]::placeholder {
   font-size: 16px;
   color: #999;
 }

 .error-message {
   color: red;
 }

 /* Honeypot field - hidden from users but visible to bots */
 .honeypot-field {
     position: absolute;
     left: -9999px;
     width: 1px;
     height: 1px;
     opacity: 0;
     pointer-events: none;
 }

 button {
   padding: 10px 20px;
   background-color: #007bff;
   color: #fff;
   border: none;
   border-radius: 5px;
   font-size: 18px;
   cursor: pointer;
 }

 button:hover {
   background-color: #0056b3;
 }

 .form-body {
   background-image: url('../images/form/grid-7163779_1920.jpg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;

 }

 /* **************************Contact us form ends here******************************************* */



 /* *************************************Footer Starts from Here******************************************* */


 .footer {

   background-color: #333;
   color: #fff;
   padding: 20px 0;
 }

 .footer-container {
   max-width: 1500px;
   margin: 0 auto;
   align-items: center;
 }

 .footer-row {
   display: flex;
   flex-wrap: wrap;
 }

 .footer-column-1,
 .footer-column-2,
 .footer-column-3 {
   flex: 1;
   padding: 0 20px;
   box-sizing: border-box;
 }

 .list-unstyled {
   list-style-type: none;
 }

 .social-icons {
   list-style: none;
   padding: 0;
 }

 .social-icons li {
   display: inline-block;
   margin-right: 10px;
 }

 .social-icons li:last-child {
   margin-right: 0;
 }

 .socialMediaLogo {
   width: 30px;
   height: auto;
   margin-top: 12px;
   vertical-align: middle;

 }

 .socialMediaLink {
   color: inherit;
   text-decoration: none;
   letter-spacing: 1px;
   padding: 1px;


 }

 .socialMediaLink:hover {
   color: #007bff;

 }

 .footer-hr {
   background-color: #f8f9fa;
   border: none;
   height: 1px;
   margin: 20px 0;

 }

 .footer-copywrite-text {
   text-align: center;
   margin-bottom: 0;
   font-size: 14px;
   color: #abbac3;

 }


 @media screen and (max-width: 768px) {
   .footer-column-1 {
     flex: 100%;
   }

   .footer-column-2,
   .footer-column-3 {
     flex: 1;
   }

   .overlay {
     font-size: 18px;
     padding: 2px;
     padding-left: 0px;
     padding-right: 0px;
   }
 }

 /* *************************************Footer Ends Here********************************************* */