@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.back {
    background-image: url(main0.png);
    height: 100vh;
    background-repeat: no-repeat;
    z-index: 999;
}

.backe {
    background-image: url(red.png);
    height: 100vh;
    background-repeat: no-repeat;
}









.navi {
    padding-right: 40px;
}

.navi a {
    padding-top: 20px;
    font-family: Arial;
font-size: 20px;
font-weight: 700;
line-height: 23px;
text-align: left;
color: #FDFDFD;

}

.navbar a:hover {
    color: #CBCBCA;
}

.navbar .btn {
    background-color: black;
    color: white;
border-radius: 10px;
opacity: 0px;
font-family: Inter;
font-size: 17px;
font-weight: 500;
text-align: center;

}

.navbar .btn:hover {
    background-color: black;
    color: white;
}

.main {
    padding-top: 200px;
    padding-left: 50px;
}

.main h1{
    font-family: Arial;
font-size: 45px;
font-weight: 700;
line-height: 71.89px;
text-align: left;
color: white;
}


.main p {
    font-family: Arial;
font-size: 27px;
font-weight: 400;
line-height: 31.13px;
text-align: left;
color: #EBEBEB;
padding-top: 20px;

}

.main span {
    font-family: Arial;
font-size: 27px;
font-weight: 700;
line-height: 51.13px;
text-align: left;
color: #EBEBEB;

}

.main a {
    background-color: black;
    color: white;
border-radius: 5px;
font-family: Inter;
font-size: 17px;
font-weight: 500;
text-align: center;
padding: 10px;
margin-top: 30px;
margin-bottom: 30px;
}

.main  a:hover {
    background-color: black;
    color: white;

}

.main2 {
    background-image: url(backgr.png);
    background-position: right top;
    background-repeat: no-repeat;
}

.main2 h4  {
    color: #C60000;
    font-family: Arial;
font-size: 35px;
text-align: center;
font-family: Arial;
font-size: 35px;
font-weight: 500;
line-height: 40.36px;
text-align: center;


}



.main2 p  {
    font-family: Arial;
font-size: 20px;
font-weight: 500;
line-height: 23.06px;
text-align: center;


}

.main2 img {
    object-fit: cover;
    height: 15vh;
}

