/* Always show vertical scrollbar on all pages */
html {
  overflow-x: hidden;
  overflow-y: scroll;
}

/* WebKit browsers (Chrome, Edge, Safari) */
html::-webkit-scrollbar {
  width: 20px;

}
html::-webkit-scrollbar-thumb {
   background-color: pink;
   border-radius: 30px;
   border: 2px solid red;
}
html::-webkit-scrollbar-track {
   background: linen;
   border-radius: 15px;
   border-left: 2px solid brown;   /* left border of the track (thin black line) */
   border-right: 2px solid brown;  /* optional: if you want borders on both sides */
  /* Note: borders can look odd with track rounding; adjust as needed */
}
html::-webkit-scrollbar-thumb:hover {
  background-color: #FADFD9; /* hover state color (optional) */
  
}

@media (max-width: 768px) {
 html {
   overflow-y: hidden;
  }
}

                  hr {
                    border: none;            /* Remove default border */
                    height: 2px;             /* Set height to 2px for thickness */
                    background-color: brown; /* Set color to brown */
                    }
                    
                   p.logo1 {
                    text-align: center;
                    font-family: Belwe Lt Bt;
                    font-size: 22px;
                    letter-spacing: -1px;
                    line-height: 0.7;
                    }
    
                 span#logo1 {
                    font-size: 40px;
                    letter-spacing: -0.5px;
                    text-shadow: 2px 0 red, 0 2px red, 2px 0 red, 0 2px red;
                    }
                 
                    p.logo2 {
                    text-align: center;
                    font-family: Belwe Cn Bt;
                    font-size: 18px;
                    line-height: 0.4;
                    }
                          
                   p.one {
                    color: #fc3f3f;
                    text-shadow: 2px 2px black;
                    text-align: center;
                    line-height: 0.1;
                    font-family: verdana;
                    font-size: 280%;
                    text-decoration: underline;
                     }
                                       
                   p.two {
                    color: #fc3f3f;
                    text-shadow: 2px 2px black;
                    text-align: center;
                    line-height: 1.2;
                    font-family: cursive;
                    font-size: 500%;
                    }
          
                   p.three {
                   color: #fa2020;
                   text-shadow: 1px 1px black;
                   text-align: center;
                   line-height: 1.5; 
			                font-family: cursive;
                   font-size: 300%;
                   }
                   
                   p.underlined {
                   color: #fa2020;
                   text-shadow: 1px 1px black;
                   text-align: center;
                   line-height: 1.5; 
			                font-family: cursive;
                   font-size: 300%;
                   text-decoration: underline;
                   }
                   
                   p.four {
                   color: #fa2020;
                   margin-top: 60px;
                   text-shadow: 1px 1px black;
                   text-align: left;
                   height: 20px;
                   font-family: cursive;
                   font-size: 250%
                   }
                  
                   p.five {
                   color: #fa2020;
                   margin-top: -2px;
                   text-shadow: 1px 1px black;
                   text-align: left;
                   height: 20px;
                   font-family: cursive;
                   font-size: 250%
                   }
                   
                    p.about {
                    color: brown;
                    margin: 50px;
                    text-shadow: 0px 1px black;
                    text-align: center;
                    font-family: cursive;
                    font-size: 280%;
                    text-decoration: none;
                   }
                   
                   .registration {
                   position: relative;
                   margin: auto;
                   width: 800px;
                   height: auto; /* height auto to accommodate content */
                   border: 10px ridge crimson;
                   border-radius: 30px;
                   box-shadow: 20px 20px 20px pink;
                   padding: 30px;
                   background-color: #fddfd9; /* white background for readability */
                   font-family: Arial, Helvetica, sans-serif;
                   color: #333333; /* dark gray text for readability */
                   overflow-y: auto; /* scrollbar if content exceeds height */
            
                   }
                   
                     /* Apply scrollbar styles to elements with class 'registration' */

.registration::-webkit-scrollbar {
  width: 20px;
}
.registration::-webkit-scrollbar-track {
  background: linen;
  border-radius: 30px;
  border-left: 2px solid brown;  
  border-right: 2px solid brown;
}
.registration::-webkit-scrollbar-thumb {
  background-color: pink;
  border-radius: 30px;
  border: 2px solid red;
}
.registration::-webkit-scrollbar-thumb:hover {
  background-color: #FADFD9; /* hover state color (optional) */
}

