initial commit
This commit is contained in:
341
responsive.css
Normal file
341
responsive.css
Normal file
@@ -0,0 +1,341 @@
|
||||
/* =========================
|
||||
LARGE DEVICES (1200px ↓)
|
||||
========================= */
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
.main-heading {
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
.vertical-text {
|
||||
right: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.experience-box h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* =========================
|
||||
TABLET DEVICES (992px ↓)
|
||||
========================= */
|
||||
@media (max-width: 992px) {
|
||||
|
||||
.main-heading {
|
||||
font-size: 34px;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.vertical-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about-section .row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.experience-box {
|
||||
margin-top: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.top-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right-text {
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* =========================
|
||||
MOBILE DEVICES (768px ↓)
|
||||
========================= */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.main-heading {
|
||||
font-size: 26px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.steps {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 35px;
|
||||
}
|
||||
.hero-section img {
|
||||
width: 100%;
|
||||
border-radius: unset;
|
||||
}
|
||||
.hero-section {
|
||||
height: 83vh;
|
||||
padding: 0px 0;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.compare-section .wrapper {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.challenge-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.approach-card {
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.evolution-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.evolution-box {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* =========================
|
||||
SMALL MOBILE (576px ↓)
|
||||
========================= */
|
||||
@media (max-width: 576px) {
|
||||
|
||||
.main-heading {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.subtext br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 -5px;
|
||||
}
|
||||
|
||||
.hero-video {
|
||||
object-fit: cover;
|
||||
height: 100%;
|
||||
}
|
||||
.challenge-section {
|
||||
padding: 40px 0px;
|
||||
}
|
||||
.heading-main p {
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
color: rgb(56 56 56);
|
||||
font-size: 16px;
|
||||
margin: 0 0 30px !important;
|
||||
}
|
||||
.cta-box h2 {
|
||||
font-size: 26px;
|
||||
margin: 0;
|
||||
}
|
||||
.btn-primary {
|
||||
background: rgb(203, 105, 88);
|
||||
padding: 10px 9px;
|
||||
color: rgb(255, 255, 255);
|
||||
border-radius: 0px;
|
||||
margin-right: 10px;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
.btn-outline {
|
||||
border: 1px solid rgb(255, 255, 255);
|
||||
padding: 9px 9px;
|
||||
color: rgb(255, 255, 255);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
.why-content h2 {
|
||||
font-size: 28px;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.why-content {
|
||||
padding: 0 0px;
|
||||
}
|
||||
.cta-section {
|
||||
padding: 39px 0px;
|
||||
}
|
||||
.img-small {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.why-section {
|
||||
padding: 40px 0px 0;
|
||||
}
|
||||
.impact-card h3 {
|
||||
font-family: "Instrument Serif", serif;
|
||||
font-size: 37px;
|
||||
}
|
||||
.impact-card {
|
||||
padding: 24px 10px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.video-thumb {
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.material-video {
|
||||
padding: 10px 10px;
|
||||
margin: 9px 0;
|
||||
}
|
||||
.optionmult {
|
||||
padding: 10px 10px;
|
||||
}
|
||||
.wrapper {
|
||||
height: 250px;
|
||||
}
|
||||
.compare-card {
|
||||
border: 1px solid #EFEFEF;
|
||||
box-shadow: 15px 20px 45px rgba(233, 233, 233, 0.43);
|
||||
border-radius: 15px;
|
||||
padding: 15px 15px;
|
||||
}
|
||||
.visualprototyping {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.heading-main {
|
||||
margin: 0 0 0px !important;
|
||||
}
|
||||
.image-card img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
object-fit: cover;
|
||||
border-radius: 18px;
|
||||
}
|
||||
.number {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.service-card {
|
||||
padding: 17px;
|
||||
}
|
||||
.service-card p {
|
||||
margin: 15px 0px 0px;
|
||||
}
|
||||
.services-section {
|
||||
background: rgb(245, 241, 237);
|
||||
padding: 40px 0px;
|
||||
}
|
||||
.evolutionwrap {
|
||||
padding: 15px;
|
||||
}
|
||||
.phase h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.phase p {
|
||||
font-size: 12px;
|
||||
}
|
||||
.evolution-section {
|
||||
padding: 40px 0px;
|
||||
}
|
||||
.step {
|
||||
padding: 11px 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.label {
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.title {
|
||||
font-size: 24px;
|
||||
margin-bottom: 25px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.challenge-card h5 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
color: rgb(17, 17, 17);
|
||||
}
|
||||
.scroll-down {
|
||||
bottom: -2px;
|
||||
}
|
||||
.heading-main h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.compare-section {
|
||||
padding: 40px 0px;
|
||||
}
|
||||
.image-wrap {
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.about-section {
|
||||
padding: 30px 0px;
|
||||
}
|
||||
.material-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.impact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.cta-box {
|
||||
padding: 17px;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* =========================
|
||||
EXTRA SMALL (400px ↓)
|
||||
========================= */
|
||||
@media (max-width: 400px) {
|
||||
|
||||
.main-heading {
|
||||
font-size: 33px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user