body {
      margin: 0px;
      max-width: 100%;
      overflow-x: hidden;
      font-family: optima;
}

body a:hover{
       color: #FF8A66;
}

body a:click{
       color: black;
}

h1 {
    font-family: Philosopher;
    color: #FF8A66;
    font-size: 50px;
    font-weight: 300;
    text-shadow: 1px 1px 5px #c1c1c1;
}

h2 {
    font-family: Optima;
    font-size: 28px;
    font-weight: 300;
}

h3{
    font-family: Philosopher;
    font-size: 33px;
    margin-top: 0px;
    margin-bottom: 5%;
    color: #3E3E3E;
}

h4 {
    font-family: Philosopher;
    color: #575757;
    font-size: 22px;
    margin-bottom: 0%;
}

h5{
    font-family: Philosopher;
    font-size: 25px;
    margin-top: 0px;
    margin-bottom: 5%;
    color: #C0C0C0;
}

p {
    font-family: optima;
    font-size: 20px;
}

#allTop{
        background-image: url("../images/headerTrans.png");
        background-size: 101%;
        background-repeat: no-repeat;
        margin-top: -0.5%;
        margin-left: -1%;
        height: 1000px;
}

header {
    display: flex;
    justify-content: space-between;
}


.logo {
    width: 23%;
    height: 50px;
    padding: 1%;
    text-align: left;
    margin-top: -0.5%;
    margin-left: 0.5%;
}

.heroNav {
    position: relative;
    display: flex;
}

#heroContent {
    width: 50%;
    margin-top: 3%;
    margin-left: 7%;
}

.navigation {
    display: flex;
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

nav {
    display: grid;
    font-family: Optima;
    white-space: nowrap;
    height: 5%;
    text-align: right;
    margin-left: 88%;
    margin-top: -120%;
}

nav a {
    padding: 15px;
    font-size: 20px;
    color: #575757;
}

a{
  text-decoration: none;
}

#HP{
    margin-bottom: 50%;
}

#AU {
    margin-bottom: 25%;
}

#PT {
    margin-bottom: 25%;
}


.dropdown {
    padding: 50px 20px 75px 50px;
    font-size: 20px;
    color: #575757;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 125px;
  z-index: 1;
  margin-top: 3%;
  margin-left: -111%;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #575757;
  padding: 5px 7px;
  text-decoration: none;
  display: block;
  font-size: 17px;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: none;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {color: none;}

.dropdown:hover {color: #FF8A66;}

#OP {
  position: relative;
  padding-right: 8px;
}

#OP::before {
  content: "";
  position: absolute;
  right: 0;
  top: -25%;
  transform: translateY(-50%);
  width: 1px;
  height: 0px;
  background-color: #FF8A66;
  transition: height 0.25s ease;
}

/* 🔥 Trigger line when hovering Projects */
.dropdown:hover #OP::before {
  height: 500%;
}

.menu {
    display: none;
    width: 7%;
    margin-top: 1%;
    margin-right: 1%;
}

#CTA {
    width: 200px;
    margin-top: 5%;
    padding: 17px;
    font-size: 25px;
    font-weight: 600;
    color: #575757;
    font-weight: 500px;
    font-family: optima;
    background-color: #FAFBFB;
    border: #575757 solid 3px;
    border-radius: 5px;
    box-shadow:  2px 2px 5px #c1c1c1;;
}

#CTA:hover {
    color: #FF8A66;
    border-color: #FF8A66;
}

.Hero-Img {
    width: 75%;
    margin-top: 10%;
}

#Empathy-Circle,
#Analysis-Circle,
#Research-Circle,
#Ideation-Circle,
#Build-Circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.001); /* 👈 critical */
  opacity: 0;
}

.observe-section.is-visible #Empathy-Circle {
  animation: growFromCenter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 1s;
}

.observe-section.is-visible #Analysis-Circle {
  animation: growFromCenter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 2s;
}

.observe-section.is-visible #Research-Circle {
  animation: growFromCenter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 2s;
}

