@import url("./landscape.css");

@media (min-width: 100px) and (max-width: 202px) {
    body {
        background-color : rgb(133, 126, 126) !important;
    }

    header {
        overflow: visible !important;
    }

    header .navbar {
        display: flex;
        justify-content: space-between !important;
    }

    header .navbar .navbar_links .navbar_services_links {
        position: absolute;
        top: -500%;
        width: 100% !important;
        height: 200px !important;
        display: flex;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        background-color: #ffffff;
    }

    header .navbar .navbar_links .navbar_services_links .navbar_item {
        margin-bottom: 10px;

    }

    header .navbar .navbar_links .navbar_items .navbar_item.services {
        display: none;
    }
    header .navbar .navbar_links .navbar_services_links.active {
        top: 100%;
    }

    header .navbar .navbar_links .navbar_items .navbar_item#menu_dropdown_icon {
        display: flex;
    }

    header .navbar .navbar_logo {
        width: fit-content;
        padding-left: 0rem;

    }

    header .navbar .navbar_logo img{
        width: 80px;
    }
    
    main .search_engine .engine_logo .logo_animate img {
        height: 23%;

    }

    .modal_services .modal_content_services {
        width: 100%;

    }

    .modal_services .modal_content_services .content {
        width: 90%;

    }

    .modal_content_services .content .products .product .product_name a h4 {
        font-size: 7px !important;
    }
    
    header .navbar .navbar_links {
        width: 55%;
        overflow: hidden;

    }
    header .navbar .navbar_links .navbar_items {
        display: flex;
        justify-content: flex-end;

    }

    header .navbar .navbar_links .navbar_item.services_collapse {
        width: 30%;
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
    }

    .engine_logo h3 {
        font-size: 12px;
    }

    footer {
        display: none;
    }

    .products4 .standard_button{
        font-size: .6em;
        padding: 5px 10px;
    }
}

@media (min-width: 202px) and (max-width: 249px) {
    header {
        overflow: visible !important;
    }

    header .navbar {
        display: flex;
        justify-content: space-between !important;
    }

    header .navbar .navbar_links .navbar_services_links {
        position: absolute;
        top: -500%;
        width: 100% !important;
        height: 200px !important;
        display: flex;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        background-color: #ffffff;
    }

    header .navbar .navbar_links .navbar_services_links .navbar_item {
        margin-bottom: 10px;

    }

    header .navbar .navbar_links .navbar_items .navbar_item.services {
        display: none;
    }
    header .navbar .navbar_links .navbar_services_links.active {
        top: 100%;
    }

    header .navbar .navbar_links .navbar_items .navbar_item#menu_dropdown_icon {
        display: flex;
    }
    
    header .navbar .navbar_logo {
        width: fit-content;
        padding-left: 10px;
    }

    header .navbar .navbar_logo img{
        width: 80px;
    }
    
    main .search_engine .engine_logo .logo_animate img {
        height: 23%;
    }

    .modal_services .modal_content_services {
        width: 100%;
    }

    .modal_services .modal_content_services .content {
        width: 90%;
    }

    .modal_content_services .content .products .product .product_name a h4 {
        font-size: 7px !important;
    }
    
    header .navbar .navbar_links {
        width: 55%;
        overflow: hidden;

    }
    header .navbar .navbar_links .navbar_items {
        display: flex;
        justify-content: flex-end;

    }

    header .navbar .navbar_links .navbar_item.services_collapse {
        width: 30%;
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
    }

    .engine_logo h3 {
        font-size: 12px;
    }

    footer {
        display: none;
    }


    /* style pour le modal */
    .products4 .standard_button{
        font-size: .6em;
        padding: 5px 10px;
    }
}

@media (min-width: 249px) and (max-width: 318px) {
    header {
        overflow: visible !important;
    }

    header .navbar {
        display: flex;
        justify-content: space-between !important;
    }

    header .navbar .navbar_links .navbar_services_links {
        position: absolute;
        top: -500%;
        width: 100% !important;
        height: 200px !important;
        display: flex;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        background-color: #ffffff;
    }

    header .navbar .navbar_links .navbar_services_links .navbar_item {
        margin-bottom: 10px;

    }

    header .navbar .navbar_links .navbar_items .navbar_item.services {
        display: none;
    }

    header .navbar .navbar_links .navbar_services_links.active {
        top: 100%;
    }

    header .navbar .navbar_links .navbar_items .navbar_item#menu_dropdown_icon {
        display: flex;
    }

    header .navbar .navbar_logo {
        width: fit-content;
        padding-left: 10px;
    }

    header .navbar .navbar_logo img{
        width: 80px;
    }
    
    main .search_engine .engine_logo .logo_animate img {
        height: 33%;

    }

    header .navbar .navbar_links {
        width: 50%;
        overflow: hidden;
    }


    header .navbar .navbar_links .navbar_items {
        display: flex;
        justify-content: flex-end;
    }

    header .navbar .navbar_links .navbar_item.services_collapse {
        width: 30%;
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
    }

    .modal_services .modal_content_services {
        width: 100%;

    }

    .modal_services .modal_content_services .content {
        width: 90%;

    }

    .modal_content_services .content .products .product .product_name a h4 {
        font-size: 7px !important;
    }

    footer .footer-container {
        width: 100%;
        display: flex;
        flex-direction: column;

    }

    footer .footer-container .left-links-footer {
        width: 100%;
        display: flex;
        justify-content: center;

    }

    footer .footer-container .left-links-footer a {
        font-size: 10px;
        margin-left: 7px !important;
    }

    footer .footer-container .right-links-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    footer .footer-container .right-links-footer a {
        font-size: 9px;
        margin-right: 6px !important;
    }

    .products4 .standard_button{
        font-size: .6em !important;
        padding: 5px 10px !important;
    }
}

