*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'poppins', sans-serif;
  list-style-type: none;
}

html{
  scroll-behavior: smooth;
}

body{
  height: 100%;
  width: 100%;
}

html, body{
  overflow-x: hidden;
}

.flex-space-around{
  display: flex;
  
}

.nav_brand{
  color: white;
  margin-left: 200px;
  font-family: 'poppins', sans-serif;
  font-size: 1rem;
}
.nav_cart{
  color: white;
  margin-left: 1150px;
  font-family: 'poppins', sans-serif;
  font-size: 1rem;
}

.nav-upper{
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #FF111F;
  float: left;
}

.nav img{
  width: 5%;
  height: auto;
  margin-left: 270px;
  margin-top: 10px;
  
}

.header{
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  
}

.logo_des{
margin-bottom: -40px;
color: #2CAAB2;
font-weight: 700;
margin-left: 200px;
}

.nav_div{
margin-left: 920px;
display: flex;
}

.nav_div ul{
  float: left;
  display: inline-flex;
}

#menu-icon{
  display: none;
}

.navbar{
  position: sticky;
  
}

.navbar a{
  display: inline-block;
  font-size: 20px;
  color: black;
  text-decoration: none;
  font-weight: bold;
  margin-left: 35px;
  transition: .3s;
  margin-top: 0px;
  margin-bottom: 22px;
  
}

.navbar a {
  text-align: center;
 
}
.navbar a:hover{
  color: #FF111F;
}
.navbar .icon{
  border: 1px solid black;
  background-color: aliceblue;
  border-radius: 30%;
  padding: 1px;
}

.icon:hover{
  border: 1px solid #FF111F;
}

