diff --git a/index.html b/index.html
index ce514437..71769e39 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@
+
@@ -1126,11 +1127,20 @@ Subscribe to get special prize
-
-
-
+
diff --git a/styles.css b/styles.css
index 0cf21abd..69d69f03 100644
--- a/styles.css
+++ b/styles.css
@@ -1,27 +1,5 @@
-@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');
-
-
-.footer__link:hover {
- color: inherit;
-}
-
-.footer__link[href*="facebook.com"]:hover {
- color: #1877F2;
-}
-
-.footer__link[href*="twitter.com"]:hover {
- color: #1DA1F2; /
-}
-
-.footer__link[href*="instagram.com"]:hover {
- color: #E4405F;
-}
-
-.footer__link[href*="linkedin.com"]:hover {
- color: #0A66C2;
-}
-
+@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;
@@ -254,8 +232,6 @@
}
*/
-
-
/* new bubble end */
#scrollPath {
position: fixed;
@@ -287,8 +263,6 @@
--bubble-color: red;
--testimonials-img-border: red;
-
-
}
body {
@@ -297,13 +271,12 @@ body {
align-items: center;
background-color: #0e1525;
overflow-x: hidden;
-
}
#toggle {
display: inline-block;
border-radius: 50px;
- transition: all .4s ease-in-out;
+ transition: all 0.4s ease-in-out;
padding: 10px 10px;
background-color: transparent;
border: 2px solid #c6c9d8bf;
@@ -392,7 +365,7 @@ body {
font-weight: 600;
color: var(--text-dark);
margin-bottom: 15px;
-/* text-align: left; */
+ /* text-align: left; */
text-align: center;
display: inline-block;
font-weight: 600;
@@ -400,10 +373,13 @@ body {
line-height: 34px;
margin-bottom: 28px;
- background: #FD4766;
- background: linear-gradient(120deg, #1C99FE 20.69%, #7644FF 50.19%, #FD4766 79.69%);
- ;
-
+ background: #fd4766;
+ background: linear-gradient(
+ 120deg,
+ #1c99fe 20.69%,
+ #7644ff 50.19%,
+ #fd4766 79.69%
+ );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@@ -412,7 +388,7 @@ body {
font-size: 1rem;
color: var(--text-dark);
max-width: calc(var(--max-width) / 2);
-/* text-align: right; */
+ /* text-align: right; */
text-align: center;
}
@@ -467,11 +443,10 @@ body.dark-theme #send {
border: 0.0001px solid red;
color: slateblue;
}
-#send:hover{
+#send:hover {
background-color: slateblue;
border-color: slateblue;
color: #fff;
-
}
#send.focused {
background-color: slateblue;
@@ -485,13 +460,10 @@ body.dark-theme #send {
background-color: var(--primary-color-dark);
}
-
-
#btn-style {
-
/* display: inline-block; */
border-radius: 50px;
- transition: all .4s ease-in-out;
+ transition: all 0.4s ease-in-out;
padding-left: 20px;
padding-right: 20px;
width: auto;
@@ -574,12 +546,10 @@ nav {
color: #ff0000;
}
-
.home {
margin-left: 210px;
}
-
header {
background-color: var(--secondary-color);
}
@@ -617,7 +587,8 @@ header {
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),
+ 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);
@@ -653,7 +624,7 @@ header {
.header__image img {
position: absolute;
-
+
top: 50%;
left: 75%;
border: 0.5rem solid var(--img-color);
@@ -683,7 +654,7 @@ header {
gap: 1rem;
}
-.header__content>div {
+.header__content > div {
display: flex;
flex-direction: column;
justify-content: center;
@@ -867,7 +838,7 @@ header {
max-width: 100%;
}
-.story>span {
+.story > span {
font-size: 1rem;
font-weight: 600;
color: var(--text-dark);
@@ -1004,8 +975,6 @@ header {
.trip {
background-color: var(--secondary-color);
max-width: var(--max-width);
-
-
}
.trip_container :is(.sectiontitle, .sectionsubtitle, .view_all) {
@@ -1127,7 +1096,7 @@ header {
flex-direction: column;
}
-.gallary__content>div {
+.gallary__content > div {
max-width: 400px;
}
@@ -1181,7 +1150,6 @@ header {
display: flex;
align-items: center;
justify-content: center;
-
}
.subscribe__form form {
@@ -1195,16 +1163,15 @@ header {
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; */
-
+ 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%;
@@ -1220,10 +1187,19 @@ body.light-theme #emailInput {
color: black;
}
-
body.dark-theme #emailInput {
background-color: #222f4b;
- color:white ;
+ color: white;
+}
+
+*, *::before, *::after {
+ box-sizing: border-box;
+}
+
+body, html {
+ overflow-x: hidden;
+ margin: 0;
+ padding: 0;
}
.footer {
@@ -1232,53 +1208,39 @@ body.dark-theme #emailInput {
}
.footer__container {
+ width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
- justify-content: space-evenly;
align-items: flex-start;
grid-template-columns: repeat(3, 1fr);
- gap: 24px;
+ gap: 20px;
color: var(--secondary-color);
+ margin: 0;
+ padding: 0;
}
.footer__col {
+ margin-left: 15px;
flex: 1;
- display: flex ;
+ display: flex;
max-width: 200px;
- margin: 10px;
- padding: 5px;
text-align: left;
flex-direction: column;
}
-.social-icon{
- display: flex;
- flex-direction: column;
- gap: 20px;
-}
-.social-icon a {
- transition: transform 0.3s ease;
- padding: 10px;
-}
-.footer__text a{
+.footer__text a {
+ margin-top: 5px;
color: white;
}
-.footer__text a:hover{
+.footer__text a:hover {
color: red;
}
-.social-icon a:hover {
- transform: scale(1.1);
- color: white;
-}
-.footer:hover{
+.footer:hover {
background: linear-gradient(135deg, #654ea3, #eaafc8);
}
-
-
-
.footer__col h3 {
font-size: 1.5rem;
font-weight: 600;
@@ -1289,17 +1251,10 @@ body.dark-theme #emailInput {
color: var(--primary-color);
}
-/*.footer__col p {
- font-size: 0.8rem;
- cursor: pointer;
- transition: 0.3s;
-}
-*/
-
.footer__link {
color: white;
margin-right: 15px; /* Adjust spacing between icons */
- font-size: 1.3em; /* Initial font size */
+ font-size: 1em; /* Initial font size */
}
.footer__link:hover {
@@ -1321,24 +1276,91 @@ body.dark-theme #emailInput {
margin: auto;
padding: 0.5rem;
text-align: center;
- font-size: 0.8rem;
+ font-size: 1rem;
/* color: var(--secondary-color); */
color: var(--extra-light);
- border-top: 1px solid var(--text-light);
+ border-top: 2px solid var(--text-light);
}
-.footer__area{
- margin-left: 2.3rem;
+.footer__area {
+ margin-left: 2.3rem;
}
-.footer__area a{
- color: white;
+.footer__area a {
+ color: white;
}
-.footer__area a:hover{
+.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;
@@ -1503,15 +1525,16 @@ body.dark-theme #emailInput {
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;
+ 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 */
+ 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 {
@@ -1521,7 +1544,7 @@ body.dark-theme .items {
.contact h1 {
color: #ab45e7;
- font-family: 'Noto Serif', serif;
+ font-family: "Noto Serif", serif;
font-size: 2.8rem;
text-align: center;
@@ -1572,7 +1595,6 @@ body.dark-theme .items {
font-family: "Oxygen", sans-serif;
}
-
.contact-form input::placeholder {
color: var(--Text-Color);
}
@@ -1605,25 +1627,24 @@ body.dark-theme .items {
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;
- }
+.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;
@@ -1661,12 +1682,10 @@ textarea::-webkit-scrollbar {
} */
@media (max-width: 920px) {
-
.items {
grid-template-columns: 1fr;
}
-
.contact {
display: none;
}
@@ -1685,18 +1704,17 @@ textarea::-webkit-scrollbar {
.contact-form textarea {
width: 75%;
}
- .icon1{
- left:14.8%;
+ .icon1 {
+ left: 14.8%;
}
- .icon2{
- left:14.8%;
+ .icon2 {
+ left: 14.8%;
}
- .icon3{
- left:14.8%;
+ .icon3 {
+ left: 14.8%;
}
}
-
@media (max-width: 1000px) {
.items {
display: flex;
@@ -1721,14 +1739,14 @@ textarea::-webkit-scrollbar {
.contact-form h1 {
display: none;
}
- .icon1{
- left:14.8%;
+ .icon1 {
+ left: 14.8%;
}
- .icon2{
- left:14.8%;
+ .icon2 {
+ left: 14.8%;
}
- .icon3{
- left:14.8%;
+ .icon3 {
+ left: 14.8%;
}
}
@@ -1755,38 +1773,36 @@ textarea::-webkit-scrollbar {
}
@media (max-width: 920px) {
-
.contact-form input,
.contact-form textarea {
width: 75%;
color: var(--text-dark);
}
- .icon1{
- left:14.8%;
+ .icon1 {
+ left: 14.8%;
}
- .icon2{
- left:14.8%;
+ .icon2 {
+ left: 14.8%;
}
- .icon3{
- 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%;
+ .icon1 {
+ left: 14.8%;
}
- .icon2{
- left:14.8%;
+ .icon2 {
+ left: 14.8%;
}
- .icon3{
- left:14.8%;
+ .icon3 {
+ left: 14.8%;
}
}
@@ -1903,18 +1919,21 @@ body {
}
@keyframes marquee {
- from { transform: translateX(0); }
- to { transform: translateX(-50%); }
+ from {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(-50%);
+ }
}
-
.testimonial-container {
display: flex;
gap: 50px;
padding: 20px;
}
-.testimonial-container::-webkit-scrollbar{
+.testimonial-container::-webkit-scrollbar {
display: none;
}
@@ -1934,9 +1953,7 @@ body {
box-shadow: 0 0 27px 0 rgb(0 0 0 / 5%);
}
-
-.testimonial-user>div {
-
+.testimonial-user > div {
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
@@ -1952,9 +1969,6 @@ body {
box-shadow: 0 0 0 10px var(--testimonials-img-border);
}
-
-
-
.fa-quote-left,
.fa-quote-right {
font-size: 16px;
@@ -2039,7 +2053,7 @@ body {
width: 100%;
transition: all 0.2s ease-in-out;
}
-.contact-btn{
+.contact-btn {
position: relative;
right: 15px;
box-sizing: border-box;
@@ -2067,8 +2081,8 @@ body {
display: flex;
cursor: pointer;
}
- .nav__logo{
- margin-left:0px;
+ .nav__logo {
+ margin-left: 0px;
}
.navLinks {
position: absolute;
@@ -2093,7 +2107,6 @@ body {
#toggle {
font-size: 0.6rem;
}
-
}
.footer-head {
position: relative;
@@ -2103,7 +2116,7 @@ body {
.footer-head::before,
.footer-head::after {
- content: '';
+ content: "";
position: absolute;
width: 0;
height: 2px;
@@ -2123,89 +2136,87 @@ body {
transform: translateX(-50%);
}
-.footer-head:hover::before{
+.footer-head:hover::before {
width: 100%;
}
-.footer-head:hover::after{
+.footer-head:hover::after {
width: 100%;
}
.navLinks .link a:active {
- color:red;
-
+ color: red;
}
.navLinks.activeHamburger {
width: 100%;
}
-@media screen and (max-width: 1146px){
- .toggle-container{
+@media screen and (max-width: 1146px) {
+ .toggle-container {
position: relative;
right: 148px;
}
- .hamburger{
+ .hamburger {
position: relative;
right: 150px;
}
}
-@media screen and (max-width: 846px) {
- .toggle-container{
+@media screen and (max-width: 846px) {
+ .toggle-container {
position: relative;
right: 200px;
}
- .hamburger{
+ .hamburger {
position: relative;
right: 245px;
}
- .btn{
+ .btn {
position: relative;
right: 57px;
top: 1px;
}
}
- @media screen and (max-width:652px){
- .toggle{
+@media screen and (max-width: 652px) {
+ .toggle {
width: 5vw;
}
- .line{
+ .line {
width: 5vw;
}
- .newNav{
+ .newNav {
height: 130px;
}
- .newNav img{
+ .newNav img {
position: relative;
bottom: 35px;
left: 130px;
}
- .nav__logo{
+ .nav__logo {
position: relative;
left: 85px;
bottom: 35px;
}
- .btn{
+ .btn {
position: relative;
top: 30px;
left: -147px;
}
- .toggle-container{
+ .toggle-container {
position: relative;
top: 30px;
right: 377px;
}
- .hamburger{
+ .hamburger {
position: relative;
right: 388px;
}
}
-@media screen and (max-width:430px){
- .toggle-container{
+@media screen and (max-width: 430px) {
+ .toggle-container {
right: 374px;
}
- .newNav img{
+ .newNav img {
left: 75px;
}
- .nav__logo{
-
+ .nav__logo {
left: 36px;
}
}
@@ -2273,12 +2284,10 @@ body {
/* Styling for elements with .aboutcontent class */
.aboutcontent {
-
text-align: center;
color: var(--text-dark);
/* Use the text-dark custom property for color */
margin-bottom: 20px;
-
}
/* Styling for SVG elements inside .iconss class */
@@ -2380,8 +2389,6 @@ body {
#toggle:hover i {
color: #ffffff80;
/* 80% opacity white for hovering effect */
-
-
}
.goupbtn {
@@ -2407,10 +2414,10 @@ body {
.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;
+ 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 {
@@ -2432,7 +2439,7 @@ body {
flex-direction: column;
justify-content: center;
align-items: center;
- background-color:#91b4ffe7;
+ background-color: #91b4ffe7;
overflow: hidden;
margin-bottom: 50px;
}
@@ -2513,9 +2520,6 @@ body {
background-image: none;
}
-
-
-
/* CSS for small devices */
@media (max-width: 1200px) {
.header__image img:nth-child(1) {
@@ -2542,42 +2546,46 @@ body {
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%;
+ } /* 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 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 */
+ /* Remove minimum height for smaller devices */
padding-top: 20px; /* Add padding to center content vertically */
}
-.VIpgJd-ZVi9od-l4eHX-hSRGPd img{
- object-fit: contain;
-}
+ .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 */
+ .header__content {
+ /* Adjust padding for smaller devices */
padding-top: 0;
text-align: center; /* Center align text */
}
@@ -2588,8 +2596,7 @@ body {
width: auto; /* Remove fixed width */
height: auto; /* Remove fixed height */
}
- .header__content p
- {
+ .header__content p {
padding: 10px;
font-size: 1rem;
}
@@ -2612,7 +2619,10 @@ body {
@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 */
+ transform: translate(
+ -90%,
+ -40%
+ ); /* Center image horizontally and vertically */
}
.header__image img:nth-child(2) {
@@ -2643,7 +2653,6 @@ body {
justify-content: center;
font-size: small;
}
-
}
>