@import "./common-var.css";

a,
a:hover {
  text-decoration: none;
  outline: none;
}

input:focus {
  outline: none;
}

ul,
ol,
ul > li,
ol > li {
  margin:  0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1680px) {
  .container {
    max-width: 1540px;
  }
}
.box-type1 {
  background-color: var(--white);
}
.box-type2 {
  background-color: var(--primary-color);
}

/**************
Text color
**************/
.text-white {
  color: var(--white) !important;
}
.text-primary {
  color: var(--primary-color) !important;
}
.text-secondary {
  color: var(--secondary-color) !important;
}

/**************
Common padding & Spacing 
**************/
.common-padding {
  padding: 100px 0;
  @media (max-width: 1440px) {
    padding: 80px 0;
  }
  @media (max-width: 1024px) {
    padding: 60px 0;
  }
  @media (max-width: 767px) {
    padding: 50px 0;
  }
}
.common-spacing {
  margin: 100px 0;
  @media (max-width: 1440px) {
    margin: 80px 0;
  }
  @media (max-width: 1024px) {
    margin: 60px 0;
  }
  @media (max-width: 767px) {
    margin: 50px 0;
  }
}

.common-spacing1 {
  margin: 40px 0;
  @media (max-width: 1140px) {
    margin: 30px 0;
  }
}

/**************
Common CMS Text Type
**************/
.cms-text {
  color: var(--text-default-color);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  @media (max-width: 1440px) {
    font-size: 20px;
    line-height: 30px;
  }

  @media (max-width: 576px) {
    font-size: 18px;
    line-height: 28px;
  }
}

.cms-text1 {
  color: var(--text-default-color);
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 35px;
  @media (max-width: 1140px) {
    font-size: 20px;
    line-height: 28px;
  }

  @media (max-width: 576px) {
    font-size: 18px;
    line-height: 24px;
  }
}

.cms-text2 {
  color: var(--text-default-color);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 35px;

  @media (max-width: 576px) {
    font-size: 18px;
    line-height: 31px;
  }
}

/**************
Common heading types
**************/
.hd-type1 {
  color: var(--text-default-color);
  font-size: 90px;
  font-weight: bold;
  line-height: 90px;
  @media (max-width: 1140px) {
    font-size: 70px;
    line-height: 70px;
  }
  @media (max-width: 576px) {
    font-size: 50px;
    line-height: 50px;
  }
}

.hd-type2 {
  color: var(--text-default-color);
  font-size: 50px;
  font-weight: bold;
  line-height: 60px;
  margin-bottom: 20px;
  @media (max-width: 1140px) {
    font-size: 40px;
    line-height: 50px;
  }
  @media (max-width: 576px) {
    font-size: 30px;
    line-height: 40px;
  }
}

.hd-type3 {
  color: var(--text-default-color);
  font-size: 30px;
  font-weight: bold;
  line-height: 40px;
  margin-bottom: 30px;
  @media (max-width: 1140px) {
    font-size: 26px;
    line-height: 36px;
  }
  @media (max-width: 576px) {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 20px;
  }
}


/**************
Common button types
**************/
.btn-type1 {
  background-color: var(--secondary-color);
  color: var(--white);
  padding: 10px 35px;
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  text-transform: none;
  letter-spacing: normal;
  text-align: center;
  border-radius: 100px;
  border: 2px solid var(--secondary-color);
  max-width: fit-content;
  transition: all 0.3s ease;
  display: inline-block;
}
.btn-type1:hover {
  background-color: var(--primary-color);
  color: var(--white);
  transition: all 0.3s ease;
}

.btn-type2 {
  background-color: var(--secondary-color);
  padding: 12px 30px;
  color: var(--white);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  width: auto;
  max-width: fit-content;
  text-align: center;
  transition: all 0.3s ease;
  letter-spacing: 2px;
  border: 2px solid var(--secondary-color);
}
.btn-type2:hover {
  background-color: transparent;
  color: var(--secondary-color);
  transition: all 0.3s ease;
}
.btn-type3 {
  background-color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
  padding: 12px 23px;
  color: var(--white);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  border-radius: 100px;
  width: auto;
  max-width: fit-content;
  transition: all 0.3s ease;
  display: inline-block;
}
.btn-type3:hover {
  background-color: var(--primary-color);
  color: var(--white);
  transition: all 0.3s ease;
}


/**************
Link types
**************/
.link-type1 {
  display: flex;
  width: 149px;
  justify-content: space-between;
  align-items: center;
  color: var(--secondary-color);
  font-family: var(--font-type1);
  font-size: 14px;
  font-weight: 400;
  line-height: 105%;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s ease;

  &:hover {
    color: var(--primary-color);

    svg rect {
      stroke: var(--primary-color);
    }

    svg path {
      fill: var(--primary-color);
    }
  }
}

.link-type1 svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.link-type1 svg rect,
.link-type1 svg path {
  transition: all 0.3s ease;
}