.observe-section.is-visible #Ideation-Circle {
  animation: growFromCenter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 3s;
}

.observe-section.is-visible #Build-Circle {
  animation: growFromCenter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 3s;
}

@keyframes growFromCenter {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.About-Identity {
    background-image: url("../images/About-BG.png");
    background-size: cover;
    height: 125%;
    margin-top: -26%;
    position: relative;
    z-index: -1;
    padding-top: 10%;
    padding-bottom: 14%;
    margin-bottom: 10%;
}

.About-Identity  h3{
    margin-left: 15%;
    margin-top: 10%;
    margin-bottom: 15%;
}

#aboutIdentity-Image {
    width: 92%;
    margin-top: -15%;
    margin-left: 5%;
}

#purpose-text,
#mission-text,
#vision-text,
#diamond-values {
  transform-box: fill-box;
  transform: scaleY(0);
  opacity: 0;
}

.observe-section.is-visible #purpose-text {
  transform-origin: center bottom;
  animation: growUp 0.9s ease-out forwards;
  animation-delay: 1s;
}

.observe-section.is-visible #mission-text {
  transform-origin: center right;
  animation: growUp 0.9s ease-out forwards;
  animation-delay: 1.5s;
}

.observe-section.is-visible #vision-text {
  transform-origin: center left;
  animation: growUp 0.9s ease-out forwards;
  animation-delay: 2s;
}

.observe-section.is-visible #diamond-values {
  transform-origin: center;
  animation: growUp 0.9s ease-out forwards;
  animation-delay: 2.5s;
}


@keyframes growUp {
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

#diamond-positivity,
#diamond-ambition,
#diamond-visionary,
#diamond-creativity,
#diamond-progress {
  transform-origin: right;   /* 👈 anchor at bottom */
  transform: scaleY(0.9);
  opacity: 0;
}

.observe-section.is-visible #diamond-positivity {
  transform-origin: top right;
  animation: growUp 0.9s ease-out forwards;
  animation-delay: 3s;
}

.observe-section.is-visible #diamond-ambition {
  transform-origin: top;
  animation: growUp 0.9s ease-out forwards;
  animation-delay: 3.5s;
}

.observe-section.is-visible #diamond-visionary {
  transform-origin: top; 
  animation: growUp 0.9s ease-out forwards;
  animation-delay: 4s;
}

.observe-section.is-visible #diamond-creativity {
  transform-origin: top left;
  animation: growUp 0.9s ease-out forwards;
  animation-delay: 4.5s;
}

.observe-section.is-visible #diamond-progress {
  transform-origin: left; 
  animation: growUp 0.9s ease-out forwards;
  animation-delay: 5s;
}

@keyframes growUp {
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

#positivity-text,
#ambition-text,
#visionary-text,
#creativity-text,
#progress-text {
  opacity: 0;
}

.observe-section.is-visible #positivity-text {
  animation: fadeIn 0.9s ease-out forwards;
  animation-delay: 5.5s; /* delay before appearing */
}

.observe-section.is-visible #ambition-text {
  animation: fadeIn 0.9s ease-out forwards;
  animation-delay: 6s; /* delay before appearing */
}

.observe-section.is-visible #visionary-text {
  animation: fadeIn 0.9s ease-out forwards;
  animation-delay: 6.5s; /* delay before appearing */
}

.observe-section.is-visible #creativity-text {
  animation: fadeIn 0.9s ease-out forwards;
  animation-delay: 7s; /* delay before appearing */
}

.observe-section.is-visible #progress-text{
  animation: fadeIn 0.9s ease-out forwards;
  animation-delay: 7.5s; /* delay before appearing */
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

#time-line {
  stroke-dasharray: 1500;  /* total length of the line, can be estimated */
  stroke-dashoffset: 1500; /* start fully hidden */
  opacity: 1;              /* line is visible as it draws */
}

.observe-section.is-visible #time-line {
  animation: drawTimeline 9s linear forwards;
  animation-delay: 1s;
}

#timelineSec h3{
    margin-left: 15%;
}

