diff --git a/styles.css b/styles.css deleted file mode 100644 index 8206facf..00000000 --- a/styles.css +++ /dev/null @@ -1,2875 +0,0 @@ - - - -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700&family=Oxygen:wght@300&display=swap"); - -:root { - --primary-color: #3685fb; - --primary-color-dark: #2f73d9; - --text-light: #767268; - --extra-light: #ffffff; - --foot-light: #0d213f; - --arr-light: #3685fb; - --body-light: #ffffff; - --secondary-color: #fafcff; - --text-dark: #0d213f; - --text-same: #0d213f; - --max-width: 1200px; - --img-color: white; - --head-text: #6a5acd; - - --bubble-color: #6a5acd; - - --testimonials-img-border: #6a5acd; -} - -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -::-webkit-scrollbar { - width: 0; -} - -/* new bubble start*/ - -/* -.bubbles { - position: fixed; - width: 100%; - height: 100%; - z-index: 0; - overflow: hidden; - top: 0; - left: 0; - pointer-events: none; -} - -.bubble { - position: absolute; - bottom: 0; - width: 40px; - height: 40px; - background: var(--bubble-color); - border-radius: 50%; - opacity: 0.5; - animation: rise 10s infinite ease-in; -} - -.bubble:nth-child(1) { - width: 40px; - height: 40px; - left: 10%; - animation-duration: 8s; -} - -.bubble:nth-child(2) { - width: 20px; - height: 20px; - left: 20%; - animation-duration: 5s; - animation-delay: 1s; -} - -.bubble:nth-child(3) { - width: 50px; - height: 50px; - left: 35%; - animation-duration: 7s; - animation-delay: 2s; -} - -.bubble:nth-child(4) { - width: 80px; - height: 80px; - left: 50%; - animation-duration: 11s; - animation-delay: 0s; -} - -.bubble:nth-child(5) { - width: 35px; - height: 35px; - left: 55%; - animation-duration: 6s; - animation-delay: 1s; -} - -.bubble:nth-child(6) { - width: 45px; - height: 45px; - left: 65%; - animation-duration: 8s; - animation-delay: 3s; -} - -.bubble:nth-child(7) { - width: 90px; - height: 90px; - left: 70%; - animation-duration: 12s; - animation-delay: 2s; -} - -.bubble:nth-child(8) { - width: 25px; - height: 25px; - left: 80%; - animation-duration: 6s; - animation-delay: 2s; -} - -.bubble:nth-child(9) { - width: 15px; - height: 15px; - left: 70%; - animation-duration: 5s; - animation-delay: 1s; -} - -.bubble:nth-child(10) { - width: 90px; - height: 90px; - left: 25%; - animation-duration: 10s; - animation-delay: 4s; -} - -.bubble:nth-child(11) { - width: 60px; - height: 60px; - left: 15%; - animation-duration: 9s; - animation-delay: 1s; -} - -.bubble:nth-child(12) { - width: 30px; - height: 30px; - left: 25%; - animation-duration: 6s; - animation-delay: 2s; -} - -.bubble:nth-child(13) { - width: 70px; - height: 70px; - left: 40%; - animation-duration: 8s; - animation-delay: 3s; -} - -.bubble:nth-child(14) { - width: 100px; - height: 100px; - left: 55%; - animation-duration: 12s; - animation-delay: 1s; -} - -.bubble:nth-child(15) { - width: 45px; - height: 45px; - left: 60%; - animation-duration: 7s; - animation-delay: 2s; -} - -.bubble:nth-child(16) { - width: 55px; - height: 55px; - left: 70%; - animation-duration: 10s; - animation-delay: 3s; -} - -.bubble:nth-child(17) { - width: 80px; - height: 80px; - left: 75%; - animation-duration: 11s; - animation-delay: 2s; -} - -.bubble:nth-child(18) { - width: 35px; - height: 35px; - left: 85%; - animation-duration: 7s; - animation-delay: 1s; -} - -.bubble:nth-child(19) { - width: 25px; - height: 25px; - left: 90%; - animation-duration: 5s; - animation-delay: 2s; -} - -.bubble:nth-child(20) { - width: 80px; - height: 80px; - left: 35%; - animation-duration: 9s; - animation-delay: 4s; -} - -@keyframes rise { - 0% { - bottom: 0; - transform: translateX(0); - } - - 50% { - transform: translate(100px); - } - - 100% { - bottom: 100vh; - transform: translateX(-200px); - } -} -*/ - -.footer__link { - position: relative; - text-decoration: none; - color: black; - font-size: 18px; -} -.footer__link::after { - content: ''; - position: absolute; - width: 0%; - height: 2px; - bottom: -5px; - left: 0; - background-color: black; - transition: all 0.3s ease-in-out; -} -.footer__link:hover { - color: red; -} -.footer__link:hover::after { - width: 100%; - background-color: red; -} - -/* new bubble end */ -#scrollPath { - position: fixed; - top: 0; - right: 0; - width: 15px; - height: 100%; - background: rgba(255, 255, 255, 0.05); -} - -#progressbar { - position: fixed; - top: 0; - right: 0; - width: 15px; - height: 100%; - background: linear-gradient(to top, #008aff, #00ffe7); - z-index: 333333; -} - -.dark-theme { - --secondary-color: #0e1525; - --text-dark: #ffffff; - --arr-light: white; - --body-light: #0e1525; - --img-color: red; - --head-text: red; - --text-same: #0d213f; - - --bubble-color: red; - --testimonials-img-border: red; -} - -body { - display: flex; - justify-content: center; - align-items: center; - background-color: #0e1525; - overflow-x: hidden; -} - -#toggle { - display: inline-block; - border-radius: 50px; - transition: all 0.4s ease-in-out; - padding: 10px 10px; - background-color: transparent; - border: 2px solid #c6c9d8bf; - color: #c6c9d8bf; - font-weight: 600; - font-size: 14px; - letter-spacing: 2px; - text-decoration: none; -} - -#toggle:hover { - background-color: #ff0000; - border-color: #ff0000; - color: #fff; -} - -*/ #toggle:hover { - filter: brightness(1.5); -} - -/*.section__container { - max-width: var(--max-width); - margin: auto; - padding: 5rem 1rem; -}*/ - -/*Creating Curved Corners for the Video*/ -.section__container { - /* max-width: var(--max-width); */ - margin: auto; - padding: 5rem 1rem; - margin-top: 20px; - /* Added margin-top */ - margin-bottom: -28px; - /* Added margin-bottom */ - /*background: rgb(241, 239, 239); Added background color */ - display: flex; - justify-content: center; - /* Center the content */ -} - -.sized-video { - border-radius: 15px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 100%; - max-width: 800px; - /* Limit the maximum width of the video */ - height: auto; - outline: none; - /* Remove default outline */ -} - -.section__container { - max-width: var(--max-width); - margin: auto; - padding: 5rem 1rem; - margin-top: 20px; - margin-bottom: -28px; - /*background: rgb(241, 239, 239); */ - display: flex; - flex-direction: column; - justify-content: center; -} - -.sized-video { - border-radius: 15px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 100%; - max-width: 800px; - height: auto; - outline: none; - /* Remove default outline */ -} - -.section__header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 2rem; - flex-wrap: wrap; -} - -.section__title { - font-size: 2rem; - font-weight: 600; - color: var(--text-dark); - margin-bottom: 15px; - /* text-align: left; */ - text-align: center; - display: inline-block; - font-weight: 600; - letter-spacing: 0.5px; - line-height: 34px; - margin-bottom: 28px; - - background: #fd4766; - background: linear-gradient( - 120deg, - #1c99fe 20.69%, - #7644ff 50.19%, - #fd4766 79.69% - ); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.section__subtitle { - font-size: 1rem; - color: var(--text-dark); - max-width: calc(var(--max-width) / 2); - /* text-align: right; */ - text-align: center; -} - -.section_header .section_subtitle { - text-align: left; -} - -.btn { - outline: none; - border: none; - font-size: 1rem; - color: var(--extra-light); - background-color: var(--primary-color); - border-radius: 5rem; - cursor: pointer; - transition: 0.3s; - font-weight: 600; -} - -#send { - border-top-right-radius: 5rem; - border-bottom-right-radius: 5rem; -} - -/* send button start*/ -#send { - display: inline-block; - border-top-right-radius: 50px; - border-bottom-right-radius: 50px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - transition: all 0.4s ease-in-out; - padding-left: 20px; - padding-right: 20px; - width: auto; - border: none; - background-color: transparent; - color: slateblue; - font-weight: 500; - font-size: 28px; - letter-spacing: 2px; - vertical-align: middle; - text-decoration: none; - white-space: nowrap; -} -body.dark-theme #send:hover { - background: linear-gradient(135deg, #f1879a, #c14e35); - color: white; -} -body.dark-theme #send { - background-color: #141e36; - border: 0.0001px solid red; - color: slateblue; -} -#send:hover { - background-color: slateblue; - border-color: slateblue; - color: #fff; -} -#send.focused { - background-color: slateblue; - border-color: slateblue; - color: #fff; -} - -/* send button end */ - -.btn:hover { - background-color: var(--primary-color-dark); -} - -#btn-style { - /* display: inline-block; */ - border-radius: 50px; - transition: all 0.4s ease-in-out; - padding-left: 20px; - padding-right: 20px; - width: auto; - background-color: transparent; - border: 2px solid rgb(41, 0, 128); - color: red; - font-weight: 500; - font-size: 14px; - letter-spacing: 2px; - vertical-align: middle; - text-decoration: none; - white-space: nowrap; -} -/* ensures no box or shadow for the video button */ -.btn_video { - background: none; - color: inherit; - border: none; - padding: 0; - margin: 0; - font: inherit; - cursor: pointer; - outline: inherit; - box-shadow: none; - text-align: inherit; - display: inline; -} - -a { - text-decoration: none; -} - -img { - width: 100%; - display: block; -} - -body { - font-family: "Poppins", sans-serif; -} - -nav { - background-color: #123456; - position: fixed; - top: 0; - width: 100%; - z-index: 1001; -} - -.nav__logo { - font-size: 1.8rem; - /* Increased font size for the logo */ - font-weight: 600; - color: #ffffff; - cursor: pointer; - /* border: 2px solid white; */ -} - -.nav__logo span { - color: #3685fb; - /* Assuming this is your primary color */ -} -/* -.nav__links { - /* list-style: none; - display: flex; - align-items: center; - gap: 1rem; /* Increased gap between links */ -/* font-size: 1.2rem; Increased font size for the links */ -/* } */ -.link a { - color: #fff; /* Sets text color to white */ - padding-top: 1.75rem; /* Equivalent to py-7 in Tailwind, adjust according to your base font size */ - padding-bottom: 1.75rem; /* Equivalent to py-7 in Tailwind */ - transition: color 0.3s; /* Transition effect for color change */ - font-weight: 600; /* Sets font weight to 600 */ -} - -link a:hover { - color: #60a5fa; - background-color:red; -} - -.home { - margin-left: 210px; -} - - -header { - background-color: var(--secondary-color); -} - -/* new toggle start */ -.toggle-container { - --size: 2rem; - position: relative; - width: var(--size); - height: var(--size); -} - -.toggle { - appearance: none; - outline: none; - cursor: pointer; - width: 100%; - height: 100%; - box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0; - border-radius: 999px; - color: hsl(240, 100%, 95%); - transition: all 500ms; - position: absolute; - top: 0; - left: 0; - - &:checked { - --ray-size: calc(var(--size) * -0.4); - --offset-orthogonal: calc(var(--size) * 0.65); - --offset-diagonal: calc(var(--size) * 0.45); - transform: scale(0.75); - color: hsl(40, 100%, 50%); - box-shadow: inset 0 0 0 var(--size), - calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), - var(--offset-orthogonal) 0 0 var(--ray-size), - 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), - 0 var(--offset-orthogonal) 0 var(--ray-size), - calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 - var(--ray-size), - var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), - calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), - var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); - } -} - -/* Apply fade-down animation to the toggle container */ -.toggle-container[data-aos="fade-down"] { - transition: opacity 500ms ease-in-out; - opacity: 0; -} - -.toggle-container[data-aos="fade-down"].aos-animate { - opacity: 1; -} - -/* new toggle end */ -.header__container { - min-height: 100vh; - display: grid; - grid-template-columns: repeat(2, 1fr); - /* border: 2px solid green; */ - /* width: var(--max-width); */ - padding: 0 2rem; -} - -.header__image { - position: relative; - display: flex; - justify-content: center; - align-items: center; -} - -.header__image img { - position: absolute; - - top: 50%; - left: 75%; - border: 0.5rem solid var(--img-color); - border-radius: 2rem; - box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); -} - -.header__image img:nth-child(1) { - /* max-width: 350px; */ - max-width: 20vw; - transform: translate(-75%, -50%); -} - -.header__image img:nth-child(2) { - /* max-width: 250px; */ - max-width: 15vw; - transform: translate(0%, -25%); -} - -.header__content { - padding-top: 150px; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - /* border: 2px solid var(--primary-color-dark); */ - gap: 1rem; -} - -.header__content > div { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - /* border: 2px solid blue; */ -} - -.header_content .sub_header { - font-size: 1rem; - font-weight: 600; - color: var(--primary-color); -} - -.header__content h1 { - font-size: 3rem; - line-height: 4rem; - font-weight: 800; - color: var(--text-dark); - text-align: right; - width: 30rem; - height: 20rem; -} - -.header_content .action_btns { - display: flex; - align-items: center; - gap: 2rem; - margin-top: 1rem; -} - -/* Newsletter Modal */ - -.modal-container { - display: flex; - align-items: center; - justify-content: center; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.7); - backdrop-filter: blur(10px); - z-index: 2000000000; -} - -.modal-wrapper { - position: relative; - max-width: 600px; - width: 100%; - display: flex; - background: #fff; - overflow: hidden; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - border-radius: 5px; -} - -.modal-image { - height: 100%; - transform: scale(1.1); - object-position: center; - object-fit: cover; - max-width: inherit; -} - -.modal-newsletter { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 40px; - border-radius: 5px; - max-width: 400px; - width: 100%; -} - -.modal-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 15px; -} - -.cross-container { - position: absolute; - display: flex; - justify-content: flex-end; - width: 100%; - height: fit-content; - z-index: 1; - padding: 1rem; -} - -.close-btn { - font-size: 1.5rem; - color: #000; - cursor: pointer; - transition: color 0.3s ease-in-out; -} - -.close-btn:hover { - color: #ff0000; -} - -.modal-content form { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.modal-content input { - margin-bottom: 10px; - padding: 8px; - border-radius: 5px; - border: 2px solid #efefef; -} - -.modal-btn { - padding: 10px; - background-color: #091020; - border-radius: 5px; - color: #fff; - border: none; - outline: none; - cursor: pointer; - transition: scale 0.3s ease-in-out; -} - -/* .modal-btn:active { - scale: 0.95; -} */ - -.close-btn { - background: none; - border: none; - cursor: pointer; -} - -/* Modal End */ - -.story { - display: flex; - align-items: center; - gap: 2rem; - cursor: pointer; -} - -.video { - position: relative; -} - -.video img { - width: 60px; - height: 60px; - border-radius: 100%; - box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); -} - -.video span { - position: absolute; - top: 50%; - left: 100%; - transform: translate(-50%, -50%); -} - -.video span i { - padding: 0.5rem; - font-size: 1rem; - color: red; - background-color: var(--extra-light); - border-radius: 100%; - box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); -} - -/* added video player tag to display at 80% */ -.sized-video { - width: 73vw; - height: auto; - display: block; - margin: 0 auto; - max-width: 100%; -} - -.story > span { - font-size: 1rem; - font-weight: 600; - color: var(--text-dark); -} - -/* carousel */ - -.destination__container { - background-color: var(--body-light); -} - -.slideshow-container { - position: relative; - width: 100%; - height: 600px; - overflow: hidden; - border-radius: 10px; - display: flex; - flex-flow: row nowrap; -} - -.mySlides { - min-width: 100%; - height: inherit; - overflow: hidden; - transition: margin-left 0.3s ease-in-out; -} - -.mySlides img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.imageDots { - position: absolute; - bottom: 0; - left: 50%; - transform: translateX(-50%); - display: flex; - flex-flow: row nowrap; - gap: 10px; - margin-bottom: 10px; -} - -.imageDots span { - width: 10px; - height: 10px; - border-radius: 100%; - background-color: #0000; - border: 3px solid white; - cursor: pointer; - transition: background-color 0.3s ease-in-out; -} - -.imageDots span.active { - background-color: white; -} - -.destination__nav { - display: flex; - width: 100%; - top: 50%; - transform: translatey(-50%); - position: absolute; - justify-content: space-between; -} - -.destination__nav span { - width: 75px; - height: 75px; - display: grid; - place-items: center; - background-color: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(4px); - border-radius: 0 10px 10px 0; - font-size: 1.5rem; - cursor: pointer; - transition: 0.3s; -} - -.destination__nav span:nth-child(2) { - border-radius: 10px 0 0 10px; -} - -.destination__nav span:hover { - background-color: rgba(0, 0, 0, 0.2); -} - -.destination__grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 2rem; - place-items: center; -} - -.destination__card { - overflow: hidden; - position: relative; - isolation: isolate; - cursor: pointer; -} - -.destination__card img { - border-radius: 1rem; -} - -.destination__details { - position: absolute; - width: calc(100% - 2rem); - padding: 1rem; - bottom: 1.5rem; - left: 50%; - transform: translateX(-50%); - text-align: center; - color: black; - background-color: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(4px); - border-radius: 10px; - z-index: 1; - transition: 0.3s; -} - -.destination__title { - font-size: 1rem; - margin-bottom: 0.5rem; -} - -.destination__subtitle { - font-size: 1.2rem; - font-weight: 600; -} - -.trip { - background-color: var(--secondary-color); - max-width: var(--max-width); -} - -.trip_container :is(.sectiontitle, .sectionsubtitle, .view_all) { - text-align: center; - margin-right: auto; - margin-left: auto; -} - -.trip__grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 2rem; - margin: 4rem 0; -} - -.trip__card { - border-radius: 1rem; - overflow: hidden; - box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); - transition: 2s; -} - -.trip__card:hover { - transform: scale(1.1); - cursor: zoom-in; -} - -.trip__details { - padding: 1rem; - display: grid; - gap: 0.5rem; - font-size: 1rem; - font-weight: 600; - color: var(--text-same); - background-color: var(--extra-light); - cursor: pointer; -} - -.rating { - color: goldenrod; -} - -.booking__price { - display: flex; - align-items: center; - justify-content: space-between; -} - -.price span { - font-weight: 400; - font-size: 0.9rem; - color: var(--text-light); -} - -.book__now { - padding: 0.5rem 1.5rem; - color: var(--primary-color); - outline: none; - border: 1px solid var(--primary-color); - border-radius: 5rem; - background-color: transparent; - cursor: pointer; - transition: 0.3s; -} - -.book__now:hover { - color: var(--extra-light); - background-color: var(--primary-color); -} - -.gallary__container { - display: flex; - background-color: var(--secondary-color); - width: 80%; - justify-content: center; - align-items: center; - gap: 4rem; -} - -@media screen and (max-width: 890px) { - .gallary__container { - flex-direction: column; - gap: 2rem; - } -} -/* @media screen and (max-width:768px) { - .hamburger{ - position: relative; - left: 20px; - } - .btn{ - position: relative; - left: 90px; - } -} */ - -.image__gallary { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1rem; - width: 480px; -} - -.gallary__col { - display: grid; - place-content: center; - gap: 1rem; -} - -.gallary__col img { - border-radius: 1rem; - box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); -} - -.gallary__content { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} - -.gallary__content > div { - max-width: 400px; -} - -.gallary__content h2 { - text-align: right; -} - -.gallary_content .section_subtitle { - margin-bottom: 2rem; - text-align: right; -} - -.trip-gallery-container { - width: 100%; - margin: 100px auto 50px; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - grid-gap: 30px; -} - -.trip-gallery-container img { - width: 100%; -} - -.trip-gallery-container img:hover { - transform: scale(0.8) rotate(-10deg); - border-radius: 20px; - box-shadow: 0 32px 7px rgba(68, 77, 136, 0.2); -} - -.subscribe { - background-color: var(--secondary-color); - max-width: var(--max-width); -} - -.subscribe__container { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 2rem; -} - -.subscribe_container .subscribecontent .section_title { - text-align: left; -} - -.subscribe_container .subscribecontent .section_subtitle { - text-align: left; -} - -.subscribe__form { - display: flex; - align-items: center; - justify-content: center; -} - -.subscribe__form form { - width: 100%; - max-width: 400px; - display: flex; - background-color: var(--extra-light); - box-shadow: 3px 3px 30px slateblue; - border-radius: 5rem; - overflow: hidden; - border: 0.001px solid gray; -} -body.dark-theme .subscribe__form form { - width: 100%; - max-width: 400px; - display: flex; - /* background-color: var(--extra-light); */ - box-shadow: 5px 5px 30px rgba(162, 136, 248, 0.964); - border-radius: 5rem; - overflow: hidden; - border: 0.000001px solid var(--text-light); - /* color: white; */ -} -.subscribe__form input { - width: 100%; - padding: 1rem; - outline: none; - border: none; - /* border-radius: 5rem; */ - font-size: 1rem; -} - -body.light-theme #emailInput { - background-color: white; - color: black; -} - -body.dark-theme #emailInput { - background-color: #222f4b; - color: white; -} - -*, *::before, *::after { - box-sizing: border-box; -} - -body, html { - overflow-x: hidden; - margin: 0; - padding: 0; -} - -.footer { - width: 100%; - background-color: rgb(102, 116, 204); - padding: 2rem; -} -.footer:hover{ - background-color :#16171c; -} - -.footer__col p { - font-size: 0.8rem; - font-weight: 100; -} - -.footer__container { - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: flex-start; - grid-template-columns: repeat(3, 1fr); - gap: 20px; - color: var(--secondary-color); - margin: 0; - padding: 0; -} - -.footer__col { - margin-left: 15px; - flex: 1; - display: flex; - max-width: 220px; - text-align: left; - flex-direction: column; -} - -/* .footer__text a { - margin-top: 5px; - color: white; -} -.footer__text a:hover { - color: red; -} */ - -.footer:hover { - background: linear-gradient(135deg, #654ea3, #eaafc8); -} - -.footer__col h3 { - font-size: 1.5rem; - font-weight: 600; - margin-bottom: 20px; -} - -.footer__col h3 span { - color: var(--primary-color); -} - -/* .footer__link { - color: white; - margin-right: 15px; - font-size: 1em; -} - -.footer__link:hover { - transform: scale(10); -} */ - -.footer__col p span { - font-weight: 600; -} - -.footer__col h4 { - font-size: 1.5rem; - font-weight: 600; - margin-bottom: 15px; -} - -.footer__bar { - max-width: var(--max-width); - margin: auto; - padding: 0.5rem; - text-align: center; - font-size: 0.9rem; - /* color: var(--secondary-color); */ - color: var(--extra-light); - padding-top: 1rem; - margin-top: 1rem; - border-top: 2px solid var(--text-light); -} - -.footer__area { - margin-left: 0rem; -} - -.footer__area a { - color: white; -} - -.footer__area a:hover { - color: #ff0000; -} - -.icons { - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - gap: 20px; -} - -.icons .icon i { - margin-top: 25px; - font-size: 25px; - transition: all 0.9s ease; -} - -.icons .icon:hover i { - transform: scale(1.2); -} - -.icons .icon:hover .fab.fa-facebook { - color: #3b5998; -} - -.icons .icon:hover .fab.fa-twitter { - color: #090e11; -} - -.icons .icon:hover .fab.fa-instagram { - background: radial-gradient( - circle at 30% 107%, - #fdf497 0%, - #fdf497 5%, - #fd5949 45%, - #d6249f 60%, - #285aeb 90% - ); - background-clip: text; - border-radius: 20%; - transform: scale(1.5); - color: transparent; -} - -.icons .icon:hover .fab.fa-youtube { - color: #c31a1e; -} -.icons .icon:hover .fab.fa-github { - color: #333; -} -.icons .icon:hover .fab.fa-linkedin { - color: #0077b5; -} -@media (width < 1200px) { - footer { - margin-right: 0px; - width: 100%; - } -} - -@media (max-width: 768px) { - .footer__container { - /* flex-direction: column; - align-items: center; */ - margin-left: 10px; - } -} - - -/* ====================== */ -@media (width < 1200px) { - .header__image img:nth-child(1) { - max-width: 30vw; - } - - .header__image img:nth-child(2) { - max-width: 20vw; - } -} - -@media (width>1400px) { - #toggle { - margin-right: -5%; - } -} - -@media (width>1550px) { - #toggle { - margin-right: -8%; - } -} - -/* Enhance the responsiveness of gap between Dark Theme button and Contact Us buttons of navbar. */ - -@media (width < 1000px) { - .nav__links { - display: none; - } - - .header__container { - grid-template-columns: repeat(1, 1fr); - } - - .header__image { - min-height: 500px; - } - - .destination__grid { - gap: 1rem; - } - - .trip__grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media screen and (max-width: 800px) { - .destination__grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (width < 600px) { - .trip__grid { - grid-template-columns: repeat(1, 1fr); - } - - .gallary__container { - grid-template-columns: repeat(1, 1fr); - } - - .subscribe__container { - grid-template-columns: repeat(1, 1fr); - } - - .footer__container { - grid-template-columns: repeat(2, 1fr); - } -} - -/* doing changes */ -.top-btn { - display: none; - width: 50px; - height: 50px; - position: fixed; - bottom: 100px; - right: 0px; - background-color: #ab45e7; - color: #fff; - padding: 2px; - border: none; - margin-right: 36px; - border-radius: 50%; - cursor: pointer; -} - -.top-btn:hover { - background-color: #0056b3; -} - -/* /contact section overlapping with nav fixed/ */ -/* #contact { - padding-top: 100px; -} - -.contact { - position: relative; - z-index: 100; - background-color: var(--secondary-color); - width: var(--max-width); - padding: 2rem 2rem; - margin-top: 0rem; -} - -.contact h2 { - text-align: center; -} - -.contact-form { - display: flex; - align-items: center; - justify-content: space-between; -} - -.contact-form .left { - flex: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.contact-form .right { - flex: 1; - padding-left: 20px; -} - -.right .form-control { - width: 100%; - max-width: 600px; */ -/* Adjust the maximum width as needed */ -/* } */ - -/* Additional styling for responsiveness */ -/* @media (max-width: 768px) { - .contact-form { - flex-direction: column; - } - - .contact-form .right { - padding-left: 0; - margin-top: 10px; */ -/* Adjust as needed */ -/* } -} */ - -/* Updated Contact section */ -.container { - position: relative; - width: 100%; -} - -.items { - width: 100%; - height: 600px; - max-width: 1100px; - border-radius: 20px; - overflow: hidden; - background: #0000001a; - backdrop-filter: blur(10px); - margin: 50px; - grid-template-columns: 1fr 2fr; - display: grid; - z-index: 10; - box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, - rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, - rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; -} -body.dark-theme .items { - background: #0000001a; - backdrop-filter: blur(10px); - box-shadow: rgba(255, 255, 255, 0.25) 0px 50px 100px -20px, - /* Light shadow */ rgba(255, 255, 255, 0.3) 0px 30px 60px -30px, - /* Light shadow */ rgba(255, 255, 255, 0.35) 0px -2px 6px 0px inset; /* Light inset shadow */ -} - -.contact { - background-color: var(--extra-light); -} - -.contact h1 { - color: #ab45e7; - - font-family: "Noto Serif", serif; - font-size: 2.8rem; - - text-align: center; - margin: 20px; -} - -.contact p { - color: #dda0dde8; - font-weight: 400; - text-align: center; - margin-top: 10px; - font-size: 15px; - padding-left: 10px; - padding-right: 10px; -} - -.contact img { - height: 400px; - width: 400px; -} - -/* .contact-form{ - position: relative; - justify-content: center; - align-items: center; -} */ - -.contact-form form { - padding: auto; -} - -.contact-form h1 { - display: none; -} - -.contact-form input { - width: 50%; - padding-left: 10px; - padding-bottom: 10px; - margin: 20px; - margin-left: 30px; - outline: none; - border: none; - font-size: 15px; - background: none; - border-bottom: 2px solid var(--extra-light); - color: var(--extra-light); - font-family: "Oxygen", sans-serif; -} - -.contact-form input::placeholder { - color: var(--Text-Color); -} - -.contact-form #Name { - margin-top: 100px; -} - -.contact-form h4 { - color: var(--extra-light); - font-weight: 300; - font-size: 15px; - font-family: "Oxygen", sans-serif; - margin-right: 150px; - margin-top: 20px; -} - -.contact-form textarea { - background: none; - border: none; - padding: 10px; - margin: 20px; - margin-top: 10px; - margin-left: 30px; - border-bottom: 2px solid var(--extra-light); - color: var(--extra-light); - font-weight: 200; - font-size: 15px; - outline: none; - width: 50%; -} - -.icon1 { - position: absolute; - top: calc(65%); - left: 26.4%; - color: grey; -} -.icon2 { - position: absolute; - top: calc(33%); - left: 26.4%; - color: grey; -} -.icon3 { - position: absolute; - top: calc(30%); - left: 26.4%; - color: grey; -} - -textarea::-webkit-scrollbar { - width: 1em; -} - -/* .contact-form #button{ - border: none; - cursor: pointer; - transition: 0.5s ease-in-out; - background: var(--extra-light); - border-radius: 30px; - margin-top: 60px; - font-weight: 600; - font-size: 20px; - width: 100px; - padding: 10px; - margin-left: 176px; - margin-bottom: 30px; - transition: 0.3s; - color: #ab45e7; -} - -.contact-form #button:hover , #feedback:hover { - opacity:0.71; -} - -#feedback{ - border: none; - border-radius: 30px; - padding: 10px 16px; - font-weight: 600; - font-size: 20px; - background-color: #ab45e7; - color: var(--extra-light); -} */ - -@media (max-width: 920px) { - .items { - grid-template-columns: 1fr; - } - - .contact { - display: none; - } - - .contact-form h1 { - display: block; - color: var(--extra-light); - text-align: center; - margin-top: 20px; - } - - .contact-form input { - width: 75%; - } - - .contact-form textarea { - width: 75%; - } - .icon1 { - left: 14.8%; - } - .icon2 { - left: 14.8%; - } - .icon3 { - left: 14.8%; - } -} - -@media (max-width: 1000px) { - .items { - display: flex; - flex-direction: column; - height: 100%; - margin: auto; - padding: 2rem; - } - - .contact { - display: block; - } - - .contact img { - height: 300px; - width: 300px; - display: block; - margin-left: auto; - margin-right: auto; - } - - .contact-form h1 { - display: none; - } - .icon1 { - left: 14.8%; - } - .icon2 { - left: 14.8%; - } - .icon3 { - left: 14.8%; - } -} - -.contact-form input, -.contact-form textarea { - width: 50%; - padding-left: 10px; - padding-bottom: 10px; - margin: 20px; - margin-left: 30px; - outline: none; - border: none; - font-size: 15px; - background: none; - border-bottom: 1px solid var(--text-dark); - /* Change line color */ - color: var(--text-dark); - font-family: "Oxygen", sans-serif; -} - -.contact-form input::placeholder, -.contact-form textarea::placeholder { - color: var(--text-dark); -} - -@media (max-width: 920px) { - .contact-form input, - .contact-form textarea { - width: 75%; - color: var(--text-dark); - } - .icon1 { - left: 14.8%; - } - .icon2 { - left: 14.8%; - } - .icon3 { - left: 14.8%; - } -} - -@media (max-width: 700px) { - .contact-form input, - .contact-form textarea { - width: 75%; - color: var(--text-dark); - } - .icon1 { - left: 14.8%; - } - .icon2 { - left: 14.8%; - } - .icon3 { - left: 14.8%; - } -} - -/* Custom scrollbar for WebKit browsers */ -body::-webkit-scrollbar { - width: 8px; - /* Width of the scrollbar */ -} - -body::-webkit-scrollbar-thumb { - background-color: var(--primary-color); - /* Color of the scrollbar thumb */ - border-radius: 6px; - /* Rounded corners of the thumb */ -} - -body::-webkit-scrollbar-track { - background-color: var(--extra-light); - /* Color of the scrollbar track */ -} - -body::-webkit-scrollbar-thumb:hover { - background-color: var(--primary-color-dark); - /* Color of the thumb on hover */ -} - -/* Custom scrollbar for Firefox */ -body { - scrollbar-width: thin; - scrollbar-color: var(--primary-color) var(--extra-light); -} - -body:hover { - scrollbar-width: thin; - scrollbar-color: var(--primary-color-dark) var(--extra-light); -} - -body { - background-color: #eee; - margin-top: 20px; -} - -.card { - box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%); -} - -/* .nav-tabs-custom .nav-item .nav-link.active { - color: #6c6ff5; -} */ - -.nav-tabs-custom .nav-item .nav-link { - border: none; -} - -.text-muted { - color: #8ca3bd !important; -} - -.nav-tabs-custom .nav-item { - position: relative; - color: #271050; -} - -/* .nav-tabs-custom .nav-item .nav-link.active:after { - -webkit-transform: scale(1); - transform: scale(1); -} */ - -.nav-tabs-custom .nav-item .nav-link::after { - content: ""; - background: #6c6ff5; - height: 2px; - position: absolute; - width: 100%; - left: 0; - bottom: -1px; - -webkit-transition: all 250ms ease 0s; - transition: all 250ms ease 0s; - -webkit-transform: scale(0); - transform: scale(0); -} - -/* Testimonials Section */ - -.testimonials { - /* z-index: 100; */ - background-color: var(--secondary-color); - /* max-width: var(--max-width); */ - padding: 5rem 5rem; - margin-top: -3rem; -} - -.testimonial-heading { - text-align: center; - margin-bottom: 50px; - color: #3685fb; - font-weight: 600; -} - -.marquee { - position: relative; - width: 100vw; - max-width: 100%; - height: 500px; - overflow-x: hidden; - display: inline-block; -} - -.track { - position: absolute; - /* white-space: nowrap; - will-change: transform; */ - animation: marquee 32s linear infinite; -} - -@keyframes marquee { - from { - transform: translateX(0); - } - to { - transform: translateX(-50%); - } -} - -.testimonial-container { - display: flex; - gap: 50px; - padding: 20px; -} - -.testimonial-container::-webkit-scrollbar { - display: none; -} - -.testimonial-user { - display: flex; - justify-content: flex-start; - flex-flow: column nowrap; - align-items: center; - background: #efefef; - height: 400px; - width: 350px; - max-width: 90%; - margin-top: 50px; - padding: 0 20px 20px 20px; - border-radius: 20px; - - box-shadow: 0 0 27px 0 rgb(0 0 0 / 5%); -} - -.testimonial-user > div { - display: flex; - flex-flow: column nowrap; - justify-content: space-between; -} - -.testi-img { - width: 120px; - height: 120px; - aspect-ratio: 1/1; - border-radius: 50%; - object-fit: cover; - transform: translate(0, -50%); - box-shadow: 0 0 0 10px var(--testimonials-img-border); -} - -.fa-quote-left, -.fa-quote-right { - font-size: 16px; - color: #3685fb; - padding: 0.5rem; -} - -.user-info h3 { - color: #3685fb; - font-size: 18px; - font-weight: 600; -} - -/* New NAvbar CSS Starts Here*/ - -.nav-container { - margin-top: 0; - height: auto; - width: 200%; - display: flex; - justify-content: flex-start; - align-items: center; - position: fixed; - left: 0; - z-index: 9999; -} - -.newNav { - display: flex; - justify-content: space-between; - align-items: center; - gap: 0.5rem; - height: auto; - width: 100%; - padding: 1rem 2rem; -} - -.navLinks { - display: flex; - justify-content: center; - align-items: center; - font-size: 1.16rem; - list-style: none; - gap: 0.97rem; - position: relative; - top: 0.5rem; - z-index: 10; - right: 24px; -} - -.link a { - position: relative; -} - -.link a::before { - position: absolute; - content: ""; - height: 2px; - width: 0%; - bottom: -5px; - left: 0; - background-color: red; -} - -.link a::after { - position: absolute; - content: ""; - height: 2px; - width: 0%; - top: -5px; - right: 0; - background-color: red; - transition: all 0.2s ease-in-out; -} - -.link a:hover::before { - width: 100%; - transition: all 0.2s ease-in-out; -} - -.link a:hover::after { - width: 100%; - transition: all 0.2s ease-in-out; -} -.contact-btn { - position: relative; - right: 15px; - box-sizing: border-box; -} - -.hamburger { - height: 2rem; - width: 1.7rem; - display: flex; - justify-content: space-between; - flex-direction: column; - display: none; - transition: 0.2s; -} - -.line { - height: 5px; - width: 100%; - background-color: white; - border-radius: 2px; -} - -@media screen and (max-width: 1220px) { - .hamburger { - display: flex; - cursor: pointer; - } - .nav__logo { - margin-left: 0px; - } - .navLinks { - position: absolute; - top: 70px; - background-color: #091020; - width: 0%; - left: 0; - height: 100vh; - padding: 2rem 0; - flex-direction: column; - transition: 0.2s; - overflow: hidden; - } - - .navLinks li { - width: 100%; - padding: 0.5rem 0; - background-color: #1f2532; - z-index: 10; - } - - #toggle { - font-size: 0.6rem; - } -} -.footer-head { - position: relative; - display: inline-block; - padding: 10px 0; -} - -/* .footer-head::before, -.footer-head::after { - content: ""; - position: absolute; - width: 0; - height: 2px; - background-color: red; - transition: width 0.2s ease-in; -} */ - -.footer-head::before { - top: 0; - left: 50%; - transform: translateX(-50%); -} - -.footer-head::after { - bottom: 0; - left: 50%; - transform: translateX(-50%); -} - - /* .footer-head:hover::before { - width: 100%; - } - .footer-head:hover::after { - width: 100%; - } */ -.navLinks:active { - color: red; -} - -.navLinks.activeHamburger { - width: 100%; -} -/* @media screen and (max-width: 1146px) { - .toggle-container { - position: relative; - right: 148px; - } - .hamburger { - position: relative; - right: 150px; - } -} */ -/* @media only screen and (max-width:957px){ - .toggle-container{ - left: 30px; - } - .hamburger{ - left: 30px; - } -} */ -/* @media screen and (max-width: 846px) { - .toggle-container { - position: relative; - right: 200px; - } - .hamburger { - position: relative; - right: 245px; - } - .btn { - position: relative; - right: 57px; - top: 1px; - } -} */ -@media screen and (max-width: 652px) { - .toggle { - width: 5vw; - } - .line { - width: 5vw; - } - .newNav img { - position: relative; - bottom: 23px; - left: 109px; - } - .nav__logo { - position: relative; - left: 85px; - bottom: 20px; - } - .btn { - position: relative; - top: 30px; - left: -147px; - } -} -@media only screen and (max-width:577px){ - .but{ - position: relative; - top: -37px; - left: 85px; - } -} -@media only screen and (max-width: 465.5px){ - .newNav img{ - position: relative; - left: -58px; - } - .nav__logo{ - position: relative; - left: -82px; - } - .but{ - position: relative; - left:17px; - top: -4px; - } - .but2{ - position: relative; - left: 30px; - top: -2px; - } -} -/* @media screen and (max-width: 430px) { - .toggle-container { - right: 374px; - } - .newNav img { - left: 75px; - } - .nav__logo { - left: 36px; - } -} */ -/* New NAvbar CSS Ends Here*/ -/* #canvas { - background: #232323; - width: 300%; - position: absolute; - z-index: -9999; - left: 0; - top: 0; - height: 800%; -} */ - -/* body, html { - background: #090d00; -} */ - -/* BACKGROUND */ - -#bg { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: -1; -} - -#bg canvas { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -/* ///////////////////// */ - -/* Sub-header Hover Effect */ -.sub__header:hover { - background-color: transparent; - color: var(--primary-color); - transition: color 0.3s ease; /* Smooth transition for color change */ -} - -/* Light Mode and Dark Mode of AboutUs */ -.headingofAbout { - font-weight: bold; /* Make the heading bold */ - text-align: center; - color: yellow; /* Set heading color to yellow */ - font-size: 2.5rem; /* Increase font size */ - margin: 20px 0; /* Add margin for spacing */ - text-shadow: - -1px -1px 0 #000, - 1px -1px 0 #000, - -1px 1px 0 #000, - 1px 1px 0 #000; /* Dark black outline around each letter */ - font-family: 'Roboto', sans-serif; /* Use Roboto font family */ -} - -/* Styling for elements with .aboutcon class */ -.aboutcon { - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - background: linear-gradient(135deg, #7b4397, #dc2430); /* Gradient background */ - padding: 40px 20px; /* Add padding for spacing */ - border-radius: 10px; /* Rounded corners */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */ - transition: background-color 0.3s ease; /* Smooth transition for background color */ -} - -/* Styling for elements with .aboutcontent class */ -.aboutcontent { - text-align: center; - color: black; - margin-bottom: 20px; - flex: 1 1 300px; /* Make flex items responsive */ - padding: 20px; - background-color: rgba(255, 255, 255, 0.8); /* Background color for content */ - border-radius: 10px; /* Rounded corners */ - transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition for transform and background color */ -} - -/* Hover Effect for aboutcontent */ -.aboutcontent:hover { - transform: scale(1); /* Slightly enlarge on hover */ - background-color: rgba(255, 255, 255, 1); /* Change background color on hover */ -} - -/* Media Queries for Responsiveness */ -@media (max-width: 768px) { - .aboutcon { - flex-direction: column; /* Stack items vertically on small screens */ - } - - .headingofAbout { - font-size: 2rem; /* Adjust font size for smaller screens */ - } -} -/* Adjust hover effect for touch devices */ -@media (hover: none) { - .aboutcontent:hover { - transform: none; /* Remove scaling on touch devices */ - } -} - - -/* Styling for SVG elements inside .iconss class */ -.iconss svg { - width: 100px; - height: 90px; - fill: none; - stroke-width: 2; - align-items: end; - stroke-linecap: round; - stroke-linejoin: round; - transition: all 0.3s ease-in-out; - display: inline-block; - box-shadow: 10px 70px 50px -1px rgba(176, 69, 137, 0.19); - background-color: transparent; - border-radius: 20px; -} - -/* Styling for elements with .iconss class */ -.iconss { - color: var(--foot-light); - /* Use the text-dark custom property for color */ -} - -/* Hover effect for SVG elements inside .iconss class */ -.iconss:hover svg { - stroke: #d51459; -} - -/* Styling for h3 elements inside .aboutcontent class */ -.aboutcontent h3 { - font-size: 1.5rem; - margin-top: 10px; -} - -/* Styling for p elements inside .iconss class */ - -.iconss p { - font-size: 1rem; - color: var(--foot-light); - /* Use the text-dark custom property for color */ - font-style: oblique; -} - -/* Styling for elements with .box1 class */ -.box1 { - height: 175px; - background-color: #d1f1f4; - align-items: center; - align-content: center; - border: 0.5px solid; - border-color: var(--text-dark); - /* Use the text-dark custom property for color */ - - border-radius: 20px; - display: flex; - margin-bottom: 10px; - justify-content: center; -} - -.color { - background-color: transparent; - /* Use the text-dark custom property for color */ -} - -/* Styling of AboutUs ended here */ -.custom-btn { - background-color: rgb(73, 185, 185); - color: black; - padding: 10px 20px; - border: none; - cursor: pointer; -} - -.custom-btn:hover { - background-color: #5f8fd2; -} - -.section_container .gallary_container { - /* border: 2px solid green; */ - width: auto; - place-items: center; - place-content: center; -} - -#toggle { - background-color: transparent; - border: none; - cursor: pointer; -} - -#toggle i { - font-size: 24px; - /* Adjust the size as needed */ - color: white; - transition: color 0.3s; -} - -#toggle:hover i { - color: #ffffff80; - /* 80% opacity white for hovering effect */ -} - -.goupbtn { - position: fixed; - width: 50px; - height: 50px; - background-color: #002152; - bottom: 20px; - left: 25px; - bottom: 17px; - border-radius: 50%; - box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); - text-decoration: none; - color: white; - text-align: center; - line-height: 50px; - font-size: 22px; - transition: all 0.5s; - transition: box-shadow 0.3s; /* Added transition for box-shadow */ - display: none; -} - -.goupbtn:hover { - background-color: #004080; - transform: scale(1.1); - box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5), 0 0 25px black, 0 0 50px black, - 0 0 200px black; -} - -/* Testimonial Section */ -@media (min-width: 320px) { - .testimonials { - flex-direction: column; - } -} -@media (min-width: 481px) { - .testimonials { - flex-direction: column; - } -} - -.testimonials { - position: relative; - width: 100%; - border-radius: 2%; - min-height: 100vh; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - background-color: #91b4ffe7; - overflow: hidden; - margin-bottom: 50px; - top: 45px; -} - -.swiper-slide { - background-position: center; - background-size: cover; - width: 320px; - background-color: #00ffe7; - box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2); - filter: blur(4px); - border-radius: 2%; -} -.swiper-slide-active { - filter: blur(0px); - background-color: white; - border-radius: 2%; -} -.testimonialContent { - border-radius: 2%; -} - -.testimonialBox { - border-radius: 100%; - position: relative; - width: 100%; - height: 100%; - padding: 40px; - padding-top: 90px; - color: #999; -} -.testimonialBox .quote { - position: absolute; - height: 80px; - width: 80px; - top: 20px; - right: 30px; - bottom: 20px; - opacity: 0.2; -} - -.testimonialBox .details { - display: flex; - align-items: center; - margin-top: 20px; -} -.testimonialBox .details .imgBX { - position: relative; - width: 60px; - height: 60px; - border-radius: 50%; - overflow: hidden; - margin-right: 10px; -} -.testimonialBox .details .imgBX img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; -} -.testimonialBox .details h3 { - font-size: 16px; - font-weight: 400; - letter-spacing: 1px; - color: hotpink; - line-height: 1.1em; -} -.testimonialBox .details h3 span { - font-size: 12px; - color: blue; - margin-left: 20px; -} - -.swiper-container-3d .swiper-slide-shadow-left, -.swiper-container-3d .swiper-slide-shadow-left { - background-image: none; -} - -/* CSS for small devices */ -@media (max-width: 1200px) { - .header__image img:nth-child(1) { - max-width: 30vw; - transform: translate(-75%, -50%); - } - - .header__image img:nth-child(2) { - max-width: 20vw; - transform: translate(0%, -25%); - } -} - -@media (max-width: 1000px) { - .nav__links { - display: none; - } - - .header__container { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; - gap: 2rem; - margin-top: 5rem; - } /* Adjust padding for smaller devices */ - .header__image img:nth-child(1) { - position: relative; - top: 0; - left: 0; - transform: translate(0%, 0%); - } - .header__image { - width: 100%; - display: flex; - justify-content: center; - align-items: center; - } - .header__image img:nth-child(2) { - position: absolute; - transform: translate(26%, 9%); - } - .newNav { - flex-wrap: wrap; - } - .aboutcon { - padding: 1rem; - } - .header__image { - /* Remove minimum height for smaller devices */ - padding-top: 20px; /* Add padding to center content vertically */ - } - .VIpgJd-ZVi9od-l4eHX-hSRGPd img { - object-fit: contain; - } - .header__image img:nth-child(1) { - max-width: 60vw; /* Adjust image size for smaller devices */ /* Center image horizontally and vertically */ - } - - .header__image img:nth-child(2) { - max-width: 30vw; /* Adjust image size for smaller devices */ - } - - .header__content { - /* Adjust padding for smaller devices */ - padding-top: 0; - text-align: center; /* Center align text */ - } - - .header__content h1 { - font-size: 1rem; /* Adjust font size for smaller devices */ - line-height: 1rem; /* Adjust line height for smaller devices */ - width: auto; /* Remove fixed width */ - height: auto; /* Remove fixed height */ - } - .header__content p { - padding: 10px; - font-size: 1rem; - } - - .header__content .action__btns { - flex-direction: column; /* Stack buttons vertically */ - gap: 1rem; /* Add gap between buttons */ - margin-top: 1rem; /* Adjust top margin */ - } - - .section__subtitle { - font-size: 0.7rem; /* Adjust font size for smaller devices */ - padding: 0 10px; /* Add vertical padding */ - text-align: center; /* Center align text */ - margin: 0 auto; /* Center the subtitle */ - } -} -/*STYLE FOR SIDE DISCOUNT DIVISION*/ - -.popup { - position: fixed; - bottom: 20px; - left: 20px; - background:linear-gradient(to right,rgb(222, 125, 222),rgb(222, 177, 222)); - border: 1px solid #cccccc; - padding: 20px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - border-radius: 5px; - width: 300px; - height:260px; - z-index: 1000; - display: none; /* Initially hide the popup */ -} - -.popup h2 { - font-size: 1.5em; - margin-top: 0; -} - -.popup p { - margin-bottom: 15px; -} - -form { - align-items: center; -} - -input[type="email"] { - padding: 10px; - width: 250px; - border: 1px solid #ccc; - border-radius: 3px; - margin-right: 10px; - margin-bottom: 10px; - font-size: 14px; -} - -button { - padding: 10px 20px; - background-color: #7325b3; - color: white; - border: none; - border-radius: 3px; - cursor: pointer; - font-size: 14px; - margin-bottom: 3px; -} - -button:hover { - background-color: #6200b3; -} - -.close-btn { - position: absolute; - top: 10px; - right: 10px; - cursor: pointer; - font-size: 24px; - color: #0d0101; -} -.pop_up_heading{ - font-size: 20px; - color:rgb(109, 27, 109); - font-weight:bold; -} -.pop_up_content{ - font-size: 13px; - color:white; -} - -@media (max-width: 768px) { - .header__image img:nth-child(1) { - max-width: 50vw; /* Adjust image size for smaller devices */ - transform: translate( - -90%, - -40% - ); /* Center image horizontally and vertically */ - } - - .header__image img:nth-child(2) { - max-width: 30vw; /* Adjust image size for smaller devices */ - transform: translate(-30%, -75%); /* Center image vertically */ - } - - .header__content h1 { - font-size: 1.5rem; /* Adjust font size for smaller devices */ - line-height: 1.5rem; /* Adjust line height for smaller devices */ - } - - .header__content .action__btns { - gap: 1.5rem; /* Add gap between buttons */ - } - - .section__subtitle { - font-size: 0.8rem; /* Adjust font size for smaller devices */ - max-width: 40%; /* Limit width to prevent overflow */ - } - - .newNav { - justify-content: right; - gap: 27px; - } - .nav-container { - width: 100%; - justify-content: center; - font-size: small; - } -} - -a { - position: relative; - text-decoration: none; - color: black; - font-size: 18px; -} -a::after { - content: ''; - position: absolute; - width: 0%; - height: 2px; - bottom: -5px; - left: 0; - background-color: black; - transition: all 0.3s ease-in-out; -} -a:hover { - color: red; -} -a:hover::after { - width: 100%; - background-color: red; -} -/* Footer specific styles */ -.footer__link { - position: relative; - text-decoration: none; - color: black; - font-size: 18px; -} -.footer__link::after { - content: ''; - position: absolute; - width: 0%; - height: 2px; - bottom: -5px; - left: 0; - background-color: black; - transition: all 0.3s ease-in-out; -} -.footer__link:hover { - color: red; -} -.footer__link:hover::after { - width: 100%; - background-color: red; -} \ No newline at end of file