.a1 {
    background: linear-gradient(140deg, rgb(163, 23, 23), rgb(36, 133, 218));
    background-size: contain;
    background-repeat: no-repeat;
    clip-path: ellipse(97% 100% at top);
}

.a2 {
    background: linear-gradient(140deg, rgb(163, 23, 23), rgb(36, 133, 218));
    background-size: contain;
    background-repeat: no-repeat;
    clip-path: ellipse(140% 100% at top);
}

.b {
    height: 100vh;
}

.fade-in {
    opacity: 0;
    transition: opacity 1.2s ease-in;
}

.move-down {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 0.5s ease, transform 1.5s ease;
}

.moved1 {
    opacity: 1;
    transform: translateY(0);
}

.move-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 1.5s ease;
}

.moved2 {
    opacity: 1;
    transform: translateY(0);
}

.move-right {
    transform: translateX(-75px);
    transition: transform 1.5s ease;
}

.move-right2 {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 1.5s ease;
}

.moved5 {
    opacity: 1;
    transform: translateX(0);
}

.moved3 {
    opacity: 1;
    transform: translateX(0);
}

.move-left {
    transform: translateX(75px);
    transition: transform 1.5s ease;
}

.moved4 {
    opacity: 1;
    transform: translateX(0);
}

.header {
    width: 100vw;
    background: linear-gradient(100deg, rgb(163, 23, 23), rgb(36, 133, 218));
    /* background-color:  rgb(163, 23, 23); */
}

.carousel-left{
    background: linear-gradient(100deg, rgb(163, 23, 23), rgb(36, 133, 218));
}

.u:hover {
    text-decoration: underline;
    text-decoration-style: solid;
    color: white;
}

.footer {
    background: linear-gradient(50deg, rgba(43, 119, 186), rgba(163, 23, 23));
    /* background: linear-gradient(180deg, rgba(43, 119, 186), rgba(163, 23, 23, 0.704)); */
    /* background-color:  rgba(43, 119, 186); */
}

.ab-us {
    background-size: contain;
    background-repeat: no-repeat;
    background: #f3e5f5;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: medium;
}

.card1 {
    background-color: rgb(25, 185, 46);
}

.card1:hover {
    background-color: #5cce4c;
    color: greenyellow;
}

.card2 {
    background-color: #5a5a5a;
}

.card2:hover {
    background-color: rgb(111, 111, 111);
    color: lightgray;
}

.card3 {
    background-color: rgb(14, 14, 191);
}

.card3:hover {
    background-color: #0056c7;
    color: aquamarine;
}

.card4 {
    background-color: #22bfe2;
}

.card4:hover {
    background-color: rgb(108, 185, 209);
    color: rgb(176, 255, 243);
}

.card5 {
    background-color: #d12d2d;
}

.card5:hover {
    background-color: rgb(224, 93, 93);
    color: rgb(250, 214, 214);
}

.card6 {
    background-color: #4f0a7d;
}

.card6:hover {
    background-color: rgb(118, 49, 167);
    color: rgb(224, 187, 255);
}

.card7 {
    background-color: #fa7612;
}

.card7:hover {
    background-color: rgb(255, 161, 84);
    color: rgb(255, 235, 205);
}

.c {
    background: (#f7f7f7);
    background: (#f4f4f4);
    background: (#f3e5f5);
}

.skewed {
    position: relative;
    padding: 88px 78px 50px 10px;
    box-sizing: border-box;
    z-index: 0;
}

.skewed2 {
    position: relative;
    padding: 88px 78px 50px 10px;
    box-sizing: border-box;
}

.skewed:after {
    content: '';
    background: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: skewY(4deg);
    transform-origin: top left;
}

.skewed2:after {
    content: '';
    background: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: -1;
    transform: skewY(4deg);
    transform-origin: bottom right;
}

.animated-element {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 1s ease;
}

.animated-element.animate {
    opacity: 1;
    transform: translateY(0);
}

.animated-element2 {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease, transform 1s ease;
}

.animated-element2.animate2 {
    opacity: 1;
    transform: translateY(0);
}

.nav-link {
    text-decoration: none;
}

.nav-link.active {
    text-decoration: underline;
    font-weight: bold; /* Optional */
}

.fade-divider {
    height: 30px; /* Adjust as needed */
    background: linear-gradient(to top,#f7f7f7, #f3e5f5);
}

.zoom-element {
    transform: scale(0.5); /* Start smaller for the zoom effect */
    opacity: 0; /* Start hidden */
    transition: transform 1s ease, opacity 0.5s ease; /* Smooth transition */
}

.zoom-element.zoom-in {
    transform: scale(1); /* Full size */
    opacity: 1; /* Fully visible */
}

.agri{
    background-image: url(Resources/hill-5419527.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.miner{
    background-image: url(Resources/mineral-2382040.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
  
.marine{
    background-image: url(Resources/ship-56569.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.carousel{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100px;
}
  
  
  







