/* Building Extension Page */

.extension-section {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-direction: column;

    padding-bottom: 80px;

  }

  

  .extension-text {

    text-align: center;

    margin-bottom: 48px;

    font-style: normal;

    font-weight: 700;

    font-size: 30px;

    line-height: 1.25;

  }

  

  .extension-cards-container {

    flex: 0 0 auto;

    width: 100%;

    display: flex;

    align-items: flex-start;

    flex-direction: row;

    justify-content: space-between;

  }

  

  .extension-card1 {

    flex: 0 0 auto;

    width: 32%;

    display: flex;

    padding: 20px;

    max-width: 450px;

    min-height: 480px;

    align-items: center;

    border-radius: 36px;

    flex-direction: column;

    background-size: cover;

    justify-content: flex-end;

    background-image: url("https://en.mtssibu.edu.my/image/extension/AB1998.JPG");

  }

  

  .extension-card2 {

    flex: 0 0 auto;

    width: 32%;

    display: flex;

    padding: 20px;

    max-width: 450px;

    min-height: 480px;

    align-items: center;

    border-radius: 36px;

    flex-direction: column;

    background-size: cover;

    justify-content: flex-end;

    background-image: url("https://en.mtssibu.edu.my/image/extension/SW2003.JPG");

  }

  

  .extension-card3 {

    flex: 0 0 auto;

    width: 32%;

    display: flex;

    padding: 20px;

    max-width: 450px;

    min-height: 480px;

    align-items: center;

    border-radius: 36px;

    flex-direction: column;

    background-size: cover;

    justify-content: flex-end;

    background-image: url("https://en.mtssibu.edu.my/image/extension/CW2011.JPG");

  }

  

  .extension-card-info {

    flex: 0 0 auto;

    display: flex;

    width: 100%;

    align-items: flex-start;

    padding-top: 16px;

    padding-left: 32px;

    border-radius: 20px;

    padding-right: 32px;

    flex-direction: column;

    padding-bottom: 16px;

    background-color: #ffffff;

  }

  

  .extension-card-text {

    font-size: 20px;

    font-style: normal;

    font-weight: 700;

    line-height: 1.5;

    margin-bottom: 8px;

  }

  

  .extension-text-container {

    padding-top: 40px;

    padding-bottom: 40px;

  }

  

  .extension-card-text1 {

    line-height: 1.5;

  }

  

  .extension-text1 {

    font-size: 18px;

    font-weight: 400;

    line-height: 1.55;

    text-align: justify;

    margin-bottom: 24px;

    color: gray;

  }

  

  .extension-container {

    width: 100%;

    display: flex;

    margin-top: 40px;

    align-items: center;

    padding-top: 40px;

    margin-bottom: 40px;

    padding-bottom: 40px;

    flex-direction: column;

    justify-content: space-between;

  }

  

  .extension-text-container2 {

    display: flex;

    align-items: flex-start;

    flex-direction: column;

  }

  

  .extension-text2 {

    font-size: 48px;

    font-weight: 700;

    line-height: 1.22;

    text-decoration: none;

    text-transform: none;

    margin-bottom: 24px;

  }

  

  .extension-text3 {

    font-size: 18px;

    font-weight: 400;

    line-height: 1.55;

    text-transform: none;

    text-decoration: none;

    text-align: justify;

    margin-bottom: 24px;

    color: gray;

  }

  

  .extension-text4 {

    font-weight: 600;

    line-height: 1.22;

    text-decoration: none;

    text-transform: none;

    margin-bottom: 16px;

    color: gray;

  }

  

  .extension-image {

    object-fit: contain;

  }

  

  .extension-image1 {

    width: 100%;

    object-fit: contain;

    margin-bottom: 16px;

  }

  

  .tab-content {

    margin-bottom: 100px;

  }

  

  .plan-details {

    gap: 16px;

    width: 800px;

    max-width: 100%;

    display: flex;

    align-items: center;

    flex-direction: column;

  }

  

  .plan-header-container {

    width: 100%;

    display: flex;

    align-items: flex-start;

    flex-direction: column;

  }

  

  .plan-header {

    gap: 24px;

    display: flex;

    flex-direction: row;

  }

  

  .plan-heading {

    text-align: left;

    font-style: normal;

    font-weight: 700;

    font-size: 50px;

    color: #ccc;

  }

  

  .plan-table {

    width: 100%;

    display: flex;

    align-items: center;

    flex-direction: column;

  }

  

  .plan-table-row {

    width: 100%;

    display: flex;

    align-items: flex-start;

    flex-direction: row;

    border-bottom: 1px solid #f1f1f1;

  }

  

  .plan-table-row:hover {

    border-bottom: 1px solid #ccc;

  }

  

  .plan-table-header {

    display: flex;

    align-items: flex-start;

    flex-direction: row;

    flex: 0.6;

  }

  

  .plan-text {

    width: 100%;

    padding-top: 8px;

    padding-bottom: 8px;

    font-style: normal;

    font-weight: 500;

    line-height: 32px;

  }

  

  .pledge-container {

    width: 100%;

    display: flex;

    align-items: center;

    flex-direction: column;

    padding-top: 120px;

    padding-bottom: 120px;

    justify-content: center;

  }

  

  .pledge-content {

    gap: 64px;

    width: 100%;

    display: flex;

    padding: 80px;

    align-items: center;

    flex-direction: column;

    background-color: #2461FF;

  }

  

  .pledge-header {

    display: flex;

    align-items: center;

    flex-direction: column;

  }

  

  .pledge-caption {

    color: #fff;

    font-size: 18px;

    max-width: 900px;

    text-align: center;

    line-height: 27px;

  }

  

  .pledge-form {

    display: flex;

    align-items: center;

    flex-direction: row;

  }

  

  .pledge-form-button {

    background-color: #fff;

    color: #000;

    cursor: pointer;

    display: flex;

    font-style: normal;

    align-items: center;

    font-weight: 600;

    padding-top: 16px;

    transition: 0.3s;

    padding-left: 24px;

    border-radius: 56px;

    padding-right: 24px;

    flex-direction: row;

    padding-bottom: 16px;

    justify-content: center;

    text-align: center;

  }

  

  @media(max-width: 991px) {

    .extension-section {

      flex-direction: column;

    }

  

    .extension-container {

      flex-direction: column-reverse;

    }

  

    .extension-text-container2 {

      width: 100%;

      margin-left: 0px;

    }

  

    .extension-image {

      width: 100%;

      margin-bottom: 24px;

    }

  

    .plan-table-row {

      flex-direction: column;

    }

  

    .plan-table-header {

      flex: 0 0 auto;

      width: 100%;

    }

  

    .pledge-container {

      padding-left: 0px;

      padding-right: 0px;

    }

  

    .pledge-form {

      width: 100%;

      flex-direction: column;

    }

  

    .pledge-form-button {

      width: 50%;

    }

  }

  

  @media(max-width: 767px) {

    .extension-cards-container {

      gap: 24px;

      flex-wrap: wrap;

      justify-content: center;

    }

  

    .extension-card1 {

      width: 100%;

    }

  

    .extension-card2 {

      width: 100%;

    }

  

    .extension-card3 {

      width: 100%;

    }

  

    .plan-header {

      gap: 16px;

    }

  

    .plan-heading {

      font-size: 40px;

    }

  

    .pledge-container {

      padding-bottom: 64px;

    }

  

    .pledge-content {

      gap: 16px;

      padding-top: 64px;

      padding-left: 24px;

      padding-right: 24px;

      padding-bottom: 64px;

    }

  

    .pledge-caption {

      font-size: 14px;

      line-height: 21px;

    }

  

    .pledge-form-button {

      width: 80%;

    }

  }

  

  @media(max-width: 479px) {

    .extension-text-container2 {

      width: 100%;

    }

  

    .extension-image {

      width: 100%;

    }

  

    .plan-header {

      gap: 0px;

      flex-direction: column;

    }

  

    .plan-heading {

      align-self: flex-start;

      font-size: 30px;

    }

  }

  

  /* Download Button*/

  .application-button-container {

    margin-top: 100px;

    margin-bottom: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

  }



  .download-application-form {

    --color: #fff;

    --background: #32357b;

    --background-hover: #FB275A;

    --background-left: #282a62;

    --background-left-hover: #FB275A;

    --folder: #F3E9CB;

    --folder-inner: #BEB393;

    --paper: #FFFFFF;

    --paper-lines: #BBC1E1;

    --paper-behind: #E1E6F9;

    --pencil-cap: #fff;

    --pencil-top: #275EFE;

    --pencil-middle: #fff;

    --pencil-bottom: #5C86FF;

    --shadow: rgba(13, 15, 25, .2);

    border: none;

    outline: none;

    cursor: pointer;

    position: relative;

    border-radius: 10px;

    height: 70px;

    width: 280px;

    font-size: 20px;

    font-weight: 500;

    line-height: 34px;

    -webkit-appearance: none;

    -webkit-tap-highlight-color: transparent;

    padding: 17px 29px 17px 69px;

    transition: background 0.2s;

    color: var(--color);

    background: var(--bg, var(--background));

  }



  .download-application-form>div {

    top: 0;

    left: 0;

    bottom: 0;

    width: 53px;

    position: absolute;

    overflow: hidden;

    border-radius: 10px 0 0 10px;

    background: var(--bgl, var(--background-left));

    cursor: pointer;

  }



  .download-application-form>div .folder-icon {

    width: 23px;

    height: 27px;

    position: absolute;

    left: 15px;

    top: 22px;

  }



  .download-application-form>div .folder-icon .folder-icon-top {

    left: 0;

    top: 0;

    z-index: 2;

    position: absolute;

    transform: translateX(var(--fx, 0));

    transition: transform 0.1s ease var(--fd, 0.1s);

  }



  .download-application-form>div .folder-icon .folder-icon-top svg {

    width: 24px;

    height: 27px;

    display: block;

    fill: var(--folder);

    transform-origin: 0 50%;

    transition: transform 0.2s ease var(--fds, 0.2s);

    transform: perspective(120px) rotateY(var(--fr, 0deg));

  }



  .download-application-form>div .folder-icon:before,

  .download-application-form>div .folder-icon:after,

  .download-application-form>div .folder-icon .paper-icon {

    content: "";

    position: absolute;

    left: var(--l, 0);

    top: var(--t, 0);

    width: var(--w, 100%);

    height: var(--h, 100%);

    border-radius: 1px;

    background: var(--b, var(--folder-inner));

  }



  .download-application-form>div .folder-icon:before {

    box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);

    transform: translateX(var(--fx, 0));

    transition: transform 0.1s ease var(--fd, 0.1s);

  }



  .download-application-form>div .folder-icon:after,

  .download-application-form>div .folder-icon .paper-icon {

    --l: 1px;

    --t: 1px;

    --w: 21px;

    --h: 25px;

    --b: var(--paper-behind);

  }



  .download-application-form>div .folder-icon:after {

    transform: translate(var(--pbx, 0), var(--pby, 0));

    transition: transform 0.1s ease var(--pbd, 0s);

  }



  .download-application-form>div .folder-icon .paper-icon {

    z-index: 1;

    --b: var(--paper);

  }



  .download-application-form>div .folder-icon .paper-icon:before,

  .download-application-form>div .folder-icon .paper-icon:after {

    content: "";

    width: var(--wp, 14px);

    height: 2px;

    border-radius: 1px;

    transform: scaleY(0.5);

    left: 3px;

    top: var(--tp, 3px);

    position: absolute;

    background: var(--paper-lines);

    box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);

  }



  .download-application-form>div .folder-icon .paper-icon:after {

    --tp: 6px;

    --wp: 10px;

  }



  .download-application-form>div .pencil-icon {

    height: 2px;

    width: 3px;

    border-radius: 1px 1px 0 0;

    top: 8px;

    left: 105%;

    position: absolute;

    z-index: 3;

    transform-origin: 50% 19px;

    background: var(--pencil-cap);

    transform: translateX(var(--pex, 0)) rotate(35deg);

    transition: transform 0.4s ease var(--pbd, 0s);

  }



  .download-application-form>div .pencil-icon:before,

  .download-application-form>div .pencil-icon:after {

    content: "";

    position: absolute;

    display: block;

    background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));

    width: var(--w, 5px);

    height: var(--h, 20px);

    border-radius: var(--br, 2px 2px 0 0);

    top: var(--t, 2px);

    left: var(--l, -1px);

  }



  .download-application-form>div .pencil-icon:before {

    -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);

    clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);

  }



  .download-application-form>div .pencil-icon:after {

    --b: none;

    --w: 3px;

    --h: 6px;

    --br: 0 2px 1px 0;

    --t: 3px;

    --l: 3px;

    border-top: 1px solid var(--pencil-top);

    border-right: 1px solid var(--pencil-top);

  }



  .download-application-form:before,

  .download-application-form:after {

    content: "";

    position: absolute;

    width: 10px;

    height: 2px;

    border-radius: 1px;

    background: var(--color);

    transform-origin: 9px 1px;

    transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg));

    top: 34px;

    right: 16px;

    transition: transform 0.15s;

  }



  .download-application-form:after {

    --r: 45deg;

  }



  .download-application-form:hover {

    --cx: 2px;

    --bg: var(--background-hover);

    --bgl: var(--background-left-hover);

    --fx: -40px;

    --fr: -60deg;

    --fd: .15s;

    --fds: 0s;

    --pbx: 3px;

    --pby: -3px;

    --pbd: .15s;

    --pex: -24px;

  }



  .applink {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: 1;

  }



