@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800&display=swap');@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800&display=swap');

/*-----------------------
    Common CSS start
-------------------------*/
* {
  margin: 0px;
  padding: 0px;
}

html {
  padding: 0px;
  margin: 0 auto;
  font-weight: 400;
}

body {
  margin: 0px auto;
  padding: 0px;
  overflow-x: hidden;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  font-family: 'Nunito Sans', sans-serif;
}

ul {
  padding: 0;
  margin: 0px;
}

textarea {
  resize: none !important;
}

button,
select {
  cursor: pointer;
}

button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
}

ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

img {
  width: 100%;
  display: block;
}

a {
  -webkit-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  transition: 0.3s all ease;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}


/*-----------------------
  Common CSS end
-------------------------*/

/*-----------------------
  Hero section start
-------------------------*/
.hero__section{
  position: relative;
}
.hero__section-bg{
  position: absolute;
  inset: 0;
  height: 101%;
  object-fit: cover;
  object-position: center;
  border-bottom: 14px solid var(--secondary2);
  
}
.hero__wrap{
  position: relative;
  padding: 100px 15px 160px;
  z-index: 40;
}
.hero__logo{
  max-width: 200px;
  margin: 0 auto 15px;
}
.hero__title{
  font-size: 60px;
  letter-spacing: 14px;
  text-align: center;
  color: var(--white);
  max-width: 440px;
  margin: 0 auto 35px;
}
.hero__desc{
  font-size: 28px;
  color: var(--white);
  max-width: 634px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
}


/*-----------------------
  Hero section end
-------------------------*/
/*-----------------------
  Story section start
-------------------------*/
.story__section{
  margin: 100px 0;
}

.story__title{
  font-size: 26px;
  font-weight: 800;
  margin: 20px 0 10px;

}
.story__desc {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
}

.story__thumb-img{
  border-radius: 10px;
}
.story__list{
  margin-left: 20px;
  max-width: 400px;
}
.story__list.full{
  max-width: 100%;
}
.story__list-item{
  margin-bottom: 0px;
  font-size: 16px;
  font-weight: 600;
  line-height: 2;  
  display: flex;
  align-items: flex-start;
}
.story__list-item-icon{
  width: 22px;
  margin-right: 6px;
}

/*-----------------------
  Story section end
-------------------------*/
/*-----------------------
  Focus section start
-------------------------*/
.focus__section{
  background-color: var(--bg1);
  padding: 40px 0;
}
.focus__title{
  font-size: 36px;
  font-weight: 800;
  color: var(--white);
}
.focus__single-btn{
  font-weight: 700;
  font-size: 18px;
  max-width: 200px;
  padding: 12px 16px;
  width: 100%;
  border-radius: 8px; 
  margin: 6px 0;
}
.focus__btns-wrap{
  display: flex;
  justify-content: space-between;
}

/*-----------------------
  Focus section end
-------------------------*/

/*-----------------------
  Team section start
-------------------------*/
.team__section{
  padding: 100px 0 50px;
  position: relative;
}
.team__member{
  margin-bottom: 50px;
}
.team__member-thumb{
  margin-bottom: 27px;
  position: relative;
}
.team__member-info{
  position: absolute;
  top: 20px;
  right: 20px;
  border-radius: 50%;
  outline: none;
  background-color: transparent;
  border: none;
  z-index: 50;
  transition: all .3s ease;
  opacity: 0;
  visibility: hidden;
}
.team__member-thumb:hover .team__member-info{
  opacity: 1;
  visibility: visible;
}
.team__member-thumb::after{
  content: '';
  inset: 0;
  background-color: rgba(41, 36, 36, 0.726);
  position: absolute;
  transition: all .2s ease;
  opacity: 0;
  visibility: hidden;
  border-radius: 8px;
  scale: .5;
}
.team__member-thumb:hover::after{
    opacity: 1;
    visibility: visible;
    scale: 1;
}

.team__member-img{
  border-radius: 8px;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}
.team__member-content{
  text-align: center;
}

.team__member-socila{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  transition: all  .2s ease;
  opacity: 0;
  visibility: hidden;
}

.team__member-thumb:hover .team__member-socila{
  opacity: 1;
  visibility: visible;
}

.member__social-item{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
  cursor: pointer;
  transition: all .2s ease;
}
.member__social-item:hover{
  background-color: var(--primary1);
}

.team__member-title{
  font-size: 18px;
  font-weight: 800;
  color: var(--secondary1);
  margin-bottom: 8px;
  text-transform: uppercase;

}
.team__member-proffesion{
  text-transform: uppercase;
  font-style: italic;
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary1);
}
.team__member-bio{
  inset: 0;
  width: 100%;
  height: 100vh;
  position: fixed;
  background-color: rgba(41, 36, 36, 0.918);
  display: none;
  z-index: 999;
  
}
.team__member-bio.open{
  display: flex;
  
}
.team__member-bio-container{
  max-width: 500px;
  width: 100%;
  /* margin: 0 15px; */
  background-color: var(--white);
  padding: 30px 40px 40px;
  border-radius: 20px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  
  
}
.bio__title{
  font-size: 20px;
  font-weight: 600;
  margin-top: 20px;
}
.bio__text{
  padding-top: 20px;
  border-radius: 6px;
  height: 380px;
  overflow-y: auto;
}
.team__member-bio-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.bio__close-btn{
  border: none;
  outline: none;
  background-color: transparent;
}


/*-----------------------
  Team section end
-------------------------*/
/*-----------------------
  Footer section end
-------------------------*/
.footer__section{
  background-color: var(--bg1);
  padding: 40px 0 0;
}
.footer__widget-title{
  font-size: 27px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 40px;
}
.footer__form-textarea-wrap{
  display: flex;
  align-items: flex-end;
}


.footer__form-input{
  max-width: 400px;
  width: 100%;
  border-radius: 7px;
  border: none;
  outline: none;
  padding: 10px 10px;
  margin-bottom: 18px;
}
.footer__form-textarea{
  width: 100%;
  margin-right: 15px;
  height: 100px;
  border-radius: 10px;
  padding:5px 15px;
}

.footer__form-textarea::-webkit-scrollbar {
  display: none;
}
.footer__form-btn{
  min-width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  background-color: var(--bg2);
}

.release__logo-img{
  height: 120px;
  object-fit: contain;
  padding: 30px;
}
.footer__release-logo{
  background-color: var(--white);
  border-radius: 10px;
  margin-bottom: 20px;
}

.footer__bottom{
  border-top: 2px solid var(--bg2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 15px 0 30px;
  margin-top: 50px;
}
.footer__bottom-text{
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  margin-top: 15px;
}

/*-----------------------
  Footer section end
-------------------------*/
/*------------------
    Variable
------------------*/
:root {
  /* primary */
  --primary1: #6f8d9b ;
  /* secondary */
  --secondary1: #2e2b2b;
  --secondary2: #3a3737;
  /* white */
  --white: #ffffff;
  /* bg */
  --bg1: #000000e8;
  --bg2: #d6bfbf;
  --bg3: ;
  --bg4: ;
  --bg5: ;
  --bg6: ;
  --bg7: ;
  --bg8: ;
  --bg9: ;
  /* border */
  --border1: ;
  --border2: ;
  /* trans */
  --trans1: ;
  /* shadow */
  --shadow1: ;
}

/*------------------
      Variable Ends
  ------------------*/

  .alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
  }
  
  .alert-success {
    padding: 20px;
    background-color: green;
    color: white;
  }
  
  .closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
  }
  
  .closebtn:hover {
    color: black;
  }