#Feb2022,
#Oct2022,
#Jan2023,
#Dec2023,
#Feb2024,
#Aug2024,
#Nov2025 {
  transform-box: fill-box;        /* 👈 use element’s own bounds */
  transform-origin: center;       /* 👈 grow from its center */
  transform: scale(0.0);         /* start smaller from center */
  opacity: 0;
}

.observe-section.is-visible #Feb2022{
  animation: growFromCenter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 1s; /* delay before appearing */
}

.observe-section.is-visible #Oct2022{
  animation: growFromCenter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 2s; /* delay before appearing */
}

.observe-section.is-visible #Jan2023{
  animation: growFromCenter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 3s; /* delay before appearing */
}

.observe-section.is-visible #Dec2023{
  animation: growFromCenter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 4s; /* delay before appearing */
}

.observe-section.is-visible #Feb2024{
  animation: growFromCenter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 5s; /* delay before appearing */
}

.observe-section.is-visible #Aug2024{
  animation: growFromCenter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 6s; /* delay before appearing */
}

.observe-section.is-visible #Nov2025{
  animation: growFromCenter 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 7s; /* delay before appearing */
}

@keyframes growFromCenter {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes growFromCenter {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes drawTimeline {
  to {
    stroke-dashoffset: 0;  /* fully drawn */
  }
}

#categoryGrid {
  margin: 2% 5%;
  display: grid;
  grid-template-rows: 190px 220px 222px 222px 250px 180px 222px;
  grid-template-columns: 0.5fr 0.5fr;
  grid-template-areas:
  "timeline con1"
  "timeline con2"
  "timeline con3"
  "timeline con4"
  "timeline con5"
  "timeline con6"
  "timeline con7";
}

#timeline {
  grid-area: timeline;
  margin-left: 25%;
}

#con1{
  grid-area: con1;
  opacity: 0;
}

#con2 {
  grid-area: con2;
  margin-top: 4.5%;
  opacity: 0;
}

#con3 {
  grid-area: con3;
  margin-top: 3%;
  opacity: 0;
}

#con4 {
  grid-area: con4;
  opacity: 0;
}

#con5 {
  grid-area: con5;
  margin-top: -1%;
  opacity: 0;
}

#con6 {
  grid-area: con6;
  margin-top: -6%;
  opacity: 0;
}


#con7 {
  grid-area: con7;
  margin-top: -1%;
  opacity: 0;
}

.observe-section.is-visible #con1 {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 1s;
}

.observe-section.is-visible #con2 {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 2s;
}

.observe-section.is-visible #con3 {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 3s;
}

.observe-section.is-visible #con4 {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 4s;
}

.observe-section.is-visible #con5 {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 5s;
}

.observe-section.is-visible #con6 {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 6s;
}

.observe-section.is-visible #con7 {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 7s;
}

@keyframes showDiv {
  to {
    opacity: 1;
  }
}

.categoryGridArea {
  display: flex;
  background-position: center;
  background-size: 80%;
  background-repeat: no-repeat;
  margin: 2% 2% 2% -33%;
  cursor: pointer;
  display: grid;
  align-content: flex-start;
}

#designProcessSec {
    text-align: center;
}

#designProcessImg {
    width: 90%;
    margin-top: 5%;
}

#Inter,
#Infinity,
#Persona,
#Insights,
#Proto,
#Brainstorming,
#Test,
#Release  {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.0);
  opacity: 0;
}

.observe-section.is-visible #Inter {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 1s;
}

.observe-section.is-visible #Infinity {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 2s;
}

.observe-section.is-visible #Persona {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 3s;
}

.observe-section.is-visible #Insights {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 4s;
}

.observe-section.is-visible #Proto {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 5s;
}

.observe-section.is-visible #Brainstorming {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 6s;
}

.observe-section.is-visible #Test {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 7s;
}

.observe-section.is-visible #Release {
  animation: showDiv 0.5s ease forwards;
  animation-delay: 8s;
}