.home{
  position: relative;
  width: 100%;
  justify-content: space-between;
  height: 90vh;
  background-image: url(Images/background.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center; 
  padding: 70px 10% 0;
}

.home-content h1{
  font-family: 'Itallianno', cursive;
}

.home h1,h4{
  color: black;
  opacity: 0;
  animation: slideRight 1s ease forwards;
  animation-delay: .5s;
}
.home-content{
 max-width: 520px; 
}
.home-content a{
  font-size: 32px;
  font-weight: bold;

}

.home-content h1{
  font-size: 56px;
  font-weight: 700;
  margin: -3px 0;
  margin-bottom: 30px;
}

.home-content h4{
  animation: slideLeft 1s ease forwards;
  animation-delay: 1s;
  margin-top: 40px;
  margin-bottom: 50px;
  font-size: 20px;
}

.home-content a{
  font-size: 18px;
  text-decoration: none;
  color:aliceblue;
  font-weight: bold;
}
.home-content .btn{
  padding: 10px 20px;
  margin-top: 40px;
  background-color: #FF111F;
  border: 5px solid transparent;
  border-radius: 0%;
  opacity: 0;
  animation: slideTop 1s ease forwards;
  animation-delay: 1s;
}

.home-content .btn:hover{
  transition: all 0.3s;
  /* box-shadow: black 0px 30px 90px; */
  box-shadow: #18ACB4 0px 7px 29px 0px;
}

.home-sci{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border-radius: 50%;
  font-size: 20px;
  color: rgb(10, 21, 22);
  text-decoration: none;
  margin: 25px 25px 30px 0;
}

.property {
 
  width: 650px;
  margin: auto;
  margin-top: 100px;
  margin-right: 10px;
}

.slideshow {
  border-radius: 4px;
  margin-bottom: 20px;
  position: relative;
}

.slideshow-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.slideshow-item img {
  width: 80%;
  display: block;
  margin: auto;
}

.slideshow-item p{
  font-family: 'poppins', sans-serif;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
}

.arrow {
  position: absolute;
  top: 20px;
  display: block;
  width: 50px;
  height: 100%;
  /* background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='256' height='256' viewBox='0 0 256 256' xml:space='preserve'%3E%3Cdefs%3E%3C/defs%3E%3Cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)' %3E%3Cpath d='M 82.839 90 c 1.792 0 3.583 -0.684 4.95 -2.05 c 2.734 -2.734 2.734 -7.166 0 -9.9 L 54.738 45 l 33.05 -33.05 c 2.734 -2.733 2.734 -7.166 0 -9.899 c -2.733 -2.733 -7.166 -2.733 -9.899 0 l -38 38 c -2.733 2.733 -2.733 7.166 0 9.9 l 38 38 C 79.256 89.316 81.047 90 82.839 90 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(229,32,32); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round' /%3E%3Cpath d='M 45.161 90 c 1.792 0 3.583 -0.684 4.95 -2.05 c 2.734 -2.734 2.734 -7.166 0 -9.9 L 17.061 45 l 33.05 -33.05 c 2.734 -2.733 2.734 -7.166 0 -9.899 c -2.733 -2.732 -7.166 -2.733 -9.9 0 l -38 38 c -2.733 2.733 -2.733 7.166 0 9.9 l 38 38 C 41.578 89.316 43.37 90 45.161 90 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(229,32,32); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round' /%3E%3C/g%3E%3C/svg%3E") no-repeat center/20px; */
  background: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath d='M0 0 C4.75814358 2.66873921 8.00029965 6.12589896 9.75 11.375 C9.894238 13.14191554 9.9705801 14.9149511 10 16.6875 C10.03867187 18.07388672 10.03867187 18.07388672 10.078125 19.48828125 C9.22646253 26.98088324 4.08025986 31.46485577 -1.01371765 36.4994812 C-1.81257364 37.30090046 -2.61142962 38.10231972 -3.43449336 38.92802441 C-6.11290611 41.61137818 -8.80189973 44.28386946 -11.4909668 46.95654297 C-13.41404782 48.87710694 -15.33486073 50.79993354 -17.25576782 52.72267151 C-21.39242037 56.86089564 -25.53452181 60.99359981 -29.68039513 65.1225853 C-35.67458813 71.0923774 -41.66046128 77.07045506 -47.64434872 83.05057491 C-57.3534745 92.75313793 -67.0692782 102.44898519 -76.78930664 112.140625 C-86.23032431 121.55409759 -95.66817999 130.97072188 -105.10180664 140.39160156 C-105.97432059 141.26293326 -105.97432059 141.26293326 -106.86446109 142.15186761 C-109.78259468 145.06608604 -112.70066628 147.98036653 -115.61870706 150.89467788 C-139.81953509 175.06441544 -164.03121095 199.22326023 -188.25 223.375 C-186.8853988 226.42928724 -185.34495336 228.52736714 -182.97972107 230.88299465 C-182.30119363 231.56365409 -181.62266619 232.24431353 -180.92357731 232.94559902 C-180.17592326 233.68538102 -179.42826921 234.42516303 -178.65795898 235.18736267 C-177.86545211 235.9794617 -177.07294523 236.77156073 -176.256423 237.58766276 C-173.59102144 240.2493241 -170.91854187 242.90376485 -168.24609375 245.55834961 C-166.33728655 247.46168332 -164.42888888 249.36541908 -162.52102661 251.2696991 C-158.40762883 255.37391065 -154.29075259 259.47460588 -150.17166138 263.57310295 C-144.21245765 269.502785 -138.26020253 275.43940386 -132.30991781 281.37803442 C-122.6509904 291.01794592 -112.9887027 300.65448084 -103.32324219 310.2878418 C-102.74471855 310.8644475 -102.1661949 311.44105321 -101.57014024 312.03513182 C-95.11485958 318.46886361 -88.65876876 324.90178152 -82.20178223 331.33380127 C-79.86009801 333.66645376 -77.51842138 335.99911389 -75.17675781 338.33178711 C-74.59893692 338.90738634 -74.02111603 339.48298557 -73.42578542 340.07602721 C-63.79487297 349.6702315 -54.16977567 359.27024658 -44.54922962 368.87484556 C-38.61384931 374.79988618 -32.67347542 380.71983321 -26.72661042 386.63334716 C-22.65309899 390.68474004 -18.58496358 394.74147837 -14.52103686 398.8024854 C-12.17527682 401.1461946 -9.82629355 403.48650771 -7.47232437 405.82197571 C-4.92195076 408.35301988 -2.38091824 410.89308545 0.15795898 413.43565369 C0.90561303 414.17320497 1.65326708 414.91075625 2.42357731 415.67065758 C3.10210475 416.35392476 3.78063219 417.03719195 4.47972107 417.74116421 C5.36094462 418.6190528 5.36094462 418.6190528 6.25997066 419.51467651 C10.5200387 424.83343396 10.3525483 430.88086837 9.75 437.375 C7.7634392 443.33468239 3.82800359 446.62802499 -1.5625 449.6875 C-8.24258375 451.39635863 -13.281894 450.890152 -19.25 447.375 C-22.33698123 444.72565618 -25.18085925 441.84875186 -28.04437256 438.96157837 C-28.91788463 438.09274627 -29.7913967 437.22391417 -30.69137883 436.32875383 C-33.10799403 433.92202283 -35.51772051 431.50875436 -37.92473245 429.09244156 C-40.52462656 426.48575516 -43.13314349 423.88772209 -45.74055481 421.28855896 C-50.8442336 416.19821719 -55.93977217 411.09980148 -61.03243485 405.998441 C-65.17102763 401.85307271 -69.31253971 397.7106423 -73.45615387 393.57029343 C-74.04591543 392.98099157 -74.63567699 392.39168971 -75.24331011 391.78453021 C-76.44140374 390.58739576 -77.63950409 389.39026804 -78.83761111 388.19314699 C-90.07046676 376.96884495 -101.29411033 365.73536759 -112.5146257 354.4987313 C-122.14436129 344.85558908 -131.78194032 335.2203445 -141.42529297 325.59082031 C-152.62330632 314.40885726 -163.81644235 303.22204906 -175.00182557 292.02745092 C-176.19424715 290.83407369 -177.386675 289.64070273 -178.57910919 288.4473381 C-179.16581333 287.86017114 -179.75251747 287.27300418 -180.35700051 286.66804428 C-184.49363507 282.52881845 -188.6337427 278.3930861 -192.77519989 274.25868607 C-197.82073843 269.22155645 -202.86090676 264.17912668 -207.89424196 259.12980177 C-210.46286979 256.55328361 -213.03384889 253.9792336 -215.61137581 251.41161537 C-218.40359712 248.62996619 -221.18412941 245.83681989 -223.96356201 243.04238892 C-225.19184239 241.82414679 -225.19184239 241.82414679 -226.44493651 240.5812937 C-227.18718168 239.8312253 -227.92942684 239.0811569 -228.69416428 238.30835915 C-229.65871163 237.34308121 -229.65871163 237.34308121 -230.64274478 236.35830271 C-233.60793742 232.69934766 -234.5404891 229.08179917 -234.5625 224.4375 C-234.58763672 223.21740234 -234.58763672 223.21740234 -234.61328125 221.97265625 C-233.5502508 214.37141704 -228.02031079 209.72187955 -222.83657837 204.58062744 C-221.96774627 203.70711537 -221.09891417 202.8336033 -220.20375383 201.93362117 C-217.79702283 199.51700597 -215.38375436 197.10727949 -212.96744156 194.70026755 C-210.36075516 192.10037344 -207.76272209 189.49185651 -205.16355896 186.88444519 C-200.07321719 181.7807664 -194.97480148 176.68522783 -189.873441 171.59256515 C-185.72807271 167.45397237 -181.5856423 163.31246029 -177.44529343 159.16884613 C-176.85599157 158.57908457 -176.26668971 157.98932301 -175.65953021 157.38168989 C-174.46239576 156.18359626 -173.26526804 154.98549591 -172.06814699 153.78738889 C-160.84384495 142.55453324 -149.61036759 131.33088967 -138.3737313 120.1103743 C-128.73058908 110.48063871 -119.0953445 100.84305968 -109.46582031 91.19970703 C-98.28385726 80.00169368 -87.09704906 68.80855765 -75.90245092 57.62317443 C-74.70907369 56.43075285 -73.51570273 55.238325 -72.3223381 54.04589081 C-71.73517114 53.45918667 -71.14800418 52.87248253 -70.54304428 52.26799949 C-66.40381845 48.13136493 -62.2680861 43.9912573 -58.13368607 39.84980011 C-53.09655645 34.80426157 -48.05412668 29.76409324 -43.00480177 24.73075804 C-40.42828361 22.16213021 -37.8542336 19.59115111 -35.28661537 17.01362419 C-32.50496619 14.22140288 -29.71181989 11.44087059 -26.91738892 8.66143799 C-25.69914679 7.43315761 -25.69914679 7.43315761 -24.4562937 6.18006349 C-23.7062253 5.43781832 -22.9561569 4.69557316 -22.18335915 3.93083572 C-21.21808121 2.96628837 -21.21808121 2.96628837 -20.23330271 1.98225522 C-14.33815795 -2.79513057 -6.76153969 -3.06761725 0 0 Z ' fill='red' transform='translate(368.25,31.625)'/%3E%3C/svg%3E") no-repeat center/20px;
}


.arrow-next {
  right: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.progress {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #FF111F;
  font-family: sans-serif;
}

.play {
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 20px;
  margin-bottom: 20px;
  padding: 8px 16px;
  /* background: -webkit-gradient(linear, left top, left bottom, from(white), to(#e6e6e6));
  background: linear-gradient(white, #e6e6e6); */
  font-family: sans-serif;
  text-transform: capitalize;
  text-decoration: none;
  border-radius: 4px;
  color: #333;
  
  opacity: .3;
  z-index: 5;
  cursor: default;
  -webkit-transition: all 750ms ease;
  transition: all 750ms ease;
} 

[id^="target"]:target ~ .play {
  -webkit-transition: all 750ms ease;
  transition: all 750ms ease;
  opacity: 1;
  cursor: pointer;
}
 
[id^="target"] {
  display: none;
}
.item-1 {
  z-index: 2;
  opacity: 1;
}
 
*:target ~ .item-1 {
  opacity: 0;
}
 
#target-1:target ~ .item-1 {
  opacity: 1;
}
 
#target-2:target ~ .item-2,
#target-3:target ~ .item-3,
#target-4:target ~ .item-4 {
  z-index: 3;
  opacity: 1;
}

