/*-----------------------------------*\

  #style.css

\*-----------------------------------*/














/*-----------------------------------*\

  #CUSTOM PROPERTY

\*-----------------------------------*/



:root {



  /**

   * colors

   */



  --st-patricks-blue: hsl(236, 57%, 28%);

  --amaranth-purple: hsl(335, 88%, 38%);

  --royal-blue-dark: hsl(231, 68%, 21%);

  --chrome-yellow: hsl(39, 100%, 52%);

  --space-cadet-1: hsl(230, 41%, 25%);

  --space-cadet-2: hsl(230, 59%, 16%);

  --winter-sky_50: hsla(335, 87%, 53%, 0.5);

  --purple-navy: hsl(236, 26%, 43%);

  --ksu-purple: hsl(275, 54%, 33%);

  --winter-sky: hsl(335, 87%, 53%);

  --razzmatazz: hsl(335, 87%, 51%);

  --platinum: hsl(0, 0%, 90%);

  --black_70: hsla(0, 0%, 0%, 0.7);

  --rajah: hsl(29, 99%, 67%);

  --white: hsl(0, 0%, 100%);





  --sea-green: hsl(163, 85%, 35%);

  --light-seagreen: hsl(163, 85%, 50%);

  --ocean-blue: hsl(199, 100%, 38%);

  --dark-oceanblue: hsl(199, 100%, 15%);

  --magenta: hsl(300, 100%, 30%) ;

  --purple: hsl(300, 100%, 30%);

  --orange: hsl(30, 100%, 50%);

  --red: hsl(0, 100%, 50%);





  --gradient-1: linear-gradient(90deg,var(--sea-green) 0,var(--ocean-blue) 51%,var(--sea-green));

  --gradient-2: linear-gradient(90deg,var(--orange) ,var(--red));



  /**

   * typography

   */



  --ff-source-sans-pro: 'Source Sans Pro', sans-serif;

  --ff-poppins: 'Poppins', sans-serif;



  --fs-1: 4.2rem;

  --fs-2: 3.8rem;

  --fs-3: 3.2rem;

  --fs-4: 2.5rem;

  --fs-5: 2.4rem;

  --fs-6: 2rem;

  --fs-7: 1.8rem;

  --fs-8: 1.5rem;



  --fw-500: 500;

  --fw-600: 600;

  --fw-700: 700;



  /**

   * border radius

   */



  --radius-4: 4px;

  --radius-12: 12px;



  /**

   * spacing

   */



  --section-padding: 60px;



  /**

   * transition

   */



  --transition-1: 0.15s ease;

  --transition-2: 0.35s ease;

  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);

  --cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);



  /**

   * shadow

   */



  --shadow: 0 5px 20px 1px hsla(220, 63%, 33%, 0.1);



}











/*-----------------------------------*\

  #RESET

\*-----------------------------------*/



*,

*::before,

*::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



li { list-style: none; }



a { text-decoration: none; }



a,

img,

span,

input,

button,

ion-icon { display: block; }



button,

input {

  background: none;

  border: none;

  font: inherit;

}



button { cursor: pointer; }



input { width: 100%; }



ion-icon { pointer-events: none; }



img { height: auto; }



address { font-style: normal; }



html {

  font-family: var(--ff-poppins);

  font-size: 10px;

  scroll-behavior: smooth;

}



body {

  background-color: var(--white);

  color: var(--purple-navy);

  font-size: 1.6rem;

}



::-webkit-scrollbar { width: 10px; }



::-webkit-scrollbar-track { background-color: hsl(0, 0%, 95%); }



::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }



::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }





/* Style the dropdown menu to be initially hidden */

.navbar-item .dropdown-menu {

  display: none;

  position: absolute;

  background-color: #fff; /* Adjust background color */

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */

}



/* Show the dropdown menu on hover */

.navbar-item:hover .dropdown-menu {

  display: block;

}



/* Style individual dropdown items */

.dropdown-menu li {

  padding: 10px;

  border-bottom: 1px solid #ccc; /* Add a border between items */

}



/* Remove border from the last dropdown item */

.dropdown-menu li:last-child {

  border-bottom: none;

}





