OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	11/28/2024 11:03:35 AM	rwxrwxr-x
📁 CSS	-	08/26/2024 06:19:06 AM	rwxr-xr-x
📄 Health-risks.html	11.73 KB	08/26/2024 06:19:06 AM	rw-r--r--
📄 about.html	3.68 KB	08/26/2024 06:19:06 AM	rw-r--r--
📄 contect.html	4.27 KB	08/26/2024 06:19:06 AM	rw-r--r--
📄 financial.html	4.22 KB	08/26/2024 06:19:06 AM	rw-r--r--
📁 images	-	08/26/2024 06:22:19 AM	rwxr-xr-x
📄 index.html	18.88 KB	08/26/2024 06:19:06 AM	rw-r--r--
📁 js	-	08/26/2024 06:22:21 AM	rwxr-xr-x
📄 licpage.html	5.61 KB	08/26/2024 06:19:06 AM	rw-r--r--
📄 life_risk.html	8.77 KB	08/26/2024 06:19:06 AM	rw-r--r--
📄 script.js	1.97 KB	08/26/2024 06:19:06 AM	rw-r--r--
📄 styles.css	19.01 KB	08/26/2024 06:19:06 AM	rw-r--r--
📄 testimonial.html	7.37 KB	08/26/2024 06:19:06 AM	rw-r--r--
📄 text.html	4.27 KB	08/26/2024 06:19:06 AM	rw-r--r--
📄 vehicle-risk.html	9.8 KB	08/26/2024 06:19:06 AM	rw-r--r--

Editing: styles.css

body {
     font-family: 'Roboto', sans-serif;
     margin: 0;
     padding: 0;
     background-color: #f4f4f9;
     color: #333;
 }

h1 {
     font-size: larger;
     color: #000000;
 }

.container {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     flex-wrap: wrap;
     column-gap: 20px;
 }

header {
     background: #0043a4;
     color: #fff;
     z-index: 10;

position: relative;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

.header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

header h1 {
     margin: 0;
     font-size: 1.8em;
     font-weight: 700;
 }

nav ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
 }

nav ul li a {
     color: #fff;
     text-decoration: none;
     font-size: 1em;
     font-weight: 500;
 }

.logo img {
     width: 80px;
     height: auto;
 }

.menu-icon {
     display: none;
     font-size: 1.5em;
     cursor: pointer;
 }

section {
     padding: 4em 0;
     text-align: center;
     /* background: #f4f4f9; */
 }

#home button:hover {
     background: #cc8400;
 }

#services {
     margin-top: 5px;
     background: url('images/our-service-bg.png') no-repeat center center/cover;
     width: 100%;
     /* background-color: #313030; */

color: #fff;

}

#services .services-list {
     display: flex;
     flex-wrap: wrap;
     /* justify-content: space-around; */
     margin-top: 2em;
     padding-left: 50px;
 }
 @media screen and (max-width:540px) {
    #services .services-list {
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-around; */
        margin-top: 2em;
        padding-left: 0px !important;
    }
    
 }

#services .service-item {
     /* flex: 1 1 30%; */
     width: 250px;
     background: rgba(255, 255, 255, 0.9);
     padding: 2em;
     margin: 1em;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s, box-shadow 0.3s;
     border-radius: 10px;
     text-align: left;
 }

.health-risks {
     width: 550px;
     height: 220px;
     border-radius: 10px;
     position: relative;
     bottom: 386px;
     left: 20px;
     color: rgb(41, 37, 30);
     background-color: rgba(198, 199, 202, 0.788); 
     padding: 10px;
     margin-left: 30px;
 }

.business-risks {
     width: 600px;
     height: 220px;
     border-radius: 10px;
     position: relative;
     bottom: 503px;
     left: 20px;
     color: rgb(65, 86, 100);
     /* background-color: rgba(188, 225, 241, 0.788);  */
     padding: 10px;
     margin-left: 30px;
 }

.business-risks p {
     font-size: 3.0em;
     font-weight: 700;
 }

.health-risks p {
     font-size: 3.5em;
     font-weight: 700;
 }
 .service-item{
    color: #000000;
 }

#services .service-item img {
     width: 100%;
     height: auto;
     border-radius: 10px;
 }

#services .service-item h3 {
     margin-top: 1em;
     font-size: 1.5em;
     font-weight: 700;
     color: #333;
 }

#services .service-item:hover {
     transform: translateY(-10px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 }

