*{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    font-family: "Poppins", sans-serif;
}header{
    background: var(--white-color);
    width: 100%;
    margin: 0;
    z-index: 5;
}
header .navigation{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}
.navigation{
    position: fixed;
    background: white;
    margin: 0px auto;
    padding: 0px 20px;
    width:100% ;
    z-index: 5;
}
/* .content{
    margin: 0px auto;
    padding: 0px 20px;
    max-width: var(--site-max-width);
} */
.navigation .menu{
    display: flex;
    justify-content: space-between;
}
.nav-icon{
    display: none;
}
.navigation-m .menu{
    display: none;
}
.navigation .menu .link{
    color: var(--dark-color);
    padding: 10px 18px;
    text-decoration: none;
}
.navigation .menu .link:hover{
    color: var(--dark-color);
    text-decoration: none;
    border-bottom: 4px solid var(--primary-color);
}
.navigation .logo .text{
    color: var(--dark-color);
    font-family: "Exo 2", sans-serif;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    align-content: center;
}
.images{
    width:20%;
}
.logo{
    display: flex;
    text-decoration: none;
}
.logo:hover{
    text-decoration: none;
}
.item{
    display: block;
}
.link{
    cursor: pointer;
}
.nav{
    list-style: none;
}
.drop-down{
    position: relative;
}
.dropdown-content{
    position: absolute;
    background: white;
    width: 250px;
    height: 0px;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
    transform: translate(-90px ,13px);  
    transition: 0.5s ease;
    z-index: 5;
}
.drop-down:hover .dropdown-content{
    position: absolute;
    background: white;
    width: 250px;
    height: 250px;
    box-shadow: 2px 2px 10px;
    overflow: visible;
    padding: 20px;
    transform: translate(-90px ,13px);
    z-index: 5;
}.dropdown-content ul li a{
    color: var(--dark-color);
    text-decoration: none;
    /* border-bottom: 1px solid var(--dark-color); */
}
.dropdown-content ul li{
    margin-bottom: 20px;
    border-bottom: 1px solid var(--dark-color);
    text-align: center;
}

.drop-down1{
    position: relative;
}
.dropdown-content1{
    position: absolute;
    background: white;
    width: 250px;
    height: 0px;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
    transform: translate(-188px ,-25px);
    transition: 0.5s ease;
    z-index: 2;
    margin-left: 421px;
}
.drop-down1:hover .dropdown-content1{
    position: absolute;
    background: white;
    width: 200px;
    height: 150px;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
    padding: 20px;
    transform: translate(-188px ,-25px);
    z-index: 2;
    margin-left: 421px;
}
.dropdown-content1 ul li a{
    color: var(--dark-color);
    text-decoration: none;
    /* border-bottom: 1px solid var(--dark-color); */
}
.dropdown-content1 ul li{
    margin-bottom: 20px;
    border-bottom: 1px solid var(--dark-color);
    text-align: center;
    list-style-type: none;
}
.drop-down2{
    position: relative;
}
.dropdown-content2{
    position: absolute;
    background: white;
    width: 200px;
    height: 0px;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
    transform: translate(-188px ,-25px);
    transition: 0.5s ease;
    z-index: 2;
    margin-left: 421px;
}
.drop-down2:hover .dropdown-content2{
    position: absolute;
    background: white;
    width: 200px;
    height: 140px;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
    padding: 20px;
    transform: translate(-188px ,-25px);
    z-index: 2;
    margin-left: 421px;
}
.dropdown-content2 ul li a{
    color: var(--dark-color);
    text-decoration: none;
    /* border-bottom: 1px solid var(--dark-color); */
}
.dropdown-content2 ul li{
    margin-bottom: 20px;
    border-bottom: 1px solid var(--dark-color);
    text-align: center;
    list-style-type: none;
}
.drop-down3{
    position: relative;
}
.dropdown-content3{
    position: absolute;
    background: white;
    width: 200px;
    height: 0px;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
    transform: translate(-188px ,-25px);
    transition: 0.5s ease;
    z-index: 2;
    margin-left: 421px;
}
.drop-down3:hover .dropdown-content3{
    position: absolute;
    background: white;
    width: 200px;
    height: 140px;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
    padding: 20px;
    transform: translate(-188px ,-25px);
    z-index: 2;
    margin-left: 421px;
}
.dropdown-content3 ul li a{
    color: var(--dark-color);
    text-decoration: none;
    /* border-bottom: 1px solid var(--dark-color); */
}
.dropdown-content3 ul li{
    margin-bottom: 20px;
    border-bottom: 1px solid var(--dark-color);
    text-align: center;
    list-style-type: none;
}