@-webkit-keyframes slideshow {
  0%, 30%, 100% {
    opacity: 0;
  }
  5%, 25% {
    opacity: 1;
  }
}
 
@keyframes slideshow {
  0%, 30%, 100% {
    opacity: 0;
  }
  5%, 25% {
    opacity: 1;
  }
}

.item-1 {
  -webkit-animation: slideshow 16s ease 0s infinite;
          animation: slideshow 16s ease 0s infinite;
}
.item-2 {
  -webkit-animation: slideshow 16s ease 4s infinite;
          animation: slideshow 16s ease 4s infinite;
}
.item-3 {
  -webkit-animation: slideshow 16s ease 8s infinite;
          animation: slideshow 16s ease 8s infinite;
}
.item-4 {
  -webkit-animation: slideshow 16s ease 12s infinite;
          animation: slideshow 16s ease 12s infinite;
}

#target-1:target ~ .item-1 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-1:target ~ .item-2, #target-1:target ~ .item-3, #target-1:target ~ .item-4 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}
 
#target-2:target ~ .item-2 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-2:target ~ .item-1, #target-2:target ~ .item-3, #target-2:target ~ .item-4 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}
 
#target-3:target ~ .item-3 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-3:target ~ .item-1, #target-3:target ~ .item-2, #target-3:target ~ .item-4 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}
 
#target-4:target ~ .item-4 {
  opacity: 1 !important;
  -webkit-animation: none;
          animation: none;
}
#target-4:target ~ .item-1, #target-4:target ~ .item-2, #target-4:target ~ .item-3 {
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}


