.header{
    height: 650px;
    width: 100%;
    background-image: url(prices.webp);
    background-size: cover;
    background-attachment: fixed;
    background-position:center;
}

.bar{
    display:inline;
    padding-top: 1%;
    padding-right: 1%;
    right: 2%; 
}
.icon{
    height: 32px;
     width: 32px;
}
.menu{
    padding-left:0%;
    padding-top: 0%; 
}
nav a{
    font-size: 35px;
    font-weight: bolder;
    text-decoration: none;
    
}
.nav2{
    font-weight: bolder;
    text-decoration: none;
    animation-name: nav2;
    animation-duration:1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction:normal;
}

#myLinks {
display: block;
}
.fixed{
    position: fixed; 
}

.anav{
color: rgb(7, 7, 7);
margin-left: 25px; 
}
nav a:hover{
color: rgb(126, 190, 6);
}
.contactbtn{
border-radius: 15px;
border: 2px solid black;
background-color: rgba(126, 190, 6, 0.76);
padding: 1%;
padding-left: 2%;
padding-right: 2%;
text-decoration: none;
text-align: center;
font-weight: bold;
font-size: larger;
color: #080808;
}
.contactbtn:hover{
background-color: rgb(214, 213, 213);
color: rgb(88, 134, 3);
font-weight: bolder;
font-size: x-large;
}
.ar{
margin-left: 47%;
}
#media{
    float: right;
    display: inline;
    
}
#medialogo{
    display: none;
}
#newform{
    padding: 1%; 
    margin-left: 0%;
    display: inline-block;
}
.hr{
margin-left: 10%;
margin-right: 10%;
}
.hr2{
margin-left: 10%;
margin-right: 40%;
}
 h1{
    color: rgb(234, 235, 236);
    text-align: center;
    font-size: 60px;
    padding-top: 15%;
    transition: font-size 1s;
}
h2{
    text-align: center;
    font-size: 40px;
    padding: 2%;
  }
  h3{
    color: rgb(63, 97, 1);
    font-size:x-large;
    padding: auto;
  }
.newfont{
    font-size: 40px;

}

h4{
     
    transition: all 1s, transform 3s;
}
.newh4{
    font-size: xx-large;
    transform: scaleY(180deg);
}

.p{
    font-size: larger;
    font-weight: bold;
    display: inline;
}
.fontsize{
    text-align: center;
    font-size: medium;
    padding: 1%;
    transition: font-size 1s;
}
.newfontsize{
    font-size: large;
}
.display{
    display:flex;
    text-align:center;
    overflow:auto;
    max-width:100%;
}
.size{
    max-width: 270px;
    max-height: auto;
    transition: all 1s;
    
}
.newsize:hover{
    max-width: 300px;
    max-height: auto;
    
}
u{
    font-size: large;
}
.newsize1:hover{
    font-size: x-large;
    
}
.newsize2:hover{
    font-size: xx-large;
    
}
.margin{
    margin:0 auto;
    max-width: 100%;
}

.float{
    float: right;
    margin: auto;
}
.img-ar{
    float: left;
    width: 300px;
    height: auto;
    display:block;
}

.logosize{
    width: 90px;
    height: auto;
    
}
.logosize-2{
 height: auto;
 animation-name: logo;
 animation-duration:1s;
 animation-timing-function: ease;
 animation-fill-mode: forwards;
 animation-direction:normal;
}
@keyframes logo{
    from{width: 90px;}
    to{width: 75px;}
}


#floatleft1{
    float: left;
    margin-top: 6%;
    margin-left: 4%;
    border:1px solid #0e0d0d;
    padding: 1%;
}
.decoration{
    text-decoration: none;
}
.boxdiv{
    display: flex;
margin-top: 1%;
margin-bottom: 1%;
margin-left: 20%;
margin-right: 20%;
position: relative;

}