.drop-down4{
    position: relative;
}
.dropdown-content4{
    position: absolute;
    background: white;
    width: 200px;
    height: 0px;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
    transform: translate(-188px ,-25px);
    transition: 0.5s ease;
    z-index: 2;
    margin-left: 421px;
}
.drop-down4:hover .dropdown-content4{
    position: absolute;
    background: white;
    width: 200px;
    height: 215px;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
    padding: 20px;
    transform: translate(-188px ,-25px);
    z-index: 2;
    margin-left: 421px;
}
.dropdown-content4 ul li a{
    color: var(--dark-color);
    text-decoration: none;
    /* border-bottom: 1px solid var(--dark-color); */
}
.dropdown-content4 ul li{
    margin-bottom: 20px;
    border-bottom: 1px solid var(--dark-color);
    text-align: center;
    list-style-type: none;
}
.resources{
    position: absolute;
    background: white;
    width: 200px;
    height: 0px;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
    transform: translate(-50px ,13px);
    transition: 0.5s ease;
    z-index: 2;
}
.drop-down:hover .resources{
    position: absolute;
    background: white;
    width: 200px;
    height: 120px;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
    padding: 20px;
    transform: translate(-50px ,13px);
    z-index: 2;
}
.resources ul li a{
    color: var(--dark-color);
    text-decoration: none;
    /* border-bottom: 1px solid var(--dark-color); */
}
.resources ul li{
    margin-bottom: 20px;
    border-bottom: 1px solid var(--dark-color);
    text-align: center;
}
.main{
    width: 100%;
}
.back-image{
    position: relative;
    width: 100%;
}
.co-main h1{
    font-size:40px;
}
.co-main{
    width: 75%;
    position: absolute;
    clear: both;
    z-index: 1;
    top: 40%;
    left: 5%;
}
.button{
    margin-top: 5%;
}
.button a{
    background-color: rgb(88, 104, 121);
    border: 2px solid black;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    border-radius: 30px;
    padding:10px 20px;
    margin-top: 10px;
}
.button a:hover{
    color: white;
    text-decoration: none;
}
.block1{
    position: relative;
    width: 100%;
}
.specialize{
    background-color: lightgray;
    width: 100%;
    padding: 5px;
    text-align: center;
    margin:0;
}
.specialize h1{
    font-size: 50px;
}
.specialize h3{
    font-size: 20px;
}
.strategy{
    width: 100%;
    background-color: #ddd;
    height: 350px;
}
.strategy div{
    background-color: white;
    box-shadow: 2px 2px 10px ;
    width: 45%;
    padding:20px;
    margin: 30px;
    border-radius: 50px;
    float: left;
}
.introduction{
    width: 100%;
    color: black;
    height: 600px;
    background-color: rgb(150, 135, 135);
}
.introduction h1{
    padding: 15px;
    background-color: blue;
    color: white;
    font-weight: bold;
}
.introduction div{
    width: 50%;
    float: left;
    padding: 15px;
    font-size: 18px;
}
.introduction div ul{
    padding-left: 15px;
}
.introduction div img{
    width: 100%;
}
#card-image{
    background-color: rgb(2, 2, 184);
    padding: 50px 0px 50px 50px;
    box-shadow: 2px 2px 10px ;
}
.staff{
    background-color: blue;
    width: 100%;
}
.staff h1{
    padding: 15px;
    color: white;
    font-weight: bold;
}
.about{
    width: 100%;
}
.about img{
    width: 100%;
}
.staff-p{
    text-align: justify;
    width: 100%;
    padding: 50px;
    font-size: 20px;
    background-image: linear-gradient(to top right, grey ,white);
}
.divison{
    width: 100%;
    display: flex;
    padding: 40px;
    background-color: rgb(215, 233, 239);
    justify-content: space-between;
}
.sub-div{
    width: 33%;
    height:auto;
    background-color: white;
    position: relative;
    padding: 2px;
}
.sub-div>img{
    width: 100%;
    float: left;
    aspect-ratio: 4/3;
}
.sub-text{
    text-align: center;
}
.our-products h1{
    background-color: blue;
    padding:10px;
    color: white;
    font-weight: bolder;
}
.block2{
    width: 100%;
    position: relative;
}
.our-history{
    width: 100%;
    position: relative;
    padding: 0px;
    background-color: lightgray;
}
#history-id{
    background-color: blue;
    font-weight: bolder;
    padding: 10px;
}
.history-image{
    width: 100%;
}
.history-image img{
    width: 100%;
}
.history-back{
    display: none;
}
.history-div{
    display: flex;
    position: absolute;
    width: 100%;
    bottom: 10px;
}
.history-div div{
    width: 33%;
    border-radius: 20px;
    padding: 10px;
    background-color: gray;
    box-shadow: 2px 2px 10px blue;
    border: 2px solid rgb(66, 66, 197);
    text-align: center;
    margin: 5px;
    font-size: 19px;
}
.our-facilities{
    background-color: gray;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.our-facilities div{
    background-color: rgb(126, 142, 142);
    width: 50%;
    padding: 15px;
    float: left;
}
.our-facilities div h1{
    color: blue;
    font-weight: bolder;
}
.our-facilities div img{
    width: 100%;
}
.our-facilities div p{
    font-size: 19px;
    padding: 10px;
}
#facilities-id{
    width: 50%;
}
#facilities-id ul{
    margin-top: 160px;
    font-size: 20px;
}
span{
    font-weight: bold;
} 
.ceo{
    background-color: lightgreen;
    width: 100%;
    position: relative;
    clear: both;
}
.ceo h1{
    padding: 15px;
    text-align: center;
    color: white;
    background-color: blue;
    font-weight: bold;
    margin-top: 20px;
}
.director{
    width: 100%;
    padding: 20px;
    clear: both;
}
.director img{
    width: 100%;
}
.sub-main{
    width:100%;
    position: relative;
}
.our-customer{
    width: 100%;
    background-color: red;
    position: relative;
}
.our-customer img{
    width:100%;
}
/* small-guard */