@keyframes showDiv {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.serviceSec {
    background-color: #F8F8F8;
    text-align: center;
    padding-top: 10%;
    padding-bottom: 20%;
    margin-bottom: -12%;
}

.serviceBlocks {
    display: flex;
    margin-left: 7%;
}

.serviceBlock {
    text-align: left;
    width: 40%;
    margin: 1%;
    padding: 3% 2%;
    border-radius: 5px;
    border: 1px solid #575757;
    box-shadow: 2px 2px 5px #c1c1c1;
}

.block1 {
    background: linear-gradient(to bottom right, #ffffff, #ffffff, #ffffff,#ffffff,#ffffff, #FFDCD1);
}

.block2 {
    background: linear-gradient(to bottom right, #ffffff, #ffffff, #ffffff,#ffffff,#ffffff, #FDF6C0);
}

.block3 {
    background: linear-gradient(to bottom right, #ffffff, #ffffff, #ffffff,#ffffff,#ffffff, #FFD6D6);
}

.block4 {
    background: linear-gradient(to bottom right, #ffffff, #ffffff, #ffffff,#ffffff,#ffffff, #FFE2BE);
}

.block5 {
    background: linear-gradient(to bottom right, #ffffff, #ffffff, #ffffff,#ffffff,#ffffff, #DDDDDD);
}

.block6 {
    background: linear-gradient(to bottom right, #ffffff, #ffffff, #ffffff,#ffffff,#ffffff, #EBF0FF);
}

.footerBlack {
            display: flex;
            background: linear-gradient(to bottom right, #575757, #000000);
            color: white;
            height: 200px;
            margin: 0px -3.5px 0px -50px;
            padding: 30px;
            background-repeat: no-repeat;
            background-size: 100%;
            justify-content: space-evenly;
            font-family: optima;
            clip-path: polygon(0% 0%, 100% 17%, 100% 100%, 0% 100%);
}

.footerOrange {
            display: flex;
            background: linear-gradient(to top right, #FCC8B8, #FD5B29);
            color: white;
            height: 222px;
            margin: 100px -3.5px -227px -50px;
            padding: 30px;
            background-repeat: no-repeat;
            background-size: 100%;
            justify-content: space-evenly;
            font-family: optima;
            clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 100%);
}

footer p {
    font-size: 17px;
}

.footerAbout {
    margin-top: 2%;
    margin-left: -10%;
}

.footerAbout p{
    margin-top: -2%;
}


.footerC {
    margin-top: 2.5%;
}


.con {
      display: flex;
}

.con p{
       margin-left: 5%;
       margin-top: 0.5%;
}

.socials {
    width: 1000px;
    margin-left: 60%;
    margin-top: 0.5%;
}

.soc1{
    width: 6%;
    height: 15%;
    padding-left: 17%;
}

.soc2{
    width: 8%;
    height: 19%;
    padding-left: 20%;
    margin-bottom: -1%;
}

.copyright {
         background: linear-gradient(to bottom right, #575757, #000000);
         border-top: #C0C0C0 1px solid;
         color: #C0C0C0;
         height: 30px;
         text-align: center;
         font-family: Philosopher;
         font-size: 22px;
         padding: 30px 0px 0px 0px;
         margin-right: -0.3%;
}

.copyright p{
             margin-top: -0.7%;
}

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

        #allTop{
            width: 260%;
            margin-left: -4%;
        }
        .logo {
            margin-left: 1%;
        }
        footer{
            width: 990px;
        }
        .copyright{
            width: 1000px;
        }     
}

@media (min-width: 279px) and (max-width: 300px) {

    #allTop{
        height: 400px;
    }
     h1 {
        font-size: 28px;
    }
    h2 {
        font-size: 20px;
    }
    p {
        font-size: 17px;
    }
    nav {
        margin-top: -10%;
        margin-left: -40%;
    }
    .dropdown {
        padding: 48px;
    }
    #timeline img {
        width: 33%;
    }
    #categoryGrid {
        margin: 5% -175% 5% 5%;
        grid-template-rows: 233px 211px 207px 200px 222px;
    }
    #designProcessSec {
        margin-left: 44%;
        width: 244%;
    }
    .footerAbout {
        margin-left: 5%;
        width: 90%;
    }
    .footerC {
        margin-left: -5%;
    }
}

@media (min-width: 300px) and (max-width: 400px) {

    #allTop {
        background-size: 144%;
    }
    .menu {
        display: block;
    }
    .navigation {
        display: none;
    }
    .navigation.active {
        display: block;
    }
    h1 {
        font-size: 28px;
    }
    h2 {
        font-size: 20px;
    }
    p {
        font-size: 17px;
    }
    nav {
        margin-top: 40%;
        margin-left: -25%;
        background-color: rgba(255, 255, 255, 0.77);
        border-radius: 10px;
        width: 175%;
        box-shadow: 0 4px 50px rgba(255, 138, 102, 0.2);
    }
    .dropdown-content {
        margin-left: -110%;
    }
    .dropdown {
        padding: 48px;
    }
    #PT {
        margin-left: 55%;
    }
    .About-Identity {
        margin-top: -90%;
        height: 100%;
        width: 255%;
    }
    #timeline img {
        width: 33%;
    }
    #categoryGrid {
        margin: 5% -100% 5% 5%;
        grid-template-rows: 200px 222px 211px 222px 233px 190px 200px;
    }
    #designProcessSec {
        margin-left: 22%;
        width: 222%;
    }
    .dropdown {
        padding: 48px;
    }
    .serviceSec {
        width: 255%;
        margin-bottom: -42%;
    }
    .footerAbout {
        margin-left: 5%;
        width: 90%;
    }
    .footerC {
        margin-left: -5%;
    }
}