.courses{
    background-color:rgba(243, 242, 242, 0.801);
    margin:auto;
    text-align: center;
    max-width: fit-content;

}
.section{
vertical-align: middle;
max-width: 100%;
height: auto;
margin-bottom: 5%;
}
.sectionmargin{
 margin-left: 0%;
 margin-right: 0%;
}
.astyle{
    text-decoration: none;
    color: rgb(0, 0, 0);
    right: 1%;
    bottom: 1%;
    border-radius: 20%;
    border:1px solid #1d1a1a;
    width: 30px;
    height: 20px;
    text-align: center;
    background-color:rgb(126, 190, 6) ;
    position: fixed;
    padding: 0.4%;
}
.back{
    z-index: 1;
}
.link{
    text-decoration: none;
    text-align: center;
    color:rgb(7, 7, 7);
    padding: 0.5%;
    width: 15%;
    height: auto;
    border-color: black;
    border-radius: 13px;
    border-style: groove;
    background-color:rgb(126, 190, 6);
    font-weight: bold;
    font-size: larger;
    display:block;
    margin: auto;
    position: relative;
    padding: 1%;
        
  }
a:hover{
    text-transform: none;
    
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:absolute;
background-color: #f1f1f1;
min-width: 260px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;

}

/* Dropdown Button */
.dropbtn {
color: rgb(8, 8, 8);
border: none;
}
.pagecolor{
    color: rgb(63, 97, 1);
}
.pagecolor-child{
background-color: #bdbaba;
}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
width: 94%;
font-size: xx-large;

}
.dropdown:hover .dropdown-content {
display:block;

}
.dropdownchild {
    position: relative;
    display: block;
    }
    .dropbtn-child {
        color: rgb(8, 8, 8);
        border: none;
        }
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content-child {
    display: none;
    position:absolute;
    margin-left: 100%;
    margin-top: -20%;
    background-color: #f1f1f1;
    min-width: 320px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
    }
    .dropdown-content-child a{
        color: black;
        text-decoration: none;
        display: block;
        width: 94%;
        font-size: xx-large;
        
        }
        .dropdownchild:hover .dropdown-content-child {
        display:block;
        
        }

.navbar {
background-color: #d8d6d6;
position: fixed;
top: 0;
width: 99.4%;
height: 110px;
transition: height 1s;
z-index: 1;

}
/* arrows down, up, left, and right*/
.arrow {
border: solid rgb(14, 13, 13);
border-width: 0 2px 2px 0;
display: inline-block;
padding: 2.5px;
margin: 1px;
margin-bottom: 3px;
}
.arrowtop {
border: solid rgb(10, 10, 10);
border-width: 0 2px 2px 0;
display: inline-block;
padding: 2.5px;
margin: 1px;
margin-bottom: 3px;
}
.right-arrow {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin: 0px;
    margin-bottom: 0px;
  }
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
padding: 3.5px;
margin-top: 6px;
border-width: 0 3px 3px 0;
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin: 0px;
    margin-bottom: 0px;
}

.test{
height: 90px;
}

.navbar a{
display: inline-block;
padding: 7px 8px ;
}


/* Hide the links inside the navigation menu (except for logo/home) */

.color{
color: #f1f1f1;
}
.color:hover{
color: aqua;
position: relative;
}
.trip{
    display: inline-block;
    background-color: #ffffff;
    border: 1px black solid;
    padding: 1.5%;
    max-width: 150px;
    max-height: 65px;
    text-align: center;
    text-size-adjust:initial;
    position: relative;
    margin-left: 8%;
    
    }

.tripde{
margin-left: 45%;
display: inline-block;
background-color: #f1f1f1;
border: 1px black solid;
padding: 1.5%;
max-width: 120px;
max-height: 70px;
text-align: center;
text-size-adjust:initial;

}
.sara{
 margin-bottom: 0;
 text-align:center;
animation: saraani 7s infinite, transform 5s;
}
@keyframes nav2{
form{ font-size: 35px;}
to{ font-size: xx-large;}
}