.s-guard{
    background: white;
    padding: 40px 40px 0px 40px;
    clear: both;
}
.s-guard h1{
    margin-bottom: 50px;
}
.s-guard-1{
    background-image: linear-gradient(to top right, grey ,white);   
    border: 2px solid rgb(6, 6, 72);
    padding: 40px;
    display: flex;
    justify-content: space-between;
}
.list{
    width: 45%;
}
.list-full{
    width: 100%;
}
.list-1{
    margin-top: 20px;
}
.list .list-1 .p{
    color: rgb(11, 11, 77);
    font-weight: bold;
}
.list .list-1 p{
    color:  #212A31;
    font-weight: bold;
}
.full{
    width: 100%;
    margin-top: 20px;
}

/* contact */

.contact-main{
    clear: both;
    width: 100%;
    position: relative;
}
.contact-main>img{
    width:100%;
    height: 550px;
}
.contact-comain{
    background-color: #006A71;
    color: white;
    text-align: center;
    clear: both;
    width: 100%;
    padding:20px;
}
.contact-us{
    background-color: lightgray;
    padding: 40px;
}
.h1-style{
    color: #006A71;
    font-size: var(--font-size-xxl);
    font-weight: bold;
}
.contact>h1{
    font-size: 45px;
}
.contact>p{
    font-size: 20px;
    padding-top: 20px;
}
.contact-divison{
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 40px;
    background-color: #C5C6C5;
}
.contact-section1{
    width: 48%;
    align-content: center;
    text-align: center;
}
.contact-sub1{
    background-color: var(--white-color);
}
.contact-sub1>i{
    font-size: 50px;
    border: 3px solid;
    padding: 10px 20px;
    border-radius:100px;
    color: orangered;
    border-style: dotted;
}
.sub-1-1{
    display: flex;
    justify-content: center;
    gap: 20px;
}
.contact-sub2{
    background-color: white;
    margin-top: 20px;
    width: 48%;
    height: 150px;
}
.contact-section2{
    width: 50%;
    padding: 40px;
}
.contact-section2>h1{
    color: orangered;
    font-weight: normal;
}
.contact-section2>form>input{
    width: 45%;
    height: 50px;
    border-radius: 4px;
    border: none;
    margin: 5px;
}
#subject{
    width:92.9%;
}
#text{
    margin-left:5px;
    width: 92.9%;
    border-radius: 4px;
}
.map>iframe{
    width:100%;
}
/* case-studies */
.content{
    padding: 40px;
}
.content-1{
    margin-top: 40px;
}
.study{
    padding-top: 40px;
}
.study-1{
    width: 40%;
    box-shadow: 1px 1px 10px;
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}
.study-1 >img{
    width: 100%;
}
.study-2 .m-top{
    margin-top: 20px;
}
.button{
    margin-top: 40px;
}
.button a{
    color: darkblue;
    background-color: #C5C6C5;
    text-decoration: none;
    border: 3px solid black ;
    border-radius: 30px;
    padding: 5px 10px;
}
.button a:hover{
    color: black;
    
}
.case{
    padding-top: 50px;
}
.case img{
    width: 100%;
}
.gallery-main{
    position: relative;
}
.nav2{
    margin-top: 40px;
}

.img_show{
    float: left;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    flex-wrap: wrap;
}
.img_show div{
    width: 24%;
}
.img_show div img{
    width: 100%;
    aspect-ratio: 5/4;
    border-radius: 10px;
}
.img_show div img:hover{
    width: 110%;
    transform: translate(-16px ,-10px);
}
.nav2 a{
    background: gray;
    color: var(--dark-color);
    width: 250px;
    float: left;
    text-decoration: none;
    text-align: center;
    padding: 10px 20px;
    margin-right: 20px;
    margin-top: 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.5s ease;
}
.nav2 a:hover{
    background: orangered;
    text-decoration: none;
}
#active{
    background: orangered;
}
#aatomize-footer{
    margin-top: 10px;
}
footer{
    background-image: url(https://www.mivenmayfran.com/assets/images/footer_image/footer-bg-img.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    font-weight: lighter;
}
.footer{
    display: flex;
    justify-content: space-evenly;
}
.footer-content{
    width: 25%;
    border-right: 1px solid;
    padding: 0 10px;
}
.footer-content>i{
    font-size: 25px;
}
.footer-content>ul{
    list-style-type: none;
}
.footer-content>p{
    font-size: 20px;
    color: white;
}
.footer-content>p>i{
    font-size: 30px;
    padding: 0 10px;
}
#blue{
    background-color: blue;
    color: white;
    padding: 10px 15px;
    margin: 10px;
    border-radius: 3px;
}
#aqua{
    color:white;
    background-color: rgb(11, 24, 168);
    padding: 10px;
    margin: 10px;
    border-radius: 3px;
}
#red{
    color:white;
    padding: 10px;
    background-color: red;
    margin: 10px;
    border-radius: 3px;
}
.footer-content>ul>li>a{
    font-size: 20px;
    color:white;
    text-decoration: none;
}
.footer-content>ul>li{
    padding: 15px;
    font-size: 20px;
    color:white;
}
.footer-content>h1{
    color: red;
    font-family: "Exo 2", sans-serif;
}


