* {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-ms-scroll-behavior: smooth;
}
header {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
padding: 5px 10px;
background-color: #000;
color: #fff;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.logo {
-ms-flex-order: 1;
order: 1;
}
.logo img {
height: auto;
max-width: 80%;
}
.menu {
list-style: none;
padding: 0;
display: flex;
display: -ms-flexbox;
}
.menu li {
margin-right: 20px;
}
.menu li:last-child {
margin-right: 0;
}
.menu a {
text-decoration: none;
color: #fff;
font-weight: 600;
font-size: 16px;
}
.hamburger {
display: none;
/* Hide by default on larger screens */
cursor: pointer;
order: 3;
/* Set the order to 3 to move it to the right */
}
.line {
width: 25px;
height: 3px;
background-color: #fff;
margin: 5px 0;
}
/* Responsive styles */
@media (max-width: 768px) {
header {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.menu {
margin-top: 20px;
flex-direction: column;
}
.menu li {
margin-right: 0;
margin-bottom: 10px;
}
.hamburger {
display: block;
}
.menu {
display: none;
}
.menu.open {
display: flex;
}
}
.banner img {
width: 100%;
height: auto;
}
/* top header */
.top-header {
background: #000;
height: 29px;
z-index: 999;
width: 100%;
}
.top-h-con {
display: flex;
justify-content: space-around;
border-bottom: 1px solid #958c8c;
}
.top-h-con div {
display: flex;
align-items: center;
}
.top-h-con a {
text-decoration: none;
color: #fff;
font-weight: 600;
font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 35px;
text-align: center;
margin: 10px;
color: #d9e613;
}
p {
font-size: 17px;
/* color: #ffffff; */
color: #e6e6e6;
margin-bottom: 10px;
text-align: justify;
}
/* .mm-5 {
margin: 40px 0;
} */
.container {
width: 80%;
margin: 45px auto;
}
body {
background-color: #000;
user-select: none;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}
p span.hide { display:none; }
strong {
color: #fff700;
}
a {
color: #d9e613;
text-decoration: none;
}
strong:hover,
a:hover {
color: #ff0000;
}
.hvr-grl .gallery {
display: flex;
flex-wrap: wrap;
gap: 0px;
width: 100%;
justify-content: center;
}
.hvr-grl .gallery img {
width: 22%;
object-fit: cover;
cursor: pointer;
transition: transform 0.3s;
box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
object-fit: cover;
margin: 20px;
}
.hvr-grl .modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}
.hvr-grl .modal img {
max-width: 80%;
max-height: 80%;
}
.hvr-grl .close-button {
position: absolute;
top: 10px;
right: 10px;
color: #fff;
font-size: 80px;
cursor: pointer;
}
.hvr-grl .gallery img:hover {
transform: scale(1.05);
}
.g-pro .image-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.g-pro .image-box {
flex: 1 0 18%;
position: relative;
overflow: hidden;
}
.g-pro .image-box img {
width: 100%;
height: auto;
transition: transform 0.3s ease;
}
.g-pro .image-box a:hover img {
transform: scale(1.1);
}
.g-pro .image-name {
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 5px;
width: 100%;
text-align: center;
color: #811f8f;
font-weight: 600;
font-size: 17px;
}
.container ul {
margin-left: 40px;
}
.container ul li {
color: #e6e6e6;
font-size: 17px;
margin-bottom: 10px;
text-align: justify;
}
/* faq css */
.faq-new {
margin: 45px 0;
}
.faq-container {
/* max-width: 600px;
margin: 0 auto; */
width: 80%;
margin: auto;
}
.faq-question {
font-weight: bold;
cursor: pointer;
/* margin-bottom: 10px; */
color: #fff;
padding: 16px 10px;
margin-top: 8px;
background-color: #303211;
text-align: initial;
}
.faq-answer {
display: none;
/* margin-bottom: 20px; */
color: #666;
}
.faq-answer.show {
display: block;
padding: 14px 10px 15px 10px;
text-align: justify;
font-size: 16px;
}
.faq-question::after {
content: '+';
float: right;
color: #fff;
}
.faq-question.active::after {
content: '-';
}
.faq-item {
background-color: #e4f8ff;
}
/* end faq/ */
footer {
background-color: #242420;
}
.top-footer {
display: flex;
padding: 70px 10px;
}
.f-headr {
font-size: 25px;
font-weight: 600;
margin-bottom: 20px;
color: #fff;
text-align:justify;
}
.f-colomn .contat-inf ul{
list-style: none;
}
.f-colomn {
width: 25%;
margin: 0 auto;
text-align: left;
padding: 0 20px;
}
.f-colomn p {
color: #b5b5b5;
}
.contat-inf a {
display: block;
text-decoration: none;
color: #b5b5b5;
font-size: 17px;
margin-bottom: 7px;
padding:4px;
}
.copyrht {
color: #fff;
padding: 15px;
background-color: #161515;
display: block;
text-align:center;
}
.copyrht a {
color: #d9e613;
text-decoration: underline;
}
.cont-ft-ch {
text-align: left;
}
.contat-inf a:hover {
color: #ffffff;
}
.copyrht a:hover {
color: #ffffff;
}
/* call and whatsapp icon bottom right */
.bottom-icons {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
flex-direction: column;
z-index: 1000;
}
.bottom-icons .icon {
width: 50px;
height: 50px;
margin-top: 10px;
cursor: pointer;
}
.bottom-icons .icon a {
display: block;
width: 100%;
height: 100%;
}
.whatsapp-icon img,
.call-icon img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.whatsapp-icon img:hover,
.call-icon img:hover {
width: 110%;
height: 110%;
transition: .2s;
}
.f-cont-link {
margin-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
background-color: #d9e613 !important;
font-size: 18px;
font-weight: 600;
text-align: center;
}
th,
td {
border: 1px solid rgb(143, 143, 143);
padding: 8px;
}
td {
color: #fff;
padding: 10PX 4PX;
font-weight: 600;
font-size: 16px;
}
th {
background-color: #f2f2f2;
}
.testimonial-section {
/* max-width: 800px; */
margin: 17px auto;
background-color: #cdd199;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
.testimonial {
float: left;
width: 33.33%;
padding: 20px;
text-align: center;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}
.testimonial img {
border-radius: 50%;
width: 80px;
height: 80px;
object-fit: cover;
margin-bottom: 10px;
}
.testimonial p {
color: #1e1e1e;
text-align: center;
}
.testimonial p b{color:#000;}
.img-t-b {
border: 1px double #74746d;
}
@media only screen and (max-width: 768px) {
.inn-out-place ul {
display: block !important;
padding:10px !important;
margin-left: 0 !important;
}
.testimonial {
width: 100%;
float: none;
}
.testimonial img {
width: 60px;
height: 60px;
}
.hvr-grl .gallery img {
margin: 2px 0;
}
.faq-container {
width: 95%;
margin: auto;
}
.container ul {
margin-left: 15px;
}
.container ul li {
font-size: 16px;
margin-bottom: 10px;
}
.hvr-grl .gallery {
display: block;
}
.hvr-grl .gallery img {
width: 100%;
}
p {
font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h5,
h6 {
font-size: 25px;
text-align: center;
margin: 10px;
color: #d9e613;
}
.g-pro .image-container {
display: block;
}
.g-pro .image-box {
margin-bottom: 15px;
}
.container {
width: 95%;
}
.top-footer {
display: block;
padding: 40px 5px;
}
.f-colomn {
width: 95%;
margin: auto;
text-align: left;
padding: 0px;
margin-bottom: 30px;
}
.f-headr {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
}
.f-cont-link a {
margin-right: 10px;
}
.right-nav a {
font-size: 24px;
}
.copyrht {
display: block;
text-align: center;
}
}
.overlay-button {
position: absolute;
position: absolute;
top: 94%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
background-color: #4a0f529c;
color: #d9e613;
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 1;
width: 95%;
font-weight: 600;
font-size: 18px;
text-align:center;
}
.image-container1:hover .overlay-button{
background:#4a0f52;
}
.image-container1 {
position: relative;
display: inline-block;
margin: 10px; /* Adjust as needed */
flex: 1 0 19%;
overflow:hidden;
}
.profiles{
display: flex;
/* flex: 0; */
flex-wrap: wrap;
justify-content: space-between;
}
.image-container1 img{width:100%;height:auto;box-shadow: 0px 0px 10px #000;transition:transform 1s ease-in-out;}
@media only screen and (max-width: 768px){
.image-container1,.profiles{
display: block;
}
.overlay-button{background-color: #4a0f52;
}}
.inn-out-place ul{
display: flex;
justify-content: space-evenly;
border: 2px solid #d9e613;
padding: 10px 0;
flex-direction: row;
flex-wrap: wrap;
}
.inn-out-place ul li{
list-style:none;
background: #303211;
padding: 15px 10px;
margin-bottom: 10px;
}
.image-container1 :hover img{transform:scale(1.1)}
.profile-detail p{color:#000;text-overflow: ellipsis;
text-align: justify;
overflow: hidden;}
.profile-detail{padding: 10px 15px;
width: 100%;
position: relative;
overflow: auto;
}
.profile-image img{height:130px;width:auto;max-height: 500px;}
@media (max-width: 768px) {
.profile-container2 {
height: 150px!important;
}
.profile-image img{height: 150px;}
.profile-detail p{color:#000;text-overflow: ellipsis;
text-align: justify;
font-size: 13px;
overflow: hidden;
line-height: 15px;
}
.details h2{
font-size: 15px !important;
padding: 7px 0 5px 0px !important;
}
}
.profile-container2 span strong{
margin: 0px 0 0px 30px;
transform: rotate( 45deg );
position: relative;
display: block;
color: #fff;
font-weight: 800;
}
.profile-container2 span{
width: 0;
height: 0;
border-top: 0px solid transparent;
border-right: 60px solid #f60100;
border-bottom: 60px solid transparent;
position: absolute;
top:0;
right:0
}
@media screen and (min-width: 320px) and (max-width: 767px){
.profile-container2 span{
width: 0;
height: 0;
border-top: 0px solid transparent;
border-right: 30px solid #f60100;
border-bottom: 30px solid transparent;
position: absolute;
right: 0;
top: 0;
}
.profile-container2 span strong{
margin: -2px 0 0px 13px;
transform: rotate(45deg);
position: relative;
display: block;
color: #fff;
font-weight: 800;
font-size: 10px;
}
}
.profile-container2 {
display: flex;
background: white;
width:100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border:red 1px solid;
padding:0;
margin:0;
height:130px;
}
.row1{
margin-bottom:10px;
}
#new-tag {
position: fixed;
top: 50px; /* Adjust this value as per your requirement */
right: 20px; /* Adjust this value as per your requirement */
z-index: 1000;
}
.new-tag {
display: inline-block;
padding: 10px 15px;
background-color: #ff6699; /* Adjust color as needed */
color: white;
border-radius: 50%;
font-weight: bold;
font-size: 16px;
animation: swing 1s ease infinite alternate;
transform-origin: bottom;
}
@keyframes swing {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(5deg);
}
}
.hidden {
display: none;
}
.details{padding:0;margin:0;}
.details h2{
margin:0;
font-size: 16px;
text-align: justify;
padding: 15px 0 15px 0px;
}
.profile-container2 .details h2{padding-top:0;}
.button-34 {
background: #bd1634;
border-radius: 999px;
box-shadow: #b4214b 0 10px 20px -10px;
box-sizing: border-box;
color: #FFFFFF;
cursor: pointer;
font-family: Inter,Helvetica,"Apple Color Emoji","Segoe UI Emoji",NotoColorEmoji,"Noto Color Emoji","Segoe UI Symbol","Android Emoji",EmojiSymbols,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",sans-serif;
font-size: 14px;
font-weight: 600;
line-height: 18px;
opacity: 1;
outline: 0 solid transparent;
padding: 8px 18px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: fit-content;
word-break: break-word;
border: 0;
position:relative;
bottom:4px;
}
.icon-container {
position:relative;
top: -35px;
overflow:hidden;
}
.camera-icon {
width: 20px; /* Adjust icon size as needed */
height: 20px; /* Adjust icon size as needed */
fill: white; /* Adjust icon color as needed */
background-color: black; /* Adjust icon background color as needed */
padding: 5px; /* Adjust padding as needed */
border-radius: 50%; /* Makes the icon circular */
transition:transform .5s ease-in-out;
}
.icon-container:hover .camera-icon{transform:scale(1.1);}
.details h2{color:black;}
.places img{max-width:100%;height:auto;box-shadow: 10px 10px 20px #dedede;}
.img-details {
box-shadow: 10px 10px 20px #dedede;
margin-bottom: 10px;
text-align: center;
font-weight: 600;
padding: 6px;
color: #e5262e;
font-size:18px;
}
.places{margin-bottom:10px;}
@media (min-width: 1200px){
.span8 {
width: 770px;
}
.span4 {
width: 370px;
}
.row1 {
margin-left: -30px;
}
}
@media (min-width: 1200px){
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 30px;
}}
.span8 {
width: 620px;
}
.span4 {
width: 300px;
}
.span4 img{max-width:100%;height:auto;width:100%;}
.row1 {
margin-left: -20px;
display: flex;
justify-content: space-around;
}
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
@media (max-width: 767px){
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
display: block;
float: none;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row1{display:block;}
}
#quote1::before {
content: "\201C";
font-size: 30px;
color: #db00f9;
font-weight: bold;
}
#quote2::before {
content: "\201D";
font-size: 30px;
color: #db00f9;
font-weight: bold;
}
.ul2 li::marker {
color: red;
}
ul, ol {
padding: 0;
margin: 0 0 10px 25px;
}
b{color:white;}