:root {
   --primary: #18c3cc;
   --gray: #717171; 
   --white:#fefefe; 
   --purple:#F8abeb;
   --gd: #e2a82b;
   --accent-coral: #FF6F61;
   --accent-teal: #008080;
   --accent-navy: #003366;
   --background-light-gray: #D3D3D3;
   --background-beige: #F5F5DC;

   --black: #000000;
   --att:rgb(91, 238, 248);
   --secondary: rgb(45, 206, 218);
   --blues:#0e0bd1;
 }
 
 * {
   box-sizing: none;    
  }
  head{
   height: auto;
   inline-size: auto;
  }

body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0 auto;
  padding: 0;
  box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem  lightgrey;
  color:var(--gray);
  font-size: 2rem;
  background-color: var(--background-light-gray)
}
.container{
   width: 100%;
   max-width: 100%;
  padding: .2rem;
  background-color: var(--white);
  box-shadow: 0.2rem 0.2rem 0.4rem 0.4rem lightgrey;
  box-sizing: border-box;
  border-radius: .8rem;
  shape-rendering: crispEdges;
  size: 100%;
  font-size: 2rem;
  margin-top: 1rem;
}
header {
   z-index: 100;
   position: relative;
   width: 100%;
   padding: .6rem;
   background-color: var(--primary);
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 100;
   position: relative;
   height: auto;
   max-width: 98.5%;
   margin-top: 0;
}

nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   inline-size: 100%;
}

.logo img {
   width: 50px;
   transition: transform 0.3s ease-in-out;
}
.logo img:hover{
   background-color: var(--white);
   transform: translate(1deg);
   z-index: 2;
    transform: scale(1.5); /* Adjust zoom level */
   margin-left: calc(50vw - (max-content + 20px)); 
   
}
.h1 {
   margin-right: 1rem;
   color: var(--white);
   font-size: 1.5rem;
   padding-left: 1rem;
}

.h1 span {
   color: var(--accent-teal);
   font-style: italic;
}
@media (max-width: 768px) {
   header {
      font-size: 1rem;
      padding: .2rem;
      
   }
}

.menu-icon {
   display: none;
   font-size: 2rem;
   cursor: pointer;
}

.nav {
   border-top: .1rem solid var(--white);
   background-color: var(--primary);
   color: var(--white);
   display: flex;
   justify-content: space-between;
   size: auto;
   font-size: 1rem;
   white-space: nowrap;
   box-shadow: 0.2rem 0.2rem 0.4rem 0.4rem lightgrey;
 }
nav .mainMenu{
   display: flex;
   list-style: none;
}
nav .mainMenu li a {
   display: inline-block;
   padding: .1rem;
   text-decoration: none;
   color: var(--white);
   font-size: 1.1rem;
   margin: .5rem;
}
nav .mainMenu li a:hover{
   background-color: var(--secondary);
   transform: rotate(.1deg);
   cursor: pointer;
   font-style: italic;
   text-transform: inherit;
   text-decoration: underline solid var(--secondary);
}
nav .openMenu {
   font-size: 2rem;
   margin: .5rem;
   display: none;
   cursor: pointer;
}
nav .mainMenu .closeMenu , .icons i {
   font-size: 2rem;
   display: none;
   cursor: pointer;
}
.bxl-facebook, .bxl-linkedin, .bxl-youtube, .bxl-tiktok, .bxl-twitter{
   height: 1rem;
   width: 1rem;
   border-radius: 10%;
   color: var(--white);
   padding: .5rem;
   border-top: .1rem solid var(--white);
   margin: .2rem;
}

.bxl-facebook:hover {color: var(--blues)}
.bxl-youtube:hover {color: red;}
.bxl-linkedin:hover {color: var(--blues)}
.bxl-tiktok:hover {color: var(--black)}
.bxl-twitter:hover {color: var(--black)}