/* mobile */
@media (min-width:320px) and (max-width:480px){
    .navigation .menu{
        display: none;
    }
    .nav-icon{
        display: block;
        cursor: pointer;
    }
    .nav-icon i{
        font-size: 20px;
    }
    .navigation-m .menu{
        display: block;
        position: fixed;
        overflow: hidden;
        background: lightblue;
        width: 0px;
        height: 100%;
        transition: 1s ease;
        z-index: 5;
    }
    .navigation-m .menu .cross{
        text-align: right;
    }
    .navigation-m .menu .cross i{
        font-size: 30px;
        cursor: pointer;
    }
    .navigation-m .menu .item{
        color: var(--dark-color);
        padding: 10px 18px;
        text-decoration: none;
        text-align: center;
    }
    .navigation-m .menu .item:hover{
        color: var(--dark-color);
        text-decoration: none;
        border-bottom: 4px solid var(--primary-color);
    }
    .navigation-m .menu .link{
        color: var(--dark-color);
        padding: 10px 18px;
        text-decoration: none;
    }
    .navigation-m .logo .text{
        color: var(--dark-color);
        font-family: "Exo 2", sans-serif;
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
        align-content: center;
    }
     .table {
      width: 0%;
      border-collapse: collapse;
      background-color: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    th, td {
      padding: 1px 1px;
      text-align: left;
      border: 1px solid #ddd;
    }

    th {
      color: #ffffff;
      text-transform: uppercase;
      font-size: 14px;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    .button{
        margin-bottom: 5%;
    }
    .product-m{
        width: 100%;
        display: none;
        cursor: pointer;
    }
    .product-m .nav li{
        border-bottom: 1px solid;
    }
    .product-m .nav li a{
        color: var(--dark-color);
        text-decoration: none;
        font-size: var(--font-size-s);
    }
    .resources-m{
        width: 100%;
        display: none;
    }
    .resources-m .nav li{
        border-bottom: 1px solid;
    }
    .resources-m .nav li a{
        color: var(--dark-color);
        text-decoration: none;
        font-size: var(--font-size-s);
    }
    .media_js-m{
        width: 100%;
        display: none;
        cursor: pointer;
    }
    .head-name{
        width: 100%;
        font-size: 20px;
        justify-content: center;
        text-align: center;
        color: white;
        animation-name: slide;
        position: absolute;
        animation-duration: 3s;
        top: 67px;
    }
    @keyframes slide {
        0%{top: 0px;}
        50%{top:67px;}
    }
    #container{
        width: 107%;
        position: relative;
        transform: translate(-15px, 0px);
    }
    .block1{
        padding: 20px 20px 0px 20px;
        width: 100%;
    }
    .about-us{
        background-color: var(--light-color);
        padding:40px;
        clear: both;
    }   
    .about-us .summary>p{
        width:100%;
    }
    .summary>img{
        width: 100%;
    }
    .about-us .summary{
        display: block;
    }
    .our-products{
        background-color: var(--light-blue-color);
        width: 100%;
        position: relative;
    }
    .divison{
        width: 100%;
        display: block;
        padding: 0px 0px;
        background-color: var(--secondary-color);
        justify-content: space-between;
    }
    .sub-div{
        width: 100%;
        height:auto;
        position: relative;
        background-color: white;
    }
    .sub-div>img{
        width: 100%;
        float: left;
        aspect-ratio: 4/3;
    }
    .back-image{
        height: 350px;
    }
    .co-main{
        color:white ;
        border: 5px solid red;
        text-align: center;
        padding: 5px;
        top: 18%;
        left: 10%;
    }
    .co-main>h1{
        font-size: 21px;
    }
    .co-main>h1{
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: black;
    }
    .strategy{
        height: 750px;
    }
    .strategy div{
        width: 100%;
        padding:20px;
        height: 350px;
        margin: 0px;
        margin-top: 5%;
    }
    .introduction{
        height: 900px;
    }
    .introduction div{
        width: 100%;
    }
    .introduction div ul{
        padding-left: 15px;
    }
    #card-image{
        background-color: rgb(2, 2, 184);
        padding: 50px 0px 50px 50px;
        box-shadow: 2px 2px 10px ;
    }
    .history-div{
        display: block;
    }
    .history-div div{
        width: 100%;
        padding: 10px;
        margin: 0px;
        margin-top: 10px;
        font-size: 12px;
    }
    .history-image{
        display: none;
    }
    .history-back{
        background: white;
        display: block;
        height: 500px;
    }
    .our-facilities{
        display: block;
    }
    .our-facilities div{
        width: 100%;
    }
    #facilities-id{
        width: 100%;
    }
    #facilities-id ul{
        margin-top: 0px;
        padding: 20px;
    }
    .s-guard{
        background: white;
        padding: 200px 40px 0px 40px;
        clear: both;
    }
    .s-guard-1{
        padding: 40px;
        display: block;
    }
    .list{
        width: 100%;
    }
    .list-1{
        margin-top: 20px;
    }
    .contact-divison{
        display: block;
    }
    .contact-section1{
        width: 100%;
    }
    .sub-1-1{
        display: block;
    }
    .contact-sub2{
        width: 100%;
    }
    .contact-section2{
        width: 100%;
    }
    .contact-section2>h1{
        color: orangered;
        font-weight: normal;
    }
    .contact-section2>form>input{
        width: 45%;
        height: 50px;
        border-radius: 4px;
        border: none;
        margin: 5px;
    }
    footer{
        background-image: url(https://www.mivenmayfran.com/assets/images/footer_image/footer-bg-img.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        font-weight: lighter;
    }                                                               
    .footer{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .footer-content{
        width: 50%;
        border-right: 1px solid;
        padding: 0 0 0 10px;
    }
    .footer-content>i{
        font-size: 18px;
    }
    .footer-content>ul{
        list-style-type: none;
    }
    .footer-content>p{
        font-size: 16px;
        color: white;
    }
    .footer-content>p>i{
        font-size: 16px;
        padding: 0 10px;
    }
    #blue{
        background-color: blue;
        color: white;
        padding: 10px 15px;
        margin: 10px;
        border-radius: 3px;
    }
    #aqua{
        color: white;
        background-color: rgb(11, 24, 168);
        padding: 10px;
        margin: 10px;
        border-radius: 3px;
    }
    #red{
        color: var(--white-color);
        padding: 10px;
        background-color: red;
        margin: 10px;
        border-radius: 3px;
    }
    .footer-content>ul>li>a{
        font-size: 16px;
        color: white;
        text-decoration: none;
    }
    .footer-content>ul>li{
        padding: 1px;
        font-size: 16px;
        color: white;
    }
    .footer-content>h1{
        color: red;
        font-family: "Exo 2", sans-serif;
        font-size: 22px;
    }
}

