/* ---------- responsive ---------- */

@media (max-width: 75rem) {
    /* ---------- text ---------- */
    h1 {
        font-size: 2.75rem;
    }

    /* ---------- tools ---------- */
    .padding {
        padding: 0 5rem;
    }
    .mobile-small-text {
        font-size: 0.75rem;
    }
    .float {
        padding: 0.5rem 0;
    }
    
    /* ---------- header ---------- */
    .header {
        height: 10vh;
    }
    .header .contact {
        display: none;
    }
    .header .navigation {
        height: 100%;
    }
    .header .navigation .brand {
        width: auto;
    }
    .header .navigation .links {
        position: absolute;
        top: 10vh;
        left: 0;
        flex-direction: column;
        background: var(--primary);
        box-shadow: inset 1px 6px 6px rgba(86, 86, 86, 0.5);
        overflow: hidden;
        height: 0;
        width: 100%;
        transition: 0.5s;
    }
    .header .navigation .links.active {
        display: flex;
        box-shadow: inset 1px 6px 6px rgba(86, 86, 86, 0.5);
        padding: 4rem 0;
        height: 40vh;
    }
    .header .navigation .links a {
        font-size: 1.25rem;
        color: white;
    }
    .header .navigation .links a:hover {
        color: white;
    }
    .header .navigation .toggle {
        display: flex;
    }

    /* ---------- hero ---------- */
    .hero {
        padding-top: 5rem;
        padding-bottom: 5rem;
        margin-top: 10vh;
        height: inherit;
    }
    .hero .title {
        text-align: center;
        height: inherit;
        width: 100%;
    }

    /* ---------- title-1 ---------- */
    .title-1 {
        flex-direction: column;
        align-items: center;
    }
    .title-1 .content {
        order: 1;
        gap: 2rem;
        text-align: center;
        width: 100%;
    }
    .title-1 .content .details {
        flex-direction: column;
    }
    .title-1 .content .details .item {
        width: 100%;
    }
    .title-1 .image {
        width: 100%;
    }
    
    .title-1 .image img {
        display: none;
    }

    /* ---------- title-2 ---------- */
    .title-2 .content {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    .title-2 .content .item {
        gap: 0.75rem;
    }

    /* ---------- accordian ---------- */
    
    .accordion {
        flex-direction: column;
        gap: 2rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
        height: inherit;
    }
    .accordion .image {
        height: 100%;
        width: 100%;
    }
    .accordion .content {
        padding-top: 0;
        padding-bottom: 0;
        width: 100%;
    }
    .accordion .content .content-box .active {
        height: 10rem !important;
    }

    /* ---------- carousel ---------- */
    .carousel {
        height: 50vh;
    }
    .carousel-tracker-container {
        margin: 0 auto;
        width: 75%;
    }
    .carousel-button i {
        font-size: 4rem;
    }
    .carousel-button-left {
        left: 2rem;
        z-index: 1;
    }
    .carousel-button-right {
        right: 2rem;
        z-index: 1;
    }
    .carousel-indicator {
        height: 1rem;
        width: 1rem;
    }

    /* ---------- apply ---------- */
    
    .apply .title {
        padding: 0.5rem 1rem;
    }
     
    .apply form {
        padding: 2rem 1rem;
    }
    .float p {
        text-align: left;
    }

    /* ---------- footer ---------- */
    .footer .contact {
        flex-direction: column;
        gap: 1rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
        height: inherit;
    }
    .footer .contact .brand {
        justify-content: center;
        width: 100%;
    }
    .footer .contact .brand img {
        width: 7.5%;
    }
    .footer .contact .content {
        align-items: center;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }
    .footer .tagger {
        flex-direction: column;
        gap: 2.5rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
        height: inherit;
    }
    .footer .tagger .title {
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .footer .tagger .links {
        flex-direction: column;
        gap: 2rem;
        width: 100%;
    }
    .footer .tagger .links .column {
        justify-content: center;
        align-items: center;
    }
}


@media (max-width: 50rem) {
    /* ---------- tools ---------- */
    .padding {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .mobile-small-text {
        font-size: 0.65rem;
    }
    
    /* ---------- header ---------- */
    .header .navigation .brand a {
        font-size: 1.5rem;
    }
    /* ---------- hero ---------- */
    .hero {
        padding: 5rem 0 ;
    }
    .hero .title p {
        display: none;
    }
}