.sara1{
text-align: center;
display: inline-block;
}
.padi{
max-width: 120px;
max-height: 95px;
text-align:center;
animation: saraani 6s infinite, transform 5s;
}

.right{
margin-left: 44%;
margin-top: -15%;
font-weight: bold;
font-size: large;
float: left;
}
.divtrip{
max-width: 250px;
position: relative;
margin-left: 45%;
}

#style{
font-size: large;
font-weight: bold;
}
.divmenu {
width: 25px;
height: 3px;
background-color: rgb(8, 8, 8);
margin: 4px;
}
.divmenu1 {
width: 19px;
height: 3px;
background-color: rgb(8, 8, 8);
margin: 4px;

}
.divmenu2 {
width: 22px;
height: 3px;
background-color: rgb(8, 8, 8);
margin: 4px;

}
.divmenudisply{
display: none;
}
span{
color: antiquewhite;
}
.img{
width: 300px;
height: auto;
display:block;
margin: 2%;
margin-top: 0;
float: right;
transition: all 1s, transform 1s;
}

.newdiv{
display: flex;
margin-left: 3%;
}  
.width{
width: 100%;
max-width: 100%;
}
.textaligen{
text-align: center;
padding: 2%;
}
#padip{
text-transform: none;
color: #080808;
font-family:'Times New Roman', Times, serif ;
}
.texth6{
    text-align: center;
    padding: 0%;   
}
    
    .floatbutton{
        float: right;
        width: fit-content;
        height:fit-content;
        padding: 3%;
        margin-right: 19%;
        margin-top: 10%;
        display: inline;
        background-color: rgb(126, 190, 6);
        
    }
    .floatbutton-de{
        width: fit-content;
        height:fit-content;
        padding: 3%;
        margin-top: 7%;
        margin-left:19%;
        display: inline;
        background-color: rgb(126, 190, 6);
        
    }
    .h3normal{
        font-size: larger;
    }
      article{
        margin-left: 25%;
        margin-right: 25%;
        margin-top: 5%;
        margin-bottom: 5%;
      }
      .divhead{
        text-align: center;
        padding-top: 15%;
        
    }
    .backh1{
        background-color: #17161665;
        padding: 1%;
        max-width: 50%;
        margin-left: 23%;
       }
       body{
        font-family: Arial, Helvetica, sans-serif;
       }
       body p{
        font-size: x-large;
       }
       body li{
        font-size: x-large;
       }
       #p-normal{
        font-size: unset;
       }
/* New footer style*/
.foot{
display:inline;   
}
.footer{
  margin-left: 20%;
  display: inline-block;
  
}
.font{
  font-weight: bold;
  font-size: large;
}
.marginbtn{
  margin: 5px;
}
.hr3{
  margin-left: 20%;
  margin-right: 20%;
}
.text1{
  text-align: left;
  margin-left: 20%;
  padding-bottom: 2%;
}
.textfoot{
display: inline;
padding-left: 1%;
padding-top: 0;
margin-left: 12%; 
}
footer{
background-color: rgba(126, 190, 6, 0.76);
margin-top: 1%;
}
footer a{
color: black;
text-decoration: none;
}
footer a:hover{
color: rgb(235, 231, 231);
}
.gridfoot{
display: inline;
float: right;
padding-top: 2%;
text-align: start;
margin-right: 20%;
font-size: medium;
font-weight: bold;
}
.grid1{
display: grid;   
}
#topbtn{
display: none;
}
.marginf{
    font-size: large;
}
.about{
    margin-right: 10%;
    margin-left: 10%;
  }
  .fontsize-about{
    text-align: center;
    font-size: xx-large;
    padding: 1%;
  
  }
  .fit{
    display:contents;
  }
  .pcolor{
    color: rgb(133, 111, 111);
  }
  .section-advanced{
    padding: 4%;
  }
  .img-basic{
    width: auto;
    height: 400px;
    margin: auto; 
    display:block 
  }
  .tablestyle{
    text-align: center;
    margin: auto;
    width: 80%
  }
  th{
    padding: 1%;
    color: #0319e0;
   }
  td{
    padding: 1%;
  }
  .bigth{
    font-size: x-large;
    color: #0a0a0a;
  }
  .larger{
    font-size: larger;
    font-weight: bold;
    color: rgb(210, 66, 30);
  }
  .difference{
    color: rgb(10, 10, 10);
  }
  #color4{
    color: rgb(46, 3, 240);
    text-decoration: none;
   }  
   #media-2{
    float: right;
    display: inline;
    padding: 2%;
    width: 500px;
    height:auto;
    
}#media-2-ar{
    float: left;
    display: inline;
    padding: 2%;
    width: 500px;
    height:auto;
}
/* ===== Popup booking form — single source of truth ===== */

