@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
    font-weight: 200;
    
    

}

@keyframes fade-up {
	0% {

		transform: translateY(30px) scale(0.8);
	}
	100% {
	
		transform: translateY(0px) scale(1.0);
	}

}
@keyframes slideUp {
    0% {
    transform: scale(80%);
      
    }
    100% {
        transform: scale(100%);
    
    }
  }


/* pop up contact page */

.section1 {
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
flex-direction: column;
background-color: #000000;
align-items: center;
color: #ffffff;
text-align: center;

}



.about {
    width: 100%;
    height: 5%;
   
   background-color: #000000;
 
    background-size: cover;
  
    }
    .navbar ul li a {
    
    
	text-decoration: none;
	color: #ffffff;
	font-family: "Roboto Condensed";
	font-size: 16px;
	font-weight: 400;


    }
    .tag {
        color: white;
        position: absolute;
        width: 100%;

        text-align: center;
      
       
        font-size: 27px;
        font-family: 'Roboto';
        font-weight: 200;
    }
    #goal {
       height: 90vh;
        text-align: left;
       padding: 20vh 35vh;
        margin: auto;
     
    }
    #goal h1 {
        font-family: 'Oswald';
        font-size: 55px;
        font-weight: 500;
        animation: fade-up 0.7s;
    }
    #goal p{
        font-family: 'Roboto';
        font-size: 20px;
        font-weight: 200;
        width: 75%;
        animation: fade-up 0.7s;
      
      

    }

    
    /* team */

    
