/*First Section*/
.container {
display: flex;
}

.image-column {
flex-basis: 60%; 
}

.world-image{
width:100%;
margin:0;
}

.text-column {
flex-basis: 40%; 
padding: 0 20px; 
margin-top: 80px;
margin-left: 100px;
}

/*End*/

/*Info*/

.our-info {
min-height: 100vh;
padding: 0;
position: relative;
}
.opacity0{
display: none;
}

.wrapper {
color: rgba(255, 255, 255, 0.75);
position: relative;
padding: 40px 0;
width: 25.5%;
min-width: 208px;
overflow: hidden;
height: 400px;
min-height: 100vh;
background: #053041;
position: relative;
z-index: 1;
display: inline-block;
transition: all 0.8s ease-in-out;
margin-left: -5px;
}

.wrapper:nth-child(2n) {
background: #084862;
}

.wrapper:nth-child(3n) {
background: #0a6083;
}

.wrapper:nth-child(4n) {
background: #0d78a4;
}

.details {
opacity: 0;
visibility: hidden;
}

.wrapper .description {
opacity: 1;
padding: 40px 40px 446px;
width:416px;
}

.wrapper .description .details {
opacity: 1;
visibility: visible;
margin-right:100px;
}

.wrapper h4 {
text-transform: capitalize;
transform: rotate(-90deg);
text-align: right;
white-space: nowrap;
position: absolute;
top: 144px;
right: -70px;
color: rgba(255, 255, 255, 0.55);
}

.wrapper .description h4 {
transform: rotate(0);
margin-left: 100px;
position: static;
margin-top: 0;
margin-left: 0;
text-align: left;
top: auto;
right: auto;
color: #fff;
}

.designation {
font-weight: 700;
font-size: 14px;
line-height: 20px;
margin-top: 16px;
}

.wrapper p {
margin-top: 16px;
white-space: normal;
opacity: 1;
}

.photo {
position: absolute;
width: 428px;
height: 350px;
bottom: 0;
left: 0;
background-size: cover;
background-position: center center;
}

.photo img {
max-width: 100%;
overflow: hidden;
display: block!important;
object-fit: contain;
}

.slider {
width: 100%;
overflow-x: auto;
overflow: -moz-scrollbars-none;
white-space: nowrap;
position: relative;
scroll-snap-type: x mandatory;
}

.slider::-webkit-scrollbar {display:none; }

.wrapper img {
object-fit: cover;
height: 100%;
width: 100%;
display: none;
}

.description {
display: none;
position: absolute;
top: 0;
height: 100%;
}

.Des {
transform: rotate(180deg);
white-space: nowrap;
position: absolute;
top: 50%;
left: -20px;
margin-left:300px;
transform-origin: top left;
transition: opacity 0.3s ease-in-out;
}

.details p{
font-size:13px;
}

.wrapper:hover .Des {
opacity: 0;
}

.wrapper:hover {
z-index: 2;
max-width: 416px;
width: 416px;
}

.wrapper:hover .description {
display: block;
}
.wrapper:hover .description h4{
display:block;
}

.wrapper:hover .photo.noshow {
display: none;
}

.wrapper:last-of-type{
float: right;
position:absolute;
}
/*End*/

.bar{
display: none;
}

.mobile{
display: none;
}

@media (max-width: 787px) {

header {
display: flex;
justify-content: center; 
align-items: center;
background-color: #f2f2f2;
}

.logo-container {
display: flex;
align-items: center; 
}

.logo {
max-height: 100%; 
max-width: 100%;
}

.container .image-column{
display: none;
}

.container .text-column{
flex-basis:100%;
margin:20px;
}

.our-info{
display: none;
}

.bar {
display: block;
border-top:1px solid #ccc;
z-index: 2;
background-color: white;
position: sticky;
bottom: 0;
width: 100%;
height: auto;
overflow-x:hidden;
justify-content: space-between;
}

.menu1 {
list-style: none;
padding: 0;
margin: 0;
display: flex;
font-size: 12px;
margin-top:10px;
margin-left:10px;
justify-content: space-between;
}

.menu1 li {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 13px;
}


.menu1 li:last-child {
margin-right: 0;
}

.menu1 a {
color: #474747;
text-decoration: none;
padding: 5px 10px;
}

.menu1 a:hover {
color:#007bff;
border-radius: 4px;
}

.menu1 img {
width: 30px; 
height: 30px; 
}

footer{
display: none;
}

.mobile{
display: block;
margin:20px;
}

.mobile img{
width:100%;
height:auto;
}


.mobile {
font-size: 16px; 
}

.mobile h2 {
font-size: 1.1em;
}

.mobile p {
font-size: .7em;
}

h1{
font-size:18px;
}
h2{
font-size:16px;
}

h3{
font-size:15px;
}
h4{
font-size:13px;
}

h5{
font-size:13px;
}
p{
font-size:12px;
}
}