/* Custom animations */
@keyframes underline {
    from { width: 0; }
    to { width: 100%; }
}

.nav-link {
    position: relative;
    display: inline-block;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #3B82F6;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Athlete card hover effect */
.athlete-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.athlete-card:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.1);
    transform: translateY(-5px);
}

/* Section spacing */
section {
    padding: 5rem 0;
}



/*************sam general***************/
.wth_10{width: 10%} .wth_15{width: 15%} .wth_20{width: 20%} .wth_22{width: 22%} .wth_27{width: 27%} .wth_30{width: 30%} .wth_32{width: 32%} .wth_40{width: 40%} .wth_45{width: 45%} .wth_47{width: 47%} .wth_49{width: 49%} .wth_50{width: 50%} .wth_60{width: 60%}  .wth_67{width: 67%}.wth_70{width: 70%} .wth_80{width: 80%} .wth_90{width: 90%} .wth_95{width: 95%} .wth_100{width: 100%}


.wth_2em{width: 2em} .wth_3em{width: 3em} .wth_5em{width: 5em} .wth_7em{width: 7em} .wth_10em{width: 10em} .wth_13em{width:13em} .wth_20em{width: 20em} .wth_25em{width: 25em} .wth_30em{width: 30em}

.wth_100_min_10em{
	width: 100%;
	min-width: 10em;
}

.gap_8rem{
    gap: 8rem;
}


.border_r{
    
  border-radius: 50px;
}


.flex_wrap_top{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

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

.flex_wrap_start{
	display: flex;
	justify-content:flex-start;
	align-items: center;
	flex-wrap: wrap;
}
.flex_wrap_end{
	display: flex;
	justify-content:flex-end;
	align-items: center;
	flex-wrap: wrap;
}

.flex_wrap_around{
	display: flex;
	justify-content:space-around;
	align-items: center;
	flex-wrap: wrap;
}

.flex_wrap_base{
	display: flex;
	justify-content:space-around;
	align-items:last baseline;
	flex-wrap: wrap;
}

.hgt_30{height: 30px} .hgt_40{height: 40px} .hgt_50{height: 50px} .hgt_200{height: 200px} .hgt_300{height: 300px} .hgt_500{height: 500px} .hgt_100{height: 100%} .hgt_50vh{height: 50vh} .hgt_70vh{height: 70vh} .hgt_90vh{height: 90vh}

.hgt_mx_1000{max-height: 1000px;} .hgt_min_1000{max-height: 1000px;}



.font_1em1{font-size: 1.1em}.font_1em2{font-size: 1.2em}.font_1em3{font-size: 1.3em}.font_1em8{font-size: 1.8em}.font_2em{font-size: 2em}.font_1em3{font-size: 1.3em}.font_1em5{font-size: 1.5em}.font_11pt{font-size:11pt}.font_10pt{font-size:10pt}.font_12pt{font-size:12pt}
.font_bold {font-weight: bold;}.font_10em{font-size:10em}.font_5em{font-size:5em}.font_10em{font-size:10em}.font_20em{font-size:20em}.font_30em{font-size:30em}.font_2em{font-size:2em}.font_3em{font-size:3em}.font_3em5{font-size:3.5em}.font_4em{font-size:4em}.font_5em{font-size:5em}.font_10em{font-size:10em}.font_14em{font-size:14em}.font_18em{font-size:18em}


.fa {
  font-size: 30px;
  width: 50px;
  text-decoration: none;
}


.font_color_blue {color: rgba(2,121,194) }
.font_color_red {color: rgb(226, 13, 38) }

.font_color_blue {color: white }


.bg_white{background-color: white!important;}
.bg_aqua{background-color:rgba(127, 255, 212, 0.534)!important;}
.bg_green{background-color:rgba(179, 211, 199, 0.526)!important;}
.bg_pink{background-color:rgba(255, 127, 168, 0.534)!important;}

.ml_3px{margin-left:3px;}.ml_4px{margin-left:4px;}.ml_5px{margin-left:5px;}.ml_6px{margin-left:6px;}.ml_7px{margin-left:7px;}
.mr_3px{margin-right:3px;}.mr_4px{margin-right:4px;}.mr_5px{margin-right:5px;}.mr_6px{margin-right:6px;}.mr_7px{margin-right:7px;}
.mb_3rem{margin-bottom:3rem;}.mb_4rem{margin-bottom:4rem;}.mb_5rem{margin-bottom:5rem;}.mb_6rem{margin-bottom:6rem;}
.mtmb_10rem{
    margin-top: 10rem;
    margin-bottom: 10rem;
}


.p_2px {padding: 0 2px 0 2px !important;} .p_3px {padding: 0 3px 0 3px !important;} .p_3 {padding: 0 3% 0 3% !important;} .p_5 {padding: 0 5% 0 5% !important;}
.p_0px{padding: 0px !important;} .p_3rem{padding: 0 3rem;} .pl_5rem{padding-left: 15%;}


.flex_container{
    
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* spacing between images */
  justify-content: center;
}

.img_container {
  position: relative;
  display: inline-block; /* or block, depending on layout */
  width: 100%; /* or a fixed size like 400px */
  
  /* box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4); */
}

.img_base {
  width: 100%;
  height: auto;
  /* opacity: 0.7; */
  /* display: block; */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  transition: transform 0.3s ease;
  
}
.img_base:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.1);
    transform: translateY(-5px);
  transform: scale(1.1); 
}


