/*===================
        Globals
=====================*/
:root {
    --main-gradient: linear-gradient(to right, #ddb93b, #171509);
  --main-gradient-revers: linear-gradient(to left, #ddb93b, #171509);
  --main-gradient-10: linear-gradient(to right, #ddb93b55, #17150955);
  --b-gradient: linear-gradient(to bottom, #ddb93b, #171509);
  --t-gradient: linear-gradient(to top, #ddb93b, #171509);
  --main-radius: 20px;
  --large-radius: 50px;
  --main-shadow: 0px 10px 20px #0000001A;
  --text-muted: #6A6A6A;
}

html, body {
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: .3s;
}

ul li {
    list-style: none;
}

a {
    text-decoration: none;
}

button,
input,
textarea {
    outline: none;
    border: none;
}

body {
    font-family: "Cairo", serif;
    overflow-x: hidden;
}

.d-flex {
    display: flex !important;
}

.d-block {
    display: block !important;
}

.text-grad {
    background: var(--main-gradient);
    width: fit-content;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 32px;
    line-height: 48px;
}

.page-title {
    padding-top: 20px;
    padding-bottom: 50px;
    background-color: white;
    border-bottom-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    position: relative;
    z-index: 5;

    h1 {
        text-align: center;
        margin-inline: auto;
        font-size: 48px;
        text-transform: capitalize;
    }
}

.title-foot {
    margin-top: -50px;
    padding-block: 80px;
    border-bottom-left-radius: var(--large-radius);
    border-bottom-right-radius: var(--large-radius);
    background: var(--main-gradient);
}

.btn-grad {
    border-radius: 25px;
    background: var(--main-gradient);
    color: white;
    font-weight: 700;
    font-size: 20px;
    padding: 15px 50px;
    cursor: pointer;
    text-transform: capitalize;
    text-wrap: nowrap;
}

.langs-group {
    position: relative;

    .lang-btn {
        padding: 0px 10px;
        line-height: 35px;
        font-size: 20px;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        cursor: pointer;
        margin-inline-start: 20px;
    }

    .langs {
        margin-top: 5px;
        position: absolute;
        top: 100%;
        width: 100%;
        text-align: center;
        padding: 20px 5px;
        padding-bottom: 10px;
        background-color: white;
        border-radius: 5px;
        box-shadow: var(--main-shadow);
        display: none;

        a {
            display: block;
            color: black;
            margin-bottom: 10px;

        }

    }
}

.btn-outline {
    padding: 15px 50px;
    background-color: transparent;
    border: 1px solid white;
    border-radius: 25px;
    color: white;
    cursor: pointer;
    text-wrap: nowrap;

    &:hover {
        background-color: white;
        color: black;
    }
}

.ctm-dropdown {
    display: flex;
    .drop-menu {
    .drop-item a:hover {
    color: #ddb93b !important;
}
}
    .sub-menu {
    a:hover {
    color: #ddb93b !important;
}
}
}

.ctm-accordian {
    background-color: #fff;
    padding: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 15px;

    .accord-head {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
            font-weight: 700 !important;
        }

        .accord-btn {
            font-size: 16px;
            cursor: pointer;

            &.active {
                rotate: 90deg;
            }
        }
    }

    .accord-content {
        display: none;
        overflow: hidden;
        animation: fade 1s ease;
        margin-top: 20px;

        &.active {
            display: block;
        }
        a{
            color: black;
            &:hover {
            color: #ddb93b !important;
        }}
    }
}

/*=======================
          Keyframes
  =========================*/
@keyframes fade {
    from {
        opacity: .5;
    }

    to {
        opacity: 1;
    }
}

/*=======================
    styling header of page
  =========================*/
.header {
    position: relative;
    z-index: 100;
    margin-block: 20px;
    padding: 5px 25px !important;
    border-radius: var(--large-radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--main-gradient-10);
    box-shadow: var(--main-shadow);

    .logo {
        width: 90px;

        img {
            width: 100%;
        }
    }

    nav {
        
        ul {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            border-radius: var(--main-radius);
      

            li {
                .nav-link {
                    text-transform: uppercase;
                    color: black;

                    &:hover,
                    &.active {
                        color: #ddb93b !important;
                        font-weight: bold;
                    }
                }
            }
        }
    }

    .btns {
        display: flex;
        align-items: center;
        gap: 20px;

        .menu-btn {
            padding: 5px 10px;
            border-radius: 6px;
            background: var(--main-gradient);
            color: white;
            font-size: 20px;
            cursor: pointer;
        }
        .login-btn {
            font-size: 16px;
            padding-inline: 20px;
        }
    }
}

/*=======================
    styling footer of page
  =========================*/
.footer {
    background: var(--main-gradient-revers);
    color: white;
    padding: 60px;
    border-radius: var(--large-radius);
    margin-bottom: 30px;
    text-transform: capitalize;

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        padding-bottom: 25px;
        margin-bottom: 25px;

        h3 {
            font-size: 40px;
        }

        p {
            font-size: 16px;
        }
    }

    .bottom {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 30px;

        .left {
            width: 50%;

            .footer-logo {
                width: 200px;
                margin-bottom: 20px;

                img {
                    width: 100%;
                }
            }

            .input-group {
                margin-top: 10px;
                position: relative;

                input {
                    border-radius: 25px;
                    padding: 15px;
                    background-color: rgba(255, 255, 255, 0.2);
                    color: white;
                    width: 100%;

                    &::placeholder {
                        color: white;
                    }
                }

                .subscribe-btn {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 5px;
                    padding: 10px;
                    border-radius: 25px;
                    cursor: pointer;
                    width: 100px;
                    margin-right: auto;
                }
            }

            +div {
                width: 100%;
                display: flex;
                align-items: start;
                justify-content: space-evenly;
                gap: 40px;

                .middle,
                .right {
                    h4 {
                        font-size: 24px;
                        font-weight: 600;
                    }

                    ul {
                        margin-top: 20px;

                        a {
                            color: white;
                        }

                        li:not(:last-child) {
                            margin-bottom: 20px;

                        }
                    }
                }

                .middle {
                    a {
                        color: white;
                    }
                }

                .right {
                    justify-self: start;
                }
            }
        }

    }

    .copyrights {
        text-align: center;
        margin-top: 30px;

        b,
        a {
            color: black;
            font-weight: bold;
        }
    }
}

/*============== 
    TV Screens 
  ================*/
@media(min-width: 1441px) {
    .container {
        padding-inline: 70px;
    }

    /* styling header of page */
    header {
        nav {
            display: flex;
        }

        .menu-btn {
            display: none;
        }
    }
}

/*============== 
    Extra Large 
  ================*/
@media(max-width: 1440px) {
    .container {
        padding-inline: 50px;
    }

    /* styling header of page */
    header {
        nav {
            display: flex;
        }

        .menu-btn {
            display: none;
        }
    }
}

/*============== 
       Large 
  ================*/
@media(max-width: 1280px) {
    .container {
        padding-inline: 45px;
    }

    /* styling header of page */
    header {
        nav {
            display: flex;
        }

        .menu-btn {
            display: none;
        }
    }
}

/*============== 
       Medium 
  ================*/
@media(max-width: 1025px) {
    .container {
        padding-inline: 40px;
    }

    /* styling header of page */
    header {
        position: relative;

        .logo {
            width: 80px;
        }

        nav {
            display: none;
            position: absolute;
            top: 85px;
            right: 0px;
            background-color: white;
            width: 100%;
            border-radius: var(--main-radius);
            /*overflow: hidden;*/
            margin-top: 50px;
            ul {
                background: var(--main-gradient-10);
                width: 100%;
                padding: 30px 20px;
                flex-direction: column;
                align-items: start !important;
                gap: 20px;

                li {
                    a {
                        text-transform: uppercase;
                        color: black;
                    }
                }
            }

        }

        .login-btn {
            display: none;
        }

        .menu-btn {
            display: block;
        }
    }

    /* styling footer of page */
    footer {
        .footer {
            padding: 40px;

            .top {

                h3 {
                    font-size: 30px;
                }
            }

            .bottom {
                align-items: center;
                flex-direction: column;
                text-align: center;
                gap: 30px;

                .left {

                    .footer-logo {
                        margin-inline: auto;
                    }
                }

            }
        }
    }
}

/*============== 
      Tablet 
  ================*/
@media(max-width: 768px) {
    .container {
        padding-inline: 35px;
    }

    .page-title {
        h1 {
            font-size: 36px;
        }
    }

    /* styling header of page */
    header {
        position: relative;

        .logo {
            width: 80px;
        }

        nav {
            display: none;
            position: absolute;
            top: 85px;
            right: 0px;
            background-color: white;
            width: 100%;
            border-radius: var(--main-radius);
            /*overflow: hidden;*/

            ul {
                background: var(--main-gradient-10);
                width: 100%;
                padding: 30px 20px;
                flex-direction: column;
                align-items: start !important;
                gap: 20px;

                li {
                    a {
                        text-transform: uppercase;
                        color: black;
                    }
                }
            }

        }

        .login-btn {
            display: none;
        }

        .menu-btn {
            display: block;
        }
    }

    /* styling footer of page */
    footer {
        .footer {
            padding: 40px;

            .top {

                h3 {
                    font-size: 30px;
                }
            }

            .bottom {
                align-items: center;
                flex-direction: column;
                text-align: center;
                gap: 30px;

                .left {
                    width: 80%;

                    .footer-logo {
                        margin-inline: auto;
                    }
                }

            }
        }
    }
}

/*============== 
       Mobile 
  ================*/
@media(max-width: 576px) {

    /* styling Globals */
    .container {
        padding-inline: 20px;
    }

    .page-title {
        h1 {
            font-size: 28px;
        }
    }

    .title-foot {
        padding-block: 60px;
    }

    .text-grad {
        font-size: 24px;
        line-height: 48px;
    }

    .btn-grad {
        font-size: 16px;
        padding: 10px 40px;
    }

    .btn-outline {
        padding: 10px 40px;
    }

    /* styling header of page */
    header {
        position: relative;

        .logo {
            width: 80px !important;
        }

        nav {
            display: none;
            position: absolute;
            top: 85px;
            right: 0px;
            background-color: white;
            width: 100%;
            border-radius: var(--main-radius);
            /*overflow: hidden;*/
            margin-top: 20px;

            ul {
                background: var(--main-gradient-10);
                width: 100%;
                padding: 30px 20px;
                flex-direction: column;
                align-items: start !important;
                gap: 20px;

                li {
                    a {
                        text-transform: uppercase;
                        color: black;
                    }
                }
            }

        }
        
        .btns {
            gap: 10px !important;
        }

        .login-btn {
            display: none;
        }

        .menu-btn {
            display: block;
        }
    }

    /* styling footer of page */
    footer {
        padding: 0;

        .footer {
            padding: 25px;

            .top {
                flex-direction: column;
                text-align: center;

                h3 {
                    font-size: 22px;
                }

                button {
                    margin-top: 20px;
                }
            }

            .bottom {
                align-items: center;
                flex-direction: column;
                text-align: center;
                gap: 30px;

                .left {
                    width: 100%;

                    .footer-logo {
                        margin-inline: auto;
                    }

                    +div {
                        flex-direction: column;

                        .middle,
                        .right {
                            h4 {
                                font-size: 20px;
                            }

                            ul {
                                margin-top: 20px;

                                li:not(:last-child) {
                                    margin-bottom: 15px;
                                    font-size: 14px;
                                }
                            }
                        }
                    }
                }

            }
        }
    }
}

/*=======================
  styling header of page
=========================*/
.header {
    position: relative;
    z-index: 100;
    margin-block: 20px;
    padding: 15px 25px;
    border-radius: var(--large-radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--main-gradient-10);
    box-shadow: var(--main-shadow);
  
    .logo {
      width: 110px;
  
      img {
        width: 100%;
      }
    }
  
    nav {
      .links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
  
        li {
          .logo-link {
            width: 60px;
          }
  
          .nav-link {
            text-transform: uppercase;
            color: black;
            font-weight: 600;
            text-wrap: nowrap;
  
            &:hover,
            &.active {
              color: #0FA98A;
            }
          }
        }
  
        .ctm-dropdown {
                      cursor: pointer;

          /*overflow: hidden;*/
          position: relative;
          text-transform: uppercase;
          color: black;
          font-weight: 600;
  
          &:hover {
            overflow: visible;
  
            .drop-menu {
              display: flex;
            }
          }
  
          img {
            margin: 0 5px;
          }
  
          .drop-menu {
              
            position: absolute;
            z-index: 1000;
            top: 20px;
            right: 45px;
            padding:0px;
            display: none;
            justify-content: center;
            flex-direction: column;
            gap: 0px !important;
            width: fit-content;
  
            .drop-item {
                width:100%;
              display: flex;
              align-items: center;
              background-color: white;
              box-shadow: var(--main-shadow);
              padding: 8px;
              position: relative;
  
              &:not(:last-child) {
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                width:165px;
              }
  
              &:first-child:hover {
                .sub-menu {
                  display: block;
                }
              }
  
              &:nth-child(2):hover {
                .sub-menu {
                  display: block;
                }
              }
  
              &:nth-child(3):hover {
                .sub-menu {
                  display: block;
                }
              }
  
              &:nth-child(4):hover {
                .sub-menu {
                  display: block;
                }
              }
  
              &:last-child:hover {
                .sub-menu {
                  display: block;
                }
              }
  
              a {
                color: black;
  
                &:hover {
                  color: #0FA98A;
                }
              }
  
              span {
                width: 100px;
              }
  
              button {
                font-size: 16px;
                margin: 0px 15px;
                line-height: 30px;
              }
  
              .sub-menu {
                min-width: fit-content !important;
                display: none;
                position: absolute;
                top: 0;
                right: 100%;
                background-color: white;
                box-shadow: var(--main-shadow);
  
                a {
                  padding: 15px 8px;
                  color: black;
                  display: block;
                  width: 100%;
                  font-weight: 500;
                  text-wrap: nowrap;
  
                  &:hover {
                    color: #0FA98A;
                  }
  
                  &:not(:last-child) {
                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                    
                  }
                }
              }
            }
          }
        }
      }
    }
  
    .btns {
      display: flex;
      align-items: center;
      gap: 20px;
  
      .menu-btn {
        padding: 5px 10px;
        border-radius: 6px;
        background: var(--main-gradient);
        color: white;
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
  
  /*=======================
    styling footer of page
  =========================*/
  .footer {
    background: var(--main-gradient-revers);
    color: white;
    padding: 60px;
    border-radius: var(--large-radius);
    margin-bottom: 30px;
    text-transform: capitalize;
  
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      padding-bottom: 25px;
      margin-bottom: 25px;
  
      h3 {
        font-size: 40px;
        font-weight: 500;
        max-width: 450px;
      }
    }
  
    .bottom {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 30px;
  
      .left {
        width: 50%;
  
        .footer-logo {
          width: 200px;
          margin-bottom: 20px;
  
          img {
            width: 100%;
          }
        }
  
        .input-group {
          margin-top: 10px;
          position: relative;
  
          input {
            border-radius: 25px;
            padding: 15px;
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            width: 100%;
  
            &::placeholder {
              color: white;
            }
          }
  
          .subscribe-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 5px;
            padding: 10px;
            border-radius: 25px;
            cursor: pointer;
          }
        }
  
        + div {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          gap: 40px;
  
          .middle,
          .right {
            h4 {
              font-size: 24px;
              font-weight: 600;
            }
  
            ul {
              margin-top: 20px;
  
              a {
                color: white;
              }
  
              li:not(:last-child) {
                margin-bottom: 20px;
  
              }
            }
          }
  
          .middle {
            a {
              color: white;
            }
          }
  
          .right {
            justify-self: start;
          }
        }
      }
  
    }
  
    .copyrights {
      text-align: center;
      margin: 40px auto 0px;
      max-width: 200px;
  
      b,
      a {
        color: black;
        font-weight: bold;
      }
      small {
        display: block;
        margin-bottom: 8px;
      }
    }
  }