/* open toggle menu */


 .videoBg {
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 @media (min-aspect-ratio: 16/9) {
     .videoBg {

         width: 100%;
         height: auto;
     }
 }

 @media (max-aspect-ratio: 16/9) {
     .videoBg {

         width: 100%;

         padding: 0
     }
 }

 video {
     object-fit: fill
 }


 /* hamburger */
 :root {
     --primary-color: #2c3e50;
     --secondary-color: #3498db;
     --background-color: #ecf0f1;
     --text-color: #333;
     --hover-color: #2980b9;
 }


 .overlay {
     height: 100%;
     width: 0;
     position: fixed;
     z-index: 1;
     top: 0;
     left: 0;
     opacity: 0.9;
     overflow-x: hidden;
     transition: 0.5s;
     font-size: 1.5rem;
     font-weight: 800;
     color: white;
     background: linear-gradient(135deg, var(--primary-color) 0%, #273849 100%);
     transition: right 0.4s cubic-bezier(0.77, 0.2, 0.05, 1);
     box-shadow: -4px 0 15px #00000033;

 }

 .overlay-content {
     position: relative;
     top: 12%;
     width: 100%;
     text-align: center;
     margin-top: 10px;
     font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
         Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

     height: 80px;
     background: #ffffff0d;
     backdrop-filter: blur(10px);

 }

 .overlay-content ul {
     list-style-type: none;
 }

 .overlay-content ul li {
     margin: 0 15px;
     border-bottom: 1px solid #ffff;
 }


 .overlay ul li a {

     text-decoration: none;

     color: #c6e8f1;
     display: block;
     transition: 0.3s;
     text-decoration: none;
     display: block;
     padding: 8px;
     font-weight: 500;
     position: relative;


 }

 .overlay ul li a:hover,
 .overlay ul li a:focus {
     color: white;
     border-bottom: 4px solid white;
 }

 .overlay .closebtn {
     position: absolute;
     top: 20px;
     right: 45px;
     font-size: 40px;
 }

 @media screen and (max-height: 450px) {
     .overlay a {
         font-size: 15px
     }

     .overlay .closebtn {
         font-size: 40px;
         top: 15px;
         right: 35px;
     }
 }

.containerback {
     position: relative;
     margin: 0 auto;
 }

 .containerback .content {
     position: absolute;
     top: 0;
     color: whitesmoke;
     width: 100%;
     padding: 5px;
 }

 div.example12 {
     padding: 15px;
 }

 @media screen and (min-width: 601px) {
     div.example12 {
         font-size: 45px;
     }
 }

 @media screen and (max-width: 600px) {
     div.example12 {
         font-size: 15px;
         padding: 5px;
         margin-top: 10px;
     }
 }

 .rotate {
     animation: rotation 5s;
 }

 .linear {
     animation-timing-function: linear;
 }

 .infinite {
     animation-iteration-count: infinite;
 }

 @keyframes rotation {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(359deg);
     }
 }
.myDIV:hover+.hide {
     display: block;

 }

 .down-arrow:hover+.hide {
     display: block;

 }

 li.open>a>span {
     border-top: 0px !important;
     border-bottom: 7px dashed !important;
     height: 2px;
 }

 .circular_image {
     width: 200px;
     height: 270px;
     border-radius: 50%;
     overflow: hidden;
     background-color: blue;
     /* commented for demo
  float: left;
  margin-left: 125px;
  margin-top: 20px;
  */

     /*for demo*/
     display: inline-block;
     vertical-align: middle;
 }

 .circular_image img {
     width: 100%;
 }

 .containerbg {
     margin: 0px;
     padding: 0px;
     position: relative;
     width: 100%;
     margin-right: 20px;
     margin-left: 0%;
 }

 .containerbg img {
     width: 100%;
     margin-right: 0%;
     margin-left: 0%;
     padding: 0px;
 }

 .containerbg .content {
     position: absolute;
     bottom: 0;
     background: rgb(0, 0, 0);
     /* Fallback color */
     background: #9d1b0a80;
     /* Black background with 0.5 opacity */
     color: #f1f1f1;
     width: 95%;
     margin-right: 0%;
     margin-left: 0%;
 }