@keyframes slideRight{
  0%{
    transform: translateX(-100px);
    opacity: 0;
  }
  100%{
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes slideTop{
  0%{
    transform: translateY(100px);
    opacity: 0;
  }
  100%{
    transform: translateY(0px);
    opacity: 1;
  }
}


@keyframes slideLeft{
  0%{
    transform: translateX(100px);
    opacity: 0;
  }
  100%{
    transform: translateX(0px);
    opacity: 1;
  }
}

.about{
  display: flex;
}
.about-des{
  max-width: 740px;
  font-size: 25px;
  margin-left: 200px;
  margin-top: 100px;
  color: #0F172A;
}

.line{
  width: 50px;
  margin-top: 10px;
  color: #FF111F;
  margin-left: 1px;
  border: 2px solid #FF111F;
  
}

.about-des .des1{
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
  color: #0F172A;
}

.about-des .des2{
  margin-top: 20px;
  font-size: 20px;
  font-family: 'poppins', sans-serif;
  line-height: 33px;
  color: #3A3A3A;
  text-align: justify;
}

.about-des .des3{
  margin-top: 90px;
  color: #3A3A3A;
}

.about-des .des3 i{
  color: #080808;
}

.about-des .number{
  margin-top: 20px;
  font-weight: bold;
  font-size: 25px;
}
.about-img img{
  height: 600px;
  width: 500px;
  margin-top: 100px;
  margin-left: 210px;

}

.line2{
  width: 520px;
  height: 600px;
  margin-top: -550px;
  color: #FF111F;
  margin-left: 245px;
  margin-bottom: 20px;
  border: 4px solid #FF111F;
}

/* products section starts */

.product-head{
  max-width: 500px;
  font-size: 25px;
  margin-left: 200px;
  margin-top: 100px;
  color: #0F172A;
}

.card{
  margin-left: 200px;
  margin-right: 200px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 2rem;
  padding: 2rem 0;
}

.product{
  position: relative;
  border: 1px solid #F2F2F2;

}

.product:hover{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.product-img{
  width: 100%;
  height: 400px; 
}

.product-img:hover{
  filter: saturate(1);
}

.product-name, .product-description{
  align-items: center;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
 line-height: 30px;
}

.product-button{
  align-items: center;
  margin-left: 115px;
  margin-bottom: 10px;
  padding: 10px 20px;
  margin-top: 20px;
  background-color: #FF111F;
  border: 5px solid transparent;
  border-radius: 0%;
}

.product-link{
  color: #F2F2F2;
  text-decoration: none;
  font-family: 'poppins', sans-serif;
  font-weight: bold;
}

.h-product-head{
  max-width: 500px;
  font-size: 25px;
  margin-left: 200px;
  margin-top: 100px;
  color: #0F172A;
}

.h-product{
  position: relative;
  border: 1px solid #F2F2F2;

}

.h-product:hover{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.h-product-img{
  width: 100%;
  height: 400px; 
}

.h-product-img:hover{
  filter: saturate(1);
}

.h-product-name, .h-product-description{
  align-items: center;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
 line-height: 30px;
}

.h-product-button{
  align-items: center;
  margin-left: 115px;
  margin-bottom: 10px;
  padding: 10px 20px;
  margin-top: 20px;
  background-color: #FF111F;
  border: 5px solid transparent;
  border-radius: 0%;
}

.h-product-link{
  color: #F2F2F2;
  text-decoration: none;
  font-family: 'poppins', sans-serif;
  font-weight: bold;
}

.view-button{
  align-items: center;
  margin-left: 860px;
  margin-bottom: 50px;
  padding: 10px 20px;
  margin-top: 20px;
  background-color: #FF111F;
  border: 1px solid transparent;
}

.view-link{
  color: #F2F2F2;
  text-decoration: none;
  font-family: 'poppins', sans-serif;
  font-weight: bold;
  font-size: 18px;
}

.view-button:hover{
  box-shadow: #18ACB4 0px 7px 29px 0px;
}

/* products section ends */

/* appoinment starts */

.image-box {
  position: relative;
  padding-bottom: 5px;
}


.image-box-background,
.image-box-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 400px;

}

.image-box-background {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: var(--image-url);
  z-index: 1;
  background-attachment: fixed;
  
}

.image-box-overlay {
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.image-box-content {
  position: relative;
  padding-top: 90px;
  z-index: 3;
  
  color: white;
  align-items: center;
 
}

.image-box-content h1{
  font-size: 35px;
  margin-top: 10px;
  text-align: center;
}

.image-box-content p{
  text-align: center;
  margin-top: 15px;
  line-height: 30px;
  font-family: 'poppins', sans-serif;
  font-size: 25px;
}

.image-box-content .line{
  margin-left: 930px;
}

.image-box-content .l{
  margin-left: 900px;
}

.appoinment-button{
  align-items: center;
  margin-left: 20px;
  margin-bottom: 50px;
  padding: 10px 20px;
  margin-top: 25px;
  background-color: #FF111F;
  border: 1px solid transparent;
  transition: all 0.3s ease-out;
}

.appoinment-link{
  color: #F2F2F2;
  text-decoration: none;
  font-family: 'poppins', sans-serif;
  font-weight: 500;
}

.appoinment-button:hover{
  box-shadow: #18ACB4 0px 7px 29px 0px;
}

.box{
  text-align: center;
}

.overlay{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  visibility: hidden;
  opacity: 0;
}

.overlay:target{
  visibility: visible;
  opacity: 1;
}

.popup-wrapper{
  margin: 170px auto;
  padding: 20px;
  background: #e7e7e7;
  border-radius: 5px;
  width: 30%;
  position: relative;
}

.popup-wrapper h2{
  margin-top: 10px;
  color: #FF111F;
}

.popup-wrapper .close{
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #FF111F;
}

.popup-wrapper .form-content{
  max-height: 30%;
  overflow: auto;
}

.form-container{
  border-radius: 5px;
  background-color: #e7e7e7;
  padding: 20px 0;
}

input, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid black;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  font-size: 15px;
}


.form-container .form-btn button{
  background-color: #FF111F;
  color: white;
  padding: 15px 50px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  letter-spacing: 3px;
  align-items: center;
}

.form-btn{
  margin-left: 110px;
}

/* appoinment ends */

/* specialization start */

.specialization{
  display: flex;

}

.specialization-des{
  max-width: 600px;
  font-size: 25px;
  margin-left: 280px;
  margin-top: 100px;
  color: #0F172A;
}

.specialization-img .line2{
  width: 547px;
  margin-top: -500px;
  height: 550px;
  color: #FF111F;
  margin-left: 260px;
  border: 4px solid #FF111F;
  
}

.specialization-des1{
  font-size: 20px;
  margin-top: 10px;
  color: #3A3A3A;
  line-height: 30px;
  text-align: justify;
}

.specialization-img img{
  height: 550px;
  width: 547px;
  margin-top: 100px;
  margin-left: 200px;
}

.hr-line{
  width: 50px;
  color: #FF111F;
  margin-left: 5px;
  margin-bottom: 20px;
  margin-top: 10px;
  border: 2px solid #FF111F;
  
}

.specialization-icon{
  margin-left: 0px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-right: 80px;
  margin-top: 20px;
}

.specialization-div{
  width: 430px;
  margin-top: 30px;
}
.specialization-div i{
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.specialization-div h4{
  font-size: 20px;
  margin-bottom: 10px;
}

.specialization-div p{
  line-height: 25px;
  color: #3A4D4D;
  margin-bottom: 50px;
}

/* specialization ends */

/* solution partner section starts */

  .solution-partner h1{
    max-width: 500px;
    font-size: 35px;
    margin-left: 200px;
    margin-top: 100px;
    color: #0F172A;
  }

  .solution-partner .sp-line{
  width: 50px;
  color: #FF111F;
  margin-left: 200px;
  margin-bottom: 20px;
  margin-top: 10px;
  border: 2px solid #FF111F;
  }

  .sp-description{
    font-size: 20px;
    margin-top: 10px;
    margin-left: 200px;
    color: #3A3A3A;
    line-height: 30px;
    margin-bottom: 20px;
    max-width: 740px;
  }

  .sp-image{
    display:flexbox;
    margin-left: 200px;
    margin-right: 0px;
    
  }

  .sp-image img{
    height: 230px;
    width: 230px;
    border: 1px solid #cac4c4;
    margin-right: 20px;
    margin-bottom: 20px;
  }

  .sp-image img:hover{
    border: 1px solid #FF111F;
  }

/* solutioon partner section ends */

/* projects section start */
  .project{
    display: flex;
  }
  .project-head{
    width: 740px;
    font-size: 25px;
    margin-left: 200px;
    margin-top: 70px;
    color: #0F172A;
  }

  .p-line{
    width: 50px;
    color: #FF111F;
    margin-left: 5px;
    margin-bottom: 20px;
    margin-top: 10px;
    border: 2px solid #FF111F;
  }

  .project-description{
    font-size: 20px;
    margin-top: 10px;
    margin-left: 5px;
    color: #3A3A3A;
    line-height: 30px;
    margin-bottom: 20px;
  }

  .project-button{

    
    margin-bottom: 50px;
    padding: 10px 20px;
    margin-top: 150px;
    background-color: #FF111F;
    border: 1px solid transparent;
  }

  .project-btn button{
    margin-left: 580px;
  }
  
  .project-link{
    color: #F2F2F2;
    text-decoration: none;
    font-size: 18px;
    font-family: 'poppins', sans-serif;
    font-weight: bold;
  }
  
  .project-button:hover{
    box-shadow: #18ACB4 0px 7px 29px 0px;
  }

.project-image-box-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 500px;

}

.project-image-box-overlay {
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.project-image-box-content {
  position: relative;
  padding-top: 390px;
  z-index: 3;
  text-align: center;
  color: white;
  align-items: center;
 
}

 .p-gallary1{
  display: flex;
 }

 .p-gallary1 .p-img1{
  background-size: contain;
  background-repeat: no-repeat;
  width: 50%;
  height: 500px;
  filter: grayscale(1);
 }

 .p-gallary1 .p-img1 h1{
  margin-top: -40px;
  text-align: center;
  font-size: 200px;
  opacity: 0.2;
 }

 .p-gallary1 p{
  font-size: 35px;
  font-weight: bold;
  margin-top: -150px;
  margin-left: 40px;

 }

 .p-gallary1 .p-img2{
  background-size: 500px 500px;
  background-repeat: no-repeat;
  width: 25%;
  filter: grayscale(1);
 }

 .p-gallary1 .p-img2 h1{
  margin-top: -40px;
  text-align: center;
  font-size: 200px;
  opacity: 0.2;
 }

 .p-gallary1 .p-img2 p{
  font-size: 35px;
  font-weight: bold;
  margin-top: -150px;
  margin-left: 40px;
 }

 .p-gallary1 .p-img3{
  background-size: 500px 500px;;
  width: 25%;
  filter: grayscale(1);
 }

 .p-gallary1 .p-img3 h1{
  margin-top: -40px;
  text-align: center;
  font-size: 200px;
  opacity: 0.2;
 }

 .p-gallary1 .p-img3 p{
  font-size: 35px;
  font-weight: bold;
  margin-top: -150px;
  margin-left: 40px;
  
 }

 .p-gallary2{
  display: flex;
 }

 .p-gallary2 .p-img4{
  background-size: 500px 500px;
  width: 25%;
  height: 500px;
  filter: grayscale(1);
 }

 .p-gallary2 .p-img4 h1{
  margin-top: -40px;
  text-align: center;
  font-size: 200px;
  opacity: 0.3;
 }

 .p-gallary2 .p-img4 p{
  font-size: 35px;
  font-weight: bold;
  margin-top: -150px;
  margin-left: 40px;
  
 }


 .p-gallary2 .p-img5{
  background-size: 500px 500px;;
  width: 25%;
  filter: grayscale(1);
 }

 .p-gallary2 .p-img5 h1{
 
  margin-top: -40px;
  text-align: center;
  font-size: 200px;
  opacity: 0.2;
 }

 .p-gallary2 .p-img5 p{
  font-size: 35px;
  font-weight: bold;
  margin-top: -150px;
  margin-left: 40px;
 }

 .p-gallary2 .p-img6{
  background-size: cover;
  width: 50%;
  filter: grayscale(1);
 }

 .p-gallary2 .p-img6 h1{
  text-align: center;
  font-size: 200px;
  opacity: 0.2;
 }

 .p-gallary2 .p-img6 p{
  font-size: 35px;
  font-weight: bold;
  margin-top: -150px;
  margin-left: 40px;
 }


 .p-gallary1 .p-img1:hover{
  filter:grayscale(0)
 }

 .p-gallary1 .p-img2:hover{
  filter:grayscale(0)
 }

 .p-gallary1 .p-img3:hover{
  filter:grayscale(0)
 }

 .p-gallary2 .p-img4:hover{
  filter:grayscale(0)
 }

 .p-gallary2 .p-img5:hover{
  filter:grayscale(0)
 }

 .p-gallary2 .p-img6:hover{
  filter:grayscale(0)
 }

 .pr-line{
  width: 50px;
  color: #FF111F;
  margin-left: 5px;
  margin-bottom: 20px;
  margin-top: 10px;
  border: 2px solid #FF111F;
 }

/* projects section ends */

/* management team satrt */
.management-team{
  margin-bottom: 30px;
}

.mt-image{
  margin-bottom: 50px;
}

.management-head{
  width: 740px;
  font-size: 25px;
  margin-left: 200px;
  margin-top: 70px;
  color: #0F172A;
}

.m-line{
  width: 50px;
  color: #FF111F;
  margin-left: 5px;
  margin-bottom: 20px;
  margin-top: 10px;
  border: 2px solid #FF111F;
}

.management-description{
  font-size: 20px;
  margin-top: 10px;
  color: #3A3A3A;
  line-height: 30px;
  margin-bottom: 70px;
}

.mt-image{
  display: flex;
}

.img1 {
  margin-left: 450px;
}

.img1 img{
  border: 1px solid black;
  height: 600px;
  width: 500px;
  filter: grayscale(40%);
}

.img1 img:hover{
  filter: grayscale(0);
}

.img1 a{
  padding: 7px;
  font-size: large;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #F2F2F2;
  background-color: #333;
}

.img2 img{
  border: 1px solid black;
  height: 600px;
  width: 500px;
  filter: grayscale(40%);
}

.img2 img:hover{
  filter: grayscale(0);
}

.img2 a{
  padding: 7px;
  font-size: large;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #F2F2F2;
  background-color: #333;
}

.mt-designation{
  margin-top: 10px;
  line-height: 40px;
  text-align: center;
}

.mt-designation h1{
  font-size: 30px;
  font-weight: bolder;
}

.mt-designation p{
  font-size: 20px;
}

.img2{
  margin-left: 50px;
}

.mt-designation2{
  margin-top: 10px;
  line-height: 35px;
  text-align: center;
}

.mt-designation2 h1{
  font-size: 30px;
  font-weight: bolder;
}

.mt-designation2 p{
  font-size: 20px;
}

.img1 img:hover{
  border: 1px solid #18ACB4;
}

.img2 img:hover{
  border: 1px solid #18ACB4;
}

.img1 a:hover{
  color: #F2F2F2;
  background-color: #FF111F;
}

.img2 a:hover{
  color: #F2F2F2;
  background-color: #FF111F;
}

/* management team ends */

.client-head{
  width: 100%;
  font-size: 25px;
  margin-left: 200px;
  margin-top: 100px;
  color: #0F172A;
}


.c-line{
  width: 50px;
  color: #FF111F;
  margin-left: 5px;
  margin-bottom: 20px;
  margin-top: 10px;
  border: 2px solid #FF111F;
}

.client-description{
  font-size: 20px;
  margin-top: 10px;
  color: #3A3A3A;
  line-height: 30px;
  margin-bottom: 70px;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.logos {
  margin-top: 80px;
  overflow: hidden;
  background: white;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos:before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
}

.logos:after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
}

.logos:hover .logos-slide {
  animation-play-state: paused;
}

.logos-slide {
  display: inline-block;
  animation: 35s slide infinite linear;
}

.logos-slide img {
  height: 160px;
  margin: 0 40px;
}

/* clients sections ends */


/* counter section starts */

*{
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  -o-transition: 0.2s linear;
}

.counter-wrapper{
  display: flex;
  margin-top: 80px;
  background-color: #f8f6f6;
}

.counter1, .counter2, .counter3, .counter4{
  text-align: center;
  color: #FF111F;
  font-size: 30px;
  margin-right: 150px;
  margin-left: 150px;
  margin-top: 20px;
}

.counter1{
  margin-left: 250px;
}

.counter-wrapper p{
  font-size: 30px;
  color: #18ACB4;
}

.count-line{
  height: 130px;
  width: 1px;
  color: #E5E5E5;
}

/* counter section ends */

/* footer section start */

.footer{
  padding-top: 20px;
  background-color: #0F172A;
  display: flex;
  height: 500px;
  column-count: 4;
  width: 100%;
  padding-left: 200px;
  padding-right: 200px;
}

.footer-logo{
  padding-right: 30px;
  width: 25%;
}

.footer-logo img{
  height: 50px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.footer-logo p{
  color: white;
  line-height: 30px;
  font-weight: 100;
  text-align: justify;
  margin-bottom: 30px;
}

.footer-logo a{
  border: 1px solid white;
  background-color: white;
  color: #080808;
  padding: 5px;
  font-size: 20px;
  border-radius: 50%;
}

.footer-nav{
  width: 25%;
  margin-top: 20px;
  margin-left: 50px;
}

.footer-nav h1{
  color: white;
  margin-bottom: 10px;
}

.footer-nav a{
  color: white;
  margin-left: 5px;
  text-decoration: none;
  line-height: 40px;
}

.footer-nav a:hover{
  color: #FF111F;
}

.footer-nav ul{
  margin-left: 15px;

}

.footer-nav li::before {
  content: "•";
  padding-right: 8px;
  color: #FF111F; 
  margin-left: -15px;
}

.working-hour{
  width: 25%;
  margin-top: 20px;
  color: white;
  margin-left: 50px;
}

.working-hour h1{
  margin-bottom: 10px;
}

.footer-line{
  width: 40px;
  border: 2px solid #FF111F;
  margin-bottom: 10px;
}

.working-day{
  border: 1px solid #FF111F;
}

.working-hour p{
  line-height: 30px;
  margin-bottom: 10px;
}

.working-day th{
  text-align: left;
  padding-left: 23px;
  padding-top: 10px;
  padding-bottom: 5px;
}

.footer-contact{
  width: 25%;
  margin-top: 20px;
  color: white;
  line-height: 30px;
  margin-left: 50px;
  padding-left: 60px;
}

.footer-contact h1{
  margin-bottom: 10px;
}

.footer2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 30px;
  margin-top: 20px;
}

.copyright p{
  color: #0F172A;
  margin-left: 200px;
}

.created-by p{
  margin-left: 560px;
}

.created-by a{
  text-decoration: none;
  color: #FF111F;
  font-weight: bold;
}

.created-by a:hover{
  color: #18ACB4;
}

/* footer section ends */

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 50px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: 1px solid #FF111F; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: transparent; /* Set a background color */
  color:#FF111F; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  font-size: 18px; /* Increase font size */
}

#myBtn i{
  font-size: 50px;
}

#myBtn i:hover {
  transform: translateY(-4px);
}

/* form section ................... */

/* about section start................................ */

.about-banner .about-image-box-content h1{
  text-align: center;
  justify-content: center;
  margin-top: 120px;
  font-size: 60px;
}

.about-image-box-background,
.about-image-box-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 400px;

}