.main3 {
     margin-top: 100px;
    padding-top: 200px;
    background-image: url(main3.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 90px;
}


.main3 .card-header {
    font-family: Inter;
font-size: 35px;
font-weight: 700;
line-height: 40.36px;
text-align: left;
color: white;
}

.main3 .card-header p {
    font-family: Inter;
font-size: 13px;
font-weight: 400;
line-height: 16.22px;
text-align: left;
padding-top: 15px;
color: #FFFFFF;
}

   /* Default navbar styles */
   .navbar {
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* Styles for the navbar when scrolled */
.navbar.scrolled {
    background-color: white; /* Change to your preferred color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Optionally change the nav-link styles when scrolled */
.navbar.scrolled .nav-link {
    color: black; /* Change to your preferred color */
}


        .navbar-brand {
            background-color: #FFFFFF;
            padding: 0px;
            border-radius: 20px;
            padding-left: 30px;
            padding-right: 30px;
        }

        header.main {
            background-image: url('bootstrap-5.3.3-dist/img/red.png');
            background-repeat: no-repeat;
            background-position: left;
            height: 100vh;
            display: flex;
            align-items: center;
        }

        header.main h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        header.main p {
            font-size: 1.5rem;
            margin-bottom: 2rem;
        }

        .card {
            height: 100%;
        }

        

        .main3 .card-body p {
            color: white;
            font-family: Inter;
font-size: 15px;
font-weight: 600;
line-height: 13.84px;
text-align: left;

        }

        .main3 .card-body span {
            font-family: Inter;
font-size: 13px;
font-weight: 400;
line-height: 13.84px;
text-align: left;
color: white;
        }

        .main4 .card-body h5 {
            color: white;
            font-family: Inter;
font-size: 35px;
font-weight: 700;
line-height: 42.36px;
padding-top: 20px;

        }

        .main4 .card-body p {
        padding: 20px;
            color: white;
            font-family: Inter;
font-size: 22px;
font-weight: 400;
line-height: 26.63px;

        }

        .main4 .card-body a {
            font-family: Inter;
font-size: 20px;
font-weight: 500;
line-height: 24.2px;
text-align: left;
color: #FDFDFD;
background-color: black;
padding: 17px;

        }

        .main5 {
            padding-top: 150px;
            text-align: center;
            background-image: url(red2.png);
            background-repeat: no-repeat;
            background-position: left bottom;
            padding-bottom: 150px;

        }

        .main2 h2 {
            color: black;
        font-family: Arial;
font-size: 35px;
font-weight: 700;
line-height: 40.36px;
text-align: center;
        }

        

       .main5 h2 {
        color: black;
        font-family: Arial;
font-size: 35px;
font-weight: 700;
line-height: 40.36px;
text-align: center;

       }

       .footer {
        background-color: black;
        color: white;
        padding: 10px;
        text-align: left;
       }

       .footer .btn {
gap: 0px;
border-radius: 5px;
opacity: 0px;
background-color: #C60000;
color: white;
font-family: Arial;
font-size: 18px;
font-weight: 400;
line-height: 20.76px;
text-align: center;
margin-top: 20px;
padding: 10px;
       }

       .footer .btn:hover {
        background-color: #C60000;
        color: white;
    
       }

       .footer h6 {
        font-family: Arial;
font-size: 23px;
font-weight: 700;
line-height: 26.52px;
text-align: left;

       }

       .footer a {
        color: white;
        text-decoration: none;
        font-family: Arial;
font-size: 17px;
font-weight: 400;
line-height: 38.53px;
text-align: left;

       }

       .footer {
        background-image: url(red3.png);
        background-repeat: no-repeat;
        background-position: right;
        background-size: contain;
       }

       .footer a:hover {
        color: #CBCBCA;
              }

              .swiper-slide {
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
            }
    
            .swiper-slide img {
                width: 100%;
                height: 100%;
                object-fit: cover; /* Ensures the image covers the slide, maintaining aspect ratio */
            }
    
            /* Custom navigation buttons */
            .swiper-button-next, .swiper-button-prev {
                color: #fff; /* Change the color as needed */
            }
    
            /* Custom pagination */
            .swiper-pagination-bullet {
                background-color: #fff; /* Change the color as needed */
            }
    
            /* Thumbs Slider customization */
            .swiper.mySwiper {
                margin-top: 20px;
            }
    
            .swiper.mySwiper .swiper-slide img {
                width: 500px;
                height: 200px;
                object-fit: cover;
                cursor: pointer;
                opacity: 0.6; /* Dim the thumbs */
                transition: opacity 0.3s;
            }
    
            .swiper.mySwiper .swiper-slide-thumb-active img {
                opacity: 1; /* Highlight active thumb */
            }
    
            /* Ensuring all images are the same size */
            .swiper-slide img {
                width: 100%;
                height: 900px; /* Set a fixed height for the images */
            }
    
            /* For thumbnail images */
            .swiper.mySwiper .swiper-slide img {
                width: 500px;
                height: 200px; /* Set a fixed size for the thumbnails */
            }



            .whatsapp-button {
                position: fixed;
                bottom: 20px;
                right: 20px;
                background-color: #25d366;
                color: white;
                border-radius: 50px;
                width: 80px;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 0px 10px 10px rgba(0,0,0,0.2);
                z-index: 1000;
                text-decoration: none;
                animation: pulse 2s infinite;
                transition: 0.4s ease;
            }
            
            .whatsapp-button:hover {
                color: white;
                text-decoration: none;
                box-shadow: 0 0px 10px 10px rgba(0,0,0,0.2);
                box-shadow: 0 0px 10px 10px rgba(255, 255, 255, 0.336);
            }
            
            .whatsapp-button i {
                font-size: 40px;
                text-decoration: none;
            }
            
            .whatsapp-button i:hover {
                color: white;
                text-decoration: none;
            }

            /* Fixed Call Button */
.call-button {
    position: fixed;
    left: 10px; /* Adjust this value to set the desired distance from the left edge */
    bottom: 20px; /* Adjust this value to set the desired distance from the bottom edge */
    background-color: rgb(9, 92, 247);
                color: white;
                border-radius: 50px;
                width: 80px;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 0px 10px 10px rgba(0,0,0,0.2);
                z-index: 1000;
                text-decoration: none;
                animation: pulse 2s infinite;
                transition: 0.4s ease;
  }
  
  .call-button i {
 
    display: block;
    font-size: 30px;
  }

  .call-button:hover {
                text-decoration: none;

                box-shadow: 0 0px 10px 10px rgba(255, 255, 255, 0.336);

  }
  

            @keyframes pulse {
                0%, 100% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.1);
                }
            }
            
          
              @media (max-width: 768px) {
                .whatsapp-button {
                  bottom: 15px;
                  right: 15px;
                  padding: 8px;
                }
          
                .whatsapp-button img {
                  width: 40px;
                  height: 40px;
                }
              }
          
              @media (max-width: 480px) {
                .whatsapp-button {
                  bottom: 10px;
                  right: 10px;
                  padding: 5px;
                }
          
                .whatsapp-button img {
                  width: 30px;
                  height: 30px;
                }
              }

           

      
        @media (max-width: 576px) and (min-width:401px) {

            .main {
                padding-left: 0;
                padding-top: 50px;
                
            }

            .backe {
                height: 80vh;
                background-position: left;
            }

            .back {
                height: fit-content;
            }

            .main h1 {
                text-align: center;
            }

            .main p {
                text-align: center;
            }

            .main a {
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                width: 220px;
                margin-left: 100px;
            }

            .main5 {
                padding-top: 50px;
            }

            .swiper-slide img {
                width: 100%;
                height: 250px; /* Set a fixed height for the images */
            }

            .swiper.mySwiper .swiper-slide img {
                width: 500px;
                height: 80px; /* Set a fixed size for the thumbnails */
            }


            header.main h1 {
                font-size: 2rem;
            }

            header.main p {
                font-size: 1rem;
            }

            .navbar-brand {
                padding-left: 15px;
                padding-right: 15px;
            }

            .navbar .btn {
                background-color: black;
                color: white;
            border-radius: 10px;
            opacity: 0px;
            font-family: Inter;
            font-size: 17px;
            font-weight: 500;
            margin-left: 80px;
            text-align: center;
            margin-top: 20px;
            
            }


            .footer {
                background-image: url();
                background-repeat: no-repeat;
                background-position: top left;
                background-size: contain;
                background-position-y: top;
               }

               .offcanvas-body {
                background-image: url(red3.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;/* Change to your preferred color */
                color: white;
                text-align: center;
                background-color: black;
               }

               .offcanvas-header {
                background-color: black;
               }

               .navi a {
                text-align: center;
                padding-top: 50px;
               }
        }

        @media (max-width: 1024px) and (min-width:577px) {
            .main2 img {
                object-fit: cover;
                height: 5vh;
            }

            .footer {
                background-image: url();
                background-repeat: no-repeat;
                background-position: top left;
                background-size: contain;
                background-position-y: top;
               }

               .offcanvas-body {
                background-image: url(red3.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;/* Change to your preferred color */
                color: white;
                text-align: center;
                background-color: black;
               }

               .offcanvas-header {
                background-color: black;
               }

               .navi a {
                text-align: center;
                padding-top: 50px;
               }

               .navbar .btn {
                background-color: black;
                color: white;
            border-radius: 10px;
            opacity: 0px;
            font-family: Inter;
            font-size: 17px;
            font-weight: 500;
            margin-left: 70px;
            text-align: center;
            margin-top: 20px;
            
            }
        }




        @media (max-width: 400px)  and (min-width:312px){

            .main {
                padding-left: 0;
                padding-top: 100px;
            }

            .main h1 {
                text-align: center;
            }

            .main p {
                text-align: center;
                font-size: 100px;
            }

            .main a {
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                width: 200px;
                margin-left: 65px;
            }

            .main5 {
                padding-top: 50px;
            }

            .swiper-slide img {
                width: 100%;
                height: 250px; /* Set a fixed height for the images */
            }

            .swiper.mySwiper .swiper-slide img {
                width: 500px;
                height: 80px; /* Set a fixed size for the thumbnails */
            }


            header.main h1 {
                font-size: 2rem;
            }

            header.main p {
                font-size: 1rem;
            }

            .navbar-brand {
                padding-left: 15px;
                padding-right: 15px;
            }


            .footer {
                background-image: url();
                background-repeat: no-repeat;
                background-position: top left;
                background-size: contain;
                background-position-y: top;
               }

               .offcanvas-body {
                background-image: url(red3.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;/* Change to your preferred color */
                color: white;
                text-align: center;
                background-color: black;
               }

               .offcanvas-header {
                background-color: black;
               }

               .navi a {
                text-align: center;
                padding-top: 30px;
               }


               .navbar .btn {
                background-color: black;
                color: white;
            border-radius: 10px;
            opacity: 0px;
            font-family: Inter;
            font-size: 17px;
            font-weight: 500;
            margin-left: 65px;
            text-align: center;
            margin-top: 20px;
            
            }
        }