@media(max-width: 768px){
   nav .mainMenu{
      height: 100vh;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 5000;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: var(--primary);
      transition: top 1s ease;
      display: none;
      
   }
   nav .mainMenu .closeMenu {
      display: block;
      position: absolute;
      top: 20px;
      right: 20px;
   }
   nav .openMenu{
      display: block;
   }
   nav .mainMenu li a:hover{
      background: none;
      color: var(--white);
      font-size: 1.1rem;
   }
   .icons i {
      display: inline-block;
   }

}

.btn {
   /* padding: 0.6rem 2rem; */
   border-top: var(--white);
   font-size: 1rem;
   font-weight: 600;
   border: 2px solid transparent;
   cursor: pointer;
   text-transform: uppercase;
   transition: all 0.2s ease;
   padding-top: 1rem;
   white-space: wrap;
}

.btn-primary {
   border-top: var(--white);
   background-color: var(--primary);
   color: var(--secondary);
   margin-top: -15rem;
 }
 .btn-primary:hover {
   background: transparent;
   border-color: var(--primary);
   color: var(--primary);
 }


.btn-secondary, a {
   background-color: transparent;
   color: var(--accent-navy);
   text-decoration: none;
   margin-bottom: 1rem;
   padding: .5rem;
   /* transition: transform 0.3s ease-in-out; */
}

.btn-secondary, a:hover {
   background: transparent;
   border-color: var(--accent-teal);
   color: var(--accent-teal);
   text-decoration: none;
   z-index: 2;
   transition: transform 0.3s ease-in-out;
   /* transform: scale(.5); Adjust zoom level */
   margin-left: calc(50vw - (max-content + 20px)); /*Center based on viewport width */
}
/*
.btn-tertiary {
   background-color: var(--accent-navy);
   color: var(--white);
}

.btn-tertiary:hover {
   background: transparent;
   border-color: var(--accent-navy);
   color: var(--accent-navy);
} */



section{
   image-rendering: auto;
   background-color: var(--white);
   size: 100%;
   /* border-radius: .1%; */
}

section:hover{
   border: .1rem solid var(--background-beige);
   column-count: auto;
   transform: 1s;
   border-radius: 1%;
}
section h1{
   margin: 0 0 .2rem 0;
   font-size: 2.4rem;
   font-weight: 300;
   color: var(--primary);
   justify-items: center;
   font-weight: bold;
}
section h2{
   margin: 0 0 .2rem 0;
   font-size: 1.3rem; 
   color: var(--accent-navy);
   justify-items: center; 
}
section h3{
   margin: 1rem 1rem 1rem 1rem;
   padding: .5rem;
   font-size: 1.1rem; 
   color: var(--accent-navy);
   justify-items: center; 
   font-weight: bold;
}
section ul {
   color: var(--gray);
   size: 1rem;
   list-style: none;
 }
 section li a {
   color: var(--gray);
   size: 1rem;
   list-style: none;
 }
 section p{
   color: var(--accent-navy);
 }
div{
   -ms-layout-grid-line:auto;
   display:flexbox;
   size:100%;
}
div p{
   margin: 1rem;
   padding: 1rem;
   color: var(--gray);
   font-size: 1rem;   
   
}
:target{
   border: 1px solid var(--gd);
   background-color: var(--secondary);
   transition: 2s;
   transform: rotate(0.1s);
   transform:1s;

}
.home{
   size: 100%;

}

/* Who we are  */
.who-we-are p{
   line-height: 2rem;
   font-size: 1.1rem;
   /* font-weight: 300; */
   font-style: normal;
   color: var(--accent-navy);
}
.who-we-are ul li{
   color: var(--accent-navy);
   font-size: 1rem;
}

.who-we-are .carousel {
   position: relative;
   font-size: 1.1rem;
   overflow: hidden;
   margin: 0 auto;  /* Center horizontally */
   /* border: 0.1px solid var(--background-beige); */
   border-radius: 0.1rem;
   background: var(--white);
   /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
   width: 80%;  /* Adjust the width as needed */
   max-width: 600px;  /* Ensure it doesn't get too wide on larger screens */
   padding-bottom: 4rem;
   margin-bottom: 2rem;
}

