/*
* responsive.css
* Contains Responsive CSS for website named "Kharakia Metals"
*/

@media (max-width: 600px) {
    .home-primary-heading {
        font-weight: 950;
        font-size: 2.8rem;
        width: 90%;
        line-height: 3.7rem;
    }

    .home-secondary-heading {
        font-weight: 400;
        font-size: 2.1rem;
        font-weight: 500;
    }

    #home .dots-image {
        position: absolute;
        top: 125px;
        left: -100px;
    }

    .services {
        margin-top: 3rem;
    }

    .section-heading {
        font-size: 2.5rem;
    }

    .section-description {
        width: 100%;
        font-size: 1.5rem;
    }

    .offering {
        padding: 2rem;
    }

    .capabilities-img {
        height: 300px;
    }

    .service-heading h3 {
        font-size: 2.2rem;
    }

    .offering-heading h3 {
        font-size: 2.2rem;
    }

    .service-description p {
        font-size: 1.4rem;
    }

    .capabilities-text {
        margin-top: 40px;
    }

    #capabilities .dots-image {
        top: 275px;
        left: -100px;
    }

    .capabilities-text h3 {
        font-size: 2.8rem;
    }

    .footer-links {
        text-align: center;
        flex-direction: column;
    }

    .btn-back-to-top {
        padding: 0 15px;
    }

    .contact-details {
        margin-top: 50px;
    }

    .message-text {
        font-size: 17px;
        margin-bottom: 15px;
    }

    .social-details {
        text-align: unset;
    }

    .social-details li {
        display: flex;
    }

    .flex-reverse {
        flex-direction: column-reverse !important;
    }

    .about-section {
        flex-direction: column;
    }

    .about-text {
        padding: 0;
        margin-top: 15px;
    }

    .about-img-heading h3 {
        font-size: 3rem;
    }

    .about-img-description p {
        font-size: 1.2rem;
        margin-bottom: 30px;
    }

    .about-stat {
        margin-bottom: 30px;
    }

    footer img {
        width: 200px !important;
        margin: 35px auto;
    }

    .section-product-content {
        flex-direction: column;
    }
    
    .section-product-content .product-img {
        width: 70%;
    }

    .product-img {
        margin-top: 20px;
    }

    .contact-item {
        margin: 10px 0;
    }

    .contact-item i {
        font-size: 32px;
    }

    .contact-item h3 {
        font-size: 20px;
    }

    .contact-row {
        flex-direction: column;
    }

    .product {
        width: 335px;
    }

    .decking-sheets img {
        position: relative;
        top: -20%;
    }

    .binding-wires img {
        position: relative;
        top: -20%;
    }

    .plates-and-sheets img {
        position: relative;
        top: -10%;
    }

    .roofing-sheets img {
        position: relative;
        top: -10%;
    }

    .section-home-primary-heading {
        font-size: 3rem;
    }

    .about-stats-container {
        margin-bottom: 2rem;
    }

    .our-capabilities-card {
        height: 60rem;
    }

    .our-capabilities-card-title {
        top: 10%;
        width: 100%;
        height: 48%;
        justify-content: center;
    }

    .our-capabilities-card-details {
        top: 55%;
        width: 100%;
        height: 50%;
        left: 0;
        padding: 20px 20px 0px 20px;
    }

    .our-capabilities-card-img {
        top: 0;
        width: 94%;
        height: 40%;
        left: 3%;
    }

    .vision-mission-section {
        height: 75rem;
    }
    
    .vision-wrapper {
        top: 0;
        height: 31%;
        left: 2.5%;
        width: 95%;
        border: 1px solid var(--primary);
        border-bottom: none;
    }
    .vision-mission-img-wrapper {
        top: 31%;
        height: 38%;
        left: 0;
        width: 100%;
    }
    .mission-wrapper {
        top: 69%;
        height: 31%;
        left: 2.5%;
        width: 95%;
        text-align: left;
        border: 1px solid var(--primary);
        border-top: none;
    }

    .product-img.binding-wires {
        top: 2%;
    }

    .product-img.decking-sheets {
        top: 4%;
    }

    .product-img.tmt-bars {
        top: -15%;
    }

    .product-img.ms-angles {
        top: -17%;
    }

    .product-img.ms-beams {
        top: -14%;
        left: -8%;
    }

    .product-img.ms-channels {
        top: -11%;
        left: -9%;
    }

    .product-img.ms-pipes {
        top: -12%;
        left: -5%;
    }

    .product-img.ms-flats {
        top: -15%;
        left: -5%;
    }

    #services .dots-image {
        top: 1100px;
        opacity: 0.5;
        width: 120px;
        height: 120px;
    }

    .mb-50 {
        margin-bottom: 50px;
    }

    .t-and-c-heading {
        font-size: 3rem;
    }
}

@media (max-width: 330px) {
    .product {
        width: 300px;
        margin: 0 auto;
    }

    #products .product {
        margin: 0 20px;
    }

    .product .product-img-top {
        width: 160px !important;
        height: 160px !important;
    }

    .our-capabilities-card-title h2 {
        font-size: 2.6rem;
    }

    .vision-mission-section p {
        font-size: 12px;
    }

    .btn-back-to-top {
        font-size: 20px;
        padding: 0 12px;
    }
}

@media (min-width: 600px) and (max-width: 991px) {
    .offering {
        margin-top: 15px;
    }

    .wave-card-shape {
        width: 100%;
        left: 0;
    }

    .offering-text {
        width: 100%;
    }

    .wave-card-shape:nth-child(1) {
        left: 0;
    }

    footer img {
        width: 300px !important;
        margin: 50px auto;
    }

    .about-stats-container {
        margin-bottom: 2rem;
    }

    .commodities {
        right: -59%;
    }

    .experience {
        right: -53%;
    }

    .projects {
        right: -57%;
    }
}