@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=PT+Sans+Narrow&family=Poppins:wght@200&family=Sassy+Frass&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body
{
    height: 100vh;
}

/* Styling the Navigation Section */


a:hover
{
    color: purple;
}

.navbar ul li
{
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
    list-style: none;
}


.navbar ul li a
{
    text-decoration: none;
    color: #fd5cf0;
    font-size: 20px;
    font-weight: bold;
}

/* .navbar ul li:hover
{
    background-color: rgb(255, 96, 221);
    transition: 0.5s ease;
} */

header
{
    position:relative;
    
}

main
{
    background-image: url('Background\ Landing\ image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 120vh;
   
}

.navbar
{
    width: 100%;
    height: 130px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding-right: 80px;
}


.navbar .logo
{
    padding-top: 20px;
    padding-left: 50px;
    
}

main .background .title
{
    font-family: 'Anton', sans-serif;
    font-size: 100px;
    font-weight: 1000;
    text-transform: uppercase;
    margin-top: 10px;
    color: rgb(214, 27, 214)
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    
}



.navbar .links
{
    display: flex;
    gap: 2rem;
}

.navbar .toggle_btn
{
    color: purple;
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
    
}

/* Styling the About Section */
.Interview-publication
{
    width: 100%;
    min-height: 100vh;
    background-color: white;
}

.About .container-publication-interview .content .MissionStatement
{
    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
    padding-bottom: 20px;
    color: purple;
}

.container-publication-interview
{
    width: 80%;
    display: block;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;
}

.about-publication-publications
{
    text-transform: uppercase;
    font-size: 30px;
    text-align: center;
    padding-bottom: 20px;
    color: purple;
}

.Interview-publication .container-publication-interview .video
{
    width: 500x;
    height: 281px;
    display: flex;
    justify-content: center;
}

.Interview-publication .container-publication-interview h4
{
    text-align: center;
    padding-bottom: 20px;
    text-transform: uppercase;
}

.Interview-publication .container-publication-interview .content h4
{
    text-align: center;
    padding-top: 60px;
    font-size: 25px;
    color: #d620c7;
    font-weight: 1000;
}


/* Styling the interview and publications */
.About
{
    width: 100%;
    min-height: 100vh;
    background-color: white;
}

.About .container-about .content .MissionStatement
{
    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
    padding-bottom: 20px;
    color: purple;
}

.About .container-about .content .Vision
{
    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    color: purple;
}

.About .container-about .content .about-founder
{
    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    color: purple;

}

.About .container-about .content .Value
{
    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    color: purple;
}

section .content p
{
    font-size: 20px;
    line-height: 1.5;
}

.container-about
{
    width: 80%;
    display: block;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;
}

.about-title
{
    text-transform: uppercase;
    font-size: 30px;
    text-align: center;
    padding-bottom: 20px;
    color: purple;
}

.read-more-btn
{
    color: purple;
}

.read-more-text
{
    display: none;
}

.read-more-text--show
{
    display: inline;
}

blockquote
{
    font-size: 19px;
}

.subtitle
{
    padding-bottom: 25px;
    text-align: center;
    font-size: 21px;
}

/* Styling the Team Section */
.team
{
    width: 100%;
    

}

.team .container-team
{
    width: 80%;
    margin: auto;
    
}

.team .container-team .row
{
    width: 60%;
    margin: auto;
}

.team .container-team .row .team-title
{
    text-align: center;
    margin-top: 50px;
}

.team .container-team .row .team-title h1
{
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: purple;
}

.team .container-team .row .team-title p
{
    font-size: 18px;
    margin: 30px 0px;
    color: #a3a3a3;
}

.team .container-team .team-card
{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 40px;
    margin-top: 50px;
}

.team .container-team .team-card .card 
{
    width: 100%;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    cursor: pointer;
}

.team .container-team .team-card .card:hover
{
    background-color: #f3f3f3;
    transition: 0.3s;
}


.team .container-team .team-card .card .image-section img 
{
    height: 150px;
    width: 150px;
    border-radius: 50%;
    border: 6px solid #fff;
}

.team .container-team .team-card .card .team-content
{
    width: 100%;
    text-align: center;

}

.team .container-team .team-card .card .team-content h1
{
   
    margin-top: 10px;
    letter-spacing: 1.5px;
    color: purple;
}

.team .container-team .team-card .card .team-content h4
{
    margin-top: 10px;
    
}

.team .container-team .team-card .card .team-content p
{
    margin: 16px 0px;
}

.team .container-team .team-card .card .team-content .email
{
    color: plum;
}

.team .container-team .team-card .card .team-content .email a
{
    text-decoration: none;
}

/* Styling the services section */

.services
{
    width: 100%;

}

.services .container-services
{
    width: 80%;
    margin: auto;
    
}

.services .container-services .services-content
{
    text-align: center;
    margin-top: 50px;
}

.services .container-services .services-content h1
{
    margin-top: 10px;
    letter-spacing: 1.5px;
    color: purple;
    font-size: 40px;
}

.services .container-services .services-content h4
{
    margin-top: 10px;
    letter-spacing: 1.5px;
    font-size: 30;
    padding-left: 10px;
    padding-right: 10px;
}

.services .container-services  .services-list
{
    width: 100%;
    background-color: #ddd;
    display: flex;
    flex-direction: column;
    padding-left: 80px;;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-top: 20px;
}

.services .container-services  .services-list li
{
    font-size: 20px;
}


/* DropDown Menu */
.dropdown_menu
{
    display: none;
    position: absolute;
    top: 130px;
    height: 0;
    width: 100%;
    background-color: white;
    backdrop-filter: blur(15px);
    overflow: hidden;
    transition: 0.2s cubic-bezier(0.175,0.885,0.32,1.275);
    list-style: none;
    
}

.dropdown_menu.open
{
    height: auto;
    width: 100%;
    
  
}

.dropdown_menu li
{
    padding: 0.7rem;
    display: flex;
    justify-content: center;
    
}

.dropdown_menu li a
{
    text-decoration: none;
    color: purple;
}


h2
{
    text-align: center;
    display: flex;
}


/* Styling the Contact form */

  .contact-form span 
  {
    color: #ddd;
  }

 
  .contact-form .short-contact 
  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    
  }

  .contact-form .short-contact h1
  {
    color: #d620c7;
    font-size: 40px;
  }

  .contact-form .short-contact h4
  {
    font-size: 30px;
    color: #d620c7;
    text-align: center;

  }

  .contact-form .form-container h4
  {
    
    font-size: 30px;
    color: #d620c7;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 600;
  }
  
  .contact-form  .form-container .form h3
  {
    padding-top: 10px;
    color: #d620c7;
  }

  .contact-form .form-container .form input[type="text"], select, textarea
  {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    margin: 8px 0;
    
  }

  .contact-form .form-container 
  {
   
   width: 70%;
   margin-left: auto;
   margin-right: auto;
   
  }


 .contact-form .form-container .form input[type="text"], select {
    width: 100%;
    padding: 5px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .contact-form .form-container .form 
  {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }
  
  .contact-form .form-container .form input[type="submit"] 
  {
    border: 3px solid rgb(252, 122, 219);
    text-decoration: none;
    color: rgb(16, 20, 18);
    transition: 0.2s;
    background-color: transparent;
    padding: 10px 25px;
    margin: 30px;
    background-color: #ff93f6;
  }

  /* #date , #email
  {
    width: 70%;
  }
   */

   #date
   {
    width: 100%;
   }

   #subject
   {
    height: 200px;
   }
  .contact-form  .form-container .form input[type="submit"]:hover 
  {
    background-color: rgba(233, 82, 220, 0.7);
    color: black;
    padding-left: 20px;
  }


  /*Footer*/
footer {
    min-height: 80px;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: purple;
    font-weight: 600;
  }


/* Responsive Design */
@media (max-width: 800px)
{
    .navbar .links
     {
        display: none;
    }
    .navbar .toggle_btn
    {
        display: block;
    }

    .dropdown_menu
    {
        display: block;
    }

     /* Make the text in the main to reduce font size on a small screen */
     main .background .title
     {
         font-size: 30px;
         text-align: center;
         margin-top: 10px;
     }
     
     main
        {
            background-image: url('Background\ Landing\ image.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            height: 78vh;
       
            
            
        }
        
     main .background p
     {
         font-size: 15px;
         text-align: center;
     }

     .About .container-about .content p 
     {
        font-size: 15px;
     }

     .About .container-about .content blockquote
     {
        font-size: 15px;
     }

     .about-title
     {
        font-size: 20px;
     }

     .subtitle
     {
        font-size: 15px;
     }

     section .content p
     {
        font-size: 15px;
     }

     .team .container-team .team-card
    {
    grid-template-columns: repeat(1,1fr);
    }

    .services .container-services  .services-list li
    {
        font-size: 15px;
    }

    .services .container-services .services-content h1
    {
        font-size: 25px;
    }

    .services .container-services  .services-list
    {
        padding-left: 30px;
        padding-right: 10px;
    }

    .services .container-services .services-content h4
    {
        font-size: 13px;
    }

    .services .container-services
    {
        width: 100%;
    }

    .team .container-team .row .team-title h1
    {
        font-size: 25px;
        padding-bottom: 10px;
    }

    .team .container-team .team-card .card .team-content h1
    {
    margin-top: 10px;
    font-size: 20px;
    color: purple;
    }

    .team .container-team .row .team-title blockquote
    {
        font-size: 15px;
    }


    .team .container-team .team-card .card .team-content h4
    {
    margin-top: 10px;
    font-size: 18px;
    }

    .About .container-about .content .Value
    {
        font-size: 20px;
    }


    .contact-form
     {
        padding-top: 0px;
        flex-direction: column;
        justify-content: center;
      }
    
      .contact-form .short-contact 
      {
        width: 100%;
        min-height: 0;
        justify-content: center;
      }
    
      .contact-form .short-contact h2 
      {
        width: fit-content;
      }
    
      .contact-form .form-container
       {
        width: 60%;
        padding-right: 0px;
      }
    
      .contact-form .form-content .form-container .form 
      {
        width: 100%;
      }
    
      .contact-form .form-content .form-container h1
      {
        font-size: 25px;
      }

      .About .container-about .content .MissionStatement
      {
        font-size: 18px;
      }

      .About .container-about .content .Vision
        {
            font-size: 18px;
        }

        .About .container-about .content .about-founder
        {
            font-size: 15px;
        }

        .About .container-about .content .Value
        {
            font-size: 15px;
        }

        .Interview-publication .container-publication-interview .about-publication-publications h1 
        {
            font-size: 25px;
        }

        .Interview-publication .container-publication-interview .content ul li 
        {
            font-size: 15px;
        }

        .Interview-publication .container-publication-interview .content ul li a
        {
            font-size: 14px;
        }

        .Interview-publication .container-publication-interview .content h4
        {
            font-size: 18px;
        }

        .Interview-publication .container-publication-interview .content ul li 
        {
            font-size: 15px;
        }

        .contact-form .form-container 
        {
         
         width: 100%;
        
        }

        .contact-form .short-contact h1
        {
            font-size: 25px;
        }

        .contact-form .short-contact h4
        {
            font-size: 18px;
        }

        .contact-form .form-container h4
        {
            font-size: 18px;
        }
        

        footer 
        {
            font-size: 15px;
        }
}

@media (max-width: 576px)
{
    .dropdown_menu
    {
        width: 100%;
        
    }
}

@media (max-width: 480px)
{
    main
    {
        background-image: url('Background\ Landing\ image.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        height: 40vh;
        background-position: center;
        width: 100%;
        
    }
}