@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
@import url('http://fonts.cdnfonts.com/css/vollkorn');
p{
    font-family: Rubik;
}
h1.h2,h3,h4,h5,h6{
    font-family: poppins;
}
.my-text{
    font-family: Rubik;
}
li a{
    font-family: poppins;
}
/* html, body{
    font-family: poppins;
} */
#mynav{
   background-color: black;   
}
/* #my-list{
    background-color: #f0f8ff;
} */
#my-list:hover{
    color: blue ;
}
#anchor{
    background-color: black;
    font-family: Poppins;

    color: white;
}
#my-list:hover #my-list a{
    font-family: Poppins;
    color: blue ;
}
#anchor:hover{
    border-bottom: 4px solid #04D2F7;
}
#mysub-menu{
    border-top: 4px solid black;
    padding: 0px;
    margin: 0px;
}
/* SLIDER */
/* .myslider{
    position: relative;
    width: 100%;
} */
.myslider img{
    width: 100%;
}
.slider-cont{
    opacity: 0.6;
    height: 200px;
    width: 350px;
    position: absolute;
    background-image: linear-gradient(to right, rgb(99, 87, 87), rgb(77, 68, 68));
    top: 40%;
    right: 0%;
    bottom: 30%;
}
.slider-content{
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: space-between;
    padding: 15px;
}
.slider-content h5{
    color: aliceblue;
    font-size: 1.8em;
    font-family: Poppins;

}
.slider-content p{
    font-size: 0.9em;
    margin-top: 15px;
    font-family: Poppins;

    color: aliceblue;
}
@media(max-width:1080px){
 
    .slider-cont{
        opacity: 0.6;
        height: 170px;
        width: 300px;
        position: absolute;
        background-image: linear-gradient(to right, rgb(99, 87, 87), rgb(77, 68, 68));
        top: 30%;
        right: 0%;
        bottom: 30%;
    }
    .slider-content{
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: space-between;
        padding: 15px;
    }
    .slider-content h5{
        font-weight: 500;
        color: aliceblue;
        font-size: 1.6em;
        font-family: Poppins;

    }
    .slider-content p{
        font-weight: 400;
        font-size: 0.9em;
        margin-top: 15px;
        font-family: Poppins;

        color: aliceblue;
    }
}
@media(max-width:600px){

    .slider-cont{
        opacity: 0.6;
        height: 120px;
        width: 200px;
        position: absolute;
        background-image: linear-gradient(to right, rgb(99, 87, 87), rgb(77, 68, 68));
        top: 30%;
        right: 0%;
        bottom: 30%;
    }
    .slider-content{
        margin-top: 0px;
      text-align: left;
    }
    .slider-content h5{
        font-weight: 500;
        margin-top: 0px;
        color: aliceblue;
        font-size: 1em;
        font-family: Poppins;


    }
    .slider-content p{
        font-weight: 500;
        margin-top: 0px;
        font-family: Poppins;

        font-size: 0.6em;
        color: aliceblue;
    }
}
#our-slider{
    margin-top: 100px;
}
/* .extradiv{
    height: 150px;
    width: 100%;
}
@media(max-width:1200px){
    .extradiv{
        height: 175px;
        width: 100%;
    }
} */
.nav-bar{
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: row;
    background-color: rgb(16, 15, 15);
   
}
.logo{
    transform: translateX(-60px);
    width: 200px;
    height: 70px;
    background-color: rgb(16, 15, 15);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.logo img{
    height: 55px;
    width: 55px;
}
.cont-elem{
    width: 70%;
    height: 70px;
    background-color: rgb(16, 15, 15);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: row;
    align-items: flex-end;
    border: 2px solid rgb(16, 15, 15);
}
.toggler{
    width: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    background-color:rgb(16, 15, 15) ;
}
@media(max-width:450px){
  
    .nav-bar{
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        background-color: rgb(16, 15, 15);
    }
    .logo{
        transform: translateX(-10px);
        width: 100px;
        height: 55px;
        background-color: rgb(16, 15, 15);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
    .logo img{
        transform: translateY(3px);
        height: 35px;
        width: 35px;
    }
    .toggler{
        transform: translateX(-5px);
        transform: translateY(10px);
        height: 40px;
        width: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color:rgb(16, 15, 15) ;
    }
    .toggler span{
        transform: translateY(-3px);
    }
    .cont-elem{
        margin-right:  15px; ;
        width: 40%;
        height: 60px;
        background-color: rgb(16, 15, 15);
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-direction: row;
        align-items: flex-end;
    }
  
}
@media(max-width:400px){
    .logo{
        transform: translateX(-20px);
        width: 200px;
        height: 70px;
        background-color: rgb(16, 15, 15);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
    .logo img{
        transform: translateY(5px);
        height: 35px;
        width: 35px;
    }
    .toggler{
        transform: translateX(-25px);
        transform: translateY(10px);
        height: 40px;
        width: 90px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color:rgb(16, 15, 15) ;
    }
  
    .nav-bar{
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        background-color: rgb(16, 15, 15);
    }
    .logo{
        width: 100px;
        height: 50px;
      
    }
    .cont-elem{
        margin-right:15px; ;
        width: 40%;
        height: 60px;
        background-color: rgb(16, 15, 15);
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-direction: row;
        align-items: flex-end;
    }
  
}
@media(max-width:350px){
    .logo{
        transform: translateX(-20px);
        width: 200px;
        height: 70px;
        background-color: rgb(16, 15, 15);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
    .logo img{
        height: 35px;
        width: 35px;
    }
    .toggler{
        transform: translateX(-5px);
        transform: translateY(10px);
        height: 40px;
        width: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color:rgb(16, 15, 15) ;
    }
    .toggler span{
        transform: translateY(-5px);
    }
    .nav-bar{
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        background-color: rgb(16, 15, 15);
    }
    .logo{
        width: 110px;
        height: 50px;
    }
    .cont-elem{
        margin-right:  15px; ;
        width: 50%;
        height: 40px;
        background-color: rgb(16, 15, 15);
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-direction: row;
        align-items: flex-end;
    }
  
}

.list-item{
    margin-left: 20px;
    padding: 0px 20px;
    height: 50px;
    list-style: none;
    cursor: pointer;
    z-index: 5;

}
.list-item:hover{
    
    border-bottom: 4px solid #04D2F7;
    transition: 200ms ease-in-out;
    z-index: 5;

}
.list-item:active{
    border-bottom: 4px solid #04D2F7;
    transition: 200ms ease-in-out;
    z-index: 5;

}

.list-item a{
    color: aliceblue;
    font-family: Poppins;
    z-index: 5;


}
.list-item a:hover{
    color: rgb(159, 159, 159);
    z-index: 5;

}
.mydrop{
    position: relative;
}
.drop-items{
    padding: 10px;
    width: 350px;
    position: absolute;
    background-color: #001A57;
    visibility: hidden;
    z-index: 5;
    top: 50%;
    left: 0%;
    
}
.mydrop:hover .drop-items{
    visibility: visible;
    transform: translateY(+23px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: #001A57;
    z-index: 5;

}
.drop-items li{
    background-color: #001A57;
    position: relative;
    padding: 0px;
    margin: 0px;
    z-index: 5;

}
#drop-link{
   
       color: aliceblue;
}
#drop-link:hover{
    color:rgb(159, 159, 159);
}
.cont-toggler{
    background-color: rgb(16, 15, 15);
    width: 10%;
}
.sub-mydrop{
    position: relative;
}
.sub-drop-items{
    padding: 10px;
    width: 270px;
    position: absolute;
    background-color: #001A57;
    visibility: hidden;
    left: 100%;
    right: 0%;
    top: -288%;
    z-index: 5;

}
.sub-drop-items li{
    background-color: #001A57;
    position: relative;
    padding: 0px;
    margin: 0px;
    z-index: 5;

}
.sub-mydrop:hover .sub-drop-items{
    visibility: visible;
    transform: translateY(+23px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: #001A57;
    z-index: 5;

}
.sub-drop-items .bor-bot{
    width: 100px;
    z-index: 5;

  }

/* SIDENAV */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #001A57;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  .bor-bot{
    padding: 0px;
    margin: 0px;
    width: 150px;
    font-size: 0.9em;
  }
  .bor-bot:hover{
    border-bottom: 4px solid #04D2F7;
  }
  .drop-items .bor-bot{
    width: 100px;
    z-index: 5;

  }
  .sidenav a {
    padding: 8px 8px 8px 0px;
    text-decoration: none;
    font-size: 16px;
    color: #818181;
    font-family: Poppins;
   
    display: block;
    transition: 0.3s;
  }
  
  .sidenav a:hover {
    color: #f1f1f1;
  }

  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  /* #close-btn:hover{
    animation: myro 500ms ease-in-out;
}
@keyframes myro{
    from{
         font-size: 36px;
    }
    to{
        font-size: 38px;
    }
} */
  .drop-items .list-item{
    width: 100%;
    z-index: 5;
    z-index: 5;


  }
  #inner-drop{
    padding: 0px;
    margin: 0px;
  }
  
  #inner-down .list-item{
    width: 100%;
    z-index: 5;

  }
  .ul-list li{
    list-style: none;
    border-bottom: 4px solid #04D2F7;
  }
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }
  @media(max-width:1160px){
    body{
        overflow-x:hidden ;
    }

    .cont-elem{
       visibility: hidden;
       border: 2px solid rgb(16, 15, 15);

    }
    .toggler{
        background-color: rgb(16, 15, 15);
        visibility: visible;
        padding: 0px;
        margin: 0px;
    }
 
    #blog-btn{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        width: 95%;
        visibility: visible;
        margin-left: 65px;
    }
  }
 #inner-down{
    height: auto;
  /* display: none; */
 }

  #inner-down li{
    width: 80%;
    transform: translateX(0px);
    padding: 0px;
    margin: 0px;
  }
  #inner-down li a{
    font-size: 0.9em;
  }
  #f-li{
    margin-bottom: 20px;
  }
  #inner-drop:hover #inner-down{
     transform: translateY(-30px);
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     grid-gap: 0px 0px;
  }
  /* #inner-down:hover{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  } */
  .mylink{
    padding: 0px;
    margin: 0px;
  }
  #mylist{
    margin: 0px;
    padding: 0px;
  }
