body {
  margin: 0;
  line-height: normal;
  background-color: var(--background-color);
  color: var(--text-color);
}
body::-webkit-scrollbar {
  display: none;
}

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* You can do the same for links */
a {
-webkit-tap-highlight-color: transparent !important;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

#more {display: none;}


.popup-wrap {
  width:100%;
  height:100%;
  display:none;
  position:absolute;
  top:0px;
  left:0px;
  content:'';
  background:rgba(0,0,0,0.85);
  z-index: 1000;
}

.popup-box {
   width:500px;
  padding: 80px;
  transform:translate(-50%, -50%) scale(0.5);
  position:absolute;
  top:50%;
  left:50%;
  box-shadow:0px 2px 16px rgba(0,0,0,0.5);
  border-radius:16px;
  background:#fff;
  z-index: 1000;
  font-family: var(--font-playfair-display);
}
.popup-box .detail {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  
}

  
  .close-btn {
    width:35px;
    height:35px;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    top:-10px;
    right:-10px;
    -webkit-transition:all ease 0.5s;
    transition:all ease 0.5s;
    border-radius:1000px;
    background:#000000;
    font-weight:bold;
    text-decoration:none;
    color:#fff;
    line-height:190%;
    
 
  }
.popup-btn {
  cursor: pointer;
 
}

.transform-in, .transform-out {
  display:block;
  -webkit-transition:all ease 0.5s;
  transition:all ease 0.5s;
}

.transform-in {
	-webkit-transform:translate(-50%, -50%) scale(1);
	transform:translate(-50%, -50%) scale(1);
}

.transform-out {
	-webkit-transform:translate(-50%, -50%) scale(0.5);
	transform:translate(-50%, -50%) scale(0.5);
}



*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  /* height: auto; */
}


.container.main {
  display: flex;
  justify-content: center;
  align-items: center;
  /* flex-direction: column; */
  flex-direction: column;
  padding: 12px 48px;
}

.container.main .about {
  margin-top: 64px;
  z-index: -10;
}

.container.main  .image-section {
  margin-top: 64px;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* border-radius: var(--br-base); */
  border-radius: var(--br-base);
  display: flex;
  /* margin-bottom: 12px;   */
}

.container.main  .image-section img {
  width: 100%;
  height: 100%;
  background-size: cover;
}

.container.main  .text-overlay {
  position: absolute;
  top: 50%;
  right: 0;
  width: 55%;
  height: 100%;
  transform: translateY(-50%);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
  padding: 4vw 0;
}

.container.main  .text-overlay .main-text {
  font-size: 1.464vw;
  width: 90%;
  font-family: Arial, Helvetica, sans-serif;
}

.container.main  .text-overlay .author {
  font-size: 4.1vw;
  text-align: left;
  font-family: var(--font-playfair-display);
  font-weight: 600;
}
.container.main  .text-overlay .position{
  display: flex;
  flex-direction: column;
  font-size: 1.464vw;
  font-family: Arial, Helvetica, sans-serif;
}

.container.main .about .about_img_section {
  display: block;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */

}

.container.main .about_details {
  display: none;
}


/* ========== EDUCATION AND CONTACT ========== */
.personal_detail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 24px;
  padding: 24px 0;
  font-family: Arial, Helvetica, sans-serif;
}

.personal_detail.mobile {
  display: none;
}

.personal_detail .detail_container {
  border-radius: 16px;
  padding: 24px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 376px;
  width: 100%;
  background-color: var(--color-white);
}
.personal_detail .detail_container .detail {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 16px;
  /* margin-bottom: 16px; */
  margin: 8px 0;
}
.personal_detail .detail_container .detail a {
  line-height: 1.25vw;
}
.personal_detail .detail_container .heading {
  font-size: 32px;
  line-height: 1.1;
  font-weight: bold;
  font-family: var(--font-playfair-display);
  margin: 12px 0;
}
.personal_detail .detail_container.education {
  justify-content: flex-start;
}
.personal_detail .detail_container.education .education_details h4 {
   font-size: 1.25vw;
   font-family: Arial, Helvetica, sans-serif;
}
.personal_detail .detail_container.education .education_details p {
margin: 16px 0;
line-height: 20px;
}
.personal_detail .detail_container.education .education_details p span {
   color: #808080;
   font-weight: bold;
   font-size: 1.25vw;
}