.about-image-box-background {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: var(--image-url);
  z-index: 1;
  background-attachment: fixed;
  
}

.about-image-box-overlay {
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.about-image-box-content {
  position: relative;
  padding-top: 90px;
  z-index: 3;
  
  color: white;
  align-items: center;
 
}

/* story section start */

.story{
  display: flex;
  margin-top: 100px;
}

.story-des{
  width: 600px;
  font-size: 25px;
  margin-left: 280px;
  margin-top: 100px;
  color: #0F172A;
}

.story-img .line2{
  width: 547px;
  margin-top: -550px;
  height: 600px;
  color: #FF111F;
  margin-left: 260px;
  border: 4px solid #FF111F;
  
}

.story-des1{
  font-size: 20px;
  margin-top: 10px;
  color: #3A3A3A;
  line-height: 30px;
  text-align: justify;
}

.story-img img{
  height: 600px;
  width: 547px;
  margin-top: 100px;
  margin-left: 200px;
}

.hr-line{
  width: 50px;
  color: #FF111F;
  margin-left: 5px;
  margin-bottom: 20px;
  margin-top: 10px;
  border: 2px solid #FF111F;
  
}

.story-icon1 h4{
  margin-top: -28px;
  margin-left: 35px;
  font-size: 20px;
}

.story-icon3 h4{
  margin-top: -28px;
  margin-left: 35px;
  font-size: 20px;
}

.story-icon2 i{
  margin-left: 162px;
}

.story-icon2 h4{
  margin-top: -28px;
  margin-left: 200px;
  font-size: 20px;
}

.story-icon4 i{
  margin-left: 125px;
}

.story-icon4 h4{
  margin-top: -28px;
  margin-left: 160px;
  font-size: 20px;
}
.story-icon{
  margin-top: 55px;
  display: flex;
  text-align: justify;
}

.s-icon{
  padding-top: 20px;
}

/* story section ends */

/* what we offer section start */

.hvac-solution{
  display: flex;
  margin-top: 0px;
}
.offer-des{
  max-width: 740px;
  font-size: 25px;
  margin-left: 200px;
  margin-top: 100px;
  color: #0F172A;
}

.line{
  width: 50px;
  margin-top: 10px;
  color: #FF111F;
  margin-left: 1px;
  border: 2px solid #FF111F;
  
}

.offer-des1{
  font-size: 20px;
  margin-top: 10px;
  color: #3A3A3A;
  line-height: 30px;
  text-align: justify;
}

.offer-card1{
  margin-left: 200px;
  margin-right: 200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 40px;
}

.offer-card2{
  margin-left: 200px;
  margin-right: 200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 40px;
}

.offer-card3{
  margin-left: 200px;
  margin-right: 200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 40px;
  margin-bottom: 150px;
}

.offer-product{
  border: 1px solid #F2F2F2;
  background-color: #d0d3d4 ;
}

.offer-product-img{
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.offer-product-name{
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

/* what we offer section ens */

/* why guardian start */
.image-box{
  margin-bottom: 80px;
  background-attachment: fixed;
}
.image-box-content a{
  font-size: 32px;
  font-weight: 700;
}

.image-box-content a{
  font-size: 18px;
  text-decoration: none;
  color:aliceblue;
  font-weight: bold;
}
.image-box-content .btn{
  padding: 10px 20px;
  margin-top: 50px;
  margin-left: 870px;
  background-color: #FF111F;
  border: 5px solid transparent;
  border-radius: 0%;
}

.image-box-content .btn:hover{
  transition: all 0.3s;
  /* box-shadow: black 0px 30px 90px; */
  box-shadow: #18ACB4 0px 7px 29px 0px;;
}

/* why guardian ends */

/* about section ends................................... */

/* services section start ....................... */
.our-service{
  display: flex;
  margin-top: 70px;
}

.service-description{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-left: 170px;
  margin-top: 40px;
  margin-bottom: 70px;
  line-height: 30px;
}

.service-head{
  margin-left: 30px;
}

.service-head h1{
  color: #FF111F;
  margin-bottom: 10px;
}

.service-head h2{
  font-size: 20px;
}

.s-title{
  align-items: center;
  text-align: center;
  
}

.s-title .hr-line{
  margin-left: 920px;
}

.s-gallary1{
  display: flex;
  margin-top: 30px;
  padding: 0 30px;
  gap: 20px;
  background-color: white;
 }

 .s-gallary1 .s-img{
  width: 20%;
  height: 250px;
  background-size: cover;
 }

 .s-gallary2{
  display: flex;
  margin-top: 20px;
  padding: 0 30px;
  gap: 20px;
  margin-bottom: 60px;
 }

 .s-gallary2 .s-img{
  width: 20%;
  height: 250px;
  background-size: cover;
  margin-bottom: 20px;
 }

 .s-img:hover{
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
 }

 .project-btn3 button{
  visibility: hidden;
 }

 /* specialization start */

.service-specialization{
  margin-top: -200px;
  margin-left: -80px;
  margin-bottom: 100px;
}

.specialization-description{
  width: 740px;
  font-size: 25px;
  margin-left: 280px;
  margin-top: 150px;
  color: #0F172A;
}

.service-icon{
  margin-left: 280px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-right: 80px;
  margin-top: 20px;
}

.service-div{
  width: 450px;
  margin-top: 30px;
}
.service-div i{
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.service-div h4{
  font-size: 20px;
  margin-bottom: 10px;
}

.service-div p{
  line-height: 25px;
  color: #3A4D4D;
  margin-bottom: 50px;
}
 /* specializatin ends */

/* services section ends.......................... */

/* projects section start ................................ */

.recent-project{
  margin-top: 200px;
  margin-left: 200px;
  line-height: 50px;
}

.project-div h1{
  font-size: 40px;
}


.project-image1{
  display: flex;
}

.project-image2{
  display: flex;
}

.project-image3{
  display: flex;
  margin-bottom: 100px;
}

.project-image2 .project-des{
  margin-left: 200px;
}

.p-image2{
  margin-left: 91px;
}
.project-des{
  max-width: 600px;
  font-size: 25px;
  margin-left: 280px;
  margin-top: 100px;
  color: #0F172A;
}

.project-des h6{
  margin-left: 2px;
  margin-bottom: 10px;
}

.project-img .line2{
  width: 547px;
  margin-top: -500px;
  height: 550px;
  color: #FF111F;
  margin-left: 260px;
  border: 4px solid #FF111F;
  
}

.project-des1{
  font-size: 18px;
  margin-top: 10px;
  color: #3A3A3A;
  line-height: 30px;
  text-align: justify;
  margin-bottom: 40px;
}

.project-img img{
  height: 550px;
  width: 547px;
  margin-top: 100px;
  margin-left: 200px;
}

.hr-line{
  width: 50px;
  color: #FF111F;
  margin-left: 2px;
  margin-bottom: 20px;
  margin-top: 10px;
  border: 2px solid #FF111F;
  
}

.project-icon{
  display: flex;
  text-align: justify;
}
.project-icon p{
  font-size: 18px;
  margin-left: 10px;
}

.project-icon{
  padding-top: 20px;
}


.project-button2{
  align-items: center;
  margin-left: 872px;
  margin-bottom: 100px;
  padding: 12px 20px;
  margin-top: 0px;
  background-color: #FF111F;
  border: 1px solid transparent;
}

.project-link2{
  color: #F2F2F2;
  text-decoration: none;
  font-family: 'poppins', sans-serif;
  font-weight: bold;
  font-size: 18px;
}

.project-button2:hover{
  box-shadow: #18ACB4 0px 7px 29px 0px;
}
/* projects section ends................................... */

/* form section start here .....................*/

.form-section{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 60px;
  margin-bottom: 60px;
}

.contact-form-container{
  border-radius: 5px;
  background-color: white;
  box-shadow: rgb(235, 227, 227) 0px 7px 29px 0px;
  padding: 20px 0px;
}

.contact-form-head{
  margin-bottom: 20px;
  text-align: center;
  font-size: 30px;
}

.contact-form-label{
  width: 80%;
  margin-left: 75px;
  
}

.contact-btn1{
  background-color: #FF111F;
  align-items: center;
  color: white;
  padding: 15px 40px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: bold;
}

.contact-btn2{
  background-color: #FF111F;
  align-items: center;
  color: white;
  padding: 15px 35px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  letter-spacing: 3px;
  font-weight: bold;
}

.contact-btn{
  margin-left: 250px;
}

/* form section end here...................... */

/* contact info start here */
.contact-us{
    display: flex;
    margin-top: 70px;
}

.contact-info{
  box-shadow: rgb(235, 227, 227) 0px 7px 29px 0px;
  background-color: white;
  padding-left: 50px;
  padding-right: 50px;
}

.contact-info h1{
  margin-bottom: 30px;
  text-align: center;
  font-size: 30px;
  margin-top: 20px;
}

.contant-info1{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 20px;
}

.contant-info2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 20px;
}

.call-us1{
  display: flex;
}

.contact-info i{
  font-size: 30px;
  background-color: #FFE8DE;
  border-radius: 50%;
  padding: 5px;
  color: #FF111F;
}

.contact-info h3{
  margin-left: 20px;
}

.contact-info p{
  margin-left: 60px;
  line-height: 25px;
}

.contant-info2{
  margin-top: 40px;
  margin-bottom: 20px;
}
.location{
  display: flex;
}

.contact-email{
  display: flex;
}
.work-hour{
  display: flex;
}

.follow-us h1{
  padding-top: 70px;
}

.follow-us-icon{
  text-align: center;
  margin-top: 30px;
}

.follow-us-icon i{
  font-size: 20px;
}
/* contact info ends here */

/* map section start */
iframe{
  width: 1500px;
   height: 500px;
}
.map-section{
  margin-left: 200px;
  margin-right: 200px;
  margin-bottom: 50px;
}

/* map section ends */

/* contact us section ends ............................... */

/* products section start .................................. */

.sidebar{
  margin-top: 200px;
  margin-left: 200px;
  margin-right: 200px;
  margin-bottom: 60px;
  display: flex;
}

.product-div{
  width: 35%;
}

.product-catagories{
  background-color: #18ACB4;
  width: 235px;
  padding: 10px;
  color: white;
  font-size: 20px;
  text-align: center;
  border-radius: 30px;
}

.product-search input{
  margin-left: 0px;
  width: 14.7rem;
  padding-left: 20px;
}
.product-search button{
  margin-left: -0.3rem;
  border: 1px solid;
  padding: 12px;
  padding-top: 14px;
}

.dropbtn {
  background-color: #FF111F;
  color: white;
  padding: 16px;
  font-size: 15px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  display: none;
}

/* .dropbtn:hover, .dropbtn:focus {
  background-color: #18ACB4;
} */

 .dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  margin-left: -10px;
  background-color: #f1f1f1;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-bottom: 20px;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 15px;
}



.show {display:block;} 

.product-category a{
  text-decoration: none;
  color: #3A3A3A;
}

.product-category .active{
  background-color: #FF111F !important;
  color: white;
}

.product-category a:hover{
  background-color: #FF111F;
  color: white;
}

.product-category ul{
  list-style-type: none;
  line-height: 40px;
}

.product-card{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  /* margin-top: -580px; */
  /* margin-left: 30px; */
  gap: 20px;
  margin-bottom: 80px;
  width: 100%;
}

.product-btn{
  align-items: center;
  margin-left: 115px;
  margin-bottom: 10px;
  padding: 10px 20px;
  margin-top: 20px;
  background-color: #FF111F;
  border: 5px solid transparent;
  border-radius: 0%;
}

.product-link2{
  color: #F2F2F2;
  text-decoration: none;
  font-family: 'poppins', sans-serif;
  font-weight: bold;
}

.product-list1{
  padding: 10px 170px 10px 20px;
}

.product-list2{
  padding: 10px 95px 10px 20px;
}

.product-list3{
  padding: 10px 123px 10px 20px;
}

.product-list4{
  padding: 10px 156px 10px 20px;
}

.product-list5{
  padding: 10px 113px 10px 20px;
}

.product-list6{
  padding: 10px 173px 10px 20px;
}

.product-list7{
  padding: 10px 125px 10px 20px;
}

.product-list8{
  padding: 10px 78px 10px 20px;
}

.product-list9{
  padding: 10px 109px 10px 20px;
}

.product-list10{
  padding: 10px 183px 10px 20px;
}

.product-list11{
  padding: 10px 92px 10px 20px;
}

.product-list12{
  padding: 10px 179px 10px 20px;
}

.product-list13{
  padding: 10px 122px 10px 20px;
}

.product-list14{
  padding: 10px 115px 10px 20px;
}

/* product section ends..................................... */


/* All project section start................................ */

.p-offer-card1{
  margin-left: 200px;
  margin-right: 200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 200px;
}

.p-offer-card2{
  margin-left: 200px;
  margin-right: 200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 40px;
}

.p-offer-card3{
  margin-left: 200px;
  margin-right: 200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 40px;
}

.p-offer-card4{
  margin-left: 200px;
  margin-right: 200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 40px;
 
}

.p-offer-card5{
  margin-left: 200px;
  margin-right: 200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 40px;
}

.p-offer-card6{
  margin-left: 200px;
  margin-right: 200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 40px;
}

.p-offer-card7{
  margin-left: 200px;
  margin-right: 200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 40px;
}

.p-offer-card8{
  margin-left: 200px;
  margin-right: 200px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 40px;
  margin-bottom: 70px;
}

.p-offer-product{
  border: 1px solid #F2F2F2;
  background-color: #d0d3d4 ;
}

.p-offer-product-img{
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.p-offer-product-name{
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

/* All project section ends................................. */


/* product details section start............................ */

.prodetails-banner{
  margin-top: 120px;
  height: 200px;
  background-color: #F7F7F7;
}

.prodetails-heading{
  align-items: center;
  text-align: center;
  color: #FF111F;
  font-size: 60px;
  padding-top: 50px;
  font-weight: bold;
}

.prodetails-link a{
  text-decoration: none;
  color: black;
  font-size: 20px;
  text-align: center;
  
}

.prodetails-link{
  text-align: center;
  margin-top: 20px;
}

#prodetails{
  display: flex;
  margin-bottom: 150px;
}
#prodetails .single-pro-img{
  width: 25%;
  margin-right: 50px;
  margin-left: 200px;
  height: 500px;
  /* margin-top: 100px; */
}

.small-img-group{
  display: flex;
  justify-content: space-between;
  
}
.single-pro-img1{
  border: 1px solid #F2F2F2;
  height: 450px;
}
.small-img-col{
  flex-basis: 24%;
  cursor: pointer;
  border: 1px solid #F2F2F2;
  opacity: 1;
}

.small-img-col:hover{
    opacity: 0.5;
}
#prodetails .single-pro-details{
  width: 44%;
  padding-top: 30px;
  text-align: justify;
  margin-left: 140px;
  max-height: auto;
  
}

#more{
  display: inline;
}
 