/* Licentiate of Theology */

* {

  box-sizing: border-box;

}



.course-table-row {

  display: flex;

  margin-left: -5px;

  margin-right: -5px;

  align-items: flex-start;

  flex-direction: row;

}



.course-table-column {

  flex: 50%;

  padding: 5px;

  display: flex;

  align-self: stretch;

  align-items: flex-start;

  flex-direction: column;

}



.course-table-column:hover {

  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

}



@media (max-width: 550px) {

  .course-table-row {

    flex-direction: column;

  }

}



table {

  border-collapse: collapse;

  width: 100%;

}



th,

td {

  padding: 8px;

  text-align: center;

  border-bottom: 1px solid #ddd;

}



tr.tr-hover:hover {

  background-color: coral;

  color: #fff;

}



.th-style {

  box-sizing:  border-box;

  vertical-align: middle;

  margin: 0;

  padding: 8px;

  text-align: center;

  background: #3e4182;

  color: #fff;

  border-bottom: 1px solid #ddd;

}



.td-style {

  box-sizing: border-box;

  vertical-align: text-top;

  padding: 8px;

  border-style: none;

  border-bottom-color: #ddd;

  border-bottom-width: 1px;

}



.td-style1 {

  box-sizing: border-box;

  vertical-align: text-top;

  padding: 8px;

  border-style: none;

  border-bottom-color: #ddd;

  border-bottom-width: 1px;

}



