@charset "utf-8";
/* CSS Document */


body {
  margin: 0 auto;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-size: 55px;
font-family: 'Marmelad', sans-serif;
  
 
}

.dark-mode {
  background-color: black;
  color: white;
}



.uppercase {
	
	text-transform: uppercase;
	 
}


.overflow {
	overflow: hidden;
}

.primary {
	
	color: #000;
}

.burgundy {
	
	color: #4F1818;

}

.teal {
	color: #375f63;
}

.peach {
	color: 	#f5c08f;
}

.wht{
	
	color: ghostwhite;

}

.ylw {
	color: #ebea9b;
}


.opac1 {
filter: opacity(10%);
}

.opac5 {
filter: opacity(50%);
}


.opac8 {
filter: opacity(80%);
}

.txtcenter {
	text-align: center;
}


a {
  color: #375f63;
  text-decoration: none;
  background-color: transparent;
}

a:active {
    opacity: .5;
  
}


a:hover {
    opacity: .5;
  
}

a:visited {
    color: #569197;
	text-decoration: none;
  	background-color: transparent;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1px;
  padding: 0px;
}

p {
  margin-top: 0;

}


.textj{
	text-align: justify;
}


.container {
	position: relative;
	width: 100%;
	height: 100vh;
	padding-left: 5%;
	padding-right: 5%;
	background-image: linear-gradient(to bottom, rgba(200, 200, 200, 0.1), rgba(52, 146, 234, 0.22)), url("../img/sobo-telecom-fiber-optics.jpg");
	background-color: #e4f2ff;
	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
	overflow-x: hidden;
	
}







.main {
	width: 100%;
	background: #b4e3e2;
	align-content: center;
	
	
}

.sbimgBX {
	
	display: flex;
	justify-content: center;
	
}


.sbgimgBX img {
	max-width: 100%;
	height: auto;
	padding: 10px;
}