@media (min-width: 340px) and (max-width: 350px) {

    #allTop{
        width: 292%;
        margin-left: -4%;
    }
    .About-Identity {
        margin-top: -103%;
        height: 100%;
        width: 288%;
    }
    .serviceSec {
        width: 288%;
        margin-bottom: -103%;
    }
    #contact {
            margin-top: 88%;
    }
}

@media (min-width: 359px) and (max-width: 361px) {

    #allTop {
        width: 282%;
    }
    .About-Identity {
        margin-top: -98%;
        height: 122%;
        width: 277%;
    }
    .serviceSec {
        width: 277%;
        margin-bottom: -42%;
    }
}

@media (min-width: 374px) and (max-width: 376px) {

    #allTop {
        width: 270%;
    }
    .About-Identity {
        margin-top: -95%;
        height: 133%;
        width: 266%;
    }
    .serviceSec {
        width: 266%;
        margin-bottom: -42%;
    }
}

@media (min-width: 400px) and (max-width: 500px) {

   #allTop {
        background-size: 144%;
        width: 247%;
    }
    .menu {
        display: block;
    }
    .navigation {
        display: none;
    }
    .navigation.active {
        display: block;
    }

    h1 {
        font-size: 28px;
    }
    h2 {
        font-size: 20px;
    }
    p {
        font-size: 17px;
    }
    nav {
        margin-top: 30%;
        margin-left: -25%;
        background-color: rgba(255, 255, 255, 0.77);
        border-radius: 10px;
        width: 175%;
        box-shadow: 0 4px 50px rgba(255, 138, 102, 0.2);
    }
    .dropdown-content {
        margin-left: -110%;
    }
    .dropdown {
        padding: 48px;
    }
    #PT {
        margin-left: 55%;
    }
    .About-Identity {
        margin-top: -85%;
        height: 100%;
        width: 242%;
    }
    #timeline img {
        width: 30%;
    }
    #categoryGrid {
        margin: 5% -100% 5% 5%;
        grid-template-rows: 200px 222px 211px 222px 233px 190px 200px;
    }
    #designProcessSec {
        width: 222%;
    }
    .serviceSec {
        width: 232%;
        margin-bottom: -40%;
    }
    .footerAbout {
        margin-left: 5%;
        width: 90%;
    }
    .footerC {
        margin-left: -5%;
    }
}

@media (min-width: 429px) and (max-width: 431px) {

    #allTop {
        width: 237%;
    }
    .About-Identity {
        margin-top: -82%;
        height: 100%;
        width: 232%;
    }
}

