/*
Theme Name: Plus24 Office Base Theme
Author: Plus24

*/

body {
    background-color: #D9D9D9;
}
p {
   font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
       
        font-weight: 300;
        font-size: 18px;  
}

.tar {
    text-align: right;
}

    h1 {
          font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
        color: #FFFFFF;
        font-weight: 300;
        em {
            display: block;
        }
    }

h3 {
    font-size: 35px;
font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
   font-weight: 400;
  font-style: italic;
  padding-left: 50px;
  margin-bottom: 20px;
  position: relative;
  &::before {
    content: '';
    background-color: red;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0px;
    top: 25%;
    border-radius: 5px;
  }
}

h6 {
    font-size: 22px;
    font-weight: 300;
        font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  padding-bottom: 20px;
  .larger-h6 {
    font-size: 32px;
    
  }
}

.red-site {
    .wpcf7-submit  {
        background-color: #C05468;
        color: white !important;
    }
    h3 {
        &::before {
              background-color: #C05468;
        }
    }

    .slick-next, .slick-prev {
        background-color: #C05468;
        border-radius: 5px;

     }
     .image-box {
        border-top: 6px solid #C05468;
        border-radius: 10px;
     }
         .map-location-box {
            background-color: #C05468;
         }
         li {
            &::before {
                background-color: #C05468;
            }
         }
         .enquiry {
            border-color: #C05468 !important;
         }
         .footer-logos {
            ul {
                li {
                    a {
                        color: #C05468 !important;
                    }
                }
            }
         }
         .nav-bar .nav-btn{
       background-color: #C05468;
         }
}
.orange-site {
    .wpcf7-submit  {
        background-color: #D6865B;
        color: white !important;
    }
    h3 {
        &::before {
              background-color: #D6865B;
        }
    }

    .slick-next, .slick-prev {
        background-color: #D6865B;
        border-radius: 5px;

     }
     .image-box {
        border-top: 6px solid #D6865B;
        border-radius: 10px;
     }
         .map-location-box{
            background-color: #D6865B;
         }
         li {
            &::before {
                background-color: #D6865B;
            }
         }
         .enquiry {
            border-color: #D6865B !important;
         }
         .footer-logos {
            ul {
                li {
                    a {
                        color: #D6865B !important;
                    }
                }
            }
         }
         .nav-bar .nav-btn{
       background-color: #D6865B;
         }
}
em {
font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
 font-weight: 400;
  font-style: italic;
}

.nav-bar {
    position: absolute;
    width: 100%;
    padding-top: 15px;

    .nav-btn {
               display: inline-block;
                    width: auto;
                    color: #1c1c1c;
                      font-family: "Source Sans 3", sans-serif;
                        font-optical-sizing: auto;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 400;
                    padding-left: 25px;
                    padding-right: 25px;
                    text-decoration: none;
                    padding-top: 15px;
                    padding-bottom: 15px;
                    border-radius: 10px;
    }
  
}
.hero {
    background-color: #1C1C1C;
 background: linear-gradient(0deg,rgba(28, 28, 28, 0) 28%, rgba(28, 28, 28, 1) 28%);
    padding-top: 200px;
      p {
        color:#FFFFFF;
         em {
        font-size: 22px;
    }
    }

    .hero-slider {
        margin-top: 90px;
       border-radius: 10px;
    }
 
    .slick-next, .slick-prev {
       
      height: 50px;
      width: 50px;
      z-index: 10;

    }
    .slick-next {
        &::before{
        font-family: "Inter", sans-serif;
        content: '->';
           color: #1c1c1c;
        }

    }

     .slick-prev {
        &::before{
        font-family: "Inter", sans-serif;
        content: '<-';
          color: #1c1c1c;
        }

    }
    .slider-image {
        height: 600px;
        background-position: center;
        background-size: cover;
         border-radius: 10px;
    }
}