/* Backdrop + centering */
#bookingModal{
  display:none;                /* hidden by default */
  position:fixed;
  inset:0;
  z-index:10000;
  padding:clamp(8px,3vw,24px); /* gives side space on small screens */
  background:rgba(0,0,0,.55);
  align-items:center;          /* center vertically */
  justify-content:center;      /* center horizontally */
}

/* Opened state (toggled by JS) */
#bookingModal[aria-hidden="false"]{ display:flex; }

/* Dialog (the white card) */
#bookingModal .modal-content{
  position:relative;           /* anchor the close button INSIDE the box */
  width:min(96vw, 640px);      /* never exceed viewport width */
  max-height:92vh;             /* avoid tiny inner scrollbars */
  overflow:auto;
  background:#fff;
  border-radius:14px;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  padding:24px clamp(16px,3vw,24px) 18px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* Title */
#bookingModal .modal-content h2{
  margin:4px 0 14px;
  text-align:center;
  line-height:1.15;
  font-size:clamp(22px,2.6vw,34px);
  font-weight:800;
}

/* Close button — fixed to top-right INSIDE the card */
#bookingModal .close-btn{
  position:absolute;
  top:10px; right:10px;
  width:34px; height:34px;
  border:1px solid #d9d9d9;
  border-radius:6px;
  background:#f7f7f7;
  color:#333;
  font-size:20px; line-height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:10;                  /* ensure always on top within the card */
}
#bookingModal .close-btn:hover{ background:#eee; }

/* Form layout */
#popupForm{ display:block; }
#bookingModal label{
  display:block;
  font-weight:700;
  font-size:.95rem;
  margin:10px 0 6px;
  color:#111;
}

/* Fields */
#bookingModal input[type="text"],
#bookingModal input[type="email"],
#bookingModal input[type="tel"],
#bookingModal select,
#bookingModal textarea{
  box-sizing:border-box;
  width:100%;
  font:inherit;
  padding:12px 12px;
  border:1.2px solid #cfcfcf;
  border-radius:10px;
  background:#fff;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
#bookingModal textarea{ min-height:110px; resize:vertical; }

/* Focus ring */
#bookingModal input:focus,
#bookingModal select:focus,
#bookingModal textarea:focus{
  border-color:#7ebe06;
  box-shadow:0 0 0 3px rgba(126,190,6,.18);
}

/* Privacy checkbox row */
#bookingModal label[style*="display:flex"]{
  gap:.6rem; align-items:center;
  font-weight:600; font-size:.95rem; margin-top:14px;
}
#bookingModal input[type="checkbox"]{
  width:18px; height:18px; accent-color:#7ebe06;
}

/* Submit */
#bookingModal .submit-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px;
  min-width:110px;
  background:#7ebe06;
  border:none; color:#0a0a0a;
  font-weight:800; border-radius:10px;
  cursor:pointer;
  transition:transform .05s ease, background .15s ease, opacity .15s ease;
}
#bookingModal .submit-btn:hover{ background:#6cab03; }
#bookingModal .submit-btn:active{ transform:translateY(1px); }
#bookingModal .submit-btn:disabled{ opacity:.6; cursor:not-allowed; }