#banner-content{
    position: absolute;
    height: auto;
    width: 80%;
    /* background-color: #111; */
    top: 47%;
    bottom: 40%;
    left: 3.5%;
    color: #001A57;

}
#banner-content h5{
    width: 100%;
    text-align: left;
    /* margin-left: 20px; */
    font-weight: 500;
    color: #001A57;
}
#banner-content  p{
  
   
    width: 80%;
    text-align: left;
    color: #001A57;
    /* font-weight: 1000; */
    font-size: 46px;
    font-family: "Poppins";
    font-weight: 700;
    margin-top: 36px;


}
@media(max-width:1400px){
    #banner-content{
        position: absolute;
        height: auto;
        width: 80%;
        /* background-color: #111; */
        top: 47%;
        bottom: 40%;
        left: 3.5%;
        color: #001A57;
    
    }
    #banner-content h5{
        width: 100%;
        text-align: left;
        /* margin-left: 20px; */
        font-weight: 500;
        color: #001A57;
    }
    #banner-content  p{
        width: 90%;
        text-align: left;
        color: #001A57;
        /* font-weight: 1000; */
        font-size: 42px;
        font-family: "Poppins";
        font-weight: 700;
        margin-top: 36px;

    
    }
}
@media(max-width:1280px){
    #banner-content{
        position: absolute;
        height: auto;
        width: 80%;
        /* background-color: #111; */
        top: 47%;
        bottom: 40%;
        left: 3.5%;
        color: #001A57;
    
    }
    #banner-content h5{
        width: 100%;
        text-align: left;
        /* margin-left: 20px; */
        font-weight: 500;
        color: #001A57;
    }
    #banner-content  p{
        width: 90%;
        text-align: left;
        color: #001A57;
        /* font-weight: 1000; */
        font-size: 38px;
        font-family: "Poppins";
        font-weight: 700;
        margin-top: 35px;
    
    }
}
@media(max-width:765px){
    #banner-content{
        position: absolute;
        height: auto;
        width: 100%;
        /* background-color: #111; */
        top: 47%;
        left: 2.5%;
        color: #001A57;
    
    }
    #banner-content h5{
        width: 100%;
        text-align: left;
        /* margin-left: 20px; */
        font-weight: 500;
        color: #001A57;
        font-size: 17px;
    }
    #banner-content  p{
        width: 90%;
        text-align: left;
        color: #001A57;
        /* font-weight: 1000; */
        font-size: 32px;
        font-family: "Poppins";
        font-weight: 700;
        margin-top: 8px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        padding: 0px;
    
    }
}
@media(max-width:700px){
    #banner-content{
        position: absolute;
        height: auto;
        width: 100%;
        /* background-color: #111; */
        top: 47%;
        left: 2.5%;
        color: #001A57;
    
    }
    #banner-content h5{
        width: 100%;
        text-align: left;
        /* margin-left: 20px; */
        font-weight: 500;
        color: #001A57;
        font-size: 32px;
        font-weight: 600;
    }
    #banner-content  p{
        width: 90%;
        text-align: left;
        color: #001A57;
        /* font-weight: 1000; */
        font-size: 32px;
        font-family: "Poppins";
        font-weight: 700;
        margin-top: 4px;
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        padding: 0px;
    
    }
}
@media(max-width:500px){
    #banner-content{
        position: absolute;
        height: auto;
        width: 100%;
        /* background-color: #111; */
        top: 50%;
        left: 2.5%;
        color: #001A57;
    
    }
    #banner-content h5{
        width: 100%;
        text-align: left;
        /* margin-left: 20px; */
        font-weight: 500;
        color: #001A57;
        font-size: 10px;
        font-weight: 600;
        margin: 0px;
    }
    #banner-content  p{
        width: 90%;
        text-align: left;
        color: #001A57;
        /* font-weight: 1000; */
        font-size: 26px;
        font-family: "Poppins";
        font-weight: 700;
        margin: 0px;
        padding: 0px;
    
    }
}
#top-bar{
    width: 100%;
}
/* ABOUT */
.about-cont{
    margin-top: 35px;
}
@media(max-width:550px){
    .about-cont{
        margin-top: 25px;
    }
}
@media(max-width:450px){
    .about-cont{
        margin-top: 10px;
    }
}
#touch-btn{
    background-color: #ec1113;
}
.service-cont{
    margin-top: 20px;
    margin-bottom: 20px;
}
.cont-blog{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
    
}
.cont-blog li{
    height: 42px;
    width: 110px;
    border: 1px solid white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
}
.cont-blog li a{
    font-family: poppins;
    color: white;
    padding: 0px;
}