.logo
{
	max-width: 300px;
	cursor: pointer;
	animation: zoomin 1s linear 1;
	animation-delay: 1s;
	visibility: hidden;
	animation-fill-mode: forwards;
	margin: 30px;
	z-index: 20;
	-webkit-filter: drop-shadow(5px 5px 5px #d0d9e8);
    filter: drop-shadow(5px 5px 5px #d0d9e8);
	
}




@keyframes zoomin{
	0% {
		transform: scale(0.5);
		visibility: visible;
	}
	100% {
		transform: scale(1);
		visibility: visible;
	}
}





.navbar {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	}


#trigger  {
	position: absolute;
	top: -200px;
}


.trigger  img  {
	display: none;
	
	
}


nav {
	max-width: 490px;
	max-height: 65px;
	flex: 1;
	align-content: center;
	justify-content: center;
	margin-top: 25px;
	background:linear-gradient(.55turn, #000 0 60%, #375f63 90% 40%);
	border-radius: 50px 20px;
	box-shadow: 0 25px 10px -15px rgba(0,0,0, 0.4);
	opacity: .8;
	animation: movedown 1s linear 1;
	animation-delay: 2s;
	visibility: hidden;
	animation-fill-mode: forwards;
}

nav ul li {
	list-style: none;
	display: inline-block;
	text-decoration: none;
	color: #fff;
	padding: 5px 22px 22px 5px;
	align-items: center;
	font-family: 'Jomhuria', cursive;
	cursor: pointer;
	position: relative;
	z-index: 2;
	transition: color 0.5s;
}





@keyframes movedown{
	0% {
		transform: translateY(-100px);
		visibility: visible;
	}
	100% {
		transform: translateY(0);
		visibility: visible;
	}
}



nav ul li::after{
	content: "";
	background:#fff;
	width: 100%;
	height: 80%;
	border-radius: 50px 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	opacity: 0;
	transition: top 0.5s, opacity 0.5s;
}

nav ul li a{
	color: #fff;
	position: relative;
	padding: 5px;
	font-size: 35px;
	font-weight: 100;
}



nav ul li a:hover{
	color: #000;
	
	
}

nav ul li:hover::after{
	top: 30%;
	opacity: 1;
	height: 50%;
	
}


.help
{
	position: absolute;
	top: 125px;
  	margin-left: auto;
  	margin-right: auto;
	max-width: 325px;
	cursor: pointer;
	animation: zoomin 2s linear 1;
	animation-delay: 7s;
	visibility: hidden;
	animation-fill-mode: forwards;
	margin: 20px;
	z-index: 1;
	
}




.tagb {
	
  	justify-content: center;
  	align-items: center;
	position: absolute;
	margin: 20px;
	bottom: 15%;
	max-height: 30%;
	

}



.tagb h3{
	
	text-align: center;
	font-size: 60px;
  	font-family: 'Monoton', cursive;
	font-weight: 500;
	text-shadow: 2px 2px 4px #fff;
	animation: moveright 1s linear 1;
	animation-delay: 3s;
	visibility: hidden;
	animation-fill-mode: forwards;
}


.tagb h4{
	display:block;
	text-align: center;
	font-size: 25px;
	font-weight: 800;
	font-family: 'Julius Sans One', sans-serif;
	text-shadow: 2px 2px 4px #fff;
	animation: moveup 1s linear 1;
	animation-delay: 5s;
	visibility: hidden;
	animation-fill-mode: forwards;
}


.tagw {
	
  	justify-content: center;
  	align-items: center;
	position: absolute;
	margin-bottom: 20px;
	bottom: 0;
	
	

}


.tagw h3{
	
	text-align: center;
	font-size: 25px;
	color: #fff;
	font-family: 'Anton', sans-serif;
	font-weight: 800;
	text-shadow: 2px 2px 4px #000;
	animation: moveright 1s linear 1;
	animation-delay: 3s;
	visibility: hidden;
	animation-fill-mode: forwards;
}


@keyframes moveright{
	0% {
		transform: translateX(-100px);
		visibility: visible;
	}
	100% {
		transform: translateX(0);
		visibility: visible;
	}
}



@keyframes moveup{
	0% {
		transform: translateY(100px);
		visibility: visible;
	}
	100% {
		transform: translateY(0);
		visibility: visible;
	}
}


.tagnp {
	
  	justify-content: center;
  	align-items: center;
	position: absolute;
	margin-bottom: 30px;
	bottom: 0;
	
	

}



.tagnp h3{
	
	text-align: center;
	font-size: 30px;
	font-family: 'Anton', sans-serif;
	font-weight: 100;
	text-shadow: 2px 2px 4px #fff;
	animation: moveright 1s linear 1;
	animation-delay: 3s;
	visibility: hidden;
	animation-fill-mode: forwards;
}



.pghd {
	
  	justify-content: center;
  	align-items: center;
	position: absolute;
	margin-top: 200px;
	
	

}



.pghd h3{
	
	text-align: center;
	font-size: 30px;
	font-family: 'Anton', sans-serif;
	font-weight: 100;
	text-shadow: 2px 2px 4px #fff;
	animation: moveright 1s linear 1;
	animation-delay: 1s;
	visibility: hidden;
	animation-fill-mode: forwards;
	margin-bottom: 20px;
}

.pghd p{
	
	
	font-size: 16px;
	font-family: 'Atkinson Hyperlegible', sans-serif;
	

}





.mainhd {
	font-family: 'Patua One', cursive;
	font-size: 36px;
	color: #fff;
	margin: 10px;
	font-weight: 100;
	letter-spacing: 4px;
	opacity: .7;

	}


.invert {
	filter: invert(1);
}


.button {
  display: inline-block;
  padding: 3px 3px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #003334;
  background-color: #ebea9b;;
  border: none;
  border-radius: 15px;
  box-shadow: 5px -5px 20px 5px rgba(155,145,155, 0.4);
}

.button:hover {
	opacity: .5;
}

.button:active {
  background-color: #003334;
  
  transform: translateY(4px);
}




.pic {
	width: 100%;
	display: flex;
	column-gap: 20px;
	justify-content: space-between;
	align-content: center;	
	padding: 20px;
	height: 290px;
	margin-bottom: 10px;
  	overflow-y: hidden;
  	overflow-x: auto;
}


.pic img {
	border-radius: 20px;
	scroll-snap-align: start;
}

.pic::-webkit-scrollbar {
		 width: 7px; 
		
	}



.pic::-webkit-scrollbar-track {
		 background: #000;
		border-radius: 50px;	
		
	}	
	
	
.pic::-webkit-scrollbar-thumb {
		background:linear-gradient(.55turn, #027b83 0 30%, #375f63 90% 70%);
		border-radius: 50px;
	   
		opacity: .5;
		
	}	




.cnCard {
	position: relative;
	background: #000;
	width:  375px;
	height: 485px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 30px;
	box-shadow: 0 30px 30px rgba(0,0,0, 0.5);
	margin-bottom: 50px;

}

 .cnCard .imgbx {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}




 .cnCard .imgbx img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 0.5s;
	border-radius: 30px; 

}

 .cnCard:hover  img {
	opacity: 0;
	 

}

 .cnCard imgBx {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}


.cnCard  .cncontent {
	position: absolute;
	bottom: 20px;
	left: 10%;
	width: 80%;
	height: 80px;
	background: #fff;
	transition: 0.5s;
	overflow-y: scroll;
	
	padding: 15px;
	box-sizing: border-box;
	
	
}


.cnCard  .cncontent::-webkit-scrollbar {
		 width: 7px; 
		
	}

.cnCard:hover .cncontent {
	
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	border-radius: 30px;
}

.cnCard  .cncontent h3 {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 200;

}

.cnCard  .cncontent h4 {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 100;

}

.cnCard  .cncontent p {
	margin: 10px 0 0;
	padding: 0;
	opacity: 0;
	line-height: 1.2em;
	transition: 0.5s;
	text-align: justify;
	

}

.cnCard:hover  .cncontent p {
	opacity: 1;
	

}



.about {
	position: relative;
	width: 100%;
	background: #e2fcfe;
	padding: 50px;
}




.about h1 {
	font-weight:  100;
	font-size: 35px;
	font-family: 'Monoton', cursive;
	padding: 10px;
	text-align: center;
	color: #000;
    
	
	
}

.about .contentBx{
	margin-top: 20px;
	padding: 5px 20px 5px 20px;
	width:  100%;
	text-align: justify;
	
	
}
.about h2 {
	font-weight:  100;
	font-size: 25px;
	font-family: 'Jomhuria', cursive;
	margin-top: 50px;
	margin-bottom: 20px;
	text-align: center;

}






.yt {
	 position: relative;
	 background: transparent;
	 padding-bottom: 56.25%;
	 padding-top: 20px;
	 height: 0;
	 overflow: hidden;
	 margin-bottom: 25px;
	
	  }
	  
	  	 
.yt iframe 
{ 
 	position: absolute;
 	top: 0;
 	left: 0px; 
	margin: 20px;
 	width: 90%;
  	height: 90%;
    
   }





.contact {
	
	background: #8197a4;
	width: 100%;
	padding:  50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:  #000;
	
}

.contact .contentBx {
	width: 60%;
	
}


.contact h1 {
	font-weight:  100;
	font-size: 25px;
	font-family: 'Monoton', cursive;
	padding: 10px;
	text-align: center;
	color: #000;

}


.contact h2 {
	font-weight:  100;
	font-size: 25px;
	color: #fff;
	font-family: 'Rye', cursive;
	margin-top: 50px;
	margin-bottom: 20px;
	text-align: center;

}





.services {
	position: relative;
	width: 100%;
	min-height: 100vh;
	display: flex;
	
}

.services .contentBx{
	background: #375f63;
	padding:  50px;
	width:  60%;
}

.services h1 {
	font-weight:  100;
	font-size: 35px;
	font-family: 'Monoton', cursive;
	margin-top: 20px;
	margin-bottom: 30px;
	text-align: center;
	color: #fff;

}


.services .imgBx {
	background: url("../img/sobo-telecom-services2.jpg");
	width: 40%;
	background-size: auto;

	
	
  
}



.services h4 {
	font-weight:  300;
	font-size: 25px;
	color: #fff;
	font-family: 'Julius Sans One', sans-serif;
	margin-top: 30px;
	margin-bottom: 20px;
   padding: 5px;
}

.services p {
	
   padding: 5px;
}
.services a {
	color: #ebea9b;

}


.services a:hover {
	opacity: .5;

}






.slidep .imgBx {
	background-image:  url("../img/trpark3.jpg");
	width: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    animation: imgs 30s linear infinite;
	animation-delay: .5s;
  	animation-fill-mode: forwards;
}

@keyframes imgs {
    0%{
        background-image:  url("../img/trpark3.jpg");
    }
    20%{
        background-image:  url("../img/trpark1.jpg");
    }
    60%{
        background-image:  url("../img/trpark2.jpg");
    }
	80%{
        background-image:  url("../img/trpark4.jpg");
    }

}



.smtx {
	
	font-size: 15px;
	line-height: 14px;
}







footer {
    width:100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    display: grid;
	padding: 50px;
    
}

footer h2 {
	
	padding: 20px;
	
}


footer h3 {
	
	padding: 20px;
	
}


.cert {
	
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	column-gap: 50px;
	justify-content: center;
	text-align: center;
	align-items: flex-start;
	padding: 30px;
	
}


.cert img {

	height: 125px;
	
	
}







.phone a {
    margin-left:10px;
background: rgb(55,95,99);
background: linear-gradient(293deg, rgba(55,95,99,1) 1%, rgba(77,218,217,1) 29%, rgba(39,100,92,1) 51%, rgba(84,237,224,1) 65%, rgba(66,151,148,1) 79%, rgba(148,226,219,1) 89%);
 -webkit-text-fill-color: transparent; 
        -webkit-background-clip: text;    
    
}

.social  {
    height: 45px;
    margin: 15px;
   
    
}
    
.copyright {
    
    font-size: 1em;
   padding-top: 20px;
    
    
}


.tab-section {
	margin: 2px auto;
	z-index: -1;
	
	
	}
.tab-area {
	
	position: relative;
	padding: 10px;
	width: 100%;
	color: #000;
	align-content: center;
	z-index: 5;
}
 
.tab-area input {
    position: absolute;
	opacity: 0;
	
	
}

 .tab-area label {
	 display: block;
     position: relative;
	 padding: 20px;
    line-height: 25px;
    margin: 0 0 1px 0;
    cursor: pointer;
    background:linear-gradient(.55turn, #000 0 60%, #22818a 90% 40%);
	border-radius: 15px 50px 5px 5px;
	
    color: #fff;
    transition: ease .5s;
	font-size: 1.5em;
	text-align: center;
}

.tab-area label:hover {
    background: #b3a57c;
	color: #000;
    
}

.tab-area p{
    font-size: 18px;
    
}



.tab-content {
   
	max-height: 0;
	overflow: hidden;
    padding: 0px 5px;
	background: #cfe5e7;
	transition: max-height .35s;
    border: 1px solid none;
    margin: 0 0 2px 0;
    border-radius: 0px 0px 30px 30px
	
}

.tab-content a {
	color: #053c42;
    font-weight: 800;
}


.tab-area input:checked ~ .tab-content {
	max-height: 100%;
	
}


.info{
	
	background:  #b3a57c;
	padding:  50px;
	text-align: center;
	font-size: 18px;
	
}


@media only screen and (max-width: 1250px)
	
{
.logo
{
	max-width: 300px;
	margin: 10px;

	
}
	
.help
{

	max-width: 300px;
	margin: 30px 5px 10px 5px;

	
}
	
	
.help img
{

	height: 300px;
	z-index: 1;

	
}	
	





.tagb h3{
	

	font-size: 50px;

}


.tagb h4{

	font-size: 20px;

}



}


@media only screen and (max-width: 1100px)
	
{

	


	



nav {
	max-width: 50px;
	max-height: 50px;
	flex: 1;
	align-content: center;
	justify-content: center;
	margin-top: 25px;
	margin-left: 5px;
	background:linear-gradient(.55turn, #000 0 40%, #375f63 90% 60%);
	border-radius: 30px;
	box-shadow: 25px 25px 25px -15px rgba(100,100,100, 0.4);
	z-index: 100;
    
}	
	
	
	
	
	nav ul li	{
		visibility: hidden;
	}
	
	
	
.trigger {
		cursor: pointer;
		padding-bottom: 30px;
	}

	
	


	
		
.trigger .n1 img  {
	display: flex;
	justify-content: space-around;
	width: 40px;
	margin: 20px 5px 20px 5px;
	opacity: .8;

	
}
	


.trigger .n2 img {
	display: none;
	
	
}	
	
input#trigger:checked  ~ nav ul li{
   visibility: visible;
	
}
	
	
#trigger:checked ~ .n1 img   {
display:none;
}
	
#trigger:checked ~ .n2 img   {
display: block;
}	
	
	

	
	
	

nav ul li {
	list-style: none;
	width: 200px;
	display: block;
	text-decoration: none;
	color: #777;
	padding: 5px;
	text-align: center;
	font-family: 'Jomhuria', cursive;
	left: -200px;
	cursor: pointer;
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 50px 20px;
	box-shadow: 0 25px 10px -15px rgba(0,0,0, 0.4);
	box-sizing: border-box;
	line-height: 20px;
	margin-top: 20px;
	
	

}

nav ul li::after{
 display: none;
}

nav ul li a{
	color: #003334;
	position: relative;
	margin-top: 15px;
	font-size: 30px;
	font-weight: 600;
    

}




nav ul li a:hover{
	color: #000;
	opacity: .9;

	
}

nav ul li:hover::after{

	
	
}	
	
.help
{

	max-width: 250px;
	margin: 10px;

	
}
	
	
.help img
{

	height: 250px;
	z-index: 1;

	
}	
		




.tagb h3{
	

	font-size: 40px;

}


.tagb h4{

	font-size: 19px;


	}
	
.subhd  {

	margin-left: 10%;
	margin-right: 10%;
}	

.info{
	
	padding:  20px;
	font-size: 16px;
	

	
}	
	
	
	
.services {
	heighh: 100%;
	flex-direction: column;
	
}


.services .contentBx{

	padding:  15px;
	width:  100%;
}

.services h1 {

	font-size: 25px;


}


.services .imgBx {
	background: url("../img/sobo-telecom-services2.jpg");
	width: 100%;
	min-height: 620px;
	background-size: cover;
    background-position: center;
	background-repeat: no-repeat;
  
}



.services h4 {

	font-size: 20px;

}
	
	
	
 .tab-area label {


	font-size: 1.2em;
	padding: 10px;
    line-height: 22px;


}	
	
.tab-area p{
    font-size: 16px;
    
}	

.about {
	
	width: 100%;
	padding: 15px;
	display: block;
	align-items: center;
	
}

.about .contentBx {
	max-width: 100%;
	font-size: 16px;
	padding:  15px;
	margin-top: 10px;
}


.about h1 {

	font-size: 25px;


    
	
	
}

	

.about h2 {

	font-size: 20px;

}



.contact {
	

	padding:  10px;
	padding-top: 5px;
	margin-top: 0;
 	flex-direction: column;
	justify-content: center;
	align-content: center;
}





.contact.contentBx {
	width: 100%;
	padding:  10px;

}
	
.contact .contentBx h1 {

	font-size: 20px;
	
	text-align: center;


}
	
.contact .contentBx a {

	font-size: 14px;
	padding: 1px;
	text-align: center;
	


}	

.contact .MapBx {
	
	width: 100%;
    padding:  10px;
	
}

		


		
.contact .MapBx iframe 
{ 
 
 	width: 275px;
  	height: auto;
	margin: auto 0;
    
   }	

	
	
	
	.footer {
		padding: 10px;
	

}
	



}




@media only screen and (max-width: 850px)
	
	{	
		
.container {
	
	padding-left: 10px;
	padding-right: 10px;
    width: 100%;
	
}	
		
	
.logo
{
	width: 75%;
	
	margin: 20px 20px 20px 10px;

	
}	
		
		
nav {

	margin-top: 25px;
	margin-left: 5px;
	margin-right: 10px;

    
}			
		

.help
{

	animation: none;

	
}	
		
		


.tagb {
	

	bottom: 50%;
	
	

}


.tagb h3{
	

	font-size: 35px;
	margin-bottom: 10px;

}


.tagb h4{

	font-size: 16px;
	padding: 10px;


	}
		

	
		
.return {
	
	bottom: 0;
	margin-bottom: 5px;
	 
	
}	
	
	
		
		
}