@charset "utf-8";
/* CSS Document */
:root{
      --gopalan-blue:#243a91;
      --gopalan-navy:#071269;
      --gopalan-orange:#ffab17;
      --soft-icon:#dfe2f0;
	 --gopalan-red:#ee2024;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      color:var(--gopalan-blue);
      background:#ffab17;
      overflow-x:hidden;
    }

    /* HERO */
   .hero-section{
    position: relative;
    min-height: 635px;
    overflow: hidden;
    background-image: url("../images/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


    .hero-inner{min-height:635px}

    .brand-logo{
      width:min(400px, 72%);
      height:auto;
      object-fit:contain;
      display:block;
    }

    .hero-title{
      margin:88px 0 0;
      font-size:5.4rem;
      line-height:1.05;
      font-weight:700;
      letter-spacing:.01em;
      color:var(--gopalan-blue);
      text-transform:uppercase;
    }

    .hero-photo-wrap{
      position:absolute;
      top:-100px;
      right:-100px;
      width:700px;
      height:700px;
      overflow:hidden;
      border-bottom-left-radius:50%;
      border-top-left-radius:50%;
		 border-bottom-right-radius:50%;
    }
    .hero-photo{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center top;
    }

    .social-row{
      margin-top:140px;
      display:flex;
      align-items:center;
      gap:18px;
      flex-wrap:wrap;
    }
    .social-link{
      width:38px;
      height:38px;
      border:2px solid var(--gopalan-navy);
      border-radius:50%;
      color:var(--gopalan-navy);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      transition:.2s ease;
      font-size:1.05rem;
    }
    .social-link:hover{
      background:var(--gopalan-navy);
      color:#fff;
      transform:translateY(-2px);
    }
    .connect-text{
      color:var(--gopalan-navy);
      font-size:1.6rem;
      white-space:nowrap;
    }
    .connect-line{
      width:min(200px, 29vw);
      height:1px;
      background:var(--gopalan-blue);
      opacity:.8;
    }


    /* SCHOOL CARDS */
    .schools-section{
      background:var(--gopalan-orange);
      border-radius:24px 24px 0 0;
      padding:24px 18px 5px;
    }
    .school-card{
      height:100%;
      background:var(--gopalan-navy);
      border:6px solid var(--gopalan-navy);
      border-radius:14px;
      overflow:hidden;
      box-shadow:0 8px 20px rgba(0,0,0,.06);
    }
    .school-logo-box{
      height:145px;
      background:#fff;
      border-radius:7px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:8px;
      overflow:hidden;
    }
    .school-logo-box img{
      max-width:80%;
      width:auto;
      height:auto;
      object-fit:contain;
    }
    .card-actions{
      padding:18px 8px 10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .school-btn{
      border:1.5px solid var(--gopalan-orange);
      color:#071269;
      background:var(--gopalan-orange);
      border-radius:9px;
      padding:5px 11px;
      font-size:.86rem; font-weight: 500;
      line-height:1.2;
      text-decoration:none;
      white-space:nowrap;
      transition:.2s ease;
    }
    .school-btn:hover{
      color:#FFFFFF;
      background:var(--gopalan-red);
	border:1.5px solid var(--gopalan-red);
    }

    /* FOOTER */
    .site-footer{
      background:var( --gopalan-orange);
      color:#fff;
      text-align:center;
      padding:10px 0px 36px ;
      font-size:.9rem;
      letter-spacing:.01em;
    }
    .site-footer a{color:#fff;text-decoration:none}
    .site-footer a:hover{text-decoration:underline}

    /* MODAL */
    .modal-header{
      background:var(--gopalan-navy);
      color:#fff;
    }
    .btn-gopalan{
      background:var(--gopalan-orange);
      border-color:var(--gopalan-orange);
      color:var(--gopalan-navy);
      font-weight:600;
    }
    .btn-gopalan:hover{
      background:#f2a00c;
      border-color:#f2a00c;
      color:var(--gopalan-navy);
    }

    @media (max-width: 1199.98px){
      .hero-section,.hero-inner{min-height:590px}
      .hero-photo-wrap{width:47%;height:540px}
      .hero-title{font-size:clamp(2.8rem,5vw,4.8rem)}
      .social-row{margin-top:72px}
      .school-logo-box{height:130px}
    }

    @media (max-width: 991.98px){
      .hero-section{padding-bottom:35px}
      .hero-section,.hero-inner{min-height:auto}
      .hero-photo-wrap{
        position:relative;
        width:min(520px,90%);
        height:420px;
        margin:25px auto 0;
        border-radius:50%;
      }
      .hero-title{margin-top:35px}
      .social-row{margin-top:45px}
      .doodle-2,.doodle-3,.doodle-5,.doodle-6{display:none}
      .schools-section{border-radius:20px 20px 0 0;padding-top:40px}
    }

@media (max-width: 767.98px){

  .hero-section{
    min-height: auto;
    padding: 20px 0 40px;
  }

  .hero-inner{
    min-height: auto;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .hero-content{
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }

  /* LOGO */
  .brand-logo{
    width: 280px;
    max-width: 85%;
    margin: 0 auto;
  }

  /* TITLE */
  .hero-title{
    margin: 35px 0 0;
    font-size: 2.8rem;
    line-height: 1.05;
    text-align: center;
  }

  /* HERO IMAGE */
  .hero-photo-wrap{
    position: relative !important;

    top: auto !important;
    right: auto !important;
    left: auto !important;

    width: 320px;
    height: 320px;
    max-width: 90%;

    margin: 35px auto 0 !important;

   
    overflow: hidden;
  }

  .hero-photo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  /* SOCIAL DIRECTLY BELOW IMAGE */
  .social-row{
    margin: 25px 0 0 !important;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;
    width: 100%;
  }

  .social-link{
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }

  .connect-text{
    margin-left: 5px;
    font-size: 0.85rem;
  }

  .connect-line{
    display: none;
  }

}



    @media (max-width: 575.98px){
      .brand-logo{width:100%}
      .hero-title{font-size:2.65rem}
      .hero-photo-wrap{height:330px; width: 330px;}
		
      .social-row{gap:12px}
      .social-link{width:34px;height:34px}
      .connect-text{width:100%;margin-left:0;margin-top:4px}
      .connect-line{width:100%;max-width:220px}
      .schools-section{padding-left:12px;padding-right:12px}
      .school-logo-box{height:135px}
      .card-actions{padding:16px 6px 10px}
      .school-btn{font-size:.78rem;padding:5px 8px}
		
	
    }