.cont-blog li:hover{
    border-radius: 10px;
    border: 1px solid #04D2F7;
    background-color: #04D2F7;
    transition: 250ms ease-in-out;
}
/* LOGIN */
#mainlogin-cont{
    background-image: linear-gradient(to right , #c2a6a7, rgb(216, 216, 216) );
}
#cont-form{
   background-image: linear-gradient(to right , #001A57, #1140ad );
}
#login-btn{
    background-color: #514f4f;
}
#login-btn:hover{
    transition: 200ms ease-in-out;
    background-color: #9f9d9d;
    color: whitesmoke;
}
.main-blog{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.addblog-cont{
    padding: 20px;

    border: 2px solid black;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 
}
.form-cont{
    padding: 20px;
    border: 2px solid black;
    width: 60%;
}
.sub-drop-link:hover{
    border-bottom: 4px solid #04D2F7;
    width: 100%;
}
.sub-drop-link a{
    font-size: 0.2em;
}
.login-create{
    text-decoration: none;
}
#cont-register{
    background-image: linear-gradient(to right , #d7080c, rgb(199, 49, 49) );

}
.sec-footer{
    background-color: #ec1113;
}
.myblog-cont{
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.sub-blog-sec-cont{
    
    margin-top: 36px;
    height: auto;
    width: 60%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.myblog-subcont{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.cont-blog{
    width: 110px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.search-bar{
    width: 100%;
}
.search-bar input{
    width: 100%;
}
.cont-blog{
    border: 2px solid #04D2F7;
}
@media(max-width:768px){
    .myblog-cont{
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .sub-blog-sec-cont{
        margin-left: 35px;
        margin-top: 10px;
        height: auto;
        width: 60%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .myblog-subcont{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}
.cont-blog:hover{
    border: 0px;
    transition: 100ms ease-in-out;
}
.myblog-cont .lat-post h4{
   transform: translateY(+24px);
}
/* --------------OBSERVE BLOG CONT-------- */

.ob-blog-cont{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.first-blog{
    width: 100%;
    margin-left: 150px;
}
.des-cont{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.des-cont p{
    width: 78%;
    text-align: left;
}
.blog-date{
    font-family: Poppins;
    font-size: 1.4rem;
    color: #514f4f;
}
.blog-title{
    font-family: Poppins;
    font-size: 1.8rem;
    color: #514f4f;
}
.blog-des{
    font-family: Poppins;
    font-size: 1.1rem;
    color: #514f4f;
    font-weight: lighter;
}
@media (max-width: 1400px){
    .des-cont p{
        width: 85%;
        text-align: left;
    }
    .first-blog {
        width: 100%;
        margin-left: 59px;
    }
}
@media (max-width: 1200px){
    .first-blog {
        width: 100%;
        margin-left: 0px;
    }
    .des-cont{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .blog-date{
        font-family: Poppins;
        font-size: 1.2rem;
        color: #514f4f;
    }
    .blog-title{
        font-family: Poppins;
        font-size: 1.5rem;
        color: #514f4f;
    }
    .blog-des{
        font-family: Poppins;
        font-size: 1rem;
        color: #514f4f;
        font-weight: lighter;
    }

}
@media (max-width: 992px){

    .des-cont p{
        width: 100%;
        text-align: left;
    }
    .blog-date{
        font-family: Poppins;
        font-size: 1rem;
        color: #514f4f;
    }
    .blog-title{
        font-family: Poppins;
        font-size: 1.2rem;
        color: #514f4f;
    }
    .blog-des{
        font-family: Poppins;
        font-size: 0.9rem;
        color: #514f4f;
        font-weight: lighter;
    }
}
#pre a:hover{
    background-color: #ec1113;
    color: aliceblue;
}
#next a:hover{
    background-color: #ec1113;
    color: aliceblue;

}
/* ------------ADDBLOG------------ */
.log-blog-cont{
    height: 65px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
.log-blog-cont a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 50px;
    background-color: #bd2124;
    color: aliceblue;
}
.log-blog-cont a:hover{
    transition: 250ms ease-in-out;
    background-color: #ec1113;
    border-radius: 10px;
}
.log-blog-cont a p{
    transform: translateY(8px);
    color: aliceblue;
 
}
/* .log-blog-cont form{
    transform: translateY(4px);
 */
#logout-cont{
    height: 50px;

    background-color: #bd2124;
}
#logout-cont:hover{
    height: 50px;

    transition: 250ms ease-in-out;
    background-color: #ec1113;
    border-radius: 10px;
}
@media(max-width:1200px){
    .log-blog-cont a{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 237px;
        height: 50px;
        background-color: #bd2124;
        color: aliceblue;
    }
}
@media(max-width: 1000px){
    .log-blog-cont{
        margin-top: 40px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
}
@media(max-width:520px){
    .log-blog-cont{
        margin-top: 50px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
}
/* ---------DELETE BUTTON---------- */
#del-btn{
    display: none;
}
#del-subbtn:active #del-btn{
   display: block;
}
/* ---------DELETE Page---------- */
.cont-del{
 
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}
.del-text{
    color: #ec1113;
    font-family: poppins;
}
.drop-btn-cont{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.sub-drop-btn-cont{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.last-drop-btn-cont{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.sub-info-drop-btn-cont{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.sub-inner-drop-btn{
    cursor: pointer;
    margin-left: -8px;
}
.last-inner-drop-btn{
    cursor: pointer;
    margin-left: -8px;
}
.sub-info-inner-drop-btn{
    cursor: pointer;
    margin-left: -8px;
}
/* #plus-btn{
    animation: myrot 0.5s  ease-in-out;
} */

    .inner-drop-btn {
        cursor: pointer;
        width: 50%;
        margin-right: 135px;
    }

#plus-btn:hover{
    animation: myrot 0.5s  ease-in-out;
}

@keyframes myrot{
    to{
        transform: rotate(0deg);
    }
    from{
        transform: rotate(135deg);
    }
}
#sub-btn-drop-list{
    display: none;
    width: 100%;
}
#sub-btn-drop-list li{
    width: 100%;
}
#last-btn-drop-list{
    display: none;
    width: 100%;
}
#last-btn-drop-list li{
    width: 100%;
}
#sub-info-btn-drop-list{
    display: none;
    width: 100%;
}
#sub-info-btn-drop-list li{
    width: 100%;
}
#btn-drop-list{
    display: none;
    width: 100%;
}

.my-item:hover{
    border-bottom: 4px solid #04D2F7;
}
.sub-my-item:hover{
    border-bottom: 4px solid #04D2F7;
}
/* ---------Home-About-------------- */
#about-front{
    height: 420px;
    width: 420px;
}
#about-back{
    height: 420px;
    width: 420pxs;
}
@media(max-width:1200px){
    #about-front{
        height: 320px;
        width:320px;
    }
    #about-back{
        height: 320px;
        width: 320px;
    }
}
@media(max-width:992px){
    #about-front{
        height: 420px;
        width:420px;
    }
    #about-back{
        height: 420px;
        width: 420px;
    }
}
@media(max-width:570px){
    #about-front{
        height: 300px;
        width:300px;
    }
    #about-back{
        height: 300px;
        width:300px;
    }
}
/* -----------NAVBAR--------------- */

