/* colors */
:root{
    --primary : #5AB2FF;
    --secondary : #A0DEFF;
    --accent : #CAF4FF;
    --contrast : #FFF9D0;
    --neutral : #ffffff;
    --black : #161A30;
    --gray : #424a52;
    --main-font : "Ubuntu Sans", sans-serif;
    --alice-blue : #F0F8FF;
    --maria-blue : #E1EBEE;
    --footer-color : #10439F;
}

 /* Small devices (landscape phones, 576px and up) */
 body{
    position: relative;
    scroll-behavior: smooth;
    font-family: var(--main-font);
 }

 
    
    .desk-nav{
        display: none;
    }

    /* //.banner */
    
    .banner{
        width: 100%;
        padding: 30px 20px;
        background: var(--alice-blue)
    }

    .banner .banner-item-first h2{
        font-weight: 800;
        margin: 20px 0;
        font-size: 40px;
    }
    .banner .banner-item-first{
        margin-bottom: 20px;
    }
    .banner .banner-item-first p{
        font-weight: 400;
    }
    .banner .banner-item-first h1 span{
        color: var(--primary);
    }
    .banner .banner-item-first h1 span::after{
        width: 5px;

    }

    .banner .banner-item-first .banner-links a{
        text-decoration: none;
    }

    .banner .banner-item-first .banner-links .first-link{
        padding: 4px 15px;
        border: 2px solid var(--primary);
        border-radius: 5px;
        margin-right: 10px;
    }

    .banner .banner-item-first .banner-links .first-link:hover{
        color: var(--neutral);
        background: var(--primary);
    }

    .banner .banner-item-first .banner-links .last-link{
        padding: 4px 15px;
        background: var(--primary);
        border-radius: 5px;
        color: var(--neutral);
        border: 2px solid var(--primary);
    }

    .banner .banner-item-first .banner-links .last-link:hover{
        background: none;
        color: var(--black);
    }

    .banner .banner-item-second{
        position: relative;
    }


    .services-short{
        background: var(--maria-blue);
        padding: 10px 20px;
    }

    .services-short .service-item{
        width: 350px;
        padding: 20px 40px;
        background: var(--neutral);
        transition: .5s;
        margin-bottom: 10px;
    }

    .services-short .service-item:hover{
        background: var(--alice-blue);
    }

    .services-short .service-item{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .services-short .service-item h2{
        font-weight: 500;
    }

    .services-short .service-item a{
        text-decoration: none;
        padding: 4px 15px;
        background: var(--primary);
        border-radius: 5px;
        color: var(--neutral);
        border: 2px solid var(--primary);
    }


    
    /* commmodities */

    .services-short-commodities{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .services-short-commodities .service-item{
        background: var(--neutral);
        margin: 0 15px;
        width: 100%;
        margin: 5px;
    }

    .services-short-commodities .service-item h3{
        font-weight: 500;
        text-align: center;
        color: var(--primary);
        margin: 5px 0;
    }
    .services-short-commodities .service-item a {
        text-decoration: none;
        padding: 4px 15px;
        background: var(--primary);
        border-radius: 5px;
        color: var(--neutral);
        border: 2px solid var(--primary);
    }
    
    .services-short-commodities .service-item a:hover{
        color: var(--black);
        background: none;
        border: 2px solid var(--primary);

    }
    
    .services-short-commodities .service-item .item-image{
        width: 100%;
        height: 300px;
    }

    .services-short-commodities .service-item .item-image img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .section-offer{
        padding: 10px 20px;
    }
    .section-offer .section-header h2{
        font-weight: 600;
        text-align: center;
        margin-top: 20px;
    }

    .section-offer .services-offer-item{
        padding: 10px 5px;
        margin: 10px;
    }
    .section-offer .services-offer-item h3{
        text-align: left;
        font-weight: 600;
        font-size: 30px;
        color: var(--primary);
    }
    .section-offer .services-offer-item p{
        text-align: left;
        font-size: 20px;
    }

    .section-offer .services-offer-item .service-image{
        width: 100%;
    }

    .section-offer .services-offer-item .image-left{
        box-shadow: 10px 5px 5px var(--secondary);
        object-fit: cover;
        height: 100%;
        width: 100%;   
    }
    .section-offer .services-offer-item .service-image{
        width: 100%;
    }

    .section-offer .services-offer-item .image-right{
        box-shadow: -10px 5px 5px var(--secondary);
        object-fit: cover;
        height: 100%;
        width: 100%;
    }



    
    .testimonial{
        position: relative;
        padding: 25px 0;
    }

    .testimonial .testimonial-carousel{
        width: calc(100%);
    }

    .owl-carousel .item{
        padding: 20px;
    }


    .testimonial .testimonial-item{
        position: relative;
        margin: 0 0px;
        padding: 15px;
        background: var(--primary);
        overflow: hidden;
        border-radius: 10px;
    }
    
    .testimonial .testimonial-item h2{
        color: var(--acent-brown);
        font-size: 10px;
        font-weight: 600;
        margin-bottom: 5px;
        font-style: italic;
        font-family: var(--main-font-family);
    }

    .owl-carousel .testimonial-item p{
        font-size: 16px;
        color: var(--sub-text);
        color: var(--neutral);
    }

    .testimonial .testimonial-item .fa-quote-right{
        position: absolute;
        top: 0;
        right: 0;
        font-size: 30px;
        columns: #333333;
        transform: rotate(45deg);
        z-index: 1;
    }
    
    .about {
        background-color: var(--maria-blue);
        padding: 20px 10px;
    }
    .about .item-image{
        outline: 2px solid var(--primary);
        padding: 0;
        border-radius: 5px;
    } 

    .about .item-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .about .item h2{
        font-weight: 500;
    }

    
    .contact {
        background-color: var(--alice-blue);
        padding: 40px 0;
    }

    .contact .contact-item .contact-elems ul li{
        list-style-type: none;
        
    }

    .contact .contact-item .contact-elems ul li a{
        text-decoration: none;
    }

    .contact .contact-item .contact-elems ul li .fa-phone, .contact .contact-item .contact-elems ul li .fa-envelope{
        margin-right: 5px;
    }

    .contact .contact-item h2{
        font-weight: bold;
    }

    .contact form{
        padding: 10px;
    }

    .contact form input{
        height: 50px;
        border: 2px solid var(--primary);
    }

    .contact form button{
        background-color: var(--primary);
        border: 2px solid var(--primary);
        color: var(--neutral);
    }

    .contact form input, .contact form button{
        width: 100%;
        margin-bottom: 5px;

    }




    .footer{
        background-color: var(--footer-color);
        padding: 30px 0;
    }

    .footer .footer-item p, .footer .footer-item h2{
        color: var(--neutral);
    }

    .footer .footer-item ul li a{
        text-decoration: none;
        color: var(--neutral);
        transition: .5s;
    }
    .footer .footer-item ul li a:hover{
        color: var(--black);
    }
    


    
  


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .navbar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 120px;
        margin-top: 0;
        background: var(--neutral);
        padding: 0 40px;
    }

    .navbar .logo{
        width: 200px;
        height: 100%;
    }

    .navbar .logo img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .navbar .nav-links{
        width: 550px;
    }

    .navbar .nav-links ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        height: 100%;
    }

    .navbar .nav-links ul li{
        list-style-type: none;
    }

    .navbar .nav-links ul li a{
        text-decoration: none;
        color: var(--gray);
        text-transform: uppercase;
        padding: 0 5px;
        transition: .3s;
        text-align: center;
        display: inline-block;
        font-weight: bold;
        position: relative;
        font-family: var(--main-font);
    }

    .navbar .nav-links ul li a:hover{
        color: var(--primary);
    }


    .navbar .nav-links ul .last{
        padding: 5px 5px;
        border-radius: 5px;
        color: var(--neutral);
        transition: .5s;

    }

    .navbar .nav-links ul .last a{
        color: var(--neutral) !important;
    }

    .navbar .nav-links ul .last:hover{
        color: var(--neutral);
        background: var(--secondary) !important;
    }

    .navbar .mobile-menu{
        display: none;
    }

    .banner{
        width: 100%;
        padding: 40px 40px;
        background: var(--alice-blue);
    }

    .banner .banner-item-first h1{
        font-weight: 700;
        margin: 40px 0;
    }
    .banner .banner-item-first p{
        font-weight: 400;
    }
    .banner .banner-item-first h1 span{
        color: var(--primary);
    }
    .banner .banner-item-first h1 span::after{
        width: 5px;

    }

    .banner .banner-item-first .banner-links a{
        text-decoration: none;
    }

    .banner .banner-item-first .banner-links .first-link{
        padding: 4px 15px;
        border: 2px solid var(--primary);
        border-radius: 5px;
        margin-right: 10px;
    }

    .banner .banner-item-first .banner-links .first-link:hover{
        color: var(--neutral);
        background: var(--primary);
    }

    .banner .banner-item-first .banner-links .last-link{
        padding: 4px 15px;
        background: var(--primary);
        border-radius: 5px;
        color: var(--neutral);
        border: 2px solid var(--primary);
    }

    .banner .banner-item-first .banner-links .last-link:hover{
        background: none;
        color: var(--black);
    }

    .banner .banner-item-second{
        position: relative;
    }

    .carousel{
        rotate: 2deg;
        box-shadow: 10px 5px 5px var(--primary);
    }

    .services-short{
        background: var(--maria-blue);
        padding: 20px 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .services-short .service-item{
        width: 400px;
        padding: 20px 40px;
        background: var(--neutral);
        transition: .5s;
    }

    .services-short .service-item:hover{
        background: var(--alice-blue);
    }

    .services-short .service-item{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .services-short .service-item h2{
        font-weight: 500;
    }

    .services-short .service-item a{
        text-decoration: none;
        padding: 4px 15px;
        background: var(--primary);
        border-radius: 5px;
        color: var(--neutral);
        border: 2px solid var(--primary);
    }
    .services-short .service-item a:hover{
        color: var(--black);
        background: none;
        border: 2px solid var(--primary);
    }

    .section .section-header h2{
        font-weight: 600;
    }

    
    /* commmodities */

    .services-short-commodities{
        display: flex;
        justify-content: center;
    }

    .services-short-commodities .service-item{
        background: var(--neutral);
        margin: 0 15px;
        width: 100%;
    }

    .services-short-commodities .service-item h3{
        font-weight: 500;
        text-align: center;
        color: var(--primary);
        margin: 5px 0;
    }
    .services-short-commodities .service-item a {
        text-decoration: none;
        padding: 4px 15px;
        background: var(--primary);
        border-radius: 5px;
        color: var(--neutral);
        border: 2px solid var(--primary);
    }
    
    .services-short-commodities .service-item a:hover{
        color: var(--black);
        background: none;
        border: 2px solid var(--primary);

    }
    
    .services-short-commodities .service-item .item-image{
        width: 100%;
        height: 300px;
    }

    .services-short-commodities .service-item .item-image img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .testimonial{
        position: relative;
        padding: 25px 0;
    }

    .testimonial .testimonial-carousel{
        width: calc(100%);
    }

    .owl-carousel .item{
        padding: 20px;
    }




    .testimonial .testimonial-item{
        position: relative;
        margin: 0 0px;
        padding: 15px;
        background: var(--primary);
        overflow: hidden;
        border-radius: 10px;
    }
    
    .testimonial .testimonial-item h2{
        color: var(--acent-brown);
        font-size: 10px;
        font-weight: 600;
        margin-bottom: 5px;
        font-style: italic;
        font-family: var(--main-font-family);
    }

    .owl-carousel .testimonial-item p{
        font-size: 16px;
        color: var(--sub-text);
    }

    .testimonial .testimonial-item .fa-quote-right{
        position: absolute;
        top: 0;
        right: 0;
        font-size: 30px;
        columns: #333333;
        transform: rotate(45deg);
        z-index: 1;
    }

    
    .about {
        background-color: var(--maria-blue);
    }
    .about .item-image{
        width: 50%;
        outline: 2px solid var(--primary);
        padding: 0;
        border-radius: 5px;
    } 

    .about .item-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .about .item h2{
        font-weight: bolder
    }

    
    .contact {
        background-color: var(--alice-blue);
        padding: 40px 0;
    }

    .contact .contact-item .contact-elems ul li{
        list-style-type: none;
        
    }

    .contact .contact-item .contact-elems ul li a{
        text-decoration: none;
    }

    .contact .contact-item .contact-elems ul li .fa-phone, .contact .contact-item .contact-elems ul li .fa-envelope{
        margin-right: 5px;
    }

    .contact .contact-item h2{
        font-weight: bold;
    }

    .contact form{
        padding: 10px;
    }

    .contact form input{
        height: 50px;
        border: 2px solid var(--primary);
    }

    .contact form button{
        background-color: var(--primary);
        border: 2px solid var(--primary);
        color: var(--neutral);
    }

    .contact form input, .contact form button{
        width: 400px;
        margin-bottom: 5px;

    }




    .footer{
        background-color: var(--footer-color);
        padding: 30px 0;
    }

    .footer .footer-item p, .footer .footer-item h2{
        color: var(--neutral);
    }

    .footer .footer-item ul li a{
        text-decoration: none;
        color: var(--neutral);
        transition: .5s;
    }
    .footer .footer-item ul li a:hover{
        color: var(--black);
    }
    



}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .navbar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 120px;
        margin-top: 0;
        background: var(--neutral);
        padding: 0 40px;
    }

    .navbar .logo{
        width: 200px;
        height: 100%;
    }

    .navbar .logo img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .navbar .nav-links{
        width: 550px;
    }

    .navbar .nav-links ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        height: 100%;
    }

    .navbar .nav-links ul li{
        list-style-type: none;
    }

    .navbar .nav-links ul li a{
        text-decoration: none;
        color: var(--gray);
        text-transform: uppercase;
        padding: 0 5px;
        transition: .3s;
        text-align: center;
        display: inline-block;
        font-weight: bold;
        position: relative;
        font-family: var(--main-font);
    }

    .navbar .nav-links ul li a:hover{
        color: var(--primary);
    }


    .navbar .nav-links ul .last{
        padding: 5px 5px;
        border-radius: 5px;
        color: var(--neutral);
        transition: .5s;

    }

    .navbar .nav-links ul .last a{
        color: var(--neutral) !important;
    }

    .navbar .nav-links ul .last:hover{
        color: var(--neutral);
        background: var(--secondary) !important;
    }

    .navbar .mobile-menu{
        display: none;
    }

    .banner{
        width: 100%;
        padding: 40px 40px;
        background: var(--alice-blue);
    }

    .banner .banner-item-first h1{
        font-weight: 700;
        margin: 40px 0;
    }
    .banner .banner-item-first p{
        font-weight: 400;
    }
    .banner .banner-item-first h1 span{
        color: var(--primary);
    }
    .banner .banner-item-first h1 span::after{
        width: 5px;

    }

    .banner .banner-item-first .banner-links a{
        text-decoration: none;
    }

    .banner .banner-item-first .banner-links .first-link{
        padding: 4px 15px;
        border: 2px solid var(--primary);
        border-radius: 5px;
        margin-right: 10px;
    }

    .banner .banner-item-first .banner-links .first-link:hover{
        color: var(--neutral);
        background: var(--primary);
    }

    .banner .banner-item-first .banner-links .last-link{
        padding: 4px 15px;
        background: var(--primary);
        border-radius: 5px;
        color: var(--neutral);
        border: 2px solid var(--primary);
    }

    .banner .banner-item-first .banner-links .last-link:hover{
        background: none;
        color: var(--black);
    }

    .banner .banner-item-second{
        position: relative;
    }

    .carousel{
        rotate: 2deg;
        box-shadow: 10px 5px 5px var(--primary);
    }

    /* .services-short{
        background: var(--maria-blue);
        padding: 20px 30px;
        display: flex;
        justify-content: space-around;
        align-items: center; 
    } */

    .services-short .service-item{
        width: 400px;
        padding: 20px 40px;
        background: var(--neutral);
        transition: .5s;
    }

    .services-short .service-item:hover{
        background: var(--alice-blue);
    }

    .services-short .service-item{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .services-short .service-item h2{
        font-weight: 500;
    }

    .services-short .service-item a{
        text-decoration: none;
        padding: 4px 15px;
        background: var(--primary);
        border-radius: 5px;
        color: var(--neutral);
        border: 2px solid var(--primary);
    }
    .services-short .service-item a:hover{
        color: var(--black);
        background: none;
        border: 2px solid var(--primary);
    }

    /* .services-offer */

    .section-offer{
        padding: 10px 20px;
    }
    .section-offer .section-header h2{
        font-weight: 600;
        text-align: center;
        margin-top: 20px;
    }

    .section-offer .services-offer-item{
        padding: 10px 5px;
        margin: 10px;
    }
    .section-offer .services-offer-item h3{
        text-align: left;
        font-weight: 600;
        font-size: 30px;
        color: var(--primary);
    }
    .section-offer .services-offer-item p{
        text-align: left;
        font-size: 20px;
    }

    .section-offer .services-offer-item .image-left{
        box-shadow: 10px 5px 5px var(--secondary);
        width: 100%;
        height: 100%;
        object-fit: cover;        
    }  

    .section-offer .services-offer-item .image-right{
        box-shadow: -10px 5px 5px var(--secondary);
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .section-offer .services-offer-item .service-image{
        width: 100%;
    }

    /* commmodities */

    .services-short-commodities{
        display: flex;
        justify-content: center;
    }

    .services-short-commodities .service-item{
        background: var(--neutral);
        margin: 0 15px;
        width: 100%;
    }

    .services-short-commodities .service-item h3{
        font-weight: 500;
        text-align: center;
        color: var(--primary);
        margin: 5px 0;
    }
    .services-short-commodities .service-item a {
        text-decoration: none;
        padding: 4px 15px;
        background: var(--primary);
        border-radius: 5px;
        color: var(--neutral);
        border: 2px solid var(--primary);
    }
    
    .services-short-commodities .service-item a:hover{
        color: var(--black);
        background: none;
        border: 2px solid var(--primary);

    }
    
    .services-short-commodities .service-item .item-image{
        width: 100%;
        height: 300px;
    }

    .services-short-commodities .service-item .item-image img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    
    .testimonial{
        position: relative;
        padding: 45px 0;
    }

    .testimonial .testimonial-carousel{
        width: calc(100% + 30px);
    }

    .owl-carousel .item{
        padding: 20px;

    }


    .testimonial .testimonial-item{
        position: relative;
        margin: 0 15px;
        padding: 20px;
        background: var(--primary);
        overflow: hidden;
        border-radius: 5px;
    }
    
    .testimonial .testimonial-item h2{
        color: var(--acent-brown);
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 5px;
        font-style: italic;
    }

    .owl-carousel .testimonial-item p{
        font-size: 16px;
        color: var(--neutral);
    }

    .testimonial .testimonial-item .fa-quote-right{
        position: absolute;
        top: 0;
        right: 0;
        font-size: 60px;
        columns: #333333;
        transform: rotate(45deg);
        z-index: 1;
    }


    .about {
        background-color: var(--maria-blue);
    }
    .about .item-image{
        width: 50%;
        outline: 2px solid var(--primary);
        padding: 0;
        border-radius: 5px;
    } 

    .about .item-image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .about .item h2{
        font-weight: bolder
    }

    .contact {
        background-color: var(--alice-blue);
        padding: 40px 0;
    }

    .contact .contact-item .contact-elems ul li{
        list-style-type: none;
        
    }

    .contact .contact-item .contact-elems ul li a{
        text-decoration: none;
    }

    .contact .contact-item .contact-elems ul li .fa-phone, .contact .contact-item .contact-elems ul li .fa-envelope{
        margin-right: 5px;
    }

    .contact .contact-item h2{
        font-weight: bold;
    }

    .contact form{
        padding: 10px;
    }

    .contact form input{
        height: 50px;
        border: 2px solid var(--primary);
    }

    .contact form button{
        background-color: var(--primary);
        border: 2px solid var(--primary);
        color: var(--neutral);
    }

    .contact form input, .contact form button{
        width: 400px;
        margin-bottom: 5px;

    }

    .contact form textarea{
        width: 400px;
        height: 100px;
        margin-bottom: 5px;
        padding: 10px 0;
        border: 2px solid var(--primary);
    }

    .footer{
        background-color: var(--footer-color);
        padding: 30px 0;
    }

    .footer .footer-item p, .footer .footer-item h2{
        color: var(--neutral);
    }

    .footer .footer-item ul li a{
        text-decoration: none;
        color: var(--neutral);
        transition: .5s;
    }
    .footer .footer-item ul li a:hover{
        color: var(--black);
    }
    

    

    

}