@media (min-width: 318px) and (max-width: 479px) {
    header {
        overflow: visible !important;
    }
    header .navbar .navbar_links .navbar_services_links {
        position: absolute;
        top: -500%;
        width: 100% !important;
        height: 200px !important;
        display: flex;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        background-color: #ffffff;
    }

    header .navbar .navbar_links .navbar_services_links .navbar_item {
        margin-bottom: 10px;

    }

    header .navbar .navbar_links .navbar_items .navbar_item.services {
        display: none;
    }
    header .navbar .navbar_links .navbar_services_links.active {
        top: 100%;
    }

    header .navbar .navbar_links .navbar_items .navbar_item#menu_dropdown_icon {
        display: flex;

    }
    
    header .navbar .navbar_logo {
        padding-left: 10px;
    }

    header .navbar .navbar_logo img{
        width: 110px;
        height: 60%;
        object-fit: contain;
    }

    main .search_engine .engine_logo .logo_animate img {
        height: 33%;

    }

    header .navbar .navbar_links {
        width: 67%;
        display: flex;
        justify-content: flex-end;
    }

    header .navbar .navbar_links .navbar_items {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
    }
    

    header .navbar .navbar_links .navbar_item.services_collapse {
        width: 15%;
        display: flex;
        justify-content: flex-end;
    }

    .modal_services .modal_content_services {
        width: 100%;

    }

    .modal_services .modal_content_services .content {
        /* width: 80%; */
        width: 250px;

    }

    .modal_content_services .content .products .product .product_name{
        & a{
            & h4{
                font-size: 10px !important;
            }
        }
    }


    footer .footer-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 0.5rem;
        padding-right: 0.5rem;

    }

    footer .footer-container .left-links-footer {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    footer .footer-container .left-links-footer a {
        font-size: 12px;
        margin-left: 7px !important;
    }

    footer .footer-container .right-links-footer {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    footer .footer-container .right-links-footer a {
        font-size: 10px;
        margin-right: 7px !important;
    }

    /* style pour le modal */
    .products4 .standard_button{
        font-size: .6em;
        padding: 5px 10px;
    }
}

@media (min-width: 479px) and (max-width: 575px) {
    header {
        overflow: visible !important;
    }
    header .navbar .navbar_links .navbar_services_links {
        position: absolute;
        top: -500%;
        width: 100% !important;
        height: 200px !important;
        display: flex;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        background-color: #ffffff;
    }

    header .navbar .navbar_links .navbar_services_links .navbar_item {
        margin-bottom: 10px;

    }

    header .navbar .navbar_links .navbar_items .navbar_item.services {
        display: none;
    }
    header .navbar .navbar_links .navbar_services_links.active {
        top: 100%;
    }

    header .navbar .navbar_links .navbar_items .navbar_item#menu_dropdown_icon {
        display: flex;

    }
    
    header .navbar .navbar_logo {
        padding-left: 10px;
    }

    header .navbar .navbar_logo img{
        width: 110px;
        height: 60%;
        object-fit: contain;
    }

    main .search_engine .engine_logo .logo_animate img {
        height: 33%;

    }

    header .navbar .navbar_links {
        width: 67%;
        display: flex;
        justify-content: flex-end;
    }

    header .navbar .navbar_links .navbar_items {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
    }
    

    header .navbar .navbar_links .navbar_item.services_collapse {
        width: 15%;
        display: flex;
        justify-content: flex-end;
    }

    .modal_services .modal_content_services {
        width: 100%;

    }

    .modal_services .modal_content_services .content {
        width: 250px;

    }

    .modal_content_services .content .products .product .product_name a h4{
        font-size: 11px !important;
    }

    main .search_engine .engine_logo .logo_animate img {
        height: 33%;

    }

    footer .footer-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 0rem;
        padding-right: 0.5rem;

    }

    footer .footer-container .left-links-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 1.7rem;
    }

    footer .footer-container .left-links-footer a {
        font-size: 11px;
    }

    footer .footer-container .right-links-footer {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 3rem;
    }

    footer .footer-container .right-links-footer a {
        font-size: 11px;
    }
}