#proBtn {display: none;}

#proBtn{
  font-size: 12px;
  background-color: white;
  color: #FF111F;
  border: transparent;
  padding: 4px;
  cursor: pointer;
  margin-left: -5px;
}

#prodetails .single-pro-details h5{
  padding: 40px 0 20px 0;
  font-size: 30px;
}

#prodetails .single-pro-details p{
  font-family: 'poppins', sans-serif;
  line-height: 25px;
}

.description-btn button{
  background-color: #FF111F;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  align-items: center;
  margin-top: 280px;
}

#description-btn a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn1 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn4 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn4 button{
  margin-top: 220px;
}

#description-btn5 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn8 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn8 button{
  margin-top: 240px;
}

#description-btn9 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn9 button{
  margin-top: 280px;
}

#description-btn10 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn10 button{
  margin-top: 50px;
}

#description-btn11 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn11 button{
  margin-top: 80px;
}

#description-btn12 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn12 button{
  margin-top: 220px;
}

#description-btn13 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn13 button{
  margin-top: 270px;
}

#description-btn14 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn14 button{
  margin-top: 270px;
}

#description-btn15 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn15 button{
  margin-top: 120px;
}

#description-btn16 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn16 button{
  margin-top: 160px;
}

#description-btn17 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn17 button{
  margin-top: 160px;
}