body {

  font-family: Arial, Helvetica, sans-serif;

}



.course-year-heading {

  display: flex;

  flex-direction: row;



}



.course-year-heading:before,

.course-year-heading:after {

  content: "";

  flex: 1 1;

  border-bottom: 2px solid #000;

  margin: 10px;

}



/* The Modal (background) */

.mymodal {

  display: none;

  /* Hidden by default */

  position: fixed;

  /* Stay in place */

  z-index: 1;

  /* Sit on top */

  padding-top: 150px;

  padding-bottom: 30px;

  /* Location of the box */

  left: 0;

  top: 0;

  width: 100%;

  /* Full width */

  height: 100%;

  /* Full height */

  overflow: auto;

  /* Enable scroll if needed */

  background-color: rgb(0, 0, 0);

  /* Fallback color */

  background-color: rgba(0, 0, 0, 0.4);

  /* Black w/ opacity */

}





Modal Content

.modal-content {

  /*background-color: #fefefe;*/

  margin: auto;

  /*padding: 20px;

  border: 1px solid #888;*/

  width: 50%;

  /*margin-top: 100px;*/

}



@media(max-width: 1024px) {

  .modal-content {

    /*margin-top: 30px;*/

    width: 60%;

  }

}



@media(max-width: 768px) {

  .modal-content {

    /*margin-top: 0;*/

    width: 70%;

  }

}