@media (min-width: 500px) and (max-width: 550px) {

    #allTop {
        background-size: 155%;
        margin-left: -2%;
    }
    #allTop a{
        font-size: 17px;
    }
    header img {
        height: 100%;
    }
    .logo {
        margin-left: 2%;
    }
    #heroContent {
        width: 40%;
    }
    .Hero-Img {
        margin-top: -44%;
        margin-left: 10%;
        width: 50%;
    }
    nav {
        margin-top: -130%;
        margin-left: 35%;
    }
    nav a {
        padding: 7px;
        font-size: 17px;
    }
    .dropdown-content {
        margin-left: -122%;
    }
    .dropdown-content a {
        font-size: 11px;
    }
    #HP {
    margin-bottom: 30%;
    }
    #AU {
        margin-bottom: 0%;
    }
    #PT {
        font-size: 17px;
        margin-left: 14%;
        margin-bottom: 0%;
    }
    #CT {
        margin-top: -5%;
    }
    .About-Identity {
        margin-top: -115%;
        height: 60%;
    }
    h1 {
        font-size: 22px;
    }
    h2 {
        font-size: 15px;
    }
    h3 {
        font-size: 20px;
    }
    h4 {
        font-size: 17px;
    }
    h5 {
        font-size: 20px;
    }
    p {
        font-size: 15px;
    }
    #timeline {
        margin-left: 12%;
    }
    #categoryGrid {
        margin: 5% 5%;
        grid-template-rows: 200px 210px 220px 220px 220px;
    }
    .serviceSec {
        margin-bottom: -30%;
    }
    footer{
        width: 100%;
    }
    .footerAbout {
        width: 50%;
        margin-left: 7%;
    }
    .socials {
        margin-top: 1%;
    }
    .soc1 {
        height: 12%;
        margin-bottom: -1%;
    }
    .soc2 {
        height: 15%;
        margin-bottom: -2%;
    }
    .copyright{
        width: 103%;
    }

}

@media (min-width: 550px) and (max-width: 800px) {

    #allTop{
        width: 102%;
        background-size: 120%;
        margin-left: -2%;
    }
    .logo {
        margin-left: 1%;
    }
    header img {
        height: 111%;
    }
    #heroContent {
        width: 55%;
        margin-top: -1%;
    }
    #heroContent h3 {
        font-size: 22px;
    }
    nav {
        margin-top: -170%;
        margin-left: 55%;
    }
    nav a {
        padding: 7px;
        font-size: 17px;
    }
    .dropdown-content a {
        font-size: 15px;
    }
    #HP{
    margin-bottom: 30%;
    }
    #AU {
        margin-bottom: 0%;
    }
    #PT {
        font-size: 17px;
        margin-left: 14%;
        margin-bottom: 0%;
    }
    #CT {
        margin-top: -5%;
    }
    .Hero-Img {
        margin-top: -15%;
        width: 55%;
    }
    #OP::before {
        top: -35;
    }
    .dropdown:hover #OP::before {
        height: 300%;
    }
    .logo img {
        height: 122%;
    }
    .About-Identity {
        margin-top: -78%;
        height: 155%;
    }
    h1 {
        font-size: 25px;
    }
    h2 {
        font-size: 20px;
    }
    h3 {
        white-space: nowrap;
        font-size: 22px;
    }
    h4 {
        font-size: 19px;
    }
    h5 {
        font-size: 22px;
    }
    p {
        font-size: 17px;
    }
    #categoryGrid {
        margin: 5% 5%;
        grid-template-rows: 200px 210px 220px 220px 220px 220px 220px;
    }
    #con1 {
        margin-top: -2%;
    }
    .serviceSec {
        margin-bottom: -25%;
    }
    footer{
        width: 100%;
    }
    footer p {
        font-size: 16px;
    }
    .footerAbout {
        width: 50%;
        margin-left: 2%;
    }
    .socials {
        margin-top: 1%;
    }
    .soc1 {
        height: 12%;
        margin-bottom: -1%;
    }
    .soc2 {
        height: 15%;
        margin-bottom: -2%;
    }
    .copyright{
        width: 100%;
    }
}

