made layout changes

This commit is contained in:
mesafal
2025-02-16 17:55:34 +05:45
parent a507a84c66
commit e2a8ccc8b6
23 changed files with 414 additions and 191 deletions

View File

@ -1,5 +1,79 @@
/* margin */
.mt-5{
margin-top: 5px;
}
.mt-10{
margin-top: 10px;
}
.mt-15{
margin-top: 15px;
}
.mt-25{
margin-top: 25px;
}
.mt-35{
margin-top: 35px;
}
.padding-t-sm{
padding-top: 40px;
}
.padding-t-md{
padding-top: 80px;
}
.padding-t-lg{
padding-top: 120px;
}
.padding-b-sm{
padding-bottom: 40px;
}
.padding-b-md{
padding-bottom: 80px;
}
.padding-b-lg{
padding-bottom: 120px;
}
/* padding */
.pt-5{
padding-top: 5px;
}
.pt-10{
padding-top: 10px;
}
.pt-15{
padding-top: 15px;
}
.pt-25{
padding-top: 25px;
}
.pt-35{
padding-top: 35px;
}
.pb-5{
padding-bottom: 5px;
}
.pb-10{
padding-bottom: 10px;
}
.pb-15{
padding-bottom: 15px;
}
.px-5{
padding-left: 5px !important;
padding-right: 5px !important;
}
.text-14{
font-size: 14px !important;
}
.header-main {
justify-content: space-between;
padding-left: 0 !important;
}
.faq-sidebar img {
@ -34,7 +108,9 @@
.car-image {
text-align: center; /* Centers the image horizontally */
margin-bottom: 15px; /* Adds spacing below the image */
border-radius: 8px 8px 0;
}
.car-image img {
@ -45,6 +121,7 @@
.car-content {
padding: 10px; /* Adds spacing around the content */
width: 100%;
}
.star i {
@ -75,6 +152,7 @@
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.car-item img {
@ -123,8 +201,10 @@
.header-1 .header-main .header-left {
display: flex;
align-items: center;
gap: 190px;
gap: 100px !important;
transform: translateX(75px); /* Moves the element 20px to the right */
justify-content: space-between;
margin-left: -83px; /*added margin left to align with container width */
}
@media (max-width: 900px) {
.search-text,
@ -168,10 +248,14 @@
cursor: pointer;
font-weight: bold;
}
.logo img {
.logo {
width: 120px; /* Adjust the width */
height: 60px; /* Maintain aspect ratio */
}
.logo img{
width: 100%;
height: 100%;
}
a:hover {
color: #f39c12;
text-decoration: underline;
@ -210,15 +294,16 @@ a:hover {
color: #555;
}
.theme-btn {
.theme-btn {
background-color: #007bff;
color: #fff;
border: none;
padding: 12px 30px;
padding: 12px 35px;
border-radius: 30px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
width: 40%;
}
.theme-btn:hover {
@ -342,8 +427,9 @@ a:hover {
font-size: 18px;
border: none;
cursor: pointer;
width: 100%;
width: 40%;
transition: background-color 0.3s ease;
text-align: center;
}
.theme-btn:hover {

View File

@ -25,6 +25,7 @@ Version: 1.0.0
--box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
}
.theme-btn {
background-color: var(--theme);
color: var(--white);
@ -1363,7 +1364,7 @@ span {
box-shadow: none;
border: 10px solid rgb(208, 215, 222);
padding: 40px 30px;
margin-top: -180px;
margin-top: -95px;
}
@media (max-width: 1199px) {
.pickup-wrapper.style-2 {
@ -1625,7 +1626,7 @@ span {
.services-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
/* gap: 20px; */
justify-content: center;
}
@ -1633,9 +1634,10 @@ span {
background: #ffffff;
border-radius: 10px;
padding: 20px;
width: 300px;
height: 240px;
/* width: 300px; */
text-align: center;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
@ -2175,6 +2177,7 @@ span {
.galley-wrapper-2 .gallery-items .g-items {
position: relative;
width: 100%;
object-fit: cover;
height: 100%;
margin: 25px;
overflow: hidden;
@ -2580,7 +2583,7 @@ span {
}
.footer-widgets-wrapper {
padding: 50px 0 80px;
padding: 50px 0;
position: relative;
z-index: 9;
}
@ -2867,7 +2870,7 @@ span {
display: flex;
align-items: center;
gap: 20px;
margin-left: 230px;
/* margin-left: 230px */
}
@media (max-width: 1399px) {
.header-top-wrapper .contact-list {
@ -3081,6 +3084,7 @@ span {
display: flex;
align-items: center;
gap: 80px;
}
.header-1 .header-main .main-menu ul li a {
font-weight: 500;
@ -4393,6 +4397,8 @@ span {
.hero-3 {
position: relative;
width: 100%;
height: 90vh !important;
}
@media (max-width: 991px) {
.hero-3 .array-button {
@ -4512,6 +4518,7 @@ span {
position: relative;
padding: 315px 0;
z-index: 9;
margin-top: -150px;
}
@media (max-width: 1399px) {
.hero-3 .hero-content {
@ -4810,6 +4817,7 @@ span {
.news-card-items .news-content .post-client img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.news-card-items .news-content .news-cont {
padding: 30px;
@ -4848,6 +4856,12 @@ span {
.news-card-items .news-content ul a:hover i {
color: var(--theme);
}
.news-card-items .news-image{
border-radius:10px 10px 0 0 !important;
}
.news-card-items .news-image:hover{
border-radius:10px 10px 0 0 !important;
}
.news-card-items:hover .news-image img {
transform: scale(1.1);
border-radius: 10px;
@ -5561,6 +5575,7 @@ input.main-search-input::placeholder {
font-size: 15px;
font-weight: 400;
letter-spacing: 1.3px;
}
.car-rentals-items:hover .car-image img {
transform: scale(1.1);
@ -6005,6 +6020,10 @@ input.main-search-input::placeholder {
padding: 0 30px;
}
}
.car-slider-wrapper .car-slider-image{
height: 150px;
object-fit: cover;
}
.car-slider-wrapper .car-slider-image img {
width: 100%;
height: 100%;
@ -6944,11 +6963,35 @@ input.main-search-input::placeholder {
.testimonial-section-3 {
position: relative;
}
.testimonial-section-3 .title {
font-size: 36px;
color: #222;
text-transform: uppercase;
margin-bottom: 20px;
font-family: 'Lexend', sans-serif;
text-align: center;
padding: 20px 0;
}
.testimonial-wrapper-2 .testimonial-single-items {
display: flex;
gap: 70px;
gap: 20px;
/* border: 1px solid black; */
border-bottom: 0.001px solid rgb(197, 195, 195);
box-shadow: 0 5px 10px grey;
background-color: white;
height: 250px;
padding: 10px 20px;
}
@media (max-width: 991px) {
.testimonial-wrapper-2 .testimonial-single-items {
height: auto;
width: 100%;
}
}
@media (max-width: 991px) {
.testimonial-wrapper-2 .testimonial-single-items {
flex-wrap: wrap;
@ -6960,14 +7003,16 @@ input.main-search-input::placeholder {
.testimonial-wrapper-2 .testimonial-single-items .testimonial-img {
display: block;
margin: 0 auto;
width: 136px;
height: 136px;
width: 50px;
height: 50px;
padding: 30px;
border: 6px solid #fff;
object-fit: cover;
border-radius: 50%;
position: relative;
margin-left: 20px;
margin-top: 5px;
background-color: white;
}
@media (max-width: 991px) {
.testimonial-wrapper-2 .testimonial-single-items .testimonial-img {
@ -6975,7 +7020,7 @@ input.main-search-input::placeholder {
margin: 5px auto 0;
}
}
.testimonial-wrapper-2 .testimonial-single-items .testimonial-img::after {
/* .testimonial-wrapper-2 .testimonial-single-items .testimonial-img::after {
position: absolute;
content: "";
top: 50%;
@ -6986,7 +7031,7 @@ input.main-search-input::placeholder {
border-radius: 50%;
background: linear-gradient(90deg, #FF3726, #0C142E);
z-index: -1;
}
} */
.testimonial-wrapper-2 .testimonial-single-items .testimonial-content {
flex-basis: 80%;
}
@ -6997,24 +7042,24 @@ input.main-search-input::placeholder {
}
.testimonial-wrapper-2 .testimonial-single-items .testimonial-content p {
margin: 0;
padding: 0 0 44px 0;
font-size: 34px;
padding: 0 0 10px 0;
font-size: 16px;
line-height: 1.5;
}
@media (max-width: 1199px) {
.testimonial-wrapper-2 .testimonial-single-items .testimonial-content p {
font-size: 30px;
font-size: 12px;
}
}
@media (max-width: 991px) {
.testimonial-wrapper-2 .testimonial-single-items .testimonial-content p {
font-size: 26px;
font-size: 14px;
padding: 0 0 35px 0;
}
}
@media (max-width: 767px) {
.testimonial-wrapper-2 .testimonial-single-items .testimonial-content p {
font-size: 24px;
font-size: 12px;
padding: 0 0 35px 0;
}
}
@ -7025,9 +7070,9 @@ input.main-search-input::placeholder {
}
}
.testimonial-wrapper-2 .testimonial-single-items .testimonial-content .name-job {
display: flex;
/* display: flex;
align-items: flex-end;
gap: 15px;
gap: 15px; */
}
@media (max-width: 991px) {
.testimonial-wrapper-2 .testimonial-single-items .testimonial-content .name-job {
@ -7050,6 +7095,7 @@ input.main-search-input::placeholder {
display: flex;
align-items: center;
gap: 10px;
margin-top: 80px;
}
.testimonial-wrapper-2 .client-img-items .client-img {
width: 60px;