.link-type1 span {
  width: 107px;
  height: 14px;
  flex-shrink: 0;
}

/**************
Common list 
**************/
ul.list-type1 {
  li {
    position: relative;
    padding-left: 15px;
    line-height: 34px;
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 10px;
      width: 8px;
      height: 8px;
      background-color: #000000;
      border-radius: 50%;
    }
  }
}
[dir="rtl"] ul.list-type1 {
  li {
    padding-left: 0;
    padding-right: 15px;
    &::before {
      left: auto;
      right: 0;
    }
  }
}
/**************
Common tab types
**************/
.maintab-bg{
  background-color: var(--black);
}
.tab-type1 {
  position: relative;
}
.tab-type1 > .nav-tabs {
  border: 0px;
  gap: 10px;
  overflow: auto;
  flex-wrap: nowrap;
  padding: 15px 0;
}

.tab-type1 > .nav-tabs > .nav-item > .nav-link {
  margin: 0;
  padding: 8px 28px 10px;
  color: var(--white);
  border: 1px solid var(--background-light);
  border-radius: 5px;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 35px;
  width: max-content;
  min-height: 58px;

  &:hover{
    background-color: var(--secondary-color);
  }
}
.inner-tab {
  &:after {
    display: none;
  }
  > .nav-tabs > .nav-item > .nav-link {
    min-height: 58px;
  }
}
.tab-type1 > .nav-tabs > .nav-item > .nav-link.active {
  color: var(--white);
  background-color: var(--background-light);
  position: relative;
  &::before{
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 20px 20px 0 0;
   border-color: #000000 transparent transparent transparent;
   transform: rotate(0deg);

  }
}
[dir="rtl"] .tab-type1 > .nav-tabs > .nav-item > .nav-link.active {
  &::before{
    right: -2px;
    left: auto;
    border-width: 20px 0 0 20px;  }
}
/* tab-type2 */
.tab-type2 > .nav-tabs {
  border: none;
  gap: 100px;
  justify-content: center;
  @media(max-width: 1440px;){
    gap: 50px;
  }
  @media(max-width: 1024px;){
    gap: 25px;
  }
}

.tab-type2 > .nav-tabs > .nav-item > .nav-link {
  margin: 0;
  color: var(--text-default-color);
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  padding: 15px 0px;
  border-bottom: 1px solid transparent;
  border-width: 0 0 5px 0;
  background: var(--white);
  width: 100%;
}

.tab-type2 > .nav-tabs > .nav-item > .nav-link.active {
  border-bottom: 5px solid var(--secondary-color);
  border-width: 0 0 5px 0;
  color: var(--secondary-color);
}

/**************
Form Elements
**************/
.custom-select {
  display: inline-flex;
  height: 52px;
  padding: 12px;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  border: 1px solid #dadada;
  background: var(--white);
  color: var(--text-default-color);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20.031 9.53068L12.531 17.0307C12.4614 17.1004 12.3787 17.1557 12.2876 17.1935C12.1966 17.2312 12.099 17.2506 12.0004 17.2506C11.9019 17.2506 11.8043 17.2312 11.7132 17.1935C11.6222 17.1557 11.5394 17.1004 11.4698 17.0307L3.96979 9.53068C3.82906 9.38995 3.75 9.19907 3.75 9.00005C3.75 8.80103 3.82906 8.61016 3.96979 8.46943C4.11052 8.32869 4.30139 8.24963 4.50042 8.24963C4.69944 8.24963 4.89031 8.32869 5.03104 8.46943L12.0004 15.4397L18.9698 8.46943C19.0395 8.39974 19.1222 8.34447 19.2132 8.30676C19.3043 8.26904 19.4019 8.24963 19.5004 8.24963C19.599 8.24963 19.6965 8.26904 19.7876 8.30676C19.8786 8.34447 19.9614 8.39974 20.031 8.46943C20.1007 8.53911 20.156 8.62183 20.1937 8.71288C20.2314 8.80392 20.2508 8.9015 20.2508 9.00005C20.2508 9.0986 20.2314 9.19618 20.1937 9.28722C20.156 9.37827 20.1007 9.46099 20.031 9.53068Z' fill='%23515151'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  min-width: 229px;

  &:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(45, 19, 234, 0.1);
  }

  &:hover {
    border-color: var(--primary-color);
  }

  option {
    padding: 10px;
    background: var(--white);
    color: var(--text-default-color);
  }
}

/* RTL Support for forms */
[dir="rtl"] .custom-select,
[dir="rtl"] .form-select {
  background-position: left 12px center;
  padding-right: 12px;
  padding-left: 50px;
}

/**************
Points Lists
**************/
.points-type1 {
  list-style: none;
  margin: 0 0 25px;
  padding: 0;
  border:1px solid rgba(255, 255, 255, 0.12);
  border-width:0 0 1px 0;

  li {
    position: relative;
    padding: 22px 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    border:1px solid rgba(255, 255, 255, 0.12);
    border-width:1px 0 0 0;


    &:last-child {
      margin-bottom: 0;
    }
  }
  @media(max-width:1600px){
    li {
      padding: 16px 0;
    }
  }
  @media (max-width: 767px) {
    li {
      font-size: 16px;
      line-height: 24px;    
    }
  }
}