/*-----------------------------------*\

  #REUSED STYLE

\*-----------------------------------*/



.container { padding-inline: 15px; }

.container1 { padding-top:5% ;
padding-left: 7%;
padding-right: 7%;}


.h2,

.h3 { font-family: var(--ff-source-sans-pro);}



.h4 {

  font-family: var(--ff-source-sans-pro); 

  font-size: xx-large;

  text-align: center; /* Center text within the element */

  margin: 0 auto; 

  margin-top: 20px;

  margin-bottom: 20px;

 }



.btn {

  background-image: var(--gradient-2);

  background-size: 200%;

  color: var(--white);

  padding: 12px 35px;

  font-size: var(--fs-8);

  font-weight: var(--fw-500);

  border-radius: 0 25px;

  transition: var(--transition-2);

}



.btn:is(:hover, :focus) {
  transform: scale(1.1);
  background-position: right; }

.btn:active{
  color: blue;
}


.w-100 { width: 100%; }



.banner-animation { animation: waveAnim 2s linear infinite alternate; }



@keyframes waveAnim {

  0% { transform: translate(0, 0) rotate(0); }

  100% { transform: translate(2px, 2px) rotate(1deg); }

}



.section { padding-block: var(--section-padding); }



.section-title {

  color: var(--dark-oceanblueoceanblue);

  font-size: var(--fs-3);

  margin-block-end: 60px;

  max-width: max-content;

  margin-inline: auto;

}

.section-products {

  color: var(--dark-oceanblueoceanblue);

  font-size: var(--fs-4);

  margin-block-end: 60px;

  max-width: max-content;

  margin-inline: auto;

}



.underline { position: relative; }



.underline::before {

  content: "";

  position: absolute;

  bottom: -20px;

  left: 50%;

  transform: translateX(-50%);

  width: 70%;

  height: 6px;

  background-image: var(--gradient-2);

  border-radius: 10px;

}



:is(.service-card, .features-card) .title {

  color: var(--st-patricks-blue);

  font-size: var(--fs-4);

  font-weight: var(--fw-700);

}



:is(.service-card, .features-card, .blog-card) .text { font-size: var(--fs-8); }



.img-cover {

  width: 100%;

  height: 100%;

  object-fit: cover;

}











/*-----------------------------------*\

  #HEADER

\*-----------------------------------*/



.header .btn { display: none; }



.header {

  --color: var(--white);



  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  padding-block: 14px;

  z-index: 4;

  transition: var(--transition-1);

}



.header.active {

  --color: var(--st-patricks-blue);



  position: fixed;

  background-color: var(--white);

  box-shadow: 0 2px 30px hsla(0, 0%, 0%, 0.1);

}



.header .container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

}



.logo {

  color: var(--color);

  font-family: var(--ff-source-sans-pro);

  font-size: var(--fs-3);

}



.nav-open-btn {

  color: var(--color);

  font-size: 30px;

  padding: 4px;

}



.navbar {

  background-color: var(--white);

  position: fixed;

  top: 0;

  left: -280px;

  width: 100%;

  max-width: 280px;

  min-height: 100%;

  padding: 20px;

  visibility: hidden;

  z-index: 2;

  transition: 0.25s var(--cubic-in);

}



.navbar.active {

  transform: translateX(280px);

  visibility: visible;

  transition: 0.5s var(--cubic-out);

}



.navbar-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-block: 10px 30px;

  font-size: small;

}



.navbar-top .logo {

  color: var(--st-patricks-blue);

  font-size: 2.0rem;

  font-weight: var(--fw-700);

}



.nav-close-btn {

  color: var(--space-cadet-1);

  font-size: 2.8rem;

  padding: 4px;

}



.navbar-item:not(:last-child) { border-bottom: 1px solid var(--platinum); }



.navbar-link {

  color: var(--space-cadet-1);

  font-size: var(--fs-8);

  font-weight: var(--fw-600);

  padding-block: 12px;

}

.navbar-link:hover {

  color: var(--gradient-2); 

}

.navbar-link.active {

  color: var(--gradient-2); 

}





