* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


p{
  text-align:center;
}

a{
  text-decoration: none;
  color:rgb(124, 190, 110);
  font-weight: 500;
}

.section-modeling{
    padding-top: 50px;
    text-align:center;
    padding-bottom:50px;
}








.col-md-4{
  margin-left: 45%;
  padding-bottom: 50px;
  padding-top: 90px;
  }

/* ------lines----- */

.container-Lines{
position: relative;
width:100%;
display:flex;
justify-content: flex-end;
align-items:center;
flex-direction: row-reverse;
}

.container-Lines .ring{
position: relative;
width:100px;
height:100px;
margin:-30px;
border-radius: 50%;
border: 4px solid transparent;
border-top:4px solid #2b65f7;
animation: animate 4s linear infinite;

}

@keyframes animate
{
0%
{transform: rotate(0deg);}
100%
{transform: rotate(360deg);}
}


.container-Lines .ring::before{
content:'';
position:absolute;
top:10px;
right:5px;
border-radius:100%;
width:8px;
height:8px;
background: #86d0fe;
box-shadow: 0 0 12px 5px #24b2ffaf, 
0 0 12px 10px #24ecff22, 
0 0 12px 20px #24edff1d, 
0 0 10px 30px #24edff0f;
}




.container-Lines .ring:nth-child(2){
animation: animate2 4s linear infinite;
border-top:4px solid rgb(0, 255, 251);
animation-delay: -3s;
}

@keyframes animate2{
0%
{
transform: rotate(360deg);}
100%
{
transform: rotate(0deg);}
}

.container-Lines .ring:nth-child(2)::before{
  content:'';
  position:absolute;
  bottom:10px;
 left:5px;
  border-radius:100%;
  width:8px;
  height:8px;
  background: #16ffff;
  box-shadow: 0 0 12px 5px #24f8ffaf, 
  0 0 12px 10px #24ecff22, 
  0 0 12px 20px #24edff1d, 
  0 0 10px 30px #24edff0f;
  }

 
.container-Lines .ring:nth-child(3){
position: absolute;
top:-66.66px;
animation-delay: -3.5s;
border-top:4px solid #f72be9;
}

.container-Lines .ring:nth-child(3)::before{
  background: #fd81e2;
  box-shadow: 0 0 12px 5px #f972d1af, 
  0 0 12px 10px #ff249122, 
  0 0 12px 20px #d024ff1d, 
  0 0 10px 30px #ff24f80f;
  }








/* ----gallery---- */

.container
{
width: 100%;
height: 100%;
}
.trans
{
transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
}
.top
{
display: flex;
margin-top: 10vh;
margin-left: auto;
margin-right: auto;
margin-bottom: 10vh;
}


#gallery-ul{
padding-left: 0;

}

#gallery-ul {
display:block;
list-style-type: disc;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}
.top ul
{
list-style: none;
width: 100%;
height: 100%;
z-index: 1;
box-sizing: border-box;
}
.top ul li
{ border:2px solid black;
position:relative;
float: left;
width: 25%;
height: 25%;
overflow: hidden;
}

.top ul li::before
{

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
content: '';
color: white;
opacity: 0.4;
text-align: center;
box-sizing: border-box;
pointer-events: none;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.top ul li:hover::before
{
opacity: 0;
background-color: rgba(0,0,0,0.90);
}
.top ul li img
{
width: 100%;
height: auto;
overflow: hidden;
transform: scale(1.5);
}


.top ul li img
{
width: 100%;
height: auto;
overflow: hidden;

}

.lightbox
{
position: fixed;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.75);
z-index: 999;
opacity: 0;
pointer-events: none;
}

.lightboxtext
{ 
padding:20px;
position: fixed;
margin-top: 9vh;;
color: white;
text-align: left;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.438);
z-index: 1000;
opacity: 1;
pointer-events: none;
align-items: center;

}

.lightboxtext p{
text-align: left;
}


.lightbox img
{

max-width: 90%;
max-height: 80%;
position: relative;
top: -100%;
/* Transition */
transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;
}
.lightbox:target
{
outline: none;
top: 0;
opacity: 1;
pointer-events: auto;
transition: all 1.2s ease;
-moz-transition: all 1.2s ease;
-ms-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
-webkit-transition: all 1.2s ease;
}
.lightbox:target img
{
top: 0;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}





































@media(max-width:2560px){
  .col-md-4{
    margin-left: 47%;
   
    }

}



@media (min-width: 768px){
.logo {
    margin-top: 5px;
}
}


@media(max-width:1180px){


.top ul li {
  position: relative;
  float: left;
  width: 25%; 
  height: 25%; 
  overflow: hidden;
}

}

@media(max-width:992px){
.top ul li {
  position: relative;
  float: left;
  width: 100%; 
  height: 30%;  
  overflow: hidden;
}
}

@media(max-width:882px){
.top ul li {
  position: relative;
  float: left;
  width:100%; 
  height: 30%; 
  overflow: hidden;

}
.col-md-4{
  margin-left: 37%;
  padding-bottom: 50px;
  padding-top: 90px;
  }
}

@media(max-width:680px){
.top ul li {
  position: relative;
  float: left;
  width: 100%; 
  height: 30%;  
  overflow: hidden;
}
.col-md-4{
  margin-left: 35%;
  padding-bottom: 50px;
  padding-top: 90px;
  }
}

@media(max-width:550px){
.top ul li {
  position: relative;
  float: left;
  width: 100%; 
  height: auto; 
  overflow: hidden;
}
}
@media(max-width:450px){
.top ul li {
  position: relative;
  float: left;
  width: 100%; 
  height: auto; 
  overflow: hidden;
}
   
}
@media(max-width:380px){
.top ul li {
  position: relative;
  float: left;
  width: 100%; 
  height: auto; 
  overflow: hidden;
}
}
@media(max-width:360px){
 

}