footer {
     bottom: 0;
     background: #000000;
     color: #fff;
     text-align: center;
     padding: 1em 0;
 }

@media (max-width: 768px) {
     .header-content {
         /* flex-direction: row; */
     }

.menu-icon {
         display: block;
     }

nav ul {
         display: none;
         flex-direction: column;
         background: #0043a4;
         width: 100%;
         left: 0;
     }

nav ul li {
         margin: 10px 0;
     }

nav ul li a {
         padding: 10px 0;
         display: block;
     }

#services .service-item {
         flex: 1 1 45%;
     }
 }

@media (max-width: 480px) {
     #services .service-item {
         flex: 1 1 100%;
     }
 }

/* CSS styles for the insurance company website */

/* Reset default margin and padding */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

/* Body styles */
 body {
     font-family: 'Roboto', sans-serif;
 }

/* Header styles */
 header {
     background-color: #0043a4;
     color: #fff;
     /* padding: 20px 0; */
 }

.header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

@media screen and (max-width:319px) {
     .header-content {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

}

h1 {
     font-size: 1.8em;
     font-weight: 700;
 }

nav ul {
     list-style: none;
     display: flex;
 }

nav ul li a {
     text-decoration: none;
     color: #fff;
     font-size: 1em;
     font-weight: 500;
     position: relative;
 }

nav ul li ul {
     position: absolute;
     background-color: #0043a4;
     top: 100%;
     /* left: 0; */
     min-width: 200px;
     display: none;
 }

nav ul li:hover ul {
     display: block;
 }

.menu-icon {
     display: none;
 }

/* Media queries */
 @media(max-width: 768px) {
     .menu-icon {
         display: block;
         font-size: 1.5em;
         cursor: pointer;
     }

nav ul {
         display: none;
         flex-direction: column;
         position: absolute;
         top: 80px;
         left: 0;
         width: 100%;
         background-color: #0043a4;
     }

nav ul li {
         margin: 0;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     }

nav ul li:last-child {
         border-bottom: none;
     }

nav ul li a {
         padding: 10px 20px;
     }

nav ul li ul {
         position: static;
         background-color: transparent;
         display: block;
         padding-left: 20px;
     }

nav ul li ul li {
         padding: 10px 0;
     }

nav ul li:hover ul {
         display: none;
     }
 }

.Services-image {
     padding: 2rem;
     max-width: 430px;
     height: 687px;
     margin: 0 auto;
 }

.Services-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Ensure the image covers the entire container */
     border-radius: 10px;
     /* Optional: Add border radius for rounded corners */
 }

.services-divs {
     display: flex;

}
 .business-insurance{
    border: 1px solid white;
    border-radius: 8px;
 }

.business-insurance-section {
     padding: 80px 0;
     background: url('images/bgdesign.png') no-repeat center center/cover;
     /* border: 1px solid black; */
     /* padding: 30px; */
     background-color: #f3f3f3;

}

.section-description {
     font-size: 1.1em;
     line-height: 1.6;
     color: #666;
     text-align: center;
     margin-bottom: 30px;
 }

.BI-conatiner {
     /* padding: 20px 200px; */
     display: flex !important;
 }

.car-insurance img {
     max-width: 100%;
     display: block;
     margin: 0 auto;
 }

/* .section-heading {
     font-size: 2em;
     margin-bottom: 10px;
 } */

/* Responsive Styles */
 @media (min-width: 768px) {

.business-insurance,
     .car-insurance {
         flex: 1;
     }

.car-insurance {
         padding-left: 10px;
         /* display: flex; */
         align-items: center;
         justify-content: center;
     }
 }

.header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 1rem;
 }

.logo img {
     max-width: 150px;
 }

nav {
     position: relative;
 }

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

nav ul {
     list-style: none;
     display: flex;
     justify-content: flex-end;
 }

nav ul li {
     position: relative;
     /* margin: 0 1rem; */
 }

nav ul li a {
     color: #fff;
     text-decoration: none;
     padding: 0.5rem 1rem;
     display: block;
 }

nav ul li:hover>a {
     background: #ffff;
     color: black;
 }

nav ul ul {
     position: absolute;
     top: 100%;
     left: 0;
     background: #444;
     display: none;
 }

nav ul li:hover>ul {
     display: block;
 }

nav ul ul ul {
     top: 0;
     left: 100%;
 }