.carousel-inner {
   display: flex;
   transition: transform 0.5s ease;
   width: 100%;
   height: auto;
   inline-size: 95%;
}

.carousel-item {
   min-width: 100%;
   box-sizing: border-box;
   padding: 20px;
   
}

.carousel-item img {
   max-width: 100px;
   margin-bottom: 15px;
   display: block;
   margin-left: auto;
   margin-right: auto;  /* Center the image */
}

.carousel-item p {
   color: var(--accent-navy);
   font-size: 1rem;
   line-height: 1.5;
   text-align: center;  /* Center the text */
}

.carousel-nav {
   position: absolute;
   top: 50%;
   width: 100%;
   display: flex;
   justify-content: space-between;
   transform: translateY(-50%);
}

.carousel-nav button {
   background: var(--);
   border: none;
   color: var(--accent-navy);
   padding: 10px 20px;
   cursor: pointer;
   transition: background-color 0.3s ease-in-out;
   border-radius: 5px;
   margin-right: 1.4rem;
}

.carousel-nav button:hover {
   background: var(--accent-navy);
   color: var(--white);
}

@media (max-width: 768px) {
   .what-we-do .carousel {
      width: 80%;  /* Ensure it fits smaller screens */
      max-width: 200px;  /* Limit the width */
      margin-bottom: 2rem;

   }
   
   .carousel-item {
       padding: 10px;
      font-size: 1.1rem;
   }

   .carousel-item p {
       font-size: 0.9em;
   }

   .carousel-nav button {
       padding: 8px 16px;
   }
}
#Our\ Team {
   text-align: center;
   max-width: 90%;
   margin: 1rem auto;
   padding: 1rem;
   border-radius: 10px;
   background: var(--white);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#Our\ Team h2 {
   color: var(--primary);
   margin-bottom: 20px;
   font-size: 1.4rem;
}

.team {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 20px;
}

.team-member {
   background: var(--white);
   border-radius: 10px;
   padding: .5rem;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s;
}

.team-member:hover {
   transform: translateY(-10px);
}

.team-member img {
   border-radius: 50%;
   width: 150px;
   height: 150px;
   object-fit: cover;
   margin-bottom: 15px;
}

.team-member .titles h2 {
   color: var(--primary);
   font-size: 1.5rem;
   margin: 0;
}

.team-member .titles span {
   color: var(--secondary);
   font-size: 0.9em;
}

.team-member p {
   color: var(--gray);
   font-size: 1em;
   line-height: 1.5;
   font-size: 1.1rem;
}

@media (max-width: 600px) {
   #Our\ Team {
       padding: 10px;
   }

   .team-member {
       padding: 10px;
   }

   .team-member .titles h2 {
       font-size: 1.2em;
   }

   .team-member p {
       font-size: 1.1rem;
   }
}

/* What we do  */
.what_we_do .services{
   height: auto;
   width: auto;
   margin: 1rem;
   border: .1rem solid var(--primary);
   color: var(--primary); 
   flex: 1 0 25%; /* Set minimum and preferred size */
   background: var(--white);
   padding: auto;
   border-radius: 1rem;
   position: relative;
   margin-bottom: 3rem;
   margin-top: 1rem;
} 
.what_we_do p {
   color: var(--accent-navy);
}
.what_we_do b {
   color: var(--accent-navy);
   padding: .1rem;
   font-size: 1.1rem;
   /* line-height: .01rem; */
   font-style: normal;
   font-weight: 400;
}
.what_we_do .services img{
   /* margin-right: -50%;
   padding: 1rem;
   position: top; */
   transition: transform 0.3s ease-in-out;
   position: absolute;
   top: -0.5rem;
   left: 50%;
   transform: translateX(-50%);
   color: var(--primary); /* Assuming a color variable is defined */
   size: .1rem 0.2rem;
} 
.what_we_do .services img:hover{
   z-index: 2;
   transform: scale(10.0); /* Adjust zoom level */
} 

