:root{
    --blue: #369DBA;
    --white: #ffffff;
    --black: #222222;
    --gray:#EEEEEE;
    --font60:60px;
    --font45:45px;
    --font30:30px;
    --font20:20px;
    --font18:18px;
    --pad100:100px;
    --pad60:60px;
    --pad50:50px;
    --pad30:30px;
}
body { font-family: "Montserrat", sans-serif;}
img{ max-width: 100%;}
.button{ display: inline-block; width: fit-content; color: var(--white); padding: 10px 30px; background-color: var(--blue); border: 2px solid var(--blue); text-decoration: none; line-height: 1; transition: all 0.5s linear; display: inline-block;}
.button:hover{  background-color: var(--white); color: var(--black); border-radius: 30px;}
.pad100{ padding: var(--pad100) 0;}
.padb0{ padding-bottom: 0;}
.padt0{ padding-top: 0;}
.marT30{ margin-top: var(--pad30);}

h1{ font-size: var(--font60); color: var(--white); line-height: 1.2; margin: 0; margin-bottom: 20px; font-weight: 400;}
h2{ font-size: var(--font30); color: var(--black); line-height: 1.2; margin: 0; margin-bottom: 20px; font-weight: 700;}
h3{ font-size: var(--font45); color: var(--blue); line-height: 1.2; margin: 0; margin-bottom: 20px; font-weight: 700;}
p{ margin: 0; font-size: 18px; color: var(--black); }

/* homeBannerSection */
.homeBannerSection{ background: url(../images/banner1.jpg)no-repeat; background-size: cover; height: 100vh; padding: var(--pad100) 0; display: flex; align-items: center; }
.aboutusbanner{ background: url(../images/aboutus.jpg)no-repeat; background-size: cover; background-position: bottom;}
.servicesBanner{ background: url(../images/servicesBanner.jpg)no-repeat; background-size: cover; background-position: bottom;}
.productBanner{ background: url(../images/productBanner.jpg)no-repeat; background-size: cover; background-position: bottom;}
.contactBanner{ background: url(../images/contactUsBanner.jpg)no-repeat; background-size: cover; background-position: bottom;}
.homeBannerImg{ text-align: center;}
.homeBannerText{ max-width: 644px;}
.homeBannerText p {font-size: var(--font30); color: var(--white); font-weight: 700;}
.innerbanner{ height: 70vh; text-align: center;}
/* homeBannerSection */

/* aboutusSection */
.aboutusSection{background: url(../images/aboutbg.png) no-repeat; background-size: cover; }
.qualitySection{ display: flex; flex-wrap: wrap; max-width: 1600px; margin: 0 auto;}
.qualitySection .qualityBox {flex: 1; background-color: var(--gray); padding: 40px 30px; text-align: center;}
.qualitySection .qualityBox.blue{ background-color: var(--blue);}
.qualitySection .qualityBox.blue :where(h2, p){ color: var(--white);}
.qualitySection .qualityBox img{ padding-bottom: 20px;}
.qualitySection .qualityBox h2{ color: var(--blue);}
/* aboutusSection */ 

/* Our Services */
.servicesSection .servicesBox{ display: flex; flex-wrap: wrap; height: 100%;}
.servicesSection .row{ row-gap:  30px;}
.titleText{ padding-bottom:var(--pad30);}
.servicesSection .servicesBox .servicesImg,.servicesSection .servicesBox .servicesText{ flex: 1;}
.servicesSection .servicesBox .servicesImg img{ height: 100%; object-fit: cover;}
.servicesSection .servicesBox .servicesText{ padding: 25px; background-color: var(--gray); display: flex; flex-direction: column; justify-content: space-between;}
.servicesSection .servicesBox .servicesText a{ padding-top: 20px; display: inline-block; transition: all 0.5s linear;}
.servicesSection .servicesBox .servicesText h2{ color: var(--blue);}
.servicesSection .servicesBox .servicesText:hover a{ animation: buttonHover 2s linear infinite ; }
@keyframes buttonHover{ 0%{ transform: translateY(0); }50%{ transform: translatex(10px); }100%{ transform: translateY(0); }}
/* Our Services */