@media (max-width: 768px) {
     .menu-icon {
         display: block;
     }

nav ul {
         flex-direction: column;
         align-items: flex-start;
         display: none;
     }

nav ul li {
         margin: 0.5rem 0;
     }

nav ul li a {
         padding: 0.5rem 1rem;
     }

nav ul ul {
         position: static;
     }

nav ul ul ul {
         left: 0;
     }

nav ul.show {
         display: flex;
     }
 }

.mySlides {
     display: none;
 }

.prev,
 .next {
     cursor: pointer;
     position: absolute;
     top: 50%;
     width: auto;
     margin-top: -22px;
     padding: 16px;
     color: white;
     font-weight: bold;
     font-size: 18px;
     transition: 0.6s ease;
     border-radius: 0 3px 3px 0;
     user-select: none;
 }

.next {
     right: 0;
     border-radius: 3px 0 0 3px;
 }

.prev:hover,
 .next:hover {
     background-color: rgba(0, 0, 0, 0.8);
 }

.text {
     color: #f2f2f2;
     font-size: 15px;
     padding: 8px 12px;
     position: absolute;
     bottom: 8px;
     width: 100%;
     text-align: center;
 }

.numbertext {
     color: #f2f2f2;
     font-size: 12px;
     padding: 8px 12px;
     position: absolute;
     top: 0;
 }

.dot {
     cursor: pointer;
     height: 15px;
     width: 15px;
     margin: 0 2px;
     background-color: #bbb;
     border-radius: 50%;
     display: inline-block;
     transition: background-color 0.6s ease;
 }

.active,
 .dot:hover {
     background-color: #717171;
 }

/* Fading animation */
 .fade {
     width: 100%;
     animation-name: fade;
     animation-duration: 1.5s;
 }

@keyframes fade {
     from {
         opacity: .4
     }

to {
         opacity: 1
     }
 }

#target-customers {
     background: #f9f9f9;
     /* background: url('images/our-clients-bg.jpg') no-repeat center center/cover; */

padding: 4em 0;
     text-align: center;
 }

.customer-grid {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 1.5em;
 }

.customer-card {
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     width: 300px;
     height: auto;
     text-align: left;
     overflow: hidden;
     transition: transform 0.3s, box-shadow 0.3s;
 }

.customer-card img {
     width: 100%;
     height: 200px;
     object-fit: cover;
 }

.customer-card h3 {
     font-size: 1.5em;
     color: #333;
     margin: 1em 1em 0.5em 1em;
 }

.customer-card p {
     font-size: 1em;
     color: #666;
     margin: 0 1em 1.5em 1em;
 }

.customer-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 }

/* Header and Navbar Styles */
 header {
    top: 0;
     position: fixed;
     width: 100%;
     background-color: #fff;
     box-shadow: 0 4px 2px -2px gray;
     transition: all 0.3s ease;
 }

.header-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px 0;
     transition: padding 0.3s ease;
 }

.logo img {
     /* height: 50px; */
     transition: height 0.3s ease;
 }

nav {
     flex-grow: 1;
     text-align: right;
 }

.menu-icon {
     display: none;
     font-size: 30px;
     cursor: pointer;
 }

#nav-links {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }

#nav-links li {
     display: inline-block;
     margin-left: 20px;
     position: relative;
 }

#nav-links li a {
     text-decoration: none;
     display: flex;
     justify-content: left;
     color: rgb(51, 51, 51);
     padding: 8px 12px;
     /* display: block; */
 }

#nav-links li ul {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     background-color: #fff;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
 }

#nav-links li:hover ul {
     display: block;
 }

#nav-links li ul li {
     display: block;
     margin: 0;
 }

/* Scrolled state */
 header.scrolled {
     padding: 10px 0;
 }

header.scrolled .header-content {
     padding: 10px 0;
 }

header.scrolled .logo img {
     height: 40px;
     width: 40px;
 }

/* Responsive Styles */
 @media (max-width: 768px) {
     .menu-icon {
         display: block;
     }

nav {
         display: none;
     }

nav.active {
         display: block;
     }

#nav-links li {
         display: block;
         margin: 10px 0;
     }
 }

/* Container and Flexbox setup */
 .container.BI-container {
     display: flex;
     align-items: stretch;
     justify-content: space-between;
     gap: 150px;
 }

/* Business Insurance section styling */

.business-insurance h2 {
     margin-bottom: 20px;
 }