.centered_txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* change as needed */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-size: 40px;
  font-weight: bold;
  text-align: center;
 /* background-color: rgba(0, 0, 0, 0.5);  optional for contrast */
  padding: 10px 0px;
  border-radius: 8px;
}


.scroll-container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}


/* Container with fixed height */
.slide-wrapper {
  position: relative;
  width: 100%;
  height: calc(100vh - 460px);
  overflow: hidden;
  display: flex;
}

/* All slides stacked vertically */
.slide-container {
  transition: transform 0.6s ease;
  height:  calc(100vh - 460px); /* 4 slides × 100vh */
  width: 100%;
}

/* Individual slide */
.slide {
  height: calc(100vh - 460px);
  width: 100%;
  min-width: 1300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color:black;
}

/* Vertical dot navigation */
.dot-nav {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 10;
}

.dot {
  width: 18px;
  height: 18px;
  background-color: rgba(238, 129, 129, 0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: #f50808;
  box-shadow: 0 0 5px #000;
}






body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* overlay container (injected into #overlay_area) */
.overlay-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100%;
  background: #222;
  color: #fff;
  padding: 20px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
  display: none;
}

.overlay-menu.active {
  transform: translateX(0);
  display: block;
}

/* close button */
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}

/* menu list */
.menu-list {
  list-style: none;
  margin: 60px 0 0;
  padding: 0;
}

.menu-list > li {
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: 600;
}

.submenu {
  list-style: none;
  margin-top: 15px;
  padding-left: 30px;
  font-size: 17px;
}

.submenu li {
  margin-bottom: 10px;
}

/* toggle button */
.menu-toggle {
  display: none;
  position: fixed;
  top: 50px;
  right: 20px;
  background: #111;
  color: #fff;
  border: none;
  padding: 10px 14px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 100;
}

.size_thumb{
  width: 40%;
  min-width: 500px;
}

/* show on mobile only */
@media (max-width: 768px) { 
  .to_display_none {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .to_wth_100{
    width: 100%;
  }
  .to_wth_60{
    width: 60%;
  }
  .to_mt_20px{
    margin-top: 20px;
  }
  .pl_5rem{padding-left: 5px;}

 
  .size_thumb{
  width: 60%;
  min-width: 50px;
}

  .dot-nav{
    gap: 30px;
  }
  .dot{
    width: 25px;
    height: 25px;
  }
  .to_pd_0px{
    padding: 0px 0px;
    height: 50px;
  }


  .to_fs_1em{
    font-size: 1em;
  }
  .to_fs_1em5{
    font-size: 1.5em;
  }

  .to_fs_0em7{
    font-size: 0.7em;
  }


/* Container with fixed height */
.slide-wrapper {
  position: relative;
  width: 100%;
  height: calc(100vh - 323px);
  overflow: hidden;
  display: flex;
}

/* All slides stacked vertically */
.slide-container {
  transition: transform 0.6s ease;
  height:  calc(100vh - 323px); /* 4 slides × 100vh */
  width: 100%;
}

/* Individual slide */
.slide {
  height: calc(100vh - 323px);
  width: 100%;
    padding-left: 10px;
    min-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color:black;
}


  .to_fs_0em6{
    font-size: 0.6em;
  }


  .vision_fs_lg{
    font-size : 7em;
  }

  .vision_fs_big{
    font-size : 4em;
  }

  .vision_fs_mid{
    font-size : 3em;
  }

    .vision_fs_sm{
    font-size : 2em;
  }

}

@media (max-width: 450px) { 

  .to_no_pic {
    display: none;
  }


  .size_thumb{
    width: 60%;
    min-width: 150px;
  }

  .slide-wrapper {
    position: relative;
    width: 100%;
    height: calc(100vh - 160px);
    overflow: hidden;
    display: flex;
  }

  .slide-container {
    transition: transform 0.6s ease;
    height:  calc(100vh - 160px); 
    width: 100%;
  }

  .slide {
    height: calc(100vh - 160px);
    width: 100%;
    min-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color:black;
  }

  .to_fs_0em6{
    font-size: 0.6em;
  }


  .vision_fs_lg{
    font-size : 5em;
  }

  .vision_fs_big{
    font-size : 3em;
  }

  .vision_fs_mid{
    font-size : 2em;
  }

    .vision_fs_sm{
    font-size : 1em;
  }
}