/*

@media (max-width: 550px) {

  .modal {

    padding-top: 140px;

    padding-bottom: 20px;

  }



  .modal-content {

    width: 80%;

    margin-top: 50px;

  }

}

*/

/* The Close Button */

.close {

  color: #aaaaaa;

  float: right;

  font-size: 28px;

  font-weight: bold;

}



.close:hover,

.close:focus {

  color: #000;

  text-decoration: none;

  cursor: pointer;

}

/*

.modal-header {

  padding: 2px 16px;

  background-color: #5cb85c;

  color: white;

}



@media(max-width: 550px) {

  .modal-header>h2 {

    font-size: 25px;

  }

}*/



.modal-body {

  /*padding: 5px 16px;

  font-size: 20px;*/

  color:#727272;

}

/*

@media(max-width: 500px) {

  .modal-body {

    padding: 10px;

    line-height: 1.5rem;

  }

}*/

.modal-scrollbar {

  height: 250px;

  overflow: scroll;

}

/* Application Download Button */

.application-button {

  font-size: 17px;

  padding: 15px 35px;

  border-radius: 5px;

  outline: 2px solid #2835ba;

  outline-offset: 0px;

  background: #2835ba;

  border: 0;

  font-weight: bolder;

  color: white;

  transition: all .1s ease-in-out;

  cursor: pointer;

  margin: 10px;

}



