/*create a smooth scrolling*/
html {
    scroll-behavior: smooth;
   }
/*list style for nav bar*/
   ul {list-style-type: none; padding: 0; margin-top: -5px;overflow: hidden; background-color: rgb(255, 255, 255);}
          
          li {float: left;}
          
          li a {
            display: block;  text-decoration: none;  padding: 20px 22px;
            color: #111111;
            text-align: center;
            font-family: sans-serif;
          }
          
        .active {color: rgb(71, 138, 201);}
        li a:not(.active):hover {background-color: rgb(224, 223, 223);}
        /*button style and on hover*/
        .button {
            display: inline-block;
            border-radius: 5px;
            background-color: white;
            border: none;
            font-family: Arial, Tahoma, sans-serif;
            color: rgb(71, 138, 201);
            text-align: center;
            font-size: 27px;
            padding: 25px;
            width: 200px;

            cursor: pointer;
            margin: 5px;
            position: absolute; bottom:10% ; left:50%; align-items: center;  transform: translate(-50%, -50%);
          }

          .button span {

            cursor: pointer;
            
            position: relative;
            display: inline-block;
            transition: 0.5s;
          }

          .button span:after {
            opacity: 0;
            content: ' \02C5';
            position: absolute;
            left: 50%;
            transition: 0.5s;
            top: -30px;
           
          }

          .button:hover span {
            padding-bottom: 25px;

          }

          .button:hover span:after {
            opacity: 1;
            top: 30px;
          }
          /*slideshow and next/prev buttons style*/
          .slideshow-container {position: relative; margin-top: 5%; }

            .next, .prev {
            position: absolute;
              cursor: pointer;
             
              width: auto;
              padding: 15px;
              margin-top: -20px;
              top: 50%;
             
              font-size: 50px; 
              color: white;     
            }
            .next {right: 0;}
        .slideshow-overlay {
          position: absolute; 
          bottom: 0; 
          top: 0;
          background: rgba(71, 138, 201, 0.5); 
          width: 100%;
          height: auto;   
          color: white;
          font-size: 50px;
          font-family: Arial, Tahoma, sans-serif; }
    

           .next:hover, .prev:hover {background-color: rgba(0,0,0,0.85);}
           /*text style*/

            .text {
              font-family: Arial, Tahoma, sans-serif;
              color: white;
              font-size: 50px;
              position: absolute;
              width: 100%;
              text-align: center;
            }
            .text a:link    { color: white; text-decoration: none; }
            .text a:visited { color: white; text-decoration: none; }
            .text a:hover   { color: white; text-decoration: none;background-color: rgba(0,0,0,0.5); }
           .text  a:active  { color: white; text-decoration: none; }
           /*footer style*/
           .footer{
              position: relative;
              width: 100%;
              background-color:white; color:rgb(71, 138, 201); text-align: center;font-family: Roboto, sans-serif;
              font-size: 20px;
              text-align: center;
              
              
              margin-bottom: 2%;
            }
            .footer a:link    { color:rgb(71, 138, 201);text-decoration: none; }
            .footer a:visited { color:rgb(71, 138, 201); text-decoration: none; }
            .footer a:hover   { color:rgb(71, 138, 201); text-decoration: none; }
            .footer a:active  { color:rgb(71, 138, 201); text-decoration: none;
           }
           /*image row and overlay style*/
           .container {
            position: relative;
            width: 100%;
            margin-top: -2%;
            height: auto;
          }

          .overlay {
            position: absolute; 
            bottom: 0; 
            top: 0;
            background: rgba(71, 138, 201, 0.5); 
            width: 100%;
            height: auto;   
            color: white;
            font-size: 50px;
            font-family: Arial, Tahoma, sans-serif;
          }
          .image {
            display: block;
            width: 100%;
            height: 100%;
          }
           .container2 {
            position: relative;
            width: 50%;
            max-width: 300px;
             
            
            }

            .col2 {
           
            padding-left: 150px;
            }

            .overlay2 {
            position: absolute; 
            bottom: 0; 
            top:0;
            background: rgb(71, 138, 201);
            background: rgba(71, 138, 201, 0.5); 
            width: 100%;
            font-family: Roboto, sans-serif;
            transition: .5s ease;
            opacity:0;
            color: white;
            font-size: 50px;
        
            }

            .col2:hover .overlay2 {
            opacity: 1;
            }
/*titles style*/
            .title{
                display: flex; position: absolute; left:50%; align-items: center;  transform: translate(-50%, -50%); margin-top: 5%; font-size: 50px; font-family: Arial, Tahoma, sans-serif; color: rgb(71, 138, 201);
            }