:root {
  --primary-color: 255,255,255;
  --background-color: 21, 20, 18;
}
* {
margin: 0;
padding: 0;
font-family: Tahoma;
box-sizing: border-box;
}

html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: rgb(var(--background-color));
}

/* Start header */

header {
display: flex;
justify-content: space-around;
align-items: center;
position: fixed;
width: 100%;
z-index: 999999;
background-color: rgb(255,255,255,0.1);
}
.scrolled-bg {
  background-color:white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

}
.header_logo {
width: 150px;


}

nav {
display: flex;
align-items: center;
}

.menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

.menu li {
margin-left: 20px;
}

.menu a {
color:black;
font-size: 1.2rem;
text-decoration: none;
}

.menu a:hover {
  color:burlywood;
}



.hamburger {
display: none;
flex-direction: column;
cursor: pointer;

}



.hamburger .line {
width: 25px;
height: 3px;
background:black;
margin: 4px 0;
}

/* Responsive Styles */
@media (max-width: 768px) {

header {
  padding: 0px 20px;
}
.menu {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 100px;
    left: 0;
    background: #333;
}
.menu li {
    margin: 0;
    text-align: center;
    padding: 10px 0;
}
.hamburger {
    display: flex;
    padding-top:20px;
    background-color:transparent;
}
.menu.is-active {
    display: flex;
}
}

/* End header */

/* Hero Section */
.hero {

width: 100%;
height: 100vh;
font-size: 140px;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;

}

@media (max-width: 768px) {
.hero {
  height: 650px;
  padding-bottom: 50px;
  font-size: 20px;
}
}
.text-banner{
font-size: 80px;
}
@media (max-width: 768px) {
.text-banner{
  font-size: 40px;
  text-align:center;
}
}
.text-banner-sub{
font-size: 20px;
text-align:center;
padding:10px;
}
@media screen and (max-width: 768px) {
.text-banner-sub{
  font-size: 15px;
}

}

.text-size{
color:#fff;
}
@media screen and (max-width: 768px) {
.text-size{
  font-size: 20px;
}

}

.button-size{
width:160px;
background-color: black;
color:white;
}

@media screen and (max-width: 768px) {
  .button-size{
    width: 120px;
  }

}

.image-background{
width:800px;
height:300px;
}

@media screen and (max-width: 768px) {
.image-background{
  width:200px;
  height: 250px;
}

}

.banner {
/* position: relative; */
z-index: 1;
background-image: url("../Pictures/banner.jpg");
width: 100%;
background-position: center;
background-size: cover;
height: 100vh;
padding-top: 50px;
}
@media screen and (max-width: 768px) {
.banner{
  width: 100%;
  height: 500px;
  padding-top: 17px;
}

}
.banner::before {
content: '';
position: absolute;
inset: 0;
background-color: rgb(0, 0, 0,0.3);
}

/* end hero  */

.btn-primary {
background-color: rgb(var(--primary-color)) !important;
border-color:rgb(var(--primary-color)) !important ;
color: #333 !important;
}

/* ******************** */

/* .homepage-pic{
width:500px;
} */

.container {
max-width: 100%;
padding: 0 15px;
display: flex;
justify-content: center;
align-items: center;
flex-direction:row;
}

/* .flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
} */

.text-container {
flex: 1 1 45%;
margin: 10px;
flex-direction: column;
color: aliceblue;
text-align: center;
}

.text-container-2{
color: aliceblue;

text-align: center;
}
@media screen and (max-width: 768px) {
.text-container-2{
  margin:20px;
}

}

.image-container {
flex: 1 1 45%;
margin: 10px;

}

.image-container-3{
width:100px;
height:100px;
}

@media screen and (max-width: 768px) {
.image-container-3{
  width: 100%;
   height: 150px;
}

}

.col{
width: 100px;
height: 220px;
color: white;
display: flex;
}
@media screen and (max-width: 768px) {
.col{
  width: 100%x;
  justify-content: center;
  flex-direction: wrap;
}

}



.text-container-second {
flex: 1 1 45%;
margin: 10px;
display: flex;
flex-direction: column;

}