/* tablet */
@media (min-width:480px) and (max-width:769px){
    .navigation .menu{
        display: none;
    }
    .nav-icon{
        display: block;
        cursor: pointer;
    }
    .nav-icon i{
        font-size: 20px;
    }
    .navigation-m .menu{
        display: block;
        position: fixed;
        overflow: hidden;
        background: lightblue;
        width: 0px;
        height: 100%;
        transition: 1s ease;
        z-index: 5;
    }
    .navigation-m .menu .cross{
        text-align: right;
    }
    .navigation-m .menu .cross i{
        font-size: 30px;
        cursor: pointer;
    }
    .navigation-m .menu .item{
        color: var(--dark-color);
        padding: 10px 18px;
        text-decoration: none;
        text-align: center;
    }
    .navigation-m .menu .item:hover{
        color: var(--dark-color);
        text-decoration: none;
        border-bottom: 4px solid var(--primary-color);
    }
    .navigation-m .menu .link{
        color: var(--dark-color);
        padding: 10px 18px;
        text-decoration: none;
    }
    .navigation-m .logo .text{
        color: var(--dark-color);
        font-family: "Exo 2", sans-serif;
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
        align-content: center;
    }
     .table {
      width: 0%;
      border-collapse: collapse;
      background-color: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    th, td {
      padding: 1px 1px;
      text-align: left;
      border: 1px solid #ddd;
    }

    th {
      color: #ffffff;
      text-transform: uppercase;
      font-size: 14px;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    .button{
        margin-bottom: 5%;
    }
    .product-m{
        width: 100%;
        display: none;
        cursor: pointer;
    }
    .product-m .nav li{
        border-bottom: 1px solid;
    }
    .product-m .nav li a{
        color: var(--dark-color);
        text-decoration: none;
        font-size: var(--font-size-s);
    }
    .resources-m{
        width: 100%;
        display: none;
    }
    .resources-m .nav li{
        border-bottom: 1px solid;
    }
    .resources-m .nav li a{
        color: var(--dark-color);
        text-decoration: none;
        font-size: var(--font-size-s);
    }
    .media_js-m{
        width: 100%;
        display: none;
        cursor: pointer;
    }
    .head-name{
        width: 100%;
        font-size: 20px;
        justify-content: center;
        text-align: center;
        color: white;
        animation-name: slide;
        position: absolute;
        animation-duration: 3s;
        top: 67px;
    }
    @keyframes slide {
        0%{top: 0px;}
        50%{top:67px;}
    }
    #container{
        width: 107%;
        position: relative;
        transform: translate(-15px, 0px);
    }
    .block1{
        padding: 20px 20px 0px 20px;
        width: 100%;
    }
    .about-us{
        background-color: var(--light-color);
        padding:40px;
        clear: both;
    }   
    .about-us .summary>p{
        width:100%;
    }
    .summary>img{
        width: 100%;
    }
    .about-us .summary{
        display: block;
    }
    .our-products{
        background-color: var(--light-blue-color);
        width: 100%;
        position: relative;
    }
    .divison{
        width: 100%;
        display: block;
        padding: 0 0px;
        background-color: var(--secondary-color);
        justify-content: space-between;
    }
    .sub-div{
        width: 100%;
        height:auto;
        position: relative;
        background-color: var(--white-color);
    }
    .sub-div>img{
        width: 100%;
        float: left;
        aspect-ratio: 4/3;
    }
    .back-image{
        height: 350px;
    }
    .co-main{
        color:white ;
        border: 5px solid red;
        text-align: center;
        padding: 5px;
        top: 18%;
        left: 10%;
    }
    .co-main>h1{
        font-size: 21px;
    }
    .co-main>h1{
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: black;
    }
    .strategy{
        height: 800px;
    }
    .strategy div{
        width: 100%;
        padding:20px;
        height: 350px;
        margin: 0px;
        margin-top: 5%;
    }
    .introduction{
        height: 1000px;
    }
    .introduction div{
        width: 100%;
    }
    .introduction div ul{
        padding-left: 15px;
    }
    #card-image{
        background-color: rgb(2, 2, 184);
        padding: 50px 0px 50px 50px;
        box-shadow: 2px 2px 10px ;
    }
    .history-div{
        display: block;
    }
    .history-div div{
        width: 100%;
        padding: 10px;
        margin: 0px;
        margin-top: 10px;
        font-size: 12px;
    }
    .history-image{
        display: none;
    }
    .history-back{
        background: white;
        display: block;
        height: 500px;
    }
    .our-facilities{
        display: block;
    }
    .our-facilities div{
        width: 100%;
    }
    #facilities-id{
        width: 100%;
    }
    #facilities-id ul{
        margin-top: 0px;
        padding: 20px;
    }
    .s-guard{
        background: white;
        padding: 200px 40px 0px 40px;
        clear: both;
    }
    .s-guard-1{
        padding: 40px;
        display: block;
    }
    .list{
        width: 100%;
    }
    .list-1{
        margin-top: 20px;
    }
    .contact-divison{
        display: block;
    }
    .contact-section1{
        width: 100%;
    }
    .sub-1-1{
        display: block;
    }
    .contact-sub2{
        width: 100%;
    }
    .contact-section2{
        width: 100%;
    }
    .contact-section2>h1{
        color: orangered;
        font-weight: normal;
    }
    .contact-section2>form>input{
        width: 45%;
        height: 50px;
        border-radius: 4px;
        border: none;
        margin: 5px;
    }
    .footer-content>h1{
        color: rpxed;  
        font-size: 15px;
        font-family: "Exo 2", sans-serif;
    }   
    footer{
        background-image: url(https://www.mivenmayfran.com/assets/images/footer_image/footer-bg-img.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        font-weight: lighter;
    }                                                               
    .footer{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .footer-content{
        width: 50%;
        border-right: 1px solid;
        padding: 0 0 0 10px;
    }
    .footer-content>i{
        font-size: 18px;
    }
    .footer-content>ul{
        list-style-type: none;
    }
    .footer-content>p{
        font-size: 16px;
        color: white;
    }
    .footer-content>p>i{
        font-size: 16px;
        padding: 0 10px;
    }
    #blue{
        background-color: blue;
        color: white;
        padding: 10px 15px;
        margin: 10px;
        border-radius: 3px;
    }
    #aqua{
        color: white;
        background-color: rgb(11, 24, 168);
        padding: 10px;
        margin: 10px;
        border-radius: 3px;
    }
    #red{
        color: var(--white-color);
        padding: 10px;
        background-color: red;
        margin: 10px;
        border-radius: 3px;
    }
    .footer-content>ul>li>a{
        font-size: 16px;
        color: white;
        text-decoration: none;
    }
    .footer-content>ul>li{
        padding: 1px;
        font-size: 16px;
        color: white;
    }
    .footer-content>h1{
        color: red;
        font-family: "Exo 2", sans-serif;
        font-size: 22px;
    }
}

