/* Template: Aria - Business HTML Landing Page Template
   Author: Inovatik
   Created: Jul 2019
   Description: Responsive CSS file
*/

/*****************************/
/*     21. Media Queries     */
/*****************************/    

/* Min-width width 768px */
@media (min-width: 768px) {
    
    /* General Styles */
    .p-heading {
        width: 85%;
        margin-right: auto;
        margin-left: auto;
    }
    /* end of general styles */

    /* Header */
    .header .header-content {
        padding-top: 13rem;
        padding-bottom: 7.5rem;
    }

    .header h1 {
        font: 700 3.5rem/4rem "Montserrat", sans-serif;
    }
    /* end of header */

    /* Details 1 */
    .accordion .accordion-container {
        max-width: 70%;
    }
    /* end of details 1 */

    /* Details 2 */
    .tabs .tabs-container {
        max-width: 70%;
    }

    .tabs #tab-2 .list-unstyled {
        display: inline-block;
        width: 45%;
        margin-top: 0;
    }
    
    .tabs #tab-2 .list-unstyled.first {
        margin-right: 2rem;
    }
    /* end of details 2 */

    /* Testimonials */
    .slider .swiper-button-prev {
        left: 1rem;
        width: 1.375rem;
        background-size: 1.375rem 2.125rem;
    }
    
    .slider .swiper-button-next {
        right: 1rem;
        width: 1.375rem;
        background-size: 1.375rem 2.125rem;
    }
    /* end of testimonials */

    /* Projects */
    .filter .element-item { 
        width: 25%; 
    }
    
    .filter .element-item .element-item-overlay { 
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .filter .element-item:hover .element-item-overlay {
        opacity: 1;
    }
    /* end of projects */

    /* About */
    .counter #counter {
        text-align: left;
    }

    .counter #counter .cell {
    }
    /* end of about */

    /* Contact */
    .form-2 .list-unstyled li {
        display: inline-block;
        margin-right: 1rem;
    }

    .form-2 .list-unstyled .address {
        display: block;
    }
    /* end of contact */

    /* Extra Pages */
    .ex-header {
        padding-top: 11rem;
        padding-bottom: 9rem;
    }

    .ex-basic-2 .form-container {
        margin-top: 0.5rem;
    }
    /* end of extra pages */
}
/* end of min-width width 768px */


/* Min-width width 992px */
@media (min-width: 992px) {
    
    /* General Styles */
    .p-heading {
        width: 65%;
    }
    /* end of general styles */

    /* Header */
    .header .header-content {
        padding-top: 14rem;
        padding-bottom: 15rem;
    }

    .header .text-container {
        margin-top: 6.5rem;
    }
    /* end of header */

    /* Intro */
    .basic-1 {
        padding-top: 6.875rem;
    }

    .basic-1 .text-container {
        margin-bottom: 0;
    }
    /* end of intro */

    /* Description */
    .cards-1 .card {
        display: inline-block;
        max-width: 17.5rem;
        text-align: left;
        vertical-align: top;
    }
    
    .cards-1 div.card:nth-child(3n+2) {
        margin-right: 2.5rem;
        margin-left: 2.5rem;
    }
    /* end of description */

    /* Services */
    .cards-2 .card {
        max-width: 18.25rem;
        display: inline-block;
        vertical-align: top;
    }

    .cards-2 .col-lg-12 div.card:nth-child(3n+2) {
        margin-right: 1.25rem;
        margin-left: 1.25rem;
    }
    /* end of services */

    /* Details 1 */
    .accordion {
        height: 34.625rem;
    }
    
    .accordion .area-1 {
        width: 50%;
        height: 100%;
        display: inline-block;
    }
    
    .accordion .area-2 {
        width: 50%;
        height: 100%;
        display: inline-block;
        vertical-align: top;
    }
    
    .accordion .accordion-container {
        max-width: 88%;
        margin-left: 2rem;
        padding-bottom: 0;
    }

    .accordion .accordion-title {
        width: 85%;
    }
    /* end of details 1 */

    /* Details 2 */
    .tabs {
        height: 36.125rem;
    }

    .tabs .area-1 {
        width: 50%;
        height: 100%;
        display: inline-block;
        vertical-align: top;
    }

    .tabs .area-2 {
        width: 50%;
        height: 100%;
        display: inline-block;
    }

    .tabs .tabs-container {
        max-width: 88%;
        margin-left: 2rem;
        padding-top: 6.75rem;
        padding-bottom: 0;
    }

    .tabs .nav-tabs {
        justify-content: flex-start;
    }
    /* end of details 2 */

    /* Call Me */
    .form-1 {
        padding-top: 7rem;    
    }

    .form-1 .text-container {
        margin-bottom: 0;
    }
    /* end of call me */

    /* Project Lightboxes */
    .lightbox-basic img {
        margin-bottom: 0;
    }
    
    .lightbox-basic h3 {
        margin-top: 0.375rem;
    }

    .lightbox-basic .btn-solid-reg,
    .lightbox-basic .btn-outline-reg {
        margin-bottom: 0;
    }
    /* end of project lightboxes */

    /* Team */
    .basic-2 .team-member {
        width: 12.75rem;
        max-width: 100%;
        margin-right: 0.75rem;
        margin-left: 0.75rem;
    }
    /* end of team */

    /* About */
    .counter .image-container {
        margin-bottom: 0;
    }
    /* end of about */

    /* Contact */
    .form-2 {
        padding-top: 6.875rem;
    }

    .form-2 .text-container {
        margin-bottom: 0;
    }
    /* end of contact */

    /* Extra Pages */
    .ex-header h1 {
        width: 80%;
        margin-right: auto;
        margin-left: auto;
    }

    .ex-basic-2 {
        padding-bottom: 5rem;
    }
    /* end of extra pages */
}
/* end of min-width width 992px */