.overlay {

  position: fixed;

  inset: 0;

  background-color: var(--black_70);

  z-index: 1;

  opacity: 0;

  pointer-events: none;

  transition: var(--transition-2);

}



.overlay.active {

  opacity: 1;

  pointer-events: all;

}











/*-----------------------------------*\

  #HOME PAGE

\*-----------------------------------*/



.home {

  background-image: url("../images/hero-bg-bottom.png"),

                    url("../images/hero-bg.png"),

                    var(--gradient-1);

  background-repeat: no-repeat, no-repeat, no-repeat;

  background-position: -280px bottom, center, center;

  background-size: auto, cover, auto;

  padding-block-start: 120px;

  padding-block-end: var(--section-padding);

}



.home-content { margin-block-end: 50px; }



.home-subtitle {

  color: var(--gradient-2);

  font-family: var(--ff-source-sans-pro);

  font-size: var(--fs-7);

  margin-block-end: 15px;

}



.home-title {

  color: var(--white);

  font-size: var(--fs-1);

  margin-block-end: 20px;

}



.home-text {

  color: var(--white);

  font-size: var(--fs-8);

  margin-block-end: 30px;

}











/*-----------------------------------*\

  #ABOUT

\*-----------------------------------*/



.about-banner { margin-block-end: 30px; }



.about .section-title { margin-inline: 0; }



.about .underline::before {

  left: 0;

  transform: translateX(0);

}



.about-text {

  font-size: var(--fs-8);

  margin-block-end: 20px;

}



.stats-list {

  display: grid;

  gap: 30px;

}



.stats-card {

  text-align: center;

  padding: 15px;

  box-shadow: var(--shadow);

  border-radius: var(--radius-12);

}



.stats-title {

  color: var(--st-patricks-blue);

  font-size: var(--fs-2);

  font-weight: var(--fw-700);

}



.stats-text { font-size: var(--fs-8); }











/*-----------------------------------*\

  #PRODUCT

\*-----------------------------------*/



.container.card-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}



.card {

  width: calc(33.33% - 20px); /* Adjust card width and margin */

  margin-bottom: 20px;

  background-color: #f9f9f9; /* Adjust card background color */

  border-radius: 8px;

  padding: 20px;

  box-shadow: 0 4px 8px rgba(109, 49, 3, 0.2); /* Add shadow */

}



.icon {

  text-align: center; /* Center icon */

}



.icon img {

  width: 60px; /* Adjust icon size */

  height: 60px; /* Adjust icon size */

}



.text {

  text-align: center; /* Center text */

  margin-bottom: 10px;

}



.title {

  margin-top: 10px;

  font-size: 26px; /* Adjust title font size */

  font-family: Arial, sans-serif;

  font-weight: bold;

  color:var(--gradient-1); /* Adjust title color */

}

.title:hover {

  color: darkblue; /* Change the color to dark red on hover */

}



.card .text h3 {

  font-family: Arial, sans-serif; /* Change the font family */

  color: var(--gradient-1); /* Change the text color */

  font-size: 22px;

}

.sea-green-button {

  background-color: #3badb4; /* Sea green color */

  color: white; /* White text color */

  border: none;

  padding: 15px 40px;

  border-radius: 10px;

  cursor: pointer;

  font-size: 18px; /* Increased font size for larger text */

  display: block; /* Make the button a block-level element */

  margin: auto;

  width: 25%;

  text-align: center;

  /* margin-left: 530px; */

}



.sea-green-button:hover {

  background-color: #136563; /* Darker shade of sea green on hover */

}





/*-----------------------------------*\

  #FEATURE

\*-----------------------------------*/



.features-list > li:first-child { margin-block-end: 30px; }



.features-card {

  display: flex;

  align-items: flex-start;

  gap: 20px;

}



.features-card .icon {

  background-image: var(--gradient-1);

  background-size: 200%;

  color: var(--white);

  min-width: max-content;

  max-width: max-content;

  font-size: 36px;

  padding: 22px;

  border-radius: 50%;

}



.features-card .icon ion-icon { --ionicon-stroke-width: 20px; }



.features-card .title { margin-block-end: 10px; }



.features-banner { margin-block: 40px; }