.application-button:hover {

  outline-offset: 3px;

  outline: 3px solid #2835ba;

}





/* Statement of Purpose */

/* From Uiverse.io by kyle1dev */ 

.statement-container {

  display: flex;

  flex-direction: column;

  gap: 8px; /* Optional: Adds space between the messages */

}



.statement-item{

  display: flex;

  align-items: left;

  padding: 10px 15px;

  background: linear-gradient(45deg, #04051dea 0%, #2b566e 100%);

  border-radius: 10px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);

  color: white;

  font-family: "Poppins", sans-serif;

  position: relative;

  overflow: hidden;

  transition:

    transform 0.3s ease-in-out,

    box-shadow 0.3s ease-in-out;

}



.statement-item:hover {

  transform: scale(1.05);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);

}





.statement-text-wrapper .title {

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1.2px;

  text-transform: uppercase;

}



/* MTS Newsletter */

.mtsnewsletterpdf-container {

  width: 100%;

  height: 700px;

  border: 1px solid #ccc;

  margin: 20px 0;

}



/* Deadline Page */

.deadline-container {

  padding: 30px;

  border-radius: 15px;

  text-align: center;

  align-items: center;

  justify-content: center;

  background: white;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  max-width: 100%;

  width: auto;

}



.deadline {

  font-size: 18px;

  margin: 10px 0;

}

.deadline-countdown {

  font-size: 26px;

  font-weight: bold;

  color: #d9534f;

}

.deadline-date {

  font-size: 20px;

  font-weight: bold;

  color: #333;

}

.deadline-expired {

  font-size: 22px;

  font-weight: bold;

  color: red;

  margin-top: 10px;

}





/* Homepage Contribution */

.homepage-contribution {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 80px;

  background-color: #292929;

  border-radius: 20px;

}



@media(max-width: 991px) {

  .homepage-contribution {

    flex-direction: column;

    justify-content: center;

    gap: 32px;

  }

}



@media(max-width: 767px) {

  .homepage-contribution {

    padding: 48px 24px 48px 24px;

  }

}



.homepage-contribution-header {

  width: 100%;

  display: flex;

  max-width: 600px;

  align-items: flex-start;

  flex-direction: column;

  justify-content: flex-start;

}



.homepage-contribution-header>h2 {

  color: rgb(255, 255, 255);

  font-size: 30px;

  font-style: normal;

  font-family: Poppins;

  font-weight: 600;

  line-height: 48px;

}



.homepage-contribution-header>p {

  font-size: 20px;

  line-height: 30px;

  color: rgb(204, 204, 204);

  width: 100%;

  max-width: 600px;

  font-family: Poppins;

  line-height: 28px;

}



@media(max-width: 1024px) {

  .homepage-contribution {

    padding: 65px;

  }



  .homepage-contribution-header {

    max-width: 500px;

  }



  .homepage-contribution-header>h2 {

    font-size: 25px;

    line-height: 30px;

  }



  .homepage-contribution-header>p {

    max-width: 500px;

  }



  .homepage-contribution-button {

    flex-direction: column;

  }

}



.homepage-contribution-button {

  gap: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

}



@media(max-width: 991px) {

  .homepage-contribution-button {

    width: 100%;

    flex-direction: column;

  }

}



.homepage-supportbutton {

  background-color: #80FF44;

  display: flex;

  cursor: pointer;

  align-items: center;

  transition: 0.3s;

  padding: 24px 32px;

  border-radius: 58px;

  flex-direction: column;

}



@media(max-width: 991px) {

  .homepage-supportbutton {

    width: 90%;

  }

}



.homepage-supportbutton:hover {

  transform: scale(1.1);

}



.homepage-supportbutton>span {

  color: #0c100c;

  font-size: 16px;

  font-style: normal;

  font-family: Poppins;

  font-weight: 500;

  line-height: 24px;

  white-space: nowrap;

}



