/* for Desktop and big screens */
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
.items{
    border:0.2px solid black;
    border-radius: 8px;
    margin-top:50px;
    margin-left:5vw;
    transition: all 0.5s ease
}
.items:hover{
    transform: scale(1.06);
    transition: all 0.5s ease;
}
body{
    font-family: 'Quicksand', sans-serif !important;
}

button{
    background-color: #FF7A00 !important
}
button:hover{
    background-color: rgb(139, 70, 6);
    outline: none !important
}
hr{
    background-color:#FF7A00;
    width:25%;
    position: relative;
    left:37%;
}
.para{
    padding: 0 2vw !important
}
a{
    text-decoration: none;
    color: inherit
}
a:hover{
    color: black;
    text-decoration: none;
}
h4{
    font-size:1.6vw
}
.para1{
    padding:0 1vw 1.5vw 1vw !important
}

/* Small screen no side nav */

@media only screen and (max-width:767px){
    .side{
        display: none !important;
    }
    
}
@media only screen and (max-width:576px){
    .items{
        margin:20px 0 0 0;
        width:100%;
        padding:0 40px
    }
    .myflex{
        padding:0 10vw
    }
    .para{
        padding: 0 6vw !important
    }
    button{
        font-size: 5vw !important;
    }
    h4{
        font-size: 6vw; 
        font-weight:bold !important;
    }
    
}
/* for tablets */
@media only screen and (min-width:600px){
    @media screen and (max-width:1250px){
    .items{margin-left:4vw;
        padding:0 4vw;
    }
    .myflex{
        padding:0 2vw !important
    }
    h4{
        font-size: 2.2vw;
        font-weight: bold !important
    }
    .para{
        padding: 0 0.1vw !important;
    }
    .para1{
        padding:0  0.1vw 1.9vw 0.1vw !important
    }
  }
    
}