/* ===== PARENT CONTAINER ====== */
.accordion-container {
  width: 100%;
  /* margin: 8px auto; */
}

.accordion {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  width: calc(100%);
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-white);
  padding: 24px 0;

}

.accordion-header {
  cursor: pointer;
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding: 0 24px;
  margin-bottom: 24px;
  font-weight: bold;
  font-family: var(--font-playfair-display);
}
.accordion-title {
  font-size: 2.5vw;
  line-height: 2.5vw;
}
.accordion-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.accordion-content {
  display: none;
  padding: 0 24px;
  font-family: Arial, Helvetica, sans-serif;
}
.accordion-content .content {
  margin-bottom: 16px;
}

.accordion-container .accordion.mobile {
  display: none;
}

.accordion-content .year {
  font-weight: bolder;
  color: #808080;
  /* margin-bottom: 6px; */
  font-size: 1.25vw;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 4px;


}
.accordion-content .description {
  color: var(--text-color);
  font-size: 1.25vw;
}
.accordion-content .description.title {
  font-weight: bold;
  margin-bottom: 16px;
}
.accordion-content .content #list {
  margin-left: 3.75vw;
  margin-top: 1.875vw;
}
.accordion-content .description a {
  text-decoration: underline;
  line-height: 1.25vw;
  
}
.accordion-content .description.line {
  border-left: 1.5px solid #1D3232;
  padding: 0 12px;
  margin: 0 12px;
}

.accordion-content .description ul {
  padding: 0 48px;
  display: block;
}

.extra-content {
  display: none;
}

.read-more {
  border: none;
  color: #E7BF83;
  cursor: pointer;
  margin: 6px 0;
  text-align: center;
  background-color: transparent;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
}


.flexbox {
  display: flex;
  gap: 24px;
}
.flexbox.mobile {
  display: none;
}
.flexbox_content {
  display: flex;
  gap: 24px;
}
.flexbox_content .flexbox_container {
  width: 50%;
}

@media (min-width: 1024px) {
  .accordion-content {
      display: block;
  }

  .accordion-header {
      cursor: default;
  }

  .accordion-arrow {
      display: none;
  }
}








/* ================== FOOTER ============ */

footer {
  padding: 0;
  width: 100%;
  margin-top: 24px;

}

.footer_container {
  display: block;
  width: 100%;
  height: 380px;
  background-color: var(--footer-bg);
}

 .footer_container .footer_section {
  padding: 0px 48px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.footer_container .footer_section .section_top {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 80px;
}
.footer_container .footer_section .section_top .section_details .logo {
  margin-bottom: 32px;
}

.footer_container .footer_section .section_top .footer_menu  ul {
  display: flex;
  
}

.footer_container .footer_section .section_top .footer_menu  ul li {
  list-style: none;
  margin-right: 32px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-white);
  font-weight: normal;
}
.footer_container .footer_section .section_top .section_email .email_heading {
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-white);
  font-weight: normal;
  margin-bottom: 16px;
  height: 21px
}
.footer_container .footer_section .section_top .section_email .email_input {
  display: flex;
  gap: 8px;
}

.footer_container .footer_section .section_top .section_email .email_input input {
   min-width: 300px;
   height: 45px;
   border-radius: var(--gap-5xs);
   border: 0;
}
.footer_container .footer_section .section_top .section_email .email_input input::placeholder {
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-sm);
  color: var(--text-color);
  padding: 12px;
  font-weight: normal;
}
.footer_container .footer_section .section_top .section_email .email_input button{
  width: 85px;
  height: 45px;
  border-radius: var(--gap-5xs);
  border: 1px solid var(--color-white);
  background-color: transparent;
  color: var(--color-white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-white);
  font-weight: normal;


}

.footer_container .footer_section .hr{
  width: 100%;
  border: 1px solid var(--color-white);
  margin-bottom: 32px;
}

.footer_container .footer_section .section_bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-family: Arial, Helvetica, sans-serif;
}

.footer_container .footer_section .section_bottom .socials {
 display: flex;
 gap: 20px;
}

.footer_container .footer_section .section_bottom .socials svg {
  color: var(--color-white);
}

.footer_container .footer_section .section_bottom .privacy {
  display: flex;
  gap: 24px;
}