.homepage-friendofmtsbutton {

  background-color: #ffffff;

  display: flex;

  cursor: pointer;

  align-items: center;

  transition: 0.3s;

  padding: 24px 32px;

  border-radius: 58px;

  flex-direction: column;

}



@media(max-width: 991px) {

  .homepage-friendofmtsbutton {

    width: 90%;

  }

}



.homepage-friendofmtsbutton:hover {

  transform: scale(1.1);

}



.homepage-friendofmtsbutton>span {

  color: rgb(12, 16, 12);

  font-size: 16px;

  font-style: normal;

  font-family: Poppins;

  font-weight: 500;

  line-height: 24px;

  white-space: nowrap;

}





/*Homepage MTS Facilities for Churches use */

.home-rent-section {

  margin-top: 48px;

  width: 100%;

  z-index: 1;

  display: flex;

  align-items: center;

  padding-left: 24px;

  padding-right: 24px;

  flex-direction: column;

  justify-content: center;

}



.home-rent-heading-container {

  flex: 1;

  display: flex;

  max-width: 100%;

  align-items: center;

  flex-direction: column;

  justify-content: center;

}



.home-rent-heading-container>h1 {

  font-size: 56px;

  font-family: DM Serif Display;

  font-weight: 400;

  line-height: 70px;

  letter-spacing: 0.01em;

  text-decoration: none;

  text-align: center;

  margin-bottom: 8px;

}



.home-rent-heading-container>p {

  color: #000000;

  font-size: 18px;

  text-align: center;

  line-height: 1.44;

  margin-bottom: 32px;

}



.home-primary {

  margin-bottom: 48px;

}



.home-rent-button:hover {

  color: #00008B;

  background-color: rgba(0, 0, 0, 0.1);

}



.home-rent-button {

  color: white;

  cursor: pointer;

  font-style: normal;

  font-weight: 700;

  line-height: 1;

  transition: 0.3s;

  border-color: transparent;

  border-radius: 4px;

  background-color: #A52A2A;

}



.home-rent-button-lg {

  padding: 20px 24px 24px 20px;

}



.home-rent-gallery {

  width: 100%;

  display: flex;

  grid-gap: 20px;

  align-items: stretch;

}



.home-rent-gallery-container {

  width: 25%;

  align-self: stretch;

}



.home-rent-image {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 8px;

}



.home-rent-gallery-container01 {

  width: 25%;

  display: flex;

  grid-gap: 20px;

  align-items: stretch;

  flex-direction: column;

}



.home-rent-image01 {

  width: 100%;

  object-fit: cover;

  border-radius: 8px;

}



.home-rent-image02 {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 8px;

}



.home-rent-gallery-container02 {

  display: flex;

  grid-gap: 20px;

  flex-direction: column;

  width: 50%;

}



.home-rent-gallery-container03 {

  width: 48%;

  display: flex;

  grid-gap: 20px;

}



.home-rent-image03 {

  height: 100%;

  object-fit: cover;

  border-radius: 8px;

  flex: 1;

}



@media(max-width: 991px) {

  .home-rent-heading-container {

    max-width: 100%;

    margin-bottom: 42px;

  }



  .home-rent-gallery {

    flex-direction: column;

  }



  .home-rent-gallery-container {

    width: 100%;

  }



  .home-rent-gallery-container01 {

    width: 48.5%;

    flex-direction: row;

  }



  .home-rent-gallery-container02 {

    align-items: stretch;

    width: 100%;

  }



  .home-rent-gallery-container03 {

    width: 48.5%;

  }

}



@media(max-width: 767px) {

  .home-rent-heading-container>h1 {

    font-size: 48px;

  }



  .home-rent-gallery-container01 {

    display: grid;

    grid-template-columns: 1fr 1fr;

    width: fit-content;

  }



  .home-rent-image01 {

    height: 100%;

  }



  .home-rent-gallery-container03 {

    display: grid;

    grid-template-columns: 1fr 1fr;

    width: fit-content;

  }



  .home-rent-image03 {

    width: 100%;

  }

}



@media(max-width: 479px) {

  .home-primary {

    padding: 20px 24px 20px 24px;

  }



  .home-rent-button {

    padding: 20px 24px 24px 20px;

  }

}





/* Accreditation Page */

.mts-partnersDesktop {

  gap: 25px;

  flex: 1;

  width: 100%;

  display: flex;

  align-items: center;

  flex-direction: row;

  padding-right: 5.5vw;

}