/* Why choose us */
.Why-Choose-Us .p{
    color: var(--blues);
}

/* Blog */
.blog{
   border-radius: 1%;
   position: relative;
   display: flex;
   flex-wrap: wrap;
   color: var(--gd);
   margin: auto;
   max-height: 840px;
   overflow-y: auto;
   /* overflow: hidden; */
}

.film-item {
   border-radius: 10%;
   position: relative;
   display: flex;
   flex-wrap: wrap-reverse;
   margin: 1rem;
   margin-right: auto;
   margin-left: auto;
   overflow-wrap: unset;
   transition: transform 0.3s ease-in-out;
   background-color: var(--white);
}
.film-item:hover{
   z-index: 2;
   transform: scale(1.2); /* Adjust zoom level */
   margin-left: calc(50vw - (max-content + 20px)); /* Center based on viewport width */
   justify-items: center;
}
.film-item img{
   border-radius: 5%;
}
/* gallery */
.card {
   background: white;
   border-radius: 5px;
   box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
   padding: 2rem;
   text-align: center;
   color: var(--primary);
}
.card img {
   width: 100px;
   margin-bottom: 2rem;
}

/* .Resources */
.Resources ul li{
   color: var(--primary);
   padding: .5rem;
   background-color: var(--background-beige);
   size: 100%;
   margin: .5rem;;
   font-size: 1.1rem;
   color: var(--accent-navy);
}
.Resources a{
   color: var(--primary);
   text-decoration: none;
   font-size: 1.1rem;
   color: var(--accent-navy);
}
.Resources ul li a:hover{
   color: var(--gd);
   text-decoration: none;
}
/* .Careers */
.Careers p{
   color: var(--accent-navy);
}

/* enquiry */
form{
   justify-content: space-between;
   position: relative;
   display: flex;
   flex-wrap: wrap;
   tab-size: 10%;
   color: var(--accent-navy);
   font-size: 1.3rem;
   background-color: var(--accent-teal);
}
/* underline */
form .message, .Checkbox, .services{
   padding: .2rem;
   border-bottom: .2rem  solid #ccc; /* Example styling */
   margin-bottom: .1rem; /* Optional: add space after the border */
   margin-top: .1px;
   width: 100% wrap;
   padding-top: 1rem;
   
}

form input, label{
   color: var(--primary);
   border: var(--secondary);
   padding: .2rem;
}
form input, ::placeholder{
   color: var(--background-light-gray);
   padding: .25rem;
   font-style: italic;
   
   /* border: .1rem solid var(--accent-navy); */
}

form input{
   color: var(--white);
   border: .1rem solid var(--accent-navy);
   padding: .25rem;
   border-radius: 20%;
   background-color: var(--accent-teal);
}
form .services{
   text-wrap: auto;
   /* margin: 1rem; */
   margin-left: 0rem;
   padding: .5rem;
   width: 28rem;
   size: 100%;
   color: var(--primary);
   background-color: var(--accent-teal);
   font-size: 1.1rem;
   font-size: 1.3rem;
   padding-bottom: 1rem;
   padding-top: 3rem;
}
form select{    
   width: 100%; /* Make the section fill the screen width */
   height: auto;
   border-radius: 5%;
   color: var(--background-light-gray);
   background-color: var(--accent-teal);
   font-size: 1rem;
   border-color: var(--accent-navy);
   padding: .5rem;
   /* Truncate option text to show only the first line */
   /* overflow: hidden; */
   text-overflow: ellipsis; 
   white-space: nowrap; /*Prevent wrapping of option text
   /* /*Adjust appearance (optional) */
   -webkit-appearance: none; /* Safari and Chrome */
   -moz-appearance: none;   /* Firefox */
   appearance: none;        /* Standard */
   /* Style the arrow (optional) */
   background-image: url(); /* Replace with your arrow image (optional) */
   background-repeat: no-repeat;
   background-position: calc(100% - 10px) center; /* Adjust arrow position (optional) */
   padding-right: 20px; /* Add space for the arrow (optional) */
  
 }
 