/* RTL Support for points */
[dir="rtl"] .points-type1 li {
  padding-left: 0;
  padding-right: 24px;

  &::before {
    left: auto;
    right: 0;
  }
}

[dir="rtl"] .points-type1 li {
  @media (max-width: 767px) {
    padding-right: 20px;
  }
}

/**************
Common Accordion Type 1
**************/
.accordion-type1 {
  display: flex;
  flex-direction: column;
  gap: 20px;

  .accordion-item {
    border: 1px solid #E0DDDD;
    border-radius: 10px;
    background: var(--white);
    overflow: hidden;

    &:first-child {
      .accordion-button {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
    }

    &:last-child {
      .accordion-button.collapsed {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
    }
  }

  .accordion-header {
    margin: 0;
  }

  .accordion-button {
    display: flex;
    height: 59px;
    padding: 12px 20px;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border: none;
    color: var(--text-default-color);
    font-family: var(--font-type1);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    transition: all 0.3s ease;
    position: relative;

    &:not(.collapsed) {
      background: var(--primary-color);
      color: var(--white);
      box-shadow: none;
    }

    &:focus {
      box-shadow: none;
      border: none;
      outline: none;
    }

    &:hover {
      background: var(--background-light);
      color: var(--white);
      &::after {
        filter: brightness(0) invert(1);
      }
    }

    &::after {
      content: '';
      width: 17px;
      height: 17px;
      flex-shrink: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0C9.55229 2.4141e-08 10 0.447715 10 1V8H16.333C16.8853 8 17.333 8.44772 17.333 9C17.333 9.55229 16.8853 10 16.333 10H10V16.333C10 16.8853 9.55228 17.333 9 17.333C8.44771 17.333 8 16.8853 8 16.333V10H1C0.447716 10 7.23405e-07 9.55228 0 9C4.82823e-08 8.44771 0.447715 8 1 8H8V1C8 0.447715 8.44771 -5.17539e-10 9 0Z' fill='black'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transition: all 0.3s ease;
    }

    &:not(.collapsed)::after {
      background-image: url("data:image/svg+xml,%3Csvg width='18' height='2' viewBox='0 0 18 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.333 0C16.8853 4.82823e-08 17.333 0.447715 17.333 1C17.333 1.55228 16.8853 2 16.333 2H1C0.447716 2 7.23405e-07 1.55228 0 1C4.82823e-08 0.447715 0.447715 -1.03508e-09 1 0H16.333Z' fill='white'/%3E%3C/svg%3E");
    }

    @media (max-width: 767px) {
      font-size: 18px;
      line-height: 28px;
      height: auto;
      min-height: 59px;
    }
  }

  .accordion-title-text {
    flex: 1;
  }

  .accordion-body {
    padding: 30px 17px 30px 17px;
    background: var(--white);

    @media (max-width: 1024px) {
      padding: 25px 15px;
    }

    @media (max-width: 767px) {
      padding: 20px 15px;
    }
  }

  .accordion-collapse {
    border: none;
  }
}

/* RTL Support for Accordion */
[dir="rtl"] {
  .accordion-type1 {
    .accordion-button {
      text-align: right;
    }

    .accordion-body {
      padding: 30px 17px 30px 50px;

      @media (max-width: 1024px) {
        padding: 25px 15px;
      }

      @media (max-width: 767px) {
        padding: 20px 15px;
      }
    }
  }
}

/**************
Table Types
**************/
/* Custom Rating Agency Table - table-type1 */
.table-type1 {
  font-family: var(--font-type1);
  /* Header Row Styling */
  thead {
    tr {
      th {
        background-color: #001421;
        color: var(--white);
        font-weight: 700;
        font-size: 20px;
        text-align: center;
        padding: 15px 8px;
        border: 1px solid #D9D9D924;
        vertical-align: middle;
        @media (max-width:1600px){
          font-size: 18px;
        }
        &:first-child {
          border-top-left-radius: 10px;
        }
        &:last-child {
          border-top-right-radius: 10px;
        }
      }
    }
  }
  
  /* Body Rows Styling */
  tbody {
    td {
      font-size: 20px;
      font-weight: 400;
      color: var(--text-default-color);
      text-align: center;
      vertical-align: middle;
      padding: 12px 8px;
      border: 1px solid #D9D9D9;      
      @media(max-width:1600px){
        font-size: 18px;
      }
    }
  }
  

}
  
  
/* RTL Support for table-type1 */
[dir="rtl"] {
  .table-type1 {
    thead th {
      text-align: center;
      &:first-child {
          border-top-left-radius: 0;
          border-top-right-radius: 10px;
        }
        &:last-child {
          border-top-right-radius: 0;
          border-top-left-radius: 10px;
        }
    }
  }
}