@media (max-width: 768px) {
 .registration {
   overflow-y: hidden;
  }
}


                   p.letters {
                   text-align: center;
                   font-family: Belwe Lt Bt;
                   font-size: 44px;
                   letter-spacing: -1px;
                   line-height: 0.7;
                   }
             
                   span#letters {
                   font-size: 80px;
                   letter-spacing: -0.5px;
                   text-shadow: 3px 0 #f23427, 0 3px #f23427, 3px 0 #f23427, 0 3px #f23427;
                   -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
                   -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
                   animation-name: example;
                   animation-duration: 3s;
                   animation-iteration-count: infinite;
                   animation-timing-function: linear;
                   }
                   
                   p.caption {
                   text-align: center;
                   font-family: Belwe Cn Bt;
                   font-size: 28px;
                   line-height: 0.4;
                   } 
                 
                   div.selc {
                   position: relative;
                   margin: auto;
                   width: 1020px;
                   height: 200px;
                   }
             
             div.logo {
             position: absolute;
             margin: auto;
             width: 384px; height: 195px; 
             border: 10px crimson; border-style: ridge; border-radius: 30px;
		           box-shadow: 20px 20px 20px #b36d7f; 
             background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
             background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
             background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
             background: linear-gradient(to bottom right, linen, #ffe3e3); /* Standard syntax (must be last) */
            }
            
             div.logo_right {
             position: absolute;
             left: 620px;
             width: 384px; height: 195px; 
             border: 10px crimson; border-style: ridge; border-radius: 30px;
		           box-shadow: 20px 20px 20px #b36d7f; 
             background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
             background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
             background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
             background: linear-gradient(to bottom right, linen, #ffe3e3); /* Standard syntax (must be last) */
            }
            
  div#s {background-color: transparent; position: absolute; top: 0;
             left: 10px; width: 96px; height: 96px; 
             text-align: center; font-size: 110px; font-family: Belwe Bd Bt;
             text-shadow:-1.5px 0 red, 0 1.5px red, 1.5px 0 red, 0 -1.5px red;
            }
    
  div#e {background-color: transparent; position: absolute; top: 0;
             left: 90px; width: 96px; height: 96px; 
             text-align: center; font-size: 110px; font-family: Belwe Bd Bt;
             text-shadow:-1.5px 0 red, 0 1.5px red, 1.5px 0 red, 0 -1.5px red;
              -ms-transform: rotate(-20deg); /* IE 9 */
              -webkit-transform: rotate(-20deg); /* Safari */
              transform: rotate(-20deg); /* Standard syntax */
              -webkit-animation-name: animatede; /* Safari 4.0 - 8.0 */
              -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
              animation-name: animatede;
              animation-duration: 2s;
              animation-iteration-count: infinite;
              }
              
    div#e_right {background-color: transparent; position: absolute; top: 0;
             left: 90px; width: 96px; height: 96px; 
             text-align: center; font-size: 110px; font-family: Belwe Bd Bt;
             text-shadow:-1.5px 0 red, 0 1.5px red, 1.5px 0 red, 0 -1.5px red;
              -ms-transform: rotate(-20deg); /* IE 9 */
              -webkit-transform: rotate(-20deg); /* Safari */
              transform: rotate(-20deg); /* Standard syntax */
              -webkit-animation-name: animatedc; /* Safari 4.0 - 8.0 */
              -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
              animation-name: animatedc;
              animation-duration: 2s;
              animation-delay: 1s;
              animation-iteration-count: infinite;
              }          
              
              
   div#l {background-color: transparent; position: absolute; top: 0;
             left: 180px; width: 96px; height: 96px; 
             text-align: center; font-size: 110px; font-family: Belwe Bd Bt;
             text-shadow:-1.5px 0 red, 0 1.5px red, 1.5px 0 red, 0 -1.5px red;
             }
             
    div#c {background-color: transparent; position: absolute; top: 0;
             right: 20px; width: 96px; height: 96px; 
             text-align: center; font-size: 110px; font-family: Belwe Bd Bt;
             text-shadow:-1.5px 0 red, 0 1.5px red, 1.5px 0 red, 0 -1.5px red;
              -ms-transform: rotate(-20deg); /* IE 9 */
              -webkit-transform: rotate(-20deg); /* Safari */
              transform: rotate(-20deg); /* Standard syntax */
              -webkit-animation-name: animatedc; /* Safari 4.0 - 8.0 */
              -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
              animation-name: animatedc;
              animation-duration: 2s;
              animation-delay: 1s;
              animation-direction: alternate;
              animation-iteration-count: infinite;
              }
              
     div#c_right {background-color: transparent; position: absolute; top: 0;
             right: 20px; width: 96px; height: 96px; 
             text-align: center; font-size: 110px; font-family: Belwe Bd Bt;
             text-shadow:-1.5px 0 red, 0 1.5px red, 1.5px 0 red, 0 -1.5px red;
              -ms-transform: rotate(-20deg); /* IE 9 */
              -webkit-transform: rotate(-20deg); /* Safari */
              transform: rotate(-20deg); /* Standard syntax */
              -webkit-animation-name: animatede; /* Safari 4.0 - 8.0 */
              -webkit-animation-duration: 2s; /* Safari 4.0 - 8.0 */
              animation-name: animatede;
              animation-duration: 2s;
              animation-direction: alternate;
              animation-iteration-count: infinite;
              }   
              

         /* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {color: black; font-size: 44px;}
    25%  {color: #330000; font-size: 64px;}
    50%  {color: #660000; font-size: 74px;}
    100% {color: black; font-size: 120px;}
}

/* Standard syntax */
@keyframes example {
    0%   {color: black; font-size: 44px;}
    25%  {color: #330000; font-size: 64px;}
    50%  {color: #660000; font-size: 74px;}
    100% {color: black; font-size: 120px;}
}
     

              /* Safari 4.0 - 8.0 */
@-webkit-keyframes animatede {
    0%   {color: black; transform: rotate(-20deg);}
    40%  {color: #330000; transform: rotate(-20deg);}
    50%  {color:  #660000; transform: rotate(-180deg);}
    100% {color: #990000; transform: rotate(-270deg);}
}

/* Standard syntax */
@keyframes animatede {
     0%   {color: black; transform: rotate(-20deg);}
    40%  {color: #330000; transform: rotate(-20deg);}
    50%  {color: #660000; transform: rotate(-180deg);}
    100% {color: #990000; transform: rotate(-270deg);}
}
 
   /* Safari 4.0 - 8.0 */
@-webkit-keyframes animatedc {
    0%   {color: black; transform: rotate(-20deg);}
    40%  {color: #330000; transform: rotate(-20deg);}
    50%  {color:  #660000; transform: rotate(-180deg);}
    100% {color: #990000; transform: rotate(-270deg);}
}

/* Standard syntax */
@keyframes animatedc {
     0%   {color: black; transform: rotate(-20deg);}
    40%  {color: #330000; transform: rotate(-20deg);}
    50%  {color:  #660000; transform: rotate(-180deg);}
    100% {color: #990000; transform: rotate(-270deg);} 
}
 
 a:link, a:visited {
    background: linear-gradient(to bottom right, linen, #ffe3e3);
    color: crimson;
    font-family: Belwe Cn BT;
    font-size: 38px;
    padding: 5px 15px;
    text-align: center;
    text-shadow: 0.3px 0 black, 0 0.3px black, 0.3px 0 black, 0 0.3px black;
    text-decoration: none;
    display: inline-block;
    border-color:#e60000;
    margin: 1px;
    cursor: pointer;
    border: double;
    border-radius: 30px;
    box-shadow: 20px 20px 20px #b36d7f;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;        
}

a:hover, a:active {
    color:black;
    background: linear-gradient(to bottom right, linen, #d16bc2);
    text-decoration: none;
    box-shadow: none;
}


  
 div.tools {
    position: absolute;
    left: 440px;
    top: 100px;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */ 
    width: 100px;
          
 }
 

  div.members {
    position: absolute;
    left: 422px;
    top: 10px;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */ 
    width: 100px;
    border: 2px black;
          
 }
 
   div.index {
    position: absolute;
    left: 448px;
    top: 10px;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */ 
    width: 100px;
    border: 2px black;
          
 }
 
    div.galleria {
    position: absolute;
    left: 437px;
    top: 80px;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */ 
    width: 100px;
    border: 2px black;
          
 }
 
     div.about {
    position: absolute;
    left: 448px;
    top: 150px;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */ 
    width: 100px;
    border: 2px black;
          
 }
  
  div.members2 {
    position: absolute;
    left: 422px;
    top: 153px;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */ 
    width: 100px;
    border: 2px black;
          
 }
 
 
  div.icon  {
    position: absolute;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */ 
    top: 100px;
    left: 497px;
    width: 30px;
    height: 30px;
    border: none;
 }
    
  div.blog  {
    position: absolute;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */ 
    top: 150px;
    left: 456px;
 }
 
.volume-btn {
position: absolute;
right: 8px;
top: 8px;
width: 60px;
height: 60px;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;

}

.volume_left-btn {
position: absolute;
left: 8px;
top: 8px;
width: 70px;
height: 70px;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;

}

.volume-btn img {
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
}
 
 
 /* Dropdown styles */
#dropdown {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  width: 980px;
  height: 700px;
  background-color: linen; /* #FAF0E6 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: transform 1s ease;
}


#dropdown.show {
  /* Animate from above */
  transform: translateX(-50%) translateY(0);
}

#dropdown.hide {
  transform: translateX(-50%) translateY(-100%);
}

/* Close (X) button styles */
.close-btn {
  background: none;
  text-decoration: underline;
  border: solid;
  font-size: 44px;
  color: crimson;
  cursor: pointer;
}

@media (max-width: 768px) {
  .dropdown {
    height: auto; 
  }
}

#dropdown_register {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  width: 980px;
  height: 700px;
  background-color: linen; 
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: transform 1s ease;
}


 
 #dropdown_register.show {
  /* Animate from above */
  transform: translateX(-50%) translateY(0);
}

 #dropdown_register.hide {
  transform: translateX(-50%) translateY(-100%);
}

 @media (max-width: 768px) {
  .dropdown_register {
    height: auto; 
  }
}
 
 
#dropdown_index {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  width: 400px;
  height: 650px;
  background-color: linen; /* #FAF0E6 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: transform 1s ease;
}
 
 #dropdown_index.show {
  /* Animate from above */
  transform: translateX(-50%) translateY(0);
}

 #dropdown_index.hide {
  transform: translateX(-50%) translateY(-100%);
} 
 
 #dropdown_index a {
  margin-bottom: 5px;
}
  
  a.rules:link,
  a.rules:visited {
    text-decoration: underline;
    color: brown;
    font-size: 100%;
    background: none;
    box-shadow: none;
    font-family: inherit;
    text-shadow: none;
    text-decoration: none;
    margin: 0px;
    cursor: pointer;
    border: none;

  }
a.rules:hover,
a.rules:active {
  color: black;
  text-decoration: underline;
}

   .tutorials_plans {
     position: relative;
     margin: auto;
     width: 180px;
     height: auto; /* height auto to accommodate content */
     border: 10px ridge crimson;
     border-radius: 30px;
     box-shadow: 20px 20px 20px pink;
     padding: 50px;
     background-color: #fddfd9; /* white background for readability */
     font-family: Arial, Helvetica, sans-serif;
     color: #333333; /* dark gray text for readability */
     overflow-y: auto; /* scrollbar if content exceeds height */
     scrollbar-width: 16px; /* "auto", "thin", or a specific size */
     scrollbar-color: red linen; /* thumb color / track color */
                   
  }
                   
                
  .tutorials_plans::-webkit-scrollbar {
      width: 16px;
  }

  .tutorials_plans::-webkit-scrollbar-track {
      background: linen;
      border-radius: 15px;
  }

  .tutorials_plans::-webkit-scrollbar-thumb {
      background-color: pink;
      border-radius: 30px;
      border: 2px solid red;
  }
 
 
 .tutorials_plans a {
    display: block; /* makes links stack vertically */
    margin-bottom: 100px; /* space between links */
    text-decoration: none; /* optional */
    background: linear-gradient(to bottom right, linen, #ffe3e3);
    color: crimson;
    font-family: Belwe Cn BT;
    font-size:38px;
    padding: 5px 15px;
    text-align: center;
    text-shadow: 0.3px 0 black, 0 0.3px black, 0.3px 0 black, 0 0.3px black;
    text-decoration: none;
    border-color:#e60000;
    margin: 1px;
    cursor: pointer;
    border: double;
    border-radius: 30px;
    box-shadow: 20px 20px 20px #b36d7f;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;  
}
 
 .tutorials_plans a:hover, a:active {
    color:black;
    background: linear-gradient(to bottom right, linen, #d16bc2);
    text-decoration: none;
    box-shadow: none;
}
 
#tools:link, #tools:visited {
    background: linear-gradient(to bottom right, linen, #ffe3e3);
    color: crimson;
    text-align: center;
    text-shadow: 0.3px 0 black, 0 0.3px black, 0.3px 0 black, 0 0.3px black;
    text-decoration: none;
    align-items: center;
    display: inline-block;
    border-color: #e60000;
    margin: 1px;
    cursor: pointer;
    border: 5px crimson; border-style: ridge;
    border-radius: 30px;
    box-shadow: 20px 20px 20px pink;
    -webkit-transition-duration: 0s; /* Safari */
    transition-duration: 0s;
}
 
 #tools:hover, #tools:active {
    color: black;
    background: none;
    text-decoration: none;
    box-shadow: none;
}
    

button#demos {
    display: block;
    margin-bottom: -13px;
    background-color: linen;
    color: crimson;
    font-family: Belwe Cn BT;
    font-size: 29px;
    width: auto;
    text-shadow: 0.3px 0 black, 0 0.3px black, 0.3px 0 black, 0 0.3px black;
    text-decoration: none;
    border: double;  
    border-radius: 20px;    
}

button#demos:hover {
    color: black;
    background: linear-gradient(to bottom right, #e2c9ff, #fb8c76);
    border-color: crimson;
    box-shadow: 20px 20px 20px pink;
    text-decoration: none;
}

button#demos:active {
    color:black;
    background-color: #ffb3b3;
    border-color: crimson;
    box-shadow: 20px 20px 20px pink;
    text-decoration: none; 
}


div.home_videos {
     position: relative;
     margin: auto;
     width: 1020px;
     height: 470px;
     border: 10px crimson; border-style: ridge;
     border-radius: 30px;
		   box-shadow: 20px 20px 20px pink;
 }

div.column1 {
	   position: absolute;
    top: 0;
    left: 0;
    width: 170px;
    height: 400px;
    margin: 25px 25px 25px 35px;
    padding: 5px;
    outline-color: #ff8080;
	  	outline-width: 10px;
		  border:5px solid crimson;
	  	border-style: groove;
		  border-radius: 10px;
		  box-shadow: 20px 20px 20px pink;
}	    				
					
div.column2 {
	   float: left;
    position: absolute;
    top: 0;
    left: 225px;
    width: 710px;
    height: 400px;
    margin: 25px 25px 25px 30px;
    padding: 5px;
    outline-color: #ff8080;
		  outline-width: 10px;
	   border:5px solid crimson;
	 	 border-style: groove;
	   border-radius: 10px;
		  box-shadow: 20px 20px 20px pink;
}	    

/* Base styling (already your styles) */
div.tutorials_videos {
  position: relative;
  margin: auto;
  width: 1020px;
  height: 580px;
  place-items: center;
  align-content: center;
  border: 10px crimson ridge;
  border-radius: 30px;
  box-shadow: 20px 20px 20px pink;
  background-image: url('images/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}



div.pictures {
 
     position: relative;
     margin: auto;
     align-content: center;
     align-items: center;
     width: 384px; height: 288px;
     border: 10px crimson; border-style: ridge;
     border-radius: 30px;
		   box-shadow: 20px 20px 20px pink;
 }


div.logolong {
  position: relative;
  margin: auto;
  max-width: 100%; /* Allow flexibility on small screens */
  width: 1000px; /* Keep max-width for large screens */
  height: 220px;
  border: 10px ridge crimson; /* Border style can be simplified */
  border-radius: 30px;
  box-shadow: 20px 20px 20px pink;
   
}

/* Basic style for desktop and larger screens */
.footer-text {
  text-align: center;
  color: brown;
  font-size: 1.2em; /* base size for desktop */
}

	#back-top {
	position: fixed;
	bottom: 30px;
 right:  15px;
} 

#back-top a {
	width: auto;
	height: auto;
	display: block;
/* transition */
	-webkit-transition: 2s;
	-moz-transition: 2s;
	transition: 2s;
}

#back-top a:hover {
	color: #000;
}

@media (max-width: 768px) {
.volume-btn {
right: 6px;
top: 6px;
width: 34px;
height: 34px;
}

@media (max-width: 768px) {
.volume_left-btn {
right: 1014px;
top: 6px;
width: 34px;
height: 34px;
}


.video-container {
display: inline-block;
width: 100%;
max-width: 100%;
}

#myVideo {
width: 100%;
height: auto;
}
}


@media (max-width: 768px) {
 
   p.about {
    font-family: cursive !important;
    font-size: calc(500% * 1.3) !important;
  }
 
  p.two {
    font-family: cursive !important;
    font-size: calc(500% * 1.3) !important;
  }
  p.three {
    font-family: cursive !important;
    font-size: calc(300% * 1.3) !important;
  }
}

/* Adjust font size for mobile devices */
@media (max-width: 768px) {
  .footer-text {
    font-size: calc(1.2em * 1.3); /* larger on mobile for readability */
  }
}