*{box-sizing: border-box;}

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;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
.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;
}


@media (min-width: 1366px), (min-width: 1358px) ,(min-width : 1224px){
body{

width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: "Montserrat", sans-serif;
text-align: center!important;
background-color: #FFE6E1;

}
/* navbar start//////////////////////////////////////////////////////////////////////////////////////////// */
#navbar {
  overflow: hidden;
  background-image: linear-gradient(to top, #FBF8EF 0%, hsl(68, 75%, 91%) 100%);

  transition: 0.4s;
  position: fixed;
  width: 100%;
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;
  margin: 20px 20px;

}

#navbar #logo {
  font-size: 35px;
  font-weight: bold;
  transition: 0.4s;
}
#logo{float: left;}
#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{
  padding: 50px 0;
  background: linear-gradient(to right, transparent, #FE5D26, transparent 110%);
  width: 70%;
  margin: auto;
  position: relative;
  top: -10px;
}
#mbour{
 display: flex;
width: 100%;
margin: auto;
position: absolute;
right: 5%;
}
.map_icn{position: absolute;
left: 30px;}
#local{width: 30px;}
.sen{margin: auto;  width: 50%;text-align: center;
color: #4F1C51;
font-size: larger;
font-weight: 600;

}
.widgets_midLAST{margin: 40px 0;}

#mlk{font-size: 4rem;
padding: 50px 0;
  background: linear-gradient(to right, transparent, #F5ECE0, transparent 100%);
  font-weight: 600;
  color: #FEF3E2;
}

#blt{ 
 transform: rotate(-5deg);

  color: #228217;


}
.travel{color: #440402;}
.au{color: #e0ce06;}
.senegaal{color: #EA2F14;}
.prob{width: 85%; margin: auto;}


/* 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: 40%;
}
/* end social */
/* ???????????????????????banner??????????????????????????????????????????????????????????????????????? */
.container {
    width: 100%;
    height: 100vh;
   padding: 10rem 0;
   background-attachment: fixed;
}

.banner {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    overflow: hidden;
}

.banner::after {
    content: '';
    width: 250%;
    height: 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: 120px;
    margin-bottom: 100px;
    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, #fff, 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%;
    height: 100vh;
}


.content {
    width: 500px;
    position: relative;
    top: 35%;
    left: 5%;
}

.content h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 80px;
    font-weight: 400;
    color: #fff;
}

.content p {
    font-family: 'Dosis', sans-serif;
   
    color: #ccc;
}

.content button {
   
    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;
}

.content i {
    margin-left: 8px;


}
.txt_details{font-size:2rem; }


.aboutme{
display: flex;
font-size: 4em;
color:#176B87;


}
.aboutImage-Ctn{display: flex;

margin: 8% 0;}
.about-Image{width: 500px;
  margin: auto;
height: 300px;
}

#abImage{margin-top: 5rem;}
.abouttext{
color: #EEE7DA; 
/* font-size: 1em; */
font-weight: 700;
background-color: #2D9596;
width: 250px;
margin: 10px auto;
padding: 10px;
border-radius: 10px;
}
.aboutPara{
  font-size: 1.5em; text-align: justify;
color: #8EA6B4;
}

.about_why{margin: 10% 0;}
/* .widgets_mid3{margin: 3% auto;}
.widgets_mid{margin-top: 3em;} */

.widgets{
  background-image: linear-gradient(red, rgb(51, 51, 32), green);
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  height: 1px;

margin: 10% auto;

width:30%;
}

.cOQ{color: #943d07;
font-weight: 500;
font-size: 23px;

margin: 40px 0;}
.my_h1s{
  font-size: 3em;

color: #FF9843;
}

h4{color:#41644A ;
 margin-top: 20px 0;
font-size: 23px;
  font-weight: 400;
  }
p{text-align: center;}

/* #widgets{margin-top: 22em;} */

/* Testimonial Section //////////////////////////////////////////////////*/

.testimonial-text {
  font-size: 2rem;
  line-height: 1.5;
}

.testimonial-image {
  width: 13%;
  border-radius: 100%;
  margin: 20px;
}

/* Center website */
.main {
  max-width: 1000px;
  margin: auto;
}
 

.row {
  margin: 10px 
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
  padding: 8px;
}


/* Clear floats after rows */ 
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.contenting {
border: #016A70 solid 2px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
}
.contenting:hover{
  background-image: linear-gradient(180deg, rgb(0, 255, 140), yellow);

}
.nature{ float: left;
  width: 33%;
margin: auto;}
/* 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;
  padding: 80px;
  text-align: center;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  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;
}

.about-Imag{  width:26% ;}
  
.text-cont{width: 50%; margin: auto 20px; font-size: 16px;}

.ilse{height: 216px;}
/* why */

.row > .column ,.nature{
  padding: 10px 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}



/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  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: 50%;

  margin:70px 0;
border: 10px solid  rgba(87, 150, 233, 0.8);
box-shadow: 0 0 20px 20px rgb(225, 218, 218);
  margin-left: 22%;

  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: 32%;
padding: 10px  ;
margin: auto ;
}
.myModal{
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  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;
  left: 30%;
width: 60%;
margin: auto;
}

/* The Close Button */
.close {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position: absolute;
  top: 3.5rem;
  right: 28%;
  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;
  padding: 8px 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 {
  max-width: 100rem;
  height: 50rem;
  margin: 0 auto;
  position: relative;

  /* IN THE END #FFE6E1   #FF3F33*/
  overflow: hidden;
}

.slide {
  margin-top: 60px;
  position: absolute;
  top: 0;
  width: 100%;
padding: 8rem;
 background-image: url(mbeach.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  
  color: #e6f3f2;
  background-blend-mode: color;

  /* THIS creates the animation! */
  transition: transform 1s;
}



/* FOOTER */






/* Navbar links */

image{width: 180px;
  background-color: #aeeb09;
   }


.myTEXT{  

border-radius: 50px;
width: 60%;
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-image: linear-gradient(to top, #c1bbde 0%, #80CBC4 100%);
  /* background-color: #80CBC4; */

position: relative;
bottom: 0;
height: 270px;
}

#foot{
width: 70%;
margin: auto;
right:40px;
color: #fcf8f8;
text-align: center;
} 
#ctn-Info{
font-size: larger;
margin-top: 10px;
}


.contact-Info, 
.contactInfo-social,
/* .contactInfo{margin-top: 20px;} */
.linesLand,
.lstInfo{
margin: 10px; color: rgb(22, 8, 8);
text-align: justify;
font-weight: 500;
}
#abt{
color: #FF6969;
font-size: x-large;
font-weight: 600;
}#txtt{width: 20%;
  
  position: relative;
  left: 0%;
}
.contact-Info{
list-style-type: none;
margin-left: 50px;
}

  .contactInfo-social{
    list-style-type: none;
     position: absolute;
 right: 5%;

    }

    .listInfo{display: flex;}
.contactInfo{list-style-type: none;
/* background-color: #2D9596; */
position: absolute;
right: 45%;
color: #016A70;

}

@keyframes move-the-circle {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 50px);
  }
  100% {
    transform: translate(0, 0);
  }
}
}
/* ----------------------------------------------
 * Generated by Animista on 2025-6-26 2:23:55
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation wobble-hor-bottom
 * ----------------------------------------
 */


/* ////////////////////////////////////////////////////////////////////////////////////////0000000000000000 */