*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}
:root {
    --firstColor: #ee5006;
    --dropShadowColor: rgba(0, 0, 0, .2);
}


.top{
    display: flex;
    justify-content: center;
    align-items: center;
    height:150px;
    background: white;
    margin-bottom: 50px;
    animation: tab 0.5s ease;
  }
  
  .containerN{
    width: 100%;
    max-width: 1280px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .navbar{
      width: 500px;
      display: flex;
      justify-content: space-between; 
  }
  
  .navbar a{
    text-decoration: none;
    color: black;
    letter-spacing: 5px;
    border-bottom: 2px solid #ee5006;
    padding: 10px 0;
  }
  
  .logo{
    text-align: center;
    margin-right: 20px;
  }
  .logo img{
      width: 80px;
  }
  
  .logo a{
    text-decoration: none;
    color: black;
  }

  .topSection{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    margin-bottom: 70px
}

.containerM{
    width: 100%;
    max-width: 1280px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: tab 0.5s ease;
}

.content{
  width:600px;
}


.content p{
  margin-top: 40px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 5px;
  line-height: 25px;

}

.content h1{
  margin: 20px 0;
}

.rightContent{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  height: 300px;
  background: #EE5006;
  border-radius: 0px 50px 50px 50px;
}


.des{
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  margin-bottom: 200px;
}

.desContainer{
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  width: 100%;
  max-width: 1280px;
  background: #ee5006;
}

.desContainer h4{
   font-size: 25px;
}


.ser{
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-bottom: 100px;
}

.serContainer{
 
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.serCard{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly ;
  align-items: center;
  text-align: center;
  width: 300px;
  height: 400px;
  background: #EE5006;
  color: white;
  font-size: 30px;
  border-radius: 10px;
}

.serCard h4{
  margin-bottom: 30px;
}

.footer{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    margin-top: 200px;
}

.footer a{
    text-decoration: none;
    color: black;
}

.fooContainer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    width: 100%;
}

.fooContainer h4{
    border-bottom: 2px solid #ee5006;
    padding-bottom: 5px;
}

.copyright{
    border-bottom: 2px solid #ee5006;
    padding-bottom: 5px;
}

.TeamWrapper2{
    display: flex;
    justify-content: center;
    align-items: center;
}

.TeamContainer2{
    max-width: 1440px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: tab 0.5s ease;
}

.Head{
    display: flex; 
    justify-content: center;
    align-items: center;
    margin-bottom: 120px;
    padding: 20px;    
}



.headImg img{
    border-right: 5px solid #ee5006;
    border-bottom: 5px solid #ee5006;
    border-radius: 10px;
    width: 500px;
}

.headImg{
    margin-right: 30px;
    padding-bottom: 10px;
}

.headText{
    text-align: center;
}
.headText h1{
    margin-bottom: 30px;
    border-bottom: 2px solid #ee5006; 
}
.headText h2{
    margin-bottom: 30px;
}
.headText h3{
    letter-spacing: 3px;
    line-height: 40px;
}
.title{
    margin-bottom: 80px;
    padding: 0 20px;
}
.title h1{
    border-bottom: 2px solid #ee5006;
    width: 461px;
}


.box2{
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.Card{
    width: 420px;
    margin: 0 20px;
    margin-bottom: 50px;
    -webkit-box-shadow: 0px 5px 36px 12px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 5px 36px 12px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 36px 12px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 10px;
}

.devText h2{
    margin-bottom: 10px;
    letter-spacing: 7px;
    border-bottom: 2px solid #ee5006;
    
}

.devText p{
    font-size: 20px;
}

.devText h4{
  letter-spacing: 4px;
}

.Card img{
    width: 400px;
    height: 400px;
    object-fit: cover;
    border-radius: 10px;
    border-left: 4px solid #ee5006;
    border-top: 4px solid #ee5006;
}

.tagWrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.tagContainer{
    max-width: 1280px;
    width: 100%;
}
.tagContainer h1{
    margin: 10px;
    border-bottom: 2px solid #ee5006;
    padding: 10px 0;
    width: 164px;
    font-size: 45px;
}


.gid{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}
.gid img{
    width:730px;
}
.gidContainer{
    display: flex;
    justify-content: center;
    align-self: center;
    width: 100%;
    max-width:1280px;
}

.text1 p{
    width: 540px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 3px;
}
.text1 h2{
   margin-bottom: 20px;
   letter-spacing: 3px;
}


.text2 p{
    width: 540px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 3px;
}

.text2 h2{
    width: 540px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 3px;
}

.car{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
    height: 400px;
}

.carContainer{
    width: 100%;
    max-width:1280px;
    display: flex;
    justify-content: center;
    align-self: center;
    
}

.car img{
    width:750px; 
}

.bCont{
    display: flex;
    justify-content: center;
    margin: 50px 0;
}
.border{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #ee5006;
    border-radius: 5px;
    max-width: 1280px;
    width: 100%;
}

.photo{
    margin-right:18px;
}


.priceWrapper{
    display: flex;
    justify-content: center;
    align-items: center;
}

.priceContainer{
    max-width: 1280px;
    width: 100%;
	animation: tab 0.5s ease;
}

.priceContainer h2{
  border-bottom: 2px solid #ee5006;
  width: 230px;
  padding-bottom: 10px;
}

.table {
	width: 100%;
	margin-bottom: 20px;
	border: 5px solid #fff;
	border-top: 5px solid #fff;
	border-bottom: 3px solid #fff;
	border-collapse: collapse; 
	outline: 3px solid #ee5006;
	font-size: 15px;
	background: #fff!important;
    border-radius: 5px;
    font-weight: 600;
}

.table th{
    color: white;
}
.table th {
	padding: 7px;
	background: #ee5006;
	border: none;
	text-align: left;
	font-size: 20px;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #ee5006;
    letter-spacing: 3px;
}
.table td {
	padding: 7px;
	border: none;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	font-size: 25px;
}
.table tbody tr:nth-child(even){
	background: #f8f8f8!important;
}

.formWrapper{
    display: flex;
    justify-content: center;
    align-items: center;
}
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
input[type=number]{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}


.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}


.row:after {
  content: "";
  display: table;
  clear: both;
}

  
  .formContainer{
    display: flex ;
    max-width: 1280px;
    width: 100%;
    display: flex;
    height: 400px;
    background: #EE5006;
    border-radius: 10px;
  }

  .leftForm{
    height:400px;
    margin-right: 100px;
  }

.leftForm img{
  width: 400px;
  border-radius: 10px

}
.rightForm1{
    width: 100%;
    border-radius: 5px;
    padding: 20px;
}
.rightForm2 input:focus{
  border: none;
  outline: none;
}
.rightForm2 textarea{
 resize: none;
}
.rightForm2 textarea:focus{
  border: none;
  outline: none;
}
  .rightForm2{
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    height: 100%;
    padding: 30px;
  }


  input[type=submit] {
    background-color: white;
    color: black;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
  }

  .tagWrapper2{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.tagContainer2{
    max-width: 1280px;
    width: 100%;
}
.tagContainer2 h1{
    margin: 10px;
    border-bottom: 2px solid #ee5006;
    padding: 10px 0;
    width: 320px;
    font-size: 45px;
}

.blob{
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 500px;
  }
    svg {
      animation: move 24s ease-in-out infinite;
    }
    
    @keyframes move {
      0%   { transform: scale(1)   translate(0, 0) rotate(0); fill: var(--firstColor); filter: drop-shadow( 20px 14px 10px var(--dropShadowColor)); }
      25%  { transform: scale(0.8) translate(5vw, 10vh) rotate(55deg); fill: var(--firstColor); filter: drop-shadow( 14px 14px 6px var(--dropShadowColor)); }
      50%  { transform: scale(0.6) translate(15vw, 5vh) rotate(180deg); fill: var(--firstColor); filter: drop-shadow( -16px -16px 16px var(--dropShadowColor)); }
      75%  { transform: scale(0.8) translate(5vw, 10h) rotate(55deg); fill: var(--firstColor); filter: drop-shadow( 14px 14px 6px var(--dropShadowColor)); }
      100% { transform: scale(1)   translate(0, 0) rotate(0); fill: var(--firstColor); filter: drop-shadow( 20px 14px 10px var(--dropShadowColor)); }
    }

      
  @media only screen and (max-width: 1204px) {
    .blob{
      width: 300px;
    }

}

  @media only screen and (max-width: 884px) {
      .blob{
        display: none;
      }

  }
  @media only screen and (max-width: 1328px) {
    .footer{
        margin-top: 100px;
    }
    
    .fooContainer{
        padding: 20px;
    }
    
}

@media only screen and (max-width: 585px) {
    .fooContainer{
        display: block;
        width: 240px;        
    }
     .fooContainer h4{
         margin: 10px 0;
     }
     .footer{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    margin-top: 200px;
}

.footer{
    margin-top: 70px;
}
    
}

@media only screen and (max-width: 1328px) {
    .leftForm{
      margin-right: 20px;
    }
    .tagWrapper2{
      padding: 0 20px;
    }
  
    .formWrapper{
      padding: 0px 20px;
  }
  }
  
  @media only screen and (max-width: 1200px) {
    .leftForm{
      display: none;
    }
    .formContainer{
      max-width: 710px;
    }
  
    .col-25, .col-75, input[type=submit] {
      width: 100%;
      margin-top: 0;
    }
  }

  @media only screen and (max-width: 1328px) {
    .topSection{
      padding: 20px;
      height: fit-content;
    }
    .des{
        padding: 20px;
    }
    .serContainer{
      flex-wrap: wrap;
      justify-content: space-around;
    }
    .serCard{
      margin: 10px;
    }
    }
    @media only screen and (max-width: 650px) {
      .topSection{
        text-align: center;
      }
    
      }

      @media only screen and (max-width: 1328px) {
        .containerN{
            padding: 10px;
        }
      }
      
      @media only screen and (max-width: 650px) {
        .containerN{
          flex-direction: column;
        }
        .top{
         padding-top: 30px;
         height: fit-content;
        }
      }
      
      @media only screen and (max-width: 650px) {
        .navbar{
          text-align: center;
          flex-direction: column; 
          width: 300px;
      }
       
      }
      @keyframes tab{
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
    
    
    @media only screen and (max-width: 1328px) {
        .priceWrapper{
            padding: 0px 15px;
        }
        .priceContainer h2{
            font-size: 20px;
            width: 190px;	
        }
        .priceWrapper td{
            font-size: 20px;
            
        }
      }
      @media only screen and (max-width: 500px) {
            .del{
                display: none;
            }
            .priceWrapper{
                padding: 0px 10px;
            }
      }
      @media only screen and (max-width: 1328px) {
        .gid{
            height: fit-content;
        }
        .car{
            height: fit-content;
        }
        .carContainer{
            flex-direction: column;
        }
        .gidContainer{
            flex-direction: column;
        }
        .border{
            display: none;
        }
        .tag{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .tagContainer{
            max-width: 100px;
        }
        .tag h2{
            margin: 20px 0;
        }
    }
    
    @media only screen and (max-width: 1328px) {
    
        .tag{
            display: none;
         
        }
     
    }
    @media only screen and (max-width: 1430px){
        .headImg{
            margin-right: 0px
        }
        .Head{
         flex-direction: column;   
         margin-bottom: 50px; 
        }
        .headImg img{
            width: 400px;
            height: 400px;
        }
     
        .headText h1{
            font-size: 30px;
        }
        .headText h2{
            font-size: 25px;
        }
        .headText h3{
            font-size: 20px;
        }
      
    }
    @media only screen and (max-width: 760px){
        .headImg img{
            width: 400px;
            height: 400px;
        }
        .headText h1{
            font-size: 25px;
        }
        .headText h2{
            font-size: 20px;
        }
        .headText h3{
            font-size: 16px;
        }
     
        
    }
    
    @media only screen and (max-width: 1397px){
        .title{
            display: flex;
            justify-content: center;
        }
    }
    
    @media only screen and (max-width: 505px){
        .headImg img{
            width: 300px;
            height: 300px;
        }
        .headText h1{
            font-size: 25px;
            border-bottom: none;
        }
        .headText h2{
            font-size: 20px;
        }
        .headText h3{
            font-size: 16px;
        }
        .headText{
            text-align: start;
           width: 300px;
           padding: 0 10px;
        }
        .Card{
            width: 300px;
        }
        .Card img{
            width: 280px;
            height: 280px;
        }
        .title h1{
            font-size: 25px;
            width: 280px;
        }
    }