/* Button row spacing */
#bookingModal form > div[style*="text-align:right"]{ margin-top:14px; }
@media screen and (max-width: 1920px){
     /* 2k/4k */
  #bookingModal .modal-content{ width:min(70vw, 820px); max-width:820px; }
  #bookingModal label{ font-size:1rem; }
  #bookingModal input, #bookingModal select, #bookingModal textarea{ font-size:1rem; padding:14px; }
  #bookingModal .submit-btn{ padding:14px 26px; font-size:1rem; }

.textfoot{
    margin-left: 5%;
    font-size: larger;
  }
#FAQ{
    font-size: xx-large;
    padding-left: 5%;
    max-width: 40%;
}
        nav a{
            font-size: 27px;
        }
        .dropdown-content a {
            font-size: x-large;
            }
        @keyframes nav2{
            form{ font-size: 27px;}
            to{ font-size: x-large;}
          }
        .navbar{
            width: 99.2%;
            }
            .right{
                padding-right: 25%;
                padding-left: 25%;
                font-weight: bold;
                font-size: large;
                
            }
            .right{
                margin-left: 18%;
                margin-top: -20%;
                font-weight: bold;
                font-size: large;
                float: left;
            }
            .boxdiv{
                margin-left: 16%;
                margin-right: 16%;
            }
            
    }
@media screen and (max-width: 1440px){
    #bookingModal .modal-content{
    width:min(84vw, 720px);
    max-width:720px;
    padding:26px 26px 20px;
  }
  #bookingModal .modal-content h2{
    font-size:clamp(26px,2vw,36px);
    margin-bottom:16px;
  }
    #media-2{
        width: 350px;
    }
    #media-2-ar{
        width: 350px;
    }
    body p{
        font-size: larger;
       }
       body li{
        font-size: larger;
       }
    .backh1{
        max-width: 80%;
        margin-left: 10%;
        margin-top: 15%;
        }
    .link{
        width: 20%;
        font-size: larger;
        padding: 2%;
       
      }
.header{
    height: 650px;   
    background-attachment: unset;     
}
.floatbutton-de{ 
    margin-top: 4%;
    margin-left: 25%;  
}

/* New footer style*/

  .text1{
    text-align: center;
    margin: auto;
    padding-bottom: 10%;
}
.textfoot{
    margin-left: 1%; 
  }
#FAQ{
    font-size: xx-large;
    padding-left: 5%;
    max-width: 60%;
}

.right{
    margin-left: 18%;
    margin-top: -25%;
    font-weight: bold;
    font-size: large;
    float: left;
}

nav a{
    font-size: larger;
}
.dropdown-content a {
    font-size: larger;
    }
@keyframes nav2{
    form{ font-size: larger;}
    to{ font-size: large;}
  }
.anav{
    margin-left: 15px; 
}
        .boxdiv{
            margin-left: 5%;
            margin-right: 5%;
        }
        .floatbutton{
            float: right;
            width: fit-content;
            height:fit-content;
            padding: 3%;
            margin-right: 25%;
            margin-top: 4%;
        }
        .navbar{
            width: 99%;
            }
        }
@media screen and (max-width: 900px){
    #media-2{
        width: 250px;
    }
    #media-2-ar{
        width: 250px;
    }
    article{
        margin: 5%;
      }
    .header{
        background-image: url(prices-small.webp);
        background-size: cover;
    }
    .backh1{
        max-width: 80%;
        margin-left: 10%;
        margin-top: 15%;
        }
    .link{
        width: 25%;
        font-size: larger;
       
      }
.divtrip{
    margin-left: 40%;
}

.textfoot{
    margin: auto;
     display: block;
  }