.image-container-second{
flex: 1 1 45%;
margin: 10px;
display: flex;
justify-content:flex-end;
align-items:end;

}


/* .homepage-pic {
height:300px;
width:550px;
}
@media screen and (max-width: 768px) {
.homepage-pic{
  padding-left: 20px;
    width: 300px;
    height: 200px;
}

} */



@media (max-width: 768px) {
.text-container, .image-container {
    flex: 1 1 100%;
    margin: 10px 0;
}
}

.custom-card {
width: 250px;
background-color: rgb(202, 199, 199);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 4px 0 8px rgba(0, 0, 0, 0.1), -4px 0 8px rgba(0, 0, 0, 0.1); /* Add shadow to left, right, and bottom */
border: none;
}

@media screen and (max-width: 768px) {
.custom-card{
  width: 300px;
  width: 200px;
}

}

.custom-button{
margin-top: 1rem;
}

@media screen and (max-width: 768px) {
.custom-button{
  font-size: 12px;
}

}

.home-background-2{
background-image: url("../Pictures/pol6.jpg");
background-repeat: no-repeat;
background-position: center 0px;
background-size: cover;
width: 100%;
padding-top:100px;
padding-bottom:100px;
}

@media screen and (max-width: 768px) {
.home-background-2{
  width: 100%;
 
  padding: 15px;
}

}

.home-text{
color: white;
}

@media screen and (max-width: 768px) {
.home-text{
  text-align: center;
}

}

.home-text-2{
color: white;
width: 50%;
text-align: center;
}

@media screen and (max-width: 768px) {
.home-text-2{
  width: 100%;
  text-align: center;
  padding:10px;
}
.home-text-3{
  padding-left:20px;
  padding-right:20px;
}

}
.text-background{
background-color: transparent; /* Ensures no background color */
width: 1000px;
display: flex;
gap: 20px;
}
@media screen and (max-width: 768px) {
.text-background{
  width: 100%;
  gap:50px;
  padding: 15px;
}

}

.background-img{
width:100%;
height:300px;
}

@media screen and (max-width: 768px) {
.background-img{
  width: 100%;
}
}

.bg-img{
width:100%;
height:300px;
}

@media screen and (max-width: 768px) {
.bg-img{
  width: 100%;
  height: 0px;
}

}

.slider { height: 300px; max-width: 800px; margin: 0px auto 20px auto;  }

.slider .slider_data { display: none; }

.slider .slider_stage_large { height: inherit; position: relative; overflow: hidden; }

.slider .slider_container_1,
.slider .slider_container_2 { height: inherit; position: absolute; top: 0px; width: 100%; }

.slider .slider_container_1 { z-index: 101; }
.slider .slider_container_1 { z-index: 102; }

.slider .slider_spos { left: 0px; }
.slider .slider_spos2 { left: 800px; }

.slider .slider_rpos { right: 0px; }
.slider .slider_rpos2 { right: 800px; }

.slider .slider_panel { height: inherit; width: 100%;
position: absolute; top: 0px; left: 0px;
text-align: center;
background-repeat: no-repeat;
background-position: center 0px;
background-size: cover;

}

@media screen and (max-width: 768px) {
.slider{
  width: 250px;
  height: 400px;
  padding: 20px;
}

}

.slider .slider_nav {
position: absolute; bottom: 10px; left: 0px;
text-align: center; width: 100%;
z-index: 103;
}

.slider .slider_nav div {
display: inline-block;
width: 10px; height: 10px;
border: 2px solid #000;
border-radius: 50%;
margin: 0px 8px 0px 8px;
cursor: pointer;
transition: background-color .4s, border .4s;
}