form textarea{
   max-width: 95%;
   border-radius: 5%;
   margin: auto;
   padding: auto;
   inline-size: 88%;
   color: var(--primary);
   font-size: 1.1rem;
   border-color: var(-ac);
   justify-self: center;
   border-bottom: .3rem solid var(--primary);
}
form button{
   background-color: transparent;
   color: var(--accent-navy);
   margin: 1rem;
   padding: 1rem;
   justify-content: space-between;
   position: relative;
   border-color: var(--blue);
   border-radius: 10%;
   font-size: 1.5rem;
 }
form button:hover{
   background-color: var(--white);
   color: var(--primary);
   margin: 1rem;
   padding: 1rem;
   justify-content: space-between;
   cursor: pointer;
   border-color: var(--primary);

 }
/* carousel */
.carousel{
   height: 100vh;
   margin-top: -50px;
   width: 100vw;
   overflow: hidden;
   position: relative;
}
.carousel .list .item{
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   inset: 0 0 0 0;
}
.carousel .list .item img{
   width: auto;
   height: 200em;
   object-fit: cover;
   overflow: hidden;  
   background-color: var(--primary);
}


.carousel .list .item .content{
   position: absolute;
   top: 20%;
   width: 1140px;
   max-width: 80%;
   left: 50%;
   transform: translateX(-50%);
   padding-right: 30%;
   box-sizing: border-box;
   color: #fff;
   text-shadow: 0 5px 1.1rem var(--gray);
}

.carousel .list .item .author{
   font-weight: bold;
    letter-spacing: 10px;
}
.carousel .list .item .title,
.carousel .list .item .topic{
   font-size: 1.1rem;
   font-weight: bold;
   line-height: 1.3em;
   text-shadow: 0 5px 1.1rem var(--gray); 
}
.carousel .list .item .topic{
   color: var(--gd);
}
.carousel .list .item .des{
   color: var(--white);
   font-size: .8rem;
}
.carousel .list .item .buttons{
   display: grid;
   grid-template-columns: repeat(2, 130px);
   grid-template-rows: 40px;
   gap: 5px;
   margin-top: 20px;
}
.carousel .list .item .buttons button{
   border: none;
   background-color: var(--gd);
   letter-spacing: 3px;
   font-family: Poppins;
   font-weight: 500;
   color: var(--white);
}
.carousel .list .item .buttons button:hover{
   border: none;
   background-color: transparent;
   letter-spacing: 3px;
   font-family: Poppins;
   font-weight: 500;
   color: var(--gd);
   border: 1px solid var(--gd);
   transition: 1s;
}
.carousel .list .item .buttons button a{
   border: none;
   background-color: var(--gd);
   letter-spacing: 3px;
   font-family: Poppins;
   font-weight: 500;
   color: var(--white);
   text-decoration: none;
}
.carousel .list .item .buttons button a:hover{
   border: none;
   background-color: transparent;
   letter-spacing: 3px;
   font-family: Poppins;
   font-weight: 500;
   color: var(--gd);
   border: 1px solid var(--gd);
   transition: 1s;
   text-decoration: none;
}
.carousel .list .item .buttons button:nth-child(2){
   background-color: transparent;
   border: 1px solid var(--gd);
   color: var(--gd);
   z-index: 2000;
}