#description-btn18 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn18 button{
  margin-top: 160px;
}

#description-btn19 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn19 button{
  margin-top: 160px;
}

#description-btn20 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn20 button{
  margin-top: 90px;
}

#description-btn21 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn21 button{
  margin-top: 70px;
}

#description-btn22 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn23 button{
  margin-top: 120px;
}

#description-btn23 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn22 button{
  margin-top: 120px;
}

#description-btn24 button{
  margin-top: 310px;
}

#description-btn24 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn25 button{
  margin-top: 110px;
}

#description-btn25 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn26 button{
  margin-top: 155px;
}

#description-btn26 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn27 button{
  margin-top: 195px;
}

#description-btn27 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn28 button{
  margin-top: 105px;
}

#description-btn28 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn29 button{
  margin-top: 215px;
}

#description-btn29 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn30 button{
  margin-top: 145px;
}

#description-btn30 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn31 button{
  margin-top: 230px;
}

#description-btn31 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn32 button{
  margin-top: 60px;
}

#description-btn32 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn33 button{
  margin-top: 160px;
}

#description-btn33 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn34 button{
  margin-top: 175px;
}

#description-btn34 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn35 button{
  margin-top: 175px;
}

#description-btn35 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn36 button{
  margin-top: 175px;
}

#description-btn36 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn39 button{
  margin-top: 50px;
  
}

