*{ margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } .full-screen-video-container{ position: fixed; opacity: 0.9; height: 100vh; width: 100vw; overflow-x: scroll; -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .full-screen-video-container::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .full-screen-video-container video { opacity: 0.9; z-index: -1; position: fixed; width: 100%; height: 600%; min-width: 100%; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (min-aspect-ratio: 16/9) { #videoBG { width:100%; height: auto; } } @media (max-aspect-ratio: 16/9) { #videoBG { width:auto; height: 100%; } } /*----------------menu----------------*/ nav{ position: relative; overflow-x: hidden; padding: 0; margin: 0; } a{ text-decoration: none; } li{ list-style: none; } nav{ background : rgba(240, 235, 235, 0.861); height: 80px; width: 100%; } label.logo{ color: white; font-size: 35px; line-height: 80px; padding: 0 100px; font-weight: bold; } nav ul{ margin-top: 15px; float: right; margin-right : 20px; } nav ul li{ display: inline-block; line-height: 45px; margin: 0 5px; } nav ul li a{ color : rgb(30, 30, 30); font-size: 17px; text-transform: uppercase ; padding: 7px 13px; border-radius: 3px; } nav ul li a:hover{ background : rgb(176, 175, 175); color: black; transition: 0.4s; font-size: 25px; } .checkbtn{ font-size: 30px; color: white; float: right; line-height: 80px; margin-right: 40px; cursor: pointer; display: none; } #check{ display: none; } .wrapper { max-width: 75rem; padding: 2rem; margin: 0 auto; } /* Gallery */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 12.5rem); gap: .5rem; } /* Gallery Layout */ .gallery__item--1 { grid-column: 1 / span 1; grid-row: 1 / span 1; } .gallery__item--2 { grid-column: 1 / span 1; grid-row: 2 / span 1; } .gallery__item--3 { grid-column: 2 / span 1; grid-row: 1 / span 2; } .gallery__item--4 { grid-column: 3 / span 1; grid-row: 1 / span 3; } .gallery__item--5 { grid-column: 1 / span 2; grid-row: 3 / span 2; } .gallery__item--6 { grid-column: 3 / span 1; grid-row: 4 / span 1; } /* Gallery Link */ .gallery__link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; } /* Gallery Link Overlay */ .gallery__overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); font-size: 1.5rem; color: #fff; font-weight: 700; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .2s; } .gallery__link:hover .gallery__overlay { opacity: 1; } /* Gallery Overlay Text */ .gallery__overlay span { position: relative; line-height: 3rem; } .gallery__overlay span:before, .gallery__overlay span:after { content: ''; position: absolute; height: 2px; width: 0; background: #fff; transition: width .3s ease-out .2s; } .gallery__overlay span:before { top: 0; left: 0; } .gallery__overlay span:after { bottom: 0; right: 0; } .gallery__link:hover .gallery__overlay span:before, .gallery__link:hover .gallery__overlay span:after { width: 100%; } /* Gallery Image */ .gallery__image { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform .5s, filter .5s; } .gallery__link:hover .gallery__image { transform: scale(1.2); filter: blur(2px); } @media screen and (max-width: 60rem) { .wrapper { padding: 1rem; } .gallery { grid-template-columns: repeat(2, 1fr); } /* Gallery Layout */ .gallery__item--1 { grid-column: 1 / span 1; grid-row: 1 / span 1; } .gallery__item--2 { grid-column: 1 / span 1; grid-row: 2 / span 1; } .gallery__item--3 { grid-column: 2 / span 1; grid-row: 1 / span 2; } .gallery__item--4 { grid-column: 1 / span 1; grid-row: 3 / span 2; } .gallery__item--5 { grid-column: 2 / span 1; grid-row: 3 / span 1; } .gallery__item--6 { grid-column: 2 / span 1; grid-row: 4 / span 1; } .gallery__overlay { font-size: 1.25rem; } } @media screen and (max-width: 35rem) { .gallery { display: block; } .gallery__item { margin: .5rem; } .gallery__link { height: 80vw; } .gallery__overlay { font-size: 1rem; } } @media (max-width: 952px) { label.logo{ font-size: 30px; padding-left: 50px; } } nav ul li a{ font-size: 16px; } @media (max-width: 858px) { .checkbtn{ display: block; } nav ul{ opacity: 1; position: fixed; width: 50%; height: 90vh; background: rgb(210, 208, 208); border-bottom-right-radius : 550px ; top: 65px; left: -118%; text-align: center; transition: all 1s; } nav ul li{ margin: 50px 0; display: block; line-height: 30px; } nav ul li a{ font-size: 15px; transition: 0.2s; } nav ul li a:hover{ background : rgb(191, 201, 207); color: black; font-size: 35px; } #check:checked~ul{ left: 0; } } .logo img{ float: left; margin: 5px; border-radius: 30px; width: 150px; } i{ transition: 0.05s; color: rgba(43, 43, 43, 0.635); } i:hover{ color: black; } i:active{ transform: rotate(90deg); } /*techbrain_about*/ .techbrain_about{ padding-top: 8%; width: 100%; background: linear-gradient(to bottom, #6085b2 0% ,white 70%); } .techbrain_about h1{ padding-left: 5%; color: #0c233e; font-size: 10vmin; } .techbrain_about h2{ padding-left: 5%; color: #365e8e; font-size: 6vmin; margin-right: 1%; } .techbrain_about h3{ color: #4f4f4f; font-size: 4vmin; } .techbrain_about h2 , .techbrain_about h3{ display: inline; } /* footer */ @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); .footer-area { font-family: 'Poppins', sans-serif; box-sizing:border-box; padding: 100px 0; background: #c6c6c6; background: -moz-linear-gradient(left, #c6c6c6 0%, #6085b2 100%); background: -webkit-linear-gradient(left, #c6c6c6 0%,#6085b2 100%); background: linear-gradient(to right, #c6c6c6 0%,#6085b2 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2749c4', endColorstr='#6085b2',GradientType=1 ); color:rgb(0, 0, 0); position:relative; } .main { width: 1200px; margin: 0 auto; } .footer { display: flex; justify-content: center; flex-wrap: wrap; flex-direction: row; } .single-footer { width: 30%; } .single-footer h4 { text-transform: capitalize; font-size: 22px; margin-bottom: 20px; } .footer-social a { color: #fff; border: 1px solid #fff; width: 40px; height: 40px; display: inline-block; text-align: center; line-height: 40px; border-radius: 50%; margin-right: 10px; } .footer-social { margin-top: 20px; } .single-footer ul { list-style: none; } .single-footer ul li { margin-bottom: 10px; position: relative; padding-left: 20px; } .single-footer ul li a { color: #fff; text-transform: capitalize; text-decoration: none; } .single-footer ul li a i { position: absolute; left: 0; top: 5px; } .copy { text-align: center; text-transform: capitalize; margin-top: 50px; } .footer-wave-box { position: absolute; left: 0; top: 0; height: 45px; right: 0; width: 100%; overflow:hidden; } .footer-wave { background-image: url('../../footer_img/footer-shape.png'); position: absolute; left: 0; top: 0; height: 100%; width: 200%; background-size:50%; background-position:bottom; background-repeat:repeat-x; } .footer-animation{ animation: footer_wave 5s linear infinite; -o-animation: footer_wave 5s linear infinite; -webkit-animation: footer_wave 5s linear infinite; left:auto; right:0; } @keyframes footer_wave{ 0%{ -moz-transform:translateX(0%); } 50%{ -moz-transform:translateX(25%); } 100%{ -moz-transform:translateX(50%); } } @keyframes footer_wave{ 0%{ -o-transform:translateX(0%); } 50%{ -o-transform:translateX(25%); } 100%{ -o-transform:translateX(50%); } } @keyframes footer_wave{ 0%{ -webkit-transform:translateX(0%); } 50%{ -webkit-transform:translateX(25%); } 100%{ -webkit-transform:translateX(50%); } } @media only screen and (max-width:1500px){ .techbrain_about{ padding-top: 15%; margin-bottom: 10%; } .footer-wave-box { display: none; } .footer-area{ border-top-right-radius: 300px ; } } @media only screen and (max-width:1000px){ .techbrain_about{ padding-top: 25%; } .main{ width:320px; } .footer-wave-box { display: none; } .single-footer:first-child, .single-footer { width: 100%; margin-bottom:30px; } } * { box-sizing: border-box; } .column img{ float: left; width: 33.33%; padding-top: 4%; padding-right: 4%; text-size-adjust: 20px; /* margin-top: 5%; */ }.column p{ padding-top: 2%; } .title h1{ padding-left: 4%; } .row{ margin-bottom: 10%; margin-top: 10%; margin-left: 5%; font-family: "Trirong", serif; } .column{ text-decoration: solid; font-size: 150%; padding: top 15%; padding-left: 5%; position: relative; right: 5%; } .title{ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; text-decoration:underline; }