.carousel .list .item .buttons button:nth-child(2):hover{
   background-color: var(--gd);
   border: none;
   color: var(--white);
   transition: 1s;
}
.carousel .list .item .buttons button:nth-child(2) a{
   background-color: transparent;
   /* border: 1px solid var(--gd); */
   color: var(--gd);
   text-decoration: none;
}
.carousel .list .item .buttons button:nth-child(2) a:hover{
   background-color: var(--gd);
   border: none;
   color: var(--white);
   transition: 1s;
}
/* thumbail */
.thumbnail{
   position: absolute;
   bottom: 50px;
   left: 50%;
   width: max-content;
   z-index: 100;
   display: flex;
   gap: 20px;
}
.thumbnail .item{
   width: 150px;
   height: 220px;
   flex-shrink: 0;
   position: relative;
}
.thumbnail .item img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 20px;
   transition: transform 0.3s ease-in-out;
}
.thumbnail .item img:hover{
   transform: scale(2.5); /* Adjust zoom level */
   z-index: 200;
}
.thumbnail .item .content{
   color: #fff;
   position: absolute;
   bottom: 10px;
   left: 10px;
   right: 10px;
}
.thumbnail .item .content .title{
   font-weight: 200;
}
.thumbnail .item .content .description{
   font-weight: 100;
}
/* arrows */
.arrows{
    position: absolute;
    top: 80%;
    right: 52%;
    z-index: 100;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}
.arrows button{
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: transparent;
   border: .1rem solid var(--background-beige);
   color: var(--background-beige);
   font-family: monospace;
   font-weight: bold;
   transition: .5s;
}
.arrows button:hover{
   background-color: var(--secondary);
   color: var(--white);
}

/* animation */
.carousel .list .item:nth-child(1){
   z-index: 1;
}

/* animation text in first item */

.carousel .list .item:nth-child(1) .content .author,
.carousel .list .item:nth-child(1) .content .title,
.carousel .list .item:nth-child(1) .content .topic,
.carousel .list .item:nth-child(1) .content .des,
.carousel .list .item:nth-child(1) .content .buttons
{
   transform: translateY(50px);
   filter: blur(20px);
   opacity: 0;
   animation: showContent 3s 3s linear 1 forwards;
}
@keyframes showContent{
   to{
       transform: translateY(0px);
       filter: blur(0px);
       opacity: 1;
   }
}
.carousel .list .item:nth-child(1) .content .title{
   animation-delay: 1.2s!important;
}
.carousel .list .item:nth-child(1) .content .topic{
   animation-delay: 1.4s!important;
}
.carousel .list .item:nth-child(1) .content .des{
   animation-delay: 1.6s!important;
}
.carousel .list .item:nth-child(1) .content .buttons{
   animation-delay: 1.8s!important;
}
/* create animation when next click */
.carousel.next .list .item:nth-child(1) img{
   width: 150px;
   height: 220px;
   position: absolute;
   bottom: 50px;
   left: 50%;
   border-radius: 30px;
   animation: showImage .5s linear 1 forwards;
}
@keyframes showImage{
   to{
       bottom: 0;
       left: 0;
       width: 100%;
       height: 100%;
       border-radius: 0;
   }
}

.carousel.next .thumbnail .item:nth-last-child(1){
   overflow: hidden;
   animation: showThumbnail .5s linear 1 forwards;
}
.carousel.prev .list .item img{
   z-index: 100;
}
@keyframes showThumbnail{
   from{
       width: 0;
       opacity: 0;
   }
}
.carousel.next .thumbnail{
   animation: effectNext 5s linear 1 forwards;
}

@keyframes effectNext{
   from{
       transform: translateX(150px);
   }
}

/* running time */

.carousel .time{
   position: absolute;
   z-index: 1000;
   width: 0%;
   height: 3px;
   background-color: #f1683a;
   left: 0;
   top: 0;
}

.carousel.next .time,
.carousel.prev .time{
   animation: runningTime 5s linear 1 forwards;
}
@keyframes runningTime{
   from{ width: 100%}
   to{width: 0}
}


/* prev click */

.carousel.prev .list .item:nth-child(2){
   z-index: 2;
}

.carousel.prev .list .item:nth-child(2) img{
   animation: outFrame 0.5s linear 1 forwards;
   position: absolute;
   bottom: 0;
   left: 0;
}
@keyframes outFrame{
   to{
       width: 150px;
       height: 220px;
       bottom: 50px;
       left: 50%;
       border-radius: 20px;
   }
}