#description-btn39 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn40 button{
  margin-top: 250px;
  
}

#description-btn40 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn41 button{
  margin-top: 250px;
  
}

#description-btn41 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn42 button{
  margin-top: 250px;
  
}

#description-btn42 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

#description-btn43 button{
  margin-top: 250px;
  
}

#description-btn43 a{
  color: white;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
}

.single-pro-details li{
  line-height: 25px;
  margin-left: 15px;

  list-style-type: initial;
}

/* product details setion ends.............................. */

/* full gallery section start here......................... */

.full-gallary1{
  display: flex;
  margin-top: 60px;
  
  gap: 20px;
  background-color: white;
  padding: 0 30px;
  
 }

 .full-gallary1 .full-img{
  width: 20%;
  height: 250px;
  background-size: cover;
 }

 .full-gallary2{
  display: flex;
  margin-top: 20px;
  padding: 0 30px;
  gap: 20px;
  
 }

 .full-gallary2 .full-img{
  width: 20%;
  height: 250px;
  background-size: cover;
  margin-bottom: 20px;
 }

 .full-gallary3{
  display: flex;
  padding: 0 30px;
  gap: 20px;
  
 }

 .full-gallary3 .full-img{
  width: 20%;
  height: 250px;
  background-size: cover;
  margin-bottom: 20px;
 }

 .full-gallary4{
  display: flex;
  padding: 0 30px;
  gap: 20px;
  
 }

 .full-gallary4 .full-img{
  width: 20%;
  height: 250px;
  background-size: cover;
  margin-bottom: 20px;
  margin-bottom: 50px;
 }

 .full-img:hover{
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
 }

 .gallery-btn{
  visibility: hidden;
  background-color: #FF111F;
  border: transparent;
  padding: 5px 155px;
  margin-top: 110px;
 }

 .show-img{
  text-decoration: none;
  color: white;
  font-size: 20px;
  text-align: center;
  justify-content: center;
  font-weight: bold;
 }

 .full-img:hover{
  .gallery-btn{
    visibility: visible;
  }
 }

 .box{
  text-align: center;
}

.overlay1{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  visibility: hidden;
  opacity: 0;
}

.overlay1:target{
  visibility: visible;
  opacity: 1;
}

.popup-image{
  margin: 230px 550px;
  padding: 20px;
  border-radius: 5px;
  width: 50%;
  position: relative;
}

.image-popup{
  width: 770px;
}

.popup-image .close{
  position: absolute;
  top: 30px;
  right: 180px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #FF111F;
}

/* full gallery section ends here........................... */


/* responsive design start here .................................................. */