@media(max-width: 991px) {

  .mts-partnersDesktop {

    flex-wrap: wrap;

    flex-direction: column;

    display: none;

  }

}



.mts-partners-column {

  gap: 55px;

  display: flex;

  align-items: flex-start;

  flex-direction: column;

}



@media(max-width: 991px) {

  .mts-partners-column {

    flex-direction: row;

  }

}



.mts-partner-container {

  width: 130px;

  height: 130px;

  display: flex;

  position: relative;

  align-items: center;

  transition: 0.3s;

  border-color: black;

  border-width: 1px;

  flex-direction: column;

  justify-content: center;

}



.mts-partner-container:hover {

  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

}



@media(max-width: 767px) {

  .mts-partner-container {

    height: 100%;

  }

}



@media(max-width: 479px) {

  .mts-partner-container {

    width: 100%;

    height: 100px;

  }

}



.mts-partner-image {

  height: 100px;

  object-fit: cover;

  cursor: pointer;

}



@media(max-width: 767px) {

  .mts-partner-image {

    height: auto;

  }

}



@media(max-width: 479px) {

  .mts-partner-image {

    height: 45px;

  }

}



.mts-partnersMobile {

  gap: 64px;

  flex: 1;

  width: 100%;

  display: none;

  align-items: center;

  flex-direction: row;

}



@media(max-width: 991px) {

  .mts-partnersMobile {

    flex-wrap: wrap;

    flex-direction: column;

    display: flex;

    gap: 10px;

  }

}



@media(max-width: 767px) {

  .mts-partnersMobile {

    gap: 48px;

  }

}



@media(max-width: 479px) {

  .mts-partnersMobile {

    gap: 0px;

  }

}



.mts-partners-row {

  gap: 64px;

  display: flex;

  align-items: flex-start;

  flex-direction: column;

}



@media(max-width: 991px) {

  .mts-partners-row {

    gap: 10px;

    flex-direction: row;

  }

}



@media(max-width: 767px) {

  .mts-partners-row {

    width: 100%;

    height: 100px;

  }

}



@media(max-width: 479px) {

  .mts-partners-row {

    width: 100%;

    height: 100px;

  }

}



.mts-partner-container>span {

  position: absolute;

  z-index: 2;

  top: 60%;

  margin-top: 10px;

  padding: .55rem 1rem;

  font-size: 1rem;

  font-weight: 500;

  text-align: center;

  white-space: nowrap;

  color: #000;

  border-radius: 50px;

  background-color: #fff;

  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);

  opacity: 0;

  transition: all 0.2s ease-in-out;

}



@media(max-width: 767px) {

  .mts-partner-container>span {

    font-size: 0.5rem;

  }

}



@media(max-width: 479px) {

  .mts-partner-container>span {

    font-size: 0.5rem;

  }

}



.mts-partner-container:hover>span {

  top: 100%;

  opacity: 0.9;

}



.language-switcher-border {

  background-color:#BBC1E180;

}


.extension-btn-details{
  font-size: 17px;
  background: transparent;
  border: none;
  padding: 1em 1.5em;
  color: #ffedd3;
  text-transform: uppercase;
  position: relative;
  transition: 0.5s ease;
  cursor: pointer;
}

.extension-btn-details::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: #ffc506;
  transition: 0.5s ease;
}

.extension-btn-details:hover {
  color: #1e1e2b;
  transition-delay: 0.5s;
}

.extension-btn-details:hover::before {
  width: 100%;
}

.extension-btn-details::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0;
  width: 100%;
  background-color: #ffc506;
  transition: 0.4s ease;
  z-index: -1;
}

.extension-btn-details:hover::after {
  height: 100%;
  transition-delay: 0.4s;
  color: aliceblue;
}

/* Main Page Language Selector */
.lang-content {
  display: flex;
  flex-direction: column;
  margin: auto;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.language-buttons-mainpage{
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

@media(max-width: 479px) {
  .language-buttons-mainpage {
    flex-direction: column;
  }
}

.lang-btn-fp {
  color: #090909;
  padding: 0.7em 1.7em;
  font-size: 18px;
  border-radius: 0.5em;
  background: #e8e8e8;
  cursor: pointer;
  border: 1px solid #e8e8e8;
  transition: all 0.3s;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
}

.lang-btn-fp:active {
  color: #666;
  box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
}