*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
    width: 100%; /* Ensure the body takes up the full width */
}
img {
    max-width: 100%;
    height: auto;
}

.feel {
    background: linear-gradient(180deg, #386bf6, #007cf0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.header-fastmodetext-txt {
    width: 100%;
}
.header-fastmodetext {
    width: 100%; /* Use a percentage of the parent width */
    max-width: 380px; /* Optional: limit the maximum width */
    margin: 0 auto;    /* Center the text container */
    text-align: left;  /* Align text inside the container to the left */
    position: relative;
    line-height: 110%;
    line-height: 110%;
    display: flex;
    align-items: flex-end;
    height: 92px;
    flex-shrink: 0;
}
.header-fastmode {
    
    width: 100%;
    display: flex;
    flex-direction: column; /* Or row, if appropriate */
    align-items: center;    /* Centers child elements horizontally */
    justify-content: center;
}

.blurheader-fastmode {
    width: 100%;
    position: fixed; /* Change this from absolute to fixed */
    margin: 0 !important;
    top: 0; /* Ensure it stays at the top */
    z-index: 1000; /* Optional: Ensure it stays above other elements */
    background: linear-gradient(180deg, #fff 10%, rgba(255, 255, 255, 0.75) 32.5%, rgba(255, 255, 255, 0.63) 43.75%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0));
    height: 20px;
}

.formattagtext ,.imready{
    position: relative;
    font-weight: 500;
}
.iwanttagtext {
    position: relative;
    font-weight: 500;
}
.formattag {
    width: 109px;
    position: relative;
    border-radius: 100px;
    background-color: #fff;
    border: 2px solid #1c1c1d;
    box-sizing: border-box;
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    color: #1c1c1d;
    font-family: Poppins;
    }    
.formatoptions {
    width: 100%; /* Use full width */
    max-width: 380px; /* Optional */
    border-radius: 12px;
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
}
.iwantitle {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 10px 10px 0px;
    z-index: 0;
}
.platformtitle {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 10px 10px 0px;
    z-index: 0;
}
.iwanttag {
    border-radius: 42px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
    color: #111;
}
.iwanttag1 {
    border-radius: 42px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
}
.iwanttag2 {
    border-radius: 100px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
}
.iwantoptionsrow1 {
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 12px 0px 0px;
    gap: 16px;
}
.iwantoptions {
    width: 380px;
    border-radius: 12px;
    background-color: #f0f0f0;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 16px;
    box-sizing: border-box;
    gap: 8px;
}
.iwantcontent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 1;
    text-align: center;
    font-size: 15px;
}
.iwantshadowsliderleft {
    width: 25px;
    position: absolute;
    margin: 0 !important;
    top: calc(50% - 34px);
    left: 0px;
    background: linear-gradient(270deg, rgba(240, 240, 240, 0), rgba(240, 240, 240, 0.5) 45%, rgba(240, 240, 240, 0.63) 56.25%, rgba(240, 240, 240, 0.75) 67.5%, #f0f0f0 90%);
    height: 102px;
    z-index: 2;
}
.iwantshadowsliderright {
    width: 25px;
    position: absolute;
    margin: 0 !important;
    top: calc(50% - 34px);
    right: 0px;
    background: linear-gradient(270deg, #f0f0f0 10%, rgba(240, 240, 240, 0.75) 32.5%, rgba(240, 240, 240, 0.63) 43.75%, rgba(240, 240, 240, 0.5) 55%, rgba(240, 240, 240, 0));
    height: 102px;
    z-index: 3;
}
.iwantfull {
    width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.excludingcontent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 1;
    text-align: center;
    font-size: 15px;
}
.excludingfull {
    width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.excludingtitle {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 10px 10px 0px;
    z-index: 0;
}
.excludingshadowsliderleft {
    width: 25px;
    position: absolute;
    margin: 0 !important;
    top: calc(50% - 34px);
    right: 0px;
    background: linear-gradient(270deg, #f0f0f0 10%, rgba(240, 240, 240, 0.75) 32.5%, rgba(240, 240, 240, 0.63) 43.75%, rgba(240, 240, 240, 0.5) 55%, rgba(240, 240, 240, 0));
    height: 102px;
    z-index: 2;
}
.iwantshadowsliderleft1 {
    width: 25px;
    position: absolute;
    margin: 0 !important;
    top: calc(50% - 34px);
    left: 0px;
    background: linear-gradient(270deg, rgba(240, 240, 240, 0), rgba(240, 240, 240, 0.5) 45%, rgba(240, 240, 240, 0.63) 56.25%, rgba(240, 240, 240, 0.75) 67.5%, #f0f0f0 90%);
    height: 102px;
    z-index: 3;
}
.touch {
    background: linear-gradient(270deg, #5822b4, #386bf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.your-personal-touch1 {
    line-height: 116%;
}
.your-personal-touch {
    margin: 0;
}
.more-details-mean {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: rgba(30, 30, 30, 0.8);
}
.detailboxtitletext {
    align-self: stretch;
    position: relative;
}
.detailboxtitle {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.detailboxiconframe {
    align-self: stretch;
    width: 24px;
    position: relative;
    max-height: 100%;
}
.detailboxicon {
    height: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.detailboxseparator-icon {
    width: 1px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 27px;
}
.detailboxrightpart {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}
.detailboxtext {
    width: 100%;
    min-height: 16px;
    max-height: 150px; /* You can increase this if needed */
    border: none;
    padding: 0px;
    line-height: 150%;
    resize: none; /* Prevent manual resizing */
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    overflow-y: auto; /* Let it scroll vertically once the max height is reached */
    color: transparent; /* Set text color to transparent */
    background: linear-gradient(270deg, #5822b4, #386bf6);
    -webkit-background-clip: text; /* Clip the background to the text */
    background-clip: text; /* Ensure compatibility with other browsers */
    box-sizing: border-box; /* Ensure padding is included in width/height */
    height: 20px; /* Automatically expand with content */
}

.detailboxtext:focus {
    outline: none;
}

.detailboxtext::placeholder {
    color: #989898;
    font-style: italic;
    font-size: 14px;
}
.detailboxtextcontainer {
    display: flex;
    flex-direction: column; /* Ensure vertical stacking */
    flex-grow: 1; /* Allow the container to grow */
    align-items: stretch; /* Ensure the textarea fills the container */
    padding: 0px 0px 0px 8px;
}
    .detailboxframe {
    width: 380px;
    border-radius: 9px;
    background-color: #fff;
    border: 2px solid #f0f0f0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 14px 13px;
    gap: 5px;
    font-size: 14px;
    }
    .detailbox {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    text-align: left;
    font-size: 30px;
    color: #1e1e1e;
    font-family: Poppins;
    }


.netflix-logo-icon-1 {
    width: 18px;
    position: relative;
    height: 30px;
    overflow: hidden;
    flex-shrink: 0;
}
.platformoptiontag {
    width: auto;
    border-radius: 100px;
    background-color: #fff;
    height: 45px;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
    box-sizing: border-box;
    mix-blend-mode: normal;
}


.amazon-prime-video-1-1-icon {
    width: 81.3px;
    position: relative;
    height: 25px;
    overflow: hidden;
    flex-shrink: 0;
}

.vector-icon {
    position: absolute;
    height: 92%;
    width: 51.54%;
    top: 8.13%;
    right: -0.16%;
    bottom: -0.13%;
    left: 48.62%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.group-icon {
    position: absolute;
    height: 100%;
    width: 38.72%;
    top: 0%;
    right: 61.28%;
    bottom: 0%;
    left: 0%;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.apple-tv-1 {
    width: 42.1px;
    position: relative;
    height: 20px;
    overflow: hidden;
    flex-shrink: 0;
}
.hbo-max-logo-1-1-icon {
    width: 73px;
    position: relative;
    height: 14px;
    overflow: hidden;
    flex-shrink: 0;
}
.disney-1-1-icon {
    width: 62.6px;
    position: relative;
    height: 34px;
    overflow: hidden;
    flex-shrink: 0;
}
.hulu-1-icon {
    width: 50px;
    position: relative;
    height: 16.5px;
    overflow: hidden;
    flex-shrink: 0;
}
.crunchyroll-1-1-icon {
    width: 70px;
    position: relative;
    height: 13px;
    overflow: hidden;
    flex-shrink: 0;
}
.platformoptionsrow1 {
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 16px;
    gap: 16px;
    overflow-y: hidden; /* Prevent horizontal scroll */
}
.platformoptions {
    align-self: stretch;
    border-radius: 12px;
    background-color: #f0f0f0;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 0px;
    overflow-y: hidden; /* Prevent horizontal scroll */
}
.platformcontent {
    align-self: stretch;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 1;
    overflow-y: hidden; /* Prevent horizontal scroll */
}
.platformshadowsliderleft {
    width: 17px;
    position: absolute;
    margin: 0 !important;
    top: calc(50% - 5px);
    left: 0px;
    background: linear-gradient(270deg, rgba(240, 240, 240, 0), rgba(240, 240, 240, 0.5) 45%, rgba(240, 240, 240, 0.63) 56.25%, rgba(240, 240, 240, 0.75) 67.5%, #f0f0f0 90%);
    height: 45px;
    z-index: 2;
}
.platformshadowsliderright {
    width: 17px;
    position: absolute;
    margin: 0 !important;
    top: calc(50% - 6px);
    right: 0px;
    background: linear-gradient(270deg, #f0f0f0 10%, rgba(240, 240, 240, 0.75) 32.5%, rgba(240, 240, 240, 0.63) 43.75%, rgba(240, 240, 240, 0.5) 55%, rgba(240, 240, 240, 0));
    height: 45px;
    z-index: 3;
}
.platform {
    width: 380px;
    height: 103px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.fastmainbody {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    text-align: left;
    color: #1e1e1e;
}
.body-fastmode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    text-align: center;
    font-size: 16px;
    color: #fff;
}
.fastmode {
    width: 100%; /* Make it full width */
    max-width: 768px; /* Optional: limit the maximum width */
    margin: 0 auto; /* Center the container */
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 50px 30px 25px;
    gap: 20px;
    z-index: 0;
}

.generatebutton-fastmode {
    width: 250px;
    border-radius: 11px;
    background: linear-gradient(270deg, #5822b4, #386bf6);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    box-sizing: border-box;
}
.bottom-fastmode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 30px 30px;
    z-index: 1;
    text-align: center;
    font-size: 20px;
    color: #fff;
}
.header-fastmode1 {
    width: auto;
    margin: 0 !important;
    position: absolute;
    top: 0px;
    left: calc(50% - 220px);
    background: linear-gradient(180deg, #fff 10%, rgba(255, 255, 255, 0.75) 32.5%, rgba(255, 255, 255, 0.63) 43.75%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0));
    height: auto;
    flex-shrink: 0;
    z-index: 2;
}
.fastmodepage {
    
    max-width: 768px; /* Adjust as needed */
    margin: 0 auto;
    width: 100%;
    position: relative;
    background-color: #fff;
    height: 956px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: left;
    font-size: 40px;
    color: #1e1e1e;
    font-family: Poppins;
}

.excludingtagtext {
    position: relative;
    font-weight: 500;
    display: flex;
    white-space: nowrap; /* Prevent text from wrapping */

}
.excludingtag {
    border-radius: 42px;
    background-color: #fff;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
    color: #111;
    white-space: nowrap; /* Prevent text from wrapping */
}

.excludingtag1 {
    border-radius: 42px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
}
.excludingoptionsrow1 {
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 12px 0px 0px;
    gap: 16px;
}
.excludingtag5 {
    border-radius: 100px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
}
.excludingoptions {
    width: 100%;
    position: relative;
    border-radius: 12px;
    background-color: #f0f0f0;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 16px;
    box-sizing: border-box;
    gap: 8px;
    text-align: center;
    font-size: 15px;
    color: #1e1e1e;
    font-family: Poppins;
}

/* Clicked styles */
.iwanttagclicked, .excludingtagclicked {
    position: relative;
    border-radius: 42px;
    background-color: #fff;
    /* Remove border */
    /* border: 2px solid #5822b4; */
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
    text-align: center;
    font-size: 15px;
    font-family: Poppins;
    
    /* Add box-shadow to simulate inside stroke */
    box-shadow: inset 0 0 0 2px #5822b4;
}


/* Text style changes when clicked */
.iwanttagclickedtext {
    font-weight: 500;
    background: linear-gradient(270deg, #5822b4, #386bf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.excludingtagclickedtext {
    position: relative; /* Make sure the pseudo-element is positioned correctly */
    font-weight: 500;
    background: linear-gradient(270deg, #5822b4, #386bf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.excludingtagclickedtext::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%; /* Position the line in the middle of the text */
    height: 1px; /* Thickness of the strikethrough */
    background-color: #5822b4; /* Color of the strikethrough */
}
.formattagtextclicked {
    width: 148px;
    flex: 1;
    position: relative;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    }
 .formattagclicked {
    width: 109px;
    position: relative;
    border-radius: 100px;
    border: 2px solid linear-gradient(180deg, #386bf6, #007cf0);
    border-color: linear-gradient(180deg, #386bf6, #007cf0);
    background: linear-gradient(180deg, #386bf6, #007cf0);
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-family: Poppins;
}
/* Simulate inside stroke using box-shadow */
.platformoptiontagclicked {
    width: auto;
    position: relative;
    border-radius: 100px;
    background-color: #fff;
    box-sizing: border-box;
    height: 45px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;
    mix-blend-mode: normal !important;
    /* Inside stroke effect */
    box-shadow: inset 0 0 0 3px #5822b4;
}


body, html {
    overflow-x: hidden; /* Disable horizontal scrolling */
    max-width: 768px; /* Set maximum width */
    margin: 0 auto; /* Center the page horizontally */
        flex-direction: column; /* Arrange content in a column */
    justify-content: flex-end; /* Align content to the bottom (flex-end) */
    min-height: 100vh; /* Ensure the body takes up at least the full height of the viewport */
}

.platformtitletext {
    position: relative;
    font-weight: 500;
}
.platformtitletextcont {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.location-icon {
    width: 18px;
    position: relative;
    height: 18px;
    overflow: hidden;
    flex-shrink: 0;
}
.datacountry {
    position: relative;
    text-decoration: underline;
    font-weight: 500;
    font: 16px;
}
.datacountry:focus {
    outline: none; /* Remove the default outline when focused */
    border-color: #5822b4; /* Change border color when editable */
}
.location {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    font-size: 14px;
    color: #1c1c1d;
}
.platformtitle {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px 10px 10px 0px;
    box-sizing: border-box;
    text-align: left;
    font-size: 16px;
    color: #1e1e1e;
    font-family: Poppins;
}










.aicon-04 {
    width: 24px;
    position: relative;
    height: 24px;
}
.header-results-fastmodetext {
    width: 342px;
    height: 102px;
    position: relative;
    line-height: 107%;
    display: flex;
    background: linear-gradient(270deg, #5822b4, #386bf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    align-items: flex-end;
    flex-shrink: 0;
}
.header-results-fastmode {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
}
.tv-show-label , .rec1_cardformattext .rec2_cardformattext, .rec3_cardformattext {
    position: relative;
    line-height: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.type-and-main-title {
    width: 161.5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.seasons , .rec1_cardepisodestext , .rec2_cardepisodestext, .rec3_cardepisodestext, .rec1_cardseasonstext, .rec2_cardseasonstext, .rec3_cardseasonstext {
    position: relative;
    line-height: 17px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seasons-and-episodes {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.duration {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.main-info-container {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.divider1 {
    align-self: stretch;
    position: relative;
    border-top: 1px solid #f0f0f0;
    box-sizing: border-box;
    height: 1px;
}
.card-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    font-size: 10px;
}
.because-you-had-container .rec1_carddescriptiontext, .rec2_carddescriptiontext, .rec3_carddescriptiontext{
    width: 333px;
    position: relative;
    line-height: 22px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.description {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.platformtext-txt , .rec1_platformtext, .rec2_platformtext, .rec3_platformtext{
    width: 100%;
}
.platformtext {
    width: 332px;
    position: relative;
    line-height: 22px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.resultplatform {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.descriptiontagtext, .trailerlink1 ,.trailerlink2,.trailerlink3, .rec1_tagtext, .rec1_tagtext2, .rec1_tagtext3, .rec1_tagtext, .rec1_tagtext2, .rec1_tagtext3,
.rec2_tagtext, .rec2_tagtext2, .rec2_tagtext3, .rec3_tagtext, .rec3_tagtext2, .rec3_tagtext3 {
    position: relative;
    font-weight: 500;
}
.descriptiontag {
    border-radius: 62px;
    border: 1px solid #797979;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 6px 9px;
}
.tags {
    overflow-x: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0px 7.5px 0px 0px;
    gap: 4px;
    text-align: center;
    font-size: 11px;
    color: #797979;
}
.mood-platform-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.cta-youtube {
    width: 167px;
    border-radius: 7px;
    background-color: #1c1c1d;
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    box-sizing: border-box;
}
.navigation-close {
    width: 24px;
    position: relative;
    height: 24px;
    object-fit: cover;
}
.navigation-close-parent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}
.cta-skip {
    height: 48px;
    border-radius: 7px;
    background-color: #fff;
    border: 2px solid #1c1c1d;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    color: #1c1c1d;
    box-sizing: border-box;
}
.ctas {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 13px;
    text-align: center;
    color: #fff;
}
.resultcard-bottom {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
}
.result-card {
    width: 100%;
    max-width: 380px; /* Optional */
    border-radius: 11px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 24px;
    box-sizing: border-box;
    gap: 16px;
}
.durationtext1 , .rec1_carddurationtext, .rec2_carddurationtext, .rec3_carddurationtext{
    position: relative;
    line-height: 17px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.results-fastmainbody {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}
.body-results-fastmode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
}
.results-fastmode {
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 76px 30px 25px;
    gap: 32px;
}
.header-fastmode {
    width: auto;
    height: auto;
    flex-shrink: 0;
}
.results {
    display: none; /* Hidden by default */
    width: 100%;
    position: relative;
    background-color: #f0f0f0;
    height: 100%;
    overflow-y: auto;
    /* Flexbox properties */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    font-size: 30px;
    color: #1c1c1d;
    font-family: Poppins;
    overflow-x: hidden; /* Disable horizontal scrolling */
}


.results.visible {
    display: flex; /* or block */
    display: none;
    width: 100%;
    position: relative;
    background-color: #f0f0f0;
    height: 1602px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    font-size: 30px;
    color: #1c1c1d;
    font-family: Poppins;
}



.title, .rec1_cardcontenttitletext, .rec2_cardcontenttitletext, .rec3_cardcontenttitletext {
    align-self: stretch;
    position: relative;
    font-size: 20px;
    line-height: 116%;
    color: #1e1e1e;
}
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.edit-your-searchtitle {
  	width: 380px;
  	position: relative;
  	line-height: 114%;
  	font-weight: 600;
  	display: flex;
  	align-items: flex-end;
  	height: 46px;
  	flex-shrink: 0;
}
.edit-your-searchdescription {
  	width: 380px;
  	position: relative;
  	font-size: 14px;
  	line-height: 131%;
  	display: inline-block;
}
.container {
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: flex-start;
  	gap: 8px;
}
.aicon-30 {
  	width: 24px;
  	position: relative;
  	height: 24px;
}
.start-a-new {
  	position: relative;
  	font-weight: 500;
}
.aicon-30-parent {
  	display: flex;
  	flex-direction: row;
  	align-items: center;
  	justify-content: flex-end;
  	gap: 4px;
}
.cta-new-search {
  	width: 380px;
  	border-radius: 7px;
  	background: linear-gradient(270deg, #5822b4, #386bf6);
  	height: 48px;
  	display: flex;
  	flex-direction: row;
  	align-items: center;
  	justify-content: center;
  	padding: 12px 24px;
  	box-sizing: border-box;
  	max-width: 380px;
}
.or {
  	width: 380px;
  	position: relative;
  	font-size: 12px;
  	line-height: 131%;
  	font-weight: 500;
  	color: #6e6e6e;
  	display: inline-block;
}
.cta-edit-your-search {
  	width: 380px;
  	border-radius: 7px;
  	background-color: #1c1c1d;
  	height: 48px;
  	display: flex;
  	flex-direction: row;
  	align-items: center;
  	justify-content: center;
  	padding: 12px 24px;
  	box-sizing: border-box;
  	max-width: 380px;
}
.cta-container {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: flex-start;
  	gap: 14px;
  	text-align: center;
  	font-size: 14px;
  	color: #fff;
}
.edit-or-new-search {
  	position: relative;
  	width: 100%;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: flex-start;
  	padding: 40px 0px;
  	box-sizing: border-box;
  	gap: 32px;
  	text-align: left;
  	font-size: 20px;
  	color: #1c1c1d;
  	font-family: Poppins;
}

.feedbacktitle {
    width: 342px;
    position: relative;
    line-height: 107%;
    display: flex;
    align-items: flex-end;
}
.edit-your-searchdescription-container {
    width: 380px;
    position: relative;
    font-size: 14px;
    line-height: 131%;
    display: inline-block;
}
.feedbacksectionconteiner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
.love-icon {
    width: 134.9px;
    position: relative;
    height: 130px;
}
.loving-them {
    align-self: stretch;
    position: relative;
    font-weight: 600;
}
.loving-it {
    width: 134.9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.not-quite-child {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 121.87px;
    background-color: #fff;
    width: 134.9px;
    height: 130px;
}
.icbaseline-close-icon {
    position: absolute;
    top: 23px;
    left: 25.88px;
    width: 84px;
    height: 84px;
    overflow: hidden;
}
.feedbackoptions {
    width: 380px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 70px;
    text-align: center;
    font-size: 14px;
}
.feedback-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 0px 56px;
    box-sizing: border-box;
    gap: 32px;
    text-align: left;
    font-size: 30px;
    color: #1c1c1d;
    font-family: Poppins;
}



.dividerbottompanel {
    width: 100%;
    position: relative;
    border-top: 3px solid #fff;
    box-sizing: border-box;
    height: 3px;
}

.snackbarfeedbackicon {
    width: 24px;
    position: relative;
    height: 24px;
}
.snackbaricon {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.snackbardivider-icon {
    width: 1px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    height: 27px;
}
.snackbarmessagetext {
    position: relative;
    line-height: 17px;
    font-weight: 600;
    background: linear-gradient(270deg, #5822b4, #386bf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-height: 84px;
}
.snackbarmessagecontainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 0px 0px 8px;
}
.tyforyourfeedbacksnackbar {
    display: none;
    position: relative;
    border-radius: 10px;
    background-color: #fff;
    width: 264px;
    
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 7px 13px;
    box-sizing: border-box;
    gap: 5px;
    text-align: left;
    font-size: 12px;
    font-family: Poppins;
}


body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
}
body {
    display: flex;               /* Enable flexbox */
    justify-content: center;      /* Horizontally center the content */
    align-items: center;          /* Vertically center the content */
    min-height: 100vh;            /* Ensure the body takes up the full height of the viewport */
    margin: 0;                    /* Remove any default margins */
    font-family: Poppins, sans-serif;  /* Optional: Set a default font */
}