#FAQ{
    font-size: xx-large;
    padding-left: 5%;
    max-width: 60%;
}
.right{
    margin-left: 15%;
}

.anav{
    margin-left: 0px; 
}
            .boxdiv{
                display: block;
            }
            .floatbutton{
            float: right;
            width: fit-content;
            height:fit-content;
            padding: 3%;
            margin-right: 18%;
            margin-top: 8%;
        }
        .floatbutton-de{ 
            margin-top: 4%;
            margin-left: 18%;  
        }
        .space{
            margin: 2%;
        }
        .navbar{
            width: 98%;
            }
            nav a{
                font-size: medium;
            }
            .dropdown-content a {
                font-size: medium;
                }
            @keyframes nav2{
                form{ font-size: medium;}
                to{ font-size: medium;}
              }
        }
@media screen and (max-width: 600px) {
    #bookingModal{ padding:16px; }            /* consistent backdrop padding */
  #bookingModal .modal-content{
    width:90%;                               /* ~5% gap each side */
    margin:auto;
    padding:18px 16px 16px;
    border-radius:12px;
  }
  #bookingModal .submit-btn{
    width:100%;
    padding:14px;
  }
    body p{
        font-size: large;
       }
    th{
    padding: 0%;
    font-size: x-small;
    
   }
  td{
    padding: 0%;
    font-size: x-small;
  }
  .bigth{
    font-size: x-small;
  }
  .larger{
    font-size: x-small;
    
  }
    .link{
        width: 35%;
        font-size: large;
      }
/* New footer style*/
.divtrip{
    margin-left: 32%;
    display: block;
}
.text1{
    text-align: center;
    margin: auto;
    padding-bottom: 10%;
}
.gridfoot{
    text-align: center;
    float: none;
    margin: auto;  
  }
  .footer{
    text-align: center;
    margin-left: 26%;
}

h1{
    font-size: xx-large; 
}
.contactbtn{
    border-radius: 0px;
    padding: 3%;
   
    
}
nav a{
    font-size: large;
}
@keyframes nav2{
    form{ font-size: large;}
    to{ font-size: large;}
  }
.logosize{
    width: 60px;
    height: auto;
}
@keyframes logo{
    from{width: 60px;}
    to{width: 60px;}
}
    #media{
        display: none;

    }
    #myLinks{
       display: none;   
    }
    
    .menu{
        background-color: #d8d6d6;
        border: 1px solid rgb(10, 10, 10);
        display: inline-block;
        width: 92%;
        height: 350px;
        margin-top: 16%;
        padding-bottom: 6%;
        padding-left: 4%;
      
    }
    form{
        width: auto; height: auto;
        display: inline-block;
    }
    #formnav{
        margin-right: 9%;
        padding-top: 3%;
        
    }
  
#floatleft{
display: none;
}
#medialogo{
display: block;
float: right;
}
.navbar a{

display: block;
padding: 12px 4px ;

}
.navbar-ar a{
    padding: 8px 4px ;
    
    }
.navbar{
width: 97%;
height: 85px;
}
.test{
height: 85px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
text-decoration: none;
display: inline-block;
font-size: large;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content-child {
    display: none;
    position:absolute;
    margin-left: 100%;
    margin-top: -20%;
    background-color: #f1f1f1;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
    }
.floatbutton{
width: fit-content;
height:fit-content;
padding: 3%;
margin-right: 12%;
margin-top: 4%;

}


.tripde{
margin-left: 30%;
max-width: 125px;
max-height: 75px;

}
.right{
display: none;

}
#newform{
display: none;
}
.sara1{
margin-top: 1%;
}

.fixed1{
position: fixed;
z-index: 1;
}

.boxdiv{
display: block;
margin-top: 1%;
margin-bottom: 1%;
margin-left: auto;
margin-right: auto;
position: relative;
}


