Adiventure Project

PROJECT TITLE :- ADIVENTURE-A tour website
LEADER :-PATEL ZEEL SURESHBHAI , Enrollment no:- 231200106756, Phone

no:- 6352464846
MEMBER:- Patel mehil sanjaykumar , Enrollment no :- 231200103708

MEMBER 2:- Patel yug dharmeshbhai, Enrollment no:- 236170316100
CODE HTML😊:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AdiVenture</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
<script src="https://kit.fontawesome.com/2fed289581.js" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/033a0f19be.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="overlay-content">
<h1>Welcome to AdiVenture</h1>
<p> EXPERIENCE THE BEAUTY OF TRAVELING WITH US</p>
</div>
<div class="welcome">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"> <img class="welcome-img" src="images/bg-1.jpg"> </div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="event-highlight">
<p class="header-line"> Highlighted Events </p>

<p class="base-line"> Recommended camps by our Instructors </p>
</div>
<div class="event-card">
<div class="youtube-container">
<img class="event-card-img" src="images/image1.jpg">
</div>
</div>
<div class="youtube-videos">
<p class="header-line"> Experience yourself </p>
<p class="base-line"> Exclusive footage from our camps </p>
</div>
<div class="event-card">
<div class="youtube-container">
<iframe class="youtube-video" width="350" height="200"

src="https://www.youtube.com/embed/NJ8PPzIbA5s?si=zzySvkCCMK5PY5R-" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

src="https://www.youtube.com/embed/75dhYMxUAU4?si=MrjED4-kHi2LWcDB" title="YouTube
video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;

src="https://www.youtube.com/embed/QkIROWm41r4?si=FJKxI5VA5FhTxNc3" title="YouTube video

src="https://www.youtube.com/embed/Jsy1jHU2HLo?si=3UrvOprUjDbN1GIg" title="YouTube video

src="https://www.youtube.com/embed/xXG13E3HiMI?si=b44BJCcu21EvL0sg" title="YouTube video
</div>
<div class="youtube-videos">
<p class="header-line"> Why people ❤️ Invincible </p>
<p class="base-line"> Experience the best with us </p>
</div>
<div class="review-cards">
<div class="card-review">
<div class="bg">
<p class="te-review"> Zeel <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i> </p>
<p class="te-review">This trekking organization is excellent. Their costs are minimal due to their
NGO's non-profit efforts.
You can have the experience of trekking at the lowest cost with basic amenities and the best
available trek leaders. <br><br><br> </p> </div>
<div class="blob"></div>
</div>
<div class="bg">
<p class="te-review"> mehil <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

<p class="te-review">Best memories emerge from here! I have completed two winter treks,
Manali and Dalhousie from Invincible.
The services are exceptional when compared to other trekking organizations as I have been
with others also <br><br><br> </p> </div>
</div>
<div class="bg">
<p class="te-review"> yug <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
<p class="te-review"> My trekking trip to Manali was very memorable for me. During this trek, I
realized my strengths and weaknesses, and I learned many new things.
The accommodation was very good and clean, with great facilities and a clean environment.
<br><br><br> </p> </div>
</div>
</div>
<div class="card">
<p class="footer-small"> AdiVenture is not just a travel website; it's an invitation to explore the
world's most exciting destinations and embark on unforgettable adventures.
Whether you're an adrenaline junkie seeking extreme sports, a nature lover yearning for
wilderness expeditions, or a cultural enthusiast eager to immerse yourself in local traditions,
adiVenture.com has it all. </p>
</div>
<div class="social">
<div class="footer-links">
<span>Social</span>
<a class="social-link" href="#">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 461.001 461.001" xml:space="preserve"
fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier"
stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path
style="fill:#F61C0D;" d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728
c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137
C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-
3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-
4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"></path> </g>
</g></svg>
</a>
<svg fill="#000000" viewBox="0 0 512 512" id="icons" xmlns="http://www.w3.org/2000/svg"><g

id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-
linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path
d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-
24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-
.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-
35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-
70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-
35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-
1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-
.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-
38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-
52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131
.27C453.86,132.37,433.27,129.17,412.19,118.66Z"></path></g></svg>
</a>
<svg viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" fill="#000000"><g
id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-
linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path
d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0
C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379
C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379
C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988
55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813
1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576
C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575
64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452
63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257
C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963
C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965
C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051
232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432
216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489
62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587
85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901
C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489
C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472
157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427
193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
fill="#5865F2" fill-rule="nonzero"> </path> </g> </g></svg>
</a>
<svg fill="#000000" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"