.business-insurance p {
     margin-bottom: 20px;
 }

/* Slideshow container styling */
 .slideshow-container {
     flex: 1;
     position: relative;
     /* border: 1px solid black; */
     border-radius: 10px;
 }

.slideshow-container img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

/* Hide the images by default */
 .mySlides {
     display: none;
 }

.mySlides img {
     border-radius: 10px;
     width: 100%;
     height: 560px;
     object-fit: cover;
 }

/* Fading animation */
 .fade {
     animation-name: fade;
     animation-duration: 1.5s;
 }

@keyframes fade {
     from {
         opacity: .4
     }

to {
         opacity: 1
     }
 }

.swiper-slide {
     text-align: center;
     font-size: 24px;
     background-color: #f1f1f1;
     padding: 50px 0;
     /* Set height and width */
     height: 200px;
     /* Adjust as needed */
     width: 300px;
     /* Adjust as needed */
 }

/* Style for the main container */
.aboutinsurance {
    max-width: 800px; /* Adjust max-width as needed */
    height: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Style for section heading (Business Insurance) */
.section-heading {
    font-size: 24px;
    margin-bottom: 10px;
}

/* Style for section description */
.section-description {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

/* Style for insurance types container */
.insurance-types {
    margin-bottom: 20px;
}

/* Style for subsection heading (Types of Business Insurance) */
.subsection-heading {
    font-size: 20px;
    margin-bottom: 30px;
}

/* Style for insurance list */
.insurance-list {
    text-align: left;
    list-style-type: disc;
    padding-left: 20px;
}

/* Style for insurance list items */
.insurance-item {
    font-size: 16px;
    margin-bottom: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .aboutinsurance {
        padding: 15px;
    }
    .section-heading {
        font-size: 20px;
    }
    .section-description {
        font-size: 14px;
    }
    .subsection-heading {
        font-size: 18px;
    }
    .insurance-item {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .aboutinsurance {
        padding: 10px;
    }
    .section-heading {
        font-size: 18px;
    }
    .section-description {
        font-size: 14px;
    }
    .subsection-heading {
        font-size: 16px;
    }
    .insurance-item {
        font-size: 14px;
    }
}

.custom-slide {
    position: relative;
    display: block;
    overflow: hidden;
}

.custom-slide a {
    display: block;
    position: relative;
}

.text-life-risk {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 20px;
    opacity: 0.5;
    border-radius: 8px;
    background-color: #e6f1fa;
    top: 50%; /* Adjust this value to position the text vertically */
    left: 50%;
    width: 50%;
    text-align: center;
    color: #fff; 
    font-size: 24px;
    z-index: 1; 
}
.text-life-risk:hover {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 20px;
    opacity: 0.8;
    border-radius: 8px;
    background-color: #e6f1fa;
    top: 50%; /* Adjust this value to position the text vertically */
    left: 50%;
    width: 50%;
    text-align: center;
    /* color: #fff;  */
    font-size: 24px;
    z-index: 1; 
}

.text-life-risk h1 {
    margin: 0;
    padding: 10px;
    line-height: 1.2;
    color: #070707;
    font-size: 4rem;
}

.desktop-image {
    display: block;
    width: 100%; /* Ensure image covers the entire container */
    height: auto;
}

/* this code for last section about and contect in index.html */

/* Custom styles for equal width sections */
    .equal-width-sections {
        display: flex;
    }
    
    .equal-width-sections > section {
        flex: 1;
        width: 100%; /* Equal width for both sections */
        padding: 20px; /* Optional: Adjust padding as needed */
    }

/* Optional: Adjust styles for better visual separation */
    #about-section {
        background-color: #f0f0f0;
    }

#contact-section {
        background-color: #e9ecef;
    }

/* Custom container classes */
    .about-container,
    .contact-container {
        max-width: 100%; /* Adjust max-width as needed */
        margin: 0 auto; /* Center content */
        padding: 15px; /* Optional: Add padding */
    }

.equal-width-sections {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Center the sections horizontally */
        max-width: 1200px;
        margin: 0 auto; /* Center align on the page */
        padding: 20px;
    }
    
    .about-container,
    .contact-container {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }
    
    @media (min-width: 768px) {
        .about-container,
        .contact-container {
            width: 100%;
        }
    }
    
    /* Form styling */
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-control {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    
    .btn {
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
    }
    
    .btn:hover {
        background-color: #0056b3;
    }