/* .container{
  width: 100%;
  display: flex;
  justify-content: center;
} */

/* .inner-container{
  width: 100%;
}

@media only screen and (min-width: 980px){
  .inner-container{
    max-width: 880px;
  }  
} */

.flex-right{
  display: flex;
  justify-content: right;
}

.flex-right-gap-1{
  gap: 1rem;
  display: flex;
  justify-content: right;
}


.flex-left-no-gap{
  display: flex;
  justify-content: left;
}

.flex-left{
  display: flex;
  gap: 1rem;
  justify-content: left;
}

.flex-left-gap-point-5{
  display: flex;
  gap: .5rem;
  justify-content: left;
}

.flex-align-center{
  display: flex;
  align-items: center;
}

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

.flex-space-between{
  display: flex;
  gap: .4rem;
  justify-content: space-between;
}

.flex-space-around{
  display: flex;
  justify-content: space-around;
}

.flex-vertical-center{
  display: flex;
  align-items: center;
}

.flex-bottom{
  display: flex;
  align-items: baseline;
}

.center-text{
  text-align: center;
}

.l1-header{
  font-size: 3rem;
  color: var(--primary-color);
  font-family: Raleway;
}

.l2-header{
  font-size: 3rem;
  color: var(--grey-2);
  font-weight: 700;
}

.l2-header-link{
  font-size: 3rem;
  color: var(--grey-2);
  font-weight: 700;
  &:hover{
    color: var(--primary-color);
    text-decoration: none;
  }
}


.l3-header{
  font-size: 2rem;
  color: var(--grey-2);
  font-weight: 700;
}

.l4-header{
  font-size: 1.5rem;
  color: var(--grey-2);
  font-weight: 600;
}

.list-item-heading{
  margin-top: 0;
  padding-top: 0;
  color: var(--grey-2);
  font-weight: 500;
  font-size: 1.6rem;
}

.list-item-heading-link{
  margin-top: 0;
  padding-top: 0;
  color: var(--grey-2);
  font-weight: 500;
  font-size: 1.4rem;
  &:hover{
    color: var(--primary-color);
    text-decoration: none;
  }
}

.list-item-heading-small{
  margin-top: 0;
  padding-top: 0;
  color: var(--grey-2);
  font-weight: 400;
  font-size: 1.2rem;
}

.l3-text{
  font-size: 2rem;
  color: var(--grey-2);
}

.l4-text{
  font-size: 1.5rem;
  color: var(--grey-2);
  font-weight: 700;
}

.l1-paragraph{
  font-size: 1rem;
  color: var(--grey-2);
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight: 400;
  line-height: 1.5rem;
}

.shading-1{
  background-color: #eef4fa;
}

.shading-2{
  background-color: #deebf8;
  padding: 1rem;
}

.shading-white{
  background-color: #ffffff;
  padding: 1rem;
}

.tutorial-container{
  padding: 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.subsciption-form{
  padding-left: 2rem;
  padding-right: 2rem;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  box-sizing: border-box;
}

.bottom-space-1{
  padding-bottom: 1rem;
}

.bottom-space-2{
  padding-bottom: 2rem;
}

.left-space-2{
  padding-left: 2rem;
}

.padding-10{
  padding: 1% 10%;
}

.left-space-0{
  padding-left: 0 !important;
}

.top-space-1{
  padding-top: 1rem;
}

.top-space-2{
  padding-top: 2rem;
}

.top-space-point-5{
  padding-top: .5rem;
}

.bottom-space-point-5{
  padding-bottom: .5rem;
}

.top-border{
  border-top: 1px solid #7e9bb9;
  padding-top: 1rem;
}

.bottom-white-border{
  border-bottom: 1px solid #ffffff;
}

.meta-text{
  font-size: .9rem;
  font-family: Roboto;
  color: #b8b8b8;
}

.meta-text-bold{
  font-size: .9rem;
  font-family: Roboto;
  color: #2f2f2f;
  font-weight: 600;
}

.meta-text-large{
  font-size: 1rem;
  font-family: Roboto;
  color: #2f2f2f;
}

.fill-height{
  height: 60vh;
}



        /* Parallax effect styles */
        .parallax-section {
            background-attachment: fixed; /* This creates the parallax effect */
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        .parallax-overlay {
            background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for text readability */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        /* Custom text shadow for better readability on parallax sections */
        .text-shadow-lg {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }
        .text-shadow {
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
        }
        /* Custom gradients */
        .gradient-hero {
            /* background: linear-gradient(to right, #008080, #008080); Indigo to Purple */
            /* background: linear-gradient(to top, #f3f3f3, #ededed); */
        }
        .gradient-button {
            background: linear-gradient(to right, #4f46e5, #6366f1); /* Brighter Indigo */
        }
        .gradient-button:hover {
            background: linear-gradient(to right, #4338ca, #5a57e6); /* Darker on hover */
        }