@charset "utf-8";

/*
***********************************
* Template Name: Robotics - Multipurpose Resposnive HTML5 Theme
* Author Name: Md.Mehedi Hassan
* Support: mehedi15-12314@diu.edu.bd 
* Version: 1.0.0

* This file contains the styling for the actual theme, this is the file you need to edit to change the look of the theme.

The contents of This file are outlined below >>>>

*** SEARCH EACH SECTION AS IT COMMENTS, YOU WILL GET THE RIGHT SECTION.

**************************************************
**************************************************
*** CSS TABLE

01. IMPORT CSS
02. DEFAULT CSS
03. PRELOADER CSS
04. BTM TO TOP CSS
05. SCROLLBAR CHANGE CSS
06. HEADER AREA CSS
07. SLIDER AREA CSS
08. EVENT AREA CSS
09. TEAM AREA CSS
10. VIDEO AREA CSS
11. GALLERY AREA CSS
12. ABOUT US AREA CSS
13. Index FOOTER AREA CSS
14. TEAM MEMBER AREA CSS

 */
/*-----------------------------------
01. IMPORT CSS
-------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600;700;800;900&family=Poppins:wght@200;300;400;500&display=swap');


/*-----------------------------------
02. DEFAULT CSS
-------------------------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   /*  font-family: 'Poppins', sans-serif; */
}
h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
   /*  font-family: 'Kanit', sans-serif; */
}
p{
    margin: 0;
    padding: 0;
    line-height: 23px
}
a, a:hover, a:active, a:visited, a:focus{
    text-decoration: none
}
a{
    display: inline-block
}
ul{
    list-style: none;
    margin: 0;
    padding: 0
}
ul li{
    display: inline-block
}
.space{
    padding: 100px 0
}
.top{
    padding-top: 100px
}
.btm{
    padding-bottom: 100px
}

.df-btn{
    display: inline-block;
    padding: 14px 40px;
    background: #1975C4;
    color: #fff;
    text-transform: uppercase;
    margin-top: 7px;
    transition: 0.3s ease-in-out
}
.df-btn span{
    margin: 0 7px
}
.df-btn:hover{
    background: red;
    color: #fff;
    transition: 0.3s ease-in-out
}


/*-----------------------------------
03. PRELOADER CSS
-------------------------------------*/
.robotics-preloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #00080f;
    z-index: 9999999999
}

.robotics-loader {
    width: 100px;
    height: 100px;
    margin: 44vh auto;
    border-radius: 50%;
    position: relative
}

.robotics-loader .robotics-inner {
    width: 100%;
    height: 100%;
    border: 50px solid transparent;
    border-top-color: transparent;
    border-left-color: transparent;
    border-top-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: 0.3s spin infinite linear
}

.robotics-loader .robotics-inner:nth-child(1) {
    border-left-color: #fff;
    opacity: 0.25
}

.robotics-loader .robotics-inner:nth-child(2) {
    animation-direction: reverse;
    animation-duration: 2.5s
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

/*-----------------------------------
04. BTM TO TOP CSS
-------------------------------------*/
a.btm-to-top {
    width: 45px;
    height: 45px;
    border: 1px solid #fff;
    background: #1c1742;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 25px;
    bottom: 40px;
    z-index: 999999999
}
/*-----------------------------------
04. BTM TO TOP CSS
-------------------------------------*/
.btm-to-top{
    position: fixed;
    right: 15px;
    bottom: 15px;
    background: #1975C5;
    color: #fff;
    width: 45px;
    height: 45px;
    line-height: 29px;
    display: none
}
.btm-to-top:hover{
    color: #fff;
    background: #2b3e99
}

/*-----------------------------------
05. SCROLLBAR CHANGE CSS
-------------------------------------*/
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #FFF;
}

::-webkit-scrollbar-thumb {
    background: #1975C5;
}

::-moz-selection {
    background: #1975C5;
    color: #fff
}

::selection {
    background: #1975C5;
    color: #fff
}




/*-----------------------------------
06. HEADER AREA CSS
-------------------------------------*/
/* .bgcolor{
  background-color:#00080f;
} */
.menu li a:hover{
  color:skyblue!important;

}
.menu li a{
  transition-duration:.5s;
}
.apply a{
  background-color:#1c1742;
  
  border-radius: 20px;
  padding: 10px 22px;
  color:white;
  text-decoration:none;
  font-size: 15px;
}
.apply a:hover{
  background-color: #2b3e99;
}

.menuBarFont i{
  margin-top: 5px;
}


/*-----------------------------------
07. theme color AREA CSS
-------------------------------------*/
.theme_color{
 position: fixed;
 right: 45px;
 top: 29%;
 /* background: #1c1742; */
 z-index: 99999;
 text-align: center;
 border-radius: 20px;
 display: none;
}

.theme_droper{
 position: fixed;
 right: 40px;
 top: 25%;
 /* background: #1c1742; */
 z-index: 99999;
 text-align: center;
 border-radius: 20px;
}
.theme_color ul{
  padding: 8px 10px;
}
.theme_color ul li{
  display: block;
}

/* .theme_color ul li a{
   height: 10px;
  width:10px;
  background: #00080f; 

} */
.theme_color ul li:nth-child(1) a{
  height: 10px;
  width:10px;
  background: #00080f;
  border-radius: 100%;
}
.theme_color ul li:nth-child(2) a{
  height: 15px;
  width:15px;
  background:#FDFDFD;
  border-radius: 100%;
}
.theme_color ul li:nth-child(3) a{
  height: 20px;
  width:20px;
  background: #01457D;
  border-radius: 100%;
}