/* @media only screen and (max-width: 600px) {
  .header .navbar .nav_section .nav_list {
    display: block;
    bottom: 12px;
    right: 12px;
  }

  .header .navbar .logo_section{
    margin-left: -24px;
  
  }


}

@media only screen and (max-width: 1024px) {
  .container.main .about {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 0;
  }
  .container.main .education {
    display: flex;
    flex-direction: column;
    width: 100%;

  }

 
} */


/* For Tablet View */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {

.container.main {
  padding: 16px 16px;
}
  /* ========= HERO IMAGE ================= */

  .container.main  .image-section {
    margin-top: 64px;
    position: relative;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    border-radius: 0px;
    display: flex;
    /* padding: 12px 48px; */
    padding: 0;
  }
  .container.main  .image-section  img {
    border-radius: 0px;
  }
  .container.main  .text-overlay .main-text {
    display: none;
  }
  .container.main  .text-overlay {
    position: absolute;
    top: 50%;
    right: 0;
    width: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }

  .container.main  .text-overlay .about_author {
    width: 100%;
  }

  .container.main  .text-overlay .author {
    font-size: 7.292vw;
    width: 100%;
    text-align: left;
    font-family: var(--font-playfair-display);
    font-weight: 600;
  }
  .container.main  .text-overlay .position{
    font-size: 2.604vw;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    width: 90%;
  }

  /* ======== DESCRIPTION =============== */
  
.container.main .about_details {
  display: block;
  padding: 16px 0;
}
.container.main .about_details  p {
  font-size: 2.604vw;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text-color);
}
.personal_detail  {
  display: none;
}
.personal_detail.mobile {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.personal_detail .detail_container {
  border-radius: 16px;
  padding: 24px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  background-color: var(--color-white);
}
.personal_detail .detail_container .detail {
  font-size: 2.604vw;
}
.personal_detail .detail_container .detail a {
  line-height: 2.604vw;
}
.personal_detail .detail_container .heading {
  font-size: 5.2vw;
  margin-top: 0;
  padding-top: 0;
  
}
.personal_detail .detail_container.education .education_details {
  font-size: 2.604vw;

}


.personal_detail .detail_container.education .education_details h4 {
  font-size: 2.604vw;
}
.personal_detail .detail_container.education .education_details p {
margin: 16px 0;
line-height: 20px;
}
.personal_detail .detail_container.education .education_details p span {
  font-size: 2.604vw;
}


/* ============== DETAILS ============== */
.accordion {
  padding: 4.5vw 0;
}
.accordion-container .accordion.mobile {
  display: block;
}
.accordion-header{
  margin-bottom: 0;

}
.accordion-header .accordion-title {
  font-size: 5.2vw;
}

.accordion-arrow svg {
  height: 32px;
  width: 32px;
}
 .accordion-content {
  margin-top: 4vw;
}

.accordion-content .content p {
  font-size: 2.604vw;
  line-height: 3vw;
}
.accordion-content .content .year{
  margin-bottom: 12px;
}
.accordion-content .content #list {
  font-size: 2.604vw;
  margin-left: 4vw;
}
.accordion-content .content .description a {
  line-height: 3vw;

}
.accordion-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.personal_detail {
  /* display: none; */
}


.read-more {
  font-size: 2.604vw;
}


.flexbox {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.flexbox.desktop {
  display: none;
}

.flexbox.mobile {
  display: flex;
}

.flexbox_content {
  display: flex;
  flex-direction: column;
}
.flexbox_content .flexbox_container {
  width: 100%;
}



    /* ========== FOOTER SECTION ============= */

  .footer_container .footer_section .section_top {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    flex-direction: column;
    margin: 48px 0;
  }
  .footer_container .footer_section .section_top .footer_menu  ul {
    display: flex;
    margin-bottom: 32px;
  }

  .footer_container .footer_section .section_top .footer_menu  ul li {
    font-size: 16px ;
  }
  
  .footer_container .footer_section .section_top .section_email .email_heading {
    font-size: 16px ;
    margin-bottom: 16px;
  } 

}

