@font-face {
    font-family: 'OpenSans';
    src: url('../assets/fonts/OpenSans.eot?#iefix') format('embedded-opentype'), url(../assets/fonts/OpenSans.woff) format('woff'), url(../assets/fonts/OpenSans.ttf) format('truetype');
}
@font-face {
    font-family: 'ProductSans-Regular';
    src: url(../assets/fonts/ProductSans-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'kitabooinsight';
    src: url('../assets/fonts/kitaboo_teacher_portal_fonts/Teacher_Portal.eot?#iefix') format('embedded-opentype'), url(../assets/fonts/kitaboo_teacher_portal_fonts/Teacher_Portal.woff) format('woff'), url(../assets/fonts/kitaboo_teacher_portal_fonts/Teacher_Portal.ttf) format('truetype'), url('../assets/fonts/kitaboo_teacher_portal_fonts/Teacher_Portal.svg#Teacher_Portal') format('svg');
}
@font-face {
    font-family: 'FiraSans-Bold';
    src: url(../assets/fonts/FiraSans/FiraSans-Bold.ttf) format('truetype');
}
@font-face {
    font-family: 'FiraSans-Italic';
    src: url(../assets/fonts/FiraSans/FiraSans-Italic.ttf) format('truetype');
}
@font-face {
    font-family: 'FiraSans-Medium';
    src: url(../assets/fonts/FiraSans/FiraSans-Medium.ttf) format('truetype');
}
@font-face {
    font-family: 'FiraSans-Regular';
    src: url(../assets/fonts/FiraSans/FiraSans-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'FiraSans-SemiBold';
    src: url(../assets/fonts/FiraSans/FiraSans-SemiBold.ttf) format('truetype');
}
@font-face {
    font-family: 'Rubik-Regular';
    src: url(../assets/fonts/Rubik/RUBIK-REGULAR.TTF) format('truetype');
}
@font-face {
    font-family: 'Rubik-Italic';
    src: url(../assets/fonts/Rubik/RUBIK-ITALIC.TTF) format('truetype');
}
@font-face {
    font-family: 'Rubik-Medium';
    src: url(../assets/fonts/Rubik/RUBIK-MEDIUM.TTF) format('truetype');
}
@font-face {
    font-family: 'Rubik-Bold';
    src: url(../assets/fonts/Rubik/RUBIK-BOLD.TTF) format('truetype');
}
@font-face {
    font-family: 'Rubik-SemiBold';
    src: url(../assets/fonts/Rubik/RUBIK-MEDIUM.TTF) format('truetype');
}
@font-face {
    font-family: 'Lato';
    src: url(../assets/fonts/Lato/Lato-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Lato-Italic';
    src: url(../assets/fonts/Lato/Lato-Italic.ttf) format('truetype');
}
@font-face {
    font-family: 'Lato-Bold';
    src: url(../assets/fonts/Lato/Lato-Bold.ttf) format('truetype');
}
@font-face {
    font-family: 'Lato-Black';
    src: url(../assets/fonts/Lato/Lato-Black.ttf) format('truetype');
}
@font-face {
    font-family: 'Lato-Light';
    src: url(../assets/fonts/Lato/Lato-Light.ttf) format('truetype');
}
@font-face {
    font-family: 'Kitaboo-Regular';
    src: url(../assets/fonts/Rubik/RUBIK-REGULAR.TTF) format('truetype');
}
@font-face {
    font-family: 'Kitaboo-Regular-Roboto';
    src: url(../assets/fonts/Rubik/RUBIK-REGULAR.TTF) format('truetype');
}
@font-face {
    font-family: 'Kitaboo-Italic';
    src: url(../assets/fonts/Rubik/RUBIK-ITALIC.TTF) format('truetype');
}
@font-face {
    font-family: 'Kitaboo-Medium';
    src: url(../assets/fonts/Rubik/RUBIK-MEDIUM.TTF) format('truetype');
}
@font-face {
    font-family: 'Kitaboo-Bold';
    src: url(../assets/fonts/Rubik/RUBIK-BOLD.TTF) format('truetype');
}
@font-face {
    font-family: 'Kitaboo-SemiBold';
    src: url(../assets/fonts/Rubik/RUBIK-MEDIUM.TTF) format('truetype');
}
.home {
    height: 100%}
.animate_fadeInDown {
    animation: fadeInDown 2s;
}
.animation_fadeInUp {
    animation: fadeInUp 2s;
}
.animation_fadeInRight {
    animation: fadeInRight 2s;
}
.animation_fadeInLeft {
    animation: fadeInLeft 2s;
}
@keyframes fadeInDown {
    0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
}
100% {
    opacity: 1;
    transform: translateZ(0);
}
}@keyframes fadeInRight {
    0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
100% {
    opacity: 1;
    transform: translateZ(0);
}
}@keyframes fadeInLeft {
    0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
100% {
    opacity: 1;
    transform: translateZ(0);
}
}@keyframes fadeInUp {
    0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
}
100% {
    opacity: 1;
    transform: translateZ(0);
}
}@keyframes flip-animation {
    0% {
    transform: rotateY(0deg);
}
50% {
    transform: rotateY(90deg);
    opacity: .5;
}
100% {
    transform: rotateY(180deg);
    opacity: 1;
}
}body {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: Lato, sans-serif;
}
.home-container {
    margin: 10rem auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%}
.container-mobile {
    margin: 2rem auto;
    display: block;
    justify-content: space-between;
    width: 90%}
.container-tablet {
    margin: 2rem auto;
    display: flex;
    justify-content: space-between;
    width: 90%}
.left, .right {
    width: 44%}
.img-section {
    display: flex;
    align-items: center;
    width: 46%}
.img-section-mobile {
    display: flex;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}
.img-section-tablet {
    display: flex;
    align-items: center;
    width: 50%}
.info-section {
    display: flex;
    align-items: center;
    width: 34%;
    padding: 2rem 1rem;
}
.info-section-mobile {
    display: flex;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}
.info-section-tablet {
    display: flex;
    align-items: center;
    width: 49%}
::ng-deep.mat-card:not([class*=mat-elevation-z]) {
    box-shadow: 0 0 0 0 rgb(0 0 0 / .2), 0 0 0 0 rgb(0 0 0 / .14), 0 0 0 0 rgb(0 0 0 / .12);
}
.section-img {
    width: 100%}
.gradient-text {
    background: linear-gradient(90deg, #0100FF .01%, #BD00C1 100.93%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    font-family: Lato-Black, sans-serif;
    font-size: 1.7vw !important;
    font-style: normal;
    font-weight: 700;
    line-height: 2.2vw;
    letter-spacing: .6px;
}
.large-text-mobile {
    font-family: Lato-Black, sans-serif;
    max-width: 100%;
    color: #1D1D1F;
    text-align: left;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 4.375rem;
    letter-spacing: .075rem;
    margin: 0 0 2rem 0;
}
.large-text-tablet {
    font-family: Lato-Black, sans-serif;
    max-width: 100%;
    color: #1D1D1F;
    text-align: left;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 4.375rem;
    letter-spacing: .075rem;
    margin: 0 0 2rem 0;
}
.large-text {
    max-width: 90%;
    color: #1D1D1F;
    text-align: left;
    font-family: Lato-Black, sans-serif;
    font-size: 3vw;
    font-style: normal;
    font-weight: 700;
    line-height: 3vw;
    letter-spacing: .075rem;
    margin: 1rem 0 1rem 0;
}
.large-text-heading {
    max-width: 90%;
    color: #1D1D1F;
    text-align: left;
    font-family: Lato-Black, sans-serif;
    font-size: 4vw;
    font-style: normal;
    font-weight: 700;
    line-height: 4vw;
    letter-spacing: .075rem;
    margin: 1rem 0 1rem 0;
}
.data-info a {
    color: #000;
     font-weight:  500;
     text-decoration:  underline;
}
.data-info {
    color: #4E4E6F;
    font-family: Lato, sans-serif;
    font-size: 0.94vw;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4vw;
    letter-spacing: .4px;
    width: 80%}
::ng-deep .mat-card:not([class*=mat-elevation-z]) {
    box-shadow: 0 0 #0003, 0 0 #00000024, 0 0 #0000001f!important;
}
.section3 {
    width: 100%;
    margin: 2rem auto 0rem auto;
    height: 65rem;
    background-color: #FBFBFF;
    padding: 2rem 0rem;
}
.mini-slider-container {
    width: 100%;
    /* max-width: 100%; */
    margin: auto;
    height: 100%}
.slider-container {
    width: 100%;
    max-width: 80%;
    margin: auto;
    height: 100%}
.perfect-slider-container {
        width: 100%;
        max-width: 80%;
        margin: auto;
        height: 100%}
    
        .perfect-slider-overlay {
            display: block;
         
            height: 530px; /* Maintain aspect ratio */
            
        }       
.slider-container-mobile {
    width: 100%;
    max-width: 90%;
    margin: auto;
}
.slider-container-tablet {
    width: 100%;
    max-width: 90%;
    margin: auto;
}
.slider-section-heading {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0rem;
}
.slider-section-heading-mobile {
    display: flex;
    justify-content: space-between;
    white-space: normal;
    margin: 2rem 0rem;
}
.slider-section-heading-tablet {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0rem;
}
.title {
    flex: 1;
    font-family: Lato, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 2rem;
    letter-spacing: .02em;
    text-align: center;
    padding: 1rem 0;
    color: #fff;
}
.mini-title {
    display: flex;
    flex-direction: column; /* Stack text if needed */
    justify-content: center; /* Center text vertically */
    flex-grow: 1;
    font-family: Lato-Black, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2rem;
    letter-spacing: .02em;
    text-align: left;
    padding: 1rem 1rem;
    color: #000;
}
.title-tablet {
    flex: 1;
    font-family: Lato, sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 4rem;
    letter-spacing: .02em;
    text-align: left;
}
.title-mobile {
    flex: 1;
    font-family: Lato, sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 2.5rem;
    letter-spacing: .02em;
    text-align: left;
}
.title-gradiant {
    background: linear-gradient(90deg, #0100FF .01%, #BD00C1 100.93%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    flex: 1;
    font-family: Lato, sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 4rem;
    letter-spacing: .02em;
    text-align: left;
}
.spacer {
    flex: 1 1 auto;
}
.mini-slider {
    overflow: hidden;
    width: 100%;
    height: 100%}
.slider {
    overflow: hidden;
    width: 100%;
    height: 100%}

    .perfect-slider {
        overflow: hidden;
        width: 100%;
        height: 100%}
        .slider-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%}
.product-card {
    height: 80%;
    min-width: 27%;
    max-width: 27%;
    flex: 1 1 auto;
    margin: 2rem;
    border-radius: 0.6rem!important;
    background-color: #fbfbff!important;
}
.product-card-mobile {
    height: 335px;
    min-width: 60%;
    flex: 1 1 auto;
    margin: 2rem;
    border-radius: .6rem;
}
.product-card-tablet {
    height: 420px;
    min-width: 38%;
    flex: 1 1 auto;
    margin: 2rem;
    border-radius: .6rem;
}
.product-image {
    height: 380px;
}
.product-name {
    display: flex;
    margin: 2rem 1rem 0rem 0rem!important;
}
.product-name mat-card-title {
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 3.6rem;
    letter-spacing: .02em;
    text-align: left;
}
.product-name-mobile mat-card-title {
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 2.6rem;
    letter-spacing: .02em;
    text-align: left;
}
.product-name-tablet mat-card-title {
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 3.6rem;
    letter-spacing: .02em;
    text-align: left;
}
.product-description {
    display: flex;
    margin: 0rem 2rem;
    z-index: 3!important;
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6rem;
    letter-spacing: .02em;
    text-align: left;
}
.product-description mat-card-title {
    z-index: 111;
    color: #fff;
}
::ng-deep .mat-card-header-text {
    z-index: 3!important;
}
.slider-overlay {
    border-radius: .6rem .6rem;
    box-shadow: 0 4px 12px 3px rgb(0 0 0 / .15);
    max-width: 250px;
    max-height: 350px;
}
.image-link {
    display: flex;
    align-items: center; /* Center the items vertically */
    text-decoration: none; /* Remove underline from the link */
}
.mini-slider-overlay {
    border-radius: .6rem .6rem;
    box-shadow: 0 4px 12px 3px rgb(0 0 0 / .15);
    width: 100%; /* Adjust width as needed */
    max-width: 300px; /* Set a max-width for the image */
    margin-right: 20px; /* Space between image and text */
}
.slider-title {
    padding: 10px 0 0 0;
    font-family: Lato, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: .02em;
    text-align: center;
    color: #1D1D1F;
    margin: 0rem 0;
    position: absolute;
    bottom: 1rem;
    left: 0;
    width: 100%;
    text-align: center;
}
.slider-container {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}
.mini-slider-container {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}
.perfect-slider-container {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}
.slider-section {
    width: 100%;
    margin: 2rem auto 0rem;
    height: auto;
    background-color: #3936DD;
    padding: 2rem 0rem;
    color:#fff;
}
.mini-slider-section {
    width: 100%;
    margin: 0rem auto 0rem;
    height: auto;
    background-color: #F6F6FF;
    padding: 1rem 0rem;
    
}
.perfect-slider-section {
    width: 100%;
    margin: 0rem auto 0rem;
    height: auto;
    background-color:#FFF;
    padding: 2rem 0rem;
    color: #2F1C70;
}
.section-title {
    width: 100%;
    flex: 1;
    font-family: Lato, sans-serif;
    font-size: 2vw;
    /* font-weight: 700; */
    line-height: 2vw;
    letter-spacing: .02em;
    text-align: left;
}
.slider {
    display: flex;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.perfect-slider {
    display: flex;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.slider-items {
    display: flex;
    align-items: end;
}
.perfect-slider-items {
    display: flex;
    align-items: end;
}
.mini-slider-items {
    display: flex;
    align-items: end;
}
.slider-item {
    flex: 0 0 calc(100% / 5.5);
    margin-right: 10px;
    scroll-snap-align: start;
    padding: 1rem;
}
.perfect-slider-item {
    /* flex: 0 0 calc(100% / 9); */
    margin-right: 10px;
    scroll-snap-align: start;
    padding: 1rem;
}
.mini-slider-item {
    /* flex: 0 0 calc(100% / 5.5); */
    margin-right: 10px;
    scroll-snap-align: start;
    padding: 1rem;
    /* min-width: 250px; */
    border: 1px solid;
    border-radius: 10px;
    border-color: #DEDEFF;
}

.slider-item img {
    width: 95%;
    height: auto;
}
.mini-slider-item img {
    width: auto;
    /* max-width: 45%; */
    height: 150px;
}
.slider-controls {
    display: flex;
    align-items: end;
}
.perfect-slider-controls {
    display: flex;
    align-items: end;
}
.slider-control {
    cursor: pointer;
    border-radius: 50%;
    margin: 0 5px;
    font-size: 2.4rem;
    padding: 1rem 1rem 0.2rem 1.5rem;
    align-content: center;
    opacity: 0.5;
    background: #DBDCE4;
}
.slider-control:hover {
   
    background: #cacbd3;
}
.perfect-slider-control {
    cursor: pointer;
    border-radius: 50%;
    margin: 0 5px;
    font-size: 2.4rem;
    padding: 1rem 1rem 0.2rem 1.5rem;
    align-content: center;
    opacity: 0.5;
    background: #DBDCE4;
}

.testimonial-slider-control {
    cursor: pointer;
    border-radius: 50%;
    margin: 0 5px;
    font-size: 2.4rem;
    padding: 1rem 1rem 0.2rem 1.5rem;
    align-content: center;
    opacity: 50%;
    background: #DBDCE4 !important;

}
.testimonial-slider-control:hover {
    cursor: pointer;
    border-radius: 50%;
  
    font-size: 2.4rem;
  
    align-content: center;
    background: #DBDCE4 !important;
    color: #363B64 !important;
    opacity: 1 !important;


}
.perfect-slider-control:hover {
   
    background: #cacbd3;
}

.animate__fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 2s;
}
.req-demo-home-section {
    font-family: Lato, sans-serif;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    background-image: linear-gradient(180deg, #ECECFF 15%, #ecd9c6 100%);
    padding: 0rem 0 4rem 0;
}
.req-demo-home-section h2 {
    font-size: 3.4rem;
    width: 100%;
    font-family: Lato, sans-serif;
    font-weight: 700;
}
.req-demo-home-section h3 {
    font-size: 1.6rem;
    width: 80%;
    font-family: Lato, sans-serif;
}
.header-banner-section {
    width: 100%;
    padding: 4rem 10%;
    display: flex;
    align-items: center;
    background:  #F6F6FF;
    margin-top: 2rem;
    margin-left: 0px!important;
    margin-right: 0px!important;
    height: auto;
    min-height:40vh;
}
.header-banner-section img {
    width: 100%}
.banner-video {
    /* position: absolute;
    top: 29%;
    left: 10%; */
    display: flex;
    /* width: 65.5%;
    height: 44%; */
    object-fit: contain;
}
.try-free-btn {
    font-family:  Lato-Black;
     font-weight:  700;
     font-size:  22px;
     line-height:  24px;
     color: #fff;
    padding: 1.5rem;
    border:  1px solid #FFFFFF;
    border-radius: .6rem;
    margin: 2rem 2rem;
    text-decoration: none;
    min-width: 160px;
}

.try-free-btn:visited {
    color: #fff;
    text-decoration: none;
}
.try-free-btn:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.try-free-btn:active {
    color: #fff;
    text-decoration: none;
}
.hamburger-menu {
    display: none;
}
.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #606;
    color: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: 20px;
    z-index: 1000;
}
.perfect-des {
 
    margin-top: 5px; /* Space between title and description */
    position: absolute; /* Position title and description over the image */
    top: 14%; /* Adjust as needed */
    /* left: 2.3rem; Adjust as needed */
    /* Change text color for visibility */
   
    padding: 5px 20px 5px 20px; /* Space around the text */
    border-radius: 5px; 
    color: #FFF;
font-family: Lato;
font-size: 3.5rem;
line-height: 3.8rem;
font-style: normal;
width: 95%;
}

.side-menu.active {
    transform: translateX(0);
}
.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.auth-buttons {
    display: flex;
    justify-content: start;
    width: 100%}
.auth-buttons a {
    color: #fff;
    text-decoration: none;
}
.login-btn, .signup-btn {
    background: none;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
}
.login-btn {
    border-radius: 5px;
}
.signup-btn {
    border-radius: 5px;
    margin: 0 5%}
#myImage:hover{
    cursor: pointer;

}
.close-menu {
    font-size: 24px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
}
.menu-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: left;
}
.menu-list li {
    margin: 1rem 0;
}
.menu-list a {
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    display: block;
}
.menu-list a:link {
    color: #fff;
    text-decoration: none;
    font-size: 24px;
}
.menu-list a:visited {
    color: #fff;
    text-decoration: none;
    font-size: 24px;
}
.menu-list a:active {
    color: #fff;
    text-decoration: none;
    font-size: 24px;
}
.menu-list a:hover {
    color: #fff;
    text-decoration: none;
    font-size: 24px;
}
.img-text .info-section {
    display: flex;
    padding-left: 6rem;
}
.iframe-book {
    width: 80%;
    height: 650px;
    padding: 1rem;
}
.flip-animation {
    animation: flip-animation 2s;
}
.text-sec-style {
    padding: 1rem 1rem;
}
@keyframes zoomOutIn {
    0% {
    transform: scale(.5);
}
50% {
    transform: scale(1);
}
100% {
    transform: scale(1);
}
}@keyframes slideInFromTop {
    0% {
    transform: translateY(-20vh);
    opacity: 0;
}
100% {
    transform: translateY(0);
    opacity: 1;
}
}ul.checkmark-list {
    list-style: none;
    padding-left: 0;
    text-align: left;
    font-family: Lato, sans-serif;
}
ul.checkmark-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 5px;
    font-family: Lato, sans-serif;
}
ul.checkmark-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: green;
    font-size: 1.2em;
    font-family: Lato, sans-serif;
}
@keyframes slideInRight {
    0% {
    transform: translateX(15vw);
    opacity: 0;
}
100% {
    transform: translateX(0);
    opacity: 1;
}
}@media only screen and (max-width:767px) {
    .home-container {
    margin: 2rem auto;
    display: block;
    justify-content: space-between;
    width: 90%
}
.img-section {
    display: flex;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    padding: 1rem 0;
}
.info-section {
    display: flex;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    padding: 0;
}
.large-text {
    font-family: Lato, sans-serif;
    max-width: 100%;
    color: #1D1D1F;
    text-align: left;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.8rem;
    letter-spacing: .075rem;
    margin: 1rem 0 2rem 0;
}
.slider-container {
    width: 100%;
    max-width: 90%;
    margin: auto;
}
.mini-slider-container {
    width: 100%;
    max-width: 90%;
    margin: auto;
}
.perfect-slider-container {
    width: 100%;
    max-width: 90%;
    margin: auto;
}
.slider-section-heading {
    display: flex;
    justify-content: space-between;
    white-space: normal;
    margin: 2rem 0rem;
}
.title {
    flex: 1;
    font-family: Lato, sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 2.5rem;
    letter-spacing: .02em;
    text-align: center;
}
.mini-title {
    display: inline;
    flex: 1;
    font-family: Lato-Black, sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 2.5rem;
    letter-spacing: .02em;
    text-align: left;
}
.product-card {
    height: 335px;
    min-width: 60%;
    flex: 1 1 auto;
    margin: 2rem;
    border-radius: .6rem;
}
.product-name mat-card-title {
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 2.6rem;
    letter-spacing: .02em;
    text-align: left;
}
.slider-item {
    flex: 0 0 calc(100% / 7.5);
    margin-right: 10px;
    scroll-snap-align: start;
    padding: 1rem;
}
.data-info {
    color: #4E4E6F;
    font-family: Lato, sans-serif;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6rem;
    letter-spacing: .4px;
    width: 100%}
.banner-video {
    position: absolute;
    top: 29%;
    left: 10%;
    display: flex;
    width: 66%;
    height: 44%;
    object-fit: contain;
}
.large-text-heading {
   
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.8rem;
    letter-spacing: .075rem;
    margin: 1rem 0 2rem 0;
}
.header-banner-section {
    width: 100%;
    padding: 2rem 10%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    background:  #F6F6FF;
    margin-top: 2rem;
    margin-left: 0px!important;
    margin-right: 0px!important;
    min-height: 70%;
    height: auto;
    
}
   .gradient-text{ background: linear-gradient(90deg, #0100FF .01%, #BD00C1 100.93%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    font-family: Lato-Black, sans-serif;
    font-size: 2.5rem !important;
    font-style: normal;
    font-weight: 700;
    line-height: 2.8rem;
    letter-spacing: .6px;
}
.img-text {
    display: flex;
    flex-direction: column-reverse;
}
.hamburger-menu {
    display: block;
    margin-right: 2rem;
    background: #fff0;
    border: none;
    font-size: 2.5rem;
    padding: 0;
    font-weight: 500;
}
.side-menu {
    display: block;
}
.req-demo-home-section h2 {
    font-size: 3.4rem;
    width: 100%;
    font-family: Lato, sans-serif;
    font-weight: 700;
    padding: 0 10%}
.req-demo-home-section h4 {
    font-size: 1.6rem;
    width: 85%;
    font-family: Lato, sans-serif;
    text-align: left;
    margin: 2.5rem;
}
.img-text .info-section {
    display: flex;
    padding-left: 0rem;
}
.iframe-book {
    width: 85%;
    height: 650px;
    padding: 0rem;
}
.text-sec-style {
    padding: 1rem 0rem!important;
}
.popup video {
   
    height: auto !important;
}
.try-free-btn {
    font-family:  Lato-Black;
     font-weight:  700;
     font-size:  22px;
     line-height:  24px;
     color: #fff;
    padding: 1.5rem;
    border:  1px solid #FFFFFF;
    border-radius: .6rem;
    margin: 2rem 2rem;
    text-decoration: none;
    min-width: 160px;
    display: block;
}
.perfect-slider-overlay {
    display: block;
 
    height: 450px; /* Maintain aspect ratio */
    
}       
.perfect-des {
 
    top: 14%; /* Adjust as needed */
   
}
.section-title {
   
    font-size: 1.8rem;
    /* font-weight: 700; */
    line-height: 2rem;
   
}
.subheading {
    font-size: 48px !important;
    padding: 1rem !important;
    line-height: 60px !important;
}
.testimonial-card {
    width: 95% !important;
}
}@media only screen and (min-width:768px) and (max-width:1023px) {
    .home-container {
    margin: 2rem auto;
    display: block;
    justify-content: space-between;
    width: 90%}
.img-section {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1rem;
}
.info-section {
    display: flex;
    align-items: center;
    width: 49%}
.large-text {
    font-family: Lato, sans-serif;
    max-width: 100%;
    color: #1D1D1F;
    text-align: left;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.8rem;
    letter-spacing: .075rem;
    margin: 1rem 0 2rem 0;
}
.slider-container {
    width: 100%;
    max-width: 90%;
    margin: auto;
}
.mini-slider-container {
    width: 100%;
    max-width: 90%;
    margin: auto;
}
.perfect-slider-container {
    width: 100%;
    max-width: 90%;
    margin: auto;
}


.slider-section-heading {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0rem;
}
.title {
    flex: 1;
    font-family: Lato, sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 4rem;
    letter-spacing: .02em;
    text-align: center;
}
.mini-title {
    flex: 1;
    font-family: Lato, sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 4rem;
    letter-spacing: .02em;
    text-align: left;
}
.product-card {
    height: 420px;
    min-width: 38%;
    flex: 1 1 auto;
    margin: 2rem;
    border-radius: .6rem;
}
.product-name mat-card-title {
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 3.6rem;
    letter-spacing: .02em;
    text-align: left;
}
.slider-item {
    flex: 0 0 calc(100% / 6);
    margin-right: 10px;
    scroll-snap-align: start;
    padding: 1rem;
}
.header-banner-section {
    width: 100%;
    padding: 2rem 5%;
    display: block;
    align-items: center;
    background:  #F6F6FF;
    margin-top: 2rem;
    margin-left: 0px!important;
    margin-right: 0px!important;
    min-height: 40vh;
    height: auto;
}
.banner-video {
    position: absolute;
    top: 29%;
    left: 10.8%;
    display: flex;
    width: 64.5%;
    height: 43%;
    object-fit: cover;
}
.img-text {
    display: flex;
    flex-direction: column-reverse;
}
.img-text .info-section {
    display: flex;
    padding-left: 0rem;
}
.iframe-book {
    width: 90%;
    height: 650px;
    padding: 0rem;
}
.text-sec-style {
    padding: 1rem 1rem!important;
}
.req-demo-home-section h4 {
    font-size: 1.6rem;
    width: 90%;
    font-family: Lato, sans-serif;
    text-align: left;
    margin: 2.5rem;
}
.hamburger-menu {
    display: block;
    margin-right: 0rem;
    background: #fff0;
    border: none;
    font-size: 2.5rem;
    padding: 0;
    font-weight: 500;
}
.gradient-text{ background: linear-gradient(90deg, #0100FF .01%, #BD00C1 100.93%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    font-family: Lato-Black, sans-serif;
    font-size: 2.5rem !important;
    font-style: normal;
    font-weight: 700;
    line-height: 2.8rem;
    letter-spacing: .6px;
}
.section-title {
   
    font-size: 1.8rem;
    /* font-weight: 700; */
    line-height: 2rem;
   
}
.subheading {
    font-size: 48px !important;
    padding: 1rem !important;
    line-height: 60px !important;
}
.testimonial-card {
    width: 47.5% !important;
}
}@media only screen and (min-width:768px) and (max-width:1023px) and (orientation:portrait) {
    .home-container {
    margin: 2rem auto;
    display: block;
    justify-content: space-between;
    width: 90%}
.img-section {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1rem;
}
.info-section {
    display: flex;
    align-items: center;
    width: 100%}
.large-text {
    font-family: Lato, sans-serif;
    max-width: 100%;
    color: #1D1D1F;
    text-align: left;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.8rem;
    letter-spacing: .075rem;
    margin: 1rem 0 2rem 0;
}
.slider-container {
    width: 100%;
    max-width: 90%;
    margin: auto;
}
.mini-slider-container {
    width: 100%;
    max-width: 90%;
    margin: auto;
}
.perfect-slider-container {
    width: 100%;
    max-width: 90%;
    margin: auto;
}
.slider-section-heading {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0rem;
}
.title {
    flex: 1;
    font-family: Lato, sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 4rem;
    letter-spacing: .02em;
    text-align: center;
    color:#fff;
}
.mini-title {
    flex: 1;
    font-family: Lato, sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 4rem;
    letter-spacing: .02em;
    text-align: left;
}
.product-card {
    height: 420px;
    min-width: 38%;
    flex: 1 1 auto;
    margin: 2rem;
    border-radius: .6rem;
}
.product-name mat-card-title {
    color: #fff;
    font-family: Lato, sans-serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 3.6rem;
    letter-spacing: .02em;
    text-align: left;
}
.slider-item {
    flex: 0 0 calc(100% / 6);
    margin-right: 10px;
    scroll-snap-align: start;
    padding: 1rem;
}
.header-banner-section {
    width: 100%;
    padding: 2rem 5%;
    display: block;
    align-items: center;
    background:  #F6F6FF;
    margin-top: 2rem;
    margin-left: 0px!important;
    margin-right: 0px!important;
    min-height: 40vh;
    height: auto;
}
.banner-video {
    position: absolute;
    top: 29%;
    left: 10.8%;
    display: flex;
    width: 64.5%;
    height: 43%;
    object-fit: cover;
}
.img-text {
    display: flex;
    flex-direction: column-reverse;
}
.img-text .info-section {
    display: flex;
    padding-left: 0rem;
}
.iframe-book {
    width: 90%;
    height: 650px;
    padding: 0rem;
}
.text-sec-style {
    padding: 1rem 1rem!important;
}
.req-demo-home-section h4 {
    font-size: 1.6rem;
    width: 90%;
    font-family: Lato, sans-serif;
    text-align: left;
    margin: 2.5rem;
}
.hamburger-menu {
    display: block;
    margin-right: 0rem;
    background: #fff0;
    border: none;
    font-size: 2.5rem;
    padding: 0;
    font-weight: 500;
}
.gradient-text{ background: linear-gradient(90deg, #0100FF .01%, #BD00C1 100.93%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff0;
    font-family: Lato-Black, sans-serif;
    font-size: 2.5rem !important;
    font-style: normal;
    font-weight: 700;
    line-height: 2.8rem;
    letter-spacing: .6px;
}
.section-title {
   
    font-size: 1.8rem;
    /* font-weight: 700; */
    line-height: 2rem;
   
}
.subheading {
    font-size: 48px !important;
    padding: 1rem !important;
    line-height: 60px !important;
}
.testimonial-card {
    width: 47.5% !important;
}
}


.popup {
    display: none; /* Hidden by default */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup video {
    max-width: 80%;
    max-height: 80%;
    width: 80%;
    height: 80%;
}

.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: #fff !important;
    font-size: 30px;
    cursor: pointer;
    opacity: 1 !important;
}
.web-link:link{
color: #4E4E6F;
text-decoration: none;
}
.web-link:hover{
    color: #4E4E6F;
    text-decoration: none;
}
.web-link:active{
    color: #4E4E6F;
    text-decoration: none;
    }
    .web-link:visited{
        color: #4E4E6F;
        text-decoration: none;
        }
        .web-link-white:link{
            color: #FFF;
            text-decoration: none;
            }
            .web-link-white:hover{
                color: #FFF;
                text-decoration: none;
            }
            .web-link-white:active{
                color: #FFF;
                text-decoration: none;
                }
                .web-link-white:visited{
                    color: #FFF;
                    text-decoration: none;
                    }

                    .web-link-black:link{
                        color: #1D1D1F;
                        text-decoration: none;
                        }
                        .web-link-black:hover{
                            color: #1D1D1F;
                            text-decoration: none;
                        }
                        .web-link-black:active{
                            color: #1D1D1F;
                            text-decoration: none;
                            }
                            .web-link-black:visited{
                                color: #1D1D1F;
                                text-decoration: none;
                                }