.middle-content {
        position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.content-block {
        margin-top: 80px;
    margin-bottom: 80px;
}

.slick-list {
    border-radius: 10px;
}
.image-box {
    background-size: cover;
    background-position: center;
    position: relative;
overflow: hidden;
.title-box {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 30px;
    width: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
    padding-top: 100px;
    h4 {
           font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    color: #FFFFFF;
    font-weight: 300;
        font-size: 18px;
    }
    h5 {
        color: white;
        font-family: "Source Serif 4", serif;
  font-optical-sizing: auto;
 font-weight: 400;
  font-style: italic;
  font-size: 25px;
    }
    .slick-list {
        width: 100%;
    }
    .slick-slider {
        width: 100%;
    }
   
}
}

.left-content .middle-content {
    padding-right: 30px;
}


.right-content .middle-content{
    padding-left: 30px;
}

.map-block {
    background: linear-gradient(180deg,rgba(28, 28, 28, 0) 56%, rgba(28, 28, 28, 1) 56%);
    position: relative;

    .map-location-box {
        position: relative;
        z-index: 10;
        border-radius: 10px;
        height: 100%;
        width: 500px;
        padding: 20px;
        top: 0;
        bottom: 0;
        left: 0;
        padding: 20px;
        color: white;

        h4 {
            font-size: 35px;
            font-family: "Source Serif 4", serif;
            font-optical-sizing: auto;
            font-weight: 400;
            font-style: italic;
        }
    }
}

@media (max-width: 768px) {
    .map-block {
        .map-location-box {
            width: 100%;
            height: auto;

            .middle-content {
                top: 0;
                transform: translateY(0);
            }
        }
    }
}

.cards-block {
    background-color: #1C1C1C;
    padding-top: 90px;
    padding-bottom: 90px;
    h4 {
        color: white;
           font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: 35px;
    }
}

.cards-block{
    .price-card {
    flex: 1;
      border-radius: 10px;
    border: 1px solid #5E5E5E;
    background: #3D3D3D;  
    padding: 15px;
    color: white;
    min-height: 600px;
    position: relative;
    max-width: 100%;
    display: block;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    
    &.no-list {
        min-height: 400px;
    }
    h4 {
        font-size: 22px;
        font-family: "Source Serif 4", serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: italic;
    }
    h5 {
        font-weight: 300;
           font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  margin-bottom: 20px;
    }
    ul {
        padding-left: 0px;
        li {
            list-style: none;
              font-weight: 300;
           font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px;
      &::before {
        content: '';
 
        width: 15px;
        height: 15px;
        position: absolute;
        left: 0px;
       top: 25%;
        border-radius: 2px;
    }
        }
    }
    .price-box {
        width: 100%;
        margin-top: auto;
        a {
            display: block;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
            border-radius: 10px;
            border: 1px solid #5E5E5E;
            width: 93%;
            background: #7B7B7B;
            color: white;
            text-decoration: none;
            padding-top: 15px;
            padding-bottom: 15px;
        }
    }
    }

    small {
        font-weight: 300;
        font-family: "Source Sans 3", sans-serif;
        font-optical-sizing: auto;
    }
}


.enquiry-box {
        background: linear-gradient(0deg, rgba(28, 28, 28, 0) 45%, rgba(28, 28, 28, 1) 45%);
   margin-bottom: 90px;
        .enquiry {
            background-color: white;
            border-top: 6px solid white;
            border-radius: 10px;
                 padding: 30px;
                 h4 {
                                font-weight: 300;
                    font-family: "Source Sans 3", sans-serif;
                    font-optical-sizing: auto;
                    margin-bottom: 20px;
                    font-size: 30px;
                 }
                 input {
                display: block;
                width: 100%;
                border: 1px solid #DAD9D3;
                padding: 15px;
                color: #1C1C1C;
                font-family: "Source Sans 3", sans-serif;
                font-optical-sizing: auto;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                border-radius: 5px;
                    &::placeholder {
                    color: #1C1C1C;
                    font-family: "Source Sans 3", sans-serif;
                    font-optical-sizing: auto;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    }
                 }
                 textarea {
                    display: block;
                    width: 100%;
                    border: 1px solid #DAD9D3;
                    padding: 15px;
                    height: 200px;
                    color: #1C1C1C;
                    font-family: "Source Sans 3", sans-serif;
                    font-optical-sizing: auto;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                      border-radius: 5px;
                        &::placeholder {
                        color: #1C1C1C;
                        font-family: "Source Sans 3", sans-serif;
                        font-optical-sizing: auto;
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        }
                 }
                 .wpcf7-submit {
                    display: inline-block;
                    width: auto;
                    color: #1c1c1c;
                      font-family: "Source Sans 3", sans-serif;
                        font-optical-sizing: auto;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 400;
                    padding-left: 25px;
                    padding-right: 25px;
                 }
                 .wpcf7-spinner {
                    display: none;
                 }
        }
}
.cards-block {
    .tabs {
    padding: 10px;
    border-radius: 10px;
    background: #3D3D3D;
    margin-top: 30px;
    button {
         border: none;
         color: white;
             padding: 15px 20px 15px 20px;
           border-radius: 10px;
        background-color: transparent;
        transition: all 300ms ease;
        &:hover {
              background: #000;
        }
        &.active-tab {
           background: #000;
       
        }
    }
    }
   
}
.footer-logos {
    padding-bottom: 50px;
    ul {
        
        padding-left: 0px;
        li {
            list-style: none;
            display: inline-block;
            margin-right: 10px;
            a{
                font-size: 30px;
            }
        }
    }
}
.table-block {
    background-color: #1C1C1C;
    padding-top: 30px;
    padding-bottom: 90px;
    table {
        width: 100%;
    }
    thead {
        color: white;
        border: none outline: none;
        border-bottom: 1px solid #5E5E5E;
        border-top: 1px solid #5E5E5E;
   
   th {
         padding-top: 10px;
        padding-bottom: 10px;
        font-weight: 400;
            font-family: "Source Sans 3", sans-serif;
                        font-optical-sizing: auto;
   }
    }
    tbody {
        tr {
                 border-bottom: 1px solid #5E5E5E;
            td {
                padding-top: 10px;
padding-bottom: 10px;
color: white;
    font-family: "Source Sans 3", sans-serif;
                        font-optical-sizing: auto;
                        font-weight: 300;
            }
            
        }
    }
}
.table-block h4 {
  font-family: "Source Sans 3", sans-serif;
                        font-optical-sizing: auto;
                        font-weight: 300;
                        color: white;
                        margin-bottom: 20px;
}


.slick-dots {
    position: absolute;
    bottom: -44px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: left;
    z-index: 10;
    padding-left: -7px;
    left: -10px;
}

.slick-dots li button:before {
    color: white !important;
        font-size: 13px;
}