.team {
   background-color: #ffffff;
        padding: 30px 120px;

}
 h2 {
    text-align: center;
   
    padding: 20px;
    margin: 0px 10px;
   
    font-family: 'Oswald';
    font-weight: 500;
    font-size: 36px;

    animation: fade-up;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
}


        .team-style1 {
            position: relative;
            display: block;
            overflow: hidden;
        }
        .team-style1 .text-center {
            margin: 10px 20px;
        }
        .team-style1 .team-info {
            bottom: 15px;
           width: 100%;
            
            transform: translate3d(0px, 0%, 0px);
            transition: all 800ms ease 0.35s;
            border: #000000 solid 10px;
           padding: 20px 20px;
            background: #000000;
            color: white;
            position: absolute;
            border-radius: 5px;
           
           
        }
        
        .team-style1 .team-overlay {
          
            opacity: 1;
           
            position: absolute;
            top: 15px;
            bottom: 15px;
            padding: 20px;
            transform: translate3d(0px, -100%, 0px);
            transition: all 700ms ease 0.35s;
            border-radius: 5px;
           
       
           
        }
        
        .team-style1:hover .team-overlay {
            transform: translate3d(0px, 0, 0px);
            transition-delay: 0.1s;
            
            background: rgba(0, 0, 0, 0.832);
            color: white;
    
           
        }
        
        .team-style1:hover .team-info {
            transform: translate3d(0px, 130px, 0px);
            transition-delay: 0.2s
        }
        
       
        
        .team-bg-shape img {
            position: absolute;
            top: -40px;
            right: -40px;
            z-index: 0
        }
        
        hr {
            width: 0%;
            text-align: left;
        }

        .socialMedia{
            display: flex;
            justify-content: flex-start;
            align-items: center;
         
            margin: 22px 0px 20px;
        }
        .socialMedia hr {
            background-color: #000000;
            width: 50%;
            text-align: center;
            margin: 20px 20px;
        }
        .socialMedia a{
            width: 35px;
            height: 35px;
            text-decoration: none;
            text-align: center;
            margin-right: 15px;
            border-radius: 5px;
            background-color: dodgerblue;
            transition: 0.4s;
        }
        .socialMedia a i{
            color: #ffffff;
            font-size: 18px;
            line-height: 35px;
            
            transition-delay: 0.4s;
        }
        .socialMedia a:hover{
            transform: translateY(-5px);
            background-color: #2e2e2e;
            
           
        }


    
        
        a {
        text-decoration:none;    
        }

        .team-section {
            display: flex;
            justify-content: center;
            gap: 30px;
            padding: 30px 30px;
            transform: translateY(-70px);
            
            background-color: #fff;
            border-radius: 10px;
         
        }

        .team-member {
            display: flex;
            align-items: center;
            gap: 20px;
            width: 400px;
            max-width: 500px;
            background-color: #f3f3f3;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
       
        }
       
        .team-member img {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            object-fit: cover;
        }

        .team-info {
            text-align: left;
        }

        .team-section  .team-info h3 {
            margin: 0;
           
            color: #000000;
            font-weight: 300;
            font-family: 'Roboto';
        }

        .team-section .team-info p {
            margin-top: 5px;
            
            font-weight: 200;
            color: #474747;
        }
        /* contact from */


      #contact {
        background-color: #0f0f0f;
     
       
      }

      
        .contactTitle  h2{
     
            font-size: 40px;
            font-family: 'Archivo';
            padding: 0px;
            margin: 0px 0px;
            font-weight: 300;
        }
        .contactInfo {
            text-align: left;
        }
        







        .container {
            background-color: rgb(255, 255, 255);
            display: flex;
            flex-wrap: wrap; /* Allows items to wrap to the next line */
          
            width: 100%; /* Optional: to control the container width */
            margin: auto; /* Center the flex container */
            gap: 20px; /* Space between the flex items */
      
           color: #ffffff;
         
        }
        .container .col {
          
           
          text-align: center;
            flex: 1 1 calc(33.33% - 20px); /* Makes each item take up 1/3 of the container width minus gap */
            box-sizing: border-box; 
        }
      
        .container .col h3 {
            font-family: 'Roboto';
            font-weight: 300;
            font-size: 24px;
        }

        .d-table-cell  .text-white {
            padding: 10px;
        }
       
       
        @media screen and (max-width: 1300px) {
           
           
            .team {
               
                     padding: 0px 0px;
             
             }
            
            .team-style1 .team-overlay {
                left: 10px;
                right: 10px;
       
               
           
               
            }
            .col img {
                width: 90%;
            }
          
           
           
        }
        @media screen and (max-width: 1070px) {
         

          
           
            #goal {
                height: 90vh;
                 text-align: left;
                 width: 70%;
                 margin: auto;
                 padding: 65px 0;
             }
             #goal p {
                width: 90%;
             }
           
             .team  {
                margin: 0px 20px;
             }
             .col img {
                width: 300px;
            }
           
            @media screen and (max-width: 1024px) {
  
             #goal p {
font-size: 20px;

             }
             .team-section {
                margin: 100px 20px;
             }
            }
            #footer {
                margin-bottom: 0;
            }
           
        }
        @media screen and (max-width: 900px) {
          
          .navbar ul li a {
            font-size: 14px;
          }
            .container {
               
                display: flex;
                flex-wrap: wrap; /* Allows items to wrap to the next line */
           
                width: 100%; /* Optional: to control the container width */
                margin: auto; /* Center the flex container */
                gap: 30px; /* Space between the flex items */
          
               color: #ffffff;
             
            }
              .team {
                margin: 0px 0px;
              }
             
            
           
        
            .d-table-cell  .text-white {
                margin: 10px 0px;
            }
        }
        
            @media screen and (max-width: 850px) {
               
                .container .col{
                    padding: 5% 3%;
                   

                }
                .team-style1 .team-overlay {
                    width: 94%;
                }
                
                
            }
            
     
             
    
    @media screen and (max-width: 795px) {
     

        .team-section {
            flex-direction: column;
            justify-content: center;
            gap: 30px;
            padding: 20px 20px;
        }
        .team-member {
           
          
            width: 100%;
           
            background-color: #f3f3f3;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .team-style1  .team-overlay {
          
            background: rgba(0, 0, 0, 0.832);
            color: white;

         
            display: flex;
            justify-content: center;
            align-items: center;
      
           
           
           
        }
   
  
    
}  
@media screen and (max-width: 500px) {

    .team-style1 .team-overlay p {
        font-size: 15px;
    }
    .team-style1 .team-overlay {
        width: 94%;
    }
    #goal p {
        font-size: 17px;
        
                     }
    
}