/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width: 320px) {
    /* Custom styles for iPhone Retina can go here */
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width: 480px) {
    /* Custom styles for extra small phones can go here */
}

/* Small Devices, Tablets */
@media only screen and (min-width: 768px) {
    /* Make Navigation Toggle on Desktop Hover (use class: dropdown-hover) */
    .dropdown-hover:hover > .dropdown-menu {
        display: block;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width: 992px) {
    /* Custom styles for medium devices can go here */
}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
    /* Custom styles for large devices can go here */
}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width: 1200px) {
    /* Text Carousel */
    #text-carousel-intro-section .caption h1 {
        font-size: 50px;
    }

    /* Team */
    .team-item .team-triangle {
        width: 90px;
        height: 90px;
    }
    .team-triangle .content {
        width: 160px;
        height: 160px;
    }
    .team-hover i {
        margin-top: 50px;
    }
    .team-hover p {
        font-size: 14px;
    }
}

/* Medium Devices, Desktops */
@media only screen and (max-width: 992px) {
    /* Team */
    .team-item .team-triangle {
        width: 120px;
        height: 120px;
    }
    .team-triangle .content {
        width: 190px;
        height: 190px;
    }
    .team-hover i {
        margin-top: 57px;
    }

    #team-section .col-md-2:nth-child(7n+5),
    #team-section .col-md-2:nth-child(7n+1) {
        margin-left: 0 !important;
        clear: none !important;
    }
    
    #team-section .col-md-2 {
        float: left;
        margin-bottom: 80px;
        width: 33.3333%;
    }

    /* Prices */
    .price-box-featured .panel {
        box-shadow: none;
        transform: scale(1);
    }

    .prices .price-box-featured .panel-footer {
        box-shadow: none !important;
    }

    /* Parallax background */
    .parallax {
        background-attachment: scroll !important;
        background-position: center center !important;
        background-size: cover !important; /* Ensures the background covers the entire section */
    }

    /* Text carousel intro section caption */
    #text-carousel-intro-section .caption {
        top: 50% !important; /* Removes parallax on caption */
    }
    #text-carousel-intro-section .caption h1 {
        font-size: 34px;
    }
    #text-carousel-intro-section .caption h3 {
        font-size: 12px;
    }

    /* Error section caption */
    #error-section .caption h1 {
        font-size: 100px;
    }
    #error-section .caption h2 {
        font-size: 13px;
    }

    /* Facts (counter up) */
    .counter-up .fact-inner .counter {
        font-size: 42px;
    }
    .counter-up .fact-inner .fa-3x {
        font-size: 36px;
    }
}

/* Small Devices, Tablets (Max-width: 767px) */
@media only screen and (max-width: 767px) {
    /* Navbar */
    .navbar-default {
        background-color: #EDCD1F;
        height: auto;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        box-sizing: border-box;
    }

    /* Full-Width Logo */
    .navbar-brand {
        margin-left: 80px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60%; /* Full width */
        background-color: #EDCD1F; /* Yellow background */
        box-sizing: border-box;
    }

    .navbar-brand img {
        max-height: 100px; /* Ensure0px; /* Keep the logo height constrained */
        width: auto;
        max-width: 100%; /* Fit the logo within the header */
        object-fit: contain;
    }

    /* Hamburger Menu Below Header */
    .navbar-toggle {
        align-self: flex-end; /* Align the hamburger to the right */
        margin-left: 250px;
        border: none;
        color: #FFF;
        z-index: 2; /* Ensure it stays above the backdrop */
    }

    .navbar-toggle .icon-bar {
        background-color: #FFF;
    }

    /* Parallax background */
    .parallax {
        background-position: center center !important;
        background-size: cover !important; /* Ensures the background covers the entire section */
        background-attachment: scroll !important;
        height: 100vh; /* Ensure the background takes the full height of the viewport */
        position: relative;
        z-index: 1; /* Position behind the menu */
    }

    /* Collapse Menu */
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #111;
        padding: 20px;
        text-align: center;
        z-index: 3; /* Ensure it stays on top of everything */
    }

    /* Navbar Links */
    .navbar-nav {
        display: block;
        padding: 0;
    }

    .navbar-nav > li {
        margin: 15px 0;
    }

    .navbar-nav > li > a {
        color: #FFF;
        font-size: 18px;
        padding: 10px;
        text-decoration: none;
    }

    /* Page padding */
    .page {
        padding-top: 30px;
    }

    /* Adjust team section for mobile */
    #team-section .col-md-2 {
        width: 100%;
        margin-bottom: 80px;
    }

    /* Prices */
    .prices .price-box-featured .panel-footer {
        box-shadow: none !important;
    }

    /* Footer and Partners */
    #partners-section, footer {
        text-align: center;
    }

    /* Hiding unnecessary elements on small devices */
    .testimonial:before,
    .owl-prev,
    .owl-next {
        display: none !important;
    }

    /* Text Center Area */
    #cta-section, #about-section, #contact-section, #contact-section .contact .form-control {
        text-align: center;
    }

    /* Rotate Box */
    .rotate-box-1 .rotate-box-info {
        padding-left: 0;
        text-align: center;
    }

    .rotate-box-1 .rotate-box-icon {
        float: none;
        margin-right: 0;
        margin-bottom: 30px;
    }

    a.rotate-box-1 {
        text-align: center;
        margin-top: 0;
    }

    /* Prices */
    .prices .price-box-featured .panel-footer {
        box-shadow: none !important;
    }

    ul.contact-address {
        margin-bottom: 50px;
    }

    /* Partners & Footer */
    #partners-section, footer {
        text-align: center;
    }

    /* Hiding elements */
    .testimonial:before,
    .owl-prev,
    .owl-next {
        display: none !important;
    }
}

/* Extra Small Devices, Phones (Max-width: 480px) */
@media only screen and (max-width: 480px) {
    /* Team */
    #team-section .col-md-2 {
        width: 100%;
        margin-bottom: 50px;
    }

    /* Adjust navbar spacing for extra small devices */
    .navbar-toggle {
        margin-right: 15px;
    }

    .navbar-nav > li {
        margin: 10px 0;
    }

    .navbar-nav > li > a {
        font-size: 16px;
        padding: 8px;
    }
}

/* Custom iPhone Retina (Max-width: 320px) */
@media only screen and (max-width: 320px) {
    /* Adjust the padding for very small screens */
    .navbar-toggle {
        margin-right: 10px;
    }

    .navbar-nav > li > a {
        padding: 6px;
        font-size: 12px;
    }
}