style.css

@import url('https://fonts.googleapis.com/css2?family=Jost:ital@0;1&display=swap');

html{
    font-family: 'Jost', sans-serif;
}


/* header style */
        /* <style> */
          header{
              background: transparent;
              background-color: rgba(10, 10, 10, 0.8);
              font-size: 80%;
              position:fixed;
              z-index: 8;
              left: 0; top: 0;
              width: 100%;
              padding: 0 80px;
              box-sizing: border-box;
              height: 100px;
              transition: top 0.3s;
          }
          header p a{
              color: white;
              text-decoration: none;
          }
          nav{
              /* font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
              font-weight:normal;
              font-size: 150%;
          }
          nav a{
              text-decoration: none;
              color: whitesmoke;
              padding: 1%;
              text-align: center;
          }
          nav a:hover,nav a:active{
              color: rgb(251, 0, 0);
          }
          header nav ul li a:hover,
          header nav ul li a.active,
          .dropdown:hover, .dropdown .dropbtn:hover, .dropdown .dropbtn.active{
              color: rgb(243, 110, 110);
              /* background-color: rgba(255, 255, 255, 0.548); */
          }
          .dropdown {
              float: inherit;
              overflow: hidden;
          }
          .dropdown .dropbtn {
              cursor: pointer;
              font-size: inherit; 
              margin-top: 35.8px; 
              border: none;
              outline: none;
              color: inherit;
              padding: 0px;
              background-color: inherit;
              font-family: inherit;
              color: whitesmoke;
          }
          .rotate{
              transition: 0.30s;
              -webkit-transition: 0.30s;
              -moz-transition: 0.30s;
              -ms-transition: 0.30s;
              -o-transition: 0.30s;
          }
          .dropbtn:hover .rotate{
              transition: 0.30s;
              -webkit-transition: 0.30s;
              -moz-transition: 0.30s;
              -ms-transition: 0.30s;
              -o-transition: 0.30s;
              -webkit-transform: rotate(180deg);
              -moz-transform: rotate(180deg);
              -o-transform: rotate(180deg);
              -ms-transform: rotate(180deg);
              transform: rotate(180deg);
          }
          .dropdown-content{
              display: none;
              position: absolute;
              background-color: rgb(10, 10, 10, 0.8);
              z-index: 8;
              /* border-top-right-radius: 20px; */
              border-bottom-right-radius: 20px;
              /* border-top-left-radius: 20px; */
              border-bottom-left-radius: 20px;
          }
          .dropdown-content li a{
              float: none;
              color: whitesmoke;
              text-decoration: none;
              display: block;
              text-align: left;
          }
          .dropdown:hover .dropdown-content {
              display: block;
          }
          @media screen and (min-width: 1140px){
            header p{
                font-size: 250%;
                height: 50px;
                line-height: 40px;
                float: left;
                padding-left: 5%;
            }
            nav{
                /* font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
                float: right;
            }
            nav ul{
                margin: 0;
                padding: 0;
                display: flex;
            }
            nav ul li{
                list-style: none;
            }
            nav ul li a{
                /* height: 50px; dropdown individual heights*/ 
                line-height: 108px;
                padding: 0 20px;
                text-decoration: none;
                display: block;
            }  
            nav .dropdown-content li a{
                line-height: 50px;
            }
            .menu-toggle{
                display: none;
            }
            .dropdown .dropbtn {
                padding: 0px 13px 20.5px;
            }
          }
          @media screen and (max-width: 1140px){
            header{text-align: center;}
            header p{
                font-size: 250%; 
                float: center;
            }
            .menu-toggle{
                cursor: pointer;
                display: block;
                float: left;     
            }
            .nav--open{
                left: 0;
                opacity: 1;
            }
            .NavOpenButton{
                background: none;
                font-size: 20px;
                margin-top: 0px;
                color: whitesmoke;
            }
            .NavOpenButton:hover{
                color:rgb(251, 0, 0);
            }
            .NavCloseButton{
                background: none;
                width: 100%;
                font-size: 50px;
                margin-left: 90%;
                color: whitesmoke;
            }
            .NavCloseButton:hover{
                color: rgb(251, 0, 0);
            }
            header nav{
                position: absolute;
                width: 100%;
                left: -100%;
                top: 0;
                padding-top: 5%;        
                height: calc(150vh - 50px);
                background: rgb(34, 34, 34);
                transition: 0.4s;
            }
            header nav .active{
                left: 0;
            }
            header nav ul{
                display: block;
                text-align: left;
                /* padding-top: 35px; */
            }
            .ul-class{
                padding-top: 35px;
            }
            header nav ul li{
                list-style: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            }    
            header nav ul li a{
                font-size: 120%;
                padding: 0 20px;
                line-height: 52px;        
            }
            .dropdown .dropbtn {
                margin-top: 0;
                padding-left: 20px;
                font-size: 22px;
            }            
          }  
          @media screen and (min-width: 680px){
            .NavOpenButton{
                font-size: 20px;
                margin-top: 30px;
            }
          }
          @media screen and (max-width: 680px){
            header p{ 
                font-size: 180%; 
                line-height: 55px;
                float: center;
            }
            .NavOpenButton{
                margin-left: -200%;
                margin-top: 30px;
            }
            .centered{
                font-size: 110%;
                /* top: 70%; left: 50%; transform: translate(-50%, -70%);  */
            }
          }
          @media screen and (max-width: 472px){
            header{
                height: 80px;
            }
            header p{
                line-height: 40px;
            }
            .NavOpenButton{
                margin-left: -200%;
                margin-top: 21px;
            }            
          }
          @media screen and (max-width: 361px){
            header p{ 
                font-size: 160%; 
                float: center;
            }
            .NavOpenButton{
                font-size: 150%;
                margin-left:-220%;
                margin-top: 20px;
            }
          }
          @media screen and (max-width: 346px){
            header p{ 
                font-size: 150%; 
                line-height: 50px;
                float: center;
            }
            .NavOpenButton{
                font-size: 80%;
                margin-left:-220%;
                margin-top: 28px;
            }
          }
          @media screen and (max-width: 337px){
            header{
                height: 60px;
            }
            header p{ 
                font-size: 110%; 
                float: center;
                line-height: 35px;
            }
            .NavOpenButton{
                font-size: 60%;
                margin-left:-220%;
                margin-top: 15px;
            }            
          }
        /* </style> */
