@media screen and (max-width: 600px) {


    section {
        padding-left: 3rem;
        padding-right: 3rem;

    }

    .responsive-header-container {
        position: fixed;
        background-color: #fff;
        width: 100%;
    }
    
    .responsive-header {
        padding: 1rem 2rem;
    }

    .responsive-header .btn-header-container a {
        font-size: 1.4rem;
        padding: .7rem 2.2rem;
        float: right;

    }
    .responsive-logo {
        width: 100%;
        padding: 1rem 0;
        height: auto;
    } 

    .menu-icon {
        font-size: 3.2rem;
        padding: .5rem 1.5rem;
        margin-right: 0;
    }
    
    .menu-icon.hover {
    background-color: transparent;
    color: var(--btn-primary-bg);

}
    /* 
    Page: Homepage
     */

    /* Hero Section */

    .hero-section {
        padding: 12rem 3.5rem 6rem;
    }

    .hero-section h1 {
        margin-top: 2rem;
        line-height: 5rem;
    }

    .btn-hero {
        margin-top: 3rem;
    }

    /* Services Section */

    .services-section {
        padding: 4rem 3.5rem 3rem;
    }

    .services-section .section-img {
        width: 100%;
        height: auto;
        position: static;
        object-fit: contain;
        object-position: 0 0;
    }

    .services-section h2 {
        color: #fff;
        padding-right: 0 !important;
        padding-top: 3rem;
    }

    .service {
        margin-top: 3rem;
        padding-top: 3rem;
    }
    
    .service:last-child {
        margin-bottom: 3rem;
    }

    .service-1 {
        margin-top: 6rem;
    }

    .service-details {
        margin-top: 0rem;
        padding: 0 0 0;
        /* display: none; */
    }

    .service-details p {
        width: 100%;
        padding: 10% 0 0;
        text-indent: initial;
        text-align: justify;
    }

    .service-details img {
        width: 60%;
        margin-left: 20%;
        height: auto;
    }

    .service-heading span {
        padding-left: 2rem;
    }

    .service-heading h3+i {
        font-size: var(--h3-s-m);
    }
    
    .d-details {
        height: 200px;
    }

    .d-details-c {
        height: 260px;
    }

    /* key_Section1 */

    .key-section1 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .key-section1 h2 {
        padding: 0;
    }

    /* key_Section1-after */



    .key-section1-after img {
        width: 100%;
        bottom: -9px;
    }

    /* Key Section2 */

    .key-section2 {
        padding-top: 10rem;
        padding-bottom: 13rem;
    }

    .key-section2 div.nth-child::after {
        content: url('/images/transparent-pngs/cirlce-yellow.png');
        position: absolute;
        filter: brightness(.8);
        top: 20px;
        left: 71%;
        z-index: -1;
        transform: scale(.9)
    }

    .key-section2 div:last-child::after {
        content: url('/images/transparent-pngs/circle-black.png');
        transform: scale(.7);
        position: absolute;
        top: -5px;
        left: 15%;
        z-index: -1;

    }

    /* Subscription Section */
           

    .subscription-section p {
        padding: 2rem;
    }

    .subscription-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .subscription-section form input[type="email"] {
        padding: var(--btn-pd-m);
        border-radius: var(--btn-bdr);
        width: 80%;
        margin: auto;
        position: static;
        left: 10rem;
    }

    .subscription-section form button[type="submit"] {
        position: static;
        width: 80%;
        margin-top: 1rem;
        padding: 1.3rem 3rem;
        transition: var(--btn-hover-trst);
    }
    
    

    /* 
    Page: About Us
    */

    /* Hero Section */

    .about-section {
        padding-top: 20rem;
    }
    .about-section h1 {
        padding: 0 6rem 10rem;
        position: relative;
        z-index: 1;
    }

    .about-section h1::after {
        content: url('/images/transparent-pngs/cirlce-yellow.png');
        position: absolute;
        left: 3%;
        top: -30%;
        z-index: -1;
        transform: scale(.6);
    }

    .about-section img {
        width: 100%;
    }

    /* Key Section 1 About Us */

    .ks-abt {
        padding-bottom: 7rem !important;
    }

    .ks-abt h2 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 5rem !important;
    }

    /* Services Section 2 */

    .services-section2 {
        color: #fff;
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .services-section2 .services2{
        display: grid;
        grid-template-columns: 100%;
    
    }

    .services-section2 .services2 p{
        text-indent: 10%;
    }

    .services-section2 .services2 div{
        padding: 0rem;
        text-align: justify;
    
    }
    .services-section2 .services2 div:nth-child(even){
        padding-top: 3rem;
        padding-bottom: 3rem;
        padding-left: 0rem;

    
    }

    /* 
    Page: Products
    */

    /* Products Section */

    .product-section {
        padding-top: 20rem !important ;
    }

    .products-section {
        background-color: #1e1d1e;
        color: #fff;
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .product-section h1 {
        position: relative;
        z-index: 1;
    }

    .product-section h1::after {
        content: url('/images/transparent-pngs/cirlce-yellow.png');
        position: absolute;
        left: 2%;
        top: -30%;
        z-index: -1;
        transform: scale(.6);
    }

    .products-section div img {
        width: 100%;
        height: auto;
    }
    
    .product-detail {
        display: grid;
        grid-template-columns: 100%;
        padding-top: 7rem;
        margin-bottom: 3rem;

    }
    

    .products-section h3, .products-section p {
        margin: 2rem 0;

    }
    
    .products-section a {
        margin: .3rem 0;
    }

    .products-section h3 {
        margin-bottom: 2rem;
    }

    .products-section>div>div {
        margin-top: 2rem;
    }

    /* Footer */

    .footer-wrapper  {
        padding: 6rem 3.5rem;
    }

    .footer-wrapper img{
        height: auto;
        width: 35%;
    }

    .footer-wrapper .col-3:nth-child(2), .footer-wrapper .col-3:nth-child(3), .footer-wrapper .col-3:nth-child(4){
        padding-top: 2rem;
    }

    .footer-wrapper .col-3:nth-child(2), .footer-wrapper .col-3:nth-child(3){
        padding-left: 0;
        padding-bottom: 0;
    }



    .icon-wrapper {
        display: flex;
        justify-content: start;
        align-items: center;
    }
    .icon-wrapper>* {
        margin-left: 0;
        margin-right: 1rem;
    }
}