/* Min-width width 1200px */
@media (min-width: 1200px) {
    
    /* General Styles */
    .p-heading {
        width: 55%;
    }
    /* end of general styles */

    /* Header */
    .header .header-content {
        padding-top: 14.75rem;
        padding-bottom: 17.5rem;
    }
    /* end of header */

    /* Intro */
    .basic-1 .text-container {
        margin-top: 1.875rem;
        margin-right: 3rem;
    }
    /* end of intro */

    /* Description */
    .cards-1 .card {
        max-width: 21rem;
    }

    .cards-1 div.card:nth-child(3n+2) {
        margin-right: 2.875rem;
        margin-left: 2.875rem;
    }
    /* end of description */

    /* Services */
    .cards-2 .card {
        max-width: 20.875rem;
    }

    .cards-2 .card-body {
        padding: 2.25rem 2.5rem 2.125rem 2.5rem;
    }

    .cards-2 .col-lg-12 div.card:nth-child(3n+2) {
        margin-right: 3rem;
        margin-left: 3rem;
    }
    /* end of services */

    /* Details 1 */
    .accordion .accordion-container {
        max-width: 28rem;
        margin-left: 5rem;
    }
    /* end of details 1 */

    /* Details 2 */
    .tabs .tabs-container {
        max-width: 28rem;
        margin-right: 5rem;
        margin-left: auto;
    }

    .tabs #tab-2 .media-wrapper.first {
        margin-right: 2rem;
    }
    /* end of details 2 */

    /* Call Me */
    .form-1 .text-container {
        margin-top: 1.375rem;
        margin-right: 1.75rem;
        margin-left: 3rem
    }

    .form-1 form {
        margin-left: 1.75rem;
        margin-right: 3rem
    }
    /* end of call me */

    /* Projects */
    .filter .element-item {
        width: 17.3125rem; /* to eliminate grid overflow problem on hard refresh */
        height: 16.875rem;
    }

    .filter .element-item .element-item-overlay span { 
        top: 45%;
    }
    /* end of projects */

    /* Team */
    .basic-2 .team-member {
        width: 14.375rem;
        margin-right: 1.375rem;
        margin-left: 1.375rem;
    }
    /* end of team */

    /* About */
    .counter {
        padding-bottom: 6.125rem;
    }

    .counter .image-container {
        margin-right: 1.5rem;
    }

    .counter .text-container {
        margin-top: 0.375rem;
        margin-right: 2.5rem;
        margin-left: 2rem;
    }
    /* end of about */
    
    /* Contact */
    .form-2 .text-container {
        margin-top: 0.875rem;
        margin-right: 1.5rem;
    }

    .form-2 form {
        margin-left: 1.5rem;
    }
    /* end of contact */

    /* Footer */
    .footer .text-container.about {
        margin-right: 5rem;
    }
    /* end of footer */

    /* Extra Pages */
    .ex-header h1 {
        width: 60%;
        margin-right: auto;
        margin-left: auto;
    }

    .ex-basic-2 .form-container {
        margin-left: 1.75rem;
    }
    /* end of extra pages */
}
/* end of min-width width 1200px */