.divmenudisply{
display: block;
margin-top: 3px;
}
.courses{
margin-top: 1%;
}
.newdiv{
display:flex;
margin: 0;
}
.img{
width: 60%;
height: auto;
margin-left:20% ;
float: left;
}
.img-ar{
    width: 60%;
    height: auto;
    margin-left:1% ;
    float: left;
    }    
 
.fontsize{
font-size: large;
}


.marginf{
padding: 3%;
}
.hr2{
margin-left: 10%;
margin-right: 10%;
}
.backh1{
    max-width: 80%;
    margin-left: 10%;
    margin-top: 45%;
    }

}

/* On smaller screens, decrease text size */
@media screen and (max-width: 470px) {
.navbar{
    width: 96%;
    }
.divtrip{
    margin-left: 25%;
    display: block;
}
  .footer{
    text-align: center;
    margin-left: 20%;
}

}
/* ===== Prices page: responsive tables ===== */
:root{
  --price-bg:#dfe1e4;      /* adjust to your theme */
  --price-surface:#afb0b3; /* adjust to your theme */
  --price-text:#0d0d0d;
  --price-muted:#5b6066;
  --price-accent:rgb(126, 190, 6);
  --price-border:rgba(255,255,255,.08);
  --radius:14px;
}

/* section anchors */
#courses, #activities, #rentals, #addons{
  scroll-margin-top: 96px; /* keep anchors visible under sticky nav */
}

/* wrapper enables horizontal scroll on small screens */
.price-wrap{
  background:var(--price-surface);
  border:1px solid var(--price-border);
  border-radius:var(--radius);
  padding:10px;
  overflow:auto;               /* key for mobile */
  -webkit-overflow-scrolling:touch;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}

/* table baseline */
.price-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width:560px;             /* allows 3 columns to breathe; scrolls below this */
  color:var(--price-text);
  font-size:16px;
  line-height:1.45;
}

/* cells */
.price-table th,
.price-table td{
  padding-block:12px;
  padding-inline:14px;
  border-bottom:1px solid var(--price-border);
  text-align:start;            /* respects LTR/RTL */
  vertical-align:top;
}

/* header */
.price-table thead th{
  top:0;
  z-index:2;
  background:rgb(126, 190, 6);
  color:#0a0a0a;
  font-weight:600;
  letter-spacing:.2px;
  border-bottom:1px solid rgba(255,255,255,.18);
}

/* rounded corners on first/last header cells */
.price-table thead th:first-child{ border-top-left-radius:calc(var(--radius) - 2px); }
.price-table thead th:last-child{  border-top-right-radius:calc(var(--radius) - 2px); }

/* rows */
.price-table tbody tr:nth-child(even){ background-color:rgba(255,255,255,.03); }
.price-table tbody tr:hover{ background-color:rgba(31,163,255,.08); }

/* price emphasis */
.price-table td strong{
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* notes */
.price-notes{
  margin:10px 2px 0;
  color:var(--price-muted);
  font-size:14px;
}

/* primary button (optional, matches markup <a class="btn primary">) */
.btn.primary{
  display:inline-block;
  margin-top:14px;
  padding:10px 16px;
  background:var(--price-accent);
  color:#001728;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
}
.btn.primary:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* RTL refinements (section already sets dir=\"rtl\") */
[dir=\"rtl\"] .price-table thead th:first-child{ border-top-right-radius:calc(var(--radius) - 2px); }
[dir=\"rtl\"] .price-table thead th:last-child{  border-top-left-radius:calc(var(--radius) - 2px); }

/* small screens: tighter rhythm */
@media (max-width: 768px){
  .price-table{ font-size:15px; }
  .price-table th, .price-table td{ padding-block:10px; padding-inline:12px; }
}

/* very small screens: maximize visibility */
@media (max-width: 420px){
  .price-wrap{ padding:8px; }
  .price-table{ font-size:14px; min-width:520px; } /* keep columns readable, allow scroll */
  .btn.primary{ width:100%; text-align:center; }
}