/* laptop */
@media (min-width:769px) and (max-width:1025px){
    /* .navigation .menu{
        display: block;
    }
    .nav-icon{
        display: block;
        cursor: pointer;
    }
    .nav-icon i{
        font-size: 20px;
    }
    .navigation-m .menu{
        display: none;
    }
    .navigation-m .menu .cross{
        text-align: right;
    }
    .navigation-m .menu .cross i{
        font-size: 30px;
        cursor: pointer;
    }
    .navigation-m .menu .item{
        color: var(--dark-color);
        padding: 10px 18px;
        text-decoration: none;
        text-align: center;
    }
    .navigation-m .menu .item:hover{
        color: var(--dark-color);
        text-decoration: none;
        border-bottom: 4px solid var(--primary-color);
    }
    .navigation-m .menu .link{
        color: var(--dark-color);
        padding: 10px 18px;
        text-decoration: none;
    }
    .navigation-m .logo .text{
        color: var(--dark-color);
        font-family: "Exo 2", sans-serif;
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
        align-content: center;
    } */
     .table {
      width: 0%;
      border-collapse: collapse;
      background-color: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    th, td {
      padding: 1px 1px;
      text-align: left;
      border: 1px solid #ddd;
    }

    th {
      color: #ffffff;
      text-transform: uppercase;
      font-size: 14px;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    .button{
        margin-bottom: 5%;
    }
    .product-m{
        display: none;
        cursor: pointer;
    }
    .product-m .nav li{
        border-bottom: 1px solid;
    }
    .product-m .nav li a{
        color: var(--dark-color);
        text-decoration: none;
        font-size: var(--font-size-s);
    }
    .resources-m{
        width: 100%;
        display: none;
    }
    .resources-m .nav li{
        border-bottom: 1px solid;
    }
    .resources-m .nav li a{
        color: var(--dark-color);
        text-decoration: none;
        font-size: var(--font-size-s);
    }
    .media_js-m{
        width: 100%;
        display: none;
        cursor: pointer;
    }
    .head-name{
        width: 100%;
        font-size: 20px;
        justify-content: center;
        text-align: center;
        color: white;
        animation-name: slide;
        position: absolute;
        animation-duration: 3s;
        top: 67px;
    }
    @keyframes slide {
        0%{top: 0px;}
        50%{top:67px;}
    }
    #container{
        width: 107%;
        position: relative;
        transform: translate(-15px, 0px);
    }
    .block1{
        padding: 20px 20px 0px 20px;
        width: 100%;
    }
    .about-us{
        background-color: var(--light-color);
        padding:40px;
        clear: both;
    }   
    .about-us .summary>p{
        width:100%;
    }
    .summary>img{
        width: 100%;
    }
    .about-us .summary{
        display: block;
    }
    .our-products{
        background-color: var(--light-blue-color);
        width: 100%;
        position: relative;
    }
    .divison{
        width: 100%;
        display: block;
        padding: 0 0px;
        background-color: var(--secondary-color);
        justify-content: space-between;
    }
    .sub-div{
        width: 100%;
        height:auto;
        position: relative;
        background-color: var(--white-color);
    }
    .sub-div>img{
        width: 100%;
        float: left;
        aspect-ratio: 4/3;
    }
    .back-image{
        height: 350px;
    }
    .co-main{
        color:white ;
        border: 5px solid red;
        text-align: center;
        padding: 5px;
        top: 18%;
        left: 10%;
    }
    .co-main>h1{
        font-size: 21px;
    }
    .co-main>h1{
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: black;
    }
    .strategy{
        height: 800px;
    }
    .strategy div{
        width: 100%;
        padding:20px;
        height: 350px;
        margin: 0px;
        margin-top: 5%;
    }
    .introduction{
        height: 1000px;
    }
    .introduction div{
        width: 100%;
    }
    .introduction div ul{
        padding-left: 15px;
    }
    #card-image{
        background-color: rgb(2, 2, 184);
        padding: 50px 0px 50px 50px;
        box-shadow: 2px 2px 10px ;
    }
    .history-div{
        display: block;
    }
    .history-div div{
        width: 100%;
        padding: 10px;
        margin: 0px;
        margin-top: 10px;
        font-size: 12px;
    }
    .history-image{
        display: none;
    }
    .history-back{
        background: white;
        display: block;
        height: 500px;
    }
    .our-facilities{
        display: block;
    }
    .our-facilities div{
        width: 100%;
    }
    #facilities-id{
        width: 100%;
    }
    #facilities-id ul{
        margin-top: 0px;
        padding: 20px;
    }
    .footer-content>h1{
        color: rpxed;  
        font-size: 15px;
        font-family: "Exo 2", sans-serif;
    }   
    footer{
        background-image: url(https://www.mivenmayfran.com/assets/images/footer_image/footer-bg-img.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        font-weight: lighter;
    }                                                               
    .footer{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .footer-content{
        width: 50%;
        border-right: 1px solid;
        padding: 0 0 0 10px;
    }
    .footer-content>i{
        font-size: 18px;
    }
    .footer-content>ul{
        list-style-type: none;
    }
    .footer-content>p{
        font-size: 16px;
        color: white;
    }
    .footer-content>p>i{
        font-size: 16px;
        padding: 0 10px;
    }
    #blue{
        background-color: blue;
        color: white;
        padding: 10px 15px;
        margin: 10px;
        border-radius: 3px;
    }
    #aqua{
        color: white;
        background-color: rgb(11, 24, 168);
        padding: 10px;
        margin: 10px;
        border-radius: 3px;
    }
    #red{
        color: var(--white-color);
        padding: 10px;
        background-color: red;
        margin: 10px;
        border-radius: 3px;
    }
    .footer-content>ul>li>a{
        font-size: 16px;
        color: white;
        text-decoration: none;
    }
    .footer-content>ul>li{
        padding: 1px;
        font-size: 16px;
        color: white;
    }
    .footer-content>h1{
        color: red;
        font-family: "Exo 2", sans-serif;
        font-size: 22px;
    }
}

