@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
    
   *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    --red: #8A1538;
    --black: #181818;
    --grey: #959CB2;
    --white:#ffff;
    }
    /* nav-bar */
    body {
        background-image: url('/gray-abstract-wireframe-technology-background_53876-101941.webp');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
        z-index: 2;
        overflow-x:hidden ;
      }
  nav .logo{
    margin-left: 20px;
    width: 70%;
  }
  
  .dropdown-menu li {
    position: relative;
  }
  
  .dropdown-menu .submenu {
    display: none;
    position: absolute;
    right: 101%;
    top: -5px;
    padding-left: 1rem;
  
  }
  
  .dropdown-menu>li:hover>.submenu {
    display: block;
  }
  
  #navbar-container{
    margin-bottom: 28em;
  }
  
  #nave {
    width: 100%;
    padding: auto;
    justify-content: space-around;
    margin-top: 3%;
    margin-bottom: 20px;
    display: flex;
  }
  
  #nave a {
    text-decoration: none;
    color: var(--black);
    font-family: Poppins;
    font-size: 1em;
    border-bottom: 5px solid transparent;
  }
  
  #nave button {
    font-family: Poppins;
    font-size: 1em;
    margin-top: -0.5%;
    color: var(--white);
    background-color: var(--red);
    border: none;
    border-radius: 5px;
    height: 40px;
    width: 160px;
    padding: 5px;
  }
  
  #hover:hover {
  
    border-bottom: 4px solid var(--red);
  }

   /* nav-bar */
    body{
        font-family: 'Poppins', sans-serif;
    }
    .pro-topimage{
        height: 36rem;
        width: 100%;
        background-image: url(./illustration-social-media-concept_53876-18146.webp);
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: cover;
    }
    .heading{
        text-align: center;
        margin-top: 1.2rem;
        margin-bottom: 1.3rem;
        font-size: 1.3rem;
        color: #26304D;
    }
    .product-head{
        display: grid;
        grid-template-columns:auto auto auto auto auto auto;
        min-height: 100vh;
        width: 80%;
        margin: 0 auto;
    }
    .pro-items{
        height: 150px;
        width: 150px ;
    }
    .item1{
        background-image: url(./images/Accops.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item2{
        background-image: url(./images/Acer.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item3{
        background-image: url(./images/Adobe.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item4{
        background-image: url(./images/Algosec.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item5{
        background-image: url(./images/Apple.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item6{
        background-image: url(./images/Array\ Networks.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item7{
        background-image: url(./images/Aruba.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item8{
        background-image: url(./images/AWS.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item9{
        background-image: url(./images/Azure.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item10{
        background-image: url(./images/barracuda.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item11{
        background-image: url(./images/BeyondTrust.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item12{
        background-image: url(./images/Broadcom.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item13{
        background-image: url(./images/Brocade.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item14{
        background-image: url(./images/Checkpoint.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item15{
        background-image: url(./images/Cisci.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item16{
        background-image: url(./images/Citrix.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item17{
        background-image: url(./images/Colortokens.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item18{
        background-image: url(./images/Commvault.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item19{
        background-image: url(./images/Crowdstrike.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item20{
        background-image: url(./images/Cymulate.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item21{
        background-image: url(./images/Dell\ EMC.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item22{
        background-image: url(./images/Deskera.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item23{
        background-image: url(./images/Hitachi.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item24{
        background-image: url(./images/Dynabook.jpg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item25{
        background-image: url(./images/Epson.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item26{
        background-image: url(./images/f5.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item27{
        background-image: url(./images/Fatpipe.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item28{
        background-image: url(./images/Forcepoint.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item29{
        background-image: url(./images/Fortinet.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item30{
        background-image: url(./images/Google\ Cloud.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item31{
        background-image: url(./images/Solarwinds.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item32{
        background-image: url(./images/Hewlett_Packard_Enterprise.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item33{
        background-image: url(./images/Sequretek.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item34{
        background-image: url(./images/IBM.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item35{
        background-image: url(./images/Innefu.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item36{
        background-image: url(./images/Juniper.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item37{
        background-image: url(./images/Kaspersky.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item38{
        background-image: url(./images/Lenovo.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item39{
        background-image: url(./images/Logitech.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item40{
        background-image: url(./images/McAfee.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item41{
        background-image: url(./images/Microfocus.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item42{
        background-image: url(./images/Sapphire.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item43{
        background-image: url(./images/N\ Computing.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item44{
        background-image: url(./images/Netapp.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item45{
        background-image: url(./images/microsoft\(1\).png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item46{
        background-image: url(./images/Netscope.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item47{
        background-image: url(./images/Nutanix.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item48{
        background-image: url(./images/nvidia.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item49{
        background-image: url(./images/Oracle.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item50{
        background-image: url(./images/Paessler.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item51{
        background-image: url(./images/Paloalto.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item52{
        background-image: url(./images/PRTG.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item53{
        background-image: url(./images/Pure\ storage.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item54{
        background-image: url(./images/Radware.jpg);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item55{
        background-image: url(./images/RedHat.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item56{
        background-image: url(./images/RSA.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item57{
        background-image: url(./images/Samsung.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item58{
        background-image: url(./images/Sophos.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item59{
        background-image: url(./images/Sonicwall.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item60{
        background-image: url(./images/Trend\ Micro.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item61{
        background-image: url(./images/TTSL.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item62{
        background-image: url(./images/UiPath.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item63{
        background-image: url(./images/Veeam.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item64{
        background-image: url(./images/Veritas.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item65{
        background-image: url(./images/vmware.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .item66{
        background-image: url(./images/Zimperium.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }  

    /* Footer  */

        .mainfooter{
        color: white;
        display: flex;
        justify-content: space-around;
        position: relative;
        width: 100%;
        }
        .footer{
        color: white;
        display: flex;
        padding-top: 270px;
        justify-content: space-around;
        position: relative;
        width: 1200px;
        }
        .h1-head{
            font-weight: 500;
            font-size: 25px;
            color: #ffffff8c;
          }
        .foot1 a{
        display: block;
        }
        .f1-icons{
        display: flex;
        padding-top: 5px;
        }
        .f1-icons a{
        margin-right: 10px;
        }
        .mainfooter hr{
        margin-top: 310px;
        }
        .mainfooter p{
        text-align: center;
        color: white;
        padding-top: 35px;
        }
        .footer a {
            text-decoration: none;
            color: rgba(255, 255, 255, 0.313);
        }
        
        .footer a:hover {
            text-decoration: none;
            color: #ffffff;
        }   
        .opacity{
        opacity: 50%;
        padding-top: 10px;
        }
        
        /* SVG footer */
        .custom-shape-divider-top-1669964051 {
        top: 0;
        left: 0;
        height: 630px;
        width: 100%;
        overflow: hidden;
        line-height: 0;
        background-color:var(--red);
        position: absolute;
        }
        .custom-shape-divider-top-1669964051 svg {
        width: calc(145% + 1.3px);
        height: 238px;
        transform: rotateY(180deg);
        }
        .custom-shape-divider-top-1669964051 .shape-fill {
        fill: #FFF;
        }
        /* SVG footer */
        
        @media(max-width: 1020px){
            .con-para{
                width: 512px;
            }
            .product-head{
                grid-template-columns:auto auto auto auto;
                width: 75%;
            }
            .pro-topimage{
                width: 100%;
            }
        }

        @media(max-width:800px){
            .footer{
                width: 900px;
            }
            .con-image{
                width: 100%;
            }
            .con-data-image{
                height: 350px;
                width: 60%;
            }
            .footer{
                width: 700px;
                padding-top: 220px;
            }
            .h1-head{
                font-size: 1.6rem;
                font-weight: 100;
            }
            .opacity a{
                font-size: 1rem;
            }
            .para-copy{
                font-size: 13px;
            }
            .custom-shape-divider-top-1669964051 svg {
                height: 200px;
            }
            .custom-shape-divider-top-1669964051{
                height: 590px;
            }
            .ms-paragraph{
                width: 600px;
            }
            .product-head{
                grid-template-columns:auto auto auto;
                width: 75%; 
            }
            .pro-topimage{
                width: 100%;
            }
        }
        
        @media(max-width: 600px){
            .con-image{
                width: 100%;
            }
            .con-data-image{
                height: 300px;
                width: 55%;
            }
            .con-para{
                width: 300px;
            }
            .footer{
                width: 100%;
                float: right;
                padding-top: 210px;
           }
           .h1-head{
                font-size: 1.2rem;
                font-weight: 100;
           }
           .opacity a{
                font-size: 12px;
           }
           .para-copy{
                font-size: 10px;
           }
           .custom-shape-divider-top-1669964051 svg {
                height: 180px;
           }
             .custom-shape-divider-top-1669964051{
               height: 550px;
           }
             .custom-shape-divider-top-1669964051 hr{
               margin-top: 280px;
           }
           .ms-paragraph{
            width: 400px;
           }
           .product-head{
            grid-template-columns:auto auto auto;
            width: 80%;
           }
           .pro-topimage{
            width: 100%;
           }
        }
        
        @media(max-width: 450px){
            .con-image{
                width: 100%;
               }
            .con-data-image{
                height: 250px;
                width: 65%;
            }
            .footer{
                display: block;
                padding-top: 20px;
                text-align: center;
            }
           .f1-icons {
                justify-content: center;
            }
            .custom-shape-divider-top-1669964051 svg {
                height: 0;
            }
            .h1-head{
                font-size: 1.4rem;
                font-weight: 100;
                padding-top: 20px;
            }
            .custom-shape-divider-top-1669964051 hr{
                margin-top: 470px;
            }
            .ms-paragraph{
                width: 250px;
            }
            .product-head{
                grid-template-columns:auto ;
                width: 40%;
            }
            .pro-topimage{
                width: 100%;
               }
        }