/*-----------------------------------
08. EVENT AREA CSS
-------------------------------------*/

.imgRobo img{
     width: 100%;
  height: 100%;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes example {
  0%   {top:0px;}

  75%  {left:0px; top:10px;}
  100% {left:0px; top:0px;} 
}

/*-----------------------------------
09. TEAM AREA CSS
-------------------------------------*/



    .socialIcon li{
    list-style-type: none;
    padding:8px;

    }
    .socialIconsm li{
    list-style-type: none;
    padding:5px;
    font-size: 12px;
    }




/*-----------------------------------
11. GALLERY AREA CSS
-------------------------------------*/
.galleryarea a{
  display: inline-block;
  }
  .galleryarea b{
  display: block;
  padding: 10px;
  }
  button{
  padding: 5px 10px;
  }
  .galleryarea img,
  .image{
  width: 30vw;
  max-width: 300px;
  margin: 1vh 1vw;
  }
  .image{
  display: inline-block;
  height: 20vw;
  max-height: 200px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  }
  .spotlight.image{
  cursor: pointer;
  }
/*-----------------------------------
12. ABOUT US AREA CSS
-------------------------------------*/
 .holderCircle { width: 500px; height: 500px; border-radius: 100%; margin: 0px auto; position: relative; }


.dotCircle { width: 100%; height: 100%; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; z-index: 20; }
.dotCircle  .itemDot { display: block; width: 80px; height: 80px; position: absolute; background: #ffffff; color: #1c1742; border-radius: 20px; text-align: center; line-height: 80px; font-size: 30px; z-index: 3; cursor: pointer; border: 2px solid #e6e6e6; }
.dotCircle  .itemDot .forActive { width: 56px; height: 56px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; }
.dotCircle  .itemDot .forActive::after { content: ''; width: 5px; height: 5px; border: 3px solid #7d4ac7; bottom: -31px; left: -14px; filter: blur(1px); position: absolute; border-radius: 100%; }
.dotCircle  .itemDot .forActive::before { content: ''; width: 6px; height: 6px; filter: blur(5px); top: -15px; position: absolute; transform: rotate(-45deg); border: 6px solid #a733bb; right: -39px; }
.dotCircle  .itemDot.active .forActive { display: block; }
.round { position: absolute; left: 40px; top: 45px; width: 410px; height: 410px; border: 2px dotted #a733bb; border-radius: 100%; -webkit-animation: rotation 100s infinite linear; }
.dotCircle .itemDot:hover, .dotCircle .itemDot.active { color: #ffffff; transition: 0.5s;   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d4ac7+0,a733bb+100 */ background: #1c1742; /* Old browsers */ background: -moz-linear-gradient(left, #1c1742 0%, #1c1742 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #1c1742 0%, #1c1742 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #1c1742 0%, #1c1742 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d4ac7', endColorstr='#a733bb', GradientType=1); /* IE6-9 */ border: 2px solid #ffffff; -webkit-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13); -moz-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13); box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13); }
.dotCircle .itemDot { font-size: 40px; }
.contentCircle { width: 250px; border-radius: 100%; color: #222222; position: relative; top: 150px; left: 50%; transform: translate(-50%, -50%); }
.contentCircle .CirItem { border-radius: 100%; color: #222222; position: absolute; text-align: center; bottom: 0; left: 0; opacity: 0; transform: scale(0); transition: 0.5s; font-size: 15px; width: 100%; height: 100%; top: 0; right: 0; margin: auto; line-height: 250px; }
.CirItem.active { z-index: 1; opacity: 1; transform: scale(1); transition: 0.5s; }
.contentCircle .CirItem i { font-size: 180px; position: absolute; top: 0; left: 50%; margin-left: -90px; color: white; opacity: 0.01; }
@media only screen and (min-width:300px) and (max-width:599px) {
  .holderCircle { width: 300px; height: 300px; margin: 110px auto; }
  .holderCircle::after { width: 100%; height: 100%; }
  .dotCircle { width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
}
@media only screen and (min-width:600px) and (max-width:767px) { }
@media only screen and (min-width:768px) and (max-width:991px) { }
@media only screen and (min-width:992px) and (max-width:1199px) { }
@media only screen and (min-width:1200px) and (max-width:1499px) { }
  .title-box .title { font-weight: 600; letter-spacing: 2px; position: relative; z-index: -1; }
        .title-box span { text-shadow: 0 10px 10px rgba(0, 0, 0, .15); font-weight: 800; color: #640178; }
        .title-box p {font-size: 17px; color: white; opacity: .5; line-height: 2em; }


@media screen and (max-width: 500px) {
 .imageR {
    max-height:100%:
  }
}


/*-----------------------------------
13. Index FOOTER AREA CSS
-------------------------------------*/
.QuickLinks a{
    text-decoration: none;
    color: white;
    font-size: 15px;
}
.QuickLinks a:hover{
    color: #fd7e14;
}
.QuickLinks p{
    font-size: 15px;
}

/*-----------------------------------
14. TEAM MEMBER AREA CSS
-------------------------------------*/
@media only screen and (max-width: 400px) {
.apply a{
  font-size: 9px;
}
.menuBarFont i {
  font-size: 20px !important;

}


}

/*-----------------------------------
14. TEAM MEMBER AREA CSS
-------------------------------------*/
/*
font-family: 'Kanit', sans-serif;
font-family: 'Poppins', sans-serif;
*/