.carousel.prev .thumbnail .item:nth-child(1){
   overflow: hidden;
   opacity: 0;
   animation: showThumbnail .5s linear 1 forwards;
}
.carousel.next .arrows button,
.carousel.prev .arrows button{
   pointer-events: none;
}
.carousel.prev .list .item:nth-child(2) .content .author,
.carousel.prev .list .item:nth-child(2) .content .title,
.carousel.prev .list .item:nth-child(2) .content .topic,
.carousel.prev .list .item:nth-child(2) .content .des,
.carousel.prev .list .item:nth-child(2) .content .buttons
{
   animation: contentOut 1.5s linear 1 forwards!important;
}

@keyframes contentOut{
   to{
       transform: translateY(-150px);
       filter: blur(20px);
       opacity: 0;
   }
}
@media screen and (max-width: 678px) {
   .carousel .list .item .content{
       padding-right: 0;
   }
   .carousel .list .item .content .title{
       font-size: 30px;
   }
   .carousel{
      width: 96vw;
   }
}
/* Back to the Top button */
#backToTopBtn {
   display: none; /* Hidden by default */
   position: fixed; /* Fixed/sticky position */
   bottom: 3rem; /* Place the button at the bottom of the page */
   right: 2rem; /* Place the button 30px from the right */
   z-index: 99; /* Make sure it does not overlap */
   border: .1rem solid var(--gd); /* Remove borders */
   outline: none; /* Remove outline */
   background-color: transparent; /* Set a background color */
   color: var(--gd); /* Set a text color */
   cursor: pointer; /* Add a mouse pointer on hover */
   padding: .1rem; /* Some padding */
   border-radius: 1rem; /* Rounded corners */
   font-size: 2rem; /* Increase font size */
}

#backToTopBtn:hover {
   background-color: var(--white); /* Add a dark-grey background on hover */
   color: var(--gray);

}

footer {
   background: linear-gradient(135deg, var(--primary), var(--secondary));
   color: var(--white);
   padding: 4rem 2rem;
   margin-top: 20px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-start;
   border-top: 5px solid var(--accent-navy);
   size: 100%;
 }
 
 footer .company, footer .contacts, footer .copyright {
   flex: 1;
   margin: 1rem 1rem;
 }
 
 footer h1, footer h2 {
   margin: 0 0 .5rem;
   color: var(--accent-navy);
   font-size: 2rem;
   font-weight: bold;
 }
 footer h2 {
   font-size: 1.4rem;
   font-weight: bold;
   

 }
 
 footer ul {
   list-style: none;
   padding: 0;
   margin: 0 0 2rem;
 }
 
 footer ul li {
   margin: 1rem 0.1rem;
 }
 
 footer ul li a {
   color: var(--white);
   text-decoration: none;
   font-size: 1rem;
   transition: color 0.3s ease;
   padding-left: 1rem;
 }
 
 footer ul li a:hover {
   color: var(--accent-navy);
 }
  
 #back_to_top, #SUBSCRIBE {
   background: var(--secondary);
   border: 1rem solid var(--accent-navy);
   color: var(--accent-navy);
   border: none;
   padding: 10px 20px;
   cursor: pointer;
   font-weight: bold;
   transition: background 0.3s, transform 0.3s;
 }
 
 #back_to_top a, #SUBSCRIBE a {
   text-decoration: none;
   color: var(--accent-navy);
 }
 
 #back_to_top:hover, #SUBSCRIBE:hover {
   background: var(--secondary);
   transform: scale(1.1);
   color: var(--white);
 }
 
 .contacts a {
   display: block;
   margin: 1rem 0.1rem;
   color: var(--white);
   text-decoration: none;
   transition: color 0.3s;
   font-size: 1.1rem;
   padding-left: .5rem;
 }
  
 footer .contacts a:hover {
   color: var(--accent-navy);
 }
  
 footer .copyright h2 {
   margin: 20px 0;
 }
 .copyright {
   font-style: italic;
   font-family: 'Courier New', monospace;
   text-align: center;
 }
 
 @media (max-width: 768px) {
   footer {
     flex-direction: column;
   }
 }