@media screen and (max-device-width: 640px) {
  .container.main {
    padding: 16px 16px;
  }
  
  .flexbox{
    display: block;
  }

  /* ======== POP UP ========= */

  .popup-box {
    max-width:320px;
    padding:20px;
  }

  .close-btn {
    width:24px;
    height:24px;
  }
  .close-btn svg {
    width: 14px;
    height: 14px;
  }
  /* ========== HERO IMAGES ============= */
  .container.main  .image-section {
    margin-top: 64px;
    position: relative;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    border-radius: 0px;
    display: flex;
    /* padding: 12px 48px; */
    padding: 0;
  }
  .container.main  .text-overlay .main-text {
    display: none;
  }

  .container.main  .text-overlay {
    position: absolute;
    top: 50%;
    right: 0;
    width: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;

  }

  .container.main  .text-overlay .about_author {
    width: 100%;
  }

  .container.main  .text-overlay .author {
    font-size: 7.292vw;
    width: 100%;
    text-align: left;
    font-family: var(--font-playfair-display);
    font-weight: 600;
  }
  .container.main  .text-overlay .position{
    font-size: 3vw;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    width: 80%;
    margin-top: 4px;
  }
  
   /* ======== DESCRIPTION =============== */
  
.container.main .about_details {
  display: block;
   padding-top: 16px;
   font-size: 4vw;
   font-family: Arial, Helvetica, sans-serif;
}


.container.main .about_details  p {
  font-size: 4vw;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text-color);
}
.personal_detail  {
  display: none;
}
.personal_detail.mobile {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.personal_detail .detail_container {
  border-radius: 16px;
  padding: 24px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  background-color: var(--color-white);
}
.personal_detail .detail_container .detail {
  gap: 8px;
}
.personal_detail .detail_container .detail svg {
  display: block;
}
.personal_detail .detail_container .detail {
  font-size: 4vw;
}
.personal_detail .detail_container .detail a {
  line-height: 1.2;
}
.personal_detail .detail_container .heading {
  font-size: 7.5vw;
  margin-top: 0;
  padding-top: 0;
  
}
.personal_detail .detail_container.education .education_details {
  font-size: 4vw;

}


.personal_detail .detail_container.education .education_details h4 {
  font-size: 4vw;
}
.personal_detail .detail_container.education .education_details p {
margin: 16px 0;
 line-height: 1.5;
}
.personal_detail .detail_container.education .education_details p span {
  font-size: 4vw;
}


/* ============== DETAILS ============== */
.accordion {
  padding: 4.5vw 0;
}
.accordion-container .accordion.mobile {
  display: block;
}
.accordion-header{
  margin-bottom: 0;

}
.accordion-header .accordion-title {
  font-size: 7.5vw;
  line-height: 1;

}

.accordion-arrow svg {
  height: 24px;
  width: 24px;
}
 .accordion-content {
  margin-top: 4vw;
}

.accordion-content .content p {
  font-size: 4vw;
  line-height: 1.2;
}
.accordion-content .content .year{
  margin-bottom: 12px;
}
.accordion-content .content #list {
  font-size: 4vw;
  margin-left: 10vw;
}
.accordion-content .content #list a {
  line-height: 1.2;
}
.accordion-content .content .description a {
  line-height: 1.2;

}
.accordion-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.personal_detail {
  /* display: none; */
}


.read-more {
  font-size: 4vw;
}


.flexbox {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.flexbox.desktop {
  display: none;
}
.flexbox.mobile {
  display: flex;
}

.flexbox_content {
  display: flex;
  flex-direction: column;
}
.flexbox_content .flexbox_container {
  width: 100%;
}


  /* ============= FOOTER SECTION ============= */
  .footer_container .footer_section .section_top {
    
    margin: 24px 0;
  }
 .footer_container {
    display: block;
    width: 100%;
    height: 640px;
    background-color: var(--footer-bg);
  }
  .footer_container .footer_section {
    padding: 0 4.688vw;
  }
  .footer_container .footer_section .section_top {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-direction: column;
    /* margin-bottom: 80px; */
    gap: 16px;
  }
  .footer_container .footer_section .section_top .footer_menu  ul{
    flex-direction: column;
  }
  .footer_container .footer_section .section_top .footer_menu  ul li {
    font-size: 14px ;
    margin-bottom: 16px;
  } 

  .footer_container .footer_section .section_top .section_email .email_input {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }

  .footer_container .footer_section .section_bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
 }