/* productBanner */
.productBanner h1{ text-align: left;}
.productBanner img{ height: 314px; object-fit: contain;}
.productDetailsSection .row{ gap: 30px 0;}
.productDetails{ display: flex; flex-wrap: wrap; gap: 30px; height: 100%;}
.productDetails .productDetailsimg{ flex: 1 0 46%; background-color: var(--gray);}
.productBannerDetails{ background-color: var(--black); text-align: center;height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.productBannerDetails .productBannerLogo{  padding: 30px;}
.productBannerDetails .productBannerLogo img{ height: 60px;}
.productBannerDetails .button{ margin: 30px auto;}
.productBannerDetails .productBannerimg { text-align: right;}
/* productBanner */

/* footerSection */
.footerSection{ background-color: var(--blue); padding-bottom: var(--pad50);}
.footerSection :where(h4, a){ color: var(--white);}
.footerSection h4{ font-size: var(--font20); font-weight: 600; margin: 0; margin-bottom: 15px;}
.footerSection a{text-decoration: none; display: block; line-height: 1.5}
.footerSection a:hover{ color: var(--white); opacity: 0.6;}
.footerSection .footerNav {padding: 0; margin: 0; column-count: 2; list-style: none;}
.socialMedia a{ display: inline-block; }
.socialMedia a + a {margin-left: 10px;}
.copyWrite{ padding: var(--pad30) 0; background-color: var(--blue); margin-top: 1px;}
.copyWrite p{ color: var(--white); font-size: 16px;}
/* footerSection */

/* aboutusPage */
.visionSection .row{ align-items: center;}
.visionSection .visionImg img{width: 100%; object-fit: cover;}
.pdr0{ padding-right: 0;}
.pdl0{ padding-left: 0;}
.visionBox{ border: 1px solid #222222;}
.visionText{ max-width: 485px; margin: var(--pad30) auto; }
/* aboutusPage */

/* servicesPage*/
.servicesPageBox {border: 1px solid #707070;}
.servicesPageBox .row{align-items: center;}
.servicesPageBoxSection{ display: flex; align-items: center;}
.servicesPageBoxSection + .servicesPageBoxSection{ border-top: 1px solid var(--black);}
.servicesPageBoxSection .servicesImg{ flex: 1 0 33%}
.servicesPageBoxSection .servicesPageText{flex: 1 0 67%; padding: 50px;}
/* servicesPage*/

/* contactInformation */
.contactInformation{ padding: 80px 40px; background-color: var(--blue); height: 100%;}
.contactInformation :where( h2, i, p, a){ color: var(--white);}
.contactInformation .contactDetails{ display: flex; gap: 15px; }
.contactInformation .contactDetails p a{ text-decoration: none; font-size: var(--font18); }
.contactInformation .contactDetails p a:hover{ color: var(--gray);}
.contactInformation .contactDetails i{ line-height: 1.5;}
.contactInformation .contactDetails { margin-top: 30px;}
.contactInformationBox + .contactInformationBox{ padding-top: 30px;}
.contactForm{ padding: 80px 20px; padding-right: 40px; }
.contactForm form input, .contactForm form textarea{width: 100%; padding: 10px 0; border:none; border-bottom: 1px solid #707070; color: var(--black); font-size: var(--font18);}
.contactForm form input + input, .contactForm form textarea{ margin-top: 20px;}
.contactForm form button{ margin-top: 40px;}
.mapSection{ height: 500px;}
/* contactInformation */

@media(max-width: 991px){
    :root{
      --font60:40px;
      --font45:30px;
      --font30:25px;
      --font20:18px;
      --font18:16px;
      --pad100:50px;
      --pad60:30px;
      --pad50:25px;
      --pad30:20px;
  }
  .footerSection .row{gap: 30px 0;}
  .pdr0{padding-right: calc(var(--bs-gutter-x)* .5);}
  .pdl0{padding-left: calc(var(--bs-gutter-x)* .5);}
  .order2{order: 2;}
}


@media(max-width: 767px) and (orientation: landscape){
     .homeBannerImg img{ display: none;}
     .qualitySection .qualityBox{ flex: 0 0 50%;}
     .qualitySection .qualityBox:first-child{ order: 2;}
     .qualitySection .qualityBox:nth-child(2){ order: 1;}
     .qualitySection .qualityBox:nth-child(3){ order: 3;}
     .qualitySection .qualityBox:nth-child(4){ order: 4;}
}

@media(max-width: 767px) and (orientation: portrait){
    .qualitySection .qualityBox{ flex: 0 0 100%;}
    .qualitySection .qualityBox:first-child{ order: 1;}
    .qualitySection .qualityBox:nth-child(2){ order: 2;}
    .qualitySection .qualityBox:nth-child(3){ order: 3;}
    .qualitySection .qualityBox:nth-child(4){ order: 4;}
}
@media (max-width: 767px){
    :root{
        --font60:30px;
        --font45:25px;
    }
    .homeBannerImg img{height:200px; margin-top: 20px;}
    .aboutUsText{ margin-top: var(--pad30);}
    .servicesSection .servicesBox{ flex-direction: column;}
    .visionText{ margin: var(--pad30);}
    .servicesPageBoxSection{ flex-direction: column;}
    .servicesPageBoxSection:nth-child(even) .servicesPageText{ order: 2;}
    .servicesPageBoxSection .servicesPageText{ padding: 25px;}
    .contactInformation, .contactForm{ padding: 40px 20px;}
}