.features-banner > img {

  max-width: max-content;

  margin-inline: auto;

}











/*-----------------------------------*\

  #BLOG

\*-----------------------------------*/



.blog { padding-block-end: 120px; }



.blog-list {

  display: grid;

  gap: 30px;

}



.blog-card {

  padding: 20px;

  box-shadow: var(--shadow);

  border-radius: var(--radius-12);

}



.blog-card .banner {

  border-radius: var(--radius-12);

  overflow: hidden;

  margin-block-end: 15px;

}



.blog-card .banner img { transition: var(--transition-2); }



.blog-card .banner a:is(:hover, :focus) img { transform: scale(1.1); }



.blog-card .title {

  color: var(--st-patricks-blue);

  font-size: var(--fs-6);

  line-height: 1.2;

  margin-block-end: 15px;

}



.blog-card .title > a { color: inherit; }



.blog-card .title > a:is(:hover, :focus) { color: var(--razzmatazz); }



.blog-card .text { margin-block-end: 15px; }



.blog-card .meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 15px;

  font-size: var(--fs-8);

  color: var(--purple-navy);

  font-weight: var(--fw-500);

  padding-block-end: 10px;

}



.blog-card .meta ion-icon {

  color: var(--winter-sky);

  font-size: 22px;

  --ionicon-stroke-width: 35px;

}



.publish-date,

.comment {

  display: flex;

  align-items: center;

  gap: 8px;

}



.comment {

  color: inherit;

  margin-inline-start: auto;

}











/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer { font-size: var(--fs-8); }
.footer a { color: inherit; }
.footer-top {  background-image: url("/assets/images/footer-bg.png"), var(--gradient-1);
  background-repeat: no-repeat;  background-size: auto, 200%;
  background-position: center, center;
  color: var(--white);
}
.footer-brand { margin-block-end: 30px; }

.footer-brand .logo {
  display: inline;
  font-weight: var(--fw-700);
  margin-block-end: 20px;
}

.footer-brand .text {
  font-size: var(--fs-8);
  margin-block-end: 10px;}

.social-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;}

.footer-top .social-link {
  background-color: var(--white);
  color: var(--winter-sky);
  font-size: 18px;
  padding: 8px;
  border-radius: 50%;
}

.footer-top .social-link:is(:hover, :focus) {
  background-image: var(--gradient-2);  color: var(--white);
}

.footer-list:not(:last-child) { margin-block-end: 25px; }

.footer-list-title {
  font-family: var(--ff-source-sans-pro);
  font-size: var(--fs-5);
  font-weight: var(--fw-700);
  margin-block-end: 15px;
}

.footer-link { padding-block: 5px; }

:is(.footer-link, .footer-item-link):not(address):is(:hover, :focus) { text-decoration: underline; }

.footer-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding-block: 10px;
}

.footer-item-icon {
  background-image: var(--gradient-2);
  padding: 13px;
  border-radius: 50%;
}

.footer-bottom {
  background-color: var(--sea-green);/** footer colour*/
  padding: 20px;
  text-align: center;
  color: var(--white);
}

.copyright-link {
  display: inline-block;
  text-decoration: underline;
}

.copyright-link:is(:hover, :focus) { text-decoration: none; }








/*-----------------------------------*\

  #GO TO TOP

\*-----------------------------------*/



.go-top {

  position: fixed;

  bottom: 0;

  right: 15px;

  background-color: var(--winter-sky);

  color: var(--white);

  font-size: 2rem;

  padding: 14px;

  border-radius: var(--radius-4);

  box-shadow: -3px 3px 15px var(--winter-sky_50);

  z-index: 2;

  visibility: hidden;

  opacity: 0;

  transition: var(--transition-1);

}



.go-top.active {

  visibility: visible;

  opacity: 1;

  transform: translateY(-15px);

}











/*-----------------------------------*\

  #MEDIA QUERIES

\*-----------------------------------*/



/**

 * responsive for larger than 550px screen

 */