/* header style  ended*/

.darkmode-toggle{
    z-index: 5;
}
.thumbnail-img{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
body{
    margin: 0;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
/* .typing-animation{
    animation: type 3s steps(24);
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid white;
    animation-iteration-count: infinite;
}
@keyframes type {
    0%{width: 0ch}    
    100%{width: 24ch;}
} */
@media screen and (min-width: 1140px){
    /* .homecover{
        display:block;
        width: 100%;
        filter: brightness(85%);
    }
    .homecover-mobile{
       display:none;
    } */
    .centered{
        font-size: 180%;
        /* top: 50%; left: 50%; transform: translate(-50%, -50%);  */
    }
    .centered2{
        font-size: 150%;
        top: 35%; left: 50%; transform: translate(-50%, -50%);
    }
}
@media screen and (max-width: 1140px){
    /* .homecover{
        display:none;
       }
    .homecover-mobile{
        display:block;
        width: 100%;
    } */
    .centered{
        font-size: 160%;
        /* top: 70%; left: 50%; transform: translate(-50%, -70%);  */
    }
    .centered2{
        font-size: 150%;
        top: 30%; left: 50%; transform: translate(-50%, -50%);
    }
}
@media screen and (min-width: 680px){
    .video-container {
        overflow: hidden;
        position: relative;
        width:80%;
        transform: translate(-50%, 0);
        left: 50%;
    }
    .video-container::after{
        padding-top: 56.25%;
        display: block;
        content: '';
    }
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .flex-container, .flex-container2{
        flex-wrap: nowrap;
    }
    .flex-container div p{
        width: 100%;
    }
    .flex-container2 div p{
        width: 100%;
    }
}
@media screen and (max-width: 680px){
    .video-container{
        overflow: hidden;
        position: relative;
        width:100%;
        transform: translate(-50%, 0);
        left: 50%;
    }
    .video-container::after{
        padding-top: 56.25%;
        display: block;
        content: '';
    }
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .centered2{
        font-size: 120%;
        top: 25%; left: 50%; transform: translate(-50%, -50%);
    }
    .flex-container, .flex-container2{
        flex-wrap: wrap;
        flex-direction: column;
    }
    .flex-container div p{
        width: 100%;
    }
    .flex-container2 div p{
        width: 100%;
    }
}
@media screen and (min-width: 472px){
    .headingimg {padding-top: 100px;}
}
@media screen and (max-width: 472px){
    .centered{
        font-size: 130%;
    }
    .headingimg {padding-top: 80px;}
    .centered2{
        font-size: 100%;
        top: 19%; left: 50%; transform: translate(-50%, -50%);
    }
}
@media screen and (max-width: 361px){
    .centered2{
        font-size: 85%;
        top: 18%; left: 50%; transform: translate(-50%, -50%);
    }
}
@media screen and (max-width: 346px){
    .centered{
        font-size: 120%;
    }
}
@media screen and (max-width: 337px){
    .headingimg {padding-top: 60px;}
    .centered2{
        font-size: 80%;
        top: 14.5%; left: 50%; transform: translate(-50%, -50%);
    }
}

.flex-container, .flex-container2{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 1.5%;
}
.flex-container img, .flex-container2 img{
    width: 100%;
}
.block p, .block2 p{
    color: rgb(68, 68, 68);
}
.darkmode--activated .block p, .darkmode--activated .block2 p{
    color: rgb(0, 0, 0);
}
@media screen and (min-width: 680px){
    .block, .block2{
        /* border: 1px solid black; */
        /* border-top-right-radius: 20px; */
        /* border-bottom-right-radius: 20px; */
        /* border-top-left-radius: 20px; */
        /* border-bottom-left-radius: 20px; */
        /* background-color: skyblue; */
        transition: transform 0.8s;
    }
    .darkmode--activated .block:hover h2, .darkmode--activated .block:hover p, .darkmode--activated .block2:hover h2, .darkmode--activated .block2:hover p{
        color: white;
    }
    .darkmode--activated .block:not(:hover) h2, .darkmode--activated .block:not(:hover) p, .darkmode--activated .block2:not(:hover) h2, .darkmode--activated .block2:not(:hover) p{
        color: white;
        isolation: isolate;
    }
    .block:hover{
        transform: scale(1.05);
        -ms-transform: scale(1.05); /* IE 9 */
        -webkit-transform: scale(1.05); /* Safari 3-8 */
    }
    .block2:hover{
        transform: scale(1.03);
        -ms-transform: scale(1.03); /* IE 9 */
        -webkit-transform: scale(1.03); /* Safari 3-8 */
    }
}
@media screen and (max-width: 847px){
    .Uimg{width: 100%;}
}
.flex-container div{
    width: 100%;
    padding-bottom: 2%;
    padding: 1%;
    flex-basis: 33%;
}
.flex-container2 div{
    width: 100%;
    padding-bottom: 2%;
    padding: 1%;
    flex-basis: 50%;
}
.container2{
    padding: 2%;
}
a{
    isolation: isolate;
}
/*::-moz-selection { /* Code for Firefox /
    background-color: #3297FD;
    color: #fff;
    isolation: isolate;
}
::selection {
    background-color: #3297FD;
    color: #fff;
    isolation: isolate;
}*/
h1{
    /* font-family:'Times New Roman', Times, serif; */
    text-align: center; 
    color: rgb(255, 0, 0);
    isolation: isolate;
}
h2{
    font-weight:normal;
    /* font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}
h3{
    font-weight:normal;
    /* font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}
/* body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;} */
button{
    border: none;
    border-radius: 20em;
    cursor: pointer;
    font-family: 'Jost', sans-serif;
}   
a button{
    text-decoration: none;
    color: white;
}
.button1{
    background-color: rgb(255, 0, 0);
    font-size: 90%;
    padding: 7px;
    padding-left: 4%;
    padding-right: 4%;
    border-radius: 20em;
    min-width: 60px;
    isolation: isolate;
}
.button1:hover{opacity: 0.7;}

.button2{
    background-color: transparent;
    font-size: 100%;
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 1%;
    padding-bottom: 1%;
    border: 0.5px solid rgb(255, 0, 0);
    color: rgb(255, 0, 0);
    border-radius: 50em;
    isolation: isolate;
}
.button2 a{
    text-decoration: none;
    color: rgb(255, 0, 0);
}
.button2:hover{background-color:rgb(255, 0, 0); color: rgb(255, 255, 255);}
.button2 a:hover{
    text-decoration: none;
    color: rgb(255, 255, 255);
}

.button2_tele{
    background-color: transparent;
    font-size: 100%;
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 1%;
    padding-bottom: 1%;
    border: 0.5px solid #2e87ca;
    color: #2e87ca;
    border-radius: 50em;
    isolation: isolate;
}
.button2_tele a{
    text-decoration: none;
    color: #2e87ca;;
}
.button2_tele:hover{background-color: #2e87ca; color: rgb(255, 255, 255);}
.button2_tele a:hover{
    text-decoration: none;
    color: rgb(255, 255, 255);
}

fieldset{
    border: none;
}
fieldset input, textarea{
    width: 60%;
    padding: 1%;
    border: 0.5px solid black;
    border-radius: 15px;
    font-size: 18px;
    font-family: 'Jost', sans-serif;
    /* font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}
@media screen and (max-width: 700px){
    fieldset input, textarea{
        width: 80%;
    }
}

.message{
    /* position: ; */
    animation-name: text-color-change;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  
@keyframes text-color-change {
    0%   {color:rgb(255, 38, 0)}
    25%  {color:rgb(0, 68, 255)}
    50%  {color:rgba(57, 187, 238)}
    75%  {color:rgb(5, 144, 0)}
    100% {color:rgb(255, 38, 0)}
}

.gradient-animation{      /* Linear gradient animation */
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
}