@font-face {
    font-family: "Mulish";
    src: url("../fonts/Mulish-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Mulish";
    src: url("../fonts/Mulish-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Jost";
    src: url("../fonts/Jost-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
.services-main-header{
    margin-top:3.4vw;
    text-align: center;
}
.services-description{
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.7vw;
}
.services-description-image{
    width: 100%;
}
.services-description-left-container{
    position: relative; 
}
.services-description-left-container-content{
    position: absolute; /* Allows the box to overlap on top */
    top: 5.5vw; /* Position from bottom */
    left: 5vw; /* Position from left */
    z-index: 1;
}
.services-description-content-header{
    color: #E1E2E5;
    font-size: 3.2vw;
    font-family: "Mulish", Arial, sans-serif;
    font-weight: 700;
    width: 36.5vw;
    line-height: 120%;
}
.services-description-content-text{
    color:#9B9DA0;
    width: 30vw;
    margin-top: 3.125vw;
}
.learn-more-container{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width:12.9vw;
    height:12.9vw;
    margin-top: -7vw;
    margin-bottom: 15vw;
}
.learn-more-arrow-down{
    position: absolute;
    top:43.7%;
    left: 43.7%;
    width:1.5vw
}
.learn-more-circle{
    position: absolute;
    top:1.45vw;
    left: 1.45vw;
    width:10vw;
    animation: rotating 15s linear infinite;
}
@keyframes rotating {
    from {
        transform: rotate(0turn);
    }
    to {
        transform: rotate(1turn);
    }
}
.services-container {
    margin-left: -1.35vw;
    position: relative; /* Ensures child elements respect z-index */
    margin-bottom: 10.5vw;

}

.product-container {
    position: sticky;
    top: 2.5vw;
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
    border-top: 0.13vw solid #E1E2E5;
    height: 39vw;
    width: 94.5%;
    display: grid;
    grid-template-columns: 31vw 27.7vw 27.7vw;
    gap: 4vw;
    padding-top: 4.5vw;
    padding-left: 2.7vw;
    padding-right: 2.7vw;
    z-index: 0; /* Start with all having 0 z-index */
    transition: z-index 0.3s ease-out;
    background-color: #F0F0F2;
}
.product-image-container{
    overflow: hidden;
    border-radius: 1.8vw;
    height: 34.7vw;
}
#product2 {
    z-index: 1;
}
#product3 {
    z-index: 2;
}
#product4 {
    z-index: 3;
}
#product5 {
    z-index: 4;
}
.product-image{
    width: 31vw;
}

.product-content-middle-first-header{
    color:#0F0F10;
    font-size: 1.4vw;
    font-family: "Mulish", Arial, sans-serif;
    font-weight: 500;
    margin-bottom: 3.4vw;
}
.product-content-right-header{
    color:#0F0F10;
    font-size: 1.25vw;
    font-family: "Jost", Arial, sans-serif;
    font-weight: 400;
    margin-bottom: 1.7vw;
}
.product-content-middle-second-header{
    color:#0F0F10;
    font-size: 1.25vw;
    font-family: "Jost", Arial, sans-serif;
    font-weight: 400;
    margin-top: 3.4vw;
    margin-bottom: 1.7vw;
}
.product-content-middle-list{
    list-style: none; /* Remove default bullets */
    padding: 0;
}
.product-content-middle-list-elem{
    display: flex;
    align-items: center;
    gap: 0.69vw; /* Space between bullet and text */
    margin-bottom: 0.69vw; /* Space between list items */
}
.custom-bullet {
    width: 0.34vw;  /* Custom width */
    height: 0.34vw; /* Custom height */
    background-color: #779FEE; /* Custom color */
    border-radius: 50%; /* Makes it circular */
    flex-shrink: 0;
}
.product-content-right-list{
    list-style: none; /* Remove default bullets */
    padding: 0;
}
.product-content-right-list-elem{
    display: flex;
    align-items: start;
    gap: 0.69vw; /* Space between bullet and text */
    margin-bottom: 2.4vw; /* Space between list items */
}
.custom-bullet-second {
    width: 2.5vw;  /* Custom width */
    height:0.07vw; /* Custom height */
    border-top: 0.07vw solid #779FEE;
    flex-shrink: 0;
    margin-top: 0.75vw;
}

.services-bottom-section-image{
    width:97vw;
   
}
.services-bottom-section-container{
    margin-bottom: 13.8vw;
    position: relative;
}
.services-bottom-section-right-container{
    position: absolute;
    width: 28vw;
    height:11.1vw;
    background-color: #0F0F10;
    border-radius: 1.4vw;
    top: 3.4vw;
    left: 65.5vw;
    z-index: 1;
    align-content: center;
}
.services-bottom-section-right-text{
    width: 24vw;
    margin: auto;
    margin-top: auto;
    color: #D2D4D9;
    
}
.services-bottom-section-left-container{
    height: 23vw;
    width:31.7vw;
    position: absolute;
    top: 17.3vw;
    left: 3.5vw;
    background: url('../images/Folder.svg') no-repeat center;
    background-size: cover;
    align-content: center;
}
.services-bottom-section-left-container-content{
    margin: auto;
    width: 26.6vw;
    height: 13.1vw;
    margin-top: 1vw;
}
.services-bottom-section-left-container-content-header{
    color:#0F0F10;
    font-size: 2vw;
    font-family: "Mulish", Arial, sans-serif;
    font-weight: 700;
}
.services-bottom-section-left-container-button{
    margin-top: 3.4vw;
    background-color: #0F0F10;
    border: solid;
    border-width: 0.13vw;
    border-color: #0F0F10;
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.5vw;
    border-radius: 0.9vw;
    height:3vw;
    padding: 1.7vw;
    padding-top: 0.9vw;
    padding-bottom: 0.8vw;
    line-height: 1vw;
    color:#F0F0F2;
}
.services-bottom-section-left-container-button > .angled-arrow
{
    width: 1vw;
    height: 1vw;
    content:url("../images/Angled_Arrow.svg");
}
.services-bottom-section-left-container-button:hover > .angled-arrow
{
    content:url("../images/Angled_Arrow_Black.svg");
}
.services-bottom-section-left-container-button:hover{
    background-color: transparent;
    color:#0F0F10;
}
.services-bottom-section-left-container-button-text{
    text-align: right;
    font-family: "Jost", Arial, sans-serif;
    font-weight: 500;
    font-size: 1vw;
}