{"id":69062,"date":"2024-07-12T10:55:18","date_gmt":"2024-07-12T07:25:18","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/carwash-landing-page-template-32k0\/"},"modified":"2024-07-12T10:55:18","modified_gmt":"2024-07-12T07:25:18","slug":"carwash-landing-page-template-32k0","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/carwash-landing-page-template-32k0\/","title":{"rendered":"\u0627\u0644\u06af\u0648\u06cc \u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u062f \u06a9\u0627\u0631\u0648\u0627\u0634 – \u0627\u0646\u062c\u0645\u0646 DEV"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u0647\u060c\u0645\u0646 \u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u062f \u06a9\u0627\u0631\u0648\u0627\u0634 \u0633\u0627\u062f\u0647 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645.<\/p>\n

\u0627\u0645\u06a9\u0627\u0646\u0627\u062a<\/p>\n

\u067e\u0627\u0633\u062e\u06af\u0648
\nTailwind css\u060c \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0633\u0631\u06cc\u0639.<\/p>\n

\u0633\u0627\u06cc\u062a \u0632\u0646\u062f\u0647<\/p>\n

\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0627\u06cc\u062a \u0632\u0646\u062f\u0647 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f: \u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u062f \u06a9\u0627\u0631\u0648\u0627\u0634<\/p>\n

\u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u062a<\/p>\n

\u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u0646<\/p>\n

\u062a\u0648\u06cc\u06cc\u062a\u0631github<\/p>\n

\u06a9\u062f \u0645\u0646\u0628\u0639<\/p>\n

lang=”en”><\/p>\n

charset=”UTF-8″>
\n name=”viewport” content=”width=device-width, initial-scale=1.0″><\/p>\n

Supreme car wash
\n name=”description” content=””><\/p>\n

name=”twitter:title” content=””>
\n name=”twitter:description” content=””><\/p>\n

rel=”shortcut icon” href=”.\/assets\/logo.png” type=”image\/x-icon”>
\n rel=”stylesheet” href=”https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;700&display=swap”><\/p>\n

rel=”stylesheet” href=”.\/css\/tailwind-build.css”>
\n rel=”stylesheet” href=”.\/css\/index.css”><\/p>\n

rel=”stylesheet” href=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap-icons\/1.11.3\/font\/bootstrap-icons.min.css” integrity=”sha512-dPXYcDub\/aeb08c63jRq\/k6GaKccl256JQy\/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67\/bbV8XaCQ==” crossorigin=”anonymous” referrerpolicy=”no-referrer” \/><\/p>\n

class=”tw-min-h-[100vh] tw-w-full tw-bg-[#ffffff]\n tw-flex tw-flex-col”><\/p>\n

class=”tw-w-full tw-justify-around
\n tw-bg-gray-200 tw-h-[80px]\n tw-flex tw-px-5
\n max-md:tw-hidden
\n tw-place-items-center
\n “>
\n class=”tw-text-3xl primary-text-color tw-font-semibold”>Supreme car wash<\/p>\n

class=”tw-flex tw-gap-4″>
\n class=”tw-w-[50px] tw-h-[50px]\n tw-flex tw-place-items-center
\n tw-place-content-center
\n tw-rounded-full tw-bg-secondary
\n tw-text-white
\n tw-p-3
\n “>
\n class=”bi bi-clock tw-text-3xl
\n tw-font-bold”><\/p>\n

class=”tw-text-xl tw-text-primary
\n tw-font-semibold”>Opening hours
\n class=”tw-text-gray-600″>Mon-Fri, 8:00 – 9:00<\/p>\n

class=”tw-flex tw-gap-4″>
\n class=”tw-w-[50px] tw-h-[50px]\n tw-flex tw-place-items-center
\n tw-place-content-center
\n tw-rounded-full tw-bg-secondary
\n tw-text-white
\n tw-p-3
\n “>
\n class=”bi bi-telephone tw-text-3xl
\n tw-font-bold”><\/p>\n

class=”tw-text-xl tw-text-primary
\n tw-font-semibold”>Call us
\n class=”tw-text-gray-600″>+1 222-222-222<\/p>\n

class=”tw-flex tw-gap-4″>
\n class=”tw-w-[50px] tw-h-[50px]\n tw-flex tw-place-items-center
\n tw-place-content-center
\n tw-rounded-full
\n tw-bg-secondary
\n tw-text-white
\n tw-p-3
\n “>
\n class=”bi bi-envelope tw-text-3xl
\n tw-font-bold”><\/p>\n

class=”tw-text-xl tw-text-primary
\n tw-font-semibold”>Email us
\n class=”tw-text-gray-600″>supreme@example.com<\/p>\n

class=”tw-flex tw-w-full tw-z-20
\n tw-h-[60px]\n md:tw-justify-around
\n tw-sticky tw-top-0 tw-px-[10%]\n tw-bg-white
\n max-md:tw-bg-primary
\n max-md:tw-mr-auto
\n tw-shadow-lg
\n “>
\n class=”tw-flex tw-w-fit”>
\n class=”tw-w-[50px] tw-p-1″>
\n src=”.\/assets\/logo.png”
\n alt=”supreme-car-wash logo” class=”tw-object-contain”><\/p>\n

class=”collapsable-header animated-collapse”
\n id=”collapsed-items”
\n ><\/p>\n

class=”tw-absolute tw-text-white tw-z-50
\n tw-right-3
\n tw-top-3
\n tw-text-2xl bi bi-list md:tw-hidden”
\n onclick=”toggleHeader()” aria-label=”menu” id=”collapse-btn”><\/p>\n

class=”tw-w-full tw-h-[650px] max-md:tw-h-[300px] tw-max-w-[100vw]\n tw-flex tw-flex-col tw-overflow-hidden”>
\n class=”slideshow-container tw-h-full
\n tw-w-full tw-flex tw-flex-col”><\/p>\n

class=”tw-relative tw-w-full tw-h-[650px] max-md:tw-h-full tw-overflow-clip”>
\n class=”slides fade”>
\n class=”numbertext”>1 \/ 3
\n src=”.\/assets\/images\/slideshow\/car-wash.jpg”
\n alt=”Delux car wash”
\n class=”tw-object-cover tw-w-full tw-h-full”>
\n class=”text”>Supreme car wash<\/p>\n

class=”slides fade”>
\n class=”numbertext”>2 \/ 3
\n src=”.\/assets\/images\/slideshow\/interior.jpg”
\n alt=”Car wash”
\n class=”tw-object-cover tw-w-full tw-h-full”>
\n class=”text”>Interior car wash<\/p>\n

class=”slides fade”>
\n class=”numbertext”>3 \/ 3
\n src=”.\/assets\/images\/slideshow\/sponge-car-wash.jpg”
\n alt=”supreme car wash”
\n class=”tw-object-cover tw-w-full tw-h-full”>
\n class=”text”>Best car wash<\/p>\n

class=”prev”>\u276e
\n class=”next”>\u276f<\/p>\n

class=”dots-container tw-z-10″>
\n class=”dot”>
\n class=”dot”>
\n class=”dot”><\/p>\n

class=”tw-w-full tw-flex
\n tw-flex-col
\n tw-place-content-center
\n tw-min-h-[60vh]\n tw-px-[20%]\n max-md:tw-px-[5%]\n tw-p-4
\n tw-gap-[10%]\n max-md:tw-gap-[4%]\n tw-place-items-center
\n tw-bg-[#fff]\n

“><\/p>\n

class=”tw-flex max-md:tw-flex-col tw-gap-[10%] tw-mt-[5%]\n max-md:tw-place-items-center
\n max-md:tw-gap-[4%] tw-w-full tw-place-content-center”>
\n class=”tw-w-[400px] tw-h-[350px]\n max-md:tw-w-[300px] max-md:tw-h-[300px]\n tw-flex tw-overflow-hidden
\n max-md:tw-mt-[5%]\n “>
\n src=”.\/assets\/images\/homepage\/garage.jpg”
\n alt=”engine” class=”tw-w-full tw-object-cover”><\/p>\n

class=”tw-w-full tw-flex
\n tw-flex-col
\n tw-min-h-[60vh]\n max-md:tw-min-h-[unset]\n max-md:tw-h-max
\n tw-px-[20%]\n max-md:tw-px-[5%]\n tw-p-8
\n tw-gap-[10%]\n max-md:tw-gap-[4%]\n tw-place-items-center
\n tw-bg-[#EFEFEF]\n “><\/p>\n

class=”tw-text-2xl max-md:tw-text-lg tw-text-secondary”>Our services
\n class=”tw-text-5xl max-md:tw-text-3xl tw-text-primary tw-text-center”>Premium washing service<\/p>\n

class=”tw-w-full tw-mt-[5%] tw-flex
\n tw-gap-[10%]\n tw-justify-around
\n max-md:tw-mt-8
\n tw-place-content-center”><\/p>\n

class=”tw-flex tw-flex-col tw-gap-4
\n tw-place-content-center
\n tw-place-items-center
\n tw-text-center
\n tw-w-[200px] tw-h-[350px]\n max-md:tw-w-[150px] max-md:tw-h-[150px]\n “><\/p>\n

class=”tw-w-full tw-h-[150px] max-md:tw-h-[100px]”>
\n src=”.\/assets\/images\/icons\/car-wash.svg”
\n alt=”car wash” class=”tw-h-full tw-w-full tw-object-contain”><\/p>\n

class=”tw-text-2xl max-md:tw-text-lg primary-text-color”>
\n Exterior washing<\/p>\n

class=”tw-flex tw-flex-col tw-gap-4
\n tw-place-content-center
\n tw-place-items-center
\n tw-text-center
\n tw-w-[200px] tw-h-[350px]\n max-md:tw-w-[150px] max-md:tw-h-[150px]\n “><\/p>\n

class=”tw-w-full tw-h-[150px] max-md:tw-h-[100px]”>
\n src=”.\/assets\/images\/icons\/seat-cleaning.svg”
\n alt=”car wash” class=”tw-h-full tw-w-full tw-object-contain”><\/p>\n

class=”tw-text-2xl max-md:tw-text-lg primary-text-color”>
\n Seat cleaning<\/p>\n

class=”tw-flex tw-flex-col tw-gap-4
\n tw-place-content-center
\n tw-place-items-center
\n tw-text-center
\n tw-w-[200px] tw-h-[350px]\n max-md:tw-w-[150px] max-md:tw-h-[150px]\n “><\/p>\n

class=”tw-w-full tw-h-[100px]”>
\n src=”.\/assets\/images\/icons\/vaccuming.svg”
\n alt=”car wash” class=”tw-h-full tw-w-full tw-object-contain”><\/p>\n

class=”tw-text-2xl max-md:tw-text-lg primary-text-color”>
\n Vacuuming<\/p>\n

class=”tw-w-full tw-flex tw-flex-col
\n tw-place-content-center
\n max-md:tw-px-[5%]\n tw-p-[5%]\n tw-place-items-center
\n tw-bg-[#fff]\n “>
\n class=”tw-text-2xl tw-font-semibold tw-text-secondary”>Washing plans
\n class=”tw-text-4xl tw-font-semibold primary-text-color “>Choose your plan<\/p>\n

class=”tw-w-full tw-flex
\n max-md:tw-flex-col tw-place-items-center
\n tw-mt-[5%] tw-gap-4 tw-place-content-center”><\/p>\n

class=”tw-flex tw-flex-col
\n tw-w-[350px] tw-h-[400px]\n tw-bg-white
\n tw-p-4
\n tw-place-items-center
\n tw-gap-3
\n tw-rounded-lg
\n “><\/p>\n

class=”tw-text-3xl primary-text-color”>Basic cleaning
\n class=”tw-text-5xl tw-font-semibold tw-text-blue-950″>$14
\n class=”tw-flex tw-mt-2 tw-flex-col tw-gap-2
\n tw-text-lg”>
\n class=”tw-flex tw-gap-2″>
\n class=”bi bi-check-circle tw-text-green-500″>
\n Seat Washing<\/p>\n

class=”tw-flex tw-gap-2″>
\n class=”bi bi-check-circle tw-text-green-500″>
\n Vacuum Cleaning<\/p>\n

class=”tw-flex tw-gap-2″>
\n class=”bi bi-check-circle tw-text-green-500″>
\n Exterior Cleaning<\/p>\n

class=”tw-flex tw-gap-2″>
\n class=”bi bi-x-circle”>
\n Interior Wet Cleaning<\/p>\n

class=”tw-flex tw-gap-2″>
\n class=”bi bi-x-circle”>
\n Window Wiping<\/p>\n

href=”” class=”tw-p-2 btn tw-mt-auto
\n hover:tw-scale-[1.02]\n tw-duration-[0.3s]\n tw-transition-transform
\n “>
\n Book now<\/p>\n

class=”tw-flex tw-flex-col
\n tw-w-[350px] tw-h-[400px]\n tw-bg-white
\n tw-p-4
\n tw-shadow-2xl
\n tw-border-2
\n tw-place-items-center
\n tw-gap-3
\n tw-rounded-lg
\n “><\/p>\n

class=”tw-text-3xl primary-text-color”>Executive cleaning
\n class=”tw-text-5xl tw-font-semibold”>$25
\n class=”tw-flex tw-mt-2 tw-flex-col tw-gap-2
\n tw-text-lg”>
\n class=”tw-flex tw-gap-2″>
\n class=”bi bi-check-circle tw-text-green-500″>
\n Seat Washing<\/p>\n

class=”tw-flex tw-gap-2″>
\n class=”bi bi-check-circle tw-text-green-500″>
\n Vacuum Cleaning<\/p>\n

class=”tw-flex tw-gap-2″>
\n class=”bi bi-check-circle tw-text-green-500″>
\n Exterior Cleaning<\/p>\n

class=”tw-flex tw-gap-2″>
\n class=”bi bi-check-circle tw-text-green-500″>
\n Interior Wet Cleaning<\/p>\n

class=”tw-flex tw-gap-2″>
\n class=”bi bi-x-circle”>
\n Window Wiping<\/p>\n

href=”” class=”tw-p-2 btn tw-mt-auto
\n hover:tw-scale-[1.02]\n tw-duration-[0.3s]\n tw-transition-transform
\n “>
\n Book now<\/p>\n

class=”tw-flex tw-flex-col
\n tw-w-[350px] tw-h-[400px]\n tw-bg-white
\n tw-p-4
\n tw-place-items-center
\n tw-gap-3
\n tw-rounded-lg
\n “><\/p>\n

class=”tw-text-3xl primary-text-color”>Presidential cleaning
\n class=”tw-text-5xl tw-font-semibold tw-text-blue-950″>$35
\n class=”tw-flex tw-mt-2 tw-flex-col tw-gap-2
\n tw-text-lg”>
\n class=”tw-flex tw-gap-2″>
\n class=”bi bi-check-circle tw-text-green-500″>
\n Seat Washing<\/p>\n

class=”tw-flex tw-gap-2″>
\n class=”bi bi-check-circle tw-text-green-500″>
\n Vacuum Cleaning<\/p>\n

class=”tw-flex tw-gap-2″>
\n class=”bi bi-check-circle tw-text-green-500″>
\n Exterior Cleaning<\/p>\n

class=”tw-flex tw-gap-2″>
\n class=”bi bi-check-circle tw-text-green-500″>
\n Interior Wet Cleaning<\/p>\n

class=”tw-flex tw-gap-2″>
\n class=”bi bi-check-circle tw-text-green-500″>
\n Window Wiping<\/p>\n

href=”” class=”tw-p-2 btn tw-mt-auto
\n hover:tw-scale-[1.02]\n tw-duration-[0.3s]\n tw-transition-transform”>
\n Book now<\/p>\n

class=”tw-w-full tw-flex
\n tw-place-content-center
\n tw-px-[10%]\n tw-p-4
\n tw-gap-[10%]\n tw-place-items-center
\n tw-bg-[#EFEFEF]\n max-md:tw-flex-col
\n tw-overflow-hidden
\n ”
\n id=”booking”
\n ><\/p>\n

class=”tw-w-[350px] tw-h-[350px] tw-rounded-md tw-flex
\n max-md:tw-hidden
\n tw-overflow-hidden”>
\n src=”.\/assets\/images\/homepage\/car-washing.jpg”
\n alt=”car wash” class=”tw-w-full tw-object-cover”><\/p>\n

class=”tw-flex tw-flex-col tw-gap-[5%] tw-h-full tw-mt-[5%]”>
\n class=”tw-flex tw-flex-col tw-gap-2″>
\n class=”tw-text-5xl max-md:tw-text-3xl primary-text-color tw-font-medium”>Request car wash<\/p>\n

class=”tw-flex tw-flex-col tw-gap-2 tw-mt-4 tw-text-center”>
\n class=”tw-text-xl”>To book call<\/p>\n

class=”tw-text-3xl primary-text-color”>
\n +1 832-604-7679<\/p>\n

class=”tw-mt-5 tw-w-full tw-flex tw-flex-col tw-p-[5%]\n tw-place-items-center”><\/p>\n

class=”tw-text-3xl max-md:tw-text-2xl primary-text-color tw-font-medium”>
\n What some of our clients say<\/p>\n

class=”tw-mt-[5%] tw-flex tw-w-full tw-place-content-center tw-gap-[5%]”><\/p>\n

class=”review-container tw-flex tw-flex-col”>
\n class=”tw-flex tw-h-[150px] tw-max-w-[550px]”><\/p>\n

class=”slides fade tw-text-lg tw-text-justify”>
\n class=”tw-italic tw-text-gray-600″>
\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto sapiente laudantium id ratione! Fugiat nulla ut, possimus facere sit natus.<\/p>\n

class=”tw-mt-2 tw-text-yellow-400″>
\n class=”bi bi-star-fill”>
\n class=”bi bi-star-fill”>
\n class=”bi bi-star-fill”>
\n class=”bi bi-star-fill”>
\n class=”bi bi-star-fill”><\/p>\n

class=”tw-mt-3″>- Sandra Brooks<\/p>\n

class=”slides fade tw-text-lg tw-text-justify”>
\n class=”tw-italic tw-text-gray-600 “>
\n Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium tempora reprehenderit illo accusamus minus sunt.<\/p>\n

class=”tw-mt-2 tw-text-yellow-400″>
\n class=”bi bi-star-fill”>
\n class=”bi bi-star-fill”>
\n class=”bi bi-star-fill”>
\n class=”bi bi-star-fill”>
\n class=”bi bi-star-fill”><\/p>\n

class=”tw-mt-3″>- Joshua Simmons<\/p>\n

class=”slides fade tw-text-lg tw-text-justify”><\/p>\n

class=”tw-italic tw-text-gray-600 “>
\n Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate quaerat quia aut eveniet ipsa quae consectetur placeat debitis doloribus animi.<\/p>\n

class=”tw-mt-2 tw-text-yellow-400″>
\n class=”bi bi-star-fill”>
\n class=”bi bi-star-fill”>
\n class=”bi bi-star-fill”>
\n class=”bi bi-star-fill”>
\n class=”bi bi-star-fill”><\/p>\n

class=”tw-mt-3″>- Roger Neely<\/p>\n

class=”dots-container tw-mt-auto”>
\n class=”dot”>
\n class=”dot”>
\n class=”dot”><\/p>\n

class=”tw-mt-[5%] tw-flex tw-flex-col tw-w-full tw-place-items-center tw-place-content-center tw-gap-5″>
\n class=”tw-text-3xl primary-text-color”>On the map
\n src=”https:\/\/www.google.com\/maps\/embed?”
\n class=”tw-w-[600px]\n tw-h-[350px]\n max-md:tw-w-full
\n ”
\n style=”border:0;” allowfullscreen=”” loading=”lazy”
\n referrerpolicy=”no-referrer-when-downgrade”><\/p>\n

class=”tw-w-full tw-flex
\n tw-flex-col
\n tw-place-content-center
\n tw-px-[10%]\n tw-p-[5%]\n tw-gap-[10%]\n tw-place-items-center
\n tw-bg-[#EFEFEF]\n “><\/p>\n

class=”tw-w-full tw-place-content-center
\n tw-flex tw-flex-col tw-gap-3
\n tw-place-items-center tw-mt-[5%]\n “><\/p>\n

class=”tw-text-3xl max-md:tw-text-xl primary-text-color”>Like us?
\n class=”tw-text-xl max-md:tw-text-lg”>Tell us more<\/p>\n

class=”tw-flex”>
\n class=”stars” data-rating=”0″>
\n class=”star” data-value=”1″>\u2605
\n class=”star” data-value=”2″>\u2605
\n class=”star” data-value=”3″>\u2605
\n class=”star” data-value=”4″>\u2605
\n class=”star” data-value=”5″>\u2605<\/p>\n

class=”tw-fixed
\n tw-top-[50%] tw-translate-y-[-50%]\n tw-left-[50%] tw-translate-x-[-50%]\n tw-w-[450px] tw-max-h-[450px]\n max-md:tw-w-[350px]\n tw-z-40
\n tw-p-3
\n tw-hidden
\n tw-flex
\n tw-flex-col
\n tw-rounded-md
\n tw-shadow-2xl
\n tw-bg-white”
\n id=”modal”
\n >
\n class=”tw-w-full tw-relative tw-h-[40px]”>
\n class=”tw-text-4xl
\n bi bi-x
\n tw-absolute
\n tw-right-2
\n ”
\n id=”modal-close”
\n ><\/p>\n

class=”tw-text-2xl tw-text-center tw-mt-[5%]”
\n id=”modal-title”><\/p>\n

class=”tw-text-base tw-font-normal tw-mt-2″
\n id=”modal-description”><\/p>\n

id=”modal-input”
\n placeholder=”write…”
\n maxlength=”2000″
\n class=”input tw-w-full
\n tw-hidden
\n tw-mt-2
\n tw-resize-y
\n tw-text-base
\n tw-font-normal
\n tw-min-h-[50px]\n tw-max-h-[150px]”><\/p>\n

class=”tw-flex max-md:tw-flex-col tw-w-full tw-p-[5%]\n tw-px-[10%] tw-place-content-around tw-gap-3
\n tw-bg-primary
\n tw-text-white
\n “>
\n class=”tw-h-full tw-w-[250px] tw-flex tw-flex-col
\n tw-gap-6 tw-place-items-center max-md:tw-w-full”><\/p>\n

src=”.\/assets\/logo.png”
\n alt=”logo” class=”tw-w-[150px]”><\/p>\n

12111 Cypress, <\/p>\n

TX,<\/p>\n

United States<\/p>\n

class=”tw-mt-3 tw-font-semibold tw-text-lg”>
\n Follow us<\/p>\n

class=”tw-h-full tw-w-[250px] tw-flex tw-flex-col
\n tw-gap-4″><\/p>\n

class=”tw-text-3xl max-md:tw-text-xl”>
\n Services<\/p>\n

class=”tw-h-full tw-w-[250px] tw-flex tw-flex-col
\n tw-gap-4″><\/p>\n

class=”tw-text-3xl max-md:tw-text-xl”>
\n Resources<\/p>\n

src=]]>”.\/scripts\/utils.js”>
\nsrc=]]>”index.js”><\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

:root{<\/p>\n

–btn-color: #fdfdfd;\/* button color*\/
\n –btn-bg: #00006f;\/* button bg color*\/<\/p>\n

–header-link-hover: #00006f;<\/p>\n

–primary-text-color: #00006f;
\n \/* –link-hover: #4f55c1; *\/
\n –input-hover-bd-color: #00006f;
\n}<\/p>\n

html {
\n scroll-behavior: smooth;
\n}<\/p>\n

header{
\n background-color: white;
\n}<\/p>\n

header > .collapsable-header{
\n display: flex;
\n gap: 1rem;
\n width: 100%;
\n background-color: white;
\n place-content: center;
\n overflow: hidden;
\n \/* transition: width 0.3s ease; *\/
\n}<\/p>\n

.animated-collapse{
\n transition: width 0.3s ease;
\n}<\/p>\n

.header-links {
\n display: flex;
\n align-items: center;
\n min-width: fit-content;
\n border-radius: 25px;
\n padding: 8px 15px;
\n transition: background-color 0.3s, color 0.3s;
\n}<\/p>\n

.header-links:hover {
\n background-color: var(–header-link-hover);
\n color: #fff;
\n}<\/p>\n

.black-text{
\n color: #000;
\n}<\/p>\n

.white-text{
\n color: #fff;
\n}<\/p>\n

.primary-text-color{
\n color: var(–primary-text-color);
\n}<\/p>\n

.opacity-0{
\n opacity: 0 !important;
\n}<\/p>\n

.opacity-100{
\n opacity: 100 !important;
\n}<\/p>\n

.btn{
\n padding: 10px 15px;
\n width: max-content;
\n border-radius: 25px;
\n color: var(–btn-color);
\n background-color: var(–btn-bg);
\n justify-content: center;
\n align-items: center;
\n display: flex;
\n gap: 10px;
\n}<\/p>\n

.btn:hover{<\/p>\n

}<\/p>\n

.input{
\n padding: 10px;
\n border-radius: 10px;
\n outline: none;
\n min-width: 100px;
\n border: 2px solid #cecece;
\n transition: border 0.3s;
\n}<\/p>\n

.input:active, .input:focus, .input:focus-within{
\n border: 2px solid var(–input-hover-bd-color);
\n}<\/p>\n

.slides {
\n display: none;
\n position: relative;
\n height: 100%;
\n}<\/p>\n

\/* Slideshow container *\/
\n.slideshow-container {
\n width: 100%;
\n position: relative;
\n margin: auto;
\n overflow: hidden;
\n height: 100%;
\n}<\/p>\n

.slideshow-container img {
\n vertical-align: middle;
\n height: 100%;
\n}<\/p>\n

\/* Next & previous buttons *\/
\n.prev,
\n.next {
\n cursor: pointer;
\n position: absolute;
\n top: 50%;
\n width: auto;
\n padding: 16px;
\n margin-top: -22px;
\n color: white;
\n font-weight: bold;
\n font-size: 18px;
\n transition: 0.6s ease;
\n border-radius: 0 3px 3px 0;
\n user-select: none;
\n z-index: 10;
\n}<\/p>\n

\/* Position the “next button” to the right *\/
\n.next {
\n right: 0;
\n border-radius: 3px 0 0 3px;
\n}<\/p>\n

\/* On hover, add a black background color with a little bit see-through *\/
\n.prev:hover,
\n.next:hover {
\n background-color: rgba(0, 0, 0, 0.8);
\n}<\/p>\n

\/* Caption text *\/
\n.slideshow-container .text {
\n color: #f2f2f2;
\n font-size: 15px;
\n padding: 8px 12px;
\n position: absolute;
\n bottom: 8px;
\n width: 100%;
\n text-align: center;
\n}<\/p>\n

\/* Number text (1\/3 etc) *\/
\n.numbertext {
\n color: #f2f2f2;
\n font-size: 12px;
\n padding: 8px 12px;
\n position: absolute;
\n top: 0;
\n}<\/p>\n

\/* Navigation dots styling *\/
\n.dots-container {
\n text-align: center;
\n margin-top: 20px;
\n}<\/p>\n

\/* The dots\/bullets\/indicators *\/
\n.dot {
\n cursor: pointer;
\n height: 10px;
\n width: 10px;
\n margin: 0 2px;
\n background-color: #bbb;
\n border-radius: 50%;
\n display: inline-block;
\n transition: background-color 0.6s ease;
\n}<\/p>\n

.dots-container .active,
\n.dot:hover {
\n background-color: #717171;
\n}<\/p>\n

\/* Fading animation *\/
\n.fade {
\n animation-name: fade;
\n animation-duration: 1.5s;
\n}<\/p>\n

.footer-link{
\n color: #fff;
\n transition: color 0.3s;
\n}<\/p>\n

.footer-link:hover{
\n color: #0fe857;
\n}<\/p>\n

.review-container {
\n position: relative;
\n max-width: 600px;
\n margin: auto;
\n}<\/p>\n

.review-slide {
\n display: none;
\n padding: 20px;
\n text-align: center;
\n}<\/p>\n

.fade {
\n animation: fadeEffect 1s ease-in-out;
\n}<\/p>\n

@keyframes fadeEffect {
\n from { opacity: 0; }
\n to { opacity: 1; }
\n}<\/p>\n

.stars {
\n display: inline-block;
\n font-size: 40px;
\n cursor: pointer;
\n}
\n.stars .star {
\n color: #ccc;
\n transition: color 0.2s;
\n}
\n.stars .star:hover,
\n.stars .star.active {
\n color: gold;
\n}<\/p>\n

@keyframes fade {
\n from {
\n opacity: 0.4;
\n }
\n to {
\n opacity: 1;
\n }
\n}<\/p>\n

\/* On smaller screens, decrease text size *\/
\n@media only screen and (max-width: 300px) {
\n .prev,
\n .next,
\n .text {
\n font-size: 11px;
\n }
\n}<\/p>\n

@media not all and (min-width: 768px) {
\n header .collapsable-header {
\n position: absolute;
\n right: 0px;
\n flex-direction: column;
\n justify-content: space-between;
\n opacity: 0;
\n height: 100vh;
\n width: 0vw;
\n padding: 5px;
\n padding-top: 5%;
\n padding-bottom: 5%;
\n place-items: end;
\n background-color: #00006f;
\n color: white;
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\n

\u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u0647\u060c
\u0645\u0646 \u0627\u06cc\u0646 \u0635\u0641\u062d\u0647 \u0641\u0631\u0648\u062f \u06a9\u0627\u0631\u0648\u0627\u0634 \u0633\u0627\u062f\u0647 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645.<\/p>\n

\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n