@media (min-width: 719px) and (max-width: 721px) {
      .About-Identity {
        margin-top: -85%;
        height: 100%;
    }  
}

@media (min-width: 765px) and (max-width: 770px) {
      .About-Identity {
        height: 60%;
    }  
}

@media (min-width: 550px) and (max-width: 700px) {

    h2 {
        font-size: 17px;
    }
    #allTop {
        background-size: 122%;
    }
    #allTop a{
        font-size: 17px;
    }
    #heroContent {
        width: 50%;
    }
    #PT {
        font-size: 17px;
    }
    .About-Identity {
        margin-top: -95%;
        height: 135%;
    }
    #timeline {
        margin-left: 15%;
    }
    #con1 {
        margin-top: -3%;
    }
    footer p {
        font-size: 16px;
    }
    .footerAbout {
        margin-left: 5%;
    }
}


@media (min-width: 800px) and (max-width: 895px) {

    h3 {
        white-space: nowrap;
    }
    h4 {
        font-size: 20px;
    }
    p {
        font-size: 18px;
    }
    #allTop{
        width: 101%;
    }
    #heroContent {
        width: 55%;
        margin-top: -1%;
    }
    #heroContent h1 {
        font-size: 35px;
    }
    #heroContent h2 {
        font-size: 19px;
    }
    #heroContent h3 {
        font-size: 25px;
    }
    nav {
        margin-top: -177%;
        margin-left: 55%;
    }
    nav a {
        padding: 7px;
        font-size: 17px;
    }
    .dropdown-content a {
        font-size: 15px;
    }
    #HP{
    margin-bottom: 30%;
    }
    #AU {
        margin-bottom: 0%;
    }
    #PT {
        font-size: 17px;
        margin-left: 14%;
        margin-bottom: 0%;
    }
    #CT {
        margin-top: -5%;
    }
    .Hero-Img {
        margin-top: 0%;
        width: 55%;
    }
    #OP::before {
        top: -35;
    }
    .dropdown:hover #OP::before {
        height: 300%;
    }
    .About-Identity {
        margin-top: -70%;
        height: 200%;
    }
    .About-Identity h3 {
        margin-top: 10%;
        margin-bottom: 15%;
    }
    #categoryGrid {
        margin: 5% 5%;
        grid-template-rows: 200px 210px 220px 220px 240px 190px 220px;
    }
    #con1 {
        margin-top: -1%;
    }
    .serviceSec {
        margin-bottom: -20%;
    }
    footer{
        width: 100%;
    }
    .footerAbout {
        width: 50%;
        margin-left: 2%;
    }
    .socials {
        margin-top: 1%;
    }
    .soc1 {
        height: 12%;
        margin-bottom: -1%;
    }
    .soc2 {
        height: 15%;
        margin-bottom: -2%;
    }
    .copyright{
        width: 100%;
    }
}

@media (min-width: 818px) and (max-width: 840px)  {
    #allTop {
        background-size: 120%;
    }
     .About-Identity {
        height: 60%;
    }
 }

 @media (min-width: 840px) and (max-width: 850px)  {
    #allTop {
        background-size: 120%;
    }
     .About-Identity {
        height: 175%;
    }
    .About-Identity h3 {
        margin-top: 10%;
        margin-bottom: 15%;
    }
 }

  @media (min-width: 850px) and (max-width: 855px)  {
    #allTop {
        background-size: 120%;
    }
     .About-Identity {
        height: 60%;
    }
    .About-Identity h3 {
        margin-top: 10%;
        margin-bottom: 15%;
    }
 }