/* desktop */
@media (min-width:1025px) and (max-width:1200px){
    /* .navigation .menu{
        display: none;
    }
    .nav-icon{
        display: block;
        cursor: pointer;
    }
    .nav-icon i{
        font-size: 20px;
    }
    .navigation-m .menu{
        display: none;
    }
    .navigation-m .menu .cross{
        text-align: right;
    }
    .navigation-m .menu .cross i{
        font-size: 30px;
        cursor: pointer;
    }
    .navigation-m .menu .item{
        color: var(--dark-color);
        padding: 10px 18px;
        text-decoration: none;
        text-align: center;
    }
    .navigation-m .menu .item:hover{
        color: var(--dark-color);
        text-decoration: none;
        border-bottom: 4px solid var(--primary-color);
    }
    .navigation-m .menu .link{
        color: var(--dark-color);
        padding: 10px 18px;
        text-decoration: none;
    }
    .navigation-m .logo .text{
        color: var(--dark-color);
        font-family: "Exo 2", sans-serif;
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-semibold);
        align-content: center;
    } */
     .table {
      width: 0%;
      border-collapse: collapse;
      background-color: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    th, td {
      padding: 1px 1px;
      text-align: left;
      border: 1px solid #ddd;
    }

    th {
      color: #ffffff;
      text-transform: uppercase;
      font-size: 14px;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    .button{
        margin-bottom: 5%;
    }
    .product-m{
        width: 100%;
        display: none;
        cursor: pointer;
    }
    .product-m .nav li{
        border-bottom: 1px solid;
    }
    .product-m .nav li a{
        color: var(--dark-color);
        text-decoration: none;
        font-size: var(--font-size-s);
    }
    .resources-m{
        width: 100%;
        display: none;
    }
    .resources-m .nav li{
        border-bottom: 1px solid;
    }
    .resources-m .nav li a{
        color: var(--dark-color);
        text-decoration: none;
        font-size: var(--font-size-s);
    }
    .media_js-m{
        width: 100%;
        display: none;
        cursor: pointer;
    }
    .head-name{
        width: 100%;
        font-size: 20px;
        justify-content: center;
        text-align: center;
        color: white;
        animation-name: slide;
        position: absolute;
        animation-duration: 3s;
        top: 67px;
    }
    @keyframes slide {
        0%{top: 0px;}
        50%{top:67px;}
    }
    #container{
        width: 107%;
        position: relative;
        transform: translate(-15px, 0px);
    }
    .block1{
        padding: 20px 20px 0px 20px;
        width: 100%;
    }
    .about-us{
        background-color: var(--light-color);
        padding:40px;
        clear: both;
    }   
    .about-us .summary>p{
        width:100%;
    }
    .summary>img{
        width: 100%;
    }
    .about-us .summary{
        display: block;
    }
    .our-products{
        background-color: var(--light-blue-color);
        width: 100%;
        position: relative;
    }
    .divison{
        width: 100%;
        display: block;
        padding: 0 0px;
        background-color: var(--secondary-color);
        justify-content: space-between;
    }
    .sub-div{
        width: 100%;
        height:auto;
        position: relative;
        background-color: var(--white-color);
    }
    .sub-div>img{
        width: 100%;
        float: left;
        aspect-ratio: 4/3;
    }
    .back-image{
        height: 350px;
    }
    .co-main{
        color:white ;
        border: 5px solid red;
        text-align: center;
        padding: 5px;
        top: 18%;
        left: 10%;
    }
    .co-main>h1{
        font-size: 21px;
    }
    .co-main>h1{
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: black;
    }
    .strategy{
        height: 750px;
    }
    .strategy div{
        width: 100%;
        padding:20px;
        height: 350px;
        margin: 0px;
        margin-top: 5%;
    }
    .introduction{
        height: 1000px;
    }
    .introduction div{
        width: 100%;
    }
    .introduction div ul{
        padding-left: 15px;
    }
    #card-image{
        background-color: rgb(2, 2, 184);
        padding: 50px 0px 50px 50px;
        box-shadow: 2px 2px 10px ;
    }
    .history-div{
        display: block;
    }
    .history-div div{
        width: 100%;
        padding: 10px;
        margin: 0px;
        margin-top: 10px;
        font-size: 12px;
    }
    .history-image{
        display: none;
    }
    .history-back{
        background: white;
        display: block;
        height: 500px;
    }
    .our-facilities{
        display: block;
    }
    .our-facilities div{
        width: 100%;
    }
    #facilities-id{
        width: 100%;
    }
    #facilities-id ul{
        margin-top: 0px;
        padding: 20px;
    }
    .footer-content>h1{
        color: rpxed;  
        font-size: 15px;
        font-family: "Exo 2", sans-serif;
    }   
    footer{
        background-image: url(https://www.mivenmayfran.com/assets/images/footer_image/footer-bg-img.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        font-weight: lighter;
    }                                                               
    .footer{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .footer-content{
        width: 50%;
        border-right: 1px solid;
        padding: 0 0 0 10px;
    }
    .footer-content>i{
        font-size: 18px;
    }
    .footer-content>ul{
        list-style-type: none;
    }
    .footer-content>p{
        font-size: 16px;
        color: white;
    }
    .footer-content>p>i{
        font-size: 16px;
        padding: 0 10px;
    }
    #blue{
        background-color: blue;
        color: white;
        padding: 10px 15px;
        margin: 10px;
        border-radius: 3px;
    }
    #aqua{
        color: white;
        background-color: rgb(11, 24, 168);
        padding: 10px;
        margin: 10px;
        border-radius: 3px;
    }
    #red{
        color: var(--white-color);
        padding: 10px;
        background-color: red;
        margin: 10px;
        border-radius: 3px;
    }
    .footer-content>ul>li>a{
        font-size: 16px;
        color: white;
        text-decoration: none;
    }
    .footer-content>ul>li{
        padding: 1px;
        font-size: 16px;
        color: white;
    }
    .footer-content>h1{
        color: red;
        font-family: "Exo 2", sans-serif;
        font-size: 22px;
    }
}