.nav-cont{
    background-color: #001A57;
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.top-nav{
    background-color: #001A57;
    width: 90%;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.nav-elem {
    margin-left: 4rem;
    width: 70%;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
    margin-top: 1.5em;
    padding: 5px;
    z-index: 5;
}
.list-item {
    margin-left: 20px;
    padding: 0px 8px;
    height: 50px;
    list-style: none;
    cursor: pointer;
    z-index: 5;
}
.nav-social{
    margin-left: 4rem;
    width: 18%;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
    padding: 5px;
    z-index: 5;
}
.nav-social a img{
    height: 25px;
    width: 25px;
}

.nav-logo {
    width: 10%;
    margin-left: 4rem;
}
.nav-logo a img{
    height: 70px;
    width: 70px;
}
.nav-toggle{
    visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 5%;
}
@media(max-width: 1240px){
    .nav-cont{
        background-color: #001A57;
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .top-nav{
        background-color: #001A57;
        width: 90%;
        height: 70px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .nav-elem {
        margin-left: 4rem;
        width: 75%;
        height: 70px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 0;
        margin-top: 1.5em;
        padding: 5px;
        z-index: 5;
    }
    .list-item {
        margin-left: 20px;
        padding: 0px 8px;
        height: 50px;
        list-style: none;
        cursor: pointer;
        z-index: 5;
    }
    .side-nav-social{
        margin-left: -1rem;
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 0;
        padding: 5px;
    }
    .side-nav-social a img{
        height: 40px;
        width: 50px;
    }
    .nav-social{
        margin-left: 4rem;
        width: 18%;
        height: 70px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 0;
        padding: 5px;
        z-index: 5;
    }
    .nav-social a img{
        height: 25px;
        width: 25px;
    }
    .nav-logo {
        width: 7%;
        margin-left: 4rem;
    }
    .nav-logo a img{
        height: 60px;
        width: 60px;
    }
    .nav-toggle{
        visibility: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 5%;
    }
}
@media(max-width:1156px){
    .nav-cont{
        background-color: #001A57;
        width: 100%;
        height: 70px;
        display: flex;
        flex-direction: row;
    }
    .top-nav{
        background-color: #001A57;
        width: 100%;
        height: 70px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .nav-elem {
        width: 90%;
        display: none;
        z-index: 5;
    }
    .nav-social{
        display: none;
     
    }
    .nav-social a img{
        height: 25px;
        width: 25px;
    }
    .side-nav-social{
        margin-left: -1rem;
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
    padding: 5px;
    }
    .side-nav-social a img{
        height: 40px;
        width: 50px;
    }
    .nav-logo{
        width: 10%;
        margin-left: 7rem;
    }
    .nav-logo a img{
        height: 60px;
        width: 60px;
    }
    .nav-toggle{
        visibility: visible;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 10%;
    }
}
@media(max-width:692px){
    .nav-cont{
        background-color: #001A57;
        width: 100%;
        height: 70px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .top-nav{
        background-color: #001A57;
        width: 90%;
        height: 50px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .side-nav-social{
        margin-left: -1rem;
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0;
    padding: 5px;
    }
    .side-nav-social a img{
        height: 40px;
        width: 50px;
    }
    .nav-elem {
        display: none;
        z-index: 5;

    }
    .nav-logo{
        width: 15%;
        margin-left: 3rem;
    }
    .nav-logo a img{
        height: 45px;
        width: 45px;
    }
    .nav-toggle{
        margin-right: 2rem;
        visibility: visible;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 10%;
    }
}
/* -----------TOPBAR----------- */
.topbar{
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    background-color: #343a40;
    font-size: 0.9em;
}
.tb-left-cont{
    width: 40%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-left: 40px;
}
.tb-right-cont{
    width: 60%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;

}
.tb-left-in, .tb-right-in{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.tb-left-in a, .tb-right-in a{
    text-decoration: none;
    color: aliceblue;
}
.tb-left-in i, .tb-right-in i{
    color: rgb(131, 125, 125);
}
@media(max-width:965px){
    .topbar{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #343a40;
    }
    .tb-left-cont{
        margin-top: 5px;
        width: 85%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 40px;
    }
    .tb-right-cont{
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .tb-left-in, .tb-right-in{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .tb-left-in a, .tb-right-in a{
        text-decoration: none;
        color: aliceblue;
    }
    .tb-left-in i, .tb-right-in i{
        color: rgb(131, 125, 125);
    }
}
@media(max-width:500px){
    .topbar{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        background-color: #343a40;
    }
    .tb-left-cont{
        margin-top: 5px;
        width: 80%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 40px;
    }
    .tb-right-cont{
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .tb-left-in, .tb-right-in{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .tb-left-in a, .tb-right-in a{
        text-decoration: none;
        color: aliceblue;
        font-size: 10px;
    }
    .tb-left-in i, .tb-right-in i{
        color: rgb(131, 125, 125);
    }
}
/* @media(max-width:796px){
    .topbar{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #343a40;
    }
    .tb-left-cont{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 40px;
    }
    .tb-right-cont{
        margin-top: 10px;
        width: 100%;
    }
    .tb-left-in, .tb-right-in{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .tb-left-in a, .tb-right-in a{
        text-decoration: none;
        color: aliceblue;
    }
    .tb-left-in i, .tb-right-in i{
        color: rgb(131, 125, 125);
    }
} */
.footer{
    height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url("images/footer-1.png"), linear-gradient(to right, #273272,#40e0d0 );
    background-position: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}
.cont-footer{
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    
}
.sub-footer{
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer-location{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}
.footer-title p{
    font-size: calc(0.8rem + 1vw);
}
.footer-text{
    display: flex;
    color: white;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}
.myftext{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
.footer-title-text{
    color: white;
}
.bottom-footer{
    width: 100%;
}
.extra-div{
    height: 20px;
    width: 100%;
    background-color: #273272
    ;
}
.bottom-cont{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: baseline;
    background-color: #253488;
}
.footer-text{
    font-size: calc(0.1rem + 1vw);
}
.bottom-cont p{
    color: #40e0d0;
}


@media(max-width:1200px){
    .footer{
        width: 100%;
        height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-image: url("images/footer-1.png"), linear-gradient(to right, #273272,#40e0d0 );
        background-position: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .footer-text{
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: baseline;
    }
}
@media (max-width:780px){
    .about-cont{
        margin-top: 50px;
    }
    .sub-about-cont{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 25px 0px;
        place-items: center;
    }
    .about-item{
        background-color: #d0dfde;
        width: 50%;
        box-shadow: 10px 10px 10px 0 gray;
        text-align: center;
        height: 350px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow-y: hidden;
    }
    .myalign p{
        font-size: 0.7em;
    }
    .login-cont{
        height: 600px;
        width: 100%;
        display: flex;
        background-color: rgb(225, 227, 229);
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .sub-login{
        width: 100%;
        height: 450px;
    }
    .my-contact{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        grid-gap: 20px 0px ;
    }
    .mynav{
        position: relative;
        overflow-y: hidden;
    }
    .nav-panel {
        display: flex;
        position: relative;
        flex-direction: row;
        justify-content: space-around;
        align-items: baseline;
        height: 20vh;
        background-color:  #273272;
        
    }
    .sec-half{
display: none;    }
    .sub-l-half{
        color: white;
    }
    .sub-t-half {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .myinline{
        display: flex;
        flex-direction: row;
        justify-content: baseline;
        align-items: flex-start;
    }
    .sub-l-half {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    .signin {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: baseline;
    }
    .sec-nav{
        position: absolute;
        width: 100%;
        height: 200px;
        top: 75%;
        bottom: 0%;
    }
    .sec-nav-ul{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: baseline;
        background-color: rgb(16, 16, 98);
        margin: 0px;
        padding: 0px;
        height: 60px;
    }
    .sec-nav-ul li a{
        text-decoration: none;
        color: white;
    }
    .sec-nav-ul li{
      margin-top: 10px;
    }
    
    .sub-cont-tool{
        margin-top: 30px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 70px 0px;
    }
    .cont-item img{
        height: 200px;
        width: 70%;
    }
    .sub-cont-sec-tool{
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 70px 0px;
    }
    .screen-img{
        height: 120px;
        width: 250px;
    }
    .port-img{
        height: 200px;
        width: 70%;
    }
    .tool-text{
        font-size: calc(0.6rem + 1vw);
        color: red;
    }
    .ourdiv{
        margin-top: 5px;
    }
    /* ---------FOOTER-------------- */
    .footer{
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-image: url(images/footer-1.png), linear-gradient(to right, #273272,#404A82 );
        background-position: fixed;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .cont-footer{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
    }
    .sub-footer{
        margin-top: 30px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .footer-title p{
        font-size: 1.75rem;
    }
    .footer-text{
        font-size: calc(0.4rem + 1vw);
    }
  
    .footer-location{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: baseline;
    }
 
    .footer-text{
        color: white;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: baseline;
    }
    .myftext{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
    }
    .bottom-footer{
        width: 100%;
    }
    .bottom-cont{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: baseline;
    }
}
/* --------FOOTER---------- */
.footer__two-widget-menu ul li a{
    font-size: 15px;
}

.main-footer-cont{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.footer-cont{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: self-end;
    justify-content: center;
}
.zeal-footer{
    width: 95%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}
.first-footer-cont{
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.first-copy-footer-cont{
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* .sec-footer-cont{
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} */
.third-footer-cont{
    margin-left: 20px;
    width: 22.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.fourth-footer-cont{
    width: 22.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.none-me{
    display: none;
}
@media(max-width:1350px){
    .footer__two-widget-menu ul li a{
        font-size: 14px;
    }
}
@media(max-width:1250px){
    .footer__two-widget-menu ul li a{
        font-size: 12.5px;
    }
}

@media(max-width:1120px){
    .none-me{
        display: block;
    }
    .zeal-footer a{
        font-size: 17px;
    }
    .main-footer-cont{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .footer-cont{
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .zeal-footer{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* place-items: center; */
       
    }
    .first-footer-cont{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .first-copy-footer-cont{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    /* .sec-footer-cont{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .sec-footer-cont .foot-text{
        width: 100%;
    } */
    .third-footer-cont{
        margin-left: 0px;

        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .none-me{
        display: block;
    }
    .fourth-footer-cont{
     display: none;
    }
}
@media(max-width:885px){
    .zeal-footer a{
        font-size: 13px;
    }
}
@media(max-width:700px){
    .footer__two-widget-menu ul li a{
        font-size: 15px;
    }
    .main-footer-cont{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .footer-cont{
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .zeal-footer{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* place-items: center; */
        grid-gap: 0px 15px;
       
    }
    .first-footer-cont{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .first-copy-footer-cont{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    /* .sec-footer-cont{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .sec-footer-cont .foot-text{
        width: 100%;
    } */
    .third-footer-cont{
        margin-left: 0px;

        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .none-me{
        display: block;
    }
    .fourth-footer-cont{
     display: none;
    }
}
@media(max-width:580px){
    .zeal-footer a{
        font-size: 17px;
    }

    .main-footer-cont{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .footer-cont{
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .zeal-footer{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* place-items: center; */
        grid-gap: 0px 15px;
       
    }
    .first-footer-cont{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .first-copy-footer-cont{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    /* .sec-footer-cont{
        margin-top: 15px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    } */
    /* .sec-footer-cont .foot-text{
        width: 100%;
    } */
    .third-footer-cont{
        margin-left: 0px;

        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .none-me{
        display: block;
    }
    .fourth-footer-cont{
     display: none;
    }
}

/* ------SLIDER IMG------- */
@media(max-width: 4800px){
    .slider-img{
           height: 280px;
    }
}
@media(max-width: 3200px){
    .slider-img{
           height: 300px;
    }
}
@media(max-width: 2300px){
    .slider-img{
           height: 400px;
    }
}
@media(max-width: 1600px){
    .slider-img{
           height: 500px;
    }
}
@media(max-width: 1400px){
    .slider-img{
           height: 475px;
    }
}
@media(max-width: 1200px){
    .slider-img{
           height: 450px;
    }
}
@media(max-width: 1000px){
    .slider-img{
           height: 400px;
    }
}
@media(max-width: 800px){
    .slider-img{
           height: 350px;
    }
}
@media(max-width: 700px){
    .slider-img{
           height: 300px;
    }
}
@media(max-width: 600px){
    .slider-img{
           height: 280px;
    }
}
@media(max-width: 500px){
    .slider-img{
           height: 200px;
    }
}
/* -----BANNER IMG--------- */
@media(max-width: 4800px){
    .banner-img{
           height: 320px;
    }
}
@media(max-width: 3200px){
    .banner-img{
           height: 340px;
    }
}
@media(max-width: 2300px){
    .banner-img{
           height: 500px;
    }
}
@media(max-width: 1800px){
    .banner-img{
           height: 600px;
    }
}
@media(max-width: 1600px){
    .banner-img{
           height: 600px;
    }
}
@media(max-width: 1400px){
    .banner-img{
           height: 510px;
    }
}
@media(max-width: 1200px){
    .banner-img{
           height: 480px;
    }
}
@media(max-width: 1000px){
    .banner-img{
           height: 440px;
    }
}
@media(max-width: 800px){
    .banner-img{
           height: 400px;
    }
}
@media(max-width: 700px){
    .banner-img{
           height: 340px;
    }
}
@media(max-width: 600px){
    .banner-img{
           height: 300px;
    }
}
@media(max-width: 500px){
    .banner-img{
           height: 230px;
    }
}

.last-cont{
    height: 50px;
   width: 100%;
   background-color: #001A57;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
}
.fot-fir-cont{
    padding-bottom: 20px;
    padding-left: 15px;
    padding-top: 5px;
    height: 30px;
    width: 100%;
    background-color: #001A57;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-left: 30px;
}
.fot-sec-cont{
    padding-bottom: 20px;
    padding-left: 15px;
    padding-top: 5px;
    height: 30px;
    width: 100%;
    background-color: #001A57;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.footer__two-widget-contact-social p{
    height: 18px;
    margin-left: 10px;
    color: #8690d1;
}
.footer__two-widget-contact-social ul{
    height: 18px;
}
@media(max-width: 650px){
   
    .last-cont{
       height: 80px;
       width: 100%;
       background-color: #001A57;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
    }
    .fot-fir-cont{
        padding-bottom: 20px;
        padding-left: 15px;
        padding-top: 5px;
        height: 30px;
        width: 80%;
        background-color: #001A57;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-left: 20px;
    }
    .fot-sec-cont{
        padding-bottom: 20px;
        padding-left: 15px;
        padding-top: 5px;
        height: 30px;
        width: 80%;
        background-color: #001A57;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .footer__two-widget-contact-social{
        height: 15px;
    }
    /* .fot-fir-cont, .fot-sec-cont{
       
        margin-top: 10px;
        height: 14px;
        width: 80%;
        background-color: #001A57;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    } */
    .footer__two-widget-contact-social p{
        margin-left: 0px;
        height: 14px;
    }
    .footer__two-widget-contact-social ul{
        height: 14px;
    }
}
@media(max-width:4200px){
    .contact-img{
        height: 420px;
    }
}
@media(max-width:1600px){
    .contact-img{
        height: 420px;
    }
}
@media(max-width:1112px){
    .contact-img{
        height: 300px;
    }
}
@media(max-width:800px){
    .contact-img{
        height: 150px;
    }
}
@media(max-width:4200px){
   .contact__area-map{
     margin-top: 120px;
   }
}
@media(max-width:1600px){
    .contact__area-map{
        margin-top: 70px;
      }
}
@media(max-width:1112px){
    .contact__area-map{
        margin-top: 40px;
      }
}
.features__area-item h4{
    color: white;
}
#fir-toxic-text, #sec-toxic-text, #thr-toxic-text{
    font-size: 1.5rem;
}
@media(max-width:1530px){
    #thr-toxic-text{
        font-size: 1.3rem;
    }
}
@media(max-width:1480px){
    #thr-toxic-text{
        font-size: 1.35rem;
    }
}
@media(max-width:1420px){
    #thr-toxic-text{
        font-size: 1.3rem;
    }
    #sec-toxic-text{
        font-size: 1.45rem;
    }
}
@media(max-width:1335px){
    #toxic-text{
        font-size: 1.2rem;
    }
    #fir-toxic-text{
        font-size: 1.2rem;
    }
    #sec-toxic-text{
        font-size: 1.2rem;
    }
    #thr-toxic-text{
        font-size: 1.2rem;
    }
}
@media(max-width:1170px){
    #toxic-text{
        font-size: 1.2rem;
    }
    #fir-toxic-text{
        font-size: 1.2rem;
    }
    #sec-toxic-text{
        font-size: 1.2rem;
    }
    #thr-toxic-text{
        font-size: 1.2rem;
    }
}
@media(max-width:1124px){
    #toxic-text{
        font-size: 1.2rem;
    }
    #fir-toxic-text{
        font-size: 1.2rem;
    }
    #sec-toxic-text{
        font-size: 1.2rem;
    }
    #thr-toxic-text{
        font-size: 1.1rem;
    }
}
@media(max-width: 1080px){
    #toxic-text{
        font-size: 1.1rem;
    }
    #fir-toxic-text{
        font-size: 1.1rem;
    }
    #sec-toxic-text{
        font-size: 1.1rem;
    }
    #thr-toxic-text{
        font-size: 1.1rem;
    }
}
@media(max-width: 1048px){
    #toxic-text{
        font-size: 1rem;
    }
    #fir-toxic-text{
        font-size: 1rem;
    }
    #sec-toxic-text{
        font-size: 1rem;
    }
    #thr-toxic-text{
        font-size: 1rem;
    }
}
@media(max-width:992px){
    #toxic-text{
        font-size: 1.4rem;
    }
    #fir-toxic-text{
        font-size: 1.4rem;
    }
    #sec-toxic-text{
        font-size: 1.4rem;
    }
    #thr-toxic-text{
        font-size: 1.4rem;
    }
}
#top-head-text{
    font-family: poppins;
}
#rubik{
    font-family: rubik;
}
#blog-image{
    width: 1000px;
    height: 600px;
}
@media(max-width:992px){
    #blog-image{
        width: 800px;
        height: 450px;
    }

}
@media(max-width:768px){
    #blog-image{
        width: 600px;
        height: 350px;
    }

}
@media(max-width:600px){
    #blog-image{
        width: 100%;
        height: 230px;
    }

}

#agg-drop-link{
    color: aliceblue;
}
#agg-drop-link:hover{
 color:rgb(159, 159, 159);
}
.agg-sub-mydrop{
    position: relative;
}
.agg-sub-drop-items{
    padding: 10px;
    width: 250px;
    position: absolute;
    background-color: #001A57;
    visibility: hidden;
    left: 100%;
    right: 0%;
    top: -181%;
    z-index: 5;

}
.agg-sub-drop-items li{
    background-color: #001A57;
    position: relative;
    padding: 0px;
    margin: 0px;
    z-index: 5;

}
.agg-sub-mydrop:hover .agg-sub-drop-items{
    visibility: visible;
    transform: translateY(+23px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: #001A57;
    z-index: 5;

}
.agg-sub-drop-items .bor-bot{
    width: 100px;
    z-index: 5;
  
}
  /* ------------CONTACT----------- */
.grid-cont{
    margin-top: 60px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px 65px;
    place-content: center;
    place-items: center;
}
.base-cont{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#first-tag, #sec-tag, #last-tag{
    font-size: 1.1rem;
}
.base-cont .sub-text{
    text-align: center;
}
.base-cont a{
    font-family: rubik;
}
/* #last-tag{
    font-size: 1rem;
} */
.last-contact-cont{
    margin-top: 30px;
}
@media(max-width:1200px){
    .grid-cont{
        margin-top: 60px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px 30px;
        place-content: center;
        place-items: center;
    }
}
@media(max-width:992px){
    .last-contact-cont {
        margin-top: 20px;
    }
    #first-tag, #sec-tag, #last-tag{
        font-size: 0.8rem;
    }
}
@media(max-width:768px){
    .grid-cont{
        margin-top: 30px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px 0px;
        place-content: center;
        place-items: center;
    }
    .base-cont{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #first-tag, #sec-tag, #last-tag{
        font-size: 1.1rem;
    }
}
.main-cont{
    width: 100%;
    background-color: #F8F8F8 ;
}
.contact-cont {
    padding: 50px 0px;
    margin-top: 35px;
    width: 60%;

}
.init-cont{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.myflex{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#form-button{
    background-color: #001A57;
    border-radius: 20px;
}
@media(max-width:1080px){
    .main-cont{
        width: 100%;
        background-color: #F8F8F8 ;
    }
    .contact-cont {
        padding: 50px 0px;
        margin-top: 35px;
        width: 100%;
    }
    .init-cont{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .myflex{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #form-button{
        background-color: #001A57;
    }
    #fir-text{
        margin-bottom: 15px;
    }
}
.mygrid-cont{
    margin-top: 60px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px 65px;
    place-content: center;
    place-items: flex-start;
}
.sub-base-cont{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
    padding: 15px 20px;
}
#first-tag, #sec-tag, #last-tag{
    font-size: 1.1rem;
}
.sub-base-cont .sub-text{
    text-align: center;
}
/* #last-tag{
    font-size: 1rem;
} */
.last-contact-cont{
    margin-top: -15px;
}
@media(max-width:1200px){
    .mygrid-cont{
        margin-top: 60px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px 65px;
        place-content: center;
        place-items: flex-start;
    }
}
@media(max-width:992px){
    .mygrid-cont{
        margin-top: 60px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px 65px;
        place-content: center;
        place-items: flex-start;
    }
    .last-contact-cont {
        margin-top: -15px;
    }
    #first-tag, #sec-tag, #last-tag{
        font-size: 0.8rem;
    }
}
@media(max-width:768px){
    .mygrid-cont{
        margin-top: 60px;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 20px 65px;
        place-content: center;
        place-items: flex-start;
    }
    .sub-base-cont{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #f8f8f8;
        padding: 15px 20px;

    }
    #first-tag, #sec-tag, #last-tag{
        font-size: 1.1rem;
    }
}
.over-text h2{
    color: #001A57;
    font-weight: 700;
}
.cont-exper {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}
.exper-text{
    width: 60%;
}
.exper-img{
   width: 40%;
}
.exper-text h4{
    color: #001A57;
}
@media(max-width:1199px){
    .over-text h2{
        color: #001A57;
        font-weight: 700;
    }
    .cont-exper {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }
    .exper-text{
        width: 65%;
    }
    .exper-text p{
        font-size: 0.9em;
    }
    .exper-img{
       width: 35%;
    }
    .exper-img img{
        width: 100%;
     }
    .exper-text h4{
        color: #001A57;
    }
}
@media(max-width:992px){
    .over-text h2{
        color: #001A57;
        font-weight: 700;
    }
    .cont-exper {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .exper-text{
        width: 100%;
    }
    .exper-text p{
        font-size: 1em;
    }
    .exper-img{
       width: 100%;
    }
    .exper-img img{
        width: 100%;
     }
    .exper-text h4{
        color: #001A57;
    }
}
/* ------------------ */
.sec-cont-exper {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}
.sec-exper-text{
    width: 35%;
}
.sec-exper-img img{
    width: 80%;
 }
.sec-exper-img{
   width: 45%;
}
.sec-exper-text h4{
    color: #001A57;
}
@media(max-width:1199px){
    .over-text h2{
        color: #001A57;
        font-weight: 700;
    }
    .sec-cont-exper {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }
    .sec-exper-text{
        width: 65%;
    }
    .sec-exper-text p{
        font-size: 0.9em;
    }
    .sec-exper-img{
       width: 35%;
    }
    .sec-exper-img img{
        width: 80%;
     }
    .sec-exper-text h4{
        color: #001A57;
    }
}
@media(max-width:992px){
    .over-text h2{
        color: #001A57;
        font-weight: 700;
    }
    .sec-cont-exper {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .sec-exper-text{
        width: 100%;
    }
    .sec-exper-text p{
        font-size: 1em;
    }
    .sec-exper-img{
       width: 100%;
    }
    .sec-exper-img img{
        width: 100%;
     }
    .sec-exper-text h4{
        color: #001A57;
    }
}
.carousel-cell{
    width: 222px;
    height: 192px;
}

.carousel-cell img{
    position: relative;
}
.carousel-cell img:hover{
    transform: scale(1.3);
}
/* --------------SERVICE-TEXT-------------- */
.service-text{
    width: 80%;
    position: relative;
    font-size: 50px;
    font-weight: 800;
    color: black;
    top: 20%;
    left: 1%;
}
/* ---------TEXT CONT--------- */
.text-cont{
    width: 70%;
    position: absolute;
    top: 45%;
    left: 3%;
}
.text-cont p{
    font-family: Poppins;

    font-size: 38px;
    color: #001A57;
}
@media(max-width: 1120px){
    .text-cont{
        width: 70%;
        position: absolute;
        top: 45%;
        left: 1%;
    }
    .text-cont p{
        font-family: Poppins;
    
        font-size: 34px;
        color: #001A57;
    }
}
 @media(max-width: 768px){
    .text-cont{
        width: 70%;
        position: absolute;
        top: 45%;
        left: 1%;
    }
    .text-cont p{
        font-family: Poppins;
    
        font-size: 30px;
        color: #001A57;
    }
}
@media(max-width: 600px){
    .text-cont{
        width: 70%;
        position: absolute;
        top: 45%;
        left: 1%;
    }
    .text-cont p{
        font-family: Poppins;
        font-size: 22px;
        color: #001A57;
        margin: 0;
    }
}
@media(max-width: 400px){
    .text-cont{
        width: 70%;
        position: absolute;
        top: 45%;
        left: 1%;
    }
    .text-cont p{
        font-family: Poppins;
        font-size: 17px;
        color: #001A57;
        margin: 0;
    }
}
@media(max-width: 320px){
    .text-cont{
        width: 70%;
        position: absolute;
        top: 45%;
        left: 1%;
    }
    .text-cont p{
        font-family: Poppins;
        font-size: 14px;
        color: #001A57;
        margin: 0;
    }
}
/* @media(max-width: 1122px){
    .text-cont{
        width: 40%;
        position: absolute;
        top: 14%;
        left: 1%;
    }
    .text-cont p{
        font-family: Poppins;
    
        font-size: 32px;
        color: #001A57;
    }
}
@media(max-width: 1110px){
    .text-cont{
        width: 60%;
        position: absolute;
        top: 14%;
        left: 1%;
    }
    .text-cont p{
        font-family: Poppins;
    
        font-size: 35px;
        color: #001A57;
    }
}
@media(max-width: 992px){
    .text-cont{
        width: 60%;
        position: absolute;
        top: 10%;
        left: 1%;
    }
    .text-cont p{
        font-family: Poppins;
    
        font-size: 35px;
        color: #001A57;
    }
}
@media(max-width: 800px){
    .text-cont{
        width: 80%;
        position: absolute;
        top: 9%;
        left: 1%;
    }
    .text-cont p{
        font-family: Poppins;
    
        font-size: 35px;
        color: #001A57;
    }
}
@media(max-width: 700px){
    .text-cont{
        width: 80%;
        position: absolute;
        top: 6.5%;
        left: 1%;
    }
    .text-cont p{
        font-family: Poppins;
    
        font-size: 30px;
        color: #001A57;
    }
}
@media(max-width: 600px){
    .text-cont{
        width: 80%;
        position: absolute;
        top: 6%;
        left: 1%;
    }
    .text-cont p{
        font-family: Poppins;
    
        font-size: 30px;
        color: #001A57;
    }
}
@media(max-width: 500px){
    .text-cont{
        width: 80%;
        position: absolute;
        top: 4.3%;
        left: 1%;
    }
    .text-cont p{
        font-family: Poppins;
    
        font-size: 22px;
        color: #001A57;
    }
} */
.footer__two-widget-menu ul li a{
    font-weight: 400 ;
}