@font-face {
            font-family: Poppins;
            src: url(./assets/product/fonts/Poppins-Bold.ttf) format('truetype');
        }
        @font-face {
            font-family: Poppins Light;
            src: url(./assets/product/fonts/Poppins-Light.ttf) format('truetype');
        }
        @font-face {
            font-family: Poppins Medium;
            src: url(./assets/product/fonts/Poppins-Medium.ttf) format('truetype');
        }
        @-webkit-keyframes float {
            0% {
                box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
                transform: translatey(0px);
            }
            50% {
                box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
                transform: translatey(-20px);
            }
            100% {
                box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
                transform: translatey(0px);
            }
        }
        @keyframes float {
            0% {
                box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
                transform: translatey(0px);
            }
            50% {
                box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
                transform: translatey(-20px);
            }
            100% {
                box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
                transform: translatey(0px);
            }
        }

        @media (max-width: 1920px){
          .beyond-static{
            width: 96vw;
          }
        }

    @media (max-width: 768px) {
        .interactive-discovery,
        .immersive-connection {
            display: flex;
            line-height: 4vh;
           
        }

        .interactive-discovery-description,
        .immersive-connection-description {
            margin-left: 0;
            font-size: 2.8vh; 
        }
    }








   /* table */

  .pricing-section {
    text-align: center;
    border-radius: 2vh;
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 5vh;
}

.pricing-section h1 {
    font-size: 3.5vmax;
    font-family: Poppins;
    letter-spacing: 1px;
    font-weight: 800;
    text-transform: capitalize;
    margin-top: 2vh;
}

.pricing-section h2 {
    font-size: 2.2vw;
    font-family: Poppins;
    color: white;
    margin-top: 5vh;
}

.pricing-table {
    width: 95%;
    background-color: black;
    color: white;
    border-radius: 2vh;
    padding: 1.5vh;
    margin: 0 auto;
}

.pricing-header, .pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5vh 0;
}

.pricing-header {
    font-weight: bold;
    background-color: #000;
    padding: 2vh 0;
    border-radius: 2vh;
}

.feature-title, .feature {
    flex: 1;
    text-align: left;
    padding-left: 1.5vh;
    font-size: 1.2vw;
}

.plan-title {
    flex: 1;
    background-color: #4d4d4d;
    padding: 1.5vh;
    border-radius: 2vh;
    color: #fff;
    margin: 0 0.5vh;
    font-size: 1.8vw;
    font-family: Poppins;
}

.cost {
    font-weight: bold;
    background-color: #4d4d4d;
    border-radius: 2vh;
    color: white;
    padding: 1vh 1.5vh;
    font-size: 1.8vw;
    margin: 0 0.5vh;
}

/* Centered price styling */
.price-center {
    flex: 2; /* Span across both columns */
    background-color: #4d4d4d;
    padding: 1.5vh;
    border-radius: 2vh;
    color: #fff;
    text-align: center;
    font-size: 1.8vw;
    font-family: Poppins;
    margin: 0 0.5vh;
}


.checkmark-wrapper {
    flex: 1;
    font-size: 1.8vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkmark-background {
    background-color: rgb(30, 31, 31);
    border-radius: 50%;
    padding: 0.4vw;
    width: 3.5vw;
    height: 3.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkmark {
    color: white;
    font-size: 1.4vw;
    line-height: 1;
}

.plan-version {
    flex: 1;
    font-size: 2.2vw;
    margin: 0 0.5vh;
    font-family: Poppins;
    color: white;
    font-weight: 300;
}

hr {
    border: 0;
    height: 1px;
    background-color: white;
    margin: 0;
}

.footer-separator {
    height: 2vh; /* Adjust height if necessary */
    color:black;
}

.footer-text {
    text-align: Right;
    font-size: 1.2vw;
    font-family: Poppins;
    color: white;
    margin-top: 3vh; /* Margin top for separation from the table */
    margin-right: 5vw;
}

/* General styles for larger screens */
@media (min-width: 769px) {
    .pricing-table {
        width:90%;
    }

    .pricing-section h2 {
        font-size: 2.2vw;
    }

    .feature-title{
        font-size: 2.2vw;
    }

    .feature{
        font-size: 1.2vw;
    }
    .plan-title, .cost {
        font-size: 1.8vw;
    }

    .price-center, .cost {
        font-size: 1.8vw;
    }

    .checkmark {
        font-size: 1.4vw;
    }

    .plan-version {
        font-size: 2.2vw;
    }

    .footer-text {
        font-size: 1.2vw;
    }
}

/* Styles for smaller screens */
@media (max-width: 768px) {
    .pricing-table {
        /* width:85%; */
    }

    .pricing-section h1 {
        font-size: 5vmax;
    }

    .pricing-section h2 {
        font-size: 3.8vw;
    }

    .feature-title {
        font-size: 4.2vw;
    }
    .feature{
        font-size: 3.2vw;
    }
    .plan-title, .cost {
        font-size: 3.8vw;
    }

    .price-center, .cost {
        font-size: 3.8vw;
    }

    .checkmark {
        font-size: 3.0vw;
    }

    .plan-version {
        font-size: 3.8vw;
    }

    .footer-text {
        font-size: 2.8vw;
        margin-top: 6vh; /* Increased top margin for smaller screens */
    }
}


.footer-separator1 {
    height: 6vh;
}


@media screen and (max-width: 600px) {
	.SecondSectionTitle{
	    font-size: 2.3rem !important;
	}

	.SecondSectionText{
	    font-size: 1.3rem !important;
	}

	.SecondSectionBoldText{
	    font-size: 1.5rem !important;
	}
	.feature{
		line-height:normal;
	}
	.gapAboveTables{
		margin-top:5vh;
	}
	.plan-title {
		padding:1vw;
	}
}