@media (min-width: 550px) {



  /**

   * REUSED STYLE

   */



  .container {

    max-width: 550px;

    margin-inline: auto;

  }



  .section-title { --fs-3: 3.6rem; }







  /**

   * HEADER

   */



  .header .btn {

    display: flex;

    align-items: center;

    gap: 5px;

    margin-inline-start: auto;

  }







  /**

   * ABOUT

   */



  .stats-list { grid-template-columns: repeat(3, 1fr); }

  





  /**

   * BLOG

   */



  .blog-card {

    display: grid;

    grid-template-columns: 0.75fr 1fr;

    gap: 20px;

    padding: 30px;

  }



  .blog-card .banner { margin-block-end: 0; }



  .blog-card .banner a { height: 100%; }







  /**

   * FOOTER

   */





  .footer-brand,

  .footer-list:not(:last-child) { margin-block-end: 0; }



  .footer-top .container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px 50px;

  }



}











/**

 * responsive for larger than 768px screen

 */



@media (min-width: 768px) {



  /**

   * REUSED STYLE

   */



  .container { max-width: 720px; }







  /**

   * Home

   */



  .home {

    min-height: 600px;

    display: grid;

    place-items: center;

  }



  .home-content { margin-block-end: 0; }



  .home .container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 30px;

  }







  /**

   * SERVICE

   */



  .service-list { grid-template-columns: 1fr 1fr; }







  /**

   * FEATURES

   */



  .features-list > li:first-child { margin-block-end: 0; }



  .features-list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

  }







  /**

   * FOOTER

   */



  .footer-top .container { grid-template-columns: repeat(3, 1fr); }



}











/**

 * responsive for larger than 992px screen

 */



@media (min-width: 992px) {



  /**

   * CUSTOM PROPERTY

   */



  :root {



    /**

     * typography

     */



    --fs-1: 5.4rem;



  }







  /**

   * REUSED STYLE

   */



  .container { max-width: 950px; }







  /**

   * HEADER

   */



  .header { padding-block: 14px; }



  .overlay,

  .nav-open-btn,

  .navbar-top { display: none; }



  .navbar,

  .navbar.active {

    all: unset;

    margin-inline-start: auto;

  }



  .header .btn { margin-inline-start: 0; }



  .navbar-list {

    display: flex;

    gap: 25px;

  }



  .navbar-item:not(:last-child) { border-bottom: none; }



  .navbar-link { color: var(--color); }







  /**

   * Home

   */



  .home { min-height: 700px; }







  /**

   * ABOUT

   */



  .about .container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

  }







  /**

   * Products

   */



  .service-list { grid-template-columns: repeat(2, 1fr); }







  /**

   * FEATURES

   */



  .features-list { grid-template-columns: 1fr; }



  .features .container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

  }



  .features .section-title { grid-column: 1 / 4; }



  .features-banner {

    margin-block: 0;

    display: grid;

    place-items: center;

  }







  /**

   * FOOTER

   */



  .footer-top .container { grid-template-columns: repeat(4, 1fr); }



  .footer-brand { grid-column: 1 / 5; }



  .footer-brand .text { max-width: 45ch; }



}











/**

 * responsive for larger than 1200px screen

 */



@media (min-width: 1200px) {



  /**

   * REUSED STYLE

   */



  .container { max-width: 1200px; }



  .section-title { --fs-3: 4.6rem; }







  /**

   * Home

   */



  .home { min-height: 800px; }







  /**

   * BLOG

   */



  .blog-list { grid-template-columns: 1fr 1fr; }



  .blog-card { height: 100%; }



  .blog-card .content {

    display: flex;

    flex-direction: column;

    justify-content: space-between;

  }







  /**

   * FOOTER

   */



  .footer-top .container { grid-template-columns: 1fr 0.5fr 0.7fr 0.5fr 1fr; }



  .footer-brand { grid-column: auto; }



}

@media (max-width: 767px) {
  
  *,

  *::before,
  
  *::after {
  
    margin: 0;
  
    padding: 0;
  
    box-sizing:content-box
  
  }
  
}


@media (max-width: 426px) {

  .title {

    margin-top: 10px;
  
    font-size: 17px; /* Adjust title font size */
  
    font-family: Arial, sans-serif;
  
    font-weight: bold;
  
    color:var(--gradient-1); /* Adjust title color */
  
  }
  
}