class="icon"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier"
stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path
d="M488.1 414.7V303.4L300.9 428l83.6 55.8zm254.1 137.7v-79.8l-59.8 39.9zM512 64C264.6 64 64
264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm278 533c0 1.1-.1 2.1-.2 3.1 0
.4-.1.7-.2 1a14.16 14.16 0 0 1-.8 3.2c-.2.6-.4 1.2-.6 1.7-.2.4-.4.8-.5 1.2-.3.5-.5 1.1-.8 1.6-.2.4-.4.7-.7
1.1-.3.5-.7 1-1 1.5-.3.4-.5.7-.8 1-.4.4-.8.9-1.2 1.3-.3.3-.6.6-1 .9-.4.4-.9.8-1.4 1.1-.4.3-.7.6-1.1.8-.1.1-
.3.2-.4.3L525.2 786c-4 2.7-8.6 4-13.2 4-4.7 0-9.3-1.4-13.3-4L244.6 616.9c-.1-.1-.3-.2-.4-.3l-1.1-.8c-.5-
.4-.9-.7-1.3-1.1-.3-.3-.6-.6-1-.9-.4-.4-.8-.8-1.2-1.3a7 7 0 0 1-.8-1c-.4-.5-.7-1-1-1.5-.2-.4-.5-.7-.7-1.1-.3-
.5-.6-1.1-.8-1.6-.2-.4-.4-.8-.5-1.2-.2-.6-.4-1.2-.6-1.7-.1-.4-.3-.8-.4-1.2-.2-.7-.3-1.3-.4-2-.1-.3-.1-.7-.2-1-
.1-1-.2-2.1-.2-3.1V427.9c0-1 .1-2.1.2-3.1.1-.3.1-.7.2-1a14.16 14.16 0 0 1 .8-3.2c.2-.6.4-1.2.6-1.7.2-
.4.4-.8.5-1.2.2-.5.5-1.1.8-1.6.2-.4.4-.7.7-1.1.6-.9 1.2-1.7 1.8-2.5.4-.4.8-.9 1.2-1.3.3-.3.6-.6 1-.9.4-.4.9-
.8 1.3-1.1.4-.3.7-.6 1.1-.8.1-.1.3-.2.4-.3L498.7 239c8-5.3 18.5-5.3 26.5 0l254.1 169.1c.1.1.3.2.4.3l1.1.8
1.4 1.1c.3.3.6.6 1 .9.4.4.8.8 1.2 1.3.7.8 1.3 1.6 1.8 2.5.2.4.5.7.7 1.1.3.5.6 1 .8 1.6.2.4.4.8.5 1.2.2.6.4
1.2.6 1.7.1.4.3.8.4 1.2.2.7.3 1.3.4 2 .1.3.1.7.2 1 .1 1 .2 2.1.2 3.1V597zm-254.1 13.3v111.3L723.1 597l-
83.6-55.8zM281.8 472.6v79.8l59.8-39.9zM512 456.1l-84.5 56.4 84.5 56.4 84.5-56.4zM723.1
428L535.9 303.4v111.3l103.6 69.1zM384.5 541.2L300.9 597l187.2 124.6V610.3l-103.6-
69.1z"></path> </g></svg>
</a>
</div>
<p class="rights"> ALL RIGHTS ARE RESERVED TO ADIVENTURE </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
autoplay: {
delay: 2000,
},
});
var slideIndex = 0;
function autoSlide() {
swiper.slideTo(slideIndex);
slideIndex = (slideIndex + 1) % swiper.slides.length;
setInterval(autoSlide, 2000);
</script>
</body>
</html>
CSS CODE 😊:
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');
@import
url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300&family=Teko&display=swap');
*{
margin: 0%;
padding: 0%;
background-color: #e7dcdc;
font-family: 'Comfortaa', cursive;
/* font-family: 'Fira Sans', sans-serif; */
.swiper {
width: 100%;
height: 500px;
}
.swiper-slide {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.swiper-slide img {
object-fit: cover;
width: 100%;
height: 100%;
.mySwiper {
opacity: 0.6;
.overlay-content {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
}
.overlay-content h1{
color: black;
text-align: center;
padding: 20px;
.overlay-content p{
margin-top: 30px;
font-size: 70px;
padding: 20px;
.event-card-img{
margin-top: 50px;
margin-left: 50px;
margin-bottom: 20px;
width: 220px;
height: 350px;
border-radius: 7px;
.header-line{
margin: 40px;
font-size: 28px;
color: #c08f39;
font-weight: bold;
.base-line{
margin-top: -20px;
margin-left: 40px;
font-size: 20px;
font-family: 'Fira Sans', sans-serif;
.youtube-video{
margin-bottom: 40px;
margin-top: 40px;
margin-left: 40px;
margin-right: 20px;
border-radius: 12px;
.youtube-container {
margin-left: 30px;
margin-right: 30px;
width: 100%;
overflow-x: scroll;
white-space: nowrap;
.youtube-container::-webkit-scrollbar {
height: 9px;
width: 10px; /* Adjust scrollbar width as needed */
/* Style the scrollbar thumb (the visible part) */
.youtube-container::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5); /* Adjust the color and transparency as needed */
border-radius: 5px; /* Rounded corners for the scrollbar thumb */
}
.card-review {
margin: 60px;
position: relative;
width: 350px; /* Updated width to 350px */
height: 300px; /* Updated height to 300px */
z-index: 1111;
overflow: hidden;
display: flex;
flex-direction: column;
.bg {
position: absolute;
top: 10px; /* Updated top to maintain proportion */
left: 10px; /* Updated left to maintain proportion */
width: 330px; /* Updated width to maintain proportion */
height: 280px; /* Updated height to maintain proportion */
z-index: 2;
backdrop-filter: blur(24px);
border-radius: 20px; /* Updated border radius to maintain proportion */
overflow: hidden;
outline: 4px solid white;
.blob {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 265px; /* Updated width to maintain proportion */
height: 265px; /* Updated height to maintain proportion */
border-radius: 50%;
background-color: #ff0000;
opacity: 1;
filter: blur(17px); /* Updated blur to maintain proportion */
animation: blob-bounce-350 5s infinite ease; /* Updated animation name */
@keyframes blob-bounce-350 {
0% {
transform: translate(-175px, -150px) translate3d(0, 0, 0);
25% {
transform: translate(-175px, -150px) translate3d(175px, 0, 0);
50% {
transform: translate(-175px, -150px) translate3d(175px, 150px, 0);
75% {
transform: translate(-175px, -150px) translate3d(0, 150px, 0);
100% {
transform: translate(-175px, -150px) translate3d(0, 0, 0);
}
}
.te-review{
padding: 20px;
.review-cards{
display: flex;
.footer{
width: 100%;
height: 400px;
background-color: #d3baba;
.card {
position: relative;
width: 100%;
height: 500px;
background: #e7dcdc;
display: flex;
font-size: 25px;
font-weight: bold;
cursor: pointer;
}
.card::before,
.card::after {
position: absolute;
content: "";
width: 20%;
height: 20%;
display: flex;
font-size: 25px;
font-weight: bold;
transition: all 0.5s;
.card::before {
top: 0;
right: 0;
border-radius: 0 15px 0 100%;
.card::after {
bottom: 0;
left: 0;
border-radius: 0 100% 0 15px;
.card:hover::before,
.card:hover:after {
width: 100%;
height: 100%;
transition: all 0.5s;
.card:hover:after {
content: " THANKS FOR VISITING ";
.footer-small{
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
.footer-links svg {
height: 25px;
.footer-links {
margin-left: 30px;
margin-top: 20px;
position: relative;
display: flex;
border-radius: 7px;
background: #e7e7e7;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
overflow: hidden;
height: 100px;
width: 300px;
.footer-links::before, .footer-links::after {
position: absolute;
display: flex;
width: 50%;
height: 100%;
transition: 0.25s linear;
z-index: 1;
.footer-links::before {
content: "";
left: 0;
justify-content: flex-end;
background-color: #4d60b6;
.footer-links::after {
content: "";
right: 0;
justify-content: flex-start;
background-color: #4453a6;
.footer-links:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.footer-links:hover span {
opacity: 0;
z-index: -3;
.footer-links:hover::before {
opacity: 0.5;
transform: translateY(-100%);
.footer-links:hover::after {
opacity: 0.5;
transform: translateY(100%);
.footer-links span {
position: absolute;
display: flex;
width: 100%;
height: 100%;
color: #caadad;
font-family: 'Fira Mono', monospace;
font-size: 24px;
font-weight: 700;
opacity: 1;
transition: opacity 0.25s;
z-index: 2;
}
.footer-links .social-link {
position: relative;
display: flex;
width: 25%;
height: 100%;
color: #d3baba;
font-size: 24px;
text-decoration: none;
transition: 0.25s;
.footer-links .social-link svg {
text-shadow: 1px 1px rgba(31, 74, 121, 0.7);
transform: scale(1);
.footer-links .social-link:hover {
background-color: rgba(249, 244, 255, 0.774);
animation: bounce_613 0.4s linear;
@keyframes bounce_613 {
40% {
transform: scale(1.4);
60% {
}
80% {
100% {
transform: scale(1);
.social {
margin-top: 10px;
width: 100%;
height: 150px;
display: flex;
border-radius: 4px;
.rights {
font-size: 30px;
margin-top: 15px;
padding: 25px;
background: transparent;
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-
horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
background: transparent;
}
THANKS FOR READING 😊>>>>>>

Adiventure Project

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Adiventure Project

Uploaded by

Copyright:

Available Formats

PROJECT TITLE :- ADIVENTURE-A tour website

LEADER :-PATEL ZEEL SURESHBHAI , Enrollment no:- 231200106756, Phone

MEMBER:- Patel mehil sanjaykumar , Enrollment no :- 231200103708

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>

<script src="https://kit.fontawesome.com/2fed289581.js" crossorigin="anonymous"></script>

<script src="https://kit.fontawesome.com/033a0f19be.js" crossorigin="anonymous"></script>

<p> EXPERIENCE THE BEAUTY OF TRAVELING WITH US</p>

<div class="swiper mySwiper">

<div class="swiper-slide"> <img class="welcome-img" src="images/bg-1.jpg"> </div>

<div class="swiper-slide"> <img class="welcome-img" src="images/bg-2.jpg"> </div>

<div class="swiper-slide"> <img class="welcome-img" src="images/bg-3.jpg"> </div>

<div class="swiper-slide"> <img class="welcome-img" src="images/bg-4.jpg"> </div>

<p class="header-line"> Highlighted Events </p>

<img class="event-card-img" src="images/image1.jpg">

<img class="event-card-img" src="images/image2.jpg">

<img class="event-card-img" src="images/image3.jpg">

<img class="event-card-img" src="images/image4.jpg">

<img class="event-card-img" src="images/image5.jpg">

<img class="event-card-img" src="images/image6.jpg">

<img class="event-card-img" src="images/image7.jpg">

<img class="event-card-img" src="images/image8.jpg">

<img class="event-card-img" src="images/image9.jpg">

<img class="event-card-img" src="images/image10.jpg">

<p class="base-line"> Exclusive footage from our camps </p>

<iframe class="youtube-video" width="350" height="200"

<iframe class="youtube-video" width="350" height="200"

<iframe class="youtube-video" width="350" height="200"

<iframe class="youtube-video" width="350" height="200"

<iframe class="youtube-video" width="350" height="200"

<p class="base-line"> Experience the best with us </p>

<p class="te-review"> Zeel <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

<p class="te-review"> mehil <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i

<a class="social-link" href="#">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"

<a class="social-link" href="#">

<svg fill="#000000" viewBox="0 0 512 512" id="icons" xmlns="http://www.w3.org/2000/svg"><g

<a class="social-link" href="#">

<svg viewBox="0 -28.5 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg"

<a class="social-link" href="#">

<svg fill="#000000" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"

<p class="rights"> ALL RIGHTS ARE RESERVED TO ADIVENTURE </p>

var swiper = new Swiper(".mySwiper", {

slideIndex = (slideIndex + 1) % swiper.slides.length;

font-family: 'Comfortaa', cursive;

/* font-family: 'Fira Sans', sans-serif; */

font-family: 'Fira Sans', sans-serif;

width: 10px; /* Adjust scrollbar width as needed */

/* Style the scrollbar thumb (the visible part) */

background-color: rgba(0, 0, 0, 0.5); /* Adjust the color and transparency as needed */

border-radius: 5px; /* Rounded corners for the scrollbar thumb */

width: 350px; /* Updated width to 350px */

height: 300px; /* Updated height to 300px */

top: 10px; /* Updated top to maintain proportion */

left: 10px; /* Updated left to maintain proportion */

width: 330px; /* Updated width to maintain proportion */

height: 280px; /* Updated height to maintain proportion */

border-radius: 20px; /* Updated border radius to maintain proportion */

outline: 4px solid white;

width: 265px; /* Updated width to maintain proportion */

height: 265px; /* Updated height to maintain proportion */

filter: blur(17px); /* Updated blur to maintain proportion */