@media (min-width: 895px) and (max-width: 1000px) {

    h4 {
        font-size: 20px;
    }
    p {
        font-size: 18px;
    }
    #allTop{
        background-size: 133%;
        width: 101%;
    }
    #heroContent {
        width: 55%;
        margin-top: -1%;
    }
    #heroContent h1 {
        font-size: 38px;
    }
    #heroContent h2 {
        font-size: 20px;
    }
    #heroContent h3 {
        font-size: 28px;
    }
    nav {
        margin-top: -98%;
        margin-left: 60%;
    }
    nav a {
        padding: 7px;
        font-size: 19px;
    }
    #PT {
        margin-left: 14%;
    }
    #OP::before {
        top: -35;
    }
    .dropdown:hover #OP::before {
        height: 300%;
    }
    .Hero-Img {
        width: 55%;
        margin-top: 0%;
    }
    .About-Identity {
        margin-top: -50%;
        height: 175%;
    }
    #categoryGrid {
        margin: 5% 5%;
        grid-template-rows: 200px 210px 220px 220px 240px 190px 220px;
    }
    #con1 {
        margin-top: -1%;
    }
    .serviceSec {
        margin-bottom: -20%;
    }
    footer{
        width: 100%;
    }
    .footerAbout {
        width: 50%;
        margin-left: 2%;
    }
    .socials {
        margin-top: 1%;
    }
    .soc1 {
        height: 12%;
        margin-bottom: -1%;
    }
    .soc2 {
        height: 15%;
        margin-bottom: -2%;
    }
    .copyright{
        width: 100.3%;
    }
}

@media (width: 896px) {
     .About-Identity {
        margin-top: -51%;
        height: 175%;
    }
 }

@media (width: 912px) {
     .About-Identity {
        margin-top: -50%;
        height: 55%;
    }
}

@media (min-width: 1000px) and (max-width: 1025px) {

    #allTop {
        background-size: 120%;
    }
    nav {
        margin-top: -90%;
        margin-left: 70%;
    }
    nav a {
        padding: 10px;
    }
   #heroContent {
        width: 55%;
        margin-top: -1%;
    }
    #heroContent h1 {
        font-size: 40px;
    }
    #heroContent h2 {
        font-size: 22px;
    }
    #heroContent h3 {
        font-size: 30px;
    }
    .Hero-Img {
        margin-top: 0%;
        width: 60%;
    }
    #categoryGrid {
        margin: 5% 5%;
        grid-template-rows: 200px 210px 220px 220px 240px 190px 220px;
    }
    .About-Identity {
        margin-top: -45%;
        height: 60%;
    }
    .serviceSec {
        margin-bottom: -17%;
    }
    .footerAbout {
    width: 50%;
    margin-left: 2%;
    }
    #con1 {
        margin-top: -1%;
    }
}

@media (width: 1024px) and (height: 600px) {

    .About-Identity {
        height: 130%;
    }
}

@media (width: 1024px) and (height: 768px) {
    
    .About-Identity {
        margin-top: -45%;
        height: 100%;
    }
}

@media (min-width: 1100px) and (max-width: 1200px) {

    #allTop {
        background-size: 120%;
    }
    nav {
        margin-top: -150%;
        margin-left: 70%;
    }
    nav a {
        padding: 10px;
    }
    .heroNav {
        margin-top: -3%;
    }
    #heroContent {
        width: 60%;
    }
    .Hero-Img {
        margin-top: 40%;
        margin-left: -10%;
    }
    .About-Identity {
        margin-top: -31%;
    }
    #categoryGrid {
        grid-template-rows: 200px 220px 210px 220px 250px 180px 220px;
    }
    .serviceSec {
        margin-bottom: -15%;
    }
    .footerAbout {
        margin-left: 0%;
    }
}


@media (min-width: 1275px) and (max-width: 1285px) {

    #allTop {
        background-size: 120%;
    }
    nav {
        margin-top: -120%;
    }
    .Hero-Img {
        width: 65%;
    }
    #categoryGrid {
        grid-template-rows: 206px 210px 220px 240px 222px;
    }
    .serviceSec {
        margin-bottom: -15%;
    }
    #contact {
        margin-top: -5%;
    }
    .footerAbout {
        width: 50%;
        margin-left: 2%;
    }
}

@media (min-width: 1360px) and (max-width: 1370px) {
    .About-Identity {
        margin-top: -29%;
    }
}