.slider .slider_nav div:hover { border-color: #000; background-color: #000; }

.slider .slider_nav div.selected { background-color: #000; }

.slider .btn {
width: 39px; height: 39px;
/*background: rgba(255,255,255,.2) no-repeat;*/
background-size: 100%;
position: absolute; top: 140px;
cursor: pointer;

}

.slider .btn:hover { border-color: #fff; background-color: rgba(0,0,0,.6); }
.slider .btn.prev {
left: 20px; z-index: 104;
background-image: url(https://s19.postimg.org/s3f5mlgvz/a_Left.png);
}
.slider .btn.next {
right: 20px; z-index: 105;
background-image: url(https://s19.postimg.org/cvz628p1b/a_Right.png);
}


.home-background-3{
background-image: url("../Pictures/pol4.jpg");

width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding-top: 100px;
padding-bottom:100px;
background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
.home-background-3{
  width: 100%;
 padding:20px;
}

}

.home-text-3{
color: white;
text-align: center;
padding:20px;
}
@media screen and (max-width: 768px) {
.home-text-3{
  padding-top: 40px;
}

}

.img{
height:300px;
width:550px;
}
@media screen and (max-width: 768px) {
.img{
    width: 100%;
    height: 200px;
}

}

.background-txt{
font-size: 40px;
}
@media screen and (max-width: 768px) {
.background-txt{
  font-size: 35px;
}

}

.background-txt-sub{
font-size: 20px;
}
@media screen and (max-width: 768px) {
.background-txt-sub{
  font-size: 20px;
}

}

.slider-image{
display: flex;
justify-content: center;
gap: 50px;
}
@media screen and (max-width: 768px) {
.slider-image{
  flex-wrap: wrap;
  width: 100px;
}

}

.slider-image-2{
width:200px;
height: 150px;
}
@media screen and (max-width: 768px) {
.slider-image-2{
  width: 150px;
  height: 150px;
}

}

/* ################# */

.container {
          background-color: black;
          padding: 20px;
         
      }

     

      .col-6 {
          flex: 0 0 50%;
          max-width: 50%;
          padding: 10px;
         
         
      }

      .image-container-second img {
        height:300px;
        width:550px;
         
      }

      .text-container-second {
          color: white;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
      }

      .text-container-second h1,
      .text-container-second h5,
      .text-container-second h2 {
          margin: 10px 0;
      }

      .text-container-second button {
          width: 120px;
          height: 35px;
      }

      /* Responsive Design */
      @media (max-width: 768px) {
          .col-6 {
              flex: 0 0 100%;
              max-width: 100%;
          }

          .text-container-second {
              padding: 20px;
          }
      }

      .swiper-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: auto;
    }


    .button1{
      background-color:black;
      color:white;
      border-width:0px;
      height:50px;
      width:120px;
      border-radius:10px;
  }
  .container1{
      padding-top:100px;
      padding-bottom:100px;
  }
  .text-container1{
      margin-right:50px;
  }
  .container2{
    padding-top:100px;
    padding-bottom:100px;
  }
  .button2{
      background-color:white;
      color:black;
      border-width:0px;
      height:50px;
      width:120px;
      border-radius:10px;
  }
  .text-container2{
      margin-left:50px;
  }
  .container3{
    padding-top:100px;
    padding-bottom:100px;
  }
  .container4{
    padding-top:100px;
    padding-bottom:100px;
  }
  .full-image{
      height:90vh;
  }
  .cabinet-image{
      width:35vw;
  }
  .footer-page{
    padding:50px;
  }
  .footer-container{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
  }
  .footer-container a{
    text-decoration:none;
    color:white;
  }
  .page-text-container{
     width:200px;
     height:200px;
  }
  .active-page{

    text-underline-offset: 10px;
    text-decoration:underline!important;
    
  }
  
  
  
  
  
  
  
  
  
  @media only screen and (max-width:900px){
     
     
      .text-container1{
          justify-content:center;
          margin-right:0px;
      }
      .text-container2{
          justify-content:center;
          margin-left:0px;
       }
       .full-image{
         height:50vh;
      }
    
     .resources-container{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
     }
     .wrap-container{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
     }
     .container3{
      padding:20px;
     }
     .small-wrap-container{
       justify-content:center;
       align-items:center;
     }
     .footer-container a{
      text-decoration:none;
      color:white;
      padding:20px;
    }
    .cabinet-image{
      width:75vw;
  }

  .follow-container{
    text-align:center;
    padding:20px;
  }
  .page-text-container{
    width:100px;
    height:100px;
 }
 .button-container{
  display:flex;
  flex-direction:column;
 }
  .swiper-container {
    padding:10px;
  }
  .events-container{
    padding:10px;
  }
      
  }