@media (min-width: 575px) and (max-width: 767px) {

    header {
        overflow: visible !important;
    }
    header .navbar .navbar_links .navbar_services_links {
        position: absolute;
        top: -500%;
        width: 100% !important;
        height: 200px !important;
        display: flex;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        background-color: #ffffff;
    }

    header .navbar .navbar_links .navbar_services_links .navbar_item {
        margin-bottom: 10px;

    }

    header .navbar .navbar_links .navbar_items .navbar_item.services {
        display: none;
    }
    header .navbar .navbar_links .navbar_services_links.active {
        top: 100%;
    }

    header .navbar .navbar_links .navbar_items .navbar_item#menu_dropdown_icon {
        display: flex;

    }
    
    header .navbar .navbar_logo {
        padding-left: 10px;
    }

    header .navbar .navbar_logo img{
        width: 110px;
        height: 60%;
        object-fit: contain;
    }

    main .search_engine .engine_logo .logo_animate img {
        height: 33%;

    }

    header .navbar .navbar_links {
        width: 67%;
        display: flex;
        justify-content: flex-end;
    }

    header .navbar .navbar_links .navbar_items {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
    }
    

    header .navbar .navbar_links .navbar_item.services_collapse {
        width: 15%;
        display: flex;
        justify-content: flex-end;
    }

    .modal_services .modal_content_services {
        width: 100%;

    }

    .modal_services .modal_content_services .content {
        width: 250px !important;

    }

    .modal_content_services .content .products .product .product_name  a h4{
        font-size: 12px !important;
        padding-bottom: 1rem !important;
    }

    main .search_engine .engine_logo .logo_animate img {
        height: 33%;
    }

    footer .footer-container {
        width: 100%;
        padding-left: 5px;
        padding-right: 5px;
    }

    footer .footer-container .left-links-footer {
        width: 50%;
    }

    footer .footer-container .right-links-footer {
        width: 50%;
    }

    footer .footer-container .left-links-footer a {
        font-size: 10px;
    }

    footer .footer-container .right-links-footer a {
        font-size: 9px;
    }
}


@media (min-width: 767px) and (max-width: 992px){
    
    header {
        overflow: visible !important;
    }

    header .navbar {
        display: flex;
        justify-content: space-between !important;
    }

    header .navbar .navbar_links .navbar_services_links {
        position: absolute;
        top: -500%;
        width: 100% !important;
        height: 200px !important;
        display: flex;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        background-color: #ffffff;
    }

    header .navbar .navbar_links .navbar_services_links .navbar_item {
        margin-bottom: 10px;

    }

    header .navbar .navbar_links .navbar_items {
        width: 95%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
    
    }

    header .navbar .navbar_links .navbar_items .navbar_item.services {
        display: none;
    }
    header .navbar .navbar_links .navbar_services_links.active {
        top: 100%;
    }

    header .navbar .navbar_links .navbar_items .navbar_item#menu_dropdown_icon {
        display: flex;
    }
    
    header .navbar .navbar_logo {
        width: fit-content;
        padding-left: 10px;
    }

    header .navbar .navbar_logo img{
        width: 80px;
    }

    .modal_services .modal_content_services {
        width: 100%;
    }

    .modal_services .modal_content_services .content {
        width: 250px !important;

    }


    main .search_engine .engine_logo .logo_animate img {
        height: 33%;
    }

    .modal_services .modal_content_services {
        width: 100%;

    }

    .modal_services .modal_content_services .content {
        width: 70%;

    }

    .modal_content_services .content .products .product .product_name a h4 {
        font-size: 11px !important;
    }

    footer .footer-container {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    footer .footer-container .left-links-footer {
        width: 49%;
        display: flex;
        justify-content: center;
    }

    footer .footer-container .right-links-footer {
        width: 49%;
        justify-content: center;
    }

    footer .footer-container .left-links-footer a {
        font-size: 11px;
    }

    footer .footer-container .right-links-footer a {
        font-size: 11px;
    }
}

@media (min-width: 992px) and (max-width: 1400px) {
    header .navbar .navbar_logo {
        padding-left: 10px;
    }

    header .navbar .navbar_links .navbar_item.services_collapse {
        width: 9%;
    }

    .modal_services .modal_content_services {
        width: 100%;

    }

    .modal_services .modal_content_services .content {
        /* width: 35%; */
        width: 250px !important;

    }

    .modal_content_services .content .products .product .product_name a h4 {
        font-size: 9px !important;
    }

    .product_image img{
        width: 45% !important;
    }
    
    footer .footer-container {
        width: 90%;
    }

    main .search_engine .engine_logo .logo_animate img {
        height: 33%;

    }

    footer .footer-container .left-links-footer {
        width: 42%;
    }

    footer .footer-container .left-links-footer a {
        font-size: 14px;
    }

    footer .footer-container .right-links-footer {
        width: 42%;
    }

    footer .footer-container .right-links-footer a {
        font-size: 14px;
    }
}

@media (min-width: 1400px)  {
    header .navbar .navbar_logo {
        padding-left: 10px;
    }
}