html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* ]]/* HTML5 display-role reset for older browsers */
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
@media all and (min-width:375px) and (max-width: 667px)and (orientation: portrait)
{
body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: "Montserrat", sans-serif;
text-align: center !important;
background-color: #FFE6E1;
}
h2{font-size: larger;}
/* navbar start//////////////////////////////////////////////////////////////////////////////////////////// */
#navbar {
overflow: hidden;
background-image: linear-gradient(to top, #FBF8EF 0%, hsl(68, 75%, 91%) 100%);
transition: 0.4s;
z-index: 99;
border-bottom: 13px solid #FE5D26;
}
#navbar a {
color: #290a5d;
text-align: center;
padding: 2px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
/* social media */
.icon_social {
position: absolute;
cursor: pointer;
width: 35px;
height: 35px;
margin: auto ;
}
.instagram{top: 50px;}
.facebook:hover{box-shadow: 0 0 10px 10px rgb(92, 101, 194);}
.instagram:hover{box-shadow: 0 0 20px 10px orange;}
.facebook{right: 10px;}
.social_icons_ctn{
display: block;
width: 100px;
position: absolute;
top:0;
right: 0;
}
#myValue{width: 100%;
padding: 10px;
}
#navbar #logo {
font-weight: bold;
transition: 0.4s;
}
#logo{float: left;
position: absolute;
top: 0;
left: 0;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: dodgerblue;
color: white;
}
/* #navbar-right {
display: flex; float: right;
} */
/* ends ////////////////////////////////////////////////////////////////////////*/
/* topcontact details */
.info{
background: linear-gradient(to right, transparent, #FE5D26, transparent 110%);
/* width: 70%; */
}
#mbour{
width: 100%;
}
/* .map_icn{position: absolute;
left: 30px;} */
#local{width: 30px; margin: auto;}
.sen{margin: auto; width: 50%;text-align: center;
color: #4F1C51;
font-size: larger;
font-weight: 600;
}
.widgets_midLAST{margin: 40px 0;}
#mlk{font-size: 2.5rem;
padding: 50px 0;
background: linear-gradient(to right, transparent, #F5ECE0, transparent 100%);
font-weight: 600;
color: #FEF3E2;
width: 60%;
margin: auto;
}
#blt{
transform: rotate(-5deg);
color: #228217;
}
.travel{color: #440402;}
.au{color: #e0ce06;}
.senegaal{color: #EA2F14;}
.prob{width: 85%; margin: auto;}
/* social media */
.icon-bar {
top: 0;
}
.icon-bar a {
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
/* end social */
/* ???????????????????????banner??????????????????????????????????????????????????????????????????????? */
.container {
width: 100%;
height: 100vh;
}
.banner {
text-align: center;
overflow: hidden;
}
.banner::after {
/* content: ''; */
width: 100%;
/* background: linear-gradient(to right, transparent, #000, #000); */
position: absolute;
top: 0;
right: 0;
animation: bannerAnim 3s linear forwards;
}
@keyframes bannerAnim {
0% {right: 0}
100% {right: -250%}
}
.banner h1 {
color: #91130f;
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
border-top: 5px solid #91130f;
border-bottom: 5px solid #91130f;
}
.banner button {
width: 230px;
padding: 10px;
background: linear-gradient(to right, #440402, #c0120c);
font-family: 'Dosis', sans-serif;
font-size: 25px;
letter-spacing: 2px;
color: #fff;
border: none;
outline: none;
border-radius: 100px;
transform: perspective(500px) rotateY(-15deg);
text-shadow: 6px 3px 2px rgba(0, 0, 0, .4);
cursor: pointer;
overflow: hidden;
animation: buttonAnim 1s 2.5s backwards;
transition: all .5s;
}
.banner button:hover {
transform: perspective(500px) rotateY(15deg);
text-shadow: -6px 3px 2px rgba(0, 0, 0, .4);
background: linear-gradient(to left, #440402, #c0120c);
}
@keyframes buttonAnim {
0% {opacity:0}
100% {opacity: 0}
}
.banner button::before {
content: '';
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, #cb0f0f, transparent);
position: absolute;
top: 0;
left: -100%;
transform: skewX(-30deg);
transition: left .5s;
}
/*
.banner button:hover::before {
left: 100%;
} */
.slideshow-wrapper {
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: opacity 1s;
}
.slideshow {
display: flex;
width: 400%;
height: 100%;
position: relative;
}
@keyframes slideshow {
0% {left: 0}
10% {left: 0}
15% {left: -100%}
25% {left: -100%}
30% {left: -200%}
40% {left: -200%}
45% {left: -300%}
55% {left: -300%}
60% {left: -200%}
70% {left: -200%}
75% {left: -100%}
85% {left: -100%}
90% {left: 0}
}
.slidea {
width: 100%;
padding:8% 0;
background-color: #030502;
}
.slidea:nth-child(1) {
background: linear-gradient(100deg, rgb(6, 5, 5), rgba(20, 5, 5, 0), transparent), url(london.jpg) center no-repeat;
background-size: cover
;
background-position: center;
}
.slidea:nth-child(2) {
background: linear-gradient(10deg, rgba(38, 38, 38, 1), rgba(38, 38, 38,0), transparent), url(guide9.jpg) center no-repeat;
background-size: cover
;
background-position: center;
}
.slidea:nth-child(3) {
background: linear-gradient(10deg, rgba(38, 38, 38, 1), rgba(38, 38, 38,0 ), transparent), url(malick00002.jpg) center no-repeat;
background-size: cover
;
background-position: center;
}
.slidea:nth-child(4) {
background: linear-gradient(100deg, rgba(38, 38, 38, 1), rgba(38, 38, 38, 0), transparent), url(malick00009.jpg) center no-repeat;
background-size: cover
;
background-position: center;
}
.content {
width: 100%;
position: relative;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
}
.content h3 {
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 400;
color: #fff;
}
.content p {
font-family: 'Dosis', sans-serif;
font-size: 20px;
color: #ccc;
}
.content button {
width: 130px;
padding: 10px 10px 0 0;
margin-top: 30px;
background-color: transparent;
border: none;
outline: none;
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 400;
letter-spacing: 1px;
color: #fff;
border-bottom: 1px solid #fff;
cursor: pointer;
}
.txt_details{padding: 0 30px;
font-size: 2rem!important;
font-weight: 400;
}
/* end Banner###################*/
.aboutme{
font-size: 1em;
color:#176B87;
}
.aboutImage-Ctn{
margin: 8% 0;}
.about-Image{width: 100%;
margin: auto;
height: 300px;
}
#abImage{margin-top: 5rem;}
.abouttext{
color: #EEE7DA;
/* font-size: 1em; */
font-weight: 700;
background-color: #2D9596;
margin: 10px auto;
border-radius: 10px;
}
.aboutPara{
font-size: 1.5em; text-align: left;
padding: 10px;
color: #10010e;
}
/* .about-Imag{ width:26% ;} */
.text-cont{margin: auto ; font-size: 16px;}
.about_why{margin: 10% 0;}
/* .widgets_mid3{margin: 3% auto;}
.widgets_mid{margin-top: 3em;} */
.widgets{
background-image: linear-gradient(red, rgb(247, 195, 23), green);
border-top-left-radius: 100%;
border-top-right-radius: 100%;
height: 3px;
margin: 13% auto;
width:100%;
}
.cOQ{color: #943d07;
font-weight: 800;
font-size: 20px;
margin: 40px 0;}
.my_h1s{
color: #FF9843;
}
h4{color:#41644A ;
margin-top: 20px 0;
font-size: 13px;
font-weight: 400;
}
p{text-align: left;}
/* #widgets{margin-top: 22em;} */
/* Testimonial Section //////////////////////////////////////////////////*/
.testimonial-text {
font-size: 1rem;
line-height: 1.5;
width: 100%;
}
.testimonial-image {
width: 13%;
border-radius: 100%;
}
.row,
.row > .column {
padding: 10px;
margin: 0 !important;;
}
/* Clear floats after rows */
.row:after {
clear: both;
}
/* Content */
.contenting {
border: #016A70 solid 2px;
border-radius: 10px;
cursor: pointer;
}
.contenting:hover{
background-image: linear-gradient(180deg, rgb(0, 255, 140), yellow);
}
.nature{
width: 100%;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
.btn:hover {
background-color: #f04444;
}
.btn.active {
background-color: #666;
color: white;
}
/* /////////////////////////////////////////////////////////////////////////////// */
/* Slideshow container//////////////////////////////////////////////////////// */
.slideshow-container {
position: relative;
background: #6a0ea8f1;
}
/* Slides */
.mySlides {
display: none;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
top: 50%;
width: auto;
margin-top: -30px;
color: #888888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
color: white;
}
.ilse{height: 216px;}
/* why */
.row:after {
content: "";
display: table;
clear: both;
}
/* The Modal (background) */
.modal {
display: none;
z-index: 10;
left: 0;
top: 0;
width: 100%;
}
/* Modal Content */
.modal-conten {
position: relative;
background: -webkit-linear-gradient(to right, #228217, #FF4E50); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #e0ce06, #07ca34); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
width: 100%;
margin:70px 0;
border: 10px solid rgba(87, 150, 233, 0.8);
box-shadow: 0 0 20px 20px rgb(225, 218, 218);
border-radius: 30px;
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.7s;
animation-name: zoom;
animation-duration: 0.6s;
transition: 0.13s;
}
.mySlides {
display: none;
border: 10px solid rgba(87, 150, 233, 0.8);
box-shadow: 0 0 20px 20px rgb(225, 218, 218);
}
.hover-shadow,.excurs,.slideimages{width: 100%;}
.column {
float: left ;
width:48%;
margin: auto ;
}
.myModal{
display: none; /* Hidden by default */
z-index: 1; /* Sit on top */
/* Location of the box */
top: 60%;
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
animation-name: zoom;
animation-duration: 0.6s;
width: 100%;
margin: auto;
}
/* The Close Button */
.close {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #005bea;
font-size: 35px;
font-weight: bold;
background: -webkit-linear-gradient(to right, #228217, #0f0f0f); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #030502, #dc122d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
z-index: 99;
padding: 20px;
}
.cursor {
cursor: pointer;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 10rem;
width: auto;
padding: 26px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
}
.prev,.next{background-color: #C02425;
border-radius: 10px;
}
.prev{
left: 0;
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
/* Position the "next button" to the right */
.next {
right: 0;
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(87, 150, 233, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
position: absolute;
top: 0;
}
/* Orange */
.warning {
/* border-color: #240912; */
box-shadow: 0 0 3px 3px cornsilk;
color: orange;
border: solid 10px;
border-radius: 20px;
font-size: 16px;
}
.warning:hover {
background: #0f0f0e;
color: white;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* SLIDER */
.slider {
height: 50rem;
margin: 0 auto;
position: relative;
/* IN THE END #FFE6E1 #FF3F33*/
overflow: hidden;
}
.slide {
margin-top: 60px;
top: 0;
width: 100%;
background-image: url(mbeach.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
align-items: center;
color: #e6f3f2;
background-blend-mode: color;
/* THIS creates the animation! */
transition: transform 1s;
}
/* FOOTER */
/* Navbar links */
image{width: 180px;
margin: auto;
background-color: #aeeb09;
}
.myTEXT{
border-radius: 50px;
margin: auto;
/* background-color: #F2F1EB; */
}
section{
padding: 20px 0;
/* background-color: #FBF6EE; */
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* .pastef{display: flex;} */
/* /////////////////////////////////////////////////////footer area */
footer{
/* background-color: #80CBC4; */
background-image: linear-gradient(to top, #d5f5e3 0%, #f5cba7 100%);
}
.textfooterparagraph_ctn{
height: 100%;
text-align: center;
padding: 20px 0;
}
#ctn-Info{
font-size: larger;
}
.contact-Info,
.contactInfo-social,
.contactInfo{margin-top: 20px;
}
.linesLand,
.lstInfo{
margin: 10px; color: rgb(22, 8, 8);
font-size: x-large;
font-weight: 500;
}
.contactInfo{list-style-type: none;
color: #016A70;
}
}
/* ooooooooooooooooooooooooooooooooooooooooooooooooooo360ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo */
@media all and (min-width:360px) and (max-width: 740px) {
body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: "Montserrat", sans-serif;
text-align: center !important;
background-color: #FFE6E1;
}
h2{font-size: larger;}
/* navbar start//////////////////////////////////////////////////////////////////////////////////////////// */
#navbar {
overflow: hidden;
background-image: linear-gradient(to top, #FBF8EF 0%, hsl(68, 75%, 91%) 100%);
transition: 0.4s;
z-index: 99;
border-bottom: 13px solid #FE5D26;
}
#navbar a {
color: #290a5d;
text-align: center;
padding: 2px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
#navbar #logo {
font-weight: bold;
transition: 0.4s;
}
#logo{float: left;
position: absolute;
top: 0;
left: 0;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: dodgerblue;
color: white;
}
.icon_social {
position: absolute;
cursor: pointer;
width: 35px;
height: 35px;
margin: auto ;
}
.instagram{top: 50px;}
.facebook:hover{box-shadow: 0 0 10px 10px rgb(92, 101, 194);}
.instagram:hover{box-shadow: 0 0 20px 10px orange;}
.facebook{right: 10px;}
.social_icons_ctn{
display: block;
width: 100px;
position: absolute;
top:0;
right: 0;
}
/* #navbar-right {
display: flex; float: right;
} */
/* ends ////////////////////////////////////////////////////////////////////////*/
/* topcontact details */
.info{
background: linear-gradient(to right, transparent, #FE5D26, transparent 110%);
/* width: 70%; */
}
#mbour{
width: 100%;
}
/* .map_icn{position: absolute;
left: 30px;} */
#local{width: 30px; margin: auto;}
.sen{margin: auto; width: 50%;text-align: center;
color: #4F1C51;
font-size: larger;
font-weight: 600;
}
.widgets_midLAST{margin: 40px 0;}
#mlk{font-size: 2.5rem;
padding: 50px 0;
background: linear-gradient(to right, transparent, #F5ECE0, transparent 100%);
font-weight: 600;
color: #FEF3E2;
width: 60%;
margin: auto;
}
#blt{
transform: rotate(-5deg);
color: #228217;
}
.travel{color: #440402;}
.au{color: #e0ce06;}
.senegaal{color: #EA2F14;}
.prob{width: 85%; margin: auto;}
/* social media */
/* end social */
/* ???????????????????????banner??????????????????????????????????????????????????????????????????????? */
.container {
width: 100%;
height: 100vh;
}
.banner {
text-align: center;
overflow: hidden;
}
.banner::after {
/* content: ''; */
width: 100%;
/* background: linear-gradient(to right, transparent, #000, #000); */
position: absolute;
top: 0;
right: 0;
animation: bannerAnim 3s linear forwards;
}
@keyframes bannerAnim {
0% {right: 0}
100% {right: -250%}
}
.banner h1 {
color: #91130f;
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
border-top: 5px solid #91130f;
border-bottom: 5px solid #91130f;
}
.banner button {
width: 230px;
padding: 10px;
background: linear-gradient(to right, #440402, #c0120c);
font-family: 'Dosis', sans-serif;
font-size: 25px;
letter-spacing: 2px;
color: #fff;
border: none;
outline: none;
border-radius: 100px;
transform: perspective(500px) rotateY(-15deg);
text-shadow: 6px 3px 2px rgba(0, 0, 0, .4);
cursor: pointer;
overflow: hidden;
animation: buttonAnim 1s 2.5s backwards;
transition: all .5s;
}
.banner button:hover {
transform: perspective(500px) rotateY(15deg);
text-shadow: -6px 3px 2px rgba(0, 0, 0, .4);
background: linear-gradient(to left, #440402, #c0120c);
}
@keyframes buttonAnim {
0% {opacity:0}
100% {opacity: 0}
}
.banner button::before {
content: '';
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, #cb0f0f, transparent);
position: absolute;
top: 0;
left: -100%;
transform: skewX(-30deg);
transition: left .5s;
}
/*
.banner button:hover::before {
left: 100%;
} */
.slideshow-wrapper {
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: opacity 1s;
}
.slideshow {
display: flex;
width: 400%;
height: 100%;
position: relative;
}
@keyframes slideshow {
0% {left: 0}
10% {left: 0}
15% {left: -100%}
25% {left: -100%}
30% {left: -200%}
40% {left: -200%}
45% {left: -300%}
55% {left: -300%}
60% {left: -200%}
70% {left: -200%}
75% {left: -100%}
85% {left: -100%}
90% {left: 0}
}
.slidea {
width: 100%;
padding:8% 0;
background-color: #030502;
}
.content {
width: 100%;
position: relative;
}
.content h3 {
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 400;
color: #fff;
}
.content {
font-family: 'Dosis', sans-serif;
color: #ccc;
}
.content button {
width: 130px;
padding: 10px 10px 0 0;
margin-top: 30px;
background-color: transparent;
border: none;
outline: none;
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 400;
letter-spacing: 1px;
color: #fff;
border-bottom: 1px solid #fff;
cursor: pointer;
}
/* end Banner###################*/
.aboutme{
font-size: 1em;
color:#176B87;
}
.aboutImage-Ctn{
margin: 8% 0;}
.about-Image{width: 100%;
margin: auto;
height: 300px;
}
#abImage{margin-top: 5rem;}
.abouttext{
color: #EEE7DA;
/* font-size: 1em; */
font-weight: 700;
background-color: #2D9596;
margin: 10px auto;
border-radius: 10px;
}
.aboutPara{
font-size: 1.5em; text-align: left;
padding: 10px;
color: #10010e;
}
/* .about-Imag{ width:26% ;} */
.text-cont{margin: auto ; font-size: 16px;}
.about_why{margin: 10% 0;}
/* .widgets_mid3{margin: 3% auto;}
.widgets_mid{margin-top: 3em;} */
.widgets{
background-image: linear-gradient(red, rgb(247, 195, 23), green);
border-top-left-radius: 100%;
border-top-right-radius: 100%;
height: 3px;
margin: 13% auto;
width:100%;
}
.cOQ{color: #943d07;
font-weight: 500;
margin: 40px 0;}
.my_h1s{
color: #FF9843;
}
h4{color:#41644A ;
margin-top: 20px 0;
font-size: 13px;
font-weight: 400;
}
p{text-align: left;
font-size: 25px;
padding: 20px;
}
/* #widgets{margin-top: 22em;} */
/* Testimonial Section //////////////////////////////////////////////////*/
.testimonial-text {
font-size: 1rem;
line-height: 1.5;
width: 100%;
}
.testimonial-image {
width: 13%;
border-radius: 100%;
}
.row,
.row > .column {
padding: 10px;
margin: 0 !important;;
}
/* Clear floats after rows */
.row:after {
clear: both;
}
/* Content */
.contenting {
border: #016A70 solid 2px;
border-radius: 10px;
cursor: pointer;
}
.contenting:hover{
background-image: linear-gradient(180deg, rgb(0, 255, 140), yellow);
}
.nature{
width: 100%;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
.btn:hover {
background-color: #f04444;
}
.btn.active {
background-color: #666;
color: white;
}
/* /////////////////////////////////////////////////////////////////////////////// */
/* Slideshow container//////////////////////////////////////////////////////// */
.slideshow-container {
position: relative;
background: #6a0ea8f1;
}
/* Slides */
.mySlides {
display: none;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
top: 50%;
width: auto;
margin-top: -30px;
color: #888888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
color: white;
}
/*
.ilse{height: 216px;
max-height: 300px;
} */
/* why */
.row:after {
content: "";
display: table;
clear: both;
}
/* The Modal (background) */
.modal {
display: none;
z-index: 10;
left: 0;
top: 0;
width: 100%;
}
/* Modal Content */
.modal-conten {
position: relative;
background: -webkit-linear-gradient(to right, #228217, #FF4E50); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #e0ce06, #07ca34); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
width: 100%;
margin:70px 0;
border: 10px solid rgba(87, 150, 233, 0.8);
box-shadow: 0 0 20px 20px rgb(225, 218, 218);
border-radius: 30px;
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.7s;
animation-name: zoom;
animation-duration: 0.6s;
transition: 0.13s;
}
.mySlides {
display: none;
border: 10px solid rgba(87, 150, 233, 0.8);
box-shadow: 0 0 20px 20px rgb(225, 218, 218);
}
.hover-shadow,.excurs,.slideimages{width: 100%;}
.column {
float: left ;
width:48%;
margin: auto ;
}
.myModal{
display: none; /* Hidden by default */
z-index: 1; /* Sit on top */
/* Location of the box */
top: 60%;
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
animation-name: zoom;
animation-duration: 0.6s;
width: 100%;
margin: auto;
}
/* The Close Button */
.close {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #005bea;
font-size: 35px;
font-weight: bold;
background: -webkit-linear-gradient(to right, #228217, #0f0f0f); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #030502, #dc122d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
z-index: 99;
padding: 20px;
}
.cursor {
cursor: pointer;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 15rem;
width: auto;
padding: 26px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
}
.prev,.next{background-color: #C02425;
border-radius: 10px;
}
.prev{
left: 0;
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
/* Position the "next button" to the right */
.next {
right: 0;
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(87, 150, 233, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
position: absolute;
top: 0;
}
/* Orange */
.warning {
/* border-color: #240912; */
box-shadow: 0 0 3px 3px cornsilk;
color: orange;
border: solid 10px;
border-radius: 20px;
font-size: 16px;
}
.warning:hover {
background: #0f0f0e;
color: white;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* SLIDER */
.slider {
height: 50rem;
margin: 0 auto;
position: relative;
/* IN THE END #FFE6E1 #FF3F33*/
overflow: hidden;
}
.slide {
margin-top: 60px;
top: 0;
width: 100%;
background-image: url(mbeach.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
align-items: center;
color: #e6f3f2;
background-blend-mode: color;
/* THIS creates the animation! */
transition: transform 1s;
}
/* FOOTER */
/* Navbar links */
image{width: 180px;
margin: auto;
background-color: #aeeb09;
}
.myTEXT{
border-radius: 50px;
margin: auto;
/* background-color: #F2F1EB; */
}
section{
padding: 20px 0;
/* background-color: #FBF6EE; */
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* .pastef{display: flex;} */
/* /////////////////////////////////////////////////////footer area */
footer{
/* background-color: #80CBC4; */
background-image: linear-gradient(to top, #d5f5e3 0%, #f5cba7 100%);
}
.textfooterparagraph_ctn{
height: 100%;
text-align: center;
padding: 20px 0;
}
#ctn-Info{
font-size: larger;
}
.contact-Info,
.contactInfo-social,
.contactInfo{margin-top: 20px;
}
.linesLand,
.lstInfo{
margin: 10px; color: rgb(22, 8, 8);
font-weight: 500;
}
.contactInfo{list-style-type: none;
color: #016A70;
}
}
/* ooooooooooooooooooooooooooooooooooooooooooooooooooo360ooooooooooooooooooooooooooooooooooooooooooooooooooooooooo */
/* @media all and (min-width:768px) and (max-width: 1024px) { */
@media all and (min-width : 768px) and (max-width : 1024px){
body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: "Montserrat", sans-serif;
text-align: center !important;
background-color: #FFE6E1;
}
h2{font-size: larger;}
/* navbar start//////////////////////////////////////////////////////////////////////////////////////////// */
#navbar {
overflow: hidden;
background-image: linear-gradient(to top, #FBF8EF 0%, hsl(68, 75%, 91%) 100%);
transition: 0.4s;
z-index: 99;
border-bottom: 13px solid #FE5D26;
}
#navbar a {
color: #290a5d;
text-align: center;
padding: 2px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
#navbar #logo {
font-weight: bold;
transition: 0.4s;
}
#logo{float: left;
position: absolute;
top: 0;
left: 0;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: dodgerblue;
color: white;
}
/* #navbar-right {
display: flex; float: right;
} */
/* ends ////////////////////////////////////////////////////////////////////////*/
/* topcontact details */
.info{
background: linear-gradient(to right, transparent, #FE5D26, transparent 110%);
/* width: 70%; */
}
#mbour{
width: 100%;
}
/* .map_icn{position: absolute;
left: 30px;} */
#local{width: 30px; margin: auto;}
.sen{margin: auto; width: 50%;text-align: center;
color: #4F1C51;
font-size: larger;
font-weight: 600;
}
.widgets_midLAST{margin: 40px 0;}
#mlk{font-size: 2.5rem;
padding: 50px 0;
background: linear-gradient(to right, transparent, #F5ECE0, transparent 100%);
font-weight: 600;
color: #FEF3E2;
width: 60%;
margin: auto;
}
#blt{
transform: rotate(-5deg);
color: #228217;
}
.travel{color: #440402;}
.au{color: #e0ce06;}
.senegaal{color: #EA2F14;}
.prob{width: 85%; margin: auto;}
/* social media */
/* social media */
.icon_social {
position: absolute;
cursor: pointer;
width: 25px;
height: min-content;
margin: auto ;
}
.instagram{ position: absolute;left: 55%;}
.facebook:hover{box-shadow: 0 0 10px 10px rgb(92, 101, 194);}
.instagram:hover{box-shadow: 0 0 20px 10px orange;}
.social_icons_ctn{
display: flex;
width: 100px;
position: absolute;
margin-top: 5rem;
right: 50%;
}
/* end social */
/* ???????????????????????banner??????????????????????????????????????????????????????????????????????? */
.container {
width: 100%;
height: 100vh;
}
.banner {
text-align: center;
overflow: hidden;
}
.banner::after {
/* content: ''; */
width: 100%;
/* background: linear-gradient(to right, transparent, #000, #000); */
position: absolute;
top: 0;
right: 0;
animation: bannerAnim 3s linear forwards;
}
@keyframes bannerAnim {
0% {right: 0}
100% {right: -250%}
}
.banner h1 {
color: #91130f;
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
border-top: 5px solid #91130f;
border-bottom: 5px solid #91130f;
}
.banner button {
width: 230px;
padding: 10px;
background: linear-gradient(to right, #440402, #c0120c);
font-family: 'Dosis', sans-serif;
font-size: 25px;
letter-spacing: 2px;
color: #fff;
border: none;
outline: none;
border-radius: 100px;
transform: perspective(500px) rotateY(-15deg);
text-shadow: 6px 3px 2px rgba(0, 0, 0, .4);
cursor: pointer;
overflow: hidden;
animation: buttonAnim 1s 2.5s backwards;
transition: all .5s;
}
.banner button:hover {
transform: perspective(500px) rotateY(15deg);
text-shadow: -6px 3px 2px rgba(0, 0, 0, .4);
background: linear-gradient(to left, #440402, #c0120c);
}
@keyframes buttonAnim {
0% {opacity:0}
100% {opacity: 0}
}
.banner button::before {
content: '';
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, #cb0f0f, transparent);
position: absolute;
top: 0;
left: -100%;
transform: skewX(-30deg);
transition: left .5s;
}
/*
.banner button:hover::before {
left: 100%;
} */
.slideshow-wrapper {
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: opacity 1s;
}
.slideshow {
display: flex;
width: 400%;
height: 100%;
position: relative;
}
@keyframes slideshow {
0% {left: 0}
10% {left: 0}
15% {left: -100%}
25% {left: -100%}
30% {left: -200%}
40% {left: -200%}
45% {left: -300%}
55% {left: -300%}
60% {left: -200%}
70% {left: -200%}
75% {left: -100%}
85% {left: -100%}
90% {left: 0}
}
.slidea {
width: 100%;
padding:8% 0;
background-color: #030502;
}
.content {
width: 100%;
position: relative;
top: 35%;
}
.content h3 {
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 400;
color: #fff;
}
.content p {
font-family: 'Dosis', sans-serif;
font-size: 20px;
color: #ccc;
}
.content button {
width: 130px;
padding: 10px 10px 0 0;
margin-top: 30px;
background-color: transparent;
border: none;
outline: none;
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 400;
letter-spacing: 1px;
color: #fff;
border-bottom: 1px solid #fff;
cursor: pointer;
}
/* end Banner###################*/
#abImage{margin-top: 5rem;}
.abouttext{
color: #EEE7DA;
/* font-size: 1em; */
font-weight: 700;
background-color: #2D9596;
margin: 10px auto;
border-radius: 10px;
}
.aboutPara{
font-size: 1.5em; text-align: left;
padding: 10px;
color: #10010e;
}
/* .about-Imag{ width:26% ;} */
.text-cont{margin: auto ; font-size: 16px;}
.about_why{margin: 10% 0;}
/* .widgets_mid3{margin: 3% auto;}
.widgets_mid{margin-top: 3em;} */
.widgets{
background-image: linear-gradient(red, rgb(247, 195, 23), green);
border-top-left-radius: 100%;
border-top-right-radius: 100%;
height: 3px;
margin: 13% auto;
width:100%;
}
.cOQ{color: #943d07;
font-weight: 500;
font-size: 13px;
margin: 40px 0;}
.my_h1s{
color: #FF9843;
}
h4{color:#41644A ;
margin-top: 20px 0;
font-size: 13px;
font-weight: 400;
}
p{text-align: left;}
/* #widgets{margin-top: 22em;} */
/* Testimonial Section //////////////////////////////////////////////////*/
.testimonial-text {
font-size: 1rem;
line-height: 1.5;
width: 100%;
}
.testimonial-image {
width: 13%;
border-radius: 100%;
}
.row,
.row > .column {
padding: 10px;
margin: 0 !important;;
}
/* Clear floats after rows */
.row:after {
clear: both;
}
/* Content */
.contenting {
border: #016A70 solid 2px;
width: 80%;
margin: auto;
border-radius: 10px;
cursor: pointer;
}
.contenting:hover{
background-image: linear-gradient(180deg, rgb(0, 255, 140), yellow);
}
.nature{
width: 100%;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
.btn:hover {
background-color: #f04444;
}
.btn.active {
background-color: #666;
color: white;
}
/* /////////////////////////////////////////////////////////////////////////////// */
/* Slideshow container//////////////////////////////////////////////////////// */
.slideshow-container {
position: relative;
background: #6a0ea8f1;
}
/* Slides */
.mySlides {
display: none;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
top: 50%;
width: auto;
margin-top: -30px;
color: #888888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
color: white;
}
/* why */
.row:after {
content: "";
display: table;
clear: both;
}
/* The Modal (background) */
.modal {
display: none;
z-index: 10;
left: 0;
top: 0;
width: 100%;
}
/* Modal Content */
.modal-conten {
position: relative;
background: -webkit-linear-gradient(to right, #228217, #FF4E50); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #e0ce06, #07ca34); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
width: 100%;
margin:70px 0;
border: 10px solid rgba(87, 150, 233, 0.8);
box-shadow: 0 0 20px 20px rgb(225, 218, 218);
border-radius: 30px;
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.7s;
animation-name: zoom;
animation-duration: 0.6s;
transition: 0.13s;
}
.mySlides {
display: none;
border: 10px solid rgba(87, 150, 233, 0.8);
box-shadow: 0 0 20px 20px rgb(225, 218, 218);
}
.hover-shadow,.excurs,.slideimages{width: 100%;}
.column {
float: left ;
width:48%;
margin: auto ;
}
.myModal{
display: none; /* Hidden by default */
z-index: 1; /* Sit on top */
/* Location of the box */
top: 60%;
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
animation-name: zoom;
animation-duration: 0.6s;
width: 100%;
margin: auto;
}
/* The Close Button */
.close {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #005bea;
font-size: 35px;
font-weight: bold;
background: -webkit-linear-gradient(to right, #228217, #0f0f0f); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #030502, #dc122d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
z-index: 99;
padding: 20px;
}
.cursor {
cursor: pointer;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 25rem;
width: auto;
padding: 26px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
}
.prev,.next{background-color: #C02425;
border-radius: 10px;
}
.prev{
left: 0;
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
/* Position the "next button" to the right */
.next {
right: 0;
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(87, 150, 233, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
position: absolute;
top: 0;
}
/* Orange */
.warning {
/* border-color: #240912; */
box-shadow: 0 0 3px 3px cornsilk;
color: orange;
border: solid 10px;
border-radius: 20px;
font-size: 16px;
}
.warning:hover {
background: #0f0f0e;
color: white;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* SLIDER */
.slider {
height: 50rem;
margin: 0 auto;
position: relative;
/* IN THE END #FFE6E1 #FF3F33*/
overflow: hidden;
}
.slide {
margin-top: 60px;
top: 0;
width: 100%;
background-image: url(mbeach.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
align-items: center;
color: #e6f3f2;
background-blend-mode: color;
/* THIS creates the animation! */
transition: transform 1s;
}
/* FOOTER */
/* Navbar links */
image{width: 180px;
margin: auto;
background-color: #aeeb09;
}
.myTEXT{
border-radius: 50px;
margin: auto;
/* background-color: #F2F1EB; */
}
section{
padding: 20px 0;
/* background-color: #FBF6EE; */
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* .pastef{display: flex;} */
/* /////////////////////////////////////////////////////footer area */
footer{
/* background-color: #80CBC4; */
background-image: linear-gradient(to top, #d5f5e3 0%, #f5cba7 100%);
}
.textfooterparagraph_ctn{
height: 100%;
color: #fcf8f8;
text-align: center;
padding: 20px 0;
}
#ctn-Info{
font-size: larger;
}
.contact-Info,
.contactInfo-social,
.contactInfo{margin-top: 20px;
}
.linesLand,
.lstInfo{
margin: 10px; color: rgb(22, 8, 8);
font-weight: 500;
}
.contactInfo{list-style-type: none;
color: #016A70;
}
}
@media all and (min-width:414px) and (max-width: 896px){
body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: "Montserrat", sans-serif;
text-align: center !important;
background-color: #FFE6E1;
}
h2{font-size: larger;}
/* navbar start//////////////////////////////////////////////////////////////////////////////////////////// */
#navbar {
overflow: hidden;
background-image: linear-gradient(to top, #FBF8EF 0%, hsl(68, 75%, 91%) 100%);
transition: 0.4s;
z-index: 99;
border-bottom: 13px solid #FE5D26;
}
#navbar a {
color: #290a5d;
text-align: center;
padding: 2px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
#navbar #logo {
font-weight: bold;
transition: 0.4s;
}
#logo{float: left;
position: absolute;
top: 0;
left: 0;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: dodgerblue;
color: white;
}
/* #navbar-right {
display: flex; float: right;
} */
/* ends ////////////////////////////////////////////////////////////////////////*/
/* topcontact details */
.info{
background: linear-gradient(to right, transparent, #FE5D26, transparent 110%);
/* width: 70%; */
}
#mbour{
width: 100%;
}
/* .map_icn{position: absolute;
left: 30px;} */
#local{width: 30px; margin: auto;}
.sen{margin: auto; width: 50%;text-align: center;
color: #4F1C51;
font-size: larger;
font-weight: 600;
}
.widgets_midLAST{margin: 40px 0;}
#mlk{font-size: 2.5rem;
padding: 50px 0;
background: linear-gradient(to right, transparent, #F5ECE0, transparent 100%);
font-weight: 600;
color: #FEF3E2;
width: 60%;
margin: auto;
}
#blt{
transform: rotate(-5deg);
color: #228217;
}
.travel{color: #440402;}
.au{color: #e0ce06;}
.senegaal{color: #EA2F14;}
.prob{width: 85%; margin: auto;}
/* social media */
.icon-bar {
position: fixed;
top: 58%;
}
.icon-bar a {
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
/* end social */
/* ???????????????????????banner??????????????????????????????????????????????????????????????????????? */
.container {
width: 100%;
height: 100vh;
}
.banner {
text-align: center;
overflow: hidden;
}
.banner::after {
/* content: ''; */
width: 100%;
/* background: linear-gradient(to right, transparent, #000, #000); */
position: absolute;
top: 0;
right: 0;
animation: bannerAnim 3s linear forwards;
}
@keyframes bannerAnim {
0% {right: 0}
100% {right: -250%}
}
.banner h1 {
color: #91130f;
font-family: 'Ubuntu', sans-serif;
font-size: 1em;
border-top: 5px solid #91130f;
border-bottom: 5px solid #91130f;
}
.banner button {
width: 230px;
padding: 10px;
background: linear-gradient(to right, #440402, #c0120c);
font-family: 'Dosis', sans-serif;
font-size: 25px;
letter-spacing: 2px;
color: #fff;
border: none;
outline: none;
border-radius: 100px;
transform: perspective(500px) rotateY(-15deg);
text-shadow: 6px 3px 2px rgba(0, 0, 0, .4);
cursor: pointer;
overflow: hidden;
animation: buttonAnim 1s 2.5s backwards;
transition: all .5s;
}
.banner button:hover {
transform: perspective(500px) rotateY(15deg);
text-shadow: -6px 3px 2px rgba(0, 0, 0, .4);
background: linear-gradient(to left, #440402, #c0120c);
}
@keyframes buttonAnim {
0% {opacity:0}
100% {opacity: 0}
}
.banner button::before {
content: '';
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, #cb0f0f, transparent);
position: absolute;
top: 0;
left: -100%;
transform: skewX(-30deg);
transition: left .5s;
}
/*
.banner button:hover::before {
left: 100%;
} */
.slideshow-wrapper {
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: opacity 1s;
}
.slideshow {
display: flex;
width: 400%;
height: 100%;
position: relative;
}
@keyframes slideshow {
0% {left: 0}
10% {left: 0}
15% {left: -100%}
25% {left: -100%}
30% {left: -200%}
40% {left: -200%}
45% {left: -300%}
55% {left: -300%}
60% {left: -200%}
70% {left: -200%}
75% {left: -100%}
85% {left: -100%}
90% {left: 0}
}
.slidea {
width: 100%;
padding:8% 0;
background-color: #030502;
}
.content {
width: 100%;
position: relative;
}
.content h3 {
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 400;
color: #fff;
}
.content {
font-family: 'Dosis', sans-serif;
color: #ccc;
}
.content button {
width: 130px;
padding: 10px 10px 0 0;
margin-top: 30px;
background-color: transparent;
border: none;
outline: none;
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 400;
letter-spacing: 1px;
color: #fff;
border-bottom: 1px solid #fff;
cursor: pointer;
}
/* end Banner###################*/
.aboutme{
font-size: 1em;
color:#176B87;
}
#abImage{margin-top: 5rem;}
.abouttext{
color: #EEE7DA;
/* font-size: 1em; */
font-weight: 700;
background-color: #2D9596;
margin: 10px auto;
border-radius: 10px;
}
.aboutPara{
font-size: 1.5em; text-align: left;
padding: 10px;
color: #10010e;
}
/* .about-Imag{ width:26% ;} */
.text-cont{margin: auto ; font-size: 16px;}
.about_why{margin: 10% 0;}
/* .widgets_mid3{margin: 3% auto;}
.widgets_mid{margin-top: 3em;} */
.widgets{
background-image: linear-gradient(red, rgb(247, 195, 23), green);
border-top-left-radius: 100%;
border-top-right-radius: 100%;
height: 3px;
margin: 13% auto;
width:100%;
}
.cOQ{color: #943d07;
font-weight: 500;
font-size: 25px!important;
margin: 40px 0;}
.my_h1s{
color: #FF9843;
}
h4{color:#41644A ;
margin-top: 20px 0;
font-size: 13px;
font-weight: 400;
}
p{text-align: left;
font-size: 25px;
padding: 20px;
}
/* #widgets{margin-top: 22em;} */
/* Testimonial Section //////////////////////////////////////////////////*/
.testimonial-text {
font-size: 1rem;
line-height: 1.5;
width: 100%;
}
.testimonial-image {
width: 13%;
border-radius: 100%;
}
.row,
.row > .column {
padding: 10px;
margin: 30px 0 !important;
}
/* Clear floats after rows */
.row:after {
clear: both;
}
/* Content */
.nature{
width: 100%;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
.btn:hover {
background-color: #f04444;
}
.btn.active {
background-color: #666;
color: white;
}
/* /////////////////////////////////////////////////////////////////////////////// */
/* Slideshow container//////////////////////////////////////////////////////// */
.slideshow-container {
position: relative;
background: #6a0ea8f1;
}
/* Slides */
.mySlides {
display: none;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
top: 50%;
width: auto;
margin-top: -30px;
color: #888888;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
position: absolute;
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
color: white;
}
/* why */
.row:after {
content: "";
display: table;
clear: both;
}
/* The Modal (background) */
.modal {
display: none;
z-index: 10;
left: 0;
top: 0;
width: 100%;
}
/* Modal Content */
.modal-conten {
position: relative;
background: -webkit-linear-gradient(to right, #228217, #FF4E50); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #e0ce06, #07ca34); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
width: 100%;
margin:70px 0;
border: 10px solid rgba(87, 150, 233, 0.8);
box-shadow: 0 0 20px 20px rgb(225, 218, 218);
border-radius: 30px;
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.7s;
animation-name: zoom;
animation-duration: 0.6s;
transition: 0.13s;
}
.mySlides {
display: none;
border: 10px solid rgba(87, 150, 233, 0.8);
box-shadow: 0 0 20px 20px rgb(225, 218, 218);
}
.hover-shadow,.excurs,.slideimages{width: 100%;}
.column {
float: left ;
width:48%;
margin: auto ;
}
.myModal{
display: none; /* Hidden by default */
z-index: 1; /* Sit on top */
/* Location of the box */
top: 60%;
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
animation-name: zoom;
animation-duration: 0.6s;
width: 100%;
margin: auto;
}
/* The Close Button */
.close {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-color: #005bea;
font-size: 35px;
font-weight: bold;
background: -webkit-linear-gradient(to right, #228217, #0f0f0f); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #030502, #dc122d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
z-index: 99;
padding: 20px;
}
.cursor {
cursor: pointer;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 25rem;
width: auto;
padding: 26px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
}
.prev,.next{background-color: #C02425;
border-radius: 10px;
}
.prev{
left: 0;
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
/* Position the "next button" to the right */
.next {
right: 0;
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(87, 150, 233, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
position: absolute;
top: 0;
}
/* Orange */
.warning {
/* border-color: #240912; */
box-shadow: 0 0 3px 3px cornsilk;
color: orange;
border: solid 10px;
border-radius: 20px;
font-size: 16px;
}
.warning:hover {
background: #0f0f0e;
color: white;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* SLIDER */
.slider {
height: 50rem;
margin: 0 auto;
position: relative;
/* IN THE END #FFE6E1 #FF3F33*/
overflow: hidden;
}
.slide {
margin-top: 60px;
top: 0;
width: 100%;
background-image: url(mbeach.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
align-items: center;
color: #e6f3f2;
background-blend-mode: color;
/* THIS creates the animation! */
transition: transform 1s;
}
/* FOOTER */
/* Navbar links */
image{width: 180px;
margin: auto;
background-color: #aeeb09;
}
.myTEXT{
border-radius: 50px;
margin: auto;
/* background-color: #F2F1EB; */
}
section{
padding: 20px 0;
/* background-color: #FBF6EE; */
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* .pastef{display: flex;} */
/* /////////////////////////////////////////////////////footer area */
footer{
/* background-color: #80CBC4; */
background-image: linear-gradient(to top, #d5f5e3 0%, #f5cba7 100%);
}
.textfooterparagraph_ctn{
height: 100%;
text-align: center;
padding: 20px 0;
}
#ctn-Info{
font-size: larger;
}
.contact-Info,
.contactInfo-social,
.contactInfo{margin-top: 20px;
}
.linesLand,
.lstInfo{
margin: 10px; color: rgb(22, 8, 8);
font-weight: 500;
}
.contactInfo{list-style-type: none;
color: #016A70;
}
}
/* lannnnnnnnnnnnnnnnnnnnnnnnnnnnnnnndnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn */
@media only screen and (min-width:375px) and (max-width: 667px) and (orientation: landscape){
/* social media */
.icon_social {
position: absolute;
cursor: pointer;
width: 25px;
height: min-content;
margin: auto ;
}
.instagram{ position: absolute;left: 55%;}
.facebook:hover{box-shadow: 0 0 10px 10px rgb(92, 101, 194);}
.instagram:hover{box-shadow: 0 0 20px 10px orange;}
.social_icons_ctn{
display: flex;
width: 100px;
position: absolute;
margin-top: 5rem;
right: